'update'
[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')")
5157ce0b 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
BA
113
114<style lang="sass">
115.warn
116 padding: 3px
117 color: red
118 background-color: lightgrey
119 font-weight: bold
120
121figure.diagram-container
122 margin: 15px 0 15px 0
123 text-align: center
124 width: 100%
125 display: block
126 .diagram
127 display: block
128 width: 40%
129 min-width: 240px
130 margin-left: auto
131 margin-right: auto
132 .diag12
133 float: left
134 margin-left: calc(10% - 20px)
135 margin-right: 40px
136 @media screen and (max-width: 630px)
137 float: none
138 margin: 0 auto 10px auto
139 .diag22
140 float: left
141 margin-right: calc(10% - 20px)
142 @media screen and (max-width: 630px)
143 float: none
144 margin: 0 auto
145 figcaption
146 display: block
147 clear: both
148 padding-top: 5px
149 font-size: 0.8em
150
92a523d1
BA
151p.boxed
152 background-color: #FFCC66
153 padding: 5px
50aed5a1 154
92a523d1
BA
155.stageDelimiter
156 color: purple
50aed5a1 157
92a523d1
BA
158// To show (new) pieces, and/or there values...
159figure.showPieces > img
160 width: 50px
50aed5a1 161
92a523d1
BA
162figure.showPieces > figcaption
163 color: #6C6C6C
50aed5a1 164
92a523d1
BA
165.section-title
166 padding: 0
50aed5a1 167
92a523d1
BA
168.section-title > h4
169 padding: 5px
50aed5a1 170
92a523d1
BA
171ol, ul:not(.browser-default)
172 padding-left: 20px
50aed5a1 173
92a523d1
BA
174ul:not(.browser-default)
175 margin-top: 5px
50aed5a1 176
92a523d1
BA
177ul:not(.browser-default) > li
178 list-style-type: disc
50aed5a1
BA
179
180.light-square-diag
181 background-color: #e5e5ca
182
183.dark-square-diag
184 background-color: #6f8f57
185
186// TODO: following is duplicated
187div.board
188 float: left
189 height: 0
190 display: inline-block
191 position: relative
192
193div.board8
194 width: 12.5%
195 padding-bottom: 12.5%
196
197div.board10
198 width: 10%
199 padding-bottom: 10%
200
201div.board11
202 width: 9.09%
203 padding-bottom: 9.1%
204
205img.piece
206 width: 100%
207
208img.piece, img.mark-square
209 max-width: 100%
210 height: auto
211 display: block
212
213img.mark-square
214 opacity: 0.6
215 width: 76%
216 position: absolute
217 top: 12%
218 left: 12%
219 opacity: .7
220
221.in-shadow
222 filter: brightness(50%)
223</style>