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