Improved logic for playing against bots
[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 .replace(/(fen:)([^:]*):/g, replaceByDiag);
76 },
77 startGame: function(mode) {
78 if (this.gameInProgress)
79 return;
80 this.gameInProgress = true;
81 this.display = "computer";
82 this.gameInfo.mode = mode;
83 this.gameInfo.userStop = false;
84 this.gameInfo.fen = V.GenRandInitFen();
85 },
86 stopGame: function() {
87 this.gameInProgress = false;
88 this.gameInfo.userStop = true;
89 this.gameInfo.mode = "analyze";
90 },
91 },
92 };
93 </script>
94
95 <style lang="sass">
96 .warn
97 padding: 3px
98 color: red
99 background-color: lightgrey
100 font-weight: bold
101
102 figure.diagram-container
103 margin: 15px 0 15px 0
104 text-align: center
105 width: 100%
106 display: block
107 .diagram
108 display: block
109 width: 40%
110 min-width: 240px
111 margin-left: auto
112 margin-right: auto
113 .diag12
114 float: left
115 margin-left: calc(10% - 20px)
116 margin-right: 40px
117 @media screen and (max-width: 630px)
118 float: none
119 margin: 0 auto 10px auto
120 .diag22
121 float: left
122 margin-right: calc(10% - 20px)
123 @media screen and (max-width: 630px)
124 float: none
125 margin: 0 auto
126 figcaption
127 display: block
128 clear: both
129 padding-top: 5px
130 font-size: 0.8em
131
132 p.boxed
133 background-color: #FFCC66
134 padding: 5px
135
136 .stageDelimiter
137 color: purple
138
139 // To show (new) pieces, and/or there values...
140 figure.showPieces > img
141 width: 50px
142
143 figure.showPieces > figcaption
144 color: #6C6C6C
145
146 .section-title
147 padding: 0
148
149 .section-title > h4
150 padding: 5px
151
152 ol, ul:not(.browser-default)
153 padding-left: 20px
154
155 ul:not(.browser-default)
156 margin-top: 5px
157
158 ul:not(.browser-default) > li
159 list-style-type: disc
160
161 .light-square-diag
162 background-color: #e5e5ca
163
164 .dark-square-diag
165 background-color: #6f8f57
166
167 // TODO: following is duplicated
168 div.board
169 float: left
170 height: 0
171 display: inline-block
172 position: relative
173
174 div.board8
175 width: 12.5%
176 padding-bottom: 12.5%
177
178 div.board10
179 width: 10%
180 padding-bottom: 10%
181
182 div.board11
183 width: 9.09%
184 padding-bottom: 9.1%
185
186 img.piece
187 width: 100%
188
189 img.piece, img.mark-square
190 max-width: 100%
191 height: auto
192 display: block
193
194 img.mark-square
195 opacity: 0.6
196 width: 76%
197 position: absolute
198 top: 12%
199 left: 12%
200 opacity: .7
201
202 .in-shadow
203 filter: brightness(50%)
204 </style>