Computer mode in rules section almost OK

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

diff --git a/public/javascripts/components/rules.js b/public/javascripts/components/rules.js
index 02d3a0c..e9df1ec 100644 (file)
--- a/public/javascripts/components/rules.js
+++ b/public/javascripts/components/rules.js
@@ -1,11 +1,33 @@
 // Load rules on variant page
 Vue.component('my-rules', {
+       props: ["settings"],
        data: function() {
-               return { content: "" };
+               return {
+                       content: "",
+                       display: "rules",
+                       mode: "computer",
+                       mycolor: "w",
+                       allowMovelist: true,
+                       fen: "",
+               };
        },
+       
+       // TODO: third button "see a sample game" (comp VS comp)
+       
        template: `
                <div class="col-sm-12 col-md-10 col-md-offset-1 col-lg-8 col-lg-offset-2">
-                       <div v-html="content" class="section-content"></div>
+                       <div class="button-group">
+                               <button @click="display='rules'">
+                                       Read the rules
+                               </button>
+                               <button @click="startComputerGame()">
+                                       Beat the computer!
+                               </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" :fen="fen">
+                       </my-game>
                </div>
        `,
        mounted: function() {
@@ -28,5 +50,9 @@ Vue.component('my-rules', {
                                shadow: fenParts[3],
                        };
                },
+               startComputerGame: function() {
+                       this.fen = V.GenRandInitFen();
+                       this.display = "computer";
+               },
        },
 })