X-Git-Url: https://git.auder.net/?a=blobdiff_plain;f=client%2Fsrc%2Fcomponents%2FMoveList.vue;h=e36c058c866ae4c47037cfa59476b7c9b583f103;hb=737a5dafb39740ebe304b8d0a82df85070def571;hp=2fc7bacbf1f8618ecb500cb9190ba32ee45b12b7;hpb=90df90bca1a993930a0e1a07a1b4990dd538c6e2;p=vchess.git

diff --git a/client/src/components/MoveList.vue b/client/src/components/MoveList.vue
index 2fc7bacb..e36c058c 100644
--- a/client/src/components/MoveList.vue
+++ b/client/src/components/MoveList.vue
@@ -19,7 +19,8 @@ div
     // NOTE: variants pages already have a "Rules" link on top
     span#rulesBtn(
       v-if="!$route.path.match('/variants/')"
-      @click="$emit('showrules')"
+      @click="clickRulesBtn()"
+      :class="btnRulesClass"
     )
       | {{ st.tr["Rules"] }}
     button(
@@ -52,14 +53,12 @@ div
       .td(
         :class="{'highlight-lm': cursor == moveIdx}"
         @click="() => gotoMove(moveIdx)"
-      )
-        | {{ notation(moveIdx) }}
+        v-html="notation(moveIdx)")
       .td(
         v-if="moveIdx < moves.length-1"
         :class="{'highlight-lm': cursor == moveIdx+1}"
         @click="() => gotoMove(moveIdx+1)"
-      )
-        | {{ notation(moveIdx + 1) }}
+        v-html="notation(moveIdx + 1)")
 </template>
 
 <script>
@@ -70,7 +69,7 @@ export default {
   name: "my-move-list",
   props: [
     "moves", "show", "canAnalyze", "canDownload",
-    "cursor", "score", "message", "firstNum"],
+    "vname", "cursor", "score", "message", "firstNum"],
   data: function() {
     return {
       st: store.state
@@ -80,7 +79,7 @@ export default {
     document.getElementById("adjuster")
       .addEventListener("click", processModalClick);
     // Take full width on small screens:
-    let boardSize = parseInt(localStorage.getItem("boardSize"));
+    let boardSize = parseInt(localStorage.getItem("boardSize"), 10);
     if (!boardSize) {
       boardSize =
         window.innerWidth >= 768
@@ -121,6 +120,13 @@ export default {
   computed: {
     evenNumbers: function() {
       return [...Array(this.moves.length).keys()].filter(i => i%2==0);
+    },
+    btnRulesClass: function() {
+      // "rr" for "rules read"
+      return {
+        highlightRules:
+          !!this.vname && !localStorage.getItem("rr_" + this.vname)
+      };
     }
   },
   methods: {
@@ -142,6 +148,14 @@ export default {
     btnTooltipClass: function() {
       return { tooltip: !("ontouchstart" in window) };
     },
+    clickRulesBtn: function() {
+      const key = "rr_" + this.vname;
+      if (!localStorage.getItem(key)) {
+        localStorage.setItem(key, '1');
+        document.getElementById("rulesBtn").classList.remove("highlightRules");
+      }
+      this.$emit("showrules");
+    },
     gotoMove: function(index) {
       // Goto move except if click on current move:
       if (this.cursor != index) this.$emit("goto-move", index);
@@ -194,6 +208,10 @@ export default {
 .td.highlight-lm
   background-color: plum
 
+.highlightRules
+  padding: 3px 5px
+  background-color: yellow
+
 #boardSizeBtnContainer
   width: 100%
   text-align: center