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