-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
271 lines (269 loc) · 19.6 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
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
<!DOCTYPE html>
<!--
* grrd's Reversi
* Copyright (c) 2022 Gerard Tyedmers, [email protected]
* Licensed under the MPL 2.0 License
-->
<html lang="en">
<head>
<title>grrd's Reversi</title>
<meta name="description" content="grrd's Reversi is a free HTML5 Game that works offline"/>
<link rel="manifest" href="manifest/appmanifest.json">
<link rel="icon" href="images/icon.svg">
<link rel="apple-touch-icon" href="images/icon_ios.png">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" content="#444"/>
<meta name="apple-mobile-web-app-title" content="Reversi">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="styles/app.css">
</head>
<body>
<audio id="woosh_sound" preload="auto">
<source src="sounds/woosh.mp3" type="audio/mp3"/>
<source src="sounds/woosh.mp3" type="audio/mpeg"/>
<source src="sounds/woosh.ogg" type="audio/ogg"/>
</audio>
<audio id="ding_sound" preload="auto">
<source src="sounds/ding.mp3" type="audio/mp3"/>
<source src="sounds/ding.mp3" type="audio/mpeg"/>
<source src="sounds/ding.ogg" type="audio/ogg"/>
</audio>
<main class="page" id="iTitle">
<fieldset id="iTitleFieldset" class="content">
<header>
<div class="title1">
<svg id="iTitleImg" viewbox="0 0 600 120" width="100%" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<linearGradient id="a" x1="0%" x2="0%" y1="0%" y2="100%"><stop offset="20%" stop-color="#fdb100"/><stop offset="100%" stop-color="#BD1500"/></linearGradient>
<linearGradient id="eWhite" x1="0%" x2="0%" y1="100%" y2="0%"><stop offset="-50%" stop-color="#fdb100"/><stop offset="110%" stop-color="#BD1500"/></linearGradient>
<linearGradient id="eBlack" x1="0%" x2="0%" y1="0%" y2="100%"><stop offset="-50%" stop-color="#fdb100"/><stop offset="100%" stop-color="#BD1500"/></linearGradient>
<path id="grrd" d="M148.675 84.755q-3.38 0-5.2-1.56-1.755-1.56-1.755-3.51 0-1.69 1.235-3 1.235-1.235 3.64-1.235.845 0 1.95.195l1.755.195q-.065-1.69-.78-3.185-.65-1.495-1.69-2.86-1-1.43-2-2.47-2 3.835-4 6.37-2 2.535-4.29 4.81-1.17 1.17-2.47 1.17-1 0-1.69-.715-.65-.78-.65-1.885 0-1.3.91-2.405l.845-1q3.575-4.42 5.395-7.28 1.17-1.885 2.34-4.485 1.235-2.6 3.185-7.085 1.235-2.86 5.135-2.86 1.82 0 2.535.325.715.325.715 1 0 .39-.26 1.235-.26.845-.715 1.69-1.17 2.34-1.17 4 0 .975.65 2.145.715 1.17 2.145 3 2.08 2.73 3.12 4.68 1.105 1.885 1.105 4.16 0 2.73-1.3 5.2-1.235 2.405-3.51 3.9-2.275 1.495-5.2 1.495zM125.6 50.37q-1.625 0-2.73-.845-1-.91-.845-3l1.3-12.415q.65-6 5.655-6 4.29 0 4.29 4 0 .91-.325 2.405l-2.6 11.96q-.455 2.08-1.755 3-1.3.845-2.99.845zm-16.25 18.135q.715 5.33 2.08 10.53.26.845.26 1.755 0 3-3.575 3-2 0-3.12-1.105-1-1.105-2-4.16l-.065-.26q-2.47 3-4.485 4.095-2 1-4.55 1-4 0-6.565-3-2.535-3-2.535-7.735 0-5.2 2.21-9.62 2.21-4.42 6-7.215 3.835-2.86 8.58-3.445Q102.915 40.1 106.36 31q3.51-9.1 9.295-9.1 2.795 0 4.615 2.535 1.885 2.535 1.885 7.67 0 7.15-3.51 16.705-3.51 9.555-9.295 19.695zm5.59-40.235q-1.885 0-3.575 9.62-1.625 9.62-2.21 21 7.215-15.6 7.215-25.35 0-2.47-.455-3.835-.39-1.365-1-1.365zM96.22 76.76q1.3 0 2.47-1 1.235-1 3.12-3.77-.65-4.745-.65-9.815 0-2.0.065-3.12-3.575 1-6 4.745t-2.34 8.19q0 4.745 3.25 4.745zm-35.49 6.565q-2.47 0-3.51-2.6-1-2.6-1-8.32 0-8.45 2.405-16.0.585-1.885 1.885-2.73 1.365-1 3.77-.91 1.3 0 1.82.325t.52 1.235q0 1-.975 4.68-.65 2.6-1 4.55-.39 1.95-.65 4.81 2.145-5.59 4.81-9.1 2.665-3.51 5.2-5 2.6-1.495 4.745-1.495 4.225 0 4.225 4.225 0 .845-.585 4.095-.52 2.6-.52 3.25 0 2.275 1.625 2.275 1.82 0 4.68-2.86.845-.845 1.755-.845.845 0 1.3.78.52.715.52 1.95 0 2.405-1.3 3.77-1.82 1.885-4.29 3.25-2.405 1.3-5.135 1.3-3.445 0-5.265-1.755Q73 70.39 73 67.4q0-.975.195-1.95.13-1.3.13-1.755 0-1-.715-1-.975 0-2.6 2.21-1.56 2.145-3.12 5.72-1.56 3.575-2.535 7.54-.715 3-1.69 4.16-.91 1-2.925 1zm-29.575 0q-2.47 0-3.51-2.6-.975-2.6-.975-8.32 0-8.45 2.405-16.0.585-1.885 1.885-2.73 1.365-.91 3.77-.91 1.3 0 1.82.325t.52 1.235q0 1-.975 4.68-.65 2.6-1 4.55-.39 1.95-.65 4.81 2.145-5.59 4.81-9.1 2.665-3.51 5.2-5 2.6-1.495 4.745-1.495 4.225 0 4.225 4.225 0 .845-.585 4.095-.52 2.6-.52 3.25 0 2.275 1.625 2.275 1.82 0 4.68-2.86.845-.845 1.755-.845.845 0 1.3.78.52.715.52 1.95 0 2.405-1.3 3.77-1.82 1.885-4.29 3.25-2.405 1.3-5.135 1.3-3.445 0-5.265-1.755-1.755-1.755-1.755-4.745 0-.975.195-1.95.13-1.3.13-1.755 0-1-.715-1-.975 0-2.6 2.21-1.56 2.145-3.12 5.72-1.56 3.575-2.535 7.54-.715 3-1.69 4.16-.91 1-2.925 1zM29.4 68.635q.845 0 1.3.845.52.78.52 2 0 1.495-.455 2.34-.455.845-1.43 1.495-5.59 3.77-8.19 5.59l-4.16 2.795q-2.47 13.455-6.5 21.125-3.965 7.735-10.14 7.735-3.315 0-5.395-2.08-2.08-2-2.08-5.33 0-4.615 3.64-9.945 3.64-5.265 13.65-13l.39-2.535q-1.105 1.755-2.925 2.73-1.755.91-3.51.91-4 0-6.435-2.925-2.405-2.925-2.405-7.67 0-5.2 2.405-9.815 2.405-4.68 6.37-7.475 4-2.86 8.515-2.86 1.43 0 1.885.585.52.52.845 1.95 1.235-.26 2.86-.26 1.625 0 2.275.52.715.455.715 1.885 0 .78-.065 1.235-.26 2-1.625 10.205-.26 1.56-.585 3.445-.26 1.82-.585 3.9 5-3.9 9.62-6.89.845-.52 1.495-.52zM6.455 76.76q1.495 0 2.86-1.82 1.365-1.82 1.95-5.2l2.08-11.115q-2.665.065-4.94 2.08-2.275 1.95-3.64 5.2-1.365 3.25-1.365 6.89 0 2.0.78 2.99.845.975 2.275.975zM1.06 106.27q1.625 0 3.64-3.9 2.08-3.9 3.965-12.415-5 4.29-7.215 7.735-2.21 3.445-2.21 6 0 1.105.39 1.82.455.715 1.43.715z"/>
<path id="e" d="M327.289 69.805h-47.812q.645 5.742 3.105 8.555 3.457 4 9 4 3.516 0 6.68-1.758 1.934-1.113 4.16-3.926l23.496 2.168q-5.39 9.375-13 13.477-7.617 4-21.855 4-12.364 0-19.453-3.457-7.09-3.515-11.778-11.074-4.629-7.617-4.629-17.871 0-14.59 9.317-23.613 9.375-9 25.84-9 13.359 0 21.093 4 7.735 4 11.778 11.719 4 7.676 4 19.98zm-24.258-11.426q-.703-6.914-3.75-9.902-3-3-7.91-3-5.683 0-9.082 4.512-2.168 2.813-2.754 8.379z"/>
</defs>
<use xlink:href="#grrd" stroke="url(#a)" stroke-width="5" transform="rotate(-8)"/>
<use xlink:href="#grrd" fill="#fff" transform="rotate(-8)"/>
<path stroke="url(#a)" stroke-width="4" d="M571.25 9.102h23.848v16.23H571.25Zm0 23.671h23.848V95H571.25Zm-69.398 45 23.671-2.226q1.465 4.219 4.102 6 2.637 1.816 7 1.816 4.805 0 7.442-2 2-1.524 2-3.809 0-2.578-2.695-4-2-1-10.254-2.461-12.422-2.168-17.285-4-4.805-1.875-8.144-6.27-3.282-4.394-3.282-10 0-6.152 3.574-10.605 3.575-4.453 9.844-6.621 6.27-2.227 16.817-2.227 11.132 0 16.406 1.7 5.332 1.699 8.848 5.273 3.574 3.574 6 9.668l-22.618 2.226q-.879-3-3-4.394-2.812-1.875-6.796-1.875-4 0-6 1.465-1.817 1.406-1.817 3.457 0 2.285 2.344 3.457 2.344 1.172 10.195 2.11 11.895 1.347 17.696 3.75 5.8 2.401 8.847 6.855 3.106 4.453 3.106 9.785 0 5.39-3.281 10.488-3.223 5.098-10.254 8.145-7 3-19 3-17 0-24.317-4.863-7.207-4.864-9.257-13.829zm-42.797-45h22.324V42.97q3.223-6.621 6.621-9.082 3.457-2.52 8.496-2.52 5.274 0 11.543 3.281l-7.383 17q-4.219-1.758-6.68-1.758-4.687 0-7.265 3.867-3.691 5.45-3.691 20.39V95h-24zm-139.559 0h24.844l12.07 39.434 12.48-39.434h24.083L366.547 95h-21.152ZM179.141 95V9.102h44.238q12.305 0 18.809 2.109 6.503 2.11 10.488 7.852 4 5.683 4 13.886 0 7.149-3 12.364-3 5.156-8.379 8.378-3.398 2-9.316 3.399 4.746 1.582 7 3.164 1.465 1 4.219 4.512 2.812 3.457 3.75 5.332L263.633 95h-30l-14.18-26.25q-2.695-5.098-4.805-6.621-2.87-2-6.503-2H205.8V95Zm26.66-51.094h11.191q1.817 0 7-1.172 2.637-.527 4.278-2.695Q230 37.871 230 35.06q0-4.16-2.637-6.387-2.636-2.227-10-2.227H205.8z"/>
<g>
<use class="eWhite vanishWhite" xlink:href="#e"/>
<use class="eBlack" xlink:href="#e"/>
</g>
<g transform="translate(130 0)">
<use class="eWhite vanishWhite" xlink:href="#e"/>
<use class="eBlack" xlink:href="#e"/>
</g>
</svg>
</div>
<div class="flex-right">
<div class="mini-buttonlist">
<button id="iInfo" class="mini-button">
<img class="mini-img shadow" src="images/info.svg" alt="Info">
</button>
<button id="iSettings" class="mini-button">
<img class="mini-img shadow" src="images/settings.svg" alt="Settings">
</button>
</div>
</div>
</header>
<nav>
<button id="i2Players" class="list-button" data-player2="human">
<img class="button-img shadow" src="images/2player.svg" alt="2 players game"><span id="l2Players">2 Players</span>
</button>
<button id="iEasy" class="list-button" data-player2="easy">
<img class="button-img shadow" src="images/easy.svg" alt="easy game"><span id="lEasy">Easy</span>
</button>
<button id="iMedium" class="list-button" data-player2="medium">
<img class="button-img shadow" src="images/medium.svg" alt="medium game"><span id="lMedium" >Medium</span>
</button>
<button id="iHard" class="list-button" data-player2="hard">
<img class="button-img shadow" src="images/hard.svg" alt="hard game"><span id="lHard">Hard</span>
</button>
<button id="iOnline" class="list-button" data-player2="online">
<img class="button-img shadow" src="images/2online.svg" alt="online game"><span id="lOnline">Online</span>
</button>
</nav>
</fieldset>
<div id="iPopupInfo" class="overflow popup-init">
<div class="popup">
<div class="popup-head">
</div>
<div class="popup-body">
<p id="lHelp" class="popup-content">Place your stone so that at least one of your opponent's stones is flanked by your stones.
All of your opponent's stones between your pieces are then flipped over to become your color.
The object of the game is to own more stones than your opponent when the game is over.</p>
<p id="lDev" class="popup-content">Developed by Gérard Tyedmers.</p>
<p id="lLook">Have a look at my other games:</p>
<table class="w100">
<tr>
<td><a href="https://grrd01.github.io/Puzzle" target="_blank" rel="noopener" tabindex="-1"><img src="images/puzzle.svg" alt="Puzzle" class="w60 shadow"></a></td>
<td><span id="iPuzzle"></span> <a href="https://grrd01.github.io/Puzzle" target="_blank" rel="noopener">grrd's Puzzle</a></td>
</tr>
<tr>
<td><a href="https://grrd01.github.io/Dice/" target="_blank" rel="noopener" tabindex="-1"><img src="images/dice.svg" alt="Dice" class="w60 shadow"></a></td>
<td><span id="iDice"></span> <a href="https://grrd01.github.io/Dice/" target="_blank" rel="noopener">grrd's Dice</a></td>
</tr>
<tr>
<td><a href="https://grrd01.github.io/4inaRow/" target="_blank" rel="noopener" tabindex="-1"><img src="images/4inarow.svg" alt="4 in a Row" class="w60 shadow"></a></td>
<td><span id="iRow"></span> <a href="https://grrd01.github.io/4inaRow/" target="_blank" rel="noopener">grrd's 4 in a Row</a></td>
</tr>
<tr>
<td><a href="https://grrd01.github.io/4inaRow/" target="_blank" rel="noopener" tabindex="-1"><img src="images/tictactoe.svg" alt="TicTacToe" class="w60 shadow"></a></td>
<td><span id="iTicTacToe"></span> <a href="https://grrd01.github.io/TicTacToe/" target="_blank" rel="noopener">grrd's Tic Tac Toe</a></td>
</tr>
<tr>
<td><a href="https://grrd01.github.io/Memo/" target="_blank" rel="noopener" tabindex="-1"><img src="images/memo.svg" alt="Memo" class="w60 shadow"></a></td>
<td><span id="iMemo"></span> <a href="https://grrd01.github.io/Memo/" target="_blank" rel="noopener">grrd's Memo</a></td>
</tr>
<tr>
<td><a href="mailto:[email protected]" tabindex="-1"><img src="images/mail.svg" alt="Mail" class="w60 shadow"></a></td>
<td>E-mail: <a href="mailto:[email protected]">[email protected]</a></td>
</tr>
</table>
</div>
<div class="popup-footer">
<button id="iInfoClose" class="button">
<span class="button-span"><img class="w25 shadow" src="images/ok.svg" alt="OK"> OK</span>
</button>
</div>
</div>
<div class="buffer"></div>
</div>
<div id="iPopupSettings" class="overflow popup-init">
<div class="popup">
<div class="popup-head">
</div>
<div class="popup-body">
<div class="popup-content">
<img class="w30" src="images/player.svg" alt="name">
<span id="lName">Your name</span>
<div class="fr">
<input id="iName" value="" type="text" size="10" maxlength="10" aria-labelledby="lName">
</div>
</div>
<div class="popup-content">
<img class="w30" src="images/language.svg" alt="language">
<span id="lSelLang">Select language</span>
<div class="fr">
<select id="iLang" aria-labelledby="lSelLang">
<option value="0">English</option>
<option value="1">Deutsch</option>
<option value="2">Francais</option>
</select>
</div>
</div>
<div class="popup-content">
<img class="w30" src="images/design.svg" alt="design">
<span id="lDesign">Select Design</span>
<div class="fr">
<select id="iStyle" aria-labelledby="lDesign">
<option value="0">Light</option>
<option value="1">Dark</option>
<option value="2">Automatic</option>
</select>
</div>
</div>
<div class="popup-content">
<img class="w30" src="images/bulp.svg" alt="hints">
<span id="lShow">Show possible moves</span>
<div class="fr">
<input class="tgl tgl-skewed" id="iShowMoves" type="checkbox" checked="checked"/>
<label class="tgl-btn" data-tg-off="OFF" data-tg-on="ON" for="iShowMoves"></label>
</div>
</div>
<div class="popup-content">
<img class="w30" src="images/sound_on.svg" alt="sound">
<span id="lSound">Play sounds</span>
<div class="fr">
<input class="tgl tgl-skewed" id="iSound" type="checkbox" checked="checked"/>
<label class="tgl-btn" data-tg-off="OFF" data-tg-on="ON" for="iSound"></label>
</div>
</div>
</div>
<div class="popup-footer">
<button id="iSettingsClose" class="button">
<span class="button-span"><img class="w25 shadow" src="images/ok.svg" alt="OK"> OK</span>
</button>
</div>
</div>
<div class="buffer"></div>
</div>
<div id="iPopupOnline" class="overflow popup-init">
<div class="popup">
<div class="popup-head">
</div>
<div class="popup-body">
<h3 id="lWait">Waiting for player 2 ...</h3>
<p id="lWait2">You can play a 1 player game meanwhile.</p>
</div>
<div class="popup-footer">
<button id="iOnlineClose" class="button">
<span class="button-span"><img class="w25 shadow" src="images/ok.svg" alt="OK"> OK</span>
</button>
</div>
</div>
<div class="buffer"></div>
</div>
</main>
<div id="iGame" class="page">
<div id="iScore1"></div>
<div id="iScore2"></div>
<div id="iMessage"></div>
<button id="iClose" class="close-button">
<img class="" src="images/x.svg" alt="close">
</button>
<div id="iPlayground"></div>
<div id="iPopupLeft" class="overflow popup-init">
<div class="popup">
<div class="popup-head">
</div>
<div class="popup-body">
<p id="lLeft">Your opponent has left the game.</p>
</div>
<div class="popup-footer">
<button id="iLeftClose" class="button">
<span class="button-span"><img class="w25 shadow" src="images/ok.svg" alt="OK"> OK</span>
</button>
</div>
</div>
<div class="buffer"></div>
</div>
<div id="iPopupGameOver" class="overflow popup-init">
<div class="popup">
<div class="popup-head">
</div>
<div class="popup-body">
<p id="iFinalMessage">Game Over.</p>
<div class="cScore1">
<div id="iPlayer1"></div>
<div id="iPlayer2"></div>
</div>
<div class="cScore">
<div id="iFinalScore1"></div>
<div id="lStones"></div>
<div id="iFinalScore2"></div>
</div>
<div class="cScore">
<div id="iGames1"></div>
<div id="lGames"></div>
<div id="iGames2"></div>
</div>
<p id="lAgain">Play again?</p>
</div>
<div class="popup-footer">
<button id="iYes" class="button">
<span class="button-span"><img class="w25 shadow" src="images/ok.svg" alt="yes"> <span id="lYes">Yes</span></span>
</button>
<button id="iNo" class="button">
<span class="button-span"><img class="w25 shadow" src="images/x.svg" alt="no"> <span id="lNo">No</span></span>
</button>
</div>
</div>
<div class="buffer"></div>
</div>
</div>
<!--script src="http://localhost:49153/socket.io/socket.io.js"></script-->
<script src="https://grrd.a2hosted.com:49153/socket.io/socket.io.js"></script>
<script src="scripts/app.js"></script>
</body>
</html>