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