X-Git-Url: https://git.auder.net/?p=vchess.git;a=blobdiff_plain;f=client%2Fsrc%2Fcomponents%2FMoveList.vue;h=96d67049b64034178643e035ae0319d552a23158;hp=2fc7bacbf1f8618ecb500cb9190ba32ee45b12b7;hb=57078452549f252460d45e91b84c7eea40dd3e9c;hpb=d2edca6dfaafed2d1ab8d5941dbb77ed801798f6

diff --git a/client/src/components/MoveList.vue b/client/src/components/MoveList.vue
index 2fc7bacb..96d67049 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,10 @@ export default {
   computed: {
     evenNumbers: function() {
       return [...Array(this.moves.length).keys()].filter(i => i%2==0);
+    },
+    btnRulesClass: function() {
+      // "rr" for "rules read"
+      return { highlightRules: !localStorage.getItem("rr_" + this.vname) };
     }
   },
   methods: {
@@ -142,6 +147,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 +207,10 @@ export default {
 .td.highlight-lm
   background-color: plum
 
+.highlightRules
+  padding: 3px 5px
+  background-color: yellow
+
 #boardSizeBtnContainer
   width: 100%
   text-align: center