//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
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;
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",
{ },
);
return movesTable;
},
-// methods: {
-// },
-}
+ methods: {
+ gotoMove: function(index) {
+ this.$emit("goto-move", index);
+ },
+ },
+})