Saving state (unfinished styling on variant page)

diff --git a/public/javascripts/components/game.js b/public/javascripts/components/game.js
index 587587f..80a8e7c 100644 (file)
--- 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 13004f0..e460f86 100644 (file)
--- 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 f2927c3..d72e3ce 100644 (file)
--- 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 03dbbdd..f9fb0c6 100644 (file)
--- 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 (file)
index 0000000..d767314
--- /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 18db3c9..3b94491 100644 (file)
--- 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 52805f2..38b78b1 100644 (file)
--- 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 3631a6e..efaf1e9 100644 (file)
--- 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 b231813..691662f 100644 (file)
--- 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 5059f51..c8c90c5 100644 (file)
--- 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 (file)
index 0000000..6f1d40a
--- /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 (file)
index 0000000..f15d063
--- /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 6c2e04b..89d814b 100644 (file)
--- 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")