collin/mahjong · 34a0a073

A hand keeps the room for the tile it is about to draw

Collin Richards · 2026-08-25 08:45 UTC · 34a0a073cb2934b57b1ff4611619357092773c73 · parent 01373481 · browse files

modifiedsrc/styles.css+27 −5

⋯ 15 unchanged lines
16	16		tiles, and they are the same tile as the ones under them — 打出 and 碰 are
17	17		things you do with a tile, so they are drawn as one. */
18	18		--bar-h: calc(var(--tile-w) * 1.375);
19		-	/* The daylight between two tiles standing side by side in a row. The action
20		-	buttons are tiles too, so it is the gap on either side of them as well —
21		-	one number, and the row is evenly spaced end to end. */
	19	+	/* The daylight between two tiles standing side by side in a row, and between
	20	+	two buttons — they are tiles too. */
22	21		--hand-gap: 2px;
	22	+	/* The wider daylight: what a tile pushed out of the row gets. The tile just
	23	+	drawn is set this far from the rest of the hand, and the buttons are set
	24	+	this far from it — because that tile is the one they are usually about
	25	+	to act on, and it is the one wearing a 摸 tag wider than itself and a gold
	26	+	ring when it is lifted. Anything tighter and the two touch. */
	27	+	--drawn-gap: calc(var(--tile-w) * 0.45);
23	28		/* Largest tile a strip can hold. Edge inwards it has to fit the melds (a
24	29		full tile, 1.375 tall, since they are the same tiles as the ones in the
25	30		hand), the button bar, the hand (1.71 + 6px) and the nameplate (28px), plus
⋯ 258 unchanged lines
284	289		align-items: flex-end;
285	290		flex: none;
286	291		}
	292	+	/* A hand keeps the room for the tile it is about to draw, whether or not it is
	293	+	holding it yet.
	294	+
	295	+	The row is centred in the strip, so without this every draw slid all sixteen
	296	+	tiles half a tile along and every discard slid them back — the tile you were
	297	+	looking at moved out from under you between one glance and the next. The slot
	298	+	is the same width the drawn tile takes when it arrives (its own gap, the
	299	+	daylight it is set apart by, and the tile), so a draw fills a space that was
	300	+	already there and nothing else moves at all.
	301	+
	302	+	Every hand, not only your own: the four strips are the same strip, and each
	303	+	of them is one draw away from needing it. Not on a phone, where the row wraps
	304	+	to as many lines as it needs and a draw re-flows it anyway — there the slot
	305	+	would only push the whole hand off its own middle. */
	306	+	:root:not(.compact) .hand:not(:has(.drawn-slot)) {
	307	+	padding-right: calc(var(--hand-gap) + var(--drawn-gap) + var(--tile-w));
	308	+	}
287	309		/* Your own hand, face down at a shared screen until you tap it. The backs are
288	310		already the picture; all this adds is that it is askable — a hand that
289	311		lifts a little under the finger, the way a card laid over a strip does. The
⋯ 60 unchanged lines
350	372		visibility: hidden;
351	373		}
352	374		.drawn-slot {
353		-	margin-left: calc(var(--tile-w) * 0.45);
	375	+	margin-left: var(--drawn-gap);
354	376		}
355	377		.drawn-slot .tile {
356	378		outline: 2px solid var(--gold);
⋯ 129 unchanged lines
486	508		position: relative;
487	509		display: grid;
488	510		grid-template-columns: 1fr auto 1fr;
489		-	column-gap: var(--hand-gap);
	511	+	column-gap: var(--drawn-gap);
490	512		align-items: end;
491	513		align-self: stretch;
492	514		flex: none;
⋯ 2183 unchanged lines