Remove letters from the rack when placing along with a big refactoring

1 files changed, 102 insertions, 103 deletions

diff --git a/index.js b/index.js
index ef244ae..cf2d7cb 100644
--- a/index.js
+++ b/index.js
@@ -1,6 +1,6 @@
 "use strict";
 
-var CW = function(){
+let CW = function(){
 	//   0 point : blanches × 2.
 	//   1 point : E ×15, A ×9, I ×8, N ×6, O ×6, R ×6, S ×6, T ×6, U ×6, L ×5
 	//   2 points : D ×3, G ×2, M ×3
@@ -8,7 +8,7 @@ var CW = function(){
 	//   4 points : F ×2, H ×2, V ×2
 	//   8 points : J ×1, Q ×1
 	//   10 points : K ×1, W ×1, X ×1, Y ×1, Z ×1
-	var letters = [
+	let letters = [
 		" ", " ",
 		"E", "E", "E", "E", "E", "E", "E", "E", "E", "E", "E", "E", "E", "E", "E",
 		"A", "A", "A", "A", "A", "A", "A", "A", "A",
@@ -40,32 +40,18 @@ var CW = function(){
 		J:8, Q:8,
 		K:10, W:10, X:10, Y:10, Z:10
 	};
-	var cursor = undefined;
-	var placed = [];
+	let cursor = undefined;
+	let placed = [];
 
 	function makeBoardTileOnCLick(x, y) {
 		return function() {
-			var me = document.getElementById(["s", y, "_", x].join(""));
-			var dst = undefined;
-			var l = me.innerHTML;
-			var n;
-			if (l === "") {
+			let me = document.getElementById(["s", y, "_", x].join(""));
+			if (me.innerHTML === "") {
 				moveCursor(x, y);
 			} else if (me.classList.contains("placed")) {
-				for(n=placed.length-1; n>=0; n--) {
-					if (placed[n].x === x && placed[n].y === y) {
-						break;
-					}
-				}
-				// return the placed letter to the rack
-				dst = document.getElementById(["l", placed[n].index].join(""));
-				dst.classList.remove("placed");
-				// simply remove from the board
-				me.innerHTML = "";
-				me.classList.remove("placed");
-				me.classList.remove("letter");
-				placed.splice(n, 1);
+				moveFromBoardToRack(x, y, me);
 			} else if (cursor !== undefined && cursor.x == x && cursor.y == y) {
+				// if we just clicked the cursor, swap its direction
 				if (cursor.direction === "right") {
 					cursor.direction = "down";
 					me.innerHTML = "▼";
@@ -76,102 +62,113 @@ var CW = function(){
 			}
 		};
 	}
-
 	function makeRackTileOnClick(i) {
 		return function() {
-			var n = 0;
-			var me = document.getElementById(["l", i].join(""));
-			var dst = undefined;
-			if (me.classList.contains("placed")) {
-				// we return the letter to the rack
-				for(n=placed.length-1; n>=0; n--) {
-					if (placed[n].index === i) {
-						break;
-					}
-				}
-				dst = document.getElementById(["s", placed[n].y, "_", placed[n].x].join(""));
-				dst.innerHTML = "";
-				dst.classList.remove("letter");
-				dst.classList.remove("placed");
-				me.classList.remove("placed");
-				moveCursor(placed[n].x, placed[n].y);
-				// clean the placed array
-				placed.splice(n, 1);
-			} else {
-				if (cursor !== undefined) {
-					// Place the letter on the cursor's position
-					dst = document.getElementById(["s", cursor.y, "_", cursor.x].join(""));
-					dst.innerHTML = me.innerHTML;
-					dst.classList.add("letter");
-					dst.classList.add("placed");
-					me.classList.add("placed");
-					placed.push({x: cursor.x, y: cursor.y, index:i, letter: me.innerHTML});
-					// Move the cursor if possible
-					while(cursor.x < 15 && cursor.y < 15) {
-						if (cursor.direction === "right") {
-							cursor.x++;
-						} else {
-							cursor.y++;
-						}
-						dst = document.getElementById(["s", cursor.y, "_", cursor.x].join(""));
-						if (dst === null || dst.innerHTML === "") {
-							break;
-						}
-					}
-					if (cursor.x >= 15 || cursor.y >= 15) {
-						cursor = undefined;
-					} else {
-						if (cursor.direction === "right") {
-							dst.innerHTML = "▶";
-						} else {
-							dst.innerHTML = "▼";
-						}
-					}
+			if (cursor !== undefined) {
+				let me = document.getElementById(["l", i].join(""));
+				if (me.innerHTML != "") {
+					moveFromRackToBoard(me, cursor.x, cursor.y);
 				}
 			}
 		};
 	}
 
 	function moveCursor(x, y) {
-		var me = document.getElementById(["s", y, "_", x].join(""));
-		var dst = undefined;
 		if (cursor === undefined) {
+			// No previous cursor, just set the new position
 			cursor = { x: x, y: y};
 		} else {
-			// Move the cursor
-			dst = document.getElementById(["s", cursor.y, "_", cursor.x].join(""));
-			dst.innerHTML = "";
+			// Remove the cursor from its former position
+			let src = document.getElementById(["s", cursor.y, "_", cursor.x].join(""));
+			src.innerHTML = "";
 			cursor.x = x;
 			cursor.y = y;
 		}
 		// try to guess word direction if several letters are already placed
+		let dst = document.getElementById(["s", y, "_", x].join(""));
 		if (placed.length >= 2 && placed[0].x === placed[1].x) {
 			cursor.direction = "down";
-			me.innerHTML = "▼";
+			dst.innerHTML = "▼";
 		} else {
 			cursor.direction = "right";
-			me.innerHTML = "▶";
+			dst.innerHTML = "▶";
+		}
+	}
+	function moveCursorForwardIfPossible() {
+		while(cursor.x < 15 && cursor.y < 15) {
+			if (cursor.direction === "right") {
+				cursor.x++;
+			} else {
+				cursor.y++;
+			}
+			if (cursor.x >= 15 || cursor.y >= 15) {
+				cursor = undefined;
+				return;
+			}
+			let dst = document.getElementById(["s", cursor.y, "_", cursor.x].join(""));
+			if (dst.innerHTML === "") {
+				if (cursor.direction === "right") {
+					dst.innerHTML = "▶";
+				} else {
+					dst.innerHTML = "▼";
+				}
+				return;
+			}
 		}
 	}
 
+	function moveFromBoardToRack(x, y, src) {
+		// Find the letter in the placed array
+		let n = undefined;
+		for(n=placed.length-1; n>=0; n--) {
+			if (placed[n].x === x && placed[n].y === y) {
+				break;
+			}
+		}
+		// Find a free spot on the rack
+		let i = 0;
+		let dst = undefined;
+		do {
+			dst = document.getElementById(["l", i].join(""));
+			if (dst.innerHTML == "")
+				break;
+			i++;
+		} while (i<7);
+		// Move the board letter to the rack
+		dst.innerHTML = src.innerHTML;
+		dst.classList.add("letter");
+		src.classList.remove("letter");
+		src.classList.remove("placed");
+		// Place the cursor in the freed spot
+		moveCursor(x, y);
+		// Remove the letter from the placed array
+		placed.splice(n, 1);
+	}
+
+	function moveFromRackToBoard(src, x, y) {
+		let dst = document.getElementById(["s", y, "_", x].join(""));
+		dst.innerHTML = src.innerHTML;
+		dst.classList.add("letter");
+		dst.classList.add("placed");
+		src.classList.remove("letter");
+		src.innerHTML = "";
+		placed.push({x: cursor.x, y: cursor.y, letter: src.innerHTML});
+		moveCursorForwardIfPossible();
+	}
+
 	return {
 		init: function() {
-			var elt = undefined;
-			var idx = undefined;
-			var letter;
-			var x = 0;
-			var y = 0;
 			// populate the board
-			for (y=0; y<CWDATA.board.length; y++) {
+			for (let y=0; y<CWDATA.board.length; y++) {
 				const line = CWDATA.board[y];
-				for(x=0; x<line.length; x++) {
-					letter = line[x];
-					elt = document.getElementById(["s", y, "_", x].join(""));
+				for(let x=0; x<line.length; x++) {
+					let letter = line[x];
+					let elt = document.getElementById(["s", y, "_", x].join(""));
 					if (letter !== "") {
 						elt.className = "letter";
 						elt.innerHTML = [letter, "<div class=\"points\">", points[letter], "</div>"].join("");
 						// we also remove the letter from the pool
-						idx = letters.findIndex(function(elt) { return elt === letter; });
+						let idx = letters.findIndex(function(elt) { return elt === letter; });
 						if (idx != -1) {
 							letters.splice(idx, 1);
 						}
@@ -180,26 +177,28 @@ var CW = function(){
 				}
 			}
 			// populate the rack
-			for (x=0; x<CWDATA.letters.length; x++) {
-				letter = CWDATA.letters[x];
-				elt = document.getElementById(["l", x].join(""));
-				elt.className = "letter";
-				elt.innerHTML = [letter, '<div class="points">', points[letter], "</div>"].join("");
-				elt.onclick = makeRackTileOnClick(x);
-				// we also remove the letter from the pool
-				idx = letters.findIndex(function(elt) { return elt === letter; });
-				if (idx != -1) {
-					letters.splice(idx, 1);
+			for (let x=0; x<8; x++) {
+				let letter = CWDATA.letters[x];
+				let elt = document.getElementById(["l", x].join(""));
+				if (letter !== undefined) {
+					elt.className = "letter";
+					elt.innerHTML = [letter, "<div class=\"points\">", points[letter], "</div>"].join("");
+					// we remove the letter from the pool
+					let idx = letters.findIndex(function(elt) { return elt === letter; });
+					if (idx != -1) {
+						letters.splice(idx, 1);
+					}
 				}
+				elt.onclick = makeRackTileOnClick(x);
 			}
 			// initialize buttons
 			document.getElementById("validate").disabled = true;
 			// populate remaining letters
-			var letters_left = [ "Lettres restantes: ", letters.length, "<br>" ];
-			var prev = undefined;
-			y = 1;
-			for (x=0; x<letters.length; x++) {
-				letter = letters[x];
+			let letters_left = [ "Lettres restantes: ", letters.length, "<br>" ];
+			let prev = undefined;
+			let y = 1;
+			for (let x=0; x<letters.length; x++) {
+				let letter = letters[x];
 				if (prev === undefined) {
 					prev = letter;
 				}