4 .col-sm-12.col-md-10.col-md-offset-1.col-lg-8.col-lg-offset-2
6 button(@click="clickReadRules()") {{ st.tr["Rules"] }}
8 v-show="!gameInProgress"
9 @click="startGame('auto')"
11 | {{ st.tr["Example game"] }}
13 v-show="!gameInProgress"
14 @click="startGame('versus')"
16 | {{ st.tr["Practice"] }}
18 v-show="gameInProgress"
21 | {{ st.tr["Stop game"] }}
24 @click="gotoAnalyze()"
26 | {{ st.tr["Analyse"] }}
28 .col-sm-12.col-md-8.col-md-offset-2.col-lg-6.col-lg-offset-3
30 v-show="display=='rules'"
35 v-show="display=='computer'"
37 @game-stopped="gameStopped"
42 import ComputerGame from "@/components/ComputerGame.vue";
43 import { store } from "@/store";
44 import { getDiagram } from "@/utils/printDiagram";
45 import { CompgameStorage } from "@/utils/compgameStorage";
55 gameInProgress: false,
56 // variables passed to ComputerGame:
64 $route: function(newRoute) {
65 this.re_setVariant(newRoute.params["vname"]);
69 // NOTE: variant cannot be set before store is initialized
70 this.re_setVariant(this.$route.params["vname"]);
73 showAnalyzeBtn: function() {
74 return (this.display=='rules' && (!window.V || V.CanAnalyze));
77 if (!this.gameInfo.vname) return ""; //variant not set yet
78 // (AJAX) Request to get rules content (plain text, HTML)
80 require("raw-loader!@/translations/rules/" +
85 // Next two lines fix a weird issue after last update (2019-11)
88 .replace('module.exports = "', "")
90 .replace(/(fen:)([^:]*):/g, this.replaceByDiag)
95 clickReadRules: function() {
96 if (this.display != "rules") this.display = "rules";
97 else if (this.gameInProgress) this.display = "computer";
100 const fenParts = fen.split(" ");
102 position: fenParts[0],
104 orientation: fenParts[2],
108 // Method to replace diagrams in loaded HTML
109 replaceByDiag: function(match, p1, p2) {
110 const args = this.parseFen(p2);
111 return getDiagram(args);
113 re_setVariant: async function(vname) {
114 const vModule = await import("@/variants/" + vname + ".js");
115 window.V = vModule.VariantRules;
116 this.gameInfo.vname = vname;
118 startGame: function(mode) {
119 if (this.gameInProgress) return;
120 this.gameInProgress = true;
121 this.display = "computer";
122 this.gameInfo.mode = mode;
123 if (this.gameInfo.mode == "versus") {
124 CompgameStorage.get(this.gameInfo.vname, (game) => {
125 // NOTE: game might be null
126 this.$refs["compgame"].launchGame(game);
129 this.$refs["compgame"].launchGame();
132 // user wants to stop the game:
133 stopGame: function() {
134 this.$refs["compgame"].gameOver("?", "Undetermined result");
136 // The game is effectively stopped:
137 gameStopped: function() {
138 this.gameInProgress = false;
139 if (this.gameInfo.mode == "versus")
140 CompgameStorage.remove(this.gameInfo.vname);
142 gotoAnalyze: function() {
144 "/analyse/" + this.gameInfo.vname + "/?fen=" + V.GenRandInitFen()
151 <!-- NOTE: not scoped here, because HTML is injected (TODO) -->
156 background-color: lightgrey
159 figure.diagram-container
160 margin: 15px 0 15px 0
172 margin-left: calc(10% - 20px)
174 @media screen and (max-width: 630px)
176 margin: 0 auto 10px auto
179 margin-right: calc(10% - 20px)
180 @media screen and (max-width: 630px)
190 background-color: #FFCC66
202 // To show (new) pieces, and/or there values...
203 figure.showPieces > img
206 figure.showPieces > figcaption
215 ol, ul:not(.browser-default)
218 ul:not(.browser-default)
221 ul:not(.browser-default) > li
222 list-style-type: disc