Draft moveList component

diff --git a/public/javascripts/components/game.js b/public/javascripts/components/game.js
index 6361b8a..594c8c2 100644 (file)
--- a/public/javascripts/components/game.js
+++ b/public/javascripts/components/game.js
@@ -93,7 +93,7 @@ Vue.component('my-game', {
                                        {{ translate("Download PGN") }}
                                </button>
                        </div>
-                       <my-move-list v-if="showMoves">
+                       <my-move-list v-if="showMoves" :moves="moves">
                        </my-move-list>
                </div>
        `,

diff --git a/public/javascripts/components/moveList.js b/public/javascripts/components/moveList.js
index 9798004..3687864 100644 (file)
--- a/public/javascripts/components/moveList.js
+++ b/public/javascripts/components/moveList.js
@@ -1 +1,74 @@
 //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
+       // --> we could also add turn indicator here
+       data: function() {
+               return {
+                       // if oppid == "computer" then mode = "computer" (otherwise human)
+                       myid: "", //TODO
+               };
+       },
+       // TODO: extend rendering for more than 2 colors: would be a parameter
+       render(h) {
+               if (this.moves.length == 0)
+                       return;
+               const nbColors = 2;
+               if (this.moves[0].color == "black")
+                       this.moves.unshift({color: "white", notation: "..."});
+               let tableContent = [];
+               let moveCounter = 0;
+               let tableRow = undefined;
+               let moveCells = undefined;
+               let curCellContent = "";
+               for (let i=0; i<this.moves.length; i++)
+               {
+                       if (this.moves[i].color == "white")
+                       {
+                               if (i == 0 || i>0 && this.moves[i-1].color=="black")
+                               {
+                                       if (!!tableRow)
+                                               tableContent.push(tableRow);
+                                       moveCells = [
+                                               h(
+                                                       "td",
+                                                       { attrs: { innerHTML: (++moveCounter) + "." } }
+                                               )
+                                       ];
+                                       tableRow = h(
+                                               "tr",
+                                               { },
+                                               moveCells
+                                       );
+                                       curCellContent = "";
+                               }
+                               curCellContent += this.moves[i].notation + ",";
+                               moveCells.push(
+                                       h(
+                                               "td",
+                                               { attrs: ..............
+                       }
+               }
+               // Complete last row, which might not be full:
+               if (tableRow.length-1 < nbColors)
+               {
+                       const delta = nbColors - (moveCells.length-1);
+                       for (let i=0; i<delta; i++)
+                       {
+                               moveCells.push(
+                                       "td"
+                                       { attrs: { innerHTML: "" } }
+                               );
+                       }
+                       tableContent.push(tableRow);
+               }
+               const movesTable = h(
+                       "table",
+                       { },
+                       tableContent
+               );
+               return movesTable;
+       },
+//     methods: {
+//     },
+}

diff --git a/public/javascripts/components/room.js b/public/javascripts/components/room.js
index 38eb9f9..f5daee2 100644 (file)
--- a/public/javascripts/components/room.js
+++ b/public/javascripts/components/room.js
@@ -8,6 +8,15 @@ div(role="dialog" aria-labelledby="newGameTxt")
                p= translations["Waiting for opponent..."]
 */
 
+
+
+
+// TODO: my-challenge-list, gérant clicks sur challenges, affichage, réception/émission des infos sur challenges
+// de même, my-player-list
+
+
+
+
 // TODO: si on est en train de jouer une partie, le notifier aux nouveaux connectés
 
 /*