From: Benjamin Auder Date: Mon, 14 Jan 2019 11:15:23 +0000 (+0100) Subject: Draft moveList component X-Git-Url: https://git.auder.net/%7B%7B%20asset%28%27mixstore/css/user/scripts/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") }} - + `, 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; i0 && 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