Commit | Line | Data |
---|---|---|
cf2343ce BA |
1 | <template lang="pug"> |
2 | .row | |
4473050c | 3 | .col-sm-12.col-md-10.col-md-offset-1.col-lg-8.col-lg-offset-2 |
cf2343ce BA |
4 | .button-group |
5 | button(@click="display='rules'") Read the rules | |
6 | button(v-show="!gameInProgress" @click="watchComputerGame") | |
7 | | Observe a sample game | |
8 | button(v-show="!gameInProgress" @click="playAgainstComputer") | |
9 | | Beat the computer! | |
10 | button(v-show="gameInProgress" @click="stopGame") | |
11 | | Stop game | |
12 | div(v-show="display=='rules'" v-html="content" class="section-content") | |
c75838d9 | 13 | Game(v-show="display=='computer'" :gid-or-fen="fen" |
24340cae | 14 | :mode="mode" :sub-mode="subMode" :variant="variant" |
cf2343ce BA |
15 | @computer-think="gameInProgress=false" @game-over="stopGame") |
16 | </template> | |
17 | ||
18 | <script> | |
19 | import Game from "@/components/Game.vue"; | |
20 | import { store } from "@/store"; | |
e2732923 | 21 | import { getDiagram } from "@/utils/printDiagram"; |
cf2343ce BA |
22 | export default { |
23 | name: 'my-rules', | |
24340cae BA |
24 | components: { |
25 | Game, | |
26 | }, | |
cf2343ce BA |
27 | data: function() { |
28 | return { | |
29 | st: store.state, | |
e2732923 | 30 | variant: {id: 0, name: "Unknown"}, //...yet |
cf2343ce BA |
31 | content: "", |
32 | display: "rules", | |
33 | mode: "computer", | |
34 | subMode: "", //'auto' for game CPU vs CPU | |
35 | gameInProgress: false, | |
36 | mycolor: "w", | |
37 | fen: "", | |
38 | }; | |
39 | }, | |
e2732923 BA |
40 | mounted: async function() { |
41 | // NOTE: variant cannot be set before store is initialized | |
24340cae | 42 | const vname = this.$route.params["vname"]; |
e2732923 BA |
43 | //const idxOfVar = this.st.variants.indexOf(e => e.name == vname); |
44 | //this.variant = this.st.variants[idxOfVar]; //TODO: is it the right timing?! | |
45 | this.variant.name = vname; | |
46 | const vModule = await import("@/variants/" + vname + ".js"); | |
47 | window.V = vModule.VariantRules; | |
cf2343ce BA |
48 | // Method to replace diagrams in loaded HTML |
49 | const replaceByDiag = (match, p1, p2) => { | |
50 | const args = this.parseFen(p2); | |
51 | return getDiagram(args); | |
52 | }; | |
53 | // (AJAX) Request to get rules content (plain text, HTML) | |
4473050c BA |
54 | // TODO: find a way to have Diagram(er) as a component, |
55 | // thus allowing images import through require(), handled by Webpack | |
56 | // ==> the rules files should be less static | |
cf2343ce | 57 | this.content = |
c75838d9 | 58 | // TODO: why doesn't this work? require("raw-loader!pug-plain-loader!@/rules/"...) |
e2732923 | 59 | require("raw-loader!@/rules/" + vname + "/" + this.st.lang + ".pug") |
cf2343ce BA |
60 | .replace(/(fen:)([^:]*):/g, replaceByDiag); |
61 | }, | |
62 | methods: { | |
63 | parseFen(fen) { | |
64 | const fenParts = fen.split(" "); | |
65 | return { | |
66 | position: fenParts[0], | |
67 | marks: fenParts[1], | |
68 | orientation: fenParts[2], | |
69 | shadow: fenParts[3], | |
70 | }; | |
71 | }, | |
72 | startGame: function() { | |
73 | if (this.gameInProgress) | |
74 | return; | |
75 | this.gameInProgress = true; | |
76 | this.mode = "computer"; | |
77 | this.display = "computer"; | |
78 | this.fen = V.GenRandInitFen(); | |
79 | }, | |
80 | stopGame: function() { | |
81 | this.gameInProgress = false; | |
82 | this.mode = "analyze"; | |
83 | }, | |
84 | playAgainstComputer: function() { | |
85 | this.subMode = ""; | |
86 | this.startGame(); | |
87 | }, | |
88 | watchComputerGame: function() { | |
89 | this.subMode = "auto"; | |
90 | this.startGame(); | |
91 | }, | |
92 | }, | |
93 | }; | |
94 | </script> |