1 let $ = document
; //shortcut
6 // https://stackoverflow.com/a/27747377/12660887
7 function generateId (len
) {
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('');
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
;
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");
33 // "Material" input field name
34 let inputName
= document
.getElementById("myName");
35 let formField
= document
.getElementById("ng-name");
36 const setActive
= (active
) => {
38 formField
.classList
.add("form-field--is-active");
40 formField
.classList
.remove("form-field--is-active");
42 ? formField
.classList
.remove("form-field--is-filled")
43 : formField
.classList
.add("form-field--is-filled");
47 inputName
.onblur
= () => setActive(false);
48 inputName
.onfocus
= () => setActive(true);
54 // 'onChange' event on name input text field [HTML]
55 localStorage
.setItem("name", $.getElementById("myName").value
);
58 // Turn a "tab" on, and "close" all others
59 function toggleVisible(element
) {
60 for (elt
of document
.querySelectorAll("main > div")) {
61 if (elt
.id
!= element
)
62 elt
.style
.display
= "none";
64 elt
.style
.display
= "block";
66 if (element
== "boardContainer") {
67 // Avoid smartphone scrolling effects (TODO?)
68 document
.querySelector("html").style
.overflow
= "hidden";
69 document
.body
.style
.overflow
= "hidden";
72 document
.querySelector("html").style
.overflow
= "visible";
73 document
.body
.style
.overflow
= "visible";
74 // Workaround "superposed texts" effect:
75 if (element
== "newGame")
82 seek_vname
= $.getElementById("selectVariant").value
;
84 {vname: seek_vname
, name: localStorage
.getItem("name")})
86 toggleVisible("pendingSeek");
89 function cancelSeek() {
90 if (send("cancelseek", {vname: seek_vname
}))
91 toggleVisible("newGame");
94 function sendRematch(random
) {
95 if (send("rematch", {gid: gid
, random: !!random
}))
96 toggleVisible("pendingRematch");
98 function cancelRematch() {
99 if (send("norematch", {gid: gid
}))
100 toggleVisible("newGame");
103 // Play with a friend (or not ^^)
104 function showNewGameForm() {
105 const vname
= $.getElementById("selectVariant").value
;
106 if (vname
== "_random")
107 alert("Select a variant first");
109 $.getElementById("gameLink").innerHTML
= "";
110 $.getElementById("selectColor").selectedIndex
= 0;
111 toggleVisible("newGameForm");
112 import(`/variants/${vname}/class.js`).then(module
=> {
113 window
.V
= module
.default;
114 for (const [k
, v
] of Object
.entries(V
.Aliases
))
120 function backToNormalSeek() {
121 toggleVisible("newGame");
124 function toggleStyle(event
, obj
) {
125 const word
= obj
.innerHTML
;
126 options
[word
] = !options
[word
];
127 event
.target
.classList
.toggle("highlight-word");
131 function prepareOptions() {
133 let optHtml
= V
.Options
.select
.map(select
=> { return `
134 <div class="option-select">
135 <label for="var_${select.variable}">${select.label}</label>
137 <select id="var_${select.variable}" data-numeric="1">` +
138 select
.options
.map(option
=> { return `
140 value="${option.value}"
141 ${option.value == select.defaut ? " selected" : ""}
147 <span class="focus"></span>
151 optHtml
+= V
.Options
.check
.map(check
=> {
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>
162 if (V
.Options
.styles
.length
>= 1) {
163 optHtml
+= '<div class="words">';
165 const stylesLength
= V
.Options
.styles
.length
;
166 while (i
< stylesLength
) {
167 optHtml
+= '<div class="row">';
168 for (let j
=i
; j
<i
+4; j
++) {
169 if (j
== stylesLength
)
171 const style
= V
.Options
.styles
[j
];
172 optHtml
+= `<span onClick="toggleStyle(event, this)">${style}</span>`;
179 $.getElementById("gameOptions").innerHTML
= optHtml
;
182 function getGameLink() {
183 const vname
= $.getElementById("selectVariant").value
;
184 const color
= $.getElementById("selectColor").value
;
185 for (const select
of $.querySelectorAll("#gameOptions select")) {
186 let value
= select
.value
;
187 if (select
.attributes
["data-numeric"])
188 value
= parseInt(value
, 10);
190 options
[ select
.id
.split("_")[1] ] = value
;
192 for (const check
of $.querySelectorAll("#gameOptions input")) {
194 options
[ check
.id
.split("_")[1] ] = check
.checked
;
198 player: {sid: sid
, name: localStorage
.getItem("name"), color: color
},
203 function fillGameInfos(gameInfos
, oppIndex
) {
204 fetch(`/variants/${gameInfos.vname}/rules.html`)
205 .then(res
=> res
.text())
208 <div class="players-info">
210 <span class="bold">${gameInfos.vdisp}</span>
211 <span>vs. ${gameInfos.players[oppIndex].name}</span>
214 const options
= Object
.entries(gameInfos
.options
);
215 if (options
.length
> 0) {
216 htmlContent
+= '<div class="options-info">';
218 while (i
< options
.length
) {
219 htmlContent
+= '<div class="row">';
220 for (let j
=i
; j
<i
+4; j
++) {
221 if (j
== options
.length
)
223 const opt
= options
[j
];
227 '<span class="option">' +
228 (opt
[1] === true ? opt
[0] : `${opt[0]}:${opt[1]}`) + " " +
231 htmlContent
+= "</div>";
234 htmlContent
+= "</div>";
237 <div class="rules">${txt}</div>
238 <div class="btn-wrap">
239 <button onClick="toggleGameInfos()">Back to game</button>
241 $.getElementById("gameInfos").innerHTML
= htmlContent
;
248 let socket
, gid
, recoAttempt
= 0;
249 const autoReconnectDelay
= () => {
250 return [100, 200, 500, 1000, 3000, 10000, 30000][Math
.min(recoAttempt
, 6)];
253 function send(code
, data
, opts
) {
255 const trySend
= () => {
256 if (socket
.readyState
== 1) {
257 socket
.send(JSON
.stringify(Object
.assign({code: code
}, data
)));
264 const firstTry
= trySend();
267 // Retry for a few seconds (sending move)
269 const retryLoop
= setInterval(
271 if (trySend() || ++sendAttempt
>= 3)
272 clearInterval(retryLoop
);
273 if (sendAttempt
>= 3 && opts
.error
)
285 function copyClipboard(msg
) {
286 navigator
.clipboard
.writeText(msg
);
288 function getWhatsApp(msg
) {
289 return `https://api.whatsapp.com/send?text=${encodeURIComponent(msg)}`;
292 const tryResumeGame
= () => {
294 // If a game is found, resume it:
295 if (localStorage
.getItem("gid")) {
296 gid
= localStorage
.getItem("gid");
301 error: () => alert("Cannot load game: no connection")
305 // If URL indicates "play with a friend", start game:
306 const hashIdx
= document
.URL
.indexOf('#');
308 const urlParts
= $.URL
.split('#');
310 localStorage
.setItem("gid", gid
);
311 history
.replaceState(null, '', urlParts
[0]); //hide game ID
313 {gid: gid
, name: localStorage
.getItem("name")},
316 error: () => alert("Cannot load game: no connection")
322 const messageCenter
= (msg
) => {
323 const obj
= JSON
.parse(msg
.data
);
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
= `
338 <a href="${getWhatsApp(link)}">WhatsApp</a>
340 <span onClick="copyClipboard('${link}')">ToClipboard</span>
346 // Game vs. friend joined after 1 minute (try again!)
348 alert("Game no longer available");
350 // Get infos of a running game (already launched)
354 // Tried to resume a game which is now gone:
356 localStorage
.removeItem("gid");
358 // Receive opponent's move:
360 // Basic check: was it really opponent's turn?
361 if (vr
.turn
== playerColor
)
365 vr
.playReceivedMove(obj
.moves
, () => {
366 if (vr
.getCurrentScore(obj
.moves
[obj
.moves
.length
-1]) != "*") {
367 localStorage
.removeItem("gid");
368 setTimeout( () => toggleVisible("gameStopped"), 2000 );
371 toggleTurnIndicator(true);
374 // Opponent stopped game (draw, abort, resign...)
376 toggleVisible("gameStopped");
377 localStorage
.removeItem("gid");
379 // Opponent cancelled rematch:
381 toggleVisible("newGame");
386 const handleError
= (err
) => {
387 if (err
.code
=== "ECONNREFUSED") {
388 removeAllListeners();
389 alert("Server refused connection. Please reload page later");
394 const handleClose
= () => {
396 removeAllListeners();
398 }, autoReconnectDelay());
401 function removeAllListeners() {
402 socket
.removeEventListener("open", tryResumeGame
);
403 socket
.removeEventListener("message", messageCenter
);
404 socket
.removeEventListener("error", handleError
);
405 socket
.removeEventListener("close", handleClose
);
408 function connectToWSS() {
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
);
422 function toggleTurnIndicator(myTurn
) {
424 $.getElementById("boardContainer").querySelector(".chessboard");
426 indicator
.style
.outline
= "thick solid green";
428 indicator
.style
.outline
= "thick solid lightgrey";
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();
437 if (Notification
.permission
=== "granted")
439 else if (Notification
.permission
!== "denied") {
440 Notification
.requestPermission().then(permission
=> {
441 if (permission
=== "granted")
449 const afterPlay
= (move) => {
450 const callbackAfterSend
= () => {
452 const result
= vr
.getCurrentScore(move);
455 toggleVisible("gameStopped");
456 send("gameover", {gid: gid
});
460 // Pack into one moves array, then send
462 if (vr
.turn
!= playerColor
) {
463 toggleTurnIndicator(false);
465 {gid: gid
, moves: curMoves
, fen: vr
.getFen()},
468 success: callbackAfterSend
,
469 error: () => alert("Move not sent: reload page")
475 function initializeGame(obj
) {
476 const options
= obj
.options
|| {};
477 import(`/variants/${obj.vname}/class.js`).then(module
=> {
478 window
.V
= module
.default;
479 for (const [k
, v
] of Object
.entries(V
.Aliases
))
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(
487 `<link id="${newId}" rel="stylesheet"
488 href="/variants/${obj.vname}/style.css"/>`);
490 playerColor
= (sid
== obj
.players
[0].sid
? "w" : "b");
491 // Init + remove potential extra DOM elements from a previous game:
492 document
.getElementById("boardContainer").innerHTML
= `
493 <div id="upLeftInfos"
494 onClick="toggleGameInfos()">
496 viewBox="0.5 0.5 100 100">
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"/>
502 <div id="upRightStop"
503 onClick="confirmStopGame()">
505 viewBox="0 0 533.333 533.333">
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"/>
511 <div class="resizeable chessboard"></div>`;
513 seed: obj
.seed
, //may be null if FEN already exists (running game)
515 element: "boardContainer",
517 afterPlay: afterPlay
,
521 // Game creation: both players set FEN, in case of one is offline
522 send("setfen", {gid: obj
.gid
, fen: vr
.getFen()});
523 localStorage
.setItem("gid", obj
.gid
);
525 const select
= $.getElementById("selectVariant");
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
;
533 fillGameInfos(obj
, playerColor
== "w" ? 1 : 0);
535 toggleVisible("gameInfos");
537 toggleVisible("boardContainer");
538 toggleTurnIndicator(vr
.turn
== playerColor
);
542 function confirmStopGame() {
543 if (confirm("Stop game?") && send("gameover", {gid: gid
, relay: true})) {
544 localStorage
.removeItem("gid");
545 toggleVisible("gameStopped");
549 function toggleGameInfos() {
550 if ($.getElementById("gameInfos").style
.display
== "none")
551 toggleVisible("gameInfos");
553 toggleVisible("boardContainer");
556 $.body
.addEventListener("keydown", (e
) => {
557 if (!localStorage
.getItem("gid"))
561 else if (e
.keyCode
== 32) {