Fix self crossing cell

index.html

@@ -160,7 +160,7 @@
 	const whole_path = [
 		'br', 'h', 'h', 'bl',
 		'tl', 'br', 'h', 'tl',
-		'br', 'c', 'bl', 'br',
+		'br',       'bl', 'br',
 		'tr', 'tl', 'tr', 'tl',
 	];
 
@@ -169,6 +169,8 @@
 		.sort((a, b) => a.sort - b.sort)
 		.map(({ value }) => value);
 
+	const fixedGridId = 9;
+
     // Create 16 grid cells
     for (let i = 0; i < 16; i++) {
         const cell = document.createElement("div");
@@ -181,9 +183,14 @@
             }
         });
     }
+
+    const fixedSquare = document.createElement("div");
+    fixedSquare.classList.add("square", "fixed");
+    fixedSquare.innerHTML = `<svg viewBox="0 0 100 100">${paths['c']}</svg>`;
+    grid.children[fixedGridId].appendChild(fixedSquare); // Place in cell 0
 
-    // Create 16 selectable squares
-    for (let i = 0; i < 16; i++) {
+    // Create 15 selectable squares
+    for (let i = 0; i < 15; i++) {
         const square = document.createElement("div");
         square.classList.add("square");
         square.textContent = i + 1;
@@ -208,21 +215,21 @@
         square.classList.add("selected");
     }
 
-function moveSquareToCell(square, cell) {
-    // Only move if the cell is empty
-    if (!cell.firstChild) {
-        square.classList.remove("selected"); // Remove selection
-        selectedSquare = null;
-
-        // Move square to cell
-        cell.appendChild(square);
-
-        // Reset styles for proper display inside the grid
-        square.style.position = "relative";
-        square.style.left = "0";
-        square.style.top = "0";
-    }
-}
+	function moveSquareToCell(square, cell) {
+		// Only move if the cell is empty
+		if (!cell.firstChild) {
+			square.classList.remove("selected"); // Remove selection
+			selectedSquare = null;
+
+			// Move square to cell
+			cell.appendChild(square);
+
+			// Reset styles for proper display inside the grid
+			square.style.position = "relative";
+			square.style.left = "0";
+			square.style.top = "0";
+		}
+	}
 });
     </script>
 </body>