socket rooms correspnding to pages. TODO: Hall+Game (split live and corr? shared...
[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
834c202a 6 button(v-show="!gameInProgress" @click="() => startGame('auto')")
cf2343ce 7 | Observe a sample game
834c202a 8 button(v-show="!gameInProgress" @click="() => startGame('versus')")
cf2343ce
BA
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")
6dd02928 13 ComputerGame(v-show="display=='computer'" :game-info="gameInfo"
cf2343ce
BA
14 @computer-think="gameInProgress=false" @game-over="stopGame")
15</template>
16
17<script>
a6088c90 18import ComputerGame from "@/components/ComputerGame.vue";
cf2343ce 19import { store } from "@/store";
50aed5a1 20import { getDiagram } from "@/utils/printDiagram";
13aa5a44 21
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,
50aed5a1 30 content: "",
cf2343ce 31 display: "rules",
cf2343ce 32 gameInProgress: false,
6dd02928 33 // variables passed to ComputerGame:
834c202a
BA
34 gameInfo: {
35 vname: "_unknown",
36 mode: "versus",
37 fen: "",
38 userStop: false,
39 }
cf2343ce
BA
40 };
41 },
42eb4eaf 42 watch: {
a6088c90 43 "$route": function(newRoute) {
42eb4eaf
BA
44 this.tryChangeVariant(newRoute.params["vname"]);
45 },
46 },
47 created: async function() {
e2732923 48 // NOTE: variant cannot be set before store is initialized
42eb4eaf 49 this.tryChangeVariant(this.$route.params["vname"]);
cf2343ce
BA
50 },
51 methods: {
50aed5a1
BA
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 },
42eb4eaf 61 tryChangeVariant: async function(vname) {
a6088c90 62 if (!vname || vname == "_unknown")
42eb4eaf 63 return;
834c202a 64 this.gameInfo.vname = vname;
42eb4eaf
BA
65 const vModule = await import("@/variants/" + vname + ".js");
66 window.V = vModule.VariantRules;
50aed5a1
BA
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")
2c6cb25e
BA
75 // Next two lines fix a weird issue after last update (2019-11)
76 .replace(/\\[n"]/g, " ")
77 .replace('module.exports = "', '').replace(/"$/, "")
50aed5a1 78 .replace(/(fen:)([^:]*):/g, replaceByDiag);
cf2343ce 79 },
834c202a 80 startGame: function(mode) {
cf2343ce
BA
81 if (this.gameInProgress)
82 return;
83 this.gameInProgress = true;
cf2343ce 84 this.display = "computer";
834c202a
BA
85 this.gameInfo.mode = mode;
86 this.gameInfo.userStop = false;
87 this.gameInfo.fen = V.GenRandInitFen();
cf2343ce
BA
88 },
89 stopGame: function() {
90 this.gameInProgress = false;
834c202a
BA
91 this.gameInfo.userStop = true;
92 this.gameInfo.mode = "analyze";
cf2343ce
BA
93 },
94 },
95};
96</script>
50aed5a1
BA
97
98<style lang="sass">
99.warn
100 padding: 3px
101 color: red
102 background-color: lightgrey
103 font-weight: bold
104
105figure.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
92a523d1
BA
135p.boxed
136 background-color: #FFCC66
137 padding: 5px
50aed5a1 138
92a523d1
BA
139.stageDelimiter
140 color: purple
50aed5a1 141
92a523d1
BA
142// To show (new) pieces, and/or there values...
143figure.showPieces > img
144 width: 50px
50aed5a1 145
92a523d1
BA
146figure.showPieces > figcaption
147 color: #6C6C6C
50aed5a1 148
92a523d1
BA
149.section-title
150 padding: 0
50aed5a1 151
92a523d1
BA
152.section-title > h4
153 padding: 5px
50aed5a1 154
92a523d1
BA
155ol, ul:not(.browser-default)
156 padding-left: 20px
50aed5a1 157
92a523d1
BA
158ul:not(.browser-default)
159 margin-top: 5px
50aed5a1 160
92a523d1
BA
161ul:not(.browser-default) > li
162 list-style-type: disc
50aed5a1
BA
163
164.light-square-diag
165 background-color: #e5e5ca
166
167.dark-square-diag
168 background-color: #6f8f57
169
170// TODO: following is duplicated
171div.board
172 float: left
173 height: 0
174 display: inline-block
175 position: relative
176
177div.board8
178 width: 12.5%
179 padding-bottom: 12.5%
180
181div.board10
182 width: 10%
183 padding-bottom: 10%
184
185div.board11
186 width: 9.09%
187 padding-bottom: 9.1%
188
189img.piece
190 width: 100%
191
192img.piece, img.mark-square
193 max-width: 100%
194 height: auto
195 display: block
196
197img.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>