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