Fix moveList + progress on game navigation system

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

diff --git a/public/javascripts/components/moveList.js b/public/javascripts/components/moveList.js
index 3687864..b3c4255 100644 (file)
--- a/public/javascripts/components/moveList.js
+++ b/public/javascripts/components/moveList.js
@@ -1,12 +1,12 @@
 //TODO: component for moves list on the right
 // TODO: generic "getPGN" in the same way (following move.color)
 Vue.component('my-move-list', {
-       props: ["moves"], //TODO: other props for e.g. players names + connected indicator
+       props: ["moves","cursor"], //TODO: other props for e.g. players names + connected indicator
        // --> we could also add turn indicator here
+       // + missing "cursor" prop
        data: function() {
                return {
-                       // if oppid == "computer" then mode = "computer" (otherwise human)
-                       myid: "", //TODO
+                       something: "", //TODO
                };
        },
        // TODO: extend rendering for more than 2 colors: would be a parameter
@@ -14,8 +14,9 @@ Vue.component('my-move-list', {
                if (this.moves.length == 0)
                        return;
                const nbColors = 2;
-               if (this.moves[0].color == "black")
-                       this.moves.unshift({color: "white", notation: "..."});
+               // TODO: name colors "white", "black", "red", "yellow" ?
+               if (this.moves[0].color == "b")
+                       this.moves.unshift({color: "w", notation: "..."});
                let tableContent = [];
                let moveCounter = 0;
                let tableRow = undefined;
@@ -23,45 +24,62 @@ Vue.component('my-move-list', {
                let curCellContent = "";
                for (let i=0; i<this.moves.length; i++)
                {
-                       if (this.moves[i].color == "white")
+                       if (this.moves[i].color == "w")
                        {
-                               if (i == 0 || i>0 && this.moves[i-1].color=="black")
+                               if (i == 0 || i>0 && this.moves[i-1].color=="b")
                                {
                                        if (!!tableRow)
+                                       {
+                                               tableRow.children = moveCells;
                                                tableContent.push(tableRow);
+                                       }
                                        moveCells = [
                                                h(
                                                        "td",
-                                                       { attrs: { innerHTML: (++moveCounter) + "." } }
+                                                       { domProps: { innerHTML: (++moveCounter) + "." } }
                                                )
                                        ];
                                        tableRow = h(
                                                "tr",
-                                               { },
-                                               moveCells
+                                               { }
                                        );
                                        curCellContent = "";
                                }
-                               curCellContent += this.moves[i].notation + ",";
+                       }
+                       curCellContent += this.moves[i].notation;
+                       if (i < this.moves.length-1 && this.moves[i+1].color == this.moves[i].color)
+                               curCellContent += ",";
+                       else //color change
+                       {
                                moveCells.push(
                                        h(
                                                "td",
-                                               { attrs: ..............
+                                               {
+                                                       domProps: { innerHTML: curCellContent },
+                                                       on: { click: () => this.gotoMove(i) },
+                                                       "class": { "highlight-lm": this.cursor-1 == i },
+                                               }
+                                       )
+                               );
+                               curCellContent = "";
                        }
                }
                // Complete last row, which might not be full:
-               if (tableRow.length-1 < nbColors)
+               if (moveCells.length-1 < nbColors)
                {
                        const delta = nbColors - (moveCells.length-1);
                        for (let i=0; i<delta; i++)
                        {
                                moveCells.push(
-                                       "td"
-                                       { attrs: { innerHTML: "" } }
+                                       h(
+                                               "td",
+                                               { domProps: { innerHTML: "" } }
+                                       )
                                );
                        }
-                       tableContent.push(tableRow);
                }
+               tableRow.children = moveCells;
+               tableContent.push(tableRow);
                const movesTable = h(
                        "table",
                        { },
@@ -69,6 +87,9 @@ Vue.component('my-move-list', {
                );
                return movesTable;
        },
-//     methods: {
-//     },
-}
+       methods: {
+               gotoMove: function(index) {
+                       this.$emit("goto-move", index);
+               },
+       },
+})