From: Benjamin Auder Date: Fri, 21 Dec 2018 21:59:43 +0000 (+0100) Subject: Saving state (unfinished styling on variant page) X-Git-Url: https://git.auder.net/%7B%7B%20asset%28%27mixstore/css/img/doc/pieces/cb.svg?a=commitdiff_plain;h=e6dcb115eab52abefa1d54a65af546cf5a0153e9;p=vchess.git Saving state (unfinished styling on variant page) --- diff --git a/public/javascripts/components/game.js b/public/javascripts/components/game.js index 587587fb..80a8e7cb 100644 --- a/public/javascripts/components/game.js +++ b/public/javascripts/components/game.js @@ -15,7 +15,7 @@ Vue.component('my-game', { myid: "", //our ID, always set oppid: "", //opponent ID in case of HH game gameId: "", //useful if opponent started other human games after we disconnected - myname: getCookie("username","anonymous"), + myname: localStorage["username"] || "anonymous", oppName: "anonymous", //opponent name, revealed after a game (if provided) chats: [], //chat messages after human game oppConnected: false, @@ -23,10 +23,10 @@ Vue.component('my-game', { fenStart: "", incheck: [], pgnTxt: "", - hints: (getCookie("hints") === "1" ? true : false), - color: getCookie("color", "lichess"), //lichess, chesscom or chesstempo + hints: (!localStorage["hints"] ? true : localStorage["hints"] === "1"), + color: localStorage["color"] || "lichess", //lichess, chesscom or chesstempo // sound level: 0 = no sound, 1 = sound only on newgame, 2 = always - sound: parseInt(getCookie("sound", "2")), + sound: parseInt(localStorage["sound"] || "2"), // Web worker to play computer moves without freezing interface: compWorker: new Worker('/javascripts/playCompMove.js'), timeStart: undefined, //time when computer starts thinking @@ -522,48 +522,6 @@ Vue.component('my-game', { ]; elementArray = elementArray.concat(modalEog); } - // NOTE: this modal could be in Pug view (no usage of Vue functions or variables) - const modalNewgame = [ - h('input', - { - attrs: { "id": "modal-newgame", type: "checkbox" }, - "class": { "modal": true }, - }), - h('div', - { - attrs: { "role": "dialog", "aria-labelledby": "newGameTxt" }, - }, - [ - h('div', - { - "class": { "card": true, "smallpad": true }, - }, - [ - h('label', - { - attrs: { "id": "close-newgame", "for": "modal-newgame" }, - "class": { "modal-close": true }, - } - ), - h('h3', - { - attrs: { "id": "newGameTxt" }, - "class": { "section": true }, - domProps: { innerHTML: "New game" }, - } - ), - h('p', - { - "class": { "section": true }, - domProps: { innerHTML: "Waiting for opponent..." }, - } - ) - ] - ) - ] - ) - ]; - elementArray = elementArray.concat(modalNewgame); const modalFenEdit = [ h('input', { @@ -1134,7 +1092,7 @@ Vue.component('my-game', { methods: { setMyname: function(e) { this.myname = e.target.value; - setCookie("username",this.myname); + localStorage["username"] = this.myname; }, trySendChat: function(e) { if (e.keyCode == 13) //'enter' key @@ -1248,15 +1206,15 @@ Vue.component('my-game', { }, toggleHints: function() { this.hints = !this.hints; - setCookie("hints", this.hints ? "1" : "0"); + localStorage["hints"] = (this.hints ? "1" : "0"); }, setColor: function(e) { this.color = e.target.options[e.target.selectedIndex].value; - setCookie("color", this.color); + localStorage["color"] = this.color; }, setSound: function(e) { this.sound = parseInt(e.target.options[e.target.selectedIndex].value); - setCookie("sound", this.sound); + localStorage["sound"] = this.sound; }, clickGameSeek: function(e) { this.getRidOfTooltip(e.currentTarget); @@ -1552,8 +1510,6 @@ Vue.component('my-game', { // Not programmatic, or animation is over if (this.mode == "human" && this.vr.turn == this.mycolor) this.conn.send(JSON.stringify({code:"newmove", move:move, oppid:this.oppid})); - if (this.sound == 2) - new Audio("/sounds/chessmove1.mp3").play().catch(err => {}); if (!["idle","chat"].includes(this.mode)) { // Emergency check, if human game started "at the same time" @@ -1562,6 +1518,8 @@ Vue.component('my-game', { return; this.incheck = this.vr.getCheckSquares(move); //is opponent in check? this.vr.play(move, "ingame"); + if (this.sound == 2) + new Audio("/sounds/move.mp3").play().catch(err => {}); if (this.mode == "computer") { // Send the move to web worker (TODO: including his own moves?!) @@ -1608,6 +1566,8 @@ Vue.component('my-game', { if (!!lm) { this.vr.undo(lm); + if (this.sound == 2) + new Audio("/sounds/undo.mp3").play().catch(err => {}); const lmBefore = this.vr.lastMove; if (!!lmBefore) { diff --git a/public/javascripts/index.js b/public/javascripts/index.js index 13004f0e..e460f868 100644 --- a/public/javascripts/index.js +++ b/public/javascripts/index.js @@ -88,9 +88,5 @@ new Vue({ setCookie('visited', '1'); document.getElementById('modalWelcome').checked = false; }, - setLanguage: function(e) { - setCookie("lang", e.target.value); - location.reload(); //to include the right .pug file - }, }, }); diff --git a/public/javascripts/utils/misc.js b/public/javascripts/utils/misc.js index f2927c34..d72e3ce2 100644 --- a/public/javascripts/utils/misc.js +++ b/public/javascripts/utils/misc.js @@ -27,3 +27,11 @@ function getRandString() return (Date.now().toString(36) + Math.random().toString(36).substr(2, 7)) .toUpperCase(); } + +// Used both on index and variant page, to switch language +function setLanguage(e) +{ + console.log(e); + setCookie("lang", e.target.value); + location.reload(); //to include the right .pug file +} diff --git a/public/javascripts/variant.js b/public/javascripts/variant.js index 03dbbdd3..f9fb0c62 100644 --- a/public/javascripts/variant.js +++ b/public/javascripts/variant.js @@ -5,12 +5,13 @@ new Vue({ problem: undefined, //current problem in view }, methods: { - toggleDisplay: function(elt) { - this.display = elt; //show - }, showProblem: function(problemTxt) { this.problem = JSON.parse(problemTxt); this.display = "game"; }, + setDisplay: function(elt) { + this.display = elt; + document.getElementById("drawer-control").checked = false; + }, }, }); diff --git a/public/sounds/chessmove1.mp3 b/public/sounds/move.mp3 similarity index 100% rename from public/sounds/chessmove1.mp3 rename to public/sounds/move.mp3 diff --git a/public/sounds/undo.mp3 b/public/sounds/undo.mp3 new file mode 100644 index 00000000..d7673144 --- /dev/null +++ b/public/sounds/undo.mp3 @@ -0,0 +1 @@ +#$# git-fat 527d57bf4f0c83bbfdcfc18d2f9503c28b8e3cc5 8305 diff --git a/public/stylesheets/index.sass b/public/stylesheets/index.sass index 18db3c95..3b944915 100644 --- a/public/stylesheets/index.sass +++ b/public/stylesheets/index.sass @@ -1,10 +1,3 @@ -.container - padding: 0 - -.row - div - padding: 0 - #header width: 100% background: linear-gradient(#e66465, #9198e5) @@ -85,9 +78,6 @@ @media screen and (max-width: 767px) margin-top: 0 -#b4welcome - max-width: 320px - #readThis margin-top: 0 color: var(--a-link-color) diff --git a/public/stylesheets/layout.sass b/public/stylesheets/layout.sass index 52805f29..38b78b1e 100644 --- a/public/stylesheets/layout.sass +++ b/public/stylesheets/layout.sass @@ -8,6 +8,19 @@ body padding: 0 min-width: 320px +.container + padding: 0 + +.row + div + padding: 0 + .section-content + * + margin-left: 0 + margin-right: 0 + @media screen and (max-width: 767px) + padding: 0 5px + a text-decoration: underline @@ -35,3 +48,7 @@ a [type="checkbox"].modal+div .card max-width: 767px max-height: 100vh +[type="checkbox"].modal+div .card.small-modal + max-width: 320px +[type="checkbox"].modal+div .card.big-modal + max-width: 90vw diff --git a/public/stylesheets/variant.sass b/public/stylesheets/variant.sass index 3631a6ed..efaf1e99 100644 --- a/public/stylesheets/variant.sass +++ b/public/stylesheets/variant.sass @@ -1,16 +1,3 @@ -.container#variantPage - padding: 0 - -@media screen and (max-width: 767px) - .col-sm-12 - padding: 0 - h4 - margin: 0 0 10px 0 - p - margin-left: 0 - margin-right: 0 - padding: 0 3px - #menuBar font-style: italic background: linear-gradient(#e66465, #9198e5) @@ -27,8 +14,6 @@ #menuContainer height: 48px -//TODO: taille modal au cas par cas. standard == 767. Can be larger (welcome, fen...) - .warn padding: 3px color: red @@ -224,9 +209,6 @@ figure.showPieces > figcaption .section-title > h4 padding: 5px -.section-content - padding: 0 5px - ol, ul:not(.browser-default) padding-left: 20px diff --git a/routes/all.js b/routes/all.js index b2318135..691662f1 100644 --- a/routes/all.js +++ b/routes/all.js @@ -66,6 +66,8 @@ router.get("/:vname([a-zA-Z0-9]+)", (req,res,next) => { title: vname + ' Variant', variant: vname, problemArray: problems, + lang: selectLanguage(req, res), + languages: supportedLang, }); } ); diff --git a/views/index.pug b/views/index.pug index 5059f515..c8c90c52 100644 --- a/views/index.pug +++ b/views/index.pug @@ -12,7 +12,6 @@ block content .info-container p vchess.club img(src="/images/index/wildebeest.svg") - // TODO: flags, translations #flagMenu(onClick="document.getElementById('modalLang').checked=true") img(src="/images/flags/" + lang + ".svg") #helpMenu(onClick="document.getElementById('modalHelp').checked=true") @@ -22,54 +21,11 @@ block content my-variant-summary(v-for="(v,idx) in sortedCounts" v-bind:vobj="v" v-bind:index="idx" v-bind:key="v.name") // Modals: - input#modalHelp.modal(type="checkbox") - div(role="dialog") - #help.card - label.modal-close(for="modalHelp") - .section - p.emphasis.bigfont First: watch #[a(href="/demo.webm") demo video] ! - p Then click on a variant... Reminder: - ul - li All games start with a random assymetric position. - li Games are untimed, and played anonymously. - li No chat while playing, to focus on the moves. - .section - h3.red Bug report - p - | Please send an email to - a(href="mailto:contact@vchess.club?subject=[vchess.club] bug report") - | contact@vchess.club - | . - input#modalLang.modal(type="checkbox") - div(role="dialog") - #language.card - label.modal-close(for="modalLang") - .section - fieldset - - - var langName = { - "fr": "French", - "en": "English", - } - label(for="langSelect") Preferred language? - select#langSelect(@change="setLanguage") - each langCode in languages - option(value=langCode selected=(lang==langCode)) - =langName[langCode] - .section - h3.blue Contribute - p - | Browse the - a(href="https://github.com/yagu0/vchess/tree/master/views") - | github repository - | : welcome/en.pug and all files rules/*/en.pug - | should be translated. When it's done, send me the files: - a(href="mailto:contact@vchess.club?subject=[vchess.club] translation") - | contact@vchess.club - | . Thanks! + include modal-lang.pug + include modal-help.pug input#modalB4welcome.modal(type="checkbox") div(role="dialog") - #b4welcome.card.text-center + #b4welcome.card.text-center.small-modal h3.blue First visit? p#readThis(@click="showWelcomeMsg") >>> Please read this <<< case lang diff --git a/views/modal-help.pug b/views/modal-help.pug new file mode 100644 index 00000000..6f1d40aa --- /dev/null +++ b/views/modal-help.pug @@ -0,0 +1,18 @@ +input#modalHelp.modal(type="checkbox") +div(role="dialog") + #help.card + label.modal-close(for="modalHelp") + .section + p.emphasis.bigfont First: watch #[a(href="/demo.webm") demo video] ! + p Then click on a variant... Reminder: + ul + li All games start with a random assymetric position. + li Games are untimed, and played anonymously. + li No chat while playing, to focus on the moves. + .section + h3.red Bug report + p + | Please send an email to + a(href="mailto:contact@vchess.club?subject=[vchess.club] bug report") + | contact@vchess.club + | . diff --git a/views/modal-lang.pug b/views/modal-lang.pug new file mode 100644 index 00000000..f15d0634 --- /dev/null +++ b/views/modal-lang.pug @@ -0,0 +1,27 @@ +input#modalLang.modal(type="checkbox") +div(role="dialog") + #language.card + label.modal-close(for="modalLang") + .section + fieldset + - + var langName = { + "fr": "French", + "en": "English", + } + label(for="langSelect") Preferred language? + select#langSelect(onChange="setLanguage(event)") + each langCode in languages + option(value=langCode selected=(lang==langCode)) + =langName[langCode] + .section + h3.blue Contribute + p + | Browse the + a(href="https://github.com/yagu0/vchess/tree/master/views") + | github repository + | : welcome/en.pug and all files rules/*/en.pug + | should be translated. When it's done, send me the files: + a(href="mailto:contact@vchess.club?subject=[vchess.club] translation") + | contact@vchess.club + | . Thanks! diff --git a/views/variant.pug b/views/variant.pug index 6c2e04b5..89d814b2 100644 --- a/views/variant.pug +++ b/views/variant.pug @@ -6,39 +6,41 @@ block css block content .container#variantPage - .row //TODO: this thing + game/problems/rules iin variant page. Here just h1 + .row #menuContainer.col-sm-12.col-md-10.col-md-offset-1.col-lg-8.col-lg-offset-2 label.drawer-toggle(for="drawer-control") input#drawer-control.drawer(type="checkbox") #menuBar label.drawer-close(for="drawer-control") a(href="/") - img(src="/images/index/unicorn.svg") - span vchess.club - img(src="/images/index/wildebeest.svg") - a(href="#") Home222 - .row - .col-sm-12.col-md-10.col-md-offset-1.col-lg-8.col-lg-offset-2 - label.drawer-toggle(for="drawer-control") - input#drawer-control.drawer(type="checkbox") - div - label.drawer-close(for="drawer-control") - a(href="#") Home - a(href="#") Home222 + i.material-icons home + a(href="#rules" @click="setDisplay('rules')") Rules + a(href="#play" @click="setDisplay('game')") Play! + a(href="#problems" @click="setDisplay('problems')") Problems + #flagMenu(onClick="document.getElementById('modalLang').checked=true") + img(src="/images/flags/" + lang + ".svg") + #helpMenu(onClick="document.getElementById('modalHelp').checked=true") + .info-container + p Help .row - .col-sm-12.col-md-10.col-md-offset-1.col-lg-8.col-lg-offset-2 - h4.variantpage-title.text-center(v-on:click="toggleDisplay('rules')") - | #{variant} Rules - my-rules(v-show="display=='rules'") - .col-sm-12.col-md-10.col-md-offset-1.col-lg-8.col-lg-offset-2 - h4.variantpage-title.text-center(v-on:click="toggleDisplay('game')") - | #{variant} Game - my-game(v-show="display=='game'" v-bind:problem="problem") - .col-sm-12.col-md-10.col-md-offset-1.col-lg-8.col-lg-offset-2 - h4.variantpage-title.text-center(v-on:click="toggleDisplay('problems')") - | #{variant} Problems - my-problems(v-show="display=='problems'" - v-on:show-problem="showProblem($event)") + .col-sm-12.col-md-10.col-md-offset-1.col-lg-8.col-lg-offset-2( + v-show="display=='rules'") + my-rules + .col-sm-12.col-md-10.col-md-offset-1.col-lg-8.col-lg-offset-2( + v-show="display=='game'") + my-game(v-bind:problem="problem") + .col-sm-12.col-md-10.col-md-offset-1.col-lg-8.col-lg-offset-2( + v-show="display=='problems'") + my-problems(v-on:show-problem="showProblem($event)") + // (Some) Modals: + include modal-help.pug + include modal-lang.pug + input#modal-newgame.modal(type="checkbox") + div(role="dialog" aria-labelledby="newGameTxt") + .card.smallpad.small-modal + label#close-newgame.modal-close(for="modal-newgame") + h3#newGameTxt New game + p Waiting for opponent... block javascripts script(src="/javascripts/utils/misc.js")