Saving state (draft, not working)

diff --git a/TODO b/TODO
index 9f8c354..94f9cfa 100644 (file)
--- a/TODO
+++ b/TODO
@@ -1,3 +1,5 @@
 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)
+==> non, mais 2 tailles a priori (small sur smallscreens: à déterminer)
+modals --> in pug view

diff --git a/public/javascripts/components/game.js b/public/javascripts/components/game.js
index 6814208..021fa97 100644 (file)
--- a/public/javascripts/components/game.js
+++ b/public/javascripts/components/game.js
@@ -18,8 +18,9 @@ Vue.component('my-game', {
                        incheck: [],
                        pgnTxt: "",
                        hints: (getCookie("hints") === "1" ? true : false),
-                       //color: TODO (lichess, chess.com, chesstempo)
-                       //sound: TODO (0,1, 2)
+                       color: getCookie("color", "lichess"), //lichess, chesscom or chesstempo
+                       // sound level: 0 = no sound, 1 = sound only on newgame, 2 = always
+                       sound: getCookie("sound", "2"),
                };
        },
        render(h) {
@@ -91,7 +92,7 @@ Vue.component('my-game', {
                        const settingsBtnElt = document.getElementById("settingsBtn");
                        const indicWidth = !!settingsBtnElt //-2 for border:
                                ? parseFloat(window.getComputedStyle(settingsBtnElt).height.slice(0,-2)) - 2
-                               : 30;
+                               : 37; //TODO: always 37?
                        if (this.mode == "human")
                        {
                                let connectedIndic = h(
@@ -140,7 +141,6 @@ Vue.component('my-game', {
                                                "topindicator": true,
                                                "indic-right": true,
                                                "settings-btn": true,
-                                               "small": smallScreen,
                                        },
                                },
                                [h('i', { 'class': { "material-icons": true } }, "settings")]
@@ -244,6 +244,7 @@ Vue.component('my-game', {
                                                                                ['board'+sizeY]: true,
                                                                                'light-square': (i+j)%2==0,
                                                                                'dark-square': (i+j)%2==1,
+                                                                               [this.color]: true,
                                                                                'highlight': showLight && !!lm && _.isMatch(lm.end, {x:ci,y:cj}),
                                                                                'incheck': showLight && incheckSq[ci][cj],
                                                                        },
@@ -434,6 +435,7 @@ Vue.component('my-game', {
                        ];
                        elementArray = elementArray.concat(modalEog);
                }
+               // TODO: next 3 modals in (pug) view directly?!
                const modalNewgame = [
                        h('input',
                                {
@@ -565,11 +567,27 @@ Vue.component('my-game', {
                                                        h('h3',
                                                                {
                                                                        "class": { "section": true },
-                                                                       domProps: { innerHTML: "User settings" },
+                                                                       domProps: { innerHTML: "Preferences" },
                                                                }
                                                        ),
                                                        // https://minicss.org/docs#forms-and-input
-                                                       h('p', { domProps: { innerHTML: "TODO: hints" } }),
+                                                       h('input',
+                                                               {
+                                                                       attrs: {
+                                                                               "id": "setHints",
+                                                                               type: "checkbox",
+                                                                               checked: this.hints,
+                                                                       },
+                                                               }
+                                                       ),
+                                                       h('label',
+                                                               {
+                                                                       attrs: {
+                                                                               for: "setHints",
+                                                                       },
+                                                                       domProps: { innerHTML: "Show hints?" },
+                                                               },
+                                                       ),
                                                        h('p', { domProps: { innerHTML: "TODO: board(color)" } }),
                                                        h('p', { domProps: { innerHTML: "TODO: sound(level)" } }),
                                                ]

diff --git a/public/javascripts/utils/misc.js b/public/javascripts/utils/misc.js
index 0b68ac4..f2927c3 100644 (file)
--- a/public/javascripts/utils/misc.js
+++ b/public/javascripts/utils/misc.js
@@ -1,5 +1,5 @@
 // Source: https://www.quirksmode.org/js/cookies.html
-function setCookie(name,value)
+function setCookie(name, value)
 {
        var date = new Date();
        date.setTime(date.getTime()+(183*24*60*60*1000)); //6 months
@@ -7,7 +7,7 @@ function setCookie(name,value)
        document.cookie = name+"="+value+expires+"; path=/";
 }
 
-function getCookie(name) {
+function getCookie(name, defaut) {
        var nameEQ = name + "=";
        var ca = document.cookie.split(';');
        for (var i=0;i < ca.length;i++)
@@ -18,7 +18,7 @@ function getCookie(name) {
                if (c.indexOf(nameEQ) == 0)
                        return c.substring(nameEQ.length,c.length);
        }
-       return null;
+       return defaut; //cookie not found
 }
 
 // Random (enough) string for socket and game IDs

diff --git a/public/stylesheets/variant.sass b/public/stylesheets/variant.sass
index 1f3b977..5341217 100644 (file)
--- a/public/stylesheets/variant.sass
+++ b/public/stylesheets/variant.sass
@@ -157,10 +157,18 @@ figure.diagram-container > figcaption
   clear: both
   padding-top: 5px
 
-.light-square
-  background-color: #f0d9b5
-.dark-square
-  background-color: #b58863
+.light-square.lichess
+       background-color: #f0d9b5;
+.dark-square.lichess
+       background-color: #b58863;
+.light-square.chesscom
+       background-color: #e5e5ca;
+.dark-square.chesscom
+       background-color: #6f8f57;
+.light-square.chesstempo
+       background-color: #fdfdfd;
+.dark-square.chesstempo
+       background-color: #88a0a8;
 
 .highlight
   background-color: #00cc66