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 && V.Options")
  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] = parseInt(elt.value, 10) || elt.value;
 160       }
 161       if (!V.IsValidOptions(options)) {
 162         alert(this.st.tr["Invalid options"]);
 163         return;
 164       }
 165       document.getElementById("modalOptions").checked = false;
 166       if (this.whatNext == "analyze") this.gotoAnalyze(options);
 167       else this.startGame(this.whatNext, options);
 168     },
 169     startGame: function(mode, options) {
 170       if (this.gameInProgress) return;
 171       const next = (game, options) => {
 172         this.gameInProgress = true;
 173         this.display = "computer";
 174         this.gameInfo.mode = mode;
 175         this.$refs["compgame"].launchGame(game, options);
 176       };
 177       if (!!options) {
 178         next(null, options);
 179         return;
 180       }
 181       const askOptions = () => {
 182         this.whatNext = mode;
 183         doClick("modalOptions");
 184       };
 185       if (mode == "versus") {
 186         CompgameStorage.get(this.gameInfo.vname, (game) => {
 187           // NOTE: game might be null (if none stored yet)
 188           if (!!game && !V.IsGoodFen(game.fen)) {
 189             // Some issues with stored game: delete
 190             CompgameStorage.remove(game.vname);
 191             game = null;
 192           }
 193           if (!!game || !V.Options) next(game);
 194           else askOptions();
 195         });
 196       }
 197       else {
 198         if (!V.Options) next();
 199         else askOptions();
 200       }
 201     },
 202     // The user wants to stop the game:
 203     stopGame: function() {
 204       this.$refs["compgame"].gameOver("?", "Undetermined result");
 205     },
 206     // The game is effectively stopped:
 207     gameStopped: function() {
 208       this.gameInProgress = false;
 209       if (this.gameInfo.mode == "versus")
 210         CompgameStorage.remove(this.gameInfo.vname);
 211     },
 212     gotoAnalyze: function(options) {
 213       if (!options && V.Options) {
 214         this.whatNext = "analyze";
 215         doClick("modalOptions");
 216       }
 217       else {
 218         this.$router.push(
 219           "/analyse/" + this.gameInfo.vname +
 220           "/?fen=" + V.GenRandInitFen(options)
 221         );
 222       }
 223     }
 224   }
 225 };
 226 </script>
 227
 228 <!-- NOTE: not scoped here, because HTML is injected -->
 229 <style lang="sass">
 230 @import "@/styles/_board_squares_img.sass"
 231 @import "@/styles/_rules.sass"
 232 </style>
 233
 234 <style lang="sass" scoped>
 235 h4#variantName
 236   text-align: center
 237   font-weight: bold
 238 </style>