3 input#modalRules.modal(type="checkbox")
6 data-checkbox="modalRules"
9 label.modal-close(for="modalRules")
10 a#variantNameInAnalyze(:href="'/#/variants/'+game.vname")
12 div(v-html="rulesContent")
18 @input="adjustFenSize(); tryGotoFen()"
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 import afterRawLoad from "@/utils/afterRawLoad";
35 // TODO: game import ==> require some adjustments, like
36 // the ability to analyse from a list of moves...
40 // gameRef: to find the game in (potentially remote) storage
51 players: [{ name: "Analyse" }, { name: "Analyse" }],
66 document.getElementById("rulesDiv")
67 .addEventListener("click", processModalClick);
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.
74 "/variants" + (wrongVname ? "" : "/" + this.gameRef.vname);
76 alert(this.st.tr[text] || text);
77 this.$router.replace(newUrl);
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");
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);
93 initialize: async function(orientation) {
94 // Obtain VariantRules object
95 await import("@/variants/" + this.gameRef.vname + ".js")
97 window.V = vModule[this.gameRef.vname + "Rules"];
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);
103 //.catch((err) => { this.alertAndQuit("Mispelled variant name", true); });
107 "raw-loader!@/translations/rules/" +
108 this.gameRef.vname + "/" + this.st.lang + ".pug"
110 ).replace(/(fen:)([^:]*):/g, replaceByDiag);
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);
122 // Triggered by "fenchange" emitted in BaseGame:
123 setFen: function(fen) {
125 this.adjustFenSize();
127 adjustFenSize: function() {
128 let fenInput = document.getElementById("fen");
129 fenInput.style.width = (this.curFen.length+3) + "ch";
131 tryGotoFen: function() {
132 if (V.IsGoodFen(this.curFen)) {
133 this.gameRef.fen = this.curFen;
142 @import "@/styles/_board_squares_img.sass"
143 @import "@/styles/_rules.sass"
146 <style lang="sass" scoped>
147 a#variantNameInAnalyze
148 color: var(--card-fore-color)
151 font-size: calc(1rem * var(--heading-ratio))
153 margin: calc(1.5 * var(--universal-margin))
159 @media screen and (max-width: 1500px)
161 @media screen and (max-width: 1024px)
163 @media screen and (max-width: 767px)
167 // Use a Monospace font for input FEN width adjustment
168 font-family: "Fira Code"