drwily/Pete
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

games: the sit button that never looked twice, and the phrase that ran off the phone

Browse Source 
UNO synced its sit panel once, at boot, before the chip bar had said what you
have. Land on the table with nothing, buy chips right there on the page, and Sit
down stayed greyed out until you reloaded — the money came in and nothing looked
at the button again. Getting up had the same shape: the panel came back last
synced while the leave request was still in flight, so it came back dead.

Every fresh view of the money now re-syncs the panel while you're off a table,
and controls() re-syncs it whenever a request finishes — which is the moment
getting up hands your stack back.

Hangman's phrase was laid out at a fixed tile width and never broke inside a
word, so a twelve-letter one was 475px of tiles in a 306px felt and took the
whole page sideways with it. Tiles scale with the screen now, and a word breaks
inside itself when it has to, with the gap between words kept several times the
gap inside one so a break still reads as a break in the word. The keyboard was
over the edge too — P, M and 9 were off the right of a phone and unclickable —
so a key lays out at a width the narrowest screen can afford and grows into
whatever room there is.

Desktop is unchanged: same tile, same key, same felt.

Claude-Session: https://claude.ai/code/session_01R7MuRkXEEGS564aFo5Rtjs
This commit is contained in:
prosolis
2026-08-25 23:06:13 -07:00
parent 15e229b6c3
commit fcd4368631
3 changed files with 30 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
internal/web/static/css/input.css
+18 -8
View File
@@ -1049,27 +1049,33 @@ html[data-phase="night"] {
40%, 60% { transform: translateX(5px); }
}
/* The phrase. Tiles wrap between words, never inside one. */
/* The phrase. Tiles wrap between words; a word only breaks inside itself when
it is wider than the felt, which on a phone a long one is. The gap between
words stays several times the gap inside one, so a break still reads as a
break in the word rather than the end of it. */
.pete-board {
display: flex;
flex-wrap: wrap;
gap: 0.35rem 1.1rem;
gap: 0.35rem clamp(0.6rem, 3vw, 1.1rem);
min-height: 5rem;
align-items: center;
max-width: 100%;
}
.pete-word {
display: flex;
flex-wrap: wrap;
gap: 0.3rem;
max-width: 100%;
}
.pete-tile {
display: grid;
place-items: center;
height: 2.9rem;
width: 2.2rem;
height: clamp(2rem, 8.6vw, 2.9rem);
width: clamp(1.5rem, 6.5vw, 2.2rem);
border-radius: 0.5rem;
font-family: "Fredoka", ui-sans-serif, system-ui, sans-serif;
font-size: 1.4rem;
font-size: clamp(1rem, 4.2vw, 1.4rem);
font-weight: 700;
color: #fff;
background: rgba(0, 0, 0, 0.22);
@@ -1153,19 +1159,23 @@ html[data-phase="night"] {
.pete-keys { display: grid; gap: 0.35rem; }
.pete-key-row {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.35rem;
}
.pete-key-row[data-digits="1"] { margin-top: 0.25rem; opacity: 0.75; }
.pete-key-row[data-digits="1"] .pete-key {
height: 2rem;
min-width: 1.8rem;
font-size: 0.8rem;
}
/* Ten keys have to fit the row on a phone, so a key is laid out at a width the
narrowest screen can afford and grows into whatever room the screen actually
has. Wrapping is the last resort under that, not the first answer. */
.pete-key {
height: 2.75rem;
min-width: 2.2rem;
flex: 0 1 2.4rem;
min-width: clamp(1.15rem, 5vw, 2.2rem);
max-width: 2.4rem;
flex: 1 1 clamp(1.15rem, 5vw, 2.4rem);
border-radius: 0.6rem;
background: color-mix(in srgb, var(--ink) 6%, transparent);
border: 2px solid color-mix(in srgb, var(--ink) 10%, transparent);