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       const vModule = await import("@/variants/" + vname + ".js");
 116       this.V = window.V = vModule.VariantRules;
 117       this.gameInfo.vname = vname;
 118     },
 119     startGame: function(mode) {
 120       if (this.gameInProgress) return;
 121       this.gameInProgress = true;
 122       this.display = "computer";
 123       this.gameInfo.mode = mode;
 124       if (this.gameInfo.mode == "versus") {
 125         CompgameStorage.get(this.gameInfo.vname, (game) => {
 126           // NOTE: game might be null
 127           this.$refs["compgame"].launchGame(game);
 128         });
 129       } else {
 130         this.$refs["compgame"].launchGame();
 131       }
 132     },
 133     // user wants to stop the game:
 134     stopGame: function() {
 135       this.$refs["compgame"].gameOver("?", "Undetermined result");
 136     },
 137     // The game is effectively stopped:
 138     gameStopped: function() {
 139       this.gameInProgress = false;
 140       if (this.gameInfo.mode == "versus")
 141         CompgameStorage.remove(this.gameInfo.vname);
 142     },
 143     gotoAnalyze: function() {
 144       this.$router.push(
 145         "/analyse/" + this.gameInfo.vname + "/?fen=" + V.GenRandInitFen()
 146       );
 147     }
 148   }
 149 };
 150 </script>
 151
 152 <!-- NOTE: not scoped here, because HTML is injected (TODO) -->
 153 <style lang="sass">
 154 .warn
 155   padding: 3px
 156   color: red
 157   background-color: lightgrey
 158   font-weight: bold
 159
 160 figure.diagram-container
 161   margin: 15px 0 15px 0
 162   text-align: center
 163   width: 100%
 164   display: block
 165   .diagram
 166     display: block
 167     width: 40%
 168     min-width: 240px
 169     margin-left: auto
 170     margin-right: auto
 171   .diag12
 172     float: left
 173     margin-left: calc(10% - 20px)
 174     margin-right: 40px
 175     @media screen and (max-width: 630px)
 176       float: none
 177       margin: 0 auto 10px auto
 178   .diag22
 179     float: left
 180     margin-right: calc(10% - 20px)
 181     @media screen and (max-width: 630px)
 182       float: none
 183       margin: 0 auto
 184   figcaption
 185     display: block
 186     clear: both
 187     padding-top: 5px
 188     font-size: 0.8em
 189
 190 p.boxed
 191   background-color: #FFCC66
 192   padding: 5px
 193
 194 .bigfont
 195   font-size: 1.2em
 196
 197 .bold
 198   font-weight: bold
 199
 200 .stageDelimiter
 201   color: purple
 202
 203 // To show (new) pieces, and/or there values...
 204 figure.showPieces > img
 205   width: 50px
 206
 207 figure.showPieces > figcaption
 208   color: #6C6C6C
 209
 210 .section-title
 211   padding: 0
 212
 213 .section-title > h4
 214   padding: 5px
 215
 216 ol, ul:not(.browser-default)
 217   padding-left: 20px
 218
 219 ul:not(.browser-default)
 220   margin-top: 5px
 221
 222 ul:not(.browser-default) > li
 223   list-style-type: disc
 224 </style>