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