Index page almost OK. Now work on variant page (main hall...)
[vchess.git] / public / javascripts / components / game.js
index 6627252..c2cce62 100644 (file)
@@ -38,6 +38,8 @@ Vue.component('my-game', {
                        this.newGame("problem", p.fen, V.ParseFen(p.fen).turn);
                },
        },
+       // TODO: split the rendering in other components ?
+       // At least divide in parts, it's too big now.
        render(h) {
                const [sizeX,sizeY] = [V.size.x,V.size.y];
                // Precompute hints squares to facilitate rendering
@@ -57,7 +59,7 @@ Vue.component('my-game', {
                                        "tooltip": true,
                                        "play": true,
                                        "seek": this.seek,
-                                       "playing": this.mode == "human",
+                                       "playing": this.mode == "human" && this.score == "*",
                                },
                        },
                        [h('i', { 'class': { "material-icons": true } }, "accessibility")])
@@ -73,7 +75,7 @@ Vue.component('my-game', {
                                        'class': {
                                                "tooltip":true,
                                                "play": true,
-                                               "playing": this.mode == "computer",
+                                               "playing": this.mode == "computer" && this.score == "*",
                                                "spaceleft": true,
                                        },
                                },
@@ -190,24 +192,6 @@ Vue.component('my-game', {
                                }
                        );
                        aboveBoardElts.push(turnIndic);
-                       const settingsBtn = h(
-                               'button',
-                               {
-                                       on: { click: this.showSettings },
-                                       attrs: {
-                                               "aria-label": translations['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 } },
@@ -443,7 +427,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}) }
                                        },
                                        [
@@ -467,7 +451,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}) }
                                        },
                                        [
@@ -618,175 +602,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: translations["Preferences"] },
-                                                               }
-                                                       ),
-                                                       h('fieldset',
-                                                         { },
-                                                               [
-                                                                       h('label',
-                                                                               {
-                                                                                       attrs: { for: "nameSetter" },
-                                                                                       domProps: { innerHTML: translations["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: translations["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: translations["Board colors"] },
-                                                                               },
-                                                                       ),
-                                                                       h("select",
-                                                                               {
-                                                                                       attrs: { "id": "selectColor" },
-                                                                                       on: { "change": this.setBoardColor },
-                                                                               },
-                                                                               [
-                                                                                       h("option",
-                                                                                               {
-                                                                                                       domProps: {
-                                                                                                               "value": "lichess",
-                                                                                                               innerHTML: translations["brown"]
-                                                                                                       },
-                                                                                                       attrs: { "selected": this.color=="lichess" },
-                                                                                               }
-                                                                                       ),
-                                                                                       h("option",
-                                                                                               {
-                                                                                                       domProps: {
-                                                                                                               "value": "chesscom",
-                                                                                                               innerHTML: translations["green"]
-                                                                                                       },
-                                                                                                       attrs: { "selected": this.color=="chesscom" },
-                                                                                               }
-                                                                                       ),
-                                                                                       h("option",
-                                                                                               {
-                                                                                                       domProps: {
-                                                                                                               "value": "chesstempo",
-                                                                                                               innerHTML: translations["blue"]
-                                                                                                       },
-                                                                                                       attrs: { "selected": this.color=="chesstempo" },
-                                                                                               }
-                                                                                       ),
-                                                                               ],
-                                                                       ),
-                                                               ]
-                                                       ),
-                                                       h('fieldset',
-                                                               { },
-                                                               [
-                                                                       h('label',
-                                                                               {
-                                                                                       attrs: { for: "selectSound" },
-                                                                                       domProps: { innerHTML: translations["Play sounds?"] },
-                                                                               },
-                                                                       ),
-                                                                       h("select",
-                                                                               {
-                                                                                       attrs: { "id": "selectSound" },
-                                                                                       on: { "change": this.setSound },
-                                                                               },
-                                                                               [
-                                                                                       h("option",
-                                                                                               {
-                                                                                                       domProps: {
-                                                                                                               "value": "0",
-                                                                                                               innerHTML: translations["None"]
-                                                                                                       },
-                                                                                                       attrs: { "selected": this.sound==0 },
-                                                                                               }
-                                                                                       ),
-                                                                                       h("option",
-                                                                                               {
-                                                                                                       domProps: {
-                                                                                                               "value": "1",
-                                                                                                               innerHTML: translations["New game"]
-                                                                                                       },
-                                                                                                       attrs: { "selected": this.sound==1 },
-                                                                                               }
-                                                                                       ),
-                                                                                       h("option",
-                                                                                               {
-                                                                                                       domProps: {
-                                                                                                               "value": "2",
-                                                                                                               innerHTML: translations["All"]
-                                                                                                       },
-                                                                                                       attrs: { "selected": this.sound==2 },
-                                                                                               }
-                                                                                       ),
-                                                                               ],
-                                                                       ),
-                                                               ]
-                                                       ),
-                                               ]
-                                       )
-                               ]
-                       )
-               ];
-               elementArray = elementArray.concat(modalSettings);
                let chatEltsArray =
                [
                        h('label',
@@ -865,41 +680,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: translations["Download game"] },
-                                                       }
-                                               ),
-                                       ]
-                               )
-                       );
-               }
-               else if (this.mode != "idle")
+               if (!!this.vr)
                {
                        if (this.mode == "problem")
                        {
@@ -949,6 +730,31 @@ Vue.component('my-game', {
                                        )
                                );
                        }
+                       elementArray.push(
+                               h('div',
+                                       {
+                                               attrs: { id: "pgn-div" },
+                                               "class": { "section-content": true },
+                                       },
+                                       [
+                                               h('a',
+                                                       {
+                                                               attrs: {
+                                                                       id: "download",
+                                                                       href: "#",
+                                                               }
+                                                       }
+                                               ),
+                                               h('button',
+                                                       {
+                                                               attrs: { "id": "downloadBtn" },
+                                                               on: { click: this.download },
+                                                               domProps: { innerHTML: translations["Download PGN"] },
+                                                       }
+                                               ),
+                                       ]
+                               )
+                       );
                }
                return h(
                        'div',
@@ -1006,9 +812,11 @@ Vue.component('my-game', {
                        else if (friendContinuation)
                                this.continueGame("friend");
                };
+
+               // TODO: this events listener is central. Refactor ? How ?
                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":
@@ -1028,7 +836,7 @@ Vue.component('my-game', {
                                        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, (variant!="Dark" ? "animate" : null));
@@ -1038,6 +846,7 @@ Vue.component('my-game', {
                                                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,
@@ -1047,10 +856,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({
@@ -1068,6 +878,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,
                                                }));
@@ -1092,6 +903,7 @@ Vue.component('my-game', {
                                        break;
                        }
                };
+
                const socketCloseListener = () => {
                        this.conn = new WebSocket(url + "/?sid=" + this.myid + "&page=" + variant);
                        this.conn.addEventListener('open', socketOpenListener);
@@ -1113,7 +925,7 @@ Vue.component('my-game', {
                                        this.play();
                        }
                };
-               // Computer moves web worker logic:
+               // Computer moves web worker logic: (TODO: also for observers in HH games)
                this.compWorker.postMessage(["scripts",variant]);
                const self = this;
                this.compWorker.onmessage = function(e) {
@@ -1140,10 +952,29 @@ Vue.component('my-game', {
                }
        },
        methods: {
+               // TODO: in settings.js
                setMyname: function(e) {
                        this.myname = e.target.value;
                        localStorage["username"] = this.myname;
                },
+               showSettings: function(e) {
+                       this.getRidOfTooltip(e.currentTarget);
+                       document.getElementById("modal-settings").checked = true;
+               },
+               toggleHints: function() {
+                       this.hints = !this.hints;
+                       localStorage["hints"] = (this.hints ? "1" : "0");
+               },
+               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);
+                       localStorage["sound"] = this.sound;
+               },
+
+               // TODO: in another component
                trySendChat: function(e) {
                        if (e.keyCode == 13) //'enter' key
                                this.sendChat();
@@ -1156,6 +987,12 @@ Vue.component('my-game', {
                        this.conn.send(JSON.stringify({
                                code:"newchat", oppid: this.oppid, msg: chatTxt}));
                },
+               startChat: function(e) {
+                       this.getRidOfTooltip(e.currentTarget);
+                       document.getElementById("modal-chat").checked = true;
+               },
+
+               // TODO: in  problems component
                toggleShowSolution: function() {
                        let problemSolution = document.getElementById("problem-solution");
                        problemSolution.style.display =
@@ -1163,14 +1000,14 @@ Vue.component('my-game', {
                                        ? "block"
                                        : "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() {
@@ -1186,8 +1023,6 @@ 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
@@ -1196,6 +1031,10 @@ Vue.component('my-game', {
                        }
                        this.cursor = this.vr.moves.length; //to navigate in finished game
                },
+
+               // TODO: elsewhere (general methods to access/retrieve from storage, to be generalized)
+               // https://developer.mozilla.org/fr/docs/Web/API/API_IndexedDB
+               // https://dexie.org/
                getStoragePrefix: function(mode) {
                        let prefix = "";
                        if (mode == "computer")
@@ -1242,40 +1081,23 @@ Vue.component('my-game', {
                        delete localStorage[prefix+"fen"];
                        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);
-               },
-               startChat: function(e) {
-                       this.getRidOfTooltip(e.currentTarget);
-                       document.getElementById("modal-chat").checked = true;
-               },
                clearCurrentGame: function(e) {
                        this.getRidOfTooltip(e.currentTarget);
                        this.clearStorage();
                        location.reload(); //to see clearing effects
                },
-               showSettings: function(e) {
-                       this.getRidOfTooltip(e.currentTarget);
-                       document.getElementById("modal-settings").checked = true;
-               },
-               toggleHints: function() {
-                       this.hints = !this.hints;
-                       localStorage["hints"] = (this.hints ? "1" : "0");
-               },
-               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);
-                       localStorage["sound"] = this.sound;
+
+               // 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);
                },
+
+               // TODO: elsewhere, probably (new game button)
                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)
                        {
@@ -1287,25 +1109,20 @@ 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) {
                        this.getRidOfTooltip(e.currentTarget);
                        document.getElementById("modal-fenedit").checked = true;
                },
-               resign: function(e) {
-                       this.getRidOfTooltip(e.currentTarget);
-                       if (this.mode == "human" && this.oppConnected)
-                       {
-                               try {
-                                       this.conn.send(JSON.stringify({code: "resign", oppid: this.oppid}));
-                               } catch (INVALID_STATE_ERR) {
-                                       return; //socket is not ready (and not yet reconnected)
-                               }
-                       }
-                       this.endGame(this.mycolor=="w"?"0-1":"1-0");
-               },
-               newGame: function(mode, fenInit, color, oppId) {
+               // In main hall :
+               newGame: function(mode, fenInit, color, oppId, gameId) {
                        const fen = fenInit || VariantRules.GenRandInitFen();
                        console.log(fen); //DEBUG
                        if (mode=="human" && !oppId)
@@ -1319,7 +1136,7 @@ Vue.component('my-game', {
                                }
                                // 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
                                }
@@ -1344,8 +1161,6 @@ Vue.component('my-game', {
                                                        return;
                                                }
                                        }
-                                       else if (score == "*")
-                                               return this.continueGame("computer");
                                }
                        }
                        else if (mode == "friend")
@@ -1370,12 +1185,10 @@ Vue.component('my-game', {
                        this.mode = mode;
                        this.incheck = [];
                        this.fenStart = V.ParseFen(fen).position; //this is enough
-                       if (mode != "problem")
-                               this.setStorage(); //store game state in case of interruptions
                        if (mode=="human")
                        {
                                // Opponent found!
-                               this.gameId = getRandString();
+                               this.gameId = gameId;
                                this.oppid = oppId;
                                this.oppConnected = true;
                                this.mycolor = color;
@@ -1394,6 +1207,8 @@ Vue.component('my-game', {
                        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;
@@ -1416,7 +1231,7 @@ Vue.component('my-game', {
                        else if (mode == "computer")
                        {
                                this.compWorker.postMessage(["init",fen]);
-                               if (this.mycolor != this.vr.turn)
+                               if (score == "*" && this.mycolor != this.vr.turn)
                                        this.playComputerMove();
                        }
                        //else: nothing special to do in friend mode
@@ -1426,10 +1241,25 @@ Vue.component('my-game', {
                                setTimeout(() => this.endGame(score), 100);
                        }
                },
+
+               resign: function(e) {
+                       this.getRidOfTooltip(e.currentTarget);
+                       if (this.mode == "human" && this.oppConnected)
+                       {
+                               try {
+                                       this.conn.send(JSON.stringify({code: "resign", oppid: this.oppid}));
+                               } catch (INVALID_STATE_ERR) {
+                                       return; //socket is not ready (and not yet reconnected)
+                               }
+                       }
+                       this.endGame(this.mycolor=="w"?"0-1":"1-0");
+               },
                playComputerMove: function() {
                        this.timeStart = Date.now();
                        this.compWorker.postMessage(["askmove"]);
                },
+
+               // TODO: purely graphical, move in a "chessground-like" component
                // Get the identifier of a HTML table cell from its numeric coordinates o.x,o.y.
                getSquareId: function(o) {
                        // NOTE: a separator is required to allow any size of board
@@ -1568,20 +1398,26 @@ Vue.component('my-game', {
                                this.play(move);
                        }, 250);
                },
+
+               // OK, these last functions can stay here (?!)
                play: function(move, programmatic) {
                        if (!move)
                        {
                                // Navigate after game is over
-                               if (this.cursor >= this.vr.moves.length)
+                               if (this.cursor >= this.moves.length)
                                        return; //already at the end
-                               move = this.vr.moves[this.cursor++];
+                               move = this.moves[this.cursor++];
                        }
                        if (!!programmatic) //computer or human opponent
                                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 (this.score == "*")
+                       
+                       
+                       // TODO: play move, and stack it on this.moves (if a move was provided; otherwise just navigate)
+                       
+                       if (this.score == "*") //TODO: I don't like this if()
                        {
                                // Emergency check, if human game started "at the same time"
                                // TODO: robustify this...
@@ -1597,7 +1433,7 @@ Vue.component('my-game', {
                                        // Send the move to web worker (TODO: including his own moves?!)
                                        this.compWorker.postMessage(["newmove",move]);
                                }
-                               const eog = this.vr.checkGameOver();
+                               const eog = this.vr.getCurrentScore();
                                if (eog != "*")
                                {
                                        if (["human","computer"].includes(this.mode))
@@ -1610,16 +1446,17 @@ Vue.component('my-game', {
                                        }
                                }
                        }
-                       else
-                       {
-                               VariantRules.PlayOnBoard(this.vr.board, move);
-                               this.$forceUpdate(); //TODO: ?!
-                       }
+//                     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();
                },
+               // TODO: merge two next functions
                undo: function() {
                        // Navigate after game is over
                        if (this.cursor == 0)
@@ -1642,3 +1479,16 @@ Vue.component('my-game', {
                },
        },
 })
+
+//// TODO: keep moves list here
+//get lastMove()
+//     {
+//             const L = this.moves.length;
+//             return (L>0 ? this.moves[L-1] : null);
+//     }
+//
+//// here too:
+//                     move.notation = this.getNotation(move);
+//TODO: confirm dialog with "opponent offers draw", avec possible bouton "prevent future offers" + bouton "proposer nulle"
+//+ bouton "abort" avec score == "?" + demander confirmation pour toutes ces actions,
+//comme sur lichess