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="watchComputerGame")
   7         | Observe a sample game
   8       button(v-show="!gameInProgress" @click="playAgainstComputer")
   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       vname: "_unknown",
  35       mode: "versus",
  36       fen: "",
  37     };
  38   },
  39   computed: {
  40     gameInfo: function() {
  41       return {
  42         fen: this.fen,
  43         mode: this.mode,
  44         vname: this.vname,
  45       };
  46     },
  47   },
  48   watch: {
  49     "$route": function(newRoute) {
  50       this.tryChangeVariant(newRoute.params["vname"]);
  51     },
  52   },
  53   created: async function() {
  54     // NOTE: variant cannot be set before store is initialized
  55     this.tryChangeVariant(this.$route.params["vname"]);
  56   },
  57   methods: {
  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.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         .replace(/(fen:)([^:]*):/g, replaceByDiag);
  82     },
  83     startGame: function() {
  84       if (this.gameInProgress)
  85         return;
  86       this.gameInProgress = true;
  87       this.display = "computer";
  88       this.fen = V.GenRandInitFen();
  89     },
  90     stopGame: function() {
  91       this.gameInProgress = false;
  92       this.mode = "analyze";
  93     },
  94     playAgainstComputer: function() {
  95       this.mode = "versus";
  96       this.startGame();
  97     },
  98     watchComputerGame: function() {
  99       this.mode = "auto";
 100       this.startGame();
 101     },
 102   },
 103 };
 104 </script>
 105
 106 <style lang="sass">
 107 .warn
 108   padding: 3px
 109   color: red
 110   background-color: lightgrey
 111   font-weight: bold
 112
 113 figure.diagram-container
 114   margin: 15px 0 15px 0
 115   text-align: center
 116   width: 100%
 117   display: block
 118   .diagram
 119     display: block
 120     width: 40%
 121     min-width: 240px
 122     margin-left: auto
 123     margin-right: auto
 124   .diag12
 125     float: left
 126     margin-left: calc(10% - 20px)
 127     margin-right: 40px
 128     @media screen and (max-width: 630px)
 129       float: none
 130       margin: 0 auto 10px auto
 131   .diag22
 132     float: left
 133     margin-right: calc(10% - 20px)
 134     @media screen and (max-width: 630px)
 135       float: none
 136       margin: 0 auto
 137   figcaption
 138     display: block
 139     clear: both
 140     padding-top: 5px
 141     font-size: 0.8em
 142
 143   p.boxed
 144     background-color: #FFCC66
 145     padding: 5px
 146
 147   .stageDelimiter
 148     color: purple
 149
 150   // To show (new) pieces, and/or there values...
 151   figure.showPieces > img
 152     width: 50px
 153
 154   figure.showPieces > figcaption
 155     color: #6C6C6C
 156
 157   .section-title
 158     padding: 0
 159
 160   .section-title > h4
 161     padding: 5px
 162
 163   ol, ul:not(.browser-default)
 164     padding-left: 20px
 165
 166   ul:not(.browser-default)
 167     margin-top: 5px
 168
 169   ul:not(.browser-default) > li
 170     list-style-type: disc
 171
 172 .light-square-diag
 173   background-color: #e5e5ca
 174
 175 .dark-square-diag
 176   background-color: #6f8f57
 177
 178 // TODO: following is duplicated
 179 div.board
 180   float: left
 181   height: 0
 182   display: inline-block
 183   position: relative
 184
 185 div.board8
 186   width: 12.5%
 187   padding-bottom: 12.5%
 188
 189 div.board10
 190   width: 10%
 191   padding-bottom: 10%
 192
 193 div.board11
 194   width: 9.09%
 195   padding-bottom: 9.1%
 196
 197 img.piece
 198   width: 100%
 199
 200 img.piece, img.mark-square
 201   max-width: 100%
 202   height: auto
 203   display: block
 204
 205 img.mark-square
 206   opacity: 0.6
 207   width: 76%
 208   position: absolute
 209   top: 12%
 210   left: 12%
 211   opacity: .7
 212
 213 .in-shadow
 214   filter: brightness(50%)
 215 </style>