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 v-show="display=='rules'"
33 v-show="display=='computer'"
35 @game-stopped="gameStopped"
40 import ComputerGame from "@/components/ComputerGame.vue";
41 import { store } from "@/store";
42 import { getDiagram } from "@/utils/printDiagram";
43 import { CompgameStorage } from "@/utils/compgameStorage";
53 gameInProgress: false,
54 // variables passed to ComputerGame:
62 $route: function(newRoute) {
63 this.re_setVariant(newRoute.params["vname"]);
67 // NOTE: variant cannot be set before store is initialized
68 this.re_setVariant(this.$route.params["vname"]);
71 showAnalyzeBtn: function() {
72 return (this.display=='rules' && (!window.V || V.CanAnalyse));
75 if (!this.gameInfo.vname) return ""; //variant not set yet
76 // (AJAX) Request to get rules content (plain text, HTML)
78 require("raw-loader!@/translations/rules/" +
83 // Next two lines fix a weird issue after last update (2019-11)
86 .replace('module.exports = "', "")
88 .replace(/(fen:)([^:]*):/g, this.replaceByDiag)
93 clickReadRules: function() {
94 if (this.display != "rules") this.display = "rules";
95 else if (this.gameInProgress) this.display = "computer";
98 const fenParts = fen.split(" ");
100 position: fenParts[0],
102 orientation: fenParts[2],
106 // Method to replace diagrams in loaded HTML
107 replaceByDiag: function(match, p1, p2) {
108 const args = this.parseFen(p2);
109 return getDiagram(args);
111 re_setVariant: async function(vname) {
112 const vModule = await import("@/variants/" + vname + ".js");
113 window.V = vModule.VariantRules;
114 this.gameInfo.vname = vname;
116 startGame: function(mode) {
117 if (this.gameInProgress) return;
118 this.gameInProgress = true;
119 this.display = "computer";
120 this.gameInfo.mode = mode;
121 if (this.gameInfo.mode == "versus") {
122 CompgameStorage.get(this.gameInfo.vname, (game) => {
123 // NOTE: game might be null
124 this.$refs["compgame"].launchGame(game);
127 this.$refs["compgame"].launchGame();
130 // user wants to stop the game:
131 stopGame: function() {
132 this.$refs["compgame"].gameOver("?", "Undetermined result");
134 // The game is effectively stopped:
135 gameStopped: function() {
136 this.gameInProgress = false;
137 if (this.gameInfo.mode == "versus")
138 CompgameStorage.remove(this.gameInfo.vname);
140 gotoAnalyze: function() {
142 "/analyse/" + this.gameInfo.vname + "/?fen=" + V.GenRandInitFen()
149 <!-- NOTE: not scoped here, because HTML is injected (TODO) -->
154 background-color: lightgrey
157 figure.diagram-container
158 margin: 15px 0 15px 0
170 margin-left: calc(10% - 20px)
172 @media screen and (max-width: 630px)
174 margin: 0 auto 10px auto
177 margin-right: calc(10% - 20px)
178 @media screen and (max-width: 630px)
188 background-color: #FFCC66
200 // To show (new) pieces, and/or there values...
201 figure.showPieces > img
204 figure.showPieces > figcaption
213 ol, ul:not(.browser-default)
216 ul:not(.browser-default)
219 ul:not(.browser-default) > li
220 list-style-type: disc