Commit | Line | Data |
---|---|---|
41534b92 BA |
1 | let $ = document; //shortcut |
2 | ||
3 | /////////////////// | |
4 | // Initialisations | |
5 | ||
6 | // https://stackoverflow.com/a/27747377/12660887 | |
41534b92 | 7 | function generateId (len) { |
f46a68b8 BA |
8 | const dec2hex = (dec) => dec.toString(16).padStart(2, "0"); |
9 | let arr = new Uint8Array(len / 2); //len/2 because 2 chars per hex value | |
10 | window.crypto.getRandomValues(arr); //fill with random integers | |
11 | return Array.from(arr, dec2hex).join(''); | |
41534b92 BA |
12 | } |
13 | ||
14 | // Populate variants dropdown list | |
15 | let dropdown = $.getElementById("selectVariant"); | |
16 | dropdown[0] = new Option("? ? ?", "_random", true, true); | |
17 | dropdown[0].title = "Random variant"; | |
18 | for (let i = 0; i < variants.length; i++) { | |
19 | let newOption = new Option( | |
20 | variants[i].disp || variants[i].name, variants[i].name, false, false); | |
21 | newOption.title = variants[i].desc; | |
22 | dropdown[dropdown.length] = newOption; | |
23 | } | |
24 | ||
25 | // Ensure that I have a socket ID and a name | |
26 | if (!localStorage.getItem("sid")) | |
27 | localStorage.setItem("sid", generateId(8)); | |
28 | if (!localStorage.getItem("name")) | |
29 | localStorage.setItem("name", "@non" + generateId(4)); | |
30 | const sid = localStorage.getItem("sid"); | |
31 | $.getElementById("myName").value = localStorage.getItem("name"); | |
32 | ||
86f3c2cd BA |
33 | // "Material" input field name |
34 | let inputName = document.getElementById("myName"); | |
35 | let formField = document.getElementById("ng-name"); | |
36 | const setActive = (active) => { | |
b4ae3ff6 BA |
37 | if (active) |
38 | formField.classList.add("form-field--is-active"); | |
86f3c2cd BA |
39 | else { |
40 | formField.classList.remove("form-field--is-active"); | |
f46a68b8 BA |
41 | inputName.value == '' |
42 | ? formField.classList.remove("form-field--is-filled") | |
43 | : formField.classList.add("form-field--is-filled"); | |
86f3c2cd BA |
44 | } |
45 | }; | |
f46a68b8 | 46 | setActive(true); |
86f3c2cd BA |
47 | inputName.onblur = () => setActive(false); |
48 | inputName.onfocus = () => setActive(true); | |
86f3c2cd | 49 | |
41534b92 BA |
50 | ///////// |
51 | // Utils | |
52 | ||
53 | function setName() { | |
f46a68b8 | 54 | // 'onChange' event on name input text field [HTML] |
41534b92 BA |
55 | localStorage.setItem("name", $.getElementById("myName").value); |
56 | } | |
57 | ||
58 | // Turn a "tab" on, and "close" all others | |
59 | function toggleVisible(element) { | |
f46a68b8 | 60 | for (elt of document.querySelectorAll("main > div")) { |
b4ae3ff6 BA |
61 | if (elt.id != element) |
62 | elt.style.display = "none"; | |
63 | else | |
64 | elt.style.display = "block"; | |
41534b92 | 65 | } |
a77150a1 | 66 | if (element == "boardContainer") { |
8022d544 BA |
67 | // Avoid smartphone scrolling effects (TODO?) |
68 | document.querySelector("html").style.overflow = "hidden"; | |
69 | document.body.style.overflow = "hidden"; | |
70 | } | |
71 | else { | |
72 | document.querySelector("html").style.overflow = "visible"; | |
73 | document.body.style.overflow = "visible"; | |
f46a68b8 | 74 | // Workaround "superposed texts" effect: |
b4ae3ff6 BA |
75 | if (element == "newGame") |
76 | setActive(false); | |
86f3c2cd | 77 | } |
41534b92 BA |
78 | } |
79 | ||
80 | let seek_vname; | |
81 | function seekGame() { | |
82 | seek_vname = $.getElementById("selectVariant").value; | |
f46a68b8 BA |
83 | if (send("seekgame", |
84 | {vname: seek_vname, name: localStorage.getItem("name")}) | |
85 | ) { | |
86 | toggleVisible("pendingSeek"); | |
87 | } | |
41534b92 BA |
88 | } |
89 | function cancelSeek() { | |
b4ae3ff6 BA |
90 | if (send("cancelseek", {vname: seek_vname})) |
91 | toggleVisible("newGame"); | |
41534b92 BA |
92 | } |
93 | ||
32f57b42 BA |
94 | function sendRematch(random) { |
95 | if (send("rematch", {gid: gid, random: !!random})) | |
96 | toggleVisible("pendingRematch"); | |
41534b92 BA |
97 | } |
98 | function cancelRematch() { | |
b4ae3ff6 BA |
99 | if (send("norematch", {gid: gid})) |
100 | toggleVisible("newGame"); | |
41534b92 BA |
101 | } |
102 | ||
103 | // Play with a friend (or not ^^) | |
104 | function showNewGameForm() { | |
105 | const vname = $.getElementById("selectVariant").value; | |
b4ae3ff6 BA |
106 | if (vname == "_random") |
107 | alert("Select a variant first"); | |
41534b92 BA |
108 | else { |
109 | $.getElementById("gameLink").innerHTML = ""; | |
110 | $.getElementById("selectColor").selectedIndex = 0; | |
111 | toggleVisible("newGameForm"); | |
112 | import(`/variants/${vname}/class.js`).then(module => { | |
cc2c7183 | 113 | window.V = module.default; |
b4ae3ff6 BA |
114 | for (const [k, v] of Object.entries(V.Aliases)) |
115 | window[k] = v; | |
cc2c7183 | 116 | prepareOptions(); |
41534b92 BA |
117 | }); |
118 | } | |
119 | } | |
f46a68b8 BA |
120 | function backToNormalSeek() { |
121 | toggleVisible("newGame"); | |
122 | } | |
41534b92 | 123 | |
f46a68b8 BA |
124 | function toggleStyle(event, obj) { |
125 | const word = obj.innerHTML; | |
41534b92 | 126 | options[word] = !options[word]; |
f46a68b8 | 127 | event.target.classList.toggle("highlight-word"); |
41534b92 BA |
128 | } |
129 | ||
130 | let options; | |
cc2c7183 | 131 | function prepareOptions() { |
41534b92 | 132 | options = {}; |
cc2c7183 | 133 | let optHtml = V.Options.select.map(select => { return ` |
86f3c2cd BA |
134 | <div class="option-select"> |
135 | <label for="var_${select.variable}">${select.label}</label> | |
136 | <div class="select"> | |
137 | <select id="var_${select.variable}" data-numeric="1">` + | |
138 | select.options.map(option => { return ` | |
139 | <option | |
140 | value="${option.value}" | |
141 | ${option.value == select.defaut ? " selected" : ""} | |
142 | > | |
143 | ${option.label} | |
144 | </option>`; | |
145 | }).join("") + ` | |
146 | </select> | |
147 | <span class="focus"></span> | |
148 | </div> | |
149 | </div>`; | |
150 | }).join(""); | |
cc2c7183 | 151 | optHtml += V.Options.check.map(check => { |
86f3c2cd BA |
152 | return ` |
153 | <div class="option-check"> | |
154 | <label class="checkbox"> | |
155 | <input id="var_${check.variable}" | |
156 | type="checkbox"${check.defaut ? " checked" : ""}/> | |
157 | <span class="spacer"></span> | |
158 | <span>${check.label}</span> | |
159 | </label> | |
160 | </div>`; | |
161 | }).join(""); | |
cc2c7183 | 162 | if (V.Options.styles.length >= 1) { |
86f3c2cd BA |
163 | optHtml += '<div class="words">'; |
164 | let i = 0; | |
cc2c7183 | 165 | const stylesLength = V.Options.styles.length; |
86f3c2cd BA |
166 | while (i < stylesLength) { |
167 | optHtml += '<div class="row">'; | |
168 | for (let j=i; j<i+4; j++) { | |
b4ae3ff6 BA |
169 | if (j == stylesLength) |
170 | break; | |
cc2c7183 | 171 | const style = V.Options.styles[j]; |
f46a68b8 | 172 | optHtml += `<span onClick="toggleStyle(event, this)">${style}</span>`; |
86f3c2cd BA |
173 | } |
174 | optHtml += "</div>"; | |
175 | i += 4; | |
41534b92 | 176 | } |
86f3c2cd | 177 | optHtml += "</div>"; |
41534b92 | 178 | } |
41534b92 BA |
179 | $.getElementById("gameOptions").innerHTML = optHtml; |
180 | } | |
181 | ||
182 | function getGameLink() { | |
183 | const vname = $.getElementById("selectVariant").value; | |
184 | const color = $.getElementById("selectColor").value; | |
86f3c2cd | 185 | for (const select of $.querySelectorAll("#gameOptions select")) { |
41534b92 | 186 | let value = select.value; |
b4ae3ff6 BA |
187 | if (select.attributes["data-numeric"]) |
188 | value = parseInt(value, 10); | |
189 | if (value) | |
190 | options[ select.id.split("_")[1] ] = value; | |
cc2c7183 BA |
191 | } |
192 | for (const check of $.querySelectorAll("#gameOptions input")) { | |
b4ae3ff6 BA |
193 | if (check.checked) |
194 | options[ check.id.split("_")[1] ] = check.checked; | |
41534b92 | 195 | } |
41534b92 BA |
196 | send("creategame", { |
197 | vname: vname, | |
f46a68b8 | 198 | player: {sid: sid, name: localStorage.getItem("name"), color: color}, |
41534b92 BA |
199 | options: options |
200 | }); | |
201 | } | |
202 | ||
f46a68b8 | 203 | function fillGameInfos(gameInfos, oppIndex) { |
41534b92 BA |
204 | fetch(`/variants/${gameInfos.vname}/rules.html`) |
205 | .then(res => res.text()) | |
206 | .then(txt => { | |
207 | let htmlContent = ` | |
86f3c2cd BA |
208 | <div class="players-info"> |
209 | <p> | |
210 | <span class="bold">${gameInfos.vdisp}</span> | |
211 | <span>vs. ${gameInfos.players[oppIndex].name}</span> | |
212 | </p> | |
213 | </div>`; | |
214 | const options = Object.entries(gameInfos.options); | |
215 | if (options.length > 0) { | |
216 | htmlContent += '<div class="options-info">'; | |
217 | let i = 0; | |
218 | while (i < options.length) { | |
219 | htmlContent += '<div class="row">'; | |
220 | for (let j=i; j<i+4; j++) { | |
b4ae3ff6 BA |
221 | if (j == options.length) |
222 | break; | |
86f3c2cd | 223 | const opt = options[j]; |
b4ae3ff6 BA |
224 | if (!opt[1]) |
225 | continue; | |
86f3c2cd BA |
226 | htmlContent += |
227 | '<span class="option">' + | |
228 | (opt[1] === true ? opt[0] : `${opt[0]}:${opt[1]}`) + " " + | |
f46a68b8 | 229 | "</span>"; |
86f3c2cd BA |
230 | } |
231 | htmlContent += "</div>"; | |
232 | i += 4; | |
233 | } | |
234 | htmlContent += "</div>"; | |
235 | } | |
41534b92 | 236 | htmlContent += ` |
86f3c2cd BA |
237 | <div class="rules">${txt}</div> |
238 | <div class="btn-wrap"> | |
239 | <button onClick="toggleGameInfos()">Back to game</button> | |
240 | </div>`; | |
41534b92 BA |
241 | $.getElementById("gameInfos").innerHTML = htmlContent; |
242 | }); | |
f46a68b8 | 243 | } |
41534b92 BA |
244 | |
245 | //////////////// | |
246 | // Communication | |
247 | ||
f46a68b8 | 248 | let socket, gid, recoAttempt = 0; |
41534b92 | 249 | const autoReconnectDelay = () => { |
f46a68b8 | 250 | return [100, 200, 500, 1000, 3000, 10000, 30000][Math.min(recoAttempt, 6)]; |
41534b92 BA |
251 | }; |
252 | ||
f46a68b8 BA |
253 | function send(code, data, opts) { |
254 | opts = opts || {}; | |
255 | const trySend = () => { | |
256 | if (socket.readyState == 1) { | |
257 | socket.send(JSON.stringify(Object.assign({code: code}, data))); | |
b4ae3ff6 BA |
258 | if (opts.success) |
259 | opts.success(); | |
f46a68b8 BA |
260 | return true; |
261 | } | |
262 | return false; | |
263 | }; | |
264 | const firstTry = trySend(); | |
265 | if (!firstTry) { | |
266 | if (opts.retry) { | |
267 | // Retry for a few seconds (sending move) | |
268 | let sendAttempt = 1; | |
269 | const retryLoop = setInterval( | |
270 | () => { | |
b4ae3ff6 BA |
271 | if (trySend() || ++sendAttempt >= 3) |
272 | clearInterval(retryLoop); | |
273 | if (sendAttempt >= 3 && opts.error) | |
274 | opts.error(); | |
f46a68b8 BA |
275 | }, |
276 | 1000 | |
277 | ); | |
278 | } | |
b4ae3ff6 BA |
279 | else if (opts.error) |
280 | opts.error(); | |
f46a68b8 BA |
281 | } |
282 | return firstTry; | |
283 | } | |
284 | ||
285 | function copyClipboard(msg) { | |
286 | navigator.clipboard.writeText(msg); | |
287 | } | |
41534b92 BA |
288 | function getWhatsApp(msg) { |
289 | return `https://api.whatsapp.com/send?text=${encodeURIComponent(msg)}`; | |
290 | } | |
291 | ||
292 | const tryResumeGame = () => { | |
f46a68b8 | 293 | recoAttempt = 0; |
41534b92 BA |
294 | // If a game is found, resume it: |
295 | if (localStorage.getItem("gid")) { | |
296 | gid = localStorage.getItem("gid"); | |
f46a68b8 BA |
297 | send("getgame", |
298 | {gid: gid}, | |
299 | { | |
300 | retry: true, | |
301 | error: () => alert("Cannot load game: no connection") | |
302 | }); | |
41534b92 BA |
303 | } |
304 | else { | |
305 | // If URL indicates "play with a friend", start game: | |
306 | const hashIdx = document.URL.indexOf('#'); | |
307 | if (hashIdx >= 0) { | |
308 | const urlParts = $.URL.split('#'); | |
309 | gid = urlParts[1]; | |
41534b92 | 310 | localStorage.setItem("gid", gid); |
f46a68b8 BA |
311 | history.replaceState(null, '', urlParts[0]); //hide game ID |
312 | send("joingame", | |
313 | {gid: gid, name: localStorage.getItem("name")}, | |
314 | { | |
315 | retry: true, | |
316 | error: () => alert("Cannot load game: no connection") | |
317 | }); | |
41534b92 BA |
318 | } |
319 | } | |
320 | }; | |
321 | ||
322 | const messageCenter = (msg) => { | |
323 | const obj = JSON.parse(msg.data); | |
324 | switch (obj.code) { | |
325 | // Start new game: | |
326 | case "gamestart": { | |
b4ae3ff6 BA |
327 | if (document.hidden) |
328 | notifyMe("game"); | |
41534b92 BA |
329 | gid = obj.gid; |
330 | initializeGame(obj); | |
331 | break; | |
332 | } | |
333 | // Game vs. friend just created on server: share link now | |
334 | case "gamecreated": { | |
335 | const link = `${Params.http_server}/#${obj.gid}`; | |
336 | $.getElementById("gameLink").innerHTML = ` | |
337 | <p> | |
338 | <a href="${getWhatsApp(link)}">WhatsApp</a> | |
339 | / | |
f46a68b8 | 340 | <span onClick="copyClipboard('${link}')">ToClipboard</span> |
41534b92 BA |
341 | </p> |
342 | <p>${link}</p> | |
343 | `; | |
344 | break; | |
345 | } | |
346 | // Game vs. friend joined after 1 minute (try again!) | |
347 | case "jointoolate": | |
348 | alert("Game no longer available"); | |
349 | break; | |
350 | // Get infos of a running game (already launched) | |
351 | case "gameinfo": | |
352 | initializeGame(obj); | |
353 | break; | |
354 | // Tried to resume a game which is now gone: | |
355 | case "nogame": | |
356 | localStorage.removeItem("gid"); | |
357 | break; | |
358 | // Receive opponent's move: | |
359 | case "newmove": | |
f46a68b8 | 360 | // Basic check: was it really opponent's turn? |
b4ae3ff6 BA |
361 | if (vr.turn == playerColor) |
362 | break; | |
363 | if (document.hidden) | |
364 | notifyMe("move"); | |
41534b92 BA |
365 | vr.playReceivedMove(obj.moves, () => { |
366 | if (vr.getCurrentScore(obj.moves[obj.moves.length-1]) != "*") { | |
367 | localStorage.removeItem("gid"); | |
368 | setTimeout( () => toggleVisible("gameStopped"), 2000 ); | |
369 | } | |
b4ae3ff6 BA |
370 | else |
371 | toggleTurnIndicator(true); | |
41534b92 BA |
372 | }); |
373 | break; | |
374 | // Opponent stopped game (draw, abort, resign...) | |
375 | case "gameover": | |
376 | toggleVisible("gameStopped"); | |
377 | localStorage.removeItem("gid"); | |
378 | break; | |
379 | // Opponent cancelled rematch: | |
380 | case "closerematch": | |
381 | toggleVisible("newGame"); | |
382 | break; | |
383 | } | |
384 | }; | |
385 | ||
386 | const handleError = (err) => { | |
f46a68b8 | 387 | if (err.code === "ECONNREFUSED") { |
41534b92 BA |
388 | removeAllListeners(); |
389 | alert("Server refused connection. Please reload page later"); | |
390 | } | |
391 | socket.close(); | |
392 | }; | |
393 | ||
394 | const handleClose = () => { | |
395 | setTimeout(() => { | |
396 | removeAllListeners(); | |
397 | connectToWSS(); | |
398 | }, autoReconnectDelay()); | |
399 | }; | |
400 | ||
f46a68b8 | 401 | function removeAllListeners() { |
41534b92 BA |
402 | socket.removeEventListener("open", tryResumeGame); |
403 | socket.removeEventListener("message", messageCenter); | |
404 | socket.removeEventListener("error", handleError); | |
405 | socket.removeEventListener("close", handleClose); | |
f46a68b8 | 406 | } |
41534b92 | 407 | |
f46a68b8 | 408 | function connectToWSS() { |
41534b92 BA |
409 | socket = |
410 | new WebSocket(`${Params.socket_server}${Params.socket_path}?sid=${sid}`); | |
411 | socket.addEventListener("open", tryResumeGame); | |
412 | socket.addEventListener("message", messageCenter); | |
413 | socket.addEventListener("error", handleError); | |
414 | socket.addEventListener("close", handleClose); | |
f46a68b8 BA |
415 | recoAttempt++; |
416 | } | |
41534b92 BA |
417 | connectToWSS(); |
418 | ||
41534b92 BA |
419 | /////////// |
420 | // Playing | |
421 | ||
422 | function toggleTurnIndicator(myTurn) { | |
3c61449b BA |
423 | let indicator = |
424 | $.getElementById("boardContainer").querySelector(".chessboard"); | |
b4ae3ff6 BA |
425 | if (myTurn) |
426 | indicator.style.outline = "thick solid green"; | |
427 | else | |
428 | indicator.style.outline = "thick solid lightgrey"; | |
41534b92 BA |
429 | } |
430 | ||
431 | function notifyMe(code) { | |
432 | const doNotify = () => { | |
433 | // NOTE: empty body (TODO?) | |
434 | new Notification("New " + code, { vibrate: [200, 100, 200] }); | |
435 | new Audio("/assets/new_" + code + ".mp3").play(); | |
436 | } | |
b4ae3ff6 BA |
437 | if (Notification.permission === "granted") |
438 | doNotify(); | |
f46a68b8 | 439 | else if (Notification.permission !== "denied") { |
016306e3 | 440 | Notification.requestPermission().then(permission => { |
b4ae3ff6 BA |
441 | if (permission === "granted") |
442 | doNotify(); | |
41534b92 BA |
443 | }); |
444 | } | |
445 | } | |
446 | ||
8a9f61ce | 447 | let curMoves = [], |
f46a68b8 | 448 | lastFen; |
8a9f61ce | 449 | const afterPlay = (move) => { |
f46a68b8 BA |
450 | const callbackAfterSend = () => { |
451 | curMoves = []; | |
452 | const result = vr.getCurrentScore(move); | |
453 | if (result != "*") { | |
454 | setTimeout(() => { | |
455 | toggleVisible("gameStopped"); | |
456 | send("gameover", {gid: gid}); | |
457 | }, 2000); | |
458 | } | |
459 | }; | |
8a9f61ce | 460 | // Pack into one moves array, then send |
f8b43ef7 | 461 | curMoves.push(move); |
21e8e712 | 462 | if (vr.turn != playerColor) { |
41534b92 | 463 | toggleTurnIndicator(false); |
f46a68b8 BA |
464 | send("newmove", |
465 | {gid: gid, moves: curMoves, fen: vr.getFen()}, | |
466 | { | |
467 | retry: true, | |
468 | success: callbackAfterSend, | |
469 | error: () => alert("Move not sent: reload page") | |
470 | }); | |
41534b92 BA |
471 | } |
472 | }; | |
473 | ||
21e8e712 | 474 | let vr, playerColor; |
41534b92 BA |
475 | function initializeGame(obj) { |
476 | const options = obj.options || {}; | |
477 | import(`/variants/${obj.vname}/class.js`).then(module => { | |
cc2c7183 | 478 | window.V = module.default; |
b4ae3ff6 BA |
479 | for (const [k, v] of Object.entries(V.Aliases)) |
480 | window[k] = v; | |
f46a68b8 BA |
481 | // Load CSS. Avoid loading twice the same stylesheet: |
482 | const allIds = [].slice.call($.styleSheets).map(s => s.id); | |
483 | const newId = obj.vname + "_css"; | |
484 | if (!allIds.includes(newId)) { | |
485 | $.getElementsByTagName("head")[0].insertAdjacentHTML( | |
486 | "beforeend", | |
487 | `<link id="${newId}" rel="stylesheet" | |
488 | href="/variants/${obj.vname}/style.css"/>`); | |
489 | } | |
21e8e712 | 490 | playerColor = (sid == obj.players[0].sid ? "w" : "b"); |
41534b92 BA |
491 | // Init + remove potential extra DOM elements from a previous game: |
492 | document.getElementById("boardContainer").innerHTML = ` | |
493 | <div id="upLeftInfos" | |
494 | onClick="toggleGameInfos()"> | |
cc2c7183 BA |
495 | <svg version="1.1" |
496 | viewBox="0.5 0.5 100 100"> | |
497 | <g> | |
498 | <path d="M50.5,0.5c-27.614,0-50,22.386-50,50c0,27.614,22.386,50,50,50s50-22.386,50-50C100.5,22.886,78.114,0.5,50.5,0.5z M60.5,85.5h-20v-40h20V85.5z M50.5,35.5c-5.523,0-10-4.477-10-10s4.477-10,10-10c5.522,0,10,4.477,10,10S56.022,35.5,50.5,35.5z"/> | |
499 | </g> | |
500 | </svg> | |
41534b92 BA |
501 | </div> |
502 | <div id="upRightStop" | |
503 | onClick="confirmStopGame()"> | |
cc2c7183 BA |
504 | <svg version="1.1" |
505 | viewBox="0 0 533.333 533.333"> | |
506 | <g> | |
507 | <path d="M528.468,428.468c-0.002-0.002-0.004-0.004-0.006-0.005L366.667,266.666l161.795-161.797 c0.002-0.002,0.004-0.003,0.006-0.005c1.741-1.742,3.001-3.778,3.809-5.946c2.211-5.925,0.95-12.855-3.814-17.62l-76.431-76.43 c-4.765-4.763-11.694-6.024-17.619-3.812c-2.167,0.807-4.203,2.066-5.946,3.807c0,0.002-0.002,0.003-0.005,0.005L266.667,166.666 L104.87,4.869c-0.002-0.002-0.003-0.003-0.005-0.005c-1.743-1.74-3.778-3-5.945-3.807C92.993-1.156,86.065,0.105,81.3,4.869 L4.869,81.3c-4.764,4.765-6.024,11.694-3.813,17.619c0.808,2.167,2.067,4.205,3.808,5.946c0.002,0.001,0.003,0.003,0.005,0.005 l161.797,161.796L4.869,428.464c-0.001,0.002-0.003,0.003-0.004,0.005c-1.741,1.742-3,3.778-3.809,5.945 c-2.212,5.924-0.951,12.854,3.813,17.619L81.3,528.464c4.766,4.765,11.694,6.025,17.62,3.813c2.167-0.809,4.203-2.068,5.946-3.809 c0.001-0.002,0.003-0.003,0.005-0.005l161.796-161.797l161.795,161.797c0.003,0.001,0.005,0.003,0.007,0.004 c1.743,1.741,3.778,3.001,5.944,3.81c5.927,2.212,12.856,0.951,17.619-3.813l76.43-76.432c4.766-4.765,6.026-11.696,3.815-17.62 C531.469,432.246,530.209,430.21,528.468,428.468z"/> | |
508 | </g> | |
509 | </svg> | |
41534b92 | 510 | </div> |
3c61449b | 511 | <div class="resizeable chessboard"></div>`; |
cc2c7183 | 512 | vr = new V({ |
41534b92 BA |
513 | seed: obj.seed, //may be null if FEN already exists (running game) |
514 | fen: obj.fen, | |
3c61449b | 515 | element: "boardContainer", |
21e8e712 | 516 | color: playerColor, |
41534b92 BA |
517 | afterPlay: afterPlay, |
518 | options: options | |
519 | }); | |
520 | if (!obj.fen) { | |
f46a68b8 BA |
521 | // Game creation: both players set FEN, in case of one is offline |
522 | send("setfen", {gid: obj.gid, fen: vr.getFen()}); | |
41534b92 BA |
523 | localStorage.setItem("gid", obj.gid); |
524 | } | |
525 | const select = $.getElementById("selectVariant"); | |
526 | obj.vdisp = ""; | |
527 | for (let i=0; i<select.options.length; i++) { | |
528 | if (select.options[i].value == obj.vname) { | |
529 | obj.vdisp = select.options[i].text; | |
530 | break; | |
531 | } | |
532 | } | |
21e8e712 | 533 | fillGameInfos(obj, playerColor == "w" ? 1 : 0); |
b4ae3ff6 BA |
534 | if (obj.randvar) |
535 | toggleVisible("gameInfos"); | |
536 | else | |
537 | toggleVisible("boardContainer"); | |
21e8e712 | 538 | toggleTurnIndicator(vr.turn == playerColor); |
41534b92 BA |
539 | }); |
540 | } | |
541 | ||
542 | function confirmStopGame() { | |
f46a68b8 | 543 | if (confirm("Stop game?") && send("gameover", {gid: gid, relay: true})) { |
41534b92 BA |
544 | localStorage.removeItem("gid"); |
545 | toggleVisible("gameStopped"); | |
546 | } | |
547 | } | |
548 | ||
549 | function toggleGameInfos() { | |
550 | if ($.getElementById("gameInfos").style.display == "none") | |
551 | toggleVisible("gameInfos"); | |
b4ae3ff6 BA |
552 | else |
553 | toggleVisible("boardContainer"); | |
41534b92 BA |
554 | } |
555 | ||
556 | $.body.addEventListener("keydown", (e) => { | |
b4ae3ff6 BA |
557 | if (!localStorage.getItem("gid")) |
558 | return; | |
559 | if (e.keyCode == 27) | |
560 | confirmStopGame(); | |
41534b92 BA |
561 | else if (e.keyCode == 32) { |
562 | e.preventDefault(); | |
563 | toggleGameInfos(); | |
564 | } | |
565 | }); |