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