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