Do not show variant name when practicing against computer
[vchess.git] / client / src / views / Analyse.vue
CommitLineData
7f3484bd 1<template lang="pug">
7aa548e7 2main
26d8a01a
BA
3 input#modalRules.modal(type="checkbox")
4 div#rulesDiv(
5 role="dialog"
6 data-checkbox="modalRules"
7 )
8 .card
9 label.modal-close(for="modalRules")
10 h4#variantNameInAnalyze(@click="gotoRules()") {{ game.vname }}
11 div(v-html="rulesContent")
63ca2b89
BA
12 .row
13 .col-sm-12
9a3049f3 14 .text-center
910d631b
BA
15 input#fen(
16 v-model="curFen"
725da57f 17 @input="adjustFenSize(); tryGotoFen()"
910d631b 18 )
910d631b 19 BaseGame(
b1e46b33 20 ref="basegame"
910d631b 21 :game="game"
8055eabd 22 @fenchange="setFen"
910d631b 23 )
7f3484bd
BA
24</template>
25
26<script>
27import BaseGame from "@/components/BaseGame.vue";
26d8a01a
BA
28import { processModalClick } from "@/utils/modalClick";
29import { replaceByDiag } from "@/utils/printDiagram";
7f3484bd 30import { store } from "@/store";
7f3484bd 31export default {
6808d7a1 32 name: "my-analyse",
5f918a27
BA
33 // TODO: game import ==> require some adjustments, like
34 // the ability to analyse from a list of moves...
7f3484bd 35 components: {
6808d7a1 36 BaseGame
7f3484bd
BA
37 },
38 // gameRef: to find the game in (potentially remote) storage
39 data: function() {
40 return {
41 st: store.state,
26d8a01a 42 rulesContent: "",
6808d7a1 43 gameRef: {
652f40de
BA
44 vname: "",
45 fen: ""
46 },
47 game: {
6808d7a1
BA
48 players: [{ name: "Analyse" }, { name: "Analyse" }],
49 mode: "analyze"
7f3484bd 50 },
6808d7a1 51 curFen: ""
7f3484bd
BA
52 };
53 },
b1e46b33
BA
54 watch: {
55 $route: function() {
56 this.initFromUrl();
a97bdbda 57 }
7f3484bd 58 },
b1e46b33
BA
59 created: function() {
60 this.initFromUrl();
61 },
26d8a01a
BA
62 mounted: function() {
63 document.getElementById("rulesDiv")
64 .addEventListener("click", processModalClick);
65 },
7f3484bd 66 methods: {
a97bdbda
BA
67 alertAndQuit: function(text, wrongVname) {
68 // Soon after component creation, st.tr might be uninitialized.
69 // Set a timeout to let a chance for the message to show translated.
2c5d7b20
BA
70 const newUrl =
71 "/variants" + (wrongVname ? "" : "/" + this.gameRef.vname);
a97bdbda
BA
72 setTimeout(() => {
73 alert(this.st.tr[text] || text);
74 this.$router.replace(newUrl);
75 }, 500);
76 },
b1e46b33
BA
77 initFromUrl: function() {
78 this.gameRef.vname = this.$route.params["vname"];
79 const routeFen = this.$route.query["fen"];
80 if (!routeFen) this.alertAndQuit("Missing FEN");
81 else {
82 this.gameRef.fen = routeFen.replace(/_/g, " ");
07052665
BA
83 // orientation is optional: taken from FEN if missing.
84 // NOTE: currently no internal usage of 'side', but could be used by
85 // manually settings the URL (TODO?).
b1e46b33
BA
86 const orientation = this.$route.query["side"];
87 this.initialize(orientation);
88 }
89 },
7ba4a5bc 90 initialize: async function(orientation) {
5157ce0b 91 // Obtain VariantRules object
a97bdbda
BA
92 await import("@/variants/" + this.gameRef.vname + ".js")
93 .then((vModule) => {
32f6285e 94 window.V = vModule[this.gameRef.vname + "Rules"];
a97bdbda
BA
95 if (!V.CanAnalyze)
96 // Late check, in case the user tried to enter URL by hand
97 this.alertAndQuit("Analysis disabled for this variant");
7ba4a5bc 98 else this.loadGame(orientation);
a97bdbda
BA
99 })
100 .catch((err) => { this.alertAndQuit("Mispelled variant name", true); });
26d8a01a
BA
101 this.rulesContent =
102 require(
103 "raw-loader!@/translations/rules/" +
104 this.gameRef.vname + "/" +
105 this.st.lang + ".pug"
106 )
107 // Next two lines fix a weird issue after last update (2019-11)
108 .replace(/\\n/g, " ")
109 .replace(/\\"/g, '"')
110 .replace('module.exports = "', "")
111 .replace(/"$/, "")
112 .replace(/(fen:)([^:]*):/g, replaceByDiag);
113 },
114 gotoRules: function() {
115 this.$router.push("/variants/" + this.gameRef.vname);
5157ce0b 116 },
7ba4a5bc 117 loadGame: function(orientation) {
652f40de 118 this.game.vname = this.gameRef.vname;
b1e46b33 119 this.game.fenStart = this.gameRef.fen;
652f40de 120 this.game.fen = this.gameRef.fen;
0234201f 121 this.game.score = "*"; //never change
5157ce0b
BA
122 this.curFen = this.game.fen;
123 this.adjustFenSize();
7ba4a5bc 124 this.game.mycolor = orientation || V.ParseFen(this.gameRef.fen).turn;
b1e46b33 125 this.$refs["basegame"].re_setVariables(this.game);
7f3484bd 126 },
8055eabd
BA
127 // Triggered by "fenchange" emitted in BaseGame:
128 setFen: function(fen) {
129 this.curFen = fen;
130 this.adjustFenSize();
131 },
5157ce0b
BA
132 adjustFenSize: function() {
133 let fenInput = document.getElementById("fen");
d54f6261 134 fenInput.style.width = (this.curFen.length+3) + "ch";
5157ce0b 135 },
725da57f 136 tryGotoFen: function() {
3a2a7b5f 137 if (V.IsGoodFen(this.curFen)) {
725da57f
BA
138 this.gameRef.fen = this.curFen;
139 this.loadGame();
140 }
6808d7a1
BA
141 }
142 }
7f3484bd
BA
143};
144</script>
d54f6261 145
26d8a01a
BA
146<style lang="sass">
147@import "@/styles/_board_squares_img.sass"
148@import "@/styles/_rules.sass"
149</style>
150
151<style lang="sass" scoped>
152h4#variantNameInAnalyze
153 cursor: pointer
154 text-align: center
155 text-decoration: underline
156 font-weight: bold
157
158#rulesDiv > .card
159 padding: 5px 0
160 max-width: 50%
161 max-height: 100%
162 @media screen and (max-width: 1500px)
163 max-width: 67%
164 @media screen and (max-width: 1024px)
165 max-width: 85%
166 @media screen and (max-width: 767px)
167 max-width: 100%
168
d54f6261
BA
169input#fen
170 // Use a Monospace font for input FEN width adjustment
171 font-family: "Fira Code"
172</style>