From 88af03d2c863b1e29788c98851abec483256f9ce Mon Sep 17 00:00:00 2001 From: Benjamin Auder Date: Tue, 11 Dec 2018 02:16:24 +0100 Subject: [PATCH] Draft settings on variant page (unfinished) --- TODO | 3 + public/javascripts/components/game.js | 82 +++++++++++++++++++++------ public/stylesheets/layout.sass | 1 + public/stylesheets/variant.sass | 7 +-- 4 files changed, 71 insertions(+), 22 deletions(-) create mode 100644 TODO diff --git a/TODO b/TODO new file mode 100644 index 00000000..9f8c3541 --- /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 44786ff9..68142084 100644 --- 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 93e460ff..b6458590 100644 --- 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 eb74cc06..1f3b977c 100644 --- 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 -- 2.44.0