Commit | Line | Data |
---|---|---|
7f3484bd | 1 | <template lang="pug"> |
7aa548e7 | 2 | main |
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") | |
1c15969e BA |
10 | a#variantNameInAnalyze(:href="'/#/variants/'+game.vname") |
11 | | {{ game.vname }} | |
26d8a01a | 12 | div(v-html="rulesContent") |
63ca2b89 BA |
13 | .row |
14 | .col-sm-12 | |
9a3049f3 | 15 | .text-center |
910d631b BA |
16 | input#fen( |
17 | v-model="curFen" | |
725da57f | 18 | @input="adjustFenSize(); tryGotoFen()" |
910d631b | 19 | ) |
910d631b | 20 | BaseGame( |
b1e46b33 | 21 | ref="basegame" |
910d631b | 22 | :game="game" |
8055eabd | 23 | @fenchange="setFen" |
910d631b | 24 | ) |
7f3484bd BA |
25 | </template> |
26 | ||
27 | <script> | |
28 | import BaseGame from "@/components/BaseGame.vue"; | |
26d8a01a BA |
29 | import { processModalClick } from "@/utils/modalClick"; |
30 | import { replaceByDiag } from "@/utils/printDiagram"; | |
7f3484bd | 31 | import { store } from "@/store"; |
70c9745d | 32 | import afterRawLoad from "@/utils/afterRawLoad"; |
7f3484bd | 33 | export default { |
6808d7a1 | 34 | name: "my-analyse", |
5f918a27 BA |
35 | // TODO: game import ==> require some adjustments, like |
36 | // the ability to analyse from a list of moves... | |
7f3484bd | 37 | components: { |
6808d7a1 | 38 | BaseGame |
7f3484bd BA |
39 | }, |
40 | // gameRef: to find the game in (potentially remote) storage | |
41 | data: function() { | |
42 | return { | |
43 | st: store.state, | |
26d8a01a | 44 | rulesContent: "", |
6808d7a1 | 45 | gameRef: { |
652f40de | 46 | vname: "", |
eb2d61de BA |
47 | fen: "", |
48 | options: {} | |
652f40de BA |
49 | }, |
50 | game: { | |
6808d7a1 BA |
51 | players: [{ name: "Analyse" }, { name: "Analyse" }], |
52 | mode: "analyze" | |
7f3484bd | 53 | }, |
6808d7a1 | 54 | curFen: "" |
7f3484bd BA |
55 | }; |
56 | }, | |
b1e46b33 BA |
57 | watch: { |
58 | $route: function() { | |
59 | this.initFromUrl(); | |
a97bdbda | 60 | } |
7f3484bd | 61 | }, |
b1e46b33 BA |
62 | created: function() { |
63 | this.initFromUrl(); | |
64 | }, | |
26d8a01a BA |
65 | mounted: function() { |
66 | document.getElementById("rulesDiv") | |
67 | .addEventListener("click", processModalClick); | |
68 | }, | |
7f3484bd | 69 | methods: { |
a97bdbda BA |
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. | |
2c5d7b20 BA |
73 | const newUrl = |
74 | "/variants" + (wrongVname ? "" : "/" + this.gameRef.vname); | |
a97bdbda BA |
75 | setTimeout(() => { |
76 | alert(this.st.tr[text] || text); | |
77 | this.$router.replace(newUrl); | |
78 | }, 500); | |
79 | }, | |
b1e46b33 BA |
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, " "); | |
07052665 BA |
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?). | |
b1e46b33 BA |
89 | const orientation = this.$route.query["side"]; |
90 | this.initialize(orientation); | |
91 | } | |
92 | }, | |
7ba4a5bc | 93 | initialize: async function(orientation) { |
5157ce0b | 94 | // Obtain VariantRules object |
a97bdbda BA |
95 | await import("@/variants/" + this.gameRef.vname + ".js") |
96 | .then((vModule) => { | |
32f6285e | 97 | window.V = vModule[this.gameRef.vname + "Rules"]; |
a97bdbda BA |
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"); | |
7ba4a5bc | 101 | else this.loadGame(orientation); |
a97bdbda | 102 | }) |
0fb43db7 | 103 | //.catch((err) => { this.alertAndQuit("Mispelled variant name", true); }); |
26d8a01a | 104 | this.rulesContent = |
70c9745d BA |
105 | afterRawLoad( |
106 | require( | |
107 | "raw-loader!@/translations/rules/" + | |
108 | this.gameRef.vname + "/" + this.st.lang + ".pug" | |
8b3b2151 | 109 | ).default |
70c9745d | 110 | ).replace(/(fen:)([^:]*):/g, replaceByDiag); |
26d8a01a | 111 | }, |
7ba4a5bc | 112 | loadGame: function(orientation) { |
652f40de | 113 | this.game.vname = this.gameRef.vname; |
b1e46b33 | 114 | this.game.fenStart = this.gameRef.fen; |
652f40de | 115 | this.game.fen = this.gameRef.fen; |
0234201f | 116 | this.game.score = "*"; //never change |
5157ce0b BA |
117 | this.curFen = this.game.fen; |
118 | this.adjustFenSize(); | |
7ba4a5bc | 119 | this.game.mycolor = orientation || V.ParseFen(this.gameRef.fen).turn; |
b1e46b33 | 120 | this.$refs["basegame"].re_setVariables(this.game); |
7f3484bd | 121 | }, |
8055eabd BA |
122 | // Triggered by "fenchange" emitted in BaseGame: |
123 | setFen: function(fen) { | |
124 | this.curFen = fen; | |
125 | this.adjustFenSize(); | |
126 | }, | |
5157ce0b BA |
127 | adjustFenSize: function() { |
128 | let fenInput = document.getElementById("fen"); | |
d54f6261 | 129 | fenInput.style.width = (this.curFen.length+3) + "ch"; |
5157ce0b | 130 | }, |
725da57f | 131 | tryGotoFen: function() { |
3a2a7b5f | 132 | if (V.IsGoodFen(this.curFen)) { |
725da57f BA |
133 | this.gameRef.fen = this.curFen; |
134 | this.loadGame(); | |
135 | } | |
6808d7a1 BA |
136 | } |
137 | } | |
7f3484bd BA |
138 | }; |
139 | </script> | |
d54f6261 | 140 | |
26d8a01a BA |
141 | <style lang="sass"> |
142 | @import "@/styles/_board_squares_img.sass" | |
143 | @import "@/styles/_rules.sass" | |
144 | </style> | |
145 | ||
146 | <style lang="sass" scoped> | |
1c15969e BA |
147 | a#variantNameInAnalyze |
148 | color: var(--card-fore-color) | |
26d8a01a | 149 | text-align: center |
26d8a01a | 150 | font-weight: bold |
1c15969e BA |
151 | font-size: calc(1rem * var(--heading-ratio)) |
152 | line-height: 1.2 | |
153 | margin: calc(1.5 * var(--universal-margin)) | |
26d8a01a BA |
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 | ||
d54f6261 BA |
166 | input#fen |
167 | // Use a Monospace font for input FEN width adjustment | |
168 | font-family: "Fira Code" | |
169 | </style> |