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

diff --git a/client/src/components/MoveList.vue b/client/src/components/MoveList.vue
index 2fc7bacb..6385ea0d 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(
@@ -70,7 +71,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
@@ -121,6 +122,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 +150,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 +210,10 @@ export default {
 .td.highlight-lm
   background-color: plum
 
+.highlightRules
+  padding: 3px 5px
+  background-color: yellow
+
 #boardSizeBtnContainer
   width: 100%
   text-align: center