X-Git-Url: https://git.auder.net/?a=blobdiff_plain;ds=sidebyside;f=client%2Fclient_OLD%2Fjavascripts%2Fcomponents%2Frules.js;fp=client%2Fclient_OLD%2Fjavascripts%2Fcomponents%2Frules.js;h=0f27d5327177c9f18d664869a6b024ea09dc6c37;hb=625022fdcf750f0aff8fcd699f7e9b89730e1d10;hp=0000000000000000000000000000000000000000;hpb=b955c65b942d09d24b5c3bed0d755d4f2f8f71f1;p=vchess.git

diff --git a/client/client_OLD/javascripts/components/rules.js b/client/client_OLD/javascripts/components/rules.js
new file mode 100644
index 00000000..0f27d532
--- /dev/null
+++ b/client/client_OLD/javascripts/components/rules.js
@@ -0,0 +1,80 @@
+// Load rules on variant page
+Vue.component('my-rules', {
+	props: ["settings"],
+	data: function() {
+		return {
+			content: "",
+			display: "rules",
+			mode: "computer",
+			subMode: "", //'auto' for game CPU vs CPU
+			gameInProgress: false,
+			mycolor: "w",
+			allowMovelist: true,
+			fen: "",
+		};
+	},
+	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.name, "GET", response => {
+			let replaceByDiag = (match, p1, p2) => {
+				const args = this.parseFen(p2);
+				return getDiagram(args);
+			};
+			this.content = response.replace(/(fen:)([^:]*):/g, replaceByDiag);
+		});
+	},
+	methods: {
+		parseFen(fen) {
+			const fenParts = fen.split(" ");
+			return {
+				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();
+		},
+	},
+})