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