Draft code reorganisation (+ fix Alice rules + stateless VariantRules object)
[vchess.git] / public / javascripts / components / game.js
index 6d42f27..c02893b 100644 (file)
@@ -11,7 +11,7 @@ Vue.component('my-game', {
                        selectedPiece: null, //moving piece (or clicked piece)
                        conn: null, //socket connection
                        score: "*", //'*' means 'unfinished'
-                       mode: "idle", //human, chat, friend, problem, computer or idle (if not playing)
+                       mode: "idle", //human, friend, problem, computer or idle (if not playing)
                        myid: "", //our ID, always set
                        oppid: "", //opponent ID in case of HH game
                        gameId: "", //useful if opponent started other human games after we disconnected
@@ -24,7 +24,7 @@ Vue.component('my-game', {
                        incheck: [],
                        pgnTxt: "",
                        hints: (!localStorage["hints"] ? true : localStorage["hints"] === "1"),
-                       color: localStorage["color"] || "lichess", //lichess, chesscom or chesstempo
+                       bcolor: localStorage["bcolor"] || "lichess", //lichess, chesscom or chesstempo
                        // sound level: 0 = no sound, 1 = sound only on newgame, 2 = always
                        sound: parseInt(localStorage["sound"] || "2"),
                        // Web worker to play computer moves without freezing interface:
@@ -52,46 +52,47 @@ Vue.component('my-game', {
                        h('button',
                        {
                                on: { click: this.clickGameSeek },
-                               attrs: { "aria-label": 'New online game' },
+                               attrs: { "aria-label": translations['New live game'] },
                                'class': {
                                        "tooltip": true,
                                        "play": true,
                                        "seek": this.seek,
-                                       "playing": this.mode == "human",
-                                       "spaceright": true,
+                                       "playing": this.mode == "human" && this.score == "*",
                                },
                        },
                        [h('i', { 'class': { "material-icons": true } }, "accessibility")])
                );
-               if (["idle","chat","computer"].includes(this.mode))
+               if (["idle","computer","friend"].includes(this.mode)
+                       || (this.mode == "human" && this.score != "*"))
                {
                        actionArray.push(
                                h('button',
                                {
                                        on: { click: this.clickComputerGame },
-                                       attrs: { "aria-label": 'New game VS computer' },
+                                       attrs: { "aria-label": translations['New game versus computer'] },
                                        'class': {
                                                "tooltip":true,
                                                "play": true,
-                                               "playing": this.mode == "computer",
-                                               "spaceright": true,
+                                               "playing": this.mode == "computer" && this.score == "*",
+                                               "spaceleft": true,
                                        },
                                },
                                [h('i', { 'class': { "material-icons": true } }, "computer")])
                        );
                }
-               if (["idle","chat","friend"].includes(this.mode))
+               if (variant != "Dark" && (["idle","friend"].includes(this.mode)
+                       || (["computer","human"].includes(this.mode) && this.score != "*")))
                {
                        actionArray.push(
                                h('button',
                                {
                                        on: { click: this.clickFriendGame },
-                                       attrs: { "aria-label": 'New IRL game' },
+                                       attrs: { "aria-label": translations['Analysis mode'] },
                                        'class': {
                                                "tooltip":true,
                                                "play": true,
                                                "playing": this.mode == "friend",
-                                               "spaceright": true,
+                                               "spaceleft": true,
                                        },
                                },
                                [h('i', { 'class': { "material-icons": true } }, "people")])
@@ -114,7 +115,7 @@ Vue.component('my-game', {
                                parseFloat(settingsStyle.height.slice(0,-2)) - 2
                        ];
                        let aboveBoardElts = [];
-                       if (["chat","human"].includes(this.mode))
+                       if (this.mode == "human")
                        {
                                const connectedIndic = h(
                                        'div',
@@ -132,14 +133,14 @@ Vue.component('my-game', {
                                );
                                aboveBoardElts.push(connectedIndic);
                        }
-                       if (this.mode == "chat")
+                       if (this.mode == "human" && this.score != "*")
                        {
                                const chatButton = h(
                                        'button',
                                        {
                                                on: { click: this.startChat },
                                                attrs: {
-                                                       "aria-label": 'Start chat',
+                                                       "aria-label": translations['Start chat'],
                                                        "id": "chatBtn",
                                                },
                                                'class': {
@@ -153,14 +154,14 @@ Vue.component('my-game', {
                                );
                                aboveBoardElts.push(chatButton);
                        }
-                       else if (this.mode == "computer")
+                       if (["human","computer","friend"].includes(this.mode))
                        {
                                const clearButton = h(
                                        'button',
                                        {
-                                               on: { click: this.clearComputerGame },
+                                               on: { click: this.clearCurrentGame },
                                                attrs: {
-                                                       "aria-label": 'Clear computer game',
+                                                       "aria-label": translations['Clear current game'],
                                                        "id": "clearBtn",
                                                },
                                                'class': {
@@ -189,24 +190,6 @@ Vue.component('my-game', {
                                }
                        );
                        aboveBoardElts.push(turnIndic);
-                       const settingsBtn = h(
-                               'button',
-                               {
-                                       on: { click: this.showSettings },
-                                       attrs: {
-                                               "aria-label": 'Settings',
-                                               "id": "settingsBtn",
-                                       },
-                                       'class': {
-                                               "tooltip": true,
-                                               "play": true,
-                                               "above-board": true,
-                                               "indic-right": true,
-                                       },
-                               },
-                               [h('i', { 'class': { "material-icons": true } }, "settings")]
-                       );
-                       aboveBoardElts.push(settingsBtn);
                        elementArray.push(
                                h('div',
                                        { "class": { "aboveboard-wrapper": true } },
@@ -276,8 +259,9 @@ Vue.component('my-game', {
                        );
                        // Create board element (+ reserves if needed by variant or mode)
                        const lm = this.vr.lastMove;
-                       const showLight = this.hints &&
-                               (!["idle","chat"].includes(this.mode) || this.cursor==this.vr.moves.length);
+                       const showLight = this.hints && variant!="Dark" &&
+                               (this.mode != "idle" ||
+                                       (this.vr.moves.length > 0 && this.cursor==this.vr.moves.length));
                        const gameDiv = h('div',
                                {
                                        'class': {
@@ -298,7 +282,8 @@ Vue.component('my-game', {
                                                _.range(sizeY).map(j => {
                                                        let cj = (this.mycolor=='w' ? j : sizeY-j-1);
                                                        let elems = [];
-                                                       if (this.vr.board[ci][cj] != VariantRules.EMPTY)
+                                                       if (this.vr.board[ci][cj] != VariantRules.EMPTY && (variant!="Dark"
+                                                               || this.score!="*" || this.vr.enlightened[this.mycolor][ci][cj]))
                                                        {
                                                                elems.push(
                                                                        h(
@@ -341,7 +326,9 @@ Vue.component('my-game', {
                                                                                ['board'+sizeY]: true,
                                                                                'light-square': (i+j)%2==0,
                                                                                'dark-square': (i+j)%2==1,
-                                                                               [this.color]: true,
+                                                                               [this.bcolor]: true,
+                                                                               'in-shadow': variant=="Dark" && this.score=="*"
+                                                                                       && !this.vr.enlightened[this.mycolor][ci][cj],
                                                                                'highlight': showLight && !!lm && _.isMatch(lm.end, {x:ci,y:cj}),
                                                                                'incheck': showLight && incheckSq[ci][cj],
                                                                        },
@@ -355,47 +342,51 @@ Vue.component('my-game', {
                                        );
                                }), choices]
                        );
-                       if (!["idle","chat"].includes(this.mode))
+                       if (["human","computer"].includes(this.mode))
                        {
-                               actionArray.push(
-                                       h('button',
-                                               {
-                                                       on: { click: this.resign },
-                                                       attrs: { "aria-label": 'Resign' },
-                                                       'class': {
-                                                               "tooltip":true,
-                                                               "play": true,
+                               if (this.score == "*")
+                               {
+                                       actionArray.push(
+                                               h('button',
+                                                       {
+                                                               on: { click: this.resign },
+                                                               attrs: { "aria-label": translations['Resign'] },
+                                                               'class': {
+                                                                       "tooltip":true,
+                                                                       "play": true,
+                                                                       "spaceleft": true,
+                                                               },
                                                        },
-                                               },
-                                               [h('i', { 'class': { "material-icons": true } }, "flag")])
-                               );
-                       }
-                       else if (this.vr.moves.length > 0)
-                       {
-                               // A game finished, and another is not started yet: allow navigation
-                               actionArray = actionArray.concat([
-                                       h('button',
-                                               {
-                                                       on: { click: e => this.undo() },
-                                                       attrs: { "aria-label": 'Undo' },
-                                                       "class": {
-                                                               "play": true,
-                                                               "spaceleft": true,
+                                                       [h('i', { 'class': { "material-icons": true } }, "flag")])
+                                       );
+                               }
+                               else
+                               {
+                                       // A game finished, and another is not started yet: allow navigation
+                                       actionArray = actionArray.concat([
+                                               h('button',
+                                                       {
+                                                               on: { click: e => this.undo() },
+                                                               attrs: { "aria-label": translations['Undo'] },
+                                                               "class": {
+                                                                       "play": true,
+                                                                       "big-spaceleft": true,
+                                                               },
                                                        },
-                                               },
-                                               [h('i', { 'class': { "material-icons": true } }, "fast_rewind")]),
-                                       h('button',
-                                               {
-                                                       on: { click: e => this.play() },
-                                                       attrs: { "aria-label": 'Play' },
-                                                       "class": {
-                                                               "play": true,
-                                                               "spaceleft": true,
+                                                       [h('i', { 'class': { "material-icons": true } }, "fast_rewind")]),
+                                               h('button',
+                                                       {
+                                                               on: { click: e => this.play() },
+                                                               attrs: { "aria-label": translations['Play'] },
+                                                               "class": {
+                                                                       "play": true,
+                                                                       "spaceleft": true,
+                                                               },
                                                        },
-                                               },
-                                               [h('i', { 'class': { "material-icons": true } }, "fast_forward")]),
-                                       ]
-                               );
+                                                       [h('i', { 'class': { "material-icons": true } }, "fast_forward")]),
+                                               ]
+                                       );
+                               }
                        }
                        if (["friend","problem"].includes(this.mode))
                        {
@@ -404,10 +395,10 @@ Vue.component('my-game', {
                                        h('button',
                                                {
                                                        on: { click: this.undoInGame },
-                                                       attrs: { "aria-label": 'Undo' },
+                                                       attrs: { "aria-label": translations['Undo'] },
                                                        "class": {
                                                                "play": true,
-                                                               "spaceleft": true,
+                                                               "big-spaceleft": true,
                                                        },
                                                },
                                                [h('i', { 'class': { "material-icons": true } }, "undo")]
@@ -415,7 +406,7 @@ Vue.component('my-game', {
                                        h('button',
                                                {
                                                        on: { click: () => { this.mycolor = this.vr.getOppCol(this.mycolor) } },
-                                                       attrs: { "aria-label": 'Flip' },
+                                                       attrs: { "aria-label": translations['Flip board'] },
                                                        "class": {
                                                                "play": true,
                                                                "spaceleft": true,
@@ -434,7 +425,7 @@ Vue.component('my-game', {
                                {
                                        myReservePiecesArray.push(h('div',
                                        {
-                                               'class': {'board':true, ['board'+sizeY+'-reserve']:true},
+                                               'class': {'board':true, ['board'+sizeY]:true},
                                                attrs: { id: this.getSquareId({x:sizeX+shiftIdx,y:i}) }
                                        },
                                        [
@@ -458,7 +449,7 @@ Vue.component('my-game', {
                                {
                                        oppReservePiecesArray.push(h('div',
                                        {
-                                               'class': {'board':true, ['board'+sizeY+'-reserve']:true},
+                                               'class': {'board':true, ['board'+sizeY]:true},
                                                attrs: { id: this.getSquareId({x:sizeX+(1-shiftIdx),y:i}) }
                                        },
                                        [
@@ -514,7 +505,12 @@ Vue.component('my-game', {
                                        [
                                                h('div',
                                                        {
-                                                               "class": { "card": true, "smallpad": true },
+                                                               "class": {
+                                                                       "card": true,
+                                                                       "smallpad": true,
+                                                                       "small-modal": true,
+                                                                       "text-center": true,
+                                                               },
                                                        },
                                                        [
                                                                h('label',
@@ -563,7 +559,7 @@ Vue.component('my-game', {
                                                                {
                                                                        attrs: { "id": "titleFenedit" },
                                                                        "class": { "section": true },
-                                                                       domProps: { innerHTML: "Position + flags (FEN):" },
+                                                                       domProps: { innerHTML: translations["Game state (FEN):"] },
                                                                }
                                                        ),
                                                        h('input',
@@ -584,7 +580,7 @@ Vue.component('my-game', {
                                                                                        this.newGame("friend", fen);
                                                                                }
                                                                        },
-                                                                       domProps: { innerHTML: "Ok" },
+                                                                       domProps: { innerHTML: translations["Ok"] },
                                                                }
                                                        ),
                                                        h('button',
@@ -595,7 +591,7 @@ Vue.component('my-game', {
                                                                                                VariantRules.GenRandInitFen();
                                                                                }
                                                                        },
-                                                                       domProps: { innerHTML: "Random" },
+                                                                       domProps: { innerHTML: translations["Random"] },
                                                                }
                                                        ),
                                                ]
@@ -604,175 +600,6 @@ Vue.component('my-game', {
                        )
                ];
                elementArray = elementArray.concat(modalFenEdit);
-               const modalSettings = [
-                       h('input',
-                               {
-                                       attrs: { "id": "modal-settings", type: "checkbox" },
-                                       "class": { "modal": true },
-                               }),
-                       h('div',
-                               {
-                                       attrs: { "role": "dialog", "aria-labelledby": "settingsTitle" },
-                               },
-                               [
-                                       h('div',
-                                               {
-                                                       "class": { "card": true, "smallpad": true },
-                                               },
-                                               [
-                                                       h('label',
-                                                               {
-                                                                       attrs: { "id": "close-settings", "for": "modal-settings" },
-                                                                       "class": { "modal-close": true },
-                                                               }
-                                                       ),
-                                                       h('h3',
-                                                               {
-                                                                       attrs: { "id": "settingsTitle" },
-                                                                       "class": { "section": true },
-                                                                       domProps: { innerHTML: "Preferences" },
-                                                               }
-                                                       ),
-                                                       h('fieldset',
-                                                         { },
-                                                               [
-                                                                       h('label',
-                                                                               {
-                                                                                       attrs: { for: "nameSetter" },
-                                                                                       domProps: { innerHTML: "My name is..." },
-                                                                               },
-                                                                       ),
-                                                                       h('input',
-                                                                               {
-                                                                                       attrs: {
-                                                                                               "id": "nameSetter",
-                                                                                               type: "text",
-                                                                                               value: this.myname,
-                                                                                       },
-                                                                                       on: { "change": this.setMyname },
-                                                                               }
-                                                                       ),
-                                                               ]
-                                                       ),
-                                                       h('fieldset',
-                                                         { },
-                                                               [
-                                                                       h('label',
-                                                                               {
-                                                                                       attrs: { for: "setHints" },
-                                                                                       domProps: { innerHTML: "Show hints?" },
-                                                                               },
-                                                                       ),
-                                                                       h('input',
-                                                                               {
-                                                                                       attrs: {
-                                                                                               "id": "setHints",
-                                                                                               type: "checkbox",
-                                                                                               checked: this.hints,
-                                                                                       },
-                                                                                       on: { "change": this.toggleHints },
-                                                                               }
-                                                                       ),
-                                                               ]
-                                                       ),
-                                                       h('fieldset',
-                                                               { },
-                                                               [
-                                                                       h('label',
-                                                                               {
-                                                                                       attrs: { for: "selectColor" },
-                                                                                       domProps: { innerHTML: "Board colors" },
-                                                                               },
-                                                                       ),
-                                                                       h("select",
-                                                                               {
-                                                                                       attrs: { "id": "selectColor" },
-                                                                                       on: { "change": this.setColor },
-                                                                               },
-                                                                               [
-                                                                                       h("option",
-                                                                                               {
-                                                                                                       domProps: {
-                                                                                                               "value": "lichess",
-                                                                                                               innerHTML: "brown"
-                                                                                                       },
-                                                                                                       attrs: { "selected": this.color=="lichess" },
-                                                                                               }
-                                                                                       ),
-                                                                                       h("option",
-                                                                                               {
-                                                                                                       domProps: {
-                                                                                                               "value": "chesscom",
-                                                                                                               innerHTML: "green"
-                                                                                                       },
-                                                                                                       attrs: { "selected": this.color=="chesscom" },
-                                                                                               }
-                                                                                       ),
-                                                                                       h("option",
-                                                                                               {
-                                                                                                       domProps: {
-                                                                                                               "value": "chesstempo",
-                                                                                                               innerHTML: "blue"
-                                                                                                       },
-                                                                                                       attrs: { "selected": this.color=="chesstempo" },
-                                                                                               }
-                                                                                       ),
-                                                                               ],
-                                                                       ),
-                                                               ]
-                                                       ),
-                                                       h('fieldset',
-                                                               { },
-                                                               [
-                                                                       h('label',
-                                                                               {
-                                                                                       attrs: { for: "selectSound" },
-                                                                                       domProps: { innerHTML: "Play sounds?" },
-                                                                               },
-                                                                       ),
-                                                                       h("select",
-                                                                               {
-                                                                                       attrs: { "id": "selectSound" },
-                                                                                       on: { "change": this.setSound },
-                                                                               },
-                                                                               [
-                                                                                       h("option",
-                                                                                               {
-                                                                                                       domProps: {
-                                                                                                               "value": "0",
-                                                                                                               innerHTML: "None"
-                                                                                                       },
-                                                                                                       attrs: { "selected": this.sound==0 },
-                                                                                               }
-                                                                                       ),
-                                                                                       h("option",
-                                                                                               {
-                                                                                                       domProps: {
-                                                                                                               "value": "1",
-                                                                                                               innerHTML: "Newgame"
-                                                                                                       },
-                                                                                                       attrs: { "selected": this.sound==1 },
-                                                                                               }
-                                                                                       ),
-                                                                                       h("option",
-                                                                                               {
-                                                                                                       domProps: {
-                                                                                                               "value": "2",
-                                                                                                               innerHTML: "All"
-                                                                                                       },
-                                                                                                       attrs: { "selected": this.sound==2 },
-                                                                                               }
-                                                                                       ),
-                                                                               ],
-                                                                       ),
-                                                               ]
-                                                       ),
-                                               ]
-                                       )
-                               ]
-                       )
-               ];
-               elementArray = elementArray.concat(modalSettings);
                let chatEltsArray =
                [
                        h('label',
@@ -785,7 +612,7 @@ Vue.component('my-game', {
                                {
                                        attrs: { "id": "titleChat" },
                                        "class": { "section": true },
-                                       domProps: { innerHTML: "Chat with " + this.oppName },
+                                       domProps: { innerHTML: translations["Chat with "] + this.oppName },
                                }
                        )
                ];
@@ -809,7 +636,7 @@ Vue.component('my-game', {
                                        attrs: {
                                                "id": "input-chat",
                                                type: "text",
-                                               placeholder: "Type here",
+                                               placeholder: translations["Type here"],
                                        },
                                        on: { keyup: this.trySendChat }, //if key is 'enter'
                                }
@@ -818,7 +645,7 @@ Vue.component('my-game', {
                                {
                                        attrs: { id: "sendChatBtn"},
                                        on: { click: this.sendChat },
-                                       domProps: { innerHTML: "Send" },
+                                       domProps: { innerHTML: translations["Send"] },
                                }
                        )
                ]);
@@ -851,41 +678,7 @@ Vue.component('my-game', {
                        actionArray
                );
                elementArray.push(actions);
-               if (this.score != "*" && this.pgnTxt.length > 0)
-               {
-                       elementArray.push(
-                               h('div',
-                                       {
-                                               attrs: { id: "pgn-div" },
-                                               "class": { "section-content": true },
-                                       },
-                                       [
-                                               h('a',
-                                                       {
-                                                               attrs: {
-                                                                       id: "download",
-                                                                       href: "#",
-                                                               }
-                                                       }
-                                               ),
-                                               h('p',
-                                                       {
-                                                               attrs: { id: "pgn-game" },
-                                                               domProps: { innerHTML: this.pgnTxt }
-                                                       }
-                                               ),
-                                               h('button',
-                                                       {
-                                                               attrs: { "id": "downloadBtn" },
-                                                               on: { click: this.download },
-                                                               domProps: { innerHTML: "Download game" },
-                                                       }
-                                               ),
-                                       ]
-                               )
-                       );
-               }
-               else if (this.mode != "idle")
+               if (!!this.vr)
                {
                        if (this.mode == "problem")
                        {
@@ -900,7 +693,7 @@ Vue.component('my-game', {
                                                        h('h3',
                                                                {
                                                                        "class": { clickable: true },
-                                                                       domProps: { innerHTML: "Show solution" },
+                                                                       domProps: { innerHTML: translations["Show solution"] },
                                                                        on: { click: this.toggleShowSolution },
                                                                }
                                                        ),
@@ -914,21 +707,49 @@ Vue.component('my-game', {
                                        )
                                );
                        }
-                       // Show current FEN
+                       if (variant != "Dark" || this.score!="*")
+                       {
+                               // Show current FEN
+                               elementArray.push(
+                                       h('div',
+                                               {
+                                                       attrs: { id: "fen-div" },
+                                                       "class": { "section-content": true },
+                                               },
+                                               [
+                                                       h('p',
+                                                               {
+                                                                       attrs: { id: "fen-string" },
+                                                                       domProps: { innerHTML: this.vr.getBaseFen() },
+                                                                       "class": { "text-center": true },
+                                                               }
+                                                       )
+                                               ]
+                                       )
+                               );
+                       }
                        elementArray.push(
                                h('div',
                                        {
-                                               attrs: { id: "fen-div" },
+                                               attrs: { id: "pgn-div" },
                                                "class": { "section-content": true },
                                        },
                                        [
-                                               h('p',
+                                               h('a',
                                                        {
-                                                               attrs: { id: "fen-string" },
-                                                               domProps: { innerHTML: this.vr.getBaseFen() },
-                                                               "class": { "text-center": true },
+                                                               attrs: {
+                                                                       id: "download",
+                                                                       href: "#",
+                                                               }
                                                        }
-                                               )
+                                               ),
+                                               h('button',
+                                                       {
+                                                               attrs: { "id": "downloadBtn" },
+                                                               on: { click: this.download },
+                                                               domProps: { innerHTML: translations["Download PGN"] },
+                                                       }
+                                               ),
                                        ]
                                )
                        );
@@ -962,13 +783,13 @@ Vue.component('my-game', {
                        switch (this.score)
                        {
                                case "1-0":
-                                       eogMessage = "White win";
+                                       eogMessage = translations["White win"];
                                        break;
                                case "0-1":
-                                       eogMessage = "Black win";
+                                       eogMessage = translations["Black win"];
                                        break;
                                case "1/2":
-                                       eogMessage = "Draw";
+                                       eogMessage = translations["Draw"];
                                        break;
                        }
                        return eogMessage;
@@ -978,6 +799,7 @@ Vue.component('my-game', {
                const url = socketUrl;
                const humanContinuation = (localStorage.getItem("variant") === variant);
                const computerContinuation = (localStorage.getItem("comp-variant") === variant);
+               const friendContinuation = (localStorage.getItem("anlz-variant") === variant);
                this.myid = (humanContinuation ? localStorage.getItem("myid") : getRandString());
                this.conn = new WebSocket(url + "/?sid=" + this.myid + "&page=" + variant);
                const socketOpenListener = () => {
@@ -985,10 +807,12 @@ Vue.component('my-game', {
                                this.continueGame("human");
                        else if (computerContinuation)
                                this.continueGame("computer");
+                       else if (friendContinuation)
+                               this.continueGame("friend");
                };
                const socketMessageListener = msg => {
                        const data = JSON.parse(msg.data);
-                       const L = (!!this.vr ? this.vr.moves.length : 0);
+                       let L = undefined;
                        switch (data.code)
                        {
                                case "oppname":
@@ -1003,20 +827,22 @@ Vue.component('my-game', {
                                        // We opened another tab on the same game
                                        this.mode = "idle";
                                        this.vr = null;
-                                       alert("Already playing a game in this variant on another tab!");
+                                       alert(translations[
+                                               "Already playing a game in this variant on another tab!"]);
                                        break;
                                case "newgame": //opponent found
                                        // oppid: opponent socket ID
-                                       this.newGame("human", data.fen, data.color, data.oppid);
+                                       this.newGame("human", data.fen, data.color, data.oppid, data.gameid);
                                        break;
                                case "newmove": //..he played!
-                                       this.play(data.move, "animate");
+                                       this.play(data.move, (variant!="Dark" ? "animate" : null));
                                        break;
                                case "pong": //received if we sent a ping (game still alive on our side)
                                        if (this.gameId != data.gameId)
                                                break; //games IDs don't match: definitely over...
                                        this.oppConnected = true;
                                        // Send our "last state" informations to opponent
+                                       L = this.vr.moves.length;
                                        this.conn.send(JSON.stringify({
                                                code: "lastate",
                                                oppid: this.oppid,
@@ -1026,10 +852,11 @@ Vue.component('my-game', {
                                        }));
                                        break;
                                case "lastate": //got opponent infos about last move
+                                       L = this.vr.moves.length;
                                        if (this.gameId != data.gameId)
                                                break; //games IDs don't match: nothing we can do...
                                        // OK, opponent still in game (which might be over)
-                                       if (this.mode != "human")
+                                       if (this.score != "*")
                                        {
                                                // We finished the game (any result possible)
                                                this.conn.send(JSON.stringify({
@@ -1047,6 +874,7 @@ Vue.component('my-game', {
                                                this.conn.send(JSON.stringify({
                                                        code: "lastate",
                                                        oppid: this.oppid,
+                                                       gameId: this.gameId,
                                                        lastMove: this.vr.moves[L-1],
                                                        movesCount: L,
                                                }));
@@ -1060,9 +888,9 @@ Vue.component('my-game', {
                                // TODO: also use (dis)connect info to count online players?
                                case "connect":
                                case "disconnect":
-                                       if (["human","chat"].includes(this.mode) && this.oppid == data.id)
+                                       if (this.mode=="human" && this.oppid == data.id)
                                                this.oppConnected = (data.code == "connect");
-                                       if (this.oppConnected && this.mode == "chat")
+                                       if (this.oppConnected && this.score != "*")
                                        {
                                                // Send our name to the opponent, in case of he hasn't it
                                                this.conn.send(JSON.stringify({
@@ -1082,7 +910,7 @@ Vue.component('my-game', {
                this.conn.onclose = socketCloseListener;
                // Listen to keyboard left/right to navigate in game
                document.onkeydown = event => {
-                       if (["idle","chat"].includes(this.mode) &&
+                       if (["human","computer"].includes(this.mode) &&
                                !!this.vr && this.vr.moves.length > 0 && [37,39].includes(event.keyCode))
                        {
                                event.preventDefault();
@@ -1097,13 +925,24 @@ Vue.component('my-game', {
                const self = this;
                this.compWorker.onmessage = function(e) {
                        let compMove = e.data;
-                       compMove.computer = true; //TODO: imperfect attempt to avoid ghost move
+                       if (!compMove)
+                               return; //may happen if MarseilleRules and subTurn==2 (TODO: a bit ugly...)
+                       if (!Array.isArray(compMove))
+                               compMove = [compMove]; //to deal with MarseilleRules
+                       // TODO: imperfect attempt to avoid ghost move:
+                       compMove.forEach(m => { m.computer = true; });
                        // (first move) HACK: small delay to avoid selecting elements
                        // before they appear on page:
                        const delay = Math.max(500-(Date.now()-self.timeStart), 0);
                        setTimeout(() => {
+                               const animate = (variant!="Dark" ? "animate" : null);
                                if (self.mode == "computer") //warning: mode could have changed!
-                                       self.play(compMove, "animate")
+                                       self.play(compMove[0], animate);
+                               if (compMove.length == 2)
+                                       setTimeout( () => {
+                                               if (self.mode == "computer")
+                                                       self.play(compMove[1], animate);
+                                       }, 750);
                        }, delay);
                }
        },
@@ -1132,13 +971,12 @@ Vue.component('my-game', {
                                        : "none";
                },
                download: function() {
-                       let content = document.getElementById("pgn-game").innerHTML;
-                       content = content.replace(/<br>/g, "\n");
+                       // Variants may have special PGN structure (so next function isn't defined here)
+                       const content = this.vr.getPGN(this.mycolor, this.score, this.fenStart, this.mode);
                        // 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.href = "data:text/plain;charset=utf-8," + encodeURIComponent(content);
                        downloadAnchor.click();
                },
                showScoreMsg: function() {
@@ -1154,17 +992,22 @@ Vue.component('my-game', {
                                localStorage.setItem(prefix+"score", score);
                        }
                        this.showScoreMsg();
-                       // 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);
                        if (this.mode == "human" && this.oppConnected)
                        {
                                // Send our nickname to opponent
                                this.conn.send(JSON.stringify({
                                        code:"myname", name:this.myname, oppid:this.oppid}));
                        }
-                       this.mode = (this.mode=="human" ? "chat" : "idle");
                        this.cursor = this.vr.moves.length; //to navigate in finished game
                },
+               getStoragePrefix: function(mode) {
+                       let prefix = "";
+                       if (mode == "computer")
+                               prefix = "comp-";
+                       else if (mode == "friend")
+                               prefix = "anlz-";
+                       return prefix;
+               },
                setStorage: function() {
                        if (this.mode=="human")
                        {
@@ -1172,8 +1015,7 @@ Vue.component('my-game', {
                                localStorage.setItem("oppid", this.oppid);
                                localStorage.setItem("gameId", this.gameId);
                        }
-                       // 'prefix' = "comp-" to resume games vs. computer
-                       const prefix = (this.mode=="computer" ? "comp-" : "");
+                       const prefix = this.getStoragePrefix(this.mode);
                        localStorage.setItem(prefix+"variant", variant);
                        localStorage.setItem(prefix+"mycolor", this.mycolor);
                        localStorage.setItem(prefix+"fenStart", this.fenStart);
@@ -1182,7 +1024,7 @@ Vue.component('my-game', {
                        localStorage.setItem(prefix+"score", "*");
                },
                updateStorage: function() {
-                       const prefix = (this.mode=="computer" ? "comp-" : "");
+                       const prefix = this.getStoragePrefix(this.mode);
                        localStorage.setItem(prefix+"moves", JSON.stringify(this.vr.moves));
                        localStorage.setItem(prefix+"fen", this.vr.getFen());
                        if (this.score != "*")
@@ -1190,13 +1032,13 @@ Vue.component('my-game', {
                },
                // "computer mode" clearing is done through the menu
                clearStorage: function() {
-                       if (["human","chat"].includes(this.mode))
+                       if (this.mode == "human")
                        {
                                delete localStorage["myid"];
                                delete localStorage["oppid"];
                                delete localStorage["gameId"];
                        }
-                       const prefix = (this.mode=="computer" ? "comp-" : "");
+                       const prefix = this.getStoragePrefix(this.mode);
                        delete localStorage[prefix+"variant"];
                        delete localStorage[prefix+"mycolor"];
                        delete localStorage[prefix+"fenStart"];
@@ -1205,6 +1047,7 @@ Vue.component('my-game', {
                        delete localStorage[prefix+"score"];
                },
                // HACK because mini-css tooltips are persistent after click...
+               // NOTE: seems to work only in chrome/chromium. TODO...
                getRidOfTooltip: function(elt) {
                        elt.style.visibility = "hidden";
                        setTimeout(() => { elt.style.visibility="visible"; }, 100);
@@ -1213,9 +1056,9 @@ Vue.component('my-game', {
                        this.getRidOfTooltip(e.currentTarget);
                        document.getElementById("modal-chat").checked = true;
                },
-               clearComputerGame: function(e) {
+               clearCurrentGame: function(e) {
                        this.getRidOfTooltip(e.currentTarget);
-                       this.clearStorage(); //this.mode=="computer" (already checked)
+                       this.clearStorage();
                        location.reload(); //to see clearing effects
                },
                showSettings: function(e) {
@@ -1226,9 +1069,9 @@ Vue.component('my-game', {
                        this.hints = !this.hints;
                        localStorage["hints"] = (this.hints ? "1" : "0");
                },
-               setColor: function(e) {
-                       this.color = e.target.options[e.target.selectedIndex].value;
-                       localStorage["color"] = this.color;
+               setBoardColor: function(e) {
+                       this.bcolor = e.target.options[e.target.selectedIndex].value;
+                       localStorage["bcolor"] = this.bcolor;
                },
                setSound: function(e) {
                        this.sound = parseInt(e.target.options[e.target.selectedIndex].value);
@@ -1236,7 +1079,7 @@ Vue.component('my-game', {
                },
                clickGameSeek: function(e) {
                        this.getRidOfTooltip(e.currentTarget);
-                       if (this.mode == "human")
+                       if (this.mode == "human" && this.score == "*")
                                return; //no newgame while playing
                        if (this.seek)
                        {
@@ -1248,6 +1091,12 @@ Vue.component('my-game', {
                },
                clickComputerGame: function(e) {
                        this.getRidOfTooltip(e.currentTarget);
+                       if (this.mode == "computer" && this.score == "*"
+                               && this.vr.turn != this.mycolor)
+                       {
+                               // Wait for computer reply first (avoid potential "ghost move" bug)
+                               return;
+                       }
                        this.newGame("computer");
                },
                clickFriendGame: function(e) {
@@ -1266,17 +1115,21 @@ Vue.component('my-game', {
                        }
                        this.endGame(this.mycolor=="w"?"0-1":"1-0");
                },
-               newGame: function(mode, fenInit, color, oppId) {
-                       let fen = fenInit || VariantRules.GenRandInitFen();
+               newGame: function(mode, fenInit, color, oppId, gameId) {
+                       const fen = fenInit || VariantRules.GenRandInitFen();
                        console.log(fen); //DEBUG
                        if (mode=="human" && !oppId)
                        {
                                const storageVariant = localStorage.getItem("variant");
-                               if (!!storageVariant && storageVariant !== variant)
-                                       return alert("Finish your " + storageVariant + " game first!");
+                               if (!!storageVariant && storageVariant !== variant
+                                       && localStorage["score"] == "*")
+                               {
+                                       return alert(translations["Finish your "] +
+                                               storageVariant + translations[" game first!"]);
+                               }
                                // Send game request and wait..
                                try {
-                                       this.conn.send(JSON.stringify({code:"newgame", fen:fen}));
+                                       this.conn.send(JSON.stringify({code:"newgame", fen:fen, gameid: getRandString() }));
                                } catch (INVALID_STATE_ERR) {
                                        return; //nothing achieved
                                }
@@ -1286,27 +1139,37 @@ Vue.component('my-game', {
                                setTimeout(() => { modalBox.checked = false; }, 2000);
                                return;
                        }
-                       if (["human","chat"].includes(this.mode))
+                       const prefix = this.getStoragePrefix(mode);
+                       if (mode == "computer")
                        {
-                               // Start a new game vs. another human (or...) => forget about current one
-                               this.clearStorage();
+                               const storageVariant = localStorage.getItem(prefix+"variant");
+                               if (!!storageVariant)
+                               {
+                                       const score = localStorage.getItem(prefix+"score");
+                                       if (storageVariant !== variant && score == "*")
+                                       {
+                                               if (!confirm(storageVariant +
+                                                       translations[": unfinished computer game will be erased"]))
+                                               {
+                                                       return;
+                                               }
+                                       }
+                               }
                        }
-                       if (mode == "computer")
+                       else if (mode == "friend")
                        {
-                               const storageVariant = localStorage.getItem("comp-variant");
+                               const storageVariant = localStorage.getItem(prefix+"variant");
                                if (!!storageVariant)
                                {
-                                       const score = localStorage.getItem("comp-score");
+                                       const score = localStorage.getItem(prefix+"score");
                                        if (storageVariant !== variant && score == "*")
                                        {
-                                               if (!confirm("Unfinished " + storageVariant +
-                                                       " computer game will be erased"))
+                                               if (!confirm(storageVariant +
+                                                       translations[": current analysis will be erased"]))
                                                {
                                                        return;
                                                }
                                        }
-                                       else if (score == "*")
-                                               return this.continueGame("computer");
                                }
                        }
                        this.vr = new VariantRules(fen, []);
@@ -1318,7 +1181,7 @@ Vue.component('my-game', {
                        if (mode=="human")
                        {
                                // Opponent found!
-                               this.gameId = getRandString();
+                               this.gameId = gameId;
                                this.oppid = oppId;
                                this.oppConnected = true;
                                this.mycolor = color;
@@ -1326,27 +1189,31 @@ Vue.component('my-game', {
                                if (this.sound >= 1)
                                        new Audio("/sounds/newgame.mp3").play().catch(err => {});
                                document.getElementById("modal-newgame").checked = false;
-                               this.setStorage(); //in case of interruptions
                        }
                        else if (mode == "computer")
                        {
                                this.compWorker.postMessage(["init",this.vr.getFen()]);
                                this.mycolor = (Math.random() < 0.5 ? 'w' : 'b');
-                               this.setStorage(); //store game state
                                if (this.mycolor != this.vr.turn)
                                        this.playComputerMove();
                        }
-                       //else: against a (IRL) friend or problem solving: nothing more to do
+                       else if (mode == "friend")
+                               this.mycolor = "w"; //convention...
+                       //else: problem solving: nothing more to do
+                       if (mode != "problem")
+                               this.setStorage(); //store game state in case of interruptions
                },
                continueGame: function(mode) {
                        this.mode = mode;
                        this.oppid = (mode=="human" ? localStorage.getItem("oppid") : undefined);
-                       const prefix = (mode=="computer" ? "comp-" : "");
+                       const prefix = this.getStoragePrefix(mode);
                        this.mycolor = localStorage.getItem(prefix+"mycolor");
                        const moves = JSON.parse(localStorage.getItem(prefix+"moves"));
                        const fen = localStorage.getItem(prefix+"fen");
                        const score = localStorage.getItem(prefix+"score"); //set in "endGame()"
                        this.fenStart = localStorage.getItem(prefix+"fenStart");
+                       this.vr = new VariantRules(fen, moves);
+                       this.incheck = this.vr.getCheckSquares(this.vr.turn);
                        if (mode == "human")
                        {
                                this.gameId = localStorage.getItem("gameId");
@@ -1354,16 +1221,13 @@ Vue.component('my-game', {
                                this.conn.send(JSON.stringify({
                                        code:"ping",oppid:this.oppid,gameId:this.gameId}));
                        }
-                       else
-                               this.compWorker.postMessage(["init",fen]);
-                       this.vr = new VariantRules(fen, moves);
-                       if (moves.length > 0)
+                       else if (mode == "computer")
                        {
-                               const lastMove = moves[moves.length-1];
-                               this.vr.undo(lastMove);
-                               this.incheck = this.vr.getCheckSquares(lastMove);
-                               this.vr.play(lastMove, "ingame");
+                               this.compWorker.postMessage(["init",fen]);
+                               if (score == "*" && this.mycolor != this.vr.turn)
+                                       this.playComputerMove();
                        }
+                       //else: nothing special to do in friend mode
                        if (score != "*")
                        {
                                // Small delay required when continuation run faster than drawing page
@@ -1416,7 +1280,7 @@ Vue.component('my-game', {
                                this.selectedPiece.style.zIndex = 3000;
                                const startSquare = this.getSquareFromId(e.target.parentNode.id);
                                this.possibleMoves = [];
-                               if (!["idle","chat"].includes(this.mode))
+                               if (this.score == "*")
                                {
                                        const color = ["friend","problem"].includes(this.mode)
                                                ? this.vr.turn
@@ -1521,21 +1385,19 @@ Vue.component('my-game', {
                                move = this.vr.moves[this.cursor++];
                        }
                        if (!!programmatic) //computer or human opponent
-                       {
-                               this.animateMove(move);
-                               return;
-                       }
+                               return this.animateMove(move);
                        // 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 (!["idle","chat"].includes(this.mode))
+                       if (this.score == "*")
                        {
                                // Emergency check, if human game started "at the same time"
                                // TODO: robustify this...
                                if (this.mode == "human" && !!move.computer)
                                        return;
-                               this.incheck = this.vr.getCheckSquares(move); //is opponent in check?
                                this.vr.play(move, "ingame");
+                               // Is opponent in check?
+                               this.incheck = this.vr.getCheckSquares(this.vr.turn);
                                if (this.sound == 2)
                                        new Audio("/sounds/move.mp3").play().catch(err => {});
                                if (this.mode == "computer")
@@ -1543,14 +1405,6 @@ Vue.component('my-game', {
                                        // Send the move to web worker (TODO: including his own moves?!)
                                        this.compWorker.postMessage(["newmove",move]);
                                }
-                       }
-                       else
-                       {
-                               VariantRules.PlayOnBoard(this.vr.board, move);
-                               this.$forceUpdate(); //TODO: ?!
-                       }
-                       if (!["idle","chat"].includes(this.mode))
-                       {
                                const eog = this.vr.checkGameOver();
                                if (eog != "*")
                                {
@@ -1564,7 +1418,12 @@ Vue.component('my-game', {
                                        }
                                }
                        }
-                       if (["human","computer"].includes(this.mode))
+                       else
+                       {
+                               VariantRules.PlayOnBoard(this.vr.board, move);
+                               this.$forceUpdate(); //TODO: ?!
+                       }
+                       if (["human","computer","friend"].includes(this.mode))
                                this.updateStorage(); //after our moves and opponent moves
                        if (this.mode == "computer" && this.vr.turn != this.mycolor && this.score == "*")
                                this.playComputerMove();
@@ -1586,16 +1445,15 @@ Vue.component('my-game', {
                                this.vr.undo(lm);
                                if (this.sound == 2)
                                        new Audio("/sounds/undo.mp3").play().catch(err => {});
-                               const lmBefore = this.vr.lastMove;
-                               if (!!lmBefore)
-                               {
-                                       this.vr.undo(lmBefore);
-                                       this.incheck = this.vr.getCheckSquares(lmBefore);
-                                       this.vr.play(lmBefore, "ingame");
-                               }
-                               else
-                                       this.incheck = [];
+                               this.incheck = this.vr.getCheckSquares(this.vr.turn);
                        }
                },
        },
 })
+
+// TODO: keep moves list here
+get lastMove()
+       {
+               const L = this.moves.length;
+               return (L>0 ? this.moves[L-1] : null);
+       }