TODO: fix draw logic
[vchess.git] / client / src / views / Rules.vue
CommitLineData
cf2343ce 1<template lang="pug">
7aa548e7
BA
2main
3 .row
4 .col-sm-12.col-md-10.col-md-offset-1.col-lg-8.col-lg-offset-2
5 .button-group
5157ce0b 6 button(@click="clickReadRules") Rules
7aa548e7 7 button(v-show="!gameInProgress" @click="() => startGame('auto')")
5157ce0b 8 | Sample game
7aa548e7 9 button(v-show="!gameInProgress" @click="() => startGame('versus')")
dcd68c41 10 | Practice
7aa548e7
BA
11 button(v-show="gameInProgress" @click="() => stopGame()")
12 | Stop game
5157ce0b 13 button(@click="gotoAnalyze") Analyze
7aa548e7 14 .section-content(v-show="display=='rules'" v-html="content")
72ccbd67
BA
15 ComputerGame(v-show="display=='computer'" :game-info="gameInfo"
16 @game-over="stopGame" @game-stopped="gameStopped")
cf2343ce
BA
17</template>
18
19<script>
a6088c90 20import ComputerGame from "@/components/ComputerGame.vue";
cf2343ce 21import { store } from "@/store";
50aed5a1 22import { getDiagram } from "@/utils/printDiagram";
13aa5a44 23
cf2343ce
BA
24export default {
25 name: 'my-rules',
24340cae 26 components: {
a6088c90 27 ComputerGame,
24340cae 28 },
cf2343ce
BA
29 data: function() {
30 return {
31 st: store.state,
50aed5a1 32 content: "",
cf2343ce 33 display: "rules",
cf2343ce 34 gameInProgress: false,
6dd02928 35 // variables passed to ComputerGame:
834c202a
BA
36 gameInfo: {
37 vname: "_unknown",
38 mode: "versus",
39 fen: "",
41cb9b94 40 score: "*",
834c202a 41 }
cf2343ce
BA
42 };
43 },
42eb4eaf 44 watch: {
a6088c90 45 "$route": function(newRoute) {
42eb4eaf
BA
46 this.tryChangeVariant(newRoute.params["vname"]);
47 },
48 },
49 created: async function() {
e2732923 50 // NOTE: variant cannot be set before store is initialized
42eb4eaf 51 this.tryChangeVariant(this.$route.params["vname"]);
cf2343ce
BA
52 },
53 methods: {
41cb9b94
BA
54 clickReadRules: function() {
55 if (this.display != "rules")
56 this.display = "rules";
57 else if (this.gameInProgress)
58 this.display = "computer";
59 },
50aed5a1
BA
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 },
42eb4eaf 69 tryChangeVariant: async function(vname) {
a6088c90 70 if (!vname || vname == "_unknown")
42eb4eaf 71 return;
834c202a 72 this.gameInfo.vname = vname;
42eb4eaf
BA
73 const vModule = await import("@/variants/" + vname + ".js");
74 window.V = vModule.VariantRules;
50aed5a1
BA
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 =
72ccbd67 82 require("raw-loader!@/translations/rules/" + vname + "/" + this.st.lang + ".pug")
2c6cb25e
BA
83 // Next two lines fix a weird issue after last update (2019-11)
84 .replace(/\\[n"]/g, " ")
85 .replace('module.exports = "', '').replace(/"$/, "")
50aed5a1 86 .replace(/(fen:)([^:]*):/g, replaceByDiag);
cf2343ce 87 },
834c202a 88 startGame: function(mode) {
cf2343ce
BA
89 if (this.gameInProgress)
90 return;
91 this.gameInProgress = true;
cf2343ce 92 this.display = "computer";
834c202a 93 this.gameInfo.mode = mode;
41cb9b94 94 this.gameInfo.score = "*";
834c202a 95 this.gameInfo.fen = V.GenRandInitFen();
cf2343ce 96 },
41cb9b94
BA
97 // user is willing to stop the game:
98 stopGame: function(score) {
99 this.gameInfo.score = score || "?";
834c202a 100 this.gameInfo.mode = "analyze";
cf2343ce 101 },
41cb9b94
BA
102 // The game is effectively stopped:
103 gameStopped: function() {
104 this.gameInProgress = false;
105 },
5157ce0b
BA
106 gotoAnalyze: function() {
107 this.$router.push("/analyze/" + this.gameInfo.vname
108 + "/?fen=" + V.GenRandInitFen());
109 },
cf2343ce
BA
110 },
111};
112</script>
50aed5a1 113
41c80bb6 114<style lang="sass" scoped>
dcd68c41
BA
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
50aed5a1
BA
126.warn
127 padding: 3px
128 color: red
129 background-color: lightgrey
130 font-weight: bold
131
132figure.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
92a523d1
BA
162p.boxed
163 background-color: #FFCC66
164 padding: 5px
50aed5a1 165
92a523d1
BA
166.stageDelimiter
167 color: purple
50aed5a1 168
92a523d1
BA
169// To show (new) pieces, and/or there values...
170figure.showPieces > img
171 width: 50px
50aed5a1 172
92a523d1
BA
173figure.showPieces > figcaption
174 color: #6C6C6C
50aed5a1 175
92a523d1
BA
176.section-title
177 padding: 0
50aed5a1 178
92a523d1
BA
179.section-title > h4
180 padding: 5px
50aed5a1 181
92a523d1
BA
182ol, ul:not(.browser-default)
183 padding-left: 20px
50aed5a1 184
92a523d1
BA
185ul:not(.browser-default)
186 margin-top: 5px
50aed5a1 187
92a523d1
BA
188ul:not(.browser-default) > li
189 list-style-type: disc
50aed5a1
BA
190
191.light-square-diag
192 background-color: #e5e5ca
193
194.dark-square-diag
195 background-color: #6f8f57
196
41c80bb6 197// TODO: following is duplicated (Board.vue)
50aed5a1
BA
198div.board
199 float: left
200 height: 0
201 display: inline-block
202 position: relative
203
204div.board8
205 width: 12.5%
206 padding-bottom: 12.5%
207
208div.board10
209 width: 10%
210 padding-bottom: 10%
211
212div.board11
213 width: 9.09%
214 padding-bottom: 9.1%
215
216img.piece
217 width: 100%
218
219img.piece, img.mark-square
220 max-width: 100%
221 height: auto
222 display: block
223
224img.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>