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