Remove some redundant code [Checkered/Magnetic still buggish]
[vchess.git] / public / javascripts / components / game.js
index 829beaa..170aeac 100644 (file)
@@ -16,6 +16,8 @@ Vue.component('my-game', {
                        seek: false,
                        fenStart: "",
                        incheck: [],
+                       pgnTxt: "",
+                       expert: document.cookie.length>0 ? document.cookie.substr(-1)=="1" : false,
                };
        },
        render(h) {
@@ -96,6 +98,22 @@ Vue.component('my-game', {
                                }
                        );
                        elementArray.push(turnIndic);
+                       let expertSwitch = h(
+                               'button',
+                               {
+                                       on: { click: this.toggleExpertMode },
+                                       attrs: { "aria-label": 'Toggle expert mode' },
+                                       'class': {
+                                               "tooltip":true,
+                                               "topindicator": true,
+                                               "indic-right": true,
+                                               "expert-switch": true,
+                                               "expert-mode": this.expert,
+                                       },
+                               },
+                               [h('i', { 'class': { "material-icons": true } }, "remove_red_eye")]
+                       );
+                       elementArray.push(expertSwitch);
                        let choices = h('div',
                                {
                                        attrs: { "id": "choices" },
@@ -161,7 +179,7 @@ Vue.component('my-game', {
                                                                        )
                                                                );
                                                        }
-                                                       if (hintSquares[ci][cj])
+                                                       if (!this.expert && hintSquares[ci][cj])
                                                        {
                                                                elems.push(
                                                                        h(
@@ -184,10 +202,10 @@ Vue.component('my-game', {
                                                                {
                                                                        'class': {
                                                                                'board': true,
-                                                                               'light-square': !highlight && (i+j)%2==0,
-                                                                               'dark-square': !highlight && (i+j)%2==1,
-                                                                               'highlight': highlight,
-                                                                               'incheck': incheckSq[ci][cj],
+                                                                               'light-square': (i+j)%2==0 && (this.expert || !highlight),
+                                                                               'dark-square': (i+j)%2==1 && (this.expert || !highlight),
+                                                                               'highlight': !this.expert && highlight,
+                                                                               'incheck': !this.expert && incheckSq[ci][cj],
                                                                        },
                                                                        attrs: {
                                                                                id: this.getSquareId({x:ci,y:cj}),
@@ -199,18 +217,21 @@ Vue.component('my-game', {
                                        );
                                }), choices]
                        );
-                       actionArray.push(
-                               h('button',
-                                       {
-                                               on: { click: this.resign },
-                                               attrs: { "aria-label": 'Resign' },
-                                               'class': {
-                                                       "tooltip":true,
-                                                       "bottom": true,
+                       if (this.mode != "idle")
+                       {
+                               actionArray.push(
+                                       h('button',
+                                               {
+                                                       on: { click: this.resign },
+                                                       attrs: { "aria-label": 'Resign' },
+                                                       'class': {
+                                                               "tooltip":true,
+                                                               "bottom": true,
+                                                       },
                                                },
-                                       },
-                                       [h('i', { 'class': { "material-icons": true } }, "flag")])
-                       );
+                                               [h('i', { 'class': { "material-icons": true } }, "flag")])
+                               );
+                       }
                        elementArray.push(gameDiv);
        //                      if (!!vr.reserve)
        //                      {
@@ -317,12 +338,22 @@ Vue.component('my-game', {
                {
                        elementArray.push(
                                h('div',
-                                       { },
+                                       { attrs: { id: "pgn-div" } },
                                        [
+                                               h('a',
+                                                       {
+                                                               attrs: {
+                                                                       id: "download",
+                                                                       href: "#",
+                                                               }
+                                                       }
+                                               ),
                                                h('p',
                                                        {
+                                                               attrs: { id: "pgn-game" },
+                                                               on: { click: this.download },
                                                                domProps: {
-                                                                       innerHTML: this.vr.getPGN(this.mycolor, this.score, this.fenStart, this.mode)
+                                                                       innerHTML: this.pgnTxt
                                                                }
                                                        }
                                                )
@@ -453,10 +484,21 @@ Vue.component('my-game', {
                this.conn.onclose = socketCloseListener;
        },
        methods: {
+               download: function() {
+                       let content = document.getElementById("pgn-game").innerHTML;
+                       content = content.replace(/<br>/g, "\n");
+                       // Prepare and trigger download link
+                       let downloadAnchor = document.getElementById("download");
+                       downloadAnchor.setAttribute("download", "game.pgn");
+                       downloadAnchor.href = "data:text/plain;charset=utf-8," + encodeURIComponent(content);
+                       downloadAnchor.click();
+               },
                endGame: function(score) {
                        this.score = score;
                        let modalBox = document.getElementById("modal-eog");
                        modalBox.checked = true;
+                       // Variants may have special PGN structure (so next function isn't defined here)
+                       this.pgnTxt = this.vr.getPGN(this.mycolor, this.score, this.fenStart, this.mode);
                        setTimeout(() => { modalBox.checked = false; }, 2000);
                        if (this.mode == "human")
                                this.clearStorage();
@@ -479,6 +521,10 @@ Vue.component('my-game', {
                        }
                        return eogMessage;
                },
+               toggleExpertMode: function() {
+                       this.expert = !this.expert;
+                       document.cookie = "expert=" + (this.expert ? "1" : "0");
+               },
                resign: function() {
                        if (this.mode == "human" && this.oppConnected)
                        {
@@ -529,7 +575,7 @@ Vue.component('my-game', {
                        this.newGame("computer");
                },
                newGame: function(mode, fenInit, color, oppId, moves, continuation) {
-                       const fen = fenInit || VariantRules.GenRandInitFen();
+                       const fen = "brnbnkrq/pppppppp/8/8/8/8/PPPPPPPP/BNNRKBQR 11111111111111111111";//fenInit || VariantRules.GenRandInitFen();
                        console.log(fen); //DEBUG
                        this.score = "*";
                        if (mode=="human" && !oppId)
@@ -558,6 +604,7 @@ Vue.component('my-game', {
                                return;
                        }
                        this.vr = new VariantRules(fen, moves || []);
+                       this.pgnTxt = ""; //redundant with this.score = "*", but cleaner
                        this.mode = mode;
                        this.incheck = []; //in case of
                        this.fenStart = continuation
@@ -578,10 +625,9 @@ Vue.component('my-game', {
                                this.seek = false;
                                if (!!moves && moves.length > 0) //imply continuation
                                {
-                                       const oppCol = this.vr.turn;
                                        const lastMove = moves[moves.length-1];
                                        this.vr.undo(lastMove);
-                                       this.incheck = this.vr.getCheckSquares(lastMove, oppCol);
+                                       this.incheck = this.vr.getCheckSquares(lastMove);
                                        this.vr.play(lastMove, "ingame");
                                }
                                delete localStorage["newgame"];
@@ -589,14 +635,13 @@ Vue.component('my-game', {
                        }
                        else //against 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);
                        }
                },
                playComputerMove: function() {
-                       const compColor = this.mycolor=='w' ? 'b' : 'w';
-                       const compMove = this.vr.getComputerMove(compColor);
+                       const compMove = this.vr.getComputerMove();
                        // HACK: avoid selecting elements before they appear on page:
                        setTimeout(() => this.play(compMove, "animate"), 500);
                },
@@ -628,7 +673,7 @@ Vue.component('my-game', {
                                this.selectedPiece.style.display = "inline-block";
                                this.selectedPiece.style.zIndex = 3000;
                                let startSquare = this.getSquareFromId(e.target.parentNode.id);
-                               this.possibleMoves = this.vr.canIplay(this.mycolor,startSquare)
+                               this.possibleMoves = this.mode!="idle" && this.vr.canIplay(this.mycolor,startSquare)
                                        ? this.vr.getPossibleMovesFrom(startSquare)
                                        : [];
                                e.target.parentNode.appendChild(this.selectedPiece);
@@ -711,8 +756,7 @@ Vue.component('my-game', {
                                this.animateMove(move);
                                return;
                        }
-                       const oppCol = this.vr.getOppCol(this.vr.turn);
-                       this.incheck = this.vr.getCheckSquares(move, oppCol); //is opponent in check?
+                       this.incheck = this.vr.getCheckSquares(move); //is opponent in check?
                        // 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}));
@@ -720,7 +764,7 @@ Vue.component('my-game', {
                        this.vr.play(move, "ingame");
                        if (this.mode == "human")
                                this.updateStorage(); //after our moves and opponent moves
-                       const eog = this.vr.checkGameOver(this.vr.turn);
+                       const eog = this.vr.checkGameOver();
                        if (eog != "*")
                                this.endGame(eog);
                        else if (this.mode == "computer" && this.vr.turn != this.mycolor)