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