Improve autoplay, debug move reception while autoplay and/or analyze is on. Add Ambig...
[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 h4#variantNameInAnalyze(@click="gotoRules()") {{ game.vname }}
11 div(v-html="rulesContent")
12 .row
13 .col-sm-12
14 .text-center
15 input#fen(
16 v-model="curFen"
17 @input="adjustFenSize(); tryGotoFen()"
18 )
19 BaseGame(
20 ref="basegame"
21 :game="game"
22 @fenchange="setFen"
23 )
24 </template>
25
26 <script>
27 import BaseGame from "@/components/BaseGame.vue";
28 import { processModalClick } from "@/utils/modalClick";
29 import { replaceByDiag } from "@/utils/printDiagram";
30 import { store } from "@/store";
31 export default {
32 name: "my-analyse",
33 // TODO: game import ==> require some adjustments, like
34 // the ability to analyse from a list of moves...
35 components: {
36 BaseGame
37 },
38 // gameRef: to find the game in (potentially remote) storage
39 data: function() {
40 return {
41 st: store.state,
42 rulesContent: "",
43 gameRef: {
44 vname: "",
45 fen: ""
46 },
47 game: {
48 players: [{ name: "Analyse" }, { name: "Analyse" }],
49 mode: "analyze"
50 },
51 curFen: ""
52 };
53 },
54 watch: {
55 $route: function() {
56 this.initFromUrl();
57 }
58 },
59 created: function() {
60 this.initFromUrl();
61 },
62 mounted: function() {
63 document.getElementById("rulesDiv")
64 .addEventListener("click", processModalClick);
65 },
66 methods: {
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.
70 const newUrl =
71 "/variants" + (wrongVname ? "" : "/" + this.gameRef.vname);
72 setTimeout(() => {
73 alert(this.st.tr[text] || text);
74 this.$router.replace(newUrl);
75 }, 500);
76 },
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, " ");
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?).
86 const orientation = this.$route.query["side"];
87 this.initialize(orientation);
88 }
89 },
90 initialize: async function(orientation) {
91 // Obtain VariantRules object
92 await import("@/variants/" + this.gameRef.vname + ".js")
93 .then((vModule) => {
94 window.V = vModule[this.gameRef.vname + "Rules"];
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");
98 else this.loadGame(orientation);
99 })
100 .catch((err) => { this.alertAndQuit("Mispelled variant name", true); });
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);
116 },
117 loadGame: function(orientation) {
118 this.game.vname = this.gameRef.vname;
119 this.game.fenStart = this.gameRef.fen;
120 this.game.fen = this.gameRef.fen;
121 this.game.score = "*"; //never change
122 this.curFen = this.game.fen;
123 this.adjustFenSize();
124 this.game.mycolor = orientation || V.ParseFen(this.gameRef.fen).turn;
125 this.$refs["basegame"].re_setVariables(this.game);
126 },
127 // Triggered by "fenchange" emitted in BaseGame:
128 setFen: function(fen) {
129 this.curFen = fen;
130 this.adjustFenSize();
131 },
132 adjustFenSize: function() {
133 let fenInput = document.getElementById("fen");
134 fenInput.style.width = (this.curFen.length+3) + "ch";
135 },
136 tryGotoFen: function() {
137 if (V.IsGoodFen(this.curFen)) {
138 this.gameRef.fen = this.curFen;
139 this.loadGame();
140 }
141 }
142 }
143 };
144 </script>
145
146 <style lang="sass">
147 @import "@/styles/_board_squares_img.sass"
148 @import "@/styles/_rules.sass"
149 </style>
150
151 <style lang="sass" scoped>
152 h4#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
169 input#fen
170 // Use a Monospace font for input FEN width adjustment
171 font-family: "Fira Code"
172 </style>