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