piece shapes!

1 files changed, 76 insertions, 10 deletions

diff --git a/game.js b/game.js
index 5fd512f..2acabd9 100644
--- a/game.js
+++ b/game.js
@@ -2,35 +2,101 @@ window.addEventListener('load', function () {
 	const getById = (id) => document.getElementById(id);
 	const playArea = getById("play-area");
 	const scale = 0.2;
+	let pieceZIndexCounter = 1;
 	let draggingPiece = null;
+	let pieceSize = 50;
+	let nibSize = 10;
+	const draggingPieceLastPos = Object.preventExtensions({x: null, y: null});
+	class NibType {
+		dx11;
+		dy11;
+		dx12;
+		dy12;
+		dx21;
+		dy21;
+		dx22;
+		dy22;
+		randomize() {
+			const bendiness = 0.5;
+			this.dx11 = Math.floor((Math.random() *  2 - 1)  * nibSize * bendiness);
+			this.dy11 = nibSize / 2 + Math.floor((Math.random() * 2 - 1) * bendiness);
+			this.dx12 = Math.floor((Math.random() *  2 - 1) * nibSize * bendiness);
+			// this ensures base of nib is flat
+			this.dy12 = nibSize;
+			this.dx22 = nibSize / 2 + Math.floor((Math.random() *  2 - 1) * nibSize * bendiness);
+			this.dy22 = -nibSize / 2 + Math.floor((Math.random() * 2 - 1) * nibSize * bendiness);
+			return this;
+		}
+		path() {
+			return `c${this.dx11} ${this.dy11} ${this.dx12} ${this.dy12} ${nibSize / 2} ${nibSize}`
+				+ ` s${this.dx22} ${this.dy22} ${nibSize / 2} ${-nibSize}`;
+		}
+	}
 	class Piece {
+		id;
+		u;
+		v;
+		x;
+		y;
+		element;
 		constructor(id, u, v, x, y) {
 			this.id = id;
+			this.x = x;
+			this.y = y;
 			this.u = u;
 			this.v = v;
 			const element = this.element = document.createElement('div');
 			element.classList.add('piece');
-			element.style.backgroundPositionX = (-u) + 'px';
-			element.style.backgroundPositionY = (-v) + 'px';
-			element.style.left = x + 'px';
-			element.style.top = y + 'px';
-			element.addEventListener('click', function() {
-				draggingPiece = this;
+			const outerThis = this;
+			element.addEventListener('mousedown', function(e) {
+				if (e.button !== 0) return;
+				draggingPiece = outerThis;
+				draggingPieceLastPos.x = e.clientX;
+				draggingPieceLastPos.y = e.clientY;
+				this.style.zIndex = pieceZIndexCounter++;
+				this.style.cursor = 'none';
 			});
+			this.updateUV();
+			this.updatePosition();
+			let shoulderWidth = (pieceSize - nibSize) / 2;
+			let clipPath = [`path("M${nibSize} ${nibSize}`];
+			clipPath.push(`l${shoulderWidth} 0`);
+			clipPath.push(new NibType().randomize().path());
+			clipPath.push(`L${pieceSize + nibSize} ${nibSize}`);
+			clipPath.push(`L${pieceSize + nibSize} ${pieceSize + nibSize}`);
+			clipPath.push(`L${nibSize} ${pieceSize + nibSize}`);
+			clipPath.push(`L${nibSize} ${nibSize}`);
+			this.element.style.clipPath = clipPath.join(' ');
 			playArea.appendChild(element);
 		}
+		updateUV() {
+			this.element.style.backgroundPositionX = (-this.u) + 'px';
+			this.element.style.backgroundPositionY = (-this.v) + 'px';
+		}
+		updatePosition() {
+			this.element.style.left = this.x + 'px';
+			this.element.style.top = this.y + 'px';
+		}
 	}
 	window.addEventListener('mouseup', function() {
-		draggingPiece = null;
+		if (draggingPiece) {
+			draggingPiece.element.style.removeProperty('cursor');
+			draggingPiece = null;
+		}
 	});
 	window.addEventListener('mousemove', function(e) {
-		e.movementX;
-		
+		if (draggingPiece) {
+			draggingPiece.x += e.clientX - draggingPieceLastPos.x;
+			draggingPiece.y += e.clientY - draggingPieceLastPos.y;
+			draggingPiece.updatePosition();
+			draggingPieceLastPos.x = e.clientX;
+			draggingPieceLastPos.y = e.clientY;
+		}
 	});
 	const pieces = [];
 	for (let y = 0; y < 12; y++) {
 		for (let x = 0; x < 19; x++) {
-			pieces.push(new Piece(pieces.length, x * 40, y * 40, x * 50, y * 50));
+			pieces.push(new Piece(pieces.length, x * pieceSize, y * pieceSize, x * 60, y * 60));
 		}
 	}
 });