anvilsign in

collin/mahjong · fa7981fc

Give a tile in the middle back the edge the art loses at that size

Collin Richards · 2026-08-21 19:23 UTC · fa7981fc7b7ff5f39eb826dccf7f1d6fa4e49f91 · parent 84d53205 · browse files

modifiedsrc/ui/Pool.tsx+26 −0
⋯ 512 unchanged lines
513513 /** The ivory of the tile's own body, seen along its sides. */
514514 const EDGE_LIGHT = '#e6dcc2';
515515 const EDGE_DARK = '#b9ad8d';
516+/**
517+ * The line round the outside of a tile.
518+ *
519+ * The art already has one — a single black pixel all the way round each 128px
520+ * cell — but a tile in the middle is drawn about a quarter of that size, and
521+ * `drawImage` box-filters that one pixel down to a quarter of its strength. On
522+ * the two sides the art shades for itself, left and bottom, there is a painted
523+ * bevel underneath and you cannot tell. On the other two there is nothing but
524+ * the outline, so white met green with no edge at all and the tile read as a
525+ * flat shape rather than something lying on cloth. Drawn as a stroke instead of
526+ * relying on the bitmap, it holds at any size.
527+ */
528+const EDGE_LINE = 'rgba(52, 43, 29, 0.55)';
516529
517530 interface Drawn {
518531 x: number;
⋯ 46 unchanged lines
565578 ctx.fillStyle = grad;
566579 tilePath(ctx, w, h);
567580 ctx.fill();
581+ ctx.strokeStyle = EDGE_LINE;
582+ ctx.lineWidth = 1;
583+ ctx.stroke();
568584 ctx.restore();
569585
570586 // --- and its face on top
⋯ 110 unchanged lines
681697 ctx.fillStyle = '#1c7a4b';
682698 ctx.fill();
683699 }
700+ // A green back on green cloth needs the edge more than a white face does.
701+ tilePath(ctx, w, h);
702+ ctx.strokeStyle = EDGE_LINE;
703+ ctx.lineWidth = 1;
704+ ctx.stroke();
684705 return;
685706 }
686707
⋯ 9 unchanged lines
696717 ctx.fillStyle = '#f6f0e2';
697718 ctx.fill();
698719 }
720+ // The edge the shrunken art no longer carries for itself.
721+ tilePath(ctx, w, h);
722+ ctx.strokeStyle = EDGE_LINE;
723+ ctx.lineWidth = 1;
724+ ctx.stroke();
699725 if (lit) {
700726 // A pool of sixty tiles needs more than a lighter face to pick one out.
701727 tilePath(ctx, w, h);
⋯ 10 unchanged lines