Improve 'help' modal style on large screens

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

diff --git a/public/javascripts/components/game.js b/public/javascripts/components/game.js
index 11ec4c9..44db7dd 100644 (file)
--- a/public/javascripts/components/game.js
+++ b/public/javascripts/components/game.js
@@ -22,6 +22,7 @@ Vue.component('my-game', {
        },
        render(h) {
                const [sizeX,sizeY] = VariantRules.size;
+               const smallScreen = (screen.width <= 420);
                // Precompute hints squares to facilitate rendering
                let hintSquares = doubleArray(sizeX, sizeY, false);
                this.possibleMoves.forEach(m => { hintSquares[m.end.x][m.end.y] = true; });
@@ -30,23 +31,21 @@ Vue.component('my-game', {
                this.incheck.forEach(sq => { incheckSq[sq[0]][sq[1]] = true; });
                let elementArray = [];
                let actionArray = [];
-               if (["idle","human"].includes(this.mode))
-               {
-                       actionArray.push(
-                               h('button',
-                               {
-                                       on: { click: this.clickGameSeek },
-                                       attrs: { "aria-label": 'New online game' },
-                                       'class': {
-                                               "tooltip": true,
-                                               "bottom": true, //display below
-                                               "seek": this.seek,
-                                               "playing": this.mode == "human",
-                                       },
+               actionArray.push(
+                       h('button',
+                       {
+                               on: { click: this.clickGameSeek },
+                               attrs: { "aria-label": 'New online game' },
+                               'class': {
+                                       "tooltip": true,
+                                       "bottom": true, //display below
+                                       "seek": this.seek,
+                                       "playing": this.mode == "human",
+                                       "small": smallScreen,
                                },
-                               [h('i', { 'class': { "material-icons": true } }, "accessibility")])
-                       );
-               }
+                       },
+                       [h('i', { 'class': { "material-icons": true } }, "accessibility")])
+               );
                if (["idle","computer"].includes(this.mode))
                {
                        actionArray.push(
@@ -58,6 +57,7 @@ Vue.component('my-game', {
                                                "tooltip":true,
                                                "bottom": true,
                                                "playing": this.mode == "computer",
+                                               "small": smallScreen,
                                        },
                                },
                                [h('i', { 'class': { "material-icons": true } }, "computer")])
@@ -74,6 +74,7 @@ Vue.component('my-game', {
                                                "tooltip":true,
                                                "bottom": true,
                                                "playing": this.mode == "friend",
+                                               "small": smallScreen,
                                        },
                                },
                                [h('i', { 'class': { "material-icons": true } }, "people")])
@@ -126,12 +127,14 @@ Vue.component('my-game', {
                                {
                                        on: { click: this.toggleExpertMode },
                                        attrs: { "aria-label": 'Toggle expert mode' },
+                                       style: { "padding-top": "0", "margin-top": "0" },
                                        'class': {
                                                "tooltip":true,
                                                "topindicator": true,
                                                "indic-right": true,
                                                "expert-switch": true,
                                                "expert-mode": this.expert,
+                                               "small": smallScreen,
                                        },
                                },
                                [h('i', { 'class': { "material-icons": true } }, "visibility_off")]
@@ -258,6 +261,7 @@ Vue.component('my-game', {
                                                        'class': {
                                                                "tooltip":true,
                                                                "bottom": true,
+                                                               "small": smallScreen,
                                                        },
                                                },
                                                [h('i', { 'class': { "material-icons": true } }, "flag")])
@@ -272,12 +276,14 @@ Vue.component('my-game', {
                                                        style: { "margin-left": "30px" },
                                                        on: { click: e => this.undo() },
                                                        attrs: { "aria-label": 'Undo' },
+                                                       "class": { "small": smallScreen },
                                                },
                                                [h('i', { 'class': { "material-icons": true } }, "fast_rewind")]),
                                        h('button',
                                                {
                                                        on: { click: e => this.play() },
                                                        attrs: { "aria-label": 'Play' },
+                                                       "class": { "small": smallScreen },
                                                },
                                                [h('i', { 'class': { "material-icons": true } }, "fast_forward")]),
                                        ]
@@ -292,6 +298,7 @@ Vue.component('my-game', {
                                                        style: { "margin-left": "30px" },
                                                        on: { click: this.undoInGame },
                                                        attrs: { "aria-label": 'Undo' },
+                                                       "class": { "small": smallScreen },
                                                },
                                                [h('i', { 'class': { "material-icons": true } }, "undo")]
                                        ),
@@ -299,6 +306,7 @@ Vue.component('my-game', {
                                                {
                                                        on: { click: () => { this.mycolor = this.vr.getOppCol(this.mycolor) } },
                                                        attrs: { "aria-label": 'Flip' },
+                                                       "class": { "small": smallScreen },
                                                },
                                                [h('i', { 'class': { "material-icons": true } }, "cached")]
                                        ),