Fix promotion bug on smartphones

[vchess.git] / public / javascripts / components / game.js

diff --git a/public/javascripts/components/game.js b/public/javascripts/components/game.js
index 8f34be2..17f3b18 100644 (file)
--- a/public/javascripts/components/game.js
+++ b/public/javascripts/components/game.js
@@ -127,53 +127,50 @@ Vue.component('my-game', {
                                );
                                elementArray.push(connectedIndic);
                        }
-                       const menuElt = h('div', { }, [
-                               h('label',
+                       if (this.mode == "chat")
+                       {
+                               const chatButton = h(
+                                       'button',
                                        {
-                                               attrs: { for: "drawer-control" },
-                                               "class": {
-                                                       "drawer-toggle": true,
-                                                       "persistent": true,
-                                                       "button": true,
+                                               on: { click: this.startChat },
+                                               attrs: {
+                                                       "aria-label": 'Start chat',
+                                                       "id": "chatBtn",
                                                },
-                                       }
-                               ),
-                               h('input',
+                                               'class': {
+                                                       "tooltip": true,
+                                                       "topindicator": true,
+                                                       "indic-left": true,
+                                                       "settings-btn": !smallScreen,
+                                                       "settings-btn-small": smallScreen,
+                                               },
+                                       },
+                                       [h('i', { 'class': { "material-icons": true } }, "chat")]
+                               );
+                               elementArray.push(chatButton);
+                       }
+                       else if (this.mode == "computer")
+                       {
+                               const clearButton = h(
+                                       'button',
                                        {
-                                               attrs: { type: "checkbox", id: "drawer-control" },
-                                               "class": { "drawer": true, "persistent": true },
-                                       }
-                               ),
-                               h('div',
-                                       { },
-                                       [
-                                               h('label',
-                                                       {
-                                                               attrs: { for: "drawer-control" },
-                                                               "class": { "drawer-close": true }
-                                                       }
-                                               ),
-                                               h('a',
-                                                       {
-                                                               attrs: { "href": "#" },
-                                                               domProps: { innerHTML: "Home" },
-                                                       }
-                                               ),
-                                               h('a',
-                                                       {
-                                                               attrs: { "href": "#" },
-                                                               domProps: { innerHTML: "....." },
-                                                       }
-                                               ),
-                                       ]
-                               )
-                       ]);
-                       elementArray.push(menuElt);
-
-                       // TODO: chat available only in "chat" mode...
-                       //                                              on: {
-//                                                     "click": () => { document.getElementById("modal-chat").checked = true; },
-
+                                               on: { click: this.clearComputerGame },
+                                               attrs: {
+                                                       "aria-label": 'Clear computer game',
+                                                       "id": "clearBtn",
+                                               },
+                                               'class': {
+                                                       "tooltip": true,
+                                                       "topindicator": true,
+                                                       "indic-left": true,
+                                                       "settings-btn": !smallScreen,
+                                                       "settings-btn-small": smallScreen,
+                                               },
+                                       },
+                                       [h('i', { 'class': { "material-icons": true } }, "clear")]
+                               );
+                               elementArray.push(clearButton);
+                       }
                        const turnIndic = h(
                                'div',
                                {
@@ -260,7 +257,11 @@ Vue.component('my-game', {
                                                                attrs: { "src": '/images/pieces/' +
                                                                        VariantRules.getPpath(m.appear[0].c+m.appear[0].p) + '.svg' },
                                                                'class': { 'choice-piece': true },
-                                                               on: { "click": e => { this.play(m); this.choices=[]; } },
+                                                               on: {
+                                                                       "click": e => { this.play(m); this.choices=[]; },
+                                                                       // NOTE: add 'touchstart' event to fix a problem on smartphones
+                                                                       "touchstart": e => { this.play(m); this.choices=[]; },
+                                                               },
                                                        })
                                                ]
                                        );
@@ -1170,7 +1171,6 @@ Vue.component('my-game', {
                        setTimeout(() => { modalBox.checked = false; }, 2000);
                },
                endGame: function(score) {
-                       console.log("call " + score + " " + this.mode);
                        this.score = score;
                        if (["human","computer"].includes(this.mode))
                        {
@@ -1233,6 +1233,15 @@ Vue.component('my-game', {
                        elt.style.visibility = "hidden";
                        setTimeout(() => { elt.style.visibility="visible"; }, 100);
                },
+               startChat: function(e) {
+                       this.getRidOfTooltip(e.currentTarget);
+                       document.getElementById("modal-chat").checked = true;
+               },
+               clearComputerGame: function(e) {
+                       this.getRidOfTooltip(e.currentTarget);
+                       this.clearStorage(); //this.mode=="computer" (already checked)
+                       location.reload(); //to see clearing effects
+               },
                showSettings: function(e) {
                        this.getRidOfTooltip(e.currentTarget);
                        document.getElementById("modal-settings").checked = true;
@@ -1311,7 +1320,8 @@ Vue.component('my-game', {
                                const storageVariant = localStorage.getItem("comp-variant");
                                if (!!storageVariant)
                                {
-                                       if (storageVariant !== variant)
+                                       const score = localStorage.getItem("comp-score");
+                                       if (storageVariant !== variant && score == "*")
                                        {
                                                if (!confirm("Unfinished " + storageVariant +
                                                        " computer game will be erased"))
@@ -1319,12 +1329,8 @@ Vue.component('my-game', {
                                                        return;
                                                }
                                        }
-                                       else
-                                       {
-                                               const score = localStorage.getItem("comp-score");
-                                               if (score == "*")
-                                                       return this.continueGame("computer");
-                                       }
+                                       else if (score == "*")
+                                               return this.continueGame("computer");
                                }
                        }
                        this.vr = new VariantRules(fen, []);