Draft of problems section
[vchess.git] / client / src / views / Rules.vue
CommitLineData
cf2343ce 1<template lang="pug">
7aa548e7
BA
2main
3 .row
4 .col-sm-12.col-md-10.col-md-offset-1.col-lg-8.col-lg-offset-2
5 .button-group
9ddaf8da
BA
6 button(@click="clickReadRules()") {{ st.tr["Rules"] }}
7 button(v-show="!gameInProgress" @click="startGame('auto')")
f44fd3bf 8 | {{ st.tr["Example game"] }}
9ddaf8da 9 button(v-show="!gameInProgress" @click="startGame('versus')")
602d6bef 10 | {{ st.tr["Practice"] }}
9ddaf8da 11 button(v-show="gameInProgress" @click="stopGame()")
602d6bef 12 | {{ st.tr["Stop game"] }}
4f518610 13 button(v-if="display=='rules' && gameInfo.vname!='Dark'"
9ddaf8da 14 @click="gotoAnalyze()")
677fe285 15 | {{ st.tr["Analyse"] }}
9a3049f3 16 div(v-show="display=='rules'" v-html="content")
72ccbd67
BA
17 ComputerGame(v-show="display=='computer'" :game-info="gameInfo"
18 @game-over="stopGame" @game-stopped="gameStopped")
cf2343ce
BA
19</template>
20
21<script>
a6088c90 22import ComputerGame from "@/components/ComputerGame.vue";
cf2343ce 23import { store } from "@/store";
50aed5a1 24import { getDiagram } from "@/utils/printDiagram";
cf2343ce
BA
25export default {
26 name: 'my-rules',
24340cae 27 components: {
a6088c90 28 ComputerGame,
24340cae 29 },
cf2343ce
BA
30 data: function() {
31 return {
32 st: store.state,
cf2343ce 33 display: "rules",
cf2343ce 34 gameInProgress: false,
6dd02928 35 // variables passed to ComputerGame:
834c202a 36 gameInfo: {
fcbc92c2 37 vname: "",
834c202a
BA
38 mode: "versus",
39 fen: "",
41cb9b94 40 score: "*",
834c202a 41 }
cf2343ce
BA
42 };
43 },
42eb4eaf 44 watch: {
a6088c90 45 "$route": function(newRoute) {
fcbc92c2 46 this.re_setVariant(newRoute.params["vname"]);
42eb4eaf
BA
47 },
48 },
6f093ada 49 created: function() {
e2732923 50 // NOTE: variant cannot be set before store is initialized
fcbc92c2
BA
51 this.re_setVariant(this.$route.params["vname"]);
52 },
53 computed: {
54 content: function() {
55 if (!this.gameInfo.vname)
56 return ""; //variant not set yet
57 // (AJAX) Request to get rules content (plain text, HTML)
58 return require("raw-loader!@/translations/rules/" +
59 this.gameInfo.vname + "/" + this.st.lang + ".pug")
60 // Next two lines fix a weird issue after last update (2019-11)
61 .replace(/\\n/g, " ").replace(/\\"/g, '"')
62 .replace('module.exports = "', '').replace(/"$/, "")
63 .replace(/(fen:)([^:]*):/g, this.replaceByDiag);
64 },
cf2343ce
BA
65 },
66 methods: {
41cb9b94
BA
67 clickReadRules: function() {
68 if (this.display != "rules")
69 this.display = "rules";
70 else if (this.gameInProgress)
71 this.display = "computer";
72 },
50aed5a1
BA
73 parseFen(fen) {
74 const fenParts = fen.split(" ");
75 return {
76 position: fenParts[0],
77 marks: fenParts[1],
78 orientation: fenParts[2],
79 shadow: fenParts[3],
80 };
81 },
fcbc92c2
BA
82 // Method to replace diagrams in loaded HTML
83 replaceByDiag: function(match, p1, p2) {
84 const args = this.parseFen(p2);
85 return getDiagram(args);
86 },
87 re_setVariant: async function(vname) {
42eb4eaf
BA
88 const vModule = await import("@/variants/" + vname + ".js");
89 window.V = vModule.VariantRules;
fcbc92c2 90 this.gameInfo.vname = vname;
cf2343ce 91 },
834c202a 92 startGame: function(mode) {
cf2343ce
BA
93 if (this.gameInProgress)
94 return;
95 this.gameInProgress = true;
cf2343ce 96 this.display = "computer";
834c202a 97 this.gameInfo.mode = mode;
41cb9b94 98 this.gameInfo.score = "*";
834c202a 99 this.gameInfo.fen = V.GenRandInitFen();
cf2343ce 100 },
41cb9b94
BA
101 // user is willing to stop the game:
102 stopGame: function(score) {
103 this.gameInfo.score = score || "?";
cf2343ce 104 },
41cb9b94
BA
105 // The game is effectively stopped:
106 gameStopped: function() {
107 this.gameInProgress = false;
108 },
5157ce0b 109 gotoAnalyze: function() {
677fe285 110 this.$router.push("/analyse/" + this.gameInfo.vname
5157ce0b
BA
111 + "/?fen=" + V.GenRandInitFen());
112 },
cf2343ce
BA
113 },
114};
115</script>
50aed5a1 116
5bcc9b31
BA
117<!-- NOTE: not scoped here, because HTML is injected (TODO) -->
118<style lang="sass">
50aed5a1
BA
119.warn
120 padding: 3px
121 color: red
122 background-color: lightgrey
123 font-weight: bold
124
125figure.diagram-container
126 margin: 15px 0 15px 0
127 text-align: center
128 width: 100%
129 display: block
130 .diagram
131 display: block
132 width: 40%
133 min-width: 240px
134 margin-left: auto
135 margin-right: auto
136 .diag12
137 float: left
138 margin-left: calc(10% - 20px)
139 margin-right: 40px
140 @media screen and (max-width: 630px)
141 float: none
142 margin: 0 auto 10px auto
143 .diag22
144 float: left
145 margin-right: calc(10% - 20px)
146 @media screen and (max-width: 630px)
147 float: none
148 margin: 0 auto
149 figcaption
150 display: block
151 clear: both
152 padding-top: 5px
153 font-size: 0.8em
154
92a523d1
BA
155p.boxed
156 background-color: #FFCC66
157 padding: 5px
50aed5a1 158
9a3049f3
BA
159.bigfont
160 font-size: 1.2em
161
162.bold
163 font-weight: bold
164
92a523d1
BA
165.stageDelimiter
166 color: purple
50aed5a1 167
92a523d1
BA
168// To show (new) pieces, and/or there values...
169figure.showPieces > img
170 width: 50px
50aed5a1 171
92a523d1
BA
172figure.showPieces > figcaption
173 color: #6C6C6C
50aed5a1 174
92a523d1
BA
175.section-title
176 padding: 0
50aed5a1 177
92a523d1
BA
178.section-title > h4
179 padding: 5px
50aed5a1 180
92a523d1
BA
181ol, ul:not(.browser-default)
182 padding-left: 20px
50aed5a1 183
92a523d1
BA
184ul:not(.browser-default)
185 margin-top: 5px
50aed5a1 186
92a523d1
BA
187ul:not(.browser-default) > li
188 list-style-type: disc
50aed5a1 189</style>