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