Translations
[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(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>