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

diff --git a/public/javascripts/components/rules.js b/public/javascripts/components/rules.js
index e9df1ecc..0f27d532 100644
--- a/public/javascripts/components/rules.js
+++ b/public/javascripts/components/rules.js
@@ -6,27 +6,33 @@ Vue.component('my-rules', {
 			content: "",
 			display: "rules",
 			mode: "computer",
+			subMode: "", //'auto' for game CPU vs CPU
+			gameInProgress: false,
 			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 class="button-group">
 				<button @click="display='rules'">
 					Read the rules
 				</button>
-				<button @click="startComputerGame()">
+				<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" :fen="fen">
+				:allow-movelist="allowMovelist" :mode="mode" :sub-mode="subMode" :fen="fen"
+				@computer-think="gameInProgress=false" @game-over="stopGame">
 			</my-game>
 		</div>
 	`,
@@ -50,9 +56,25 @@ Vue.component('my-rules', {
 				shadow: fenParts[3],
 			};
 		},
-		startComputerGame: function() {
-			this.fen = V.GenRandInitFen();
+		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();
 		},
 	},
 })