Slight change in Ultima rules. TODO: merge with removed code 'isAttacked'

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

diff --git a/public/javascripts/components/game.js b/public/javascripts/components/game.js
index 80dd35d..6af331b 100644 (file)
--- a/public/javascripts/components/game.js
+++ b/public/javascripts/components/game.js
@@ -20,7 +20,7 @@ Vue.component('my-game', {
                        hints: (getCookie("hints") === "1" ? true : false),
                        color: getCookie("color", "lichess"), //lichess, chesscom or chesstempo
                        // sound level: 0 = no sound, 1 = sound only on newgame, 2 = always
-                       sound: getCookie("sound", "2"),
+                       sound: parseInt(getCookie("sound", "2")),
                };
        },
        render(h) {
@@ -92,7 +92,7 @@ Vue.component('my-game', {
                        const settingsBtnElt = document.getElementById("settingsBtn");
                        const indicWidth = !!settingsBtnElt //-2 for border:
                                ? parseFloat(window.getComputedStyle(settingsBtnElt).height.slice(0,-2)) - 2
-                               : 37; //TODO: always 37?
+                               : (smallScreen ? 31 : 37);
                        if (this.mode == "human")
                        {
                                let connectedIndic = h(
@@ -140,7 +140,8 @@ Vue.component('my-game', {
                                                "tooltip": true,
                                                "topindicator": true,
                                                "indic-right": true,
-                                               "settings-btn": true,
+                                               "settings-btn": !smallScreen,
+                                               "settings-btn-small": smallScreen,
                                        },
                                },
                                [h('i', { 'class': { "material-icons": true } }, "settings")]
@@ -181,6 +182,9 @@ Vue.component('my-game', {
                                })
                        );
                        // Create board element (+ reserves if needed by variant or mode)
+                       const lm = this.vr.lastMove;
+                       const showLight = this.hints &&
+                               (this.mode!="idle" || this.cursor==this.vr.moves.length);
                        let gameDiv = h('div',
                                {
                                        'class': { 'game': true },
@@ -233,9 +237,6 @@ Vue.component('my-game', {
                                                                        )
                                                                );
                                                        }
-                                                       const lm = this.vr.lastMove;
-                                                       const showLight = this.hints &&
-                                                               (this.mode!="idle" || this.cursor==this.vr.moves.length);
                                                        return h(
                                                                'div',
                                                                {
@@ -573,12 +574,10 @@ Vue.component('my-game', {
                                                        h('fieldset',
                                                          { },
                                                                [
-                                                                       //h('legend', { domProps: { innerHTML: "Show " } }),
+                                                                       //h('legend', { domProps: { innerHTML: "Legend title" } }),
                                                                        h('label',
                                                                                {
-                                                                                       attrs: {
-                                                                                               for: "setHints",
-                                                                                       },
+                                                                                       attrs: { for: "setHints" },
                                                                                        domProps: { innerHTML: "Show hints?" },
                                                                                },
                                                                        ),
@@ -599,9 +598,7 @@ Vue.component('my-game', {
                                                                [
                                                                        h('label',
                                                                                {
-                                                                                       attrs: {
-                                                                                               for: "selectColor",
-                                                                                       },
+                                                                                       attrs: { for: "selectColor" },
                                                                                        domProps: { innerHTML: "Board colors" },
                                                                                },
                                                                        ),
@@ -615,7 +612,7 @@ Vue.component('my-game', {
                                                                                                {
                                                                                                        domProps: {
                                                                                                                "value": "lichess",
-                                                                                                               innerHTML: "lichess"
+                                                                                                               innerHTML: "brown"
                                                                                                        },
                                                                                                        attrs: { "selected": this.color=="lichess" },
                                                                                                }
@@ -624,7 +621,7 @@ Vue.component('my-game', {
                                                                                                {
                                                                                                        domProps: {
                                                                                                                "value": "chesscom",
-                                                                                                               innerHTML: "chess.com"
+                                                                                                               innerHTML: "green"
                                                                                                        },
                                                                                                        attrs: { "selected": this.color=="chesscom" },
                                                                                                }
@@ -633,7 +630,7 @@ Vue.component('my-game', {
                                                                                                {
                                                                                                        domProps: {
                                                                                                                "value": "chesstempo",
-                                                                                                               innerHTML: "chesstempo"
+                                                                                                               innerHTML: "blue"
                                                                                                        },
                                                                                                        attrs: { "selected": this.color=="chesstempo" },
                                                                                                }
@@ -647,10 +644,8 @@ Vue.component('my-game', {
                                                                [
                                                                        h('label',
                                                                                {
-                                                                                       attrs: {
-                                                                                               for: "selectSound",
-                                                                                       },
-                                                                                       domProps: { innerHTML: "Sound level" },
+                                                                                       attrs: { for: "selectSound" },
+                                                                                       domProps: { innerHTML: "Play sounds?" },
                                                                                },
                                                                        ),
                                                                        h("select",
@@ -663,24 +658,27 @@ Vue.component('my-game', {
                                                                                                {
                                                                                                        domProps: {
                                                                                                                "value": "0",
-                                                                                                               innerHTML: "No sound"
+                                                                                                               innerHTML: "None"
                                                                                                        },
+                                                                                                       attrs: { "selected": this.sound==0 },
                                                                                                }
                                                                                        ),
                                                                                        h("option",
                                                                                                {
                                                                                                        domProps: {
                                                                                                                "value": "1",
-                                                                                                               innerHTML: "Newgame sound"
+                                                                                                               innerHTML: "Newgame"
                                                                                                        },
+                                                                                                       attrs: { "selected": this.sound==1 },
                                                                                                }
                                                                                        ),
                                                                                        h("option",
                                                                                                {
                                                                                                        domProps: {
                                                                                                                "value": "2",
-                                                                                                               innerHTML: "All sounds"
+                                                                                                               innerHTML: "All"
                                                                                                        },
+                                                                                                       attrs: { "selected": this.sound==2 },
                                                                                                }
                                                                                        ),
                                                                                ],
@@ -705,7 +703,10 @@ Vue.component('my-game', {
                {
                        elementArray.push(
                                h('div',
-                                       { attrs: { id: "pgn-div" } },
+                                       {
+                                               attrs: { id: "pgn-div" },
+                                               "class": { "section-content": true },
+                                       },
                                        [
                                                h('a',
                                                        {
@@ -718,10 +719,16 @@ Vue.component('my-game', {
                                                h('p',
                                                        {
                                                                attrs: { id: "pgn-game" },
-                                                               on: { click: this.download },
                                                                domProps: { innerHTML: this.pgnTxt }
                                                        }
-                                               )
+                                               ),
+                                               h('button',
+                                                       {
+                                                               attrs: { "id": "downloadBtn" },
+                                                               on: { click: this.download },
+                                                               domProps: { innerHTML: "Download game" },
+                                                       }
+                                               ),
                                        ]
                                )
                        );
@@ -731,7 +738,10 @@ Vue.component('my-game', {
                        // Show current FEN
                        elementArray.push(
                                h('div',
-                                       { attrs: { id: "fen-div" } },
+                                       {
+                                               attrs: { id: "fen-div" },
+                                               "class": { "section-content": true },
+                                       },
                                        [
                                                h('p',
                                                        {
@@ -954,12 +964,13 @@ Vue.component('my-game', {
                        this.hints = !this.hints;
                        setCookie("hints", this.hints ? "1" : "0");
                },
-               // TODO:
-               setColor: function() {
-                       alert("Change");
+               setColor: function(e) {
+                       this.color = e.target.options[e.target.selectedIndex].value;
+                       setCookie("color", this.color);
                },
-               setSound: function() {
-                       alert("Change");
+               setSound: function(e) {
+                       this.sound = parseInt(e.target.options[e.target.selectedIndex].value);
+                       setCookie("sound", this.sound);
                },
                clickGameSeek: function(e) {
                        this.getRidOfTooltip(e.currentTarget);
@@ -997,7 +1008,7 @@ Vue.component('my-game', {
                        this.endGame(this.mycolor=="w"?"0-1":"1-0");
                },
                newGame: function(mode, fenInit, color, oppId, moves, continuation) {
-                       const fen = fenInit || VariantRules.GenRandInitFen();
+                       const fen = "M7/8/8/3K1k2/8/8/8/8 0000";//fenInit || VariantRules.GenRandInitFen();
                        console.log(fen); //DEBUG
                        if (mode=="human" && !oppId)
                        {
@@ -1033,10 +1044,10 @@ Vue.component('my-game', {
                        if (mode=="human")
                        {
                                // Opponent found!
-                               if (!continuation)
+                               if (!continuation) //not playing sound on game continuation
                                {
-                                       // Not playing sound on game continuation:
-                                       new Audio("/sounds/newgame.mp3").play().then(() => {}).catch(err => {});
+                                       if (this.sound >= 1)
+                                               new Audio("/sounds/newgame.mp3").play().then(() => {}).catch(err => {});
                                        document.getElementById("modal-newgame").checked = false;
                                }
                                this.oppid = oppId;
@@ -1055,7 +1066,7 @@ Vue.component('my-game', {
                        }
                        else if (mode == "computer")
                        {
-                               this.mycolor = Math.random() < 0.5 ? 'w' : 'b';
+                               this.mycolor = "w";//Math.random() < 0.5 ? 'w' : 'b';
                                if (this.mycolor == 'b')
                                        setTimeout(this.playComputerMove, 500);
                        }
@@ -1216,7 +1227,8 @@ 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}));
-                       new Audio("/sounds/chessmove1.mp3").play().then(() => {}).catch(err => {});
+                       if (this.sound == 2)
+                               new Audio("/sounds/chessmove1.mp3").play().then(() => {}).catch(err => {});
                        if (this.mode != "idle")
                        {
                                this.incheck = this.vr.getCheckSquares(move); //is opponent in check?