TODO: where to put template: in views/ or components/?
[vchess.git] / client / client_OLD / javascripts / components / rules.js
CommitLineData
92342261 1// Load rules on variant page
1d184b4c 2Vue.component('my-rules', {
582df349 3 props: ["settings"],
1d184b4c 4 data: function() {
582df349
BA
5 return {
6 content: "",
7 display: "rules",
8 mode: "computer",
d337a94c
BA
9 subMode: "", //'auto' for game CPU vs CPU
10 gameInProgress: false,
582df349
BA
11 mycolor: "w",
12 allowMovelist: true,
13 fen: "",
14 };
1d184b4c 15 },
a5d56686
BA
16 template: `
17 <div class="col-sm-12 col-md-10 col-md-offset-1 col-lg-8 col-lg-offset-2">
582df349
BA
18 <div class="button-group">
19 <button @click="display='rules'">
20 Read the rules
21 </button>
d337a94c
BA
22 <button v-show="!gameInProgress" @click="watchComputerGame">
23 Observe a sample game
24 </button>
25 <button v-show="!gameInProgress" @click="playAgainstComputer">
582df349
BA
26 Beat the computer!
27 </button>
d337a94c
BA
28 <button v-show="gameInProgress" @click="stopGame">
29 Stop game
30 </button>
582df349
BA
31 </div>
32 <div v-show="display=='rules'" v-html="content" class="section-content"></div>
33 <my-game v-show="display=='computer'" :mycolor="mycolor" :settings="settings"
d337a94c
BA
34 :allow-movelist="allowMovelist" :mode="mode" :sub-mode="subMode" :fen="fen"
35 @computer-think="gameInProgress=false" @game-over="stopGame">
582df349 36 </my-game>
a5d56686
BA
37 </div>
38 `,
1d184b4c
BA
39 mounted: function() {
40 // AJAX request to get rules content (plain text, HTML)
8d7e2786 41 ajax("/rules/" + variant.name, "GET", response => {
da06a6eb 42 let replaceByDiag = (match, p1, p2) => {
7931e479 43 const args = this.parseFen(p2);
da06a6eb
BA
44 return getDiagram(args);
45 };
7931e479
BA
46 this.content = response.replace(/(fen:)([^:]*):/g, replaceByDiag);
47 });
1d184b4c
BA
48 },
49 methods: {
da06a6eb
BA
50 parseFen(fen) {
51 const fenParts = fen.split(" ");
52 return {
53 position: fenParts[0],
54 marks: fenParts[1],
55 orientation: fenParts[2],
5915f720 56 shadow: fenParts[3],
da06a6eb 57 };
1d184b4c 58 },
d337a94c
BA
59 startGame: function() {
60 if (this.gameInProgress)
61 return;
62 this.gameInProgress = true;
63 this.mode = "computer";
582df349 64 this.display = "computer";
d337a94c
BA
65 this.fen = V.GenRandInitFen();
66 },
67 stopGame: function() {
68 this.gameInProgress = false;
69 this.mode = "analyze";
70 },
71 playAgainstComputer: function() {
72 this.subMode = "";
73 this.startGame();
74 },
75 watchComputerGame: function() {
76 this.subMode = "auto";
77 this.startGame();
582df349 78 },
1d184b4c
BA
79 },
80})