client/src/views/Rules.vue

   1 <template lang="pug">
   2 main
   3   .row
   4     .col-sm-12.col-md-10.col-md-offset-1.col-lg-8.col-lg-offset-2
   5       .button-group
   6         button(@click="clickReadRules()") {{ st.tr["Rules"] }}
   7         button(
   8           v-show="!gameInProgress"
   9           @click="startGame('auto')"
  10         )
  11           | {{ st.tr["Example game"] }}
  12         button(
  13           v-show="!gameInProgress"
  14           @click="startGame('versus')"
  15         )
  16           | {{ st.tr["Practice"] }}
  17         button(
  18           v-show="gameInProgress"
  19           @click="stopGame()"
  20         )
  21           | {{ st.tr["Stop game"] }}
  22         button(
  23           v-if="showAnalyzeBtn"
  24           @click="gotoAnalyze()"
  25         )
  26           | {{ st.tr["Analysis mode"] }}
  27   .row
  28     .col-sm-12.col-md-8.col-md-offset-2.col-lg-6.col-lg-offset-3
  29       div(
  30         v-show="display=='rules'"
  31         v-html="content"
  32       )
  33   ComputerGame(
  34     ref="compgame"
  35     v-show="display=='computer'"
  36     :game-info="gameInfo"
  37     @game-stopped="gameStopped"
  38   )
  39 </template>
  40
  41 <script>
  42 import ComputerGame from "@/components/ComputerGame.vue";
  43 import { store } from "@/store";
  44 import { getDiagram } from "@/utils/printDiagram";
  45 import { CompgameStorage } from "@/utils/compgameStorage";
  46 export default {
  47   name: "my-rules",
  48   components: {
  49     ComputerGame
  50   },
  51   data: function() {
  52     return {
  53       st: store.state,
  54       display: "rules",
  55       gameInProgress: false,
  56       // variables passed to ComputerGame:
  57       gameInfo: {
  58         vname: "",
  59         mode: "versus",
  60       },
  61       V: null,
  62     };
  63   },
  64   watch: {
  65     $route: function(newRoute) {
  66       this.re_setVariant(newRoute.params["vname"]);
  67     }
  68   },
  69   created: function() {
  70     // NOTE: variant cannot be set before store is initialized
  71     this.re_setVariant(this.$route.params["vname"]);
  72   },
  73   computed: {
  74     showAnalyzeBtn: function() {
  75       return !!this.V && this.V.CanAnalyze;
  76     },
  77     content: function() {
  78       if (!this.gameInfo.vname) return ""; //variant not set yet
  79       // (AJAX) Request to get rules content (plain text, HTML)
  80       return (
  81         require(
  82           "raw-loader!@/translations/rules/" +
  83           this.gameInfo.vname + "/" +
  84           this.st.lang + ".pug"
  85         )
  86         // Next two lines fix a weird issue after last update (2019-11)
  87         .replace(/\\n/g, " ")
  88         .replace(/\\"/g, '"')
  89         .replace('module.exports = "', "")
  90         .replace(/"$/, "")
  91         .replace(/(fen:)([^:]*):/g, this.replaceByDiag)
  92       );
  93     }
  94   },
  95   methods: {
  96     clickReadRules: function() {
  97       if (this.display != "rules") this.display = "rules";
  98       else if (this.gameInProgress) this.display = "computer";
  99     },
 100     parseFen(fen) {
 101       const fenParts = fen.split(" ");
 102       return {
 103         position: fenParts[0],
 104         marks: fenParts[1],
 105         orientation: fenParts[2],
 106         shadow: fenParts[3]
 107       };
 108     },
 109     // Method to replace diagrams in loaded HTML
 110     replaceByDiag: function(match, p1, p2) {
 111       const args = this.parseFen(p2);
 112       return getDiagram(args);
 113     },
 114     re_setVariant: async function(vname) {
 115       await import("@/variants/" + vname + ".js")
 116       .then((vModule) => {
 117         this.V = window.V = vModule[vname + "Rules"];
 118         this.gameInfo.vname = vname;
 119       })
 120       .catch((err) => {
 121         // Soon after component creation, st.tr might be uninitialized.
 122         // Set a timeout to let a chance for the message to show translated.
 123         const text = "Mispelled variant name";
 124         setTimeout(() => {
 125           alert(this.st.tr[text] || text);
 126           this.$router.replace("/variants");
 127         }, 500);
 128       });
 129     },
 130     startGame: function(mode) {
 131       if (this.gameInProgress) return;
 132       this.gameInProgress = true;
 133       this.display = "computer";
 134       this.gameInfo.mode = mode;
 135       if (this.gameInfo.mode == "versus") {
 136         CompgameStorage.get(this.gameInfo.vname, (game) => {
 137           // NOTE: game might be null
 138           this.$refs["compgame"].launchGame(game);
 139         });
 140       } else {
 141         this.$refs["compgame"].launchGame();
 142       }
 143     },
 144     // user wants to stop the game:
 145     stopGame: function() {
 146       this.$refs["compgame"].gameOver("?", "Undetermined result");
 147     },
 148     // The game is effectively stopped:
 149     gameStopped: function() {
 150       this.gameInProgress = false;
 151       if (this.gameInfo.mode == "versus")
 152         CompgameStorage.remove(this.gameInfo.vname);
 153     },
 154     gotoAnalyze: function() {
 155       this.$router.push(
 156         "/analyse/" + this.gameInfo.vname +
 157         "/?fen=" + V.GenRandInitFen(this.st.settings.randomness)
 158       );
 159     }
 160   }
 161 };
 162 </script>
 163
 164 <!-- NOTE: not scoped here, because HTML is injected (TODO) -->
 165 <style lang="sass">
 166 .warn
 167   padding: 3px
 168   color: red
 169   background-color: lightgrey
 170   font-weight: bold
 171
 172 figure.diagram-container
 173   margin: 15px 0 15px 0
 174   text-align: center
 175   width: 100%
 176   display: block
 177   .diagram
 178     display: block
 179     width: 50%
 180     min-width: 240px
 181     margin-left: auto
 182     margin-right: auto
 183   .diag12
 184     float: left
 185     width: 40%
 186     margin-left: calc(10% - 20px)
 187     margin-right: 40px
 188     @media screen and (max-width: 630px)
 189       float: none
 190       margin: 0 auto 10px auto
 191   .diag22
 192     float: left
 193     width: 40%
 194     margin-right: calc(10% - 20px)
 195     @media screen and (max-width: 630px)
 196       float: none
 197       margin: 0 auto
 198   figcaption
 199     display: block
 200     clear: both
 201     padding-top: 5px
 202     font-size: 0.8em
 203
 204 p.boxed
 205   background-color: #FFCC66
 206   padding: 5px
 207
 208 .bigfont
 209   font-size: 1.2em
 210
 211 .bold
 212   font-weight: bold
 213
 214 .stageDelimiter
 215   color: purple
 216
 217 // To show (new) pieces, and/or there values...
 218 figure.showPieces > img
 219   width: 50px
 220
 221 figure.showPieces > figcaption
 222   color: #6C6C6C
 223
 224 .section-title
 225   padding: 0
 226
 227 .section-title > h4
 228   padding: 5px
 229
 230 ol, ul:not(.browser-default)
 231   padding-left: 20px
 232
 233 ul:not(.browser-default)
 234   margin-top: 5px
 235
 236 ul:not(.browser-default) > li
 237   list-style-type: disc
 238 </style>