cleaner flipping

20_utils.js

@@ -203,3 +203,14 @@ function EventPathN(event, prefix) {
 
 	return n;
 }
+
+function SwapElements(obj1, obj2) {
+
+	// https://stackoverflow.com/questions/10716986/swap-2-html-elements-and-preserve-event-listeners-on-them
+
+    var temp = document.createElement("div");
+    obj1.parentNode.insertBefore(temp, obj1);
+    obj2.parentNode.insertBefore(obj1, obj2);
+    temp.parentNode.insertBefore(obj2, temp);
+    temp.parentNode.removeChild(temp);
+}

95_renderer.js

@@ -451,34 +451,22 @@ function NewRenderer() {
 
 	renderer.toggle_flip = function() {				// config.flip should not be directly set, call this function instead.
 
-		let active_square = this.active_square;		// Save and clear this for now.
-		this.set_active_square(null);
-
 		config.flip = !config.flip;
 
-		// Set all the ids to a temporary value so they can always have unique ids...
-
 		for (let x = 0; x < 8; x++) {
-			for (let y = 0; y < 8; y++) {
-				let underlay_element = document.getElementById("underlay_" + S(x, y));
-				let overlay_element = document.getElementById("overlay_" + S(x, y));
-				underlay_element.id = "underlay_tmp_" + S(x, y);
-				overlay_element.id = "overlay_tmp_" + S(x, y);
-			}
-		}
+			for (let y = 0; y < 4; y++) {
 
-		for (let x = 0; x < 8; x++) {
-			for (let y = 0; y < 8; y++) {
-				let underlay_element = document.getElementById("underlay_tmp_" + S(x, y));
-				let overlay_element = document.getElementById("overlay_tmp_" + S(x, y));
-				underlay_element.id = "underlay_" + S(7 - x, 7 - y);
-				overlay_element.id = "overlay_" + S(7 - x, 7 - y);
+				let first = document.getElementById(`overlay_${S(x, y)}`);
+				let second = document.getElementById(`overlay_${S(7 - x, 7 - y)}`);
+				SwapElements(first, second);
+
+				first = document.getElementById(`underlay_${S(x, y)}`);
+				second = document.getElementById(`underlay_${S(7 - x, 7 - y)}`);
+				SwapElements(first, second);
 			}
 		}
 
-		this.set_active_square(active_square);		// Put it back.
-		this.friendly_draws = New2DArray(8, 8);		// Everything needs drawn.
-		this.draw();
+		this.draw();								// For the canvas stuff.
 	};
 
 	renderer.escape = function() {					// Set things into a clean state.

99_start.js

@@ -22,6 +22,10 @@ boardfriends.height = canvas.height = boardsquares.height = config.board_size;
 boardfriends.style.left = canvas.style.left = boardsquares.offsetLeft.toString() + "px";
 boardfriends.style.top = canvas.style.top = boardsquares.offsetTop.toString() + "px";
 
+// Set up the squares in both tables. Note that, upon flips, the elements
+// themselves are moved to their new position, so everything works, e.g.
+// the x and y values are still correct for the flipped view.
+
 for (let y = 0; y < 8; y++) {
 	let tr1 = document.createElement("tr");
 	let tr2 = document.createElement("tr");
@@ -30,8 +34,8 @@ for (let y = 0; y < 8; y++) {
 	for (let x = 0; x < 8; x++) {
 		let td1 = document.createElement("td");
 		let td2 = document.createElement("td");
-		td1.id = "underlay_" + S(x, y);						// Upon flips, these
-		td2.id = "overlay_" + S(x, y);						// get changed live.
+		td1.id = "underlay_" + S(x, y);
+		td2.id = "overlay_" + S(x, y);
 		td1.width = td2.width = config.square_size;
 		td1.height = td2.height = config.square_size;
 		if ((x + y) % 2 === 0) {
@@ -42,10 +46,8 @@ for (let y = 0; y < 8; y++) {
 		tr1.appendChild(td1);
 		tr2.appendChild(td2);
 		td2.addEventListener("dragstart", (event) => {
-			let actualx = config.flip ? 7 - x : x;
-			let actualy = config.flip ? 7 - y : y;
-			hub.set_active_square(Point(actualx, actualy));
-			event.dataTransfer.setData("text", "overlay_" + S(actualx, actualy));	// td2.id is something like "overlay_e4", could use that.
+			hub.set_active_square(Point(x, y));
+			event.dataTransfer.setData("text", "overlay_" + S(x, y));
 		});
 	}
 }