X-Git-Url: https://git.auder.net/?a=blobdiff_plain;f=app.js;h=5a46190adf4245414050f818aa225f861434fcea;hb=cc2c71836442d7495ec570f8f78c006ea60852e0;hp=c553ce5abbab6e988d8dd9a0db494da010974bc0;hpb=21e8e7122487ae9417c5e7e72c25aa642b7a1226;p=xogo.git diff --git a/app.js b/app.js index c553ce5..5a46190 100644 --- a/app.js +++ b/app.js @@ -30,6 +30,22 @@ if (!localStorage.getItem("name")) const sid = localStorage.getItem("sid"); $.getElementById("myName").value = localStorage.getItem("name"); +// "Material" input field name +let inputName = document.getElementById("myName"); +let formField = document.getElementById("ng-name"); +const setActive = (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.onblur = () => setActive(false); +inputName.onfocus = () => setActive(true); +inputName.focus(); + ///////// // Utils @@ -39,10 +55,15 @@ function setName() { // Turn a "tab" on, and "close" all others function toggleVisible(element) { - for (elt of document.querySelectorAll('body > div')) { + for (elt of document.querySelectorAll('main > div')) { if (elt.id != element) elt.style.display = "none"; else elt.style.display = "block"; } + if (element.id == "newGame") { + // Workaround "superposed texts" effect + inputName.focus(); + inputName.blur(); + } } let seek_vname; @@ -74,8 +95,8 @@ function showNewGameForm() { $.getElementById("selectColor").selectedIndex = 0; toggleVisible("newGameForm"); import(`/variants/${vname}/class.js`).then(module => { - const Rules = module.default; - prepareOptions(Rules); + window.V = module.default; + prepareOptions(); }); } } @@ -87,50 +108,68 @@ function toggleStyle(e, word) { } let options; -function prepareOptions(Rules) { +function prepareOptions() { options = {}; - let optHtml = ""; - for (let select of Rules.Options.select) { - optHtml += ` - -
"; $.getElementById("gameOptions").innerHTML = optHtml; } function getGameLink() { const vname = $.getElementById("selectVariant").value; const color = $.getElementById("selectColor").value; - for (const select of $.querySelectorAll("#gameOptions > select")) { + for (const select of $.querySelectorAll("#gameOptions select")) { let value = select.value; if (select.attributes["data-numeric"]) value = parseInt(value, 10); - options[ select.id.split("_")[1] ] = value; + if (value) options[ select.id.split("_")[1] ] = value; + } + for (const check of $.querySelectorAll("#gameOptions input")) { + if (check.checked) options[ check.id.split("_")[1] ] = check.checked; } - for (const check of $.querySelectorAll("#gameOptions > input")) - options[ check.id.split("_")[1] ] = check.checked; send("creategame", { vname: vname, player: { sid: sid, name: localStorage.getItem("name"), color: color }, @@ -143,28 +182,36 @@ const fillGameInfos = (gameInfos, oppIndex) => { .then(res => res.text()) .then(txt => { let htmlContent = ` -- ${gameInfos.vdisp} - vs. ${gameInfos.players[oppIndex].name} -
-`; - htmlContent += - Object.entries(gameInfos.options).map(opt => { - return ( - '' + - (opt[1] === true ? opt[0] : `${opt[0]}:${opt[1]}`) + - '' - ); - }) - .join(", "); +
+ ${gameInfos.vdisp} + vs. ${gameInfos.players[oppIndex].name} +
+