-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
101 lines (82 loc) · 3.21 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
<!DOCTYPE html>
<html lang="zh">
<head>
<!--<meta http-equiv="expires" content="0">-->
<!--<meta http-equiv="pragma" content="no-cache">-->
<!--<meta http-equiv="cache-control" content="no-cache">-->
<meta charset="UTF-8">
<title>图上的围棋</title>
<style>
#canvas {
width: 100%;
height: 100%;
max-width: 1000px; /*避免宽屏吓人*/
/* 现实烦恼来得快：解决 iOS 浏览器事件绑定区域点击闪屏问题 */
-webkit-tap-highlight-color: transparent;
}
button, p, ol {
font-size: 2em;
}
select {
font-size: 1.8em;
width: 30%;
}
#control {
text-align: center;
}
</style>
</head>
<body>
<div id="board">
<!--妙啊，html 里 width height 规定画布大小，css 里 width height 规定缩放？这符合标准吗？-->
<canvas id="canvas" width="1000" height="1000">alternative</canvas>
</div>
<div id="meta">
<div id="control">
棋盘：
<select id="board-options">
</select>
<button id="restart">重新开始</button>
<button id="pass">放弃一手</button>
<br>
<input type="checkbox" id="five"><label for="five">附加五子棋规则（仅对方格棋盘有效）</label>
<input type="checkbox" id="same" disabled><label for="same">禁止全同再现（TODO）</label>
</div>
<p>下一手：<span id="next">黑</span>棋</p>
<p id="info">请点击或触摸下棋。双方在同一设备（电脑、手机、平板）上轮流落子。如果在电脑上玩且棋盘太大，请把浏览器窗口拖窄一点。在手机、平板上玩请用竖屏。</p>
<p>Author: <a href="https://sonion.xyz">SOnion</a></p>
<p>Version: v0.4.1 UI 小改动</p>
<p>Fork me on GitHub! <a href="https://github.com/SnowOnion/Goraph">https://github.com/SnowOnion/Goraph</a></p>
</div>
<script type="module" src="script/index.js"></script>
<div id="disqus_thread"></div>
<script>
var disqus_config = function () {
this.page.url = "https://app.sonion.xyz/goraph/";
this.page.identifier = "goraph";
this.page.title = document.title;
this.language = "zh-CN".replace(/-.*/, '');
};
// wow, gee TODO tell him
// (function()
// {
// var d = document, s = d.createElement('script');
// s.src = 'https://geelawblog.disqus.com/embed.js';
// s.type = 'text/javascript';
// s.async = true;
// s.setAttribute('data-timestamp', +new Date());
// (d.head || d.body).appendChild(s);
// s = d.getElementById('comments-area');
// s.className += ' ' + s.getAttribute('gl-class-with-script');
// })();
(function () { // DON'T EDIT BELOW THIS LINE
var d = document, s = d.createElement('script');
s.src = 'https://sonion-app.disqus.com/embed.js';
s.setAttribute('data-timestamp', +new Date());
(d.head || d.body).appendChild(s);
})();
</script>
<noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by
Disqus.</a></noscript>
</body>
</html>