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("raw-loader!@/translations/rules/" +
  82           this.gameInfo.vname +
  83           "/" +
  84           this.st.lang +
  85           ".pug")
  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.VariantRules;
 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 + "/?fen=" + V.GenRandInitFen(2)
 157       );
 158     }
 159   }
 160 };
 161 </script>
 162
 163 <!-- NOTE: not scoped here, because HTML is injected (TODO) -->
 164 <style lang="sass">
 165 .warn
 166   padding: 3px
 167   color: red
 168   background-color: lightgrey
 169   font-weight: bold
 170
 171 figure.diagram-container
 172   margin: 15px 0 15px 0
 173   text-align: center
 174   width: 100%
 175   display: block
 176   .diagram
 177     display: block
 178     width: 40%
 179     min-width: 240px
 180     margin-left: auto
 181     margin-right: auto
 182   .diag12
 183     float: left
 184     margin-left: calc(10% - 20px)
 185     margin-right: 40px
 186     @media screen and (max-width: 630px)
 187       float: none
 188       margin: 0 auto 10px auto
 189   .diag22
 190     float: left
 191     margin-right: calc(10% - 20px)
 192     @media screen and (max-width: 630px)
 193       float: none
 194       margin: 0 auto
 195   figcaption
 196     display: block
 197     clear: both
 198     padding-top: 5px
 199     font-size: 0.8em
 200
 201 p.boxed
 202   background-color: #FFCC66
 203   padding: 5px
 204
 205 .bigfont
 206   font-size: 1.2em
 207
 208 .bold
 209   font-weight: bold
 210
 211 .stageDelimiter
 212   color: purple
 213
 214 // To show (new) pieces, and/or there values...
 215 figure.showPieces > img
 216   width: 50px
 217
 218 figure.showPieces > figcaption
 219   color: #6C6C6C
 220
 221 .section-title
 222   padding: 0
 223
 224 .section-title > h4
 225   padding: 5px
 226
 227 ol, ul:not(.browser-default)
 228   padding-left: 20px
 229
 230 ul:not(.browser-default)
 231   margin-top: 5px
 232
 233 ul:not(.browser-default) > li
 234   list-style-type: disc
 235 </style>