Work on sizes, CSS
[vchess.git] / client / src / components / MoveList.vue
CommitLineData
430a2038
BA
1<template lang="pug">
2div
3 #scoreInfo(v-if="score!='*'")
4 p {{ score }}
5 p {{ message }}
6 table#movesList
7 tbody
8 tr(v-for="moveIdx in evenNumbers")
5157ce0b 9 td {{ firstNum + moveIdx / 2 + 1 }}
430a2038
BA
10 td(:class="{'highlight-lm': cursor == moveIdx}"
11 data-label="White move" @click="() => gotoMove(moveIdx)")
12 | {{ moves[moveIdx].notation }}
13 td(v-if="moveIdx < moves.length-1"
14 :class="{'highlight-lm': cursor == moveIdx+1}"
15 data-label="Black move" @click="() => gotoMove(moveIdx+1)")
16 | {{ moves[moveIdx+1].notation }}
17 // Else: just add an empty cell
18 td(v-else)
19</template>
20
cf2343ce 21<script>
a3ab5fdb 22// Component for moves list on the right
cf2343ce
BA
23export default {
24 name: 'my-move-list',
5157ce0b 25 props: ["moves","cursor","score","message","firstNum"],
430a2038
BA
26 watch: {
27 cursor: function(newValue) {
3837d4f7
BA
28 if (newValue < 0)
29 newValue = 0; //avoid rows[-1] --> error
430a2038
BA
30 // $nextTick to wait for table > tr to be rendered
31 this.$nextTick( () => {
32 let rows = document.querySelectorAll('#movesList tr');
33 if (rows.length > 0)
34 {
35 rows[Math.floor(newValue/2)].scrollIntoView({
63ca2b89
BA
36 behavior: "auto",
37 block: "nearest",
430a2038
BA
38 });
39 }
40 });
41 },
42 },
43 computed: {
44 evenNumbers: function() {
45 return [...Array(this.moves.length).keys()].filter(i => i%2==0);
46 },
47 },
48 methods: {
49 gotoMove: function(index) {
50 this.$emit("goto-move", index);
51 },
52 },
53};
54</script>
55
56<style lang="sass" scoped>
57.moves-list
58 min-width: 250px
59td.highlight-lm
60 background-color: plum
61</style>