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 display: "rules",
35 gameInProgress: false,
36 // variables passed to ComputerGame:
37 gameInfo: {
38 vname: "",
39 mode: "versus",
40 fen: "",
41 score: "*",
42 }
43 };
44 },
45 watch: {
46 "$route": function(newRoute) {
47 this.re_setVariant(newRoute.params["vname"]);
48 },
49 },
50 created: async function() {
51 // NOTE: variant cannot be set before store is initialized
52 this.re_setVariant(this.$route.params["vname"]);
53 },
54 computed: {
55 content: function() {
56 if (!this.gameInfo.vname)
57 return ""; //variant not set yet
58 // (AJAX) Request to get rules content (plain text, HTML)
59 return require("raw-loader!@/translations/rules/" +
60 this.gameInfo.vname + "/" + this.st.lang + ".pug")
61 // Next two lines fix a weird issue after last update (2019-11)
62 .replace(/\\n/g, " ").replace(/\\"/g, '"')
63 .replace('module.exports = "', '').replace(/"$/, "")
64 .replace(/(fen:)([^:]*):/g, this.replaceByDiag);
65 },
66 },
67 methods: {
68 clickReadRules: function() {
69 if (this.display != "rules")
70 this.display = "rules";
71 else if (this.gameInProgress)
72 this.display = "computer";
73 },
74 parseFen(fen) {
75 const fenParts = fen.split(" ");
76 return {
77 position: fenParts[0],
78 marks: fenParts[1],
79 orientation: fenParts[2],
80 shadow: fenParts[3],
81 };
82 },
83 // Method to replace diagrams in loaded HTML
84 replaceByDiag: function(match, p1, p2) {
85 const args = this.parseFen(p2);
86 return getDiagram(args);
87 },
88 re_setVariant: async function(vname) {
89 const vModule = await import("@/variants/" + vname + ".js");
90 window.V = vModule.VariantRules;
91 this.gameInfo.vname = vname;
92 },
93 startGame: function(mode) {
94 if (this.gameInProgress)
95 return;
96 this.gameInProgress = true;
97 this.display = "computer";
98 this.gameInfo.mode = mode;
99 this.gameInfo.score = "*";
100 this.gameInfo.fen = V.GenRandInitFen();
101 },
102 // user is willing to stop the game:
103 stopGame: function(score) {
104 this.gameInfo.score = score || "?";
105 },
106 // The game is effectively stopped:
107 gameStopped: function() {
108 this.gameInProgress = false;
109 },
110 gotoAnalyze: function() {
111 this.$router.push("/analyze/" + this.gameInfo.vname
112 + "/?fen=" + V.GenRandInitFen());
113 },
114 },
115 };
116 </script>
117
118 <!-- NOTE: not scoped here, because HTML is injected (TODO) -->
119 <style lang="sass">
120 //.section-content
121 // *
122 // margin-left: auto
123 // margin-right: auto
124 // max-width: 767px
125 // figure.diagram-container
126 // max-width: 1000px
127 // @media screen and (max-width: 767px)
128 // max-width: 100%
129 // padding: 0 5px
130
131 .warn
132 padding: 3px
133 color: red
134 background-color: lightgrey
135 font-weight: bold
136
137 figure.diagram-container
138 margin: 15px 0 15px 0
139 text-align: center
140 width: 100%
141 display: block
142 .diagram
143 display: block
144 width: 40%
145 min-width: 240px
146 margin-left: auto
147 margin-right: auto
148 .diag12
149 float: left
150 margin-left: calc(10% - 20px)
151 margin-right: 40px
152 @media screen and (max-width: 630px)
153 float: none
154 margin: 0 auto 10px auto
155 .diag22
156 float: left
157 margin-right: calc(10% - 20px)
158 @media screen and (max-width: 630px)
159 float: none
160 margin: 0 auto
161 figcaption
162 display: block
163 clear: both
164 padding-top: 5px
165 font-size: 0.8em
166
167 p.boxed
168 background-color: #FFCC66
169 padding: 5px
170
171 .stageDelimiter
172 color: purple
173
174 // To show (new) pieces, and/or there values...
175 figure.showPieces > img
176 width: 50px
177
178 figure.showPieces > figcaption
179 color: #6C6C6C
180
181 .section-title
182 padding: 0
183
184 .section-title > h4
185 padding: 5px
186
187 ol, ul:not(.browser-default)
188 padding-left: 20px
189
190 ul:not(.browser-default)
191 margin-top: 5px
192
193 ul:not(.browser-default) > li
194 list-style-type: disc
195
196 .light-square-diag
197 background-color: #e5e5ca
198
199 .dark-square-diag
200 background-color: #6f8f57
201
202 // TODO: following is duplicated (Board.vue)
203 div.board
204 float: left
205 height: 0
206 display: inline-block
207 position: relative
208
209 div.board8
210 width: 12.5%
211 padding-bottom: 12.5%
212
213 div.board10
214 width: 10%
215 padding-bottom: 10%
216
217 div.board11
218 width: 9.09%
219 padding-bottom: 9.1%
220
221 img.piece
222 width: 100%
223
224 img.piece, img.mark-square
225 max-width: 100%
226 height: auto
227 display: block
228
229 img.mark-square
230 opacity: 0.6
231 width: 76%
232 position: absolute
233 top: 12%
234 left: 12%
235 opacity: .7
236
237 .in-shadow
238 filter: brightness(50%)
239 </style>