From a7a6bdc44a26b32aa26ebce637a9a2270db52bb2 Mon Sep 17 00:00:00 2001
From: pommicket <pommicket@gmail.com>
Date: Mon, 5 Aug 2024 01:15:26 -0400
Subject: piece shapes!

---
 game.js   | 86 +++++++++++++++++++++++++++++++++++++++++++++++++++++++--------
 style.css |  5 ++--
 2 files changed, 79 insertions(+), 12 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));
 		}
 	}
 });
diff --git a/style.css b/style.css
index 13a9840..7d71c39 100644
--- a/style.css
+++ b/style.css
@@ -1,6 +1,6 @@
 body {
 	font-family: sans-serif;
-	--piece-size: 40px;
+	--piece-size: 70px;
 	--image: url("https://upload.wikimedia.org/wikipedia/commons/0/09/Croatia_Opatija_Maiden_with_the_Seagull_BW_2014-10-10_10-35-13.jpg");
 	--view-width: 800px;
 	--view-height: 480px;
@@ -10,6 +10,7 @@ body {
 	width: 100vw;
 	height: 100vh;
 	position: relative;
+	user-select: none;
 }
 
 .piece {
@@ -18,5 +19,5 @@ body {
 	height: var(--piece-size);
 	background-image: var(--image);
 	background-size: var(--view-width) var(--view-height);
-	clip-path: path("M0 0 L40 0 L30 40 L0 40 Z");
+	/* clip-path: path("M0 0 L40 0 L40 40 L0 40 Z"); */
 }
-- 
cgit v1.2.3