From: Benjamin Auder <benjamin.auder@somewhere> Date: Mon, 14 Jan 2019 11:15:23 +0000 (+0100) Subject: Draft moveList component X-Git-Url: https://git.auder.net/doc/html/vendor/img/pieces/R.css?a=commitdiff_plain;h=7ee085c29c53c5072008e10a1ec8d3a763f42859;p=vchess.git Draft moveList component --- diff --git a/public/javascripts/components/game.js b/public/javascripts/components/game.js index 6361b8a1..594c8c22 100644 --- 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 97980040..3687864c 100644 --- 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 38eb9f9b..f5daee28 100644 --- 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 /*