variousi mprovements

3 files changed, 22 insertions, 5 deletions

diff --git a/TODO.txt b/TODO.txt
index ccadee5..b329a91 100644
--- a/TODO.txt
+++ b/TODO.txt
@@ -1,5 +1,4 @@
+- single player mode with no server
 - limit number of playres connected to a game (prevent contention)
 - congratualations
-- move all connected components to top
 - link to source image
-- increase sensitivity
diff --git a/game.js b/game.js
index 5ad887e..6c3309b 100644
--- a/game.js
+++ b/game.js
@@ -12,10 +12,10 @@ window.addEventListener('load', function () {
 	const solveAudio = getById("solve-audio");
 	const joinPuzzle = searchParams.get('join');
 	let solved = false;
-	const connectRadius = 5;
+	const connectRadius = 10;
 	let pieceZIndexCounter = 1;
 	let draggingPiece = null;
-	let nibSize = 24;
+	let nibSize;
 	let pieceWidth;
 	let pieceHeight;
 	let receivedAck = true;
@@ -90,7 +90,16 @@ window.addEventListener('load', function () {
 	}
 	function connectPieces(piece1, piece2) {
 		if (piece1.connectedComponent === piece2.connectedComponent) return false;
+		if (piece1.connectedComponent.length < piece2.connectedComponent.length) {
+			// always connect the smaller component to the larger component
+			return connectPieces(piece2, piece1);
+		}
 		piece1.connectedComponent.push(...piece2.connectedComponent);
+		const maxZIndex = Math.max(...piece1.connectedComponent.map((x) => parseInt(x.element.style.zIndex)));
+		for (const piece of piece1.connectedComponent) {
+			// update z-index to max in connected component
+			piece.element.style.zIndex = maxZIndex;
+		}
 		let piece1Col = piece1.col();
 		let piece1Row = piece1.row();
 		for (const piece of piece2.connectedComponent) {
@@ -234,7 +243,7 @@ window.addEventListener('load', function () {
 				draggingPiece = outerThis;
 				draggingPieceLastPos.x = e.clientX;
 				draggingPieceLastPos.y = e.clientY;
-				this.style.zIndex = pieceZIndexCounter++;
+				this.style.zIndex = ++pieceZIndexCounter;
 				this.style.cursor = 'none';
 			});
 			this.updateUV();
@@ -278,6 +287,8 @@ window.addEventListener('load', function () {
 		if (draggingPiece) {
 			let anyConnected = false;
 			for (const piece of draggingPiece.connectedComponent) {
+				piece.element.classList.remove('no-animation');
+				piece.element.style.zIndex = pieceZIndexCounter;
 				if (solved) break;
 				const col = piece.col();
 				const row = piece.row();
@@ -315,6 +326,7 @@ window.addEventListener('load', function () {
 			let dx = e.clientX - draggingPieceLastPos.x;
 			let dy = e.clientY - draggingPieceLastPos.y;
 			for (const piece of draggingPiece.connectedComponent) {
+				piece.element.classList.add('no-animation');
 				piece.x += dx;
 				piece.y += dy;
 				piece.updatePosition();
@@ -368,6 +380,7 @@ window.addEventListener('load', function () {
 		let nibTypeIndex = 0;
 		pieceWidth = 0.5 * playArea.clientWidth / puzzleWidth;
 		pieceHeight = pieceWidth * puzzleWidth * image.height / (puzzleHeight * image.width);
+		nibSize = Math.min(pieceWidth / 4, pieceHeight / 4);
 		document.body.style.setProperty('--piece-width', (pieceWidth) + 'px');
 		document.body.style.setProperty('--piece-height', (pieceHeight) + 'px');
 		document.body.style.setProperty('--nib-size', (nibSize) + 'px');
diff --git a/style.css b/style.css
index aa726b2..399a446 100644
--- a/style.css
+++ b/style.css
@@ -23,6 +23,11 @@ body {
 	height: calc(var(--piece-height) + 2 * var(--nib-size));
 	background-image: var(--image);
 	background-size: var(--image-width) var(--image-height);
+	transition: top 0.3s ease-in-out, left 0.3s ease-in-out;
+}
+
+.no-animation {
+	transition: none !important;
 }
 
 .debug-point {