Some fixes, draw lines on board, add 7 variants

[vchess.git] / client / src / components / MoveList.vue

diff --git a/client/src/components/MoveList.vue b/client/src/components/MoveList.vue
index da3c047..9ec968f 100644 (file)
--- a/client/src/components/MoveList.vue
+++ b/client/src/components/MoveList.vue
@@ -23,14 +23,14 @@ div
     )
       | {{ st.tr["Rules"] }}
     button(
-      :class="btnTooltipClass"
+      :class="btnTooltipClass()"
       onClick="window.doClick('modalAdjust')"
       :aria-label="st.tr['Resize board']"
     )
       img.inline(src="/images/icons/resize.svg")
     button#analyzeBtn(
       v-if="canAnalyze"
-      :class="btnTooltipClass"
+      :class="btnTooltipClass()"
       @click="$emit('analyze')"
       :aria-label="st.tr['Analyse']"
     )
@@ -38,7 +38,7 @@ div
     #downloadDiv(v-if="canDownload")
       a#download(href="#")
       button(
-        :class="btnTooltipClass"
+        :class="btnTooltipClass()"
         @click="$emit('download')"
         :aria-label="st.tr['Download'] + ' PGN'"
       )
@@ -93,15 +93,10 @@ export default {
     gameContainer.style.width = boardSize + movesWidth + "px";
     document.getElementById("boardSize").value =
       (boardSize * 100) / (window.innerWidth - movesWidth);
-    // timeout to avoid calling too many time the adjust method
-    let timeoutLaunched = false;
-    window.addEventListener("resize", () => {
-      if (!timeoutLaunched) {
-        timeoutLaunched = true;
-        this.adjustBoard();
-        setTimeout(() => { timeoutLaunched = false; }, 500);
-      }
-    });
+    window.addEventListener("resize", this.adjustBoard);
+  },
+  beforeDestroy: function() {
+    window.removeEventListener("resize", this.adjustBoard);
   },
   watch: {
     cursor: function(newCursor) {
@@ -149,14 +144,12 @@ export default {
       return { tooltip: !("ontouchstart" in window) };
     },
     gotoMove: function(index) {
-      this.$emit("goto-move", index);
+      // Goto move except if click on current move:
+      if (this.cursor != 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...
@@ -168,6 +161,7 @@ export default {
       boardContainer.style.width = boardSize + "px";
       document.getElementById("gameContainer").style.width =
         boardSize + movesWidth + "px";
+      this.$emit("redraw-board");
     }
   }
 };
@@ -241,7 +235,7 @@ span#rulesBtn
 button
   margin: 0
   &.active
-    background-color: #50E99A
+    background-color: #48C9B0
 
 #aboveMoves button
   padding-bottom: 5px