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