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