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