Experimental support for challenges from URL + ask specific color
[vchess.git] / client / src / views / Analyse.vue
1 <template lang="pug">
2 main
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 a#variantNameInAnalyze(:href="'/#/variants/'+game.vname")
11 | {{ game.vname }}
12 div(v-html="rulesContent")
13 .row
14 .col-sm-12
15 .text-center
16 input#fen(
17 v-model="curFen"
18 @input="adjustFenSize(); tryGotoFen()"
19 )
20 BaseGame(
21 ref="basegame"
22 :game="game"
23 @fenchange="setFen"
24 )
25 </template>
26
27 <script>
28 import BaseGame from "@/components/BaseGame.vue";
29 import { processModalClick } from "@/utils/modalClick";
30 import { replaceByDiag } from "@/utils/printDiagram";
31 import { store } from "@/store";
32 export default {
33 name: "my-analyse",
34 // TODO: game import ==> require some adjustments, like
35 // the ability to analyse from a list of moves...
36 components: {
37 BaseGame
38 },
39 // gameRef: to find the game in (potentially remote) storage
40 data: function() {
41 return {
42 st: store.state,
43 rulesContent: "",
44 gameRef: {
45 vname: "",
46 fen: ""
47 },
48 game: {
49 players: [{ name: "Analyse" }, { name: "Analyse" }],
50 mode: "analyze"
51 },
52 curFen: ""
53 };
54 },
55 watch: {
56 $route: function() {
57 this.initFromUrl();
58 }
59 },
60 created: function() {
61 this.initFromUrl();
62 },
63 mounted: function() {
64 document.getElementById("rulesDiv")
65 .addEventListener("click", processModalClick);
66 },
67 methods: {
68 alertAndQuit: function(text, wrongVname) {
69 // Soon after component creation, st.tr might be uninitialized.
70 // Set a timeout to let a chance for the message to show translated.
71 const newUrl =
72 "/variants" + (wrongVname ? "" : "/" + this.gameRef.vname);
73 setTimeout(() => {
74 alert(this.st.tr[text] || text);
75 this.$router.replace(newUrl);
76 }, 500);
77 },
78 initFromUrl: function() {
79 this.gameRef.vname = this.$route.params["vname"];
80 const routeFen = this.$route.query["fen"];
81 if (!routeFen) this.alertAndQuit("Missing FEN");
82 else {
83 this.gameRef.fen = routeFen.replace(/_/g, " ");
84 // orientation is optional: taken from FEN if missing.
85 // NOTE: currently no internal usage of 'side', but could be used by
86 // manually settings the URL (TODO?).
87 const orientation = this.$route.query["side"];
88 this.initialize(orientation);
89 }
90 },
91 initialize: async function(orientation) {
92 // Obtain VariantRules object
93 await import("@/variants/" + this.gameRef.vname + ".js")
94 .then((vModule) => {
95 window.V = vModule[this.gameRef.vname + "Rules"];
96 if (!V.CanAnalyze)
97 // Late check, in case the user tried to enter URL by hand
98 this.alertAndQuit("Analysis disabled for this variant");
99 else this.loadGame(orientation);
100 })
101 .catch((err) => { this.alertAndQuit("Mispelled variant name", true); });
102 this.rulesContent =
103 require(
104 "raw-loader!@/translations/rules/" +
105 this.gameRef.vname + "/" +
106 this.st.lang + ".pug"
107 )
108 // Next two lines fix a weird issue after last update (2019-11)
109 .replace(/\\n/g, " ")
110 .replace(/\\"/g, '"')
111 .replace('module.exports = "', "")
112 .replace(/"$/, "")
113 .replace(/(fen:)([^:]*):/g, replaceByDiag);
114 },
115 loadGame: function(orientation) {
116 this.game.vname = this.gameRef.vname;
117 this.game.fenStart = this.gameRef.fen;
118 this.game.fen = this.gameRef.fen;
119 this.game.score = "*"; //never change
120 this.curFen = this.game.fen;
121 this.adjustFenSize();
122 this.game.mycolor = orientation || V.ParseFen(this.gameRef.fen).turn;
123 this.$refs["basegame"].re_setVariables(this.game);
124 },
125 // Triggered by "fenchange" emitted in BaseGame:
126 setFen: function(fen) {
127 this.curFen = fen;
128 this.adjustFenSize();
129 },
130 adjustFenSize: function() {
131 let fenInput = document.getElementById("fen");
132 fenInput.style.width = (this.curFen.length+3) + "ch";
133 },
134 tryGotoFen: function() {
135 if (V.IsGoodFen(this.curFen)) {
136 this.gameRef.fen = this.curFen;
137 this.loadGame();
138 }
139 }
140 }
141 };
142 </script>
143
144 <style lang="sass">
145 @import "@/styles/_board_squares_img.sass"
146 @import "@/styles/_rules.sass"
147 </style>
148
149 <style lang="sass" scoped>
150 a#variantNameInAnalyze
151 color: var(--card-fore-color)
152 text-align: center
153 font-weight: bold
154 font-size: calc(1rem * var(--heading-ratio))
155 line-height: 1.2
156 margin: calc(1.5 * var(--universal-margin))
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
169 input#fen
170 // Use a Monospace font for input FEN width adjustment
171 font-family: "Fira Code"
172 </style>