-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
107 lines (94 loc) · 4.9 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
102
103
104
105
106
107
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="src/style.css">
<title>Mill Game</title>
</head>
<body>
<main id="app">
<div class="status-bar">
<h1><span id="room-ind"></span><span id="player-indicator">Welcome</span></h1>
<button class="hidden" id="reset">New Game</button>
</div>
<div class="play-piece" id="play-piece"></div>
<div class="flex">
<div class="container" id="pieces-p1"></div>
<div class="board">
<div class="point" style="--place: a7;" id="a7" tabindex="0"></div>
<div class="point" style="--place: d7;" id="d7" tabindex="0"></div>
<div class="point" style="--place: g7;" id="g7" tabindex="0"></div>
<div class="point" style="--place: b6;" id="b6" tabindex="0"></div>
<div class="point" style="--place: d6;" id="d6" tabindex="0"></div>
<div class="point" style="--place: f6;" id="f6" tabindex="0"></div>
<div class="point" style="--place: c5;" id="c5" tabindex="0"></div>
<div class="point" style="--place: d5;" id="d5" tabindex="0"></div>
<div class="point" style="--place: e5;" id="e5" tabindex="0"></div>
<div class="point" style="--place: a4;" id="a4" tabindex="0"></div>
<div class="point" style="--place: b4;" id="b4" tabindex="0"></div>
<div class="point" style="--place: c4;" id="c4" tabindex="0"></div>
<div class="point" style="--place: e4;" id="e4" tabindex="0"></div>
<div class="point" style="--place: f4;" id="f4" tabindex="0"></div>
<div class="point" style="--place: g4;" id="g4" tabindex="0"></div>
<div class="point" style="--place: c3;" id="c3" tabindex="0"></div>
<div class="point" style="--place: d3;" id="d3" tabindex="0"></div>
<div class="point" style="--place: e3;" id="e3" tabindex="0"></div>
<div class="point" style="--place: b2;" id="b2" tabindex="0"></div>
<div class="point" style="--place: d2;" id="d2" tabindex="0"></div>
<div class="point" style="--place: f2;" id="f2" tabindex="0"></div>
<div class="point" style="--place: a1;" id="a1" tabindex="0"></div>
<div class="point" style="--place: d1;" id="d1" tabindex="0"></div>
<div class="point" style="--place: g1;" id="g1" tabindex="0"></div>
<div class="line" style="--line: 1/1/2/8;"></div>
<div class="line" style="--line: 2/2/3/7;"></div>
<div class="line" style="--line: 3/3/4/6;"></div>
<div class="line" style="--line: 4/1/5/4;"></div>
<div class="line" style="--line: 4/5/5/8;"></div>
<div class="line" style="--line: 5/3/6/6;"></div>
<div class="line" style="--line: 6/2/7/7;"></div>
<div class="line" style="--line: 7/1/8/8;"></div>
<div class="line-v" style="--line: 1/1/8/2"></div>
<div class="line-v" style="--line: 2/2/7/3"></div>
<div class="line-v" style="--line: 3/3/6/4"></div>
<div class="line-v" style="--line: 1/4/4/5"></div>
<div class="line-v" style="--line: 5/4/8/5"></div>
<div class="line-v" style="--line: 3/5/6/6"></div>
<div class="line-v" style="--line: 2/6/7/7"></div>
<div class="line-v" style="--line: 1/7/8/8"></div>
<div class="mill hidden"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15 15">
<path fill="currentColor"
d="M6 5L3.5 7.5l1 1L7 6v-.5l.5-.5l.5.5V6l2.5 2.5l1-1L9 5h-.5L8 4.5l.5-.5H9l2.5-2.5l-1-1L8 3v.5l-.5.5l-.5-.5V3L4.5.5l-1 1L6 4h.5l.5.5l-.5.5zm5.5 8h-1l-1-4l-2-2l-2 2l-1 4h-1a.5.5 0 1 0 0 1h8a.5.5 0 0 0 0-1M8 13H7v-1.502c0-.275.223-.498.498-.498c.277 0 .502.225.502.502z" />
</svg></div>
</div>
<div class="container" id="pieces-p2"></div>
</div>
<dialog class="mode" id="confirm-next-round">
<h2>No move possible</h2>
<form method="dialog">
<button>Next Round</button>
</form>
</dialog>
<dialog class="mode" id="mode">
<h2>Nine Men's Morris</h2>
<form method="dialog">
<button type="submit" value="local">Local</button>
<span>or</span>
<button type="submit" value="online">Online</button>
</form>
</dialog>
<aside class="rooms hidden">
<form autocomplete="off" id="socketForm">
<div><label for="room">Room </label><input type="text" name="room" id="room">
</div>
<div><label for="name">Name </label><input type="text" name="name" id="name">
</div>
<button>Connect</button>
</form>
<button id="close-ws" class="hidden">Close</button>
<p id="msg" class="hidden"></p>
</aside>
</main>
<script type="module" src="/src/main.ts"></script>
</body>
</html>