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