Improved PGN and game seek

diff --git a/TODO b/TODO
index e9d0cc5..7ed21c6 100644 (file)
--- a/TODO
+++ b/TODO
@@ -1,4 +1,6 @@
-Styles must be improved (full width for smartphones, selectable text for PGN...)
+Styles must be improved (full width for smartphones, ...)
+PGN text is not selectable (understand why?!)
+Change cursor when computer "think" (sablier)
 Tooltip text should fade (even when mouse stay on it, especially for small screens)
 Checkered stage 2: switch button at reserve position (or on top).
 Mode expert: game.js, button on top (with online indicator)

diff --git a/public/javascripts/base_rules.js b/public/javascripts/base_rules.js
index 11de147..c0dc826 100644 (file)
--- a/public/javascripts/base_rules.js
+++ b/public/javascripts/base_rules.js
@@ -1037,14 +1037,15 @@ class ChessRules
        }
 
        // The score is already computed when calling this function
-       getPGN(mycolor, score, fenStart)
+       getPGN(mycolor, score, fenStart, mode)
        {
                let pgn = "";
                pgn += '[Site "vchess.club"]<br>';
                const d = new Date();
+               const opponent = this.mode=="human" ? "Anonymous" : "Computer";
                pgn += '[Date "' + d.getFullYear() + '-' + d.getMonth() + '-' + d.getDate() + '"]<br>';
-               pgn += '[White "' + (mycolor=='w'?'Myself':'Anonymous') + '"]<br>';
-               pgn += '[Black "' + (mycolor=='b'?'Myself':'Anonymous') + '"]<br>';
+               pgn += '[White "' + (mycolor=='w'?'Myself':opponent) + '"]<br>';
+               pgn += '[Black "' + (mycolor=='b'?'Myself':opponent) + '"]<br>';
                pgn += '[Fen "' + fenStart + '"]<br>';
                pgn += '[Result "' + score + '"]<br><br>';
 

diff --git a/public/javascripts/components/game.js b/public/javascripts/components/game.js
index ab86057..e412525 100644 (file)
--- a/public/javascripts/components/game.js
+++ b/public/javascripts/components/game.js
@@ -203,32 +203,6 @@ Vue.component('my-game', {
        //                              elementArray.push(reserve);
        //                      }
                        const eogMessage = this.getEndgameMessage(this.score);
-                       let elemsOfEog =
-                       [
-                               h('label',
-                                       {
-                                               attrs: { "for": "modal-eog" },
-                                               "class": { "modal-close": true },
-                                       }
-                               ),
-                               h('h3',
-                                       {
-                                               "class": { "section": true },
-                                               domProps: { innerHTML: eogMessage },
-                                       }
-                               )
-                       ];
-                       if (this.score != "*")
-                       {
-                               elemsOfEog.push(
-                                       h('p', //'textarea', //TODO: selectable!
-                                               {
-                                                       domProps: { innerHTML: this.vr.getPGN(this.mycolor, this.score, this.fenStart) },
-                                                       //attrs: { "readonly": true },
-                                               }
-                                       )
-                               );
-                       }
                        const modalEog = [
                                h('input',
                                        {
@@ -244,7 +218,20 @@ Vue.component('my-game', {
                                                        {
                                                                "class": { "card": true, "smallpad": true },
                                                        },
-                                                       elemsOfEog
+                                                       [
+                                                               h('label',
+                                                                       {
+                                                                               attrs: { "for": "modal-eog" },
+                                                                               "class": { "modal-close": true },
+                                                                       }
+                                                               ),
+                                                               h('h3',
+                                                                       {
+                                                                               "class": { "section": true },
+                                                                               domProps: { innerHTML: eogMessage },
+                                                                       }
+                                                               )
+                                                       ]
                                                )
                                        ]
                                )
@@ -299,6 +286,23 @@ Vue.component('my-game', {
                        actionArray
                );
                elementArray.push(actions);
+               if (this.score != "*")
+               {
+                       elementArray.push(
+                               h('div',
+                                       { },
+                                       [
+                                               h('p',
+                                                       {
+                                                               domProps: {
+                                                                       innerHTML: this.vr.getPGN(this.mycolor, this.score, this.fenStart, this.mode)
+                                                               }
+                                                       }
+                                               )
+                                       ]
+                               )
+                       );
+               }
                return h(
                        'div',
                        {
@@ -426,7 +430,7 @@ Vue.component('my-game', {
                        this.score = score;
                        let modalBox = document.getElementById("modal-eog");
                        modalBox.checked = true;
-                       //setTimeout(() => { modalBox.checked = false; }, 2000); //disabled, to show PGN
+                       setTimeout(() => { modalBox.checked = false; }, 2000);
                        if (this.mode == "human")
                                this.clearStorage();
                        this.mode = "idle";
@@ -485,13 +489,12 @@ Vue.component('my-game', {
                        if (this.mode == "human")
                                return; //no newgame while playing
                        if (this.seek)
+                       {
                                delete localStorage["newgame"]; //cancel game seek
+                               this.seek = false;
+                       }
                        else
-                       {
-                               localStorage["newgame"] = variant;
                                this.newGame("human");
-                       }
-                       this.seek = !this.seek;
                },
                clickComputerGame: function() {
                        if (this.mode == "human")
@@ -507,11 +510,12 @@ Vue.component('my-game', {
                                const storageVariant = localStorage.getItem("variant");
                                if (!!storageVariant && storageVariant !== variant)
                                {
-                                       // TODO: find a better way to ensure this. Newgame system is currently a mess.
                                        alert("Finish your " + storageVariant + " game first!");
                                        return;
                                }
                                // Send game request and wait..
+                               localStorage["newgame"] = variant;
+                               this.seek = true;
                                this.clearStorage(); //in case of
                                try {
                                        this.conn.send(JSON.stringify({code:"newgame", fen:fen}));