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