From: Benjamin Auder Date: Tue, 11 Dec 2018 10:59:09 +0000 (+0100) Subject: Saving state (draft, not working) X-Git-Url: https://git.auder.net/doc/html/css/scripts/pieces/cb.svg?a=commitdiff_plain;h=a897b421785af1c4e04f50995dca0f99da065ec6;p=vchess.git Saving state (draft, not working) --- diff --git a/TODO b/TODO index 9f8c3541..94f9cfa9 100644 --- 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 68142084..021fa978 100644 --- 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 0b68ac45..f2927c34 100644 --- 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 1f3b977c..53412174 100644 --- 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