Step toward a one-page application

[vchess.git] / public / javascripts / components / rules.js

diff --git a/public/javascripts/components/rules.js b/public/javascripts/components/rules.js
index 660f0be..0f27d53 100644 (file)
--- a/public/javascripts/components/rules.js
+++ b/public/javascripts/components/rules.js
@@ -1,18 +1,50 @@
 // Load rules on variant page
 Vue.component('my-rules', {
+       props: ["settings"],
        data: function() {
-               return { content: "" };
+               return {
+                       content: "",
+                       display: "rules",
+                       mode: "computer",
+                       subMode: "", //'auto' for game CPU vs CPU
+                       gameInProgress: false,
+                       mycolor: "w",
+                       allowMovelist: true,
+                       fen: "",
+               };
        },
-       template: `<div v-html="content" class="section-content"></div>`,
+       template: `
+               <div class="col-sm-12 col-md-10 col-md-offset-1 col-lg-8 col-lg-offset-2">
+                       <div class="button-group">
+                               <button @click="display='rules'">
+                                       Read the rules
+                               </button>
+                               <button v-show="!gameInProgress" @click="watchComputerGame">
+                                       Observe a sample game
+                               </button>
+                               <button v-show="!gameInProgress" @click="playAgainstComputer">
+                                       Beat the computer!
+                               </button>
+                               <button v-show="gameInProgress" @click="stopGame">
+                                       Stop game
+                               </button>
+                       </div>
+                       <div v-show="display=='rules'" v-html="content" class="section-content"></div>
+                       <my-game v-show="display=='computer'" :mycolor="mycolor" :settings="settings"
+                               :allow-movelist="allowMovelist" :mode="mode" :sub-mode="subMode" :fen="fen"
+                               @computer-think="gameInProgress=false" @game-over="stopGame">
+                       </my-game>
+               </div>
+       `,
        mounted: function() {
                // AJAX request to get rules content (plain text, HTML)
-               ajax("/rules/" + variant, "GET", response => {
+               ajax("/rules/" + variant.name, "GET", response => {
                        let replaceByDiag = (match, p1, p2) => {
-                               const args = self.parseFen(p2);
+                               const args = this.parseFen(p2);
                                return getDiagram(args);
                        };
-                       self.content = response.replace(/(fen:)([^:]*):/g, replaceByDiag);
-               }
+                       this.content = response.replace(/(fen:)([^:]*):/g, replaceByDiag);
+               });
        },
        methods: {
                parseFen(fen) {
@@ -21,7 +53,28 @@ Vue.component('my-rules', {
                                position: fenParts[0],
                                marks: fenParts[1],
                                orientation: fenParts[2],
+                               shadow: fenParts[3],
                        };
                },
+               startGame: function() {
+                       if (this.gameInProgress)
+                               return;
+                       this.gameInProgress = true;
+                       this.mode = "computer";
+                       this.display = "computer";
+                       this.fen = V.GenRandInitFen();
+               },
+               stopGame: function() {
+                       this.gameInProgress = false;
+                       this.mode = "analyze";
+               },
+               playAgainstComputer: function() {
+                       this.subMode = "";
+                       this.startGame();
+               },
+               watchComputerGame: function() {
+                       this.subMode = "auto";
+                       this.startGame();
+               },
        },
 })