-<!-- TODO: merge Game.vue and MoveList.vue (one logic entity, no ?) -->
+<template lang="pug">
+div
+ #scoreInfo(v-if="score!='*'")
+ p {{ score }}
+ p {{ message }}
+ table#movesList
+ tbody
+ tr(v-for="moveIdx in evenNumbers")
+ td {{ moveIdx / 2 + 1 }}
+ td(:class="{'highlight-lm': cursor == moveIdx}"
+ data-label="White move" @click="() => gotoMove(moveIdx)")
+ | {{ moves[moveIdx].notation }}
+ td(v-if="moveIdx < moves.length-1"
+ :class="{'highlight-lm': cursor == moveIdx+1}"
+ data-label="Black move" @click="() => gotoMove(moveIdx+1)")
+ | {{ moves[moveIdx+1].notation }}
+ // Else: just add an empty cell
+ td(v-else)
+</template>
+
<script>
// Component for moves list on the right
export default {
name: 'my-move-list',
- props: ["moves","cursor"], //TODO: other props for e.g. players names + connected indicator
- // --> we could also add turn indicator here
- data: function() {
- return {
- something: "", //TODO?
- };
+ props: ["moves","cursor","score","message"],
+ watch: {
+ cursor: function(newValue) {
+ // $nextTick to wait for table > tr to be rendered
+ this.$nextTick( () => {
+ let rows = document.querySelectorAll('#movesList tr');
+ if (rows.length > 0)
+ {
+ rows[Math.floor(newValue/2)].scrollIntoView({
+ behavior: "auto",
+ block: "nearest",
+ });
+ }
+ });
+ },
+ },
+ computed: {
+ evenNumbers: function() {
+ return [...Array(this.moves.length).keys()].filter(i => i%2==0);
+ },
+ },
+ methods: {
+ gotoMove: function(index) {
+ this.$emit("goto-move", index);
+ },
},
- // 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) {
+};
+</script>
+
+<style lang="sass" scoped>
+.moves-list
+ min-width: 250px
+td.highlight-lm
+ background-color: plum
+</style>
+
+<!-- Old render method:
+ render(h) {
if (this.moves.length == 0)
return;
- const nbColors = 2;
- // 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;
}
}
// Complete last row, which might not be full:
- if (moveCells.length-1 < nbColors)
+ if (moveCells.length-1 == 1)
{
- const delta = nbColors - (moveCells.length-1);
- for (let i=0; i<delta; i++)
- {
- moveCells.push(
- h(
- "td",
- { domProps: { innerHTML: "" } }
- )
- );
- }
+ moveCells.push(
+ h(
+ "td",
+ { domProps: { innerHTML: "" } }
+ )
+ );
}
tableRow.children = moveCells;
tableContent.push(tableRow);
+ const scoreDiv = h("div",
+ {
+ id: "scoreInfo",
+ style: {
+ display: this.score!="*" ? "block" : "none",
+ },
+ },
+ [
+ h("p", this.score),
+ h("p", this.message),
+ ]
+ );
const movesTable = h(
- "table",
- { },
- tableContent
- );
+ "div",
+ { },
+ [
+ scoreDiv,
+ h(
+ "table",
+ {
+ "class": {
+ "moves-list": true,
+ },
+ },
+ tableContent
+ )
+ ]
+ );
return movesTable;
},
- methods: {
- gotoMove: function(index) {
- this.$emit("goto-move", index);
- },
- },
-};
-</script>
+-->