X-Git-Url: https://git.auder.net/images/pieces/Cwda/current/git-favicon.png?a=blobdiff_plain;f=app.js;h=c5d5c7f6e2a07dbcc6f85b1a8fce75fa1656b28c;hb=253e65f6c4f342e5ac8230d7340ed413354f9c7f;hp=a011513a48b74177845875b71d7cd1345b2eca32;hpb=8022d544e472df7a213f95bd66f64d6f9cb14aaa;p=xogo.git diff --git a/app.js b/app.js index a011513..c5d5c7f 100644 --- a/app.js +++ b/app.js @@ -4,11 +4,11 @@ let $ = document; //shortcut // Initialisations // https://stackoverflow.com/a/27747377/12660887 -function dec2hex (dec) { return dec.toString(16).padStart(2, "0") } function generateId (len) { - var arr = new Uint8Array((len || 40) / 2) - window.crypto.getRandomValues(arr) - return Array.from(arr, dec2hex).join('') + const dec2hex = (dec) => dec.toString(16).padStart(2, "0"); + let arr = new Uint8Array(len / 2); //len/2 because 2 chars per hex value + window.crypto.getRandomValues(arr); //fill with random integers + return Array.from(arr, dec2hex).join(''); } // Populate variants dropdown list @@ -34,32 +34,36 @@ $.getElementById("myName").value = localStorage.getItem("name"); let inputName = document.getElementById("myName"); let formField = document.getElementById("ng-name"); const setActive = (active) => { - if (active) formField.classList.add("form-field--is-active"); + if (active) + formField.classList.add("form-field--is-active"); else { formField.classList.remove("form-field--is-active"); - inputName.value === "" ? - formField.classList.remove("form-field--is-filled") : - formField.classList.add("form-field--is-filled"); + inputName.value == '' + ? formField.classList.remove("form-field--is-filled") + : formField.classList.add("form-field--is-filled"); } }; +setActive(true); inputName.onblur = () => setActive(false); inputName.onfocus = () => setActive(true); -inputName.focus(); ///////// // Utils function setName() { + // 'onChange' event on name input text field [HTML] localStorage.setItem("name", $.getElementById("myName").value); } // Turn a "tab" on, and "close" all others function toggleVisible(element) { - for (elt of document.querySelectorAll('main > div')) { - if (elt.id != element) elt.style.display = "none"; - else elt.style.display = "block"; + for (elt of document.querySelectorAll("main > div")) { + if (elt.id != element) + elt.style.display = "none"; + else + elt.style.display = "block"; } - if (element.id == "boardContainer") { + if (element == "boardContainer") { // Avoid smartphone scrolling effects (TODO?) document.querySelector("html").style.overflow = "hidden"; document.body.style.overflow = "hidden"; @@ -67,63 +71,72 @@ function toggleVisible(element) { else { document.querySelector("html").style.overflow = "visible"; document.body.style.overflow = "visible"; - if (element.id == "newGame") { - // Workaround "superposed texts" effect - inputName.focus(); - inputName.blur(); - } + // Workaround "superposed texts" effect: + if (element == "newGame") + setActive(false); } } let seek_vname; function seekGame() { seek_vname = $.getElementById("selectVariant").value; - send("seekgame", {vname: seek_vname, name: localStorage.getItem("name")}); - toggleVisible("pendingSeek"); + if (send("seekgame", + {vname: seek_vname, name: localStorage.getItem("name")}) + ) { + toggleVisible("pendingSeek"); + } } function cancelSeek() { - send("cancelseek", {vname: seek_vname}); - toggleVisible("newGame"); + if (send("cancelseek", {vname: seek_vname})) + toggleVisible("newGame"); } -function sendRematch() { - send("rematch", { gid: gid }); - toggleVisible("pendingRematch"); +function sendRematch(random) { + if (send("rematch", {gid: gid, random: !!random})) + toggleVisible("pendingRematch"); } function cancelRematch() { - send("norematch", { gid: gid }); - toggleVisible("newGame"); + if (send("norematch", {gid: gid})) + toggleVisible("newGame"); } // Play with a friend (or not ^^) function showNewGameForm() { const vname = $.getElementById("selectVariant").value; - if (vname == "_random") alert("Select a variant first"); + if (vname == "_random") + alert("Select a variant first"); else { $.getElementById("gameLink").innerHTML = ""; $.getElementById("selectColor").selectedIndex = 0; toggleVisible("newGameForm"); import(`/variants/${vname}/class.js`).then(module => { window.V = module.default; + for (const [k, v] of Object.entries(V.Aliases)) + window[k] = v; prepareOptions(); }); } } -function backToNormalSeek() { toggleVisible("newGame"); } +function backToNormalSeek() { + toggleVisible("newGame"); +} -function toggleStyle(e, word) { +function toggleStyle(event, obj) { + const word = obj.innerHTML; options[word] = !options[word]; - e.target.classList.toggle("highlight-word"); + event.target.classList.toggle("highlight-word"); } let options; function prepareOptions() { options = {}; - let optHtml = V.Options.select.map(select => { return ` + let optHtml = ""; + if (V.Options.select) { + optHtml += V.Options.select.map(select => { return `