collin/mahjong · 16cdd507

The side of a tile is a side, not more face

Collin Richards · 2026-08-21 19:31 UTC · 16cdd5078ff9e846f0d9c6501ef24bf8e17e3e17 · parent fa7981fc · browse files

modifiedsrc/ui/Pool.tsx+21 −4

⋯ 567 unchanged lines
568	568		const lift = thick * (0.45 + 0.55 * sin) + d.z * 0.05;
569	569
570	570		// --- the body of the tile, seen from just off square
	571	+	//
	572	+	// Only the sliver past the bottom of the face is ever seen of this, and it is
	573	+	// the side of the tile: it faces the viewer rather than the light, so it is
	574	+	// the darker end of the ivory. It used to be the lighter one — the gradient
	575	+	// ran dark at the tile's top, which is the half the face covers — so the one
	576	+	// part on show was within a tenth of the white face and read as more face
	577	+	// rather than as thickness.
	578	+	//
	579	+	// Shaded down the screen rather than down the tile. The slab is offset
	580	+	// straight down whatever angle the tile lies at, so the sliver is always along
	581	+	// its lower edge; a gradient that turned with the tile put the shading
	582	+	// somewhere else entirely as soon as one came to rest sideways. The path is
	583	+	// laid down rotated and then filled with the rotation taken back off, which
	584	+	// leaves the shape turned and the light coming from one direction across the
	585	+	// whole pool — the same direction the shadows fall in.
571	586		ctx.save();
572	587		ctx.translate(d.x, d.y + lift);
573	588		squash(ctx, projected, d.axis);
	589	+	ctx.save();
574	590		ctx.rotate(d.angle);
575		-	const grad = ctx.createLinearGradient(0, -h / 2, 0, h / 2);
576		-	grad.addColorStop(0, EDGE_DARK);
577		-	grad.addColorStop(1, EDGE_LIGHT);
	591	+	tilePath(ctx, w, h);
	592	+	ctx.restore();
	593	+	const grad = ctx.createLinearGradient(0, h / 2 - lift, 0, h / 2);
	594	+	grad.addColorStop(0, EDGE_LIGHT);
	595	+	grad.addColorStop(1, EDGE_DARK);
578	596		ctx.fillStyle = grad;
579		-	tilePath(ctx, w, h);
580	597		ctx.fill();
581	598		ctx.strokeStyle = EDGE_LINE;
582	599		ctx.lineWidth = 1;
⋯ 155 unchanged lines