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