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

diff --git a/public/javascripts/components/rules.js b/public/javascripts/components/rules.js
index fd05d44d..e9df1ecc 100644
--- a/public/javascripts/components/rules.js
+++ b/public/javascripts/components/rules.js
@@ -1,71 +1,58 @@
 // 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: "",
+		};
 	},
-	template: `<div v-html="content" class="section-content"></div>`,
+	
+	// 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()">
+					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() {
 		// AJAX request to get rules content (plain text, HTML)
-		let xhr = new XMLHttpRequest();
-		let self = this;
-		xhr.onreadystatechange = function() {
-			if (this.readyState == 4 && this.status == 200)
-			{
-				let replaceByDiag = (match, p1, p2) => { return self.drawDiag(p2); };
-				self.content = xhr.responseText.replace(/(fen:)([^:]*):/g, replaceByDiag);
-			}
-		};
-		xhr.open("GET", "/rules/" + variant, true);
-		xhr.setRequestHeader('X-Requested-With', "XMLHttpRequest");
-		xhr.send();
+		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: {
-		drawDiag: function(fen) {
-			let [sizeX,sizeY] = VariantRules.size;
-			let fenParts = fen.split(" ");
-			// Obtain array of pieces images names
-			let board = VariantRules.GetBoard(fenParts[0]);
-			let orientation = "w";
-			if (fenParts.length >= 2)
-				orientation = fenParts[1];
-			let markArray = [];
-			if (fenParts.length >= 3)
-			{
-				let marks_str = fenParts[2];
-				// Turn (human) marks into coordinates
-				markArray = doubleArray(sizeX, sizeY, false);
-				let marks = marks_str.split(",");
-				for (let i=0; i<marks.length; i++)
-				{
-					var res = /^([a-z]+)([0-9]+)$/i.exec(marks[i]);
-					let x = sizeX - parseInt(res[2]); //white at bottom, so counting is reversed
-					let y = res[1].charCodeAt(0)-97; //always one char: max 26, big enough
-					markArray[x][y] = true;
-				}
-			}
-			let boardDiv = "";
-			let [startX,startY,inc] = orientation == 'w'
-				? [0, 0, 1]
-				: [sizeX-1, sizeY-1, -1];
-			for (let i=startX; i>=0 && i<sizeX; i+=inc)
-			{
-				boardDiv += "<div class='row'>";
-				for (let j=startY; j>=0 && j<sizeY; j+=inc)
-				{
-					boardDiv += "<div class='board board" + sizeY + " " +
-						((i+j)%2==0 ? "light-square-diag" : "dark-square-diag") + "'>";
-					if (markArray.length>0 && markArray[i][j])
-						boardDiv += "<img src='/images/mark.svg' class='markSquare'/>";
-					if (board[i][j] != VariantRules.EMPTY)
-					{
-						boardDiv += "<img src='/images/pieces/" +
-							VariantRules.getPpath(board[i][j]) + ".svg' class='piece'/>";
-					}
-					boardDiv += "</div>";
-				}
-				boardDiv += "</div>";
-			}
-			return boardDiv;
+		parseFen(fen) {
+			const fenParts = fen.split(" ");
+			return {
+				position: fenParts[0],
+				marks: fenParts[1],
+				orientation: fenParts[2],
+				shadow: fenParts[3],
+			};
+		},
+		startComputerGame: function() {
+			this.fen = V.GenRandInitFen();
+			this.display = "computer";
 		},
 	},
 })