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