client/src/views/Rules.vue

   1 <template lang="pug">
   2 main
   3   input#modalOptions.modal(type="checkbox")
   4   div#optionsDiv(
   5     role="dialog"
   6     data-checkbox="modalOptions"
   7   )
   8     .card
   9       label.modal-close(for="modalOptions")
  10       h3 {{ st.tr["Options"] }}
  11       fieldset(v-if="!!V")
  12         div(v-for="select of V.Options.select")
  13           label(:for="select.variable + '_opt'") {{ st.tr[select.label] }} *
  14           select(:id="select.variable + '_opt'")
  15             option(
  16               v-for="o of select.options"
  17               :value="o.value"
  18               :selected="o.value == select.defaut"
  19             )
  20               | {{ st.tr[o.label] }}
  21         div(v-for="check of V.Options.check")
  22           label(:for="check.variable + '_opt'") {{ st.tr[check.label] }} *
  23           input(
  24             :id="check.variable + '_opt'"
  25             type="checkbox"
  26             :checked="check.defaut")
  27       button(@click="setOptions()") {{ st.tr["Validate"] }}
  28   .row
  29     .col-sm-12.col-md-10.col-md-offset-1.col-lg-8.col-lg-offset-2
  30       .button-group
  31         button(@click="clickReadRules()") {{ st.tr["Rules"] }}
  32         button(
  33           v-show="!gameInProgress"
  34           @click="startGame('auto')"
  35         )
  36           | {{ st.tr["Example game"] }}
  37         button(
  38           v-show="!gameInProgress"
  39           @click="startGame('versus')"
  40         )
  41           | {{ st.tr["Practice"] }}
  42         button(
  43           v-show="gameInProgress"
  44           @click="stopGame()"
  45         )
  46           | {{ st.tr["Stop game"] }}
  47         button(
  48           v-if="showAnalyzeBtn"
  49           @click="gotoAnalyze()"
  50         )
  51           | {{ st.tr["Analysis mode"] }}
  52   .row
  53     .col-sm-12.col-md-8.col-md-offset-2.col-lg-6.col-lg-offset-3
  54       h4#variantName(v-show="display=='rules'") {{ getVariantDisplay }}
  55       div(
  56         v-show="display=='rules'"
  57         v-html="content"
  58       )
  59   ComputerGame(
  60     ref="compgame"
  61     v-show="display=='computer'"
  62     :game-info="gameInfo"
  63     @game-stopped="gameStopped"
  64   )
  65 </template>
  66
  67 <script>
  68 import ComputerGame from "@/components/ComputerGame.vue";
  69 import { store } from "@/store";
  70 import { replaceByDiag } from "@/utils/printDiagram";
  71 import { CompgameStorage } from "@/utils/compgameStorage";
  72 import { processModalClick } from "@/utils/modalClick";
  73 import afterRawLoad from "@/utils/afterRawLoad";
  74 export default {
  75   name: "my-rules",
  76   components: {
  77     ComputerGame
  78   },
  79   data: function() {
  80     return {
  81       st: store.state,
  82       display: "rules",
  83       gameInProgress: false,
  84       // variables passed to ComputerGame:
  85       gameInfo: {
  86         vname: "",
  87         mode: "versus"
  88       },
  89       V: null
  90     };
  91   },
  92   watch: {
  93     $route: function(newRoute) {
  94       this.re_setVariant(newRoute.params["vname"]);
  95     }
  96   },
  97   created: function() {
  98     // NOTE: variant cannot be set before store is initialized
  99     this.re_setVariant(this.$route.params["vname"]);
 100   },
 101   mounted: function() {
 102     document.getElementById("optionsDiv")
 103       .addEventListener("click", processModalClick);
 104   },
 105   computed: {
 106     showAnalyzeBtn: function() {
 107       return !!this.V && this.V.CanAnalyze;
 108     },
 109     getVariantDisplay: function() {
 110       if (!this.gameInfo.vname) return ""; //variant not set yet
 111       return this.st.variants.find(v => v.name == this.gameInfo.vname).display;
 112     },
 113     content: function() {
 114       if (!this.gameInfo.vname) return ""; //variant not set yet
 115       return (
 116         afterRawLoad(
 117           require(
 118             "raw-loader!@/translations/rules/" +
 119             this.gameInfo.vname + "/" + this.st.lang + ".pug"
 120           ).default
 121         ).replace(/(fen:)([^:]*):/g, replaceByDiag)
 122       );
 123     }
 124   },
 125   methods: {
 126     clickReadRules: function() {
 127       if (this.display != "rules") this.display = "rules";
 128       else if (this.gameInProgress) this.display = "computer";
 129     },
 130     re_setVariant: async function(vname) {
 131       const key = "rr_" + vname;
 132       if (!localStorage.getItem(key))
 133         // Mark rules as "read"
 134         localStorage.setItem(key, '1');
 135       await import("@/variants/" + vname + ".js")
 136       .then((vModule) => {
 137         this.V = window.V = vModule[vname + "Rules"];
 138         this.gameInfo.vname = vname;
 139       })
 140       .catch((err) => {
 141         // Soon after component creation, st.tr might be uninitialized.
 142         // Set a timeout to let a chance for the message to show translated.
 143         const text = "Mispelled variant name";
 144         setTimeout(() => {
 145           alert(this.st.tr[text] || text);
 146           this.$router.replace("/variants");
 147         }, 500);
 148       });
 149     },
 150     setOptions: function() {
 151       let options = {};
 152       // Get/set options variables / TODO: v-model?!
 153       for (const check of this.V.Options.check) {
 154         const elt = document.getElementById(check.variable + "_opt");
 155         if (elt.checked) options[check.variable] = true;
 156       }
 157       for (const select of this.V.Options.select) {
 158         const elt = document.getElementById(select.variable + "_opt");
 159         options[select.variable] = elt.value;
 160       }
 161       document.getElementById("modalOptions").checked = false;
 162       if (this.whatNext == "analyze") this.gotoAnalyze(options);
 163       else this.startGame(this.whatNext, options);
 164     },
 165     startGame: function(mode, options) {
 166       if (this.gameInProgress) return;
 167       const next = (game, options) => {
 168         this.gameInProgress = true;
 169         this.display = "computer";
 170         this.gameInfo.mode = mode;
 171         this.$refs["compgame"].launchGame(game, options);
 172       };
 173       if (!!options) {
 174         next(null, options);
 175         return;
 176       }
 177       const askOptions = () => {
 178         this.whatNext = mode;
 179         doClick("modalOptions");
 180       };
 181       if (mode == "versus") {
 182         CompgameStorage.get(this.gameInfo.vname, (game) => {
 183           // NOTE: game might be null (if none stored yet)
 184           if (!!game && !V.IsGoodFen(game.fen)) {
 185             // Some issues with stored game: delete
 186             CompgameStorage.remove(game.vname);
 187             game = null;
 188           }
 189           if (!!game || Object.keys(V.Options).length == 0) next(game);
 190           else askOptions();
 191         });
 192       }
 193       else {
 194         if (Object.keys(V.Options).length == 0) next();
 195         else askOptions();
 196       }
 197     },
 198     // The user wants to stop the game:
 199     stopGame: function() {
 200       this.$refs["compgame"].gameOver("?", "Undetermined result");
 201     },
 202     // The game is effectively stopped:
 203     gameStopped: function() {
 204       this.gameInProgress = false;
 205       if (this.gameInfo.mode == "versus")
 206         CompgameStorage.remove(this.gameInfo.vname);
 207     },
 208     gotoAnalyze: function(options) {
 209       if (!options && Object.keys(V.Options).length > 0) {
 210         this.whatNext = "analyze";
 211         doClick("modalOptions");
 212       }
 213       else {
 214         this.$router.push(
 215           "/analyse/" + this.gameInfo.vname +
 216           "/?fen=" + V.GenRandInitFen(options)
 217         );
 218       }
 219     }
 220   }
 221 };
 222 </script>
 223
 224 <!-- NOTE: not scoped here, because HTML is injected -->
 225 <style lang="sass">
 226 @import "@/styles/_board_squares_img.sass"
 227 @import "@/styles/_rules.sass"
 228 </style>
 229
 230 <style lang="sass" scoped>
 231 h4#variantName
 232   text-align: center
 233   font-weight: bold
 234 </style>