3 .col-sm-12.col-md-10.col-md-offset-1.col-lg-8.col-lg-offset-2
5 button(@click="display='rules'") Read the rules
6 button(v-show="!gameInProgress" @click="() => startGame('auto')")
7 | Observe a sample game
8 button(v-show="!gameInProgress" @click="() => startGame('versus')")
10 button(v-show="gameInProgress" @click="stopGame")
12 .section-content(v-show="display=='rules'" v-html="content")
13 ComputerGame(v-show="display=='computer'" :game-info="gameInfo"
14 @computer-think="gameInProgress=false" @game-over="stopGame")
18 import ComputerGame from "@/components/ComputerGame.vue";
19 import { store } from "@/store";
20 import { getDiagram } from "@/utils/printDiagram";
32 gameInProgress: false,
33 // variables passed to ComputerGame:
43 "$route": function(newRoute) {
44 this.tryChangeVariant(newRoute.params["vname"]);
47 created: async function() {
48 // NOTE: variant cannot be set before store is initialized
49 this.tryChangeVariant(this.$route.params["vname"]);
53 const fenParts = fen.split(" ");
55 position: fenParts[0],
57 orientation: fenParts[2],
61 tryChangeVariant: async function(vname) {
62 if (!vname || vname == "_unknown")
64 this.gameInfo.vname = vname;
65 const vModule = await import("@/variants/" + vname + ".js");
66 window.V = vModule.VariantRules;
67 // Method to replace diagrams in loaded HTML
68 const replaceByDiag = (match, p1, p2) => {
69 const args = this.parseFen(p2);
70 return getDiagram(args);
72 // (AJAX) Request to get rules content (plain text, HTML)
74 require("raw-loader!@/rules/" + vname + "/" + this.st.lang + ".pug")
75 // Next two lines fix a weird issue after last update (2019-11)
76 .replace(/\\[n"]/g, " ")
77 .replace('module.exports = "', '').replace(/"$/, "")
78 .replace(/(fen:)([^:]*):/g, replaceByDiag);
80 startGame: function(mode) {
81 if (this.gameInProgress)
83 this.gameInProgress = true;
84 this.display = "computer";
85 this.gameInfo.mode = mode;
86 this.gameInfo.userStop = false;
87 this.gameInfo.fen = V.GenRandInitFen();
89 stopGame: function() {
90 this.gameInProgress = false;
91 this.gameInfo.userStop = true;
92 this.gameInfo.mode = "analyze";
102 background-color: lightgrey
105 figure.diagram-container
106 margin: 15px 0 15px 0
118 margin-left: calc(10% - 20px)
120 @media screen and (max-width: 630px)
122 margin: 0 auto 10px auto
125 margin-right: calc(10% - 20px)
126 @media screen and (max-width: 630px)
136 background-color: #FFCC66
142 // To show (new) pieces, and/or there values...
143 figure.showPieces > img
146 figure.showPieces > figcaption
155 ol, ul:not(.browser-default)
158 ul:not(.browser-default)
161 ul:not(.browser-default) > li
162 list-style-type: disc
165 background-color: #e5e5ca
168 background-color: #6f8f57
170 // TODO: following is duplicated
174 display: inline-block
179 padding-bottom: 12.5%
192 img.piece, img.mark-square
206 filter: brightness(50%)