client/src/views/Rules.vue

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