Draft settings on variant page (unfinished)

diff --git a/TODO b/TODO
new file mode 100644 (file)
index 0000000..9f8c354
--- /dev/null
+++ b/TODO
@@ -0,0 +1,3 @@
+Idée pour bouton settings de même taille que turn indicators :
+dessiner un bouton de taille selon écran, invisible mais toujours là
+--> le prendre comme référence (pour turn indicator)

diff --git a/public/javascripts/components/game.js b/public/javascripts/components/game.js
index 44786ff..6814208 100644 (file)
--- a/public/javascripts/components/game.js
+++ b/public/javascripts/components/game.js
@@ -17,7 +17,9 @@ Vue.component('my-game', {
                        fenStart: "",
                        incheck: [],
                        pgnTxt: "",
-                       expert: (getCookie("expert") === "1" ? true : false),
+                       hints: (getCookie("hints") === "1" ? true : false),
+                       //color: TODO (lichess, chess.com, chesstempo)
+                       //sound: TODO (0,1, 2)
                };
        },
        render(h) {
@@ -86,7 +88,10 @@ Vue.component('my-game', {
                        const squareWidth = !!square00
                                ? parseFloat(window.getComputedStyle(square00).width.slice(0,-2))
                                : 0;
-                       const indicWidth = (squareWidth>0 ? squareWidth/2 : 20);
+                       const settingsBtnElt = document.getElementById("settingsBtn");
+                       const indicWidth = !!settingsBtnElt //-2 for border:
+                               ? parseFloat(window.getComputedStyle(settingsBtnElt).height.slice(0,-2)) - 2
+                               : 30;
                        if (this.mode == "human")
                        {
                                let connectedIndic = h(
@@ -122,23 +127,25 @@ Vue.component('my-game', {
                                }
                        );
                        elementArray.push(turnIndic);
-                       let expertSwitch = h(
+                       let settingsBtn = h(
                                'button',
                                {
-                                       on: { click: this.toggleExpertMode },
-                                       attrs: { "aria-label": 'Toggle expert mode' },
+                                       on: { click: this.showSettings },
+                                       attrs: {
+                                               "aria-label": 'Settings',
+                                               "id": "settingsBtn",
+                                       },
                                        'class': {
-                                               "tooltip":true,
+                                               "tooltip": true,
                                                "topindicator": true,
                                                "indic-right": true,
-                                               "expert-switch": true,
-                                               "expert-mode": this.expert,
+                                               "settings-btn": true,
                                                "small": smallScreen,
                                        },
                                },
-                               [h('i', { 'class': { "material-icons": true } }, "visibility_off")]
+                               [h('i', { 'class': { "material-icons": true } }, "settings")]
                        );
-                       elementArray.push(expertSwitch);
+                       elementArray.push(settingsBtn);
                        let choices = h('div',
                                {
                                        attrs: { "id": "choices" },
@@ -210,7 +217,7 @@ Vue.component('my-game', {
                                                                        )
                                                                );
                                                        }
-                                                       if (!this.expert && hintSquares[ci][cj])
+                                                       if (this.hints && hintSquares[ci][cj])
                                                        {
                                                                elems.push(
                                                                        h(
@@ -227,7 +234,7 @@ Vue.component('my-game', {
                                                                );
                                                        }
                                                        const lm = this.vr.lastMove;
-                                                       const showLight = !this.expert &&
+                                                       const showLight = this.hints &&
                                                                (this.mode!="idle" || this.cursor==this.vr.moves.length);
                                                        return h(
                                                                'div',
@@ -533,6 +540,44 @@ Vue.component('my-game', {
                        )
                ];
                elementArray = elementArray.concat(modalFenEdit);
+               const modalSettings = [
+                       h('input',
+                               {
+                                       attrs: { "id": "modal-settings", type: "checkbox" },
+                                       "class": { "modal": true },
+                               }),
+                       h('div',
+                               {
+                                       attrs: { "role": "dialog", "aria-labelledby": "modal-settings" },
+                               },
+                               [
+                                       h('div',
+                                               {
+                                                       "class": { "card": true, "smallpad": true },
+                                               },
+                                               [
+                                                       h('label',
+                                                               {
+                                                                       attrs: { "id": "close-settings", "for": "modal-settings" },
+                                                                       "class": { "modal-close": true },
+                                                               }
+                                                       ),
+                                                       h('h3',
+                                                               {
+                                                                       "class": { "section": true },
+                                                                       domProps: { innerHTML: "User settings" },
+                                                               }
+                                                       ),
+                                                       // https://minicss.org/docs#forms-and-input
+                                                       h('p', { domProps: { innerHTML: "TODO: hints" } }),
+                                                       h('p', { domProps: { innerHTML: "TODO: board(color)" } }),
+                                                       h('p', { domProps: { innerHTML: "TODO: sound(level)" } }),
+                                               ]
+                                       )
+                               ]
+                       )
+               ];
+               elementArray = elementArray.concat(modalSettings);
                const actions = h('div',
                        {
                                attrs: { "id": "actions" },
@@ -786,6 +831,14 @@ Vue.component('my-game', {
                        elt.style.visibility = "hidden";
                        setTimeout(() => { elt.style.visibility="visible"; }, 100);
                },
+               showSettings: function(e) {
+                       this.getRidOfTooltip(e.currentTarget);
+                       document.getElementById("modal-settings").checked = true;
+               },
+               toggleHints: function() {
+                       this.hints = !this.hints;
+                       setCookie("hints", this.hints ? "1" : "0");
+               },
                clickGameSeek: function(e) {
                        this.getRidOfTooltip(e.currentTarget);
                        if (this.mode == "human")
@@ -809,11 +862,6 @@ Vue.component('my-game', {
                        this.getRidOfTooltip(e.currentTarget);
                        document.getElementById("modal-fenedit").checked = true;
                },
-               toggleExpertMode: function(e) {
-                       this.getRidOfTooltip(e.currentTarget);
-                       this.expert = !this.expert;
-                       setCookie("expert", this.expert ? "1" : "0");
-               },
                resign: function(e) {
                        this.getRidOfTooltip(e.currentTarget);
                        if (this.mode == "human" && this.oppConnected)

diff --git a/public/stylesheets/layout.sass b/public/stylesheets/layout.sass
index 93e460f..b645859 100644 (file)
--- a/public/stylesheets/layout.sass
+++ b/public/stylesheets/layout.sass
@@ -5,6 +5,7 @@ html, *
 body
   padding: 0
   background-color: #f2f2f2
+  //min-width: 240px
 
 @media screen and (min-width: 800px)
   .card

diff --git a/public/stylesheets/variant.sass b/public/stylesheets/variant.sass
index eb74cc0..1f3b977 100644 (file)
--- a/public/stylesheets/variant.sass
+++ b/public/stylesheets/variant.sass
@@ -73,11 +73,8 @@ figure.diagram-container > .diagram
 .disconnected
   background-color: red
 
-.expert-switch
-  padding: 3px 7px
-
-.expert-mode, button.expert-mode:hover
-  background-color: #ffcc99
+.settings-btn
+  padding: 6px 7px 0 7px
 
 .white-turn
   background-color: white