X-Git-Url: https://git.auder.net/?a=blobdiff_plain;f=app.js;h=56ba25a02854c2f60d3014372d730ebd8c5cfbe5;hb=86f3c2cd59432a00121af015c505499a57edf568;hp=21d205c409cb3263999dd9c81d3301e5acb9b481;hpb=c7bf7b1b10a6d5059f75f540787aba3daaa435f7;p=xogo.git
diff --git a/app.js b/app.js
index 21d205c..56ba25a 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;
@@ -89,47 +110,64 @@ function toggleStyle(e, word) {
let options;
function prepareOptions(Rules) {
options = {};
- let optHtml = "";
- for (let select of Rules.Options.select) {
- optHtml += `
-
-
-
-
- ${txt}
-
- `;
+ ${txt}
+
+
+
`;
$.getElementById("gameInfos").innerHTML = htmlContent;
});
};