client/src/views/Rules.vue

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