X-Git-Url: https://git.auder.net/?a=blobdiff_plain;f=client%2Fsrc%2Fcomponents%2FMoveList.vue;h=4c351dd51cf54207fcd242d125a0bb85fac57bbc;hb=1ef65040168ab7d55ce921abc9d63644a937d689;hp=140b71cf94c6ae359734f2d7c1b4ba8d3574b033;hpb=54ec15ebc0cc874cb40307d0d674964b2f0e11a4;p=vchess.git diff --git a/client/src/components/MoveList.vue b/client/src/components/MoveList.vue index 140b71cf..4c351dd5 100644 --- a/client/src/components/MoveList.vue +++ b/client/src/components/MoveList.vue @@ -53,7 +53,7 @@ div | {{ notation(moves[moveIdx]) }} .td( v-if="moveIdx < moves.length-1" - :class="{'highlight-lm': cursor == moveIdx+1}" + :class="{'highlight-lm': highlightBlackmove(moveIdx+1)}" @click="() => gotoMove(moveIdx+1)" ) | {{ notation(moves[moveIdx+1]) }} @@ -101,10 +101,8 @@ export default { window.addEventListener("resize", () => { if (!timeoutLaunched) { timeoutLaunched = true; - setTimeout(() => { - this.adjustBoard(); - timeoutLaunched = false; - }, 500); + this.adjustBoard(); + setTimeout(() => { timeoutLaunched = false; }, 500); } }); }, @@ -114,9 +112,11 @@ export default { // $nextTick to wait for table > tr to be rendered this.$nextTick(() => { let curMove = document.querySelector(".td.highlight-lm"); - if (!curMove && this.moves.length > 0) + if (!curMove && this.moves.length > 0) { // Cursor is before game beginning, and some moves were made: - curMove = document.querySelector(".moves-list > .tr:first-child > .td"); + curMove = + document.querySelector(".moves-list > .tr:first-child > .td"); + } if (!!curMove) { curMove.scrollIntoView({ behavior: "auto", @@ -135,12 +135,21 @@ export default { notation: function(move) { return getFullNotation(move); }, + highlightBlackmove: function(moveIdx) { + return ( + this.cursor == moveIdx || + (this.show == "byrow" && this.cursor == moveIdx + 1) + ); + }, gotoMove: function(index) { this.$emit("goto-move", index); }, adjustBoard: function() { const boardContainer = document.getElementById("boardContainer"); if (!boardContainer) return; //no board on page + let arrows = document.getElementById("arrowCanvas"); + // TODO: arrows on board don't scale + if (!!arrows) this.$emit("reset-arrows"); const k = document.getElementById("boardSize").value; const movesWidth = window.innerWidth >= 768 ? 280 : 0; const minBoardWidth = 240; //TODO: these 240 and 280 are arbitrary...