Reactivate game component, think about web(pack) worker
[vchess.git] / client / src / views / Rules.vue
CommitLineData
cf2343ce
BA
1<template lang="pug">
2.row
3 .col-sm-12 col-md-10 col-md-offset-1 col-lg-8 col-lg-offset-2
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")
24340cae
BA
13 Game(v-show="display=='computer'" :mycolor="mycolor" :gid-or-fen="fen"
14 :mode="mode" :sub-mode="subMode" :variant="variant"
cf2343ce
BA
15 @computer-think="gameInProgress=false" @game-over="stopGame")
16</template>
17
18<script>
19import Game from "@/components/Game.vue";
20import { store } from "@/store";
21export default {
22 name: 'my-rules',
24340cae
BA
23 components: {
24 Game,
25 },
cf2343ce
BA
26 data: function() {
27 return {
28 st: store.state,
24340cae 29 variant: null,
cf2343ce
BA
30 content: "",
31 display: "rules",
32 mode: "computer",
33 subMode: "", //'auto' for game CPU vs CPU
34 gameInProgress: false,
35 mycolor: "w",
36 fen: "",
37 };
38 },
24340cae
BA
39 created: function() {
40 const vname = this.$route.params["vname"];
41 const idxOfVar = this.st.variants.indexOf(e => e.name == vname);
42 this.variant = this.st.variants[idxOfVar];
43 },
cf2343ce
BA
44 mounted: function() {
45 // Method to replace diagrams in loaded HTML
46 const replaceByDiag = (match, p1, p2) => {
47 const args = this.parseFen(p2);
48 return getDiagram(args);
49 };
50 // (AJAX) Request to get rules content (plain text, HTML)
51 this.content =
52 require("raw-loader!pug-plain-loader!@/rules/" +
53 this.$route.params["vname"] + "/" + this.st.lang + ".pug")
54 .replace(/(fen:)([^:]*):/g, replaceByDiag);
55 },
56 methods: {
57 parseFen(fen) {
58 const fenParts = fen.split(" ");
59 return {
60 position: fenParts[0],
61 marks: fenParts[1],
62 orientation: fenParts[2],
63 shadow: fenParts[3],
64 };
65 },
66 startGame: function() {
67 if (this.gameInProgress)
68 return;
69 this.gameInProgress = true;
70 this.mode = "computer";
71 this.display = "computer";
72 this.fen = V.GenRandInitFen();
73 },
74 stopGame: function() {
75 this.gameInProgress = false;
76 this.mode = "analyze";
77 },
78 playAgainstComputer: function() {
79 this.subMode = "";
80 this.startGame();
81 },
82 watchComputerGame: function() {
83 this.subMode = "auto";
84 this.startGame();
85 },
86 },
87};
88</script>