Messing with Qwebchess

Now has unicode pieces
Now doesn't actually work (although I think it didn't work before either)

[SZM]

web/qwebchess/index.html

@@ -23,4 +23,4 @@
 <small>Made By Sam Moore [SZM] and Mitchell Pomery [BG3]</small>
 </div>
 </body>
-</html>
+</html>
\ No newline at end of file

web/qwebchess/js.js

@@ -2,15 +2,24 @@
 //progcomp.ucc.asn.au/cgi-bin/qchess.cgi?r=quit
 //progcomp.ucc.asn.au/cgi-bin/qchess.cgi?x=X&y=Y (0 indexed)
 
-pieceSelected = "";
+pieceSelected = ""; // currently selected piece
 piece = "";
+colour = "W"; // colour of this player
 
+// Unicode representations of chess pieces
+pieceChar = {"W" : { "p" : "\u2659", "h" : "\u2658", "b" : "\u2657", "r" : "\u2656", "q" : "\u2655", "k" : "\u2654", "?" : "?"},
+	     "B" : { "p" : "\u265F", "h" : "\u265E", "b" : "\u265D", "r" : "\u265C", "q" : "\u265B", "k" : "\u265A", "?" : "?"}};
+
+// Select (or move) a piece
 function selectPiece(loc) {
 	x = (""+loc).charAt(1);
 	y = (""+loc).charAt(0);
 	//alert(loc);
+
+	// work out whether to select or move based on the comment tag for the clicked location
+	// It is either "<!--W-->" (white; select) or <!--B-->" (black) or "<!--0-->" (empty)
 	if (pieceSelected == "") {
-		if (document.getElementById(loc).innerHTML.charAt(0) == "W") {
+		if (document.getElementById(loc).innerHTML.charAt(4) == colour) {
 			console.log("Piece Selected: " + loc);
 			pieceSelected = loc;
 			ajaxUpdate("x=" + x + "&y=" + y);
@@ -19,8 +28,8 @@ function selectPiece(loc) {
 	else {
 		//alert("pieceMoved");
 		if (validMove(pieceSelected, piece, loc)) {
-			ajaxUpdate("x=" + x + "&y=" + y);
 			doMove(pieceSelected, loc);
+			ajaxUpdate("x=" + x + "&y=" + y);
 			pieceSelected = "";
 		}
 		else {
@@ -38,7 +47,10 @@ function doMove(start, end) {
 	end = document.getElementById(end);
 	htmlToMove = begin.innerHTML;
 	end.innerHTML = htmlToMove;
-	begin.innerHTML = "";
+	begin.innerHTML = "<!--0--> <p>&nbsp;</p>";
+
+	if (end[end.length-1] % 2 == 0)
+		end.innerHTML.replace(/<big>.*<\/big>/i, "<big>?</big>");
 	//console.log("Piece Moved");
 }
 
@@ -59,12 +71,12 @@ function boardLoad() {
 	}
 	
 	//Place pieces on the board
-	//Pawns
 	for (i = 0; i < 8; i++) {
 		black = document.getElementById("1" + i);
 		white = document.getElementById("6" + i);
-		black.innerHTML = "B<br /><small>p</small> <bold>?</bold> <small>?</small></span>";
-		white.innerHTML = "W<br /><small>p</small> <bold>?</bold> <small>?</small></span>";
+		//pawns
+		black.innerHTML = "<!--B--> " + pieceChar["B"]["p"] + " <big> <bold>?</bold> </big> ?";
+		white.innerHTML = "<!--W--> " + pieceChar["W"]["p"] + " <big> <bold>?</bold> </big> ?";
 		
 		black = document.getElementById("0" + i);
 		white = document.getElementById("7" + i);
@@ -79,9 +91,16 @@ function boardLoad() {
 			piece = "k";
 		if (i == 4)
 			piece = "q";
-		
-		black.innerHTML = "B<br /><small>" + piece + "</small> <bold>?</bold> <small>?</small>";
-		white.innerHTML = "W<br /><small>" + piece + "</small> <bold>?</bold> <small>?</small>";
+		//major pieces
+		black.innerHTML = "<!--B--> " + pieceChar["B"][piece] + "<big> <bold>?</bold> </big> ?";
+		white.innerHTML = "<!--W--> " + pieceChar["W"][piece] + "<big> <bold>?</bold> </big> ?";
+
+		// empty squares
+		for (j = 2; j < 6; j++)
+		{
+			square = document.getElementById(""+j + i);
+			square.innerHTML = "<!--0--> <p>&nbsp;</p>";
+		}
 	}
 	
 	setTimeout(function(){ajaxUpdate("r=start");}, 1000);
@@ -112,11 +131,44 @@ function ajaxUpdate(queryString) {
 	//alert(queryString);
 	
 	// Create a function that will receive data sent from the server
-	ajaxRequest.onreadystatechange = function () {
+	ajaxRequest.onreadystatechange = function () 
+	{
 		//alert("RS" + ajaxRequest.readyState);
 		if (ajaxRequest.readyState == 4) {
 			console.log("AJAX Response: " + ajaxRequest.responseText);
-			ret = ""+ajaxRequest.responseText;
+			lines = ajaxRequest.responseText.split("\n");
+
+			for (var i = 0; i < lines.length; ++i)
+			{
+				tokens = lines[i].split(" ")
+
+				if (isNaN(tokens[0]) || isNaN(tokens[1]))
+					continue;
+
+				pieceSelected = ""+tokens[1]+""+tokens[0];
+                                square = document.getElementById(pieceSelected);
+                                html = square.innerHTML;
+				c = html.charAt(4);
+				if (tokens[2] == "->" && document.getElementById(""+tokens[4] + "" + tokens[3]).innerHTML.charAt(4) != colour)
+				{
+					doMove(""+tokens[1] + "" + tokens[0], ""+tokens[4] + "" + tokens[3]);
+				}
+				else if (tokens.length == 4 && !isNaN(tokens[0]) && !isNaN(tokens[1]) && !isNaN(tokens[2]) && isNaN(tokens[3]))
+				{
+					piece = tokens[3];
+					if (piece == "knight") //HACK
+						piece = "h";	
+					else
+						piece = ""+piece.charAt(0);
+					if (tokens[2] == "1")
+						html[html.length-1] = pieceChar[c][piece];
+
+					square.innerHTML = html.replace(/<big> <bold>.*<\/bold> <\/big>/i, "<big> <bold>"+pieceChar[c][piece]+"</bold> </big>");	
+					console.log("innerHTML = " + square.innerHTML);
+				}
+			}
+
+			/*
 			if (ret.charAt(4) == "-" && ret.charAt(5) == ">") {
 				//Piece has been moved
 				//console.log("Moving other piece");
@@ -155,7 +207,7 @@ function ajaxUpdate(queryString) {
 					content.innerHTML = contentHTML;
 				}
 			}
-			
+			*/
 			//alert(ret);
 		}
 	}
@@ -177,4 +229,4 @@ function ajaxUpdate(queryString) {
 function replaceAt(s, n, t) {
 	//console.log(s.substring(0, n) + "\n" + t + "\n" + s.substring(n + 1) + "\n");
 	return (s.substring(0, n) + t + s.substring(n + 1));
-}
+}
\ No newline at end of file