X-Git-Url: https://git.auder.net/?p=vchess.git;a=blobdiff_plain;f=public%2Fjavascripts%2Fcomponents%2Frules.js;h=e9df1ecc0c0a1699d5d00c32beb4b8b8fb5c5a9f;hp=02d3a0ca40ad7123db0e715f344c88a10db7b104;hb=582df3497b0f91dd4b645386a059eac9e98da1bb;hpb=59d58d7da742c937bca80c2102c2e72cc7d6e840

diff --git a/public/javascripts/components/rules.js b/public/javascripts/components/rules.js
index 02d3a0ca..e9df1ecc 100644
--- 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";
+		},
 	},
 })