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