projects
/
vchess.git
/ blobdiff
commit
grep
author
committer
pickaxe
?
search:
re
summary
|
shortlog
|
log
|
commit
|
commitdiff
|
tree
raw
|
inline
| side by side
Step toward a one-page application
[vchess.git]
/
public
/
javascripts
/
components
/
moveList.js
diff --git
a/public/javascripts/components/moveList.js
b/public/javascripts/components/moveList.js
index
3687864
..
48a8e05
100644
(file)
--- a/
public/javascripts/components/moveList.js
+++ b/
public/javascripts/components/moveList.js
@@
-1,21
+1,21
@@
-//TODO: component for moves list on the right
-// TODO: generic "getPGN" in the same way (following move.color)
+// Component for moves list on the right
Vue.component('my-move-list', {
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
data: function() {
return {
// --> we could also add turn indicator here
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
};
},
// TODO: extend rendering for more than 2 colors: would be a parameter
+ // in that case some moves for some colors could be just skipped (if a player lost)
render(h) {
if (this.moves.length == 0)
return;
const nbColors = 2;
render(h) {
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 tableContent = [];
let moveCounter = 0;
let tableRow = undefined;
@@
-23,45
+23,62
@@
Vue.component('my-move-list', {
let curCellContent = "";
for (let i=0; i<this.moves.length; i++)
{
let curCellContent = "";
for (let i=0; i<this.moves.length; i++)
{
- if (this.moves[i].color == "w
hite
")
+ if (this.moves[i].color == "w")
{
{
- if (i == 0 || i>0 && this.moves[i-1].color=="b
lack
")
+ if (i == 0 || i>0 && this.moves[i-1].color=="b")
{
if (!!tableRow)
{
if (!!tableRow)
+ {
+ tableRow.children = moveCells;
tableContent.push(tableRow);
tableContent.push(tableRow);
+ }
moveCells = [
h(
"td",
moveCells = [
h(
"td",
- {
attr
s: { innerHTML: (++moveCounter) + "." } }
+ {
domProp
s: { innerHTML: (++moveCounter) + "." } }
)
];
tableRow = h(
"tr",
)
];
tableRow = h(
"tr",
- { },
- moveCells
+ { }
);
curCellContent = "";
}
);
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",
moveCells.push(
h(
"td",
- { attrs: ..............
+ {
+ domProps: { innerHTML: curCellContent },
+ on: { click: () => this.gotoMove(i) },
+ "class": { "highlight-lm": this.cursor == i },
+ }
+ )
+ );
+ curCellContent = "";
}
}
// Complete last row, which might not be full:
}
}
// 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(
{
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",
{ },
const movesTable = h(
"table",
{ },
@@
-69,6
+86,9
@@
Vue.component('my-move-list', {
);
return movesTable;
},
);
return movesTable;
},
-// methods: {
-// },
-}
+ methods: {
+ gotoMove: function(index) {
+ this.$emit("goto-move", index);
+ },
+ },
+})