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