Daily Word keyboard: QWERTY, slim ↵ controls, floated up & centered
Final mobile keyboard pass per field feedback: * Back to QWERTY (natural muscle memory) — uniform key width, with the shorter rows auto-centered under the top row. * Slimmer control column + Enter is now the ↵ glyph (not "ENTER"), so the letter keys get a little extra width. * Keyboard floats up and sits centered in the space between the bottom of the board and the bottom of the screen (kbzone flex-centers it), instead of being jammed against the bottom edge. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -19,7 +19,7 @@
|
||||
let message = $state('');
|
||||
let ready = $state(false); // animate-in once loaded
|
||||
|
||||
const LETTERS = 'abcdefghijklmnopqrstuvwxyz'.split('');
|
||||
const ROWS = ['qwertyuiop', 'asdfghjkl', 'zxcvbnm'].map((r) => r.split(''));
|
||||
|
||||
const stateKey = $derived(`goodnews:word:${variant}:${date}`);
|
||||
const statsKey = $derived(`goodnews:word:${variant}:stats`);
|
||||
@@ -191,15 +191,21 @@
|
||||
</div>
|
||||
|
||||
{#if status === 'playing'}
|
||||
<div class="keyboard">
|
||||
<div class="letters">
|
||||
{#each LETTERS as k (k)}
|
||||
<button class="key {keyState[k] || ''}" onclick={() => key(k)}>{k.toUpperCase()}</button>
|
||||
{/each}
|
||||
</div>
|
||||
<div class="controls">
|
||||
<button class="key ctl back" onclick={() => key('back')} aria-label="Backspace">⌫</button>
|
||||
<button class="key ctl enter" onclick={() => key('enter')}>ENTER</button>
|
||||
<div class="kbzone">
|
||||
<div class="keyboard">
|
||||
<div class="letters">
|
||||
{#each ROWS as row, ri (ri)}
|
||||
<div class="krow">
|
||||
{#each row as k (k)}
|
||||
<button class="key {keyState[k] || ''}" onclick={() => key(k)}>{k.toUpperCase()}</button>
|
||||
{/each}
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
<div class="controls">
|
||||
<button class="key ctl back" onclick={() => key('back')} aria-label="Backspace">⌫</button>
|
||||
<button class="key ctl enter" onclick={() => key('enter')} aria-label="Enter">↵</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
@@ -238,19 +244,23 @@
|
||||
/* Keyboard fills its area like a real phone game: a left block of square,
|
||||
alphabetical letter keys + a right column with Backspace (top) / Enter
|
||||
(bottom) tucked in. Flat, warm, on-brand keys — off-white, hairline border. */
|
||||
.keyboard { display: flex; align-items: stretch; gap: 7px; margin: 12px auto 0; max-width: 460px; }
|
||||
.letters { flex: 1; display: grid; grid-template-columns: repeat(9, 1fr); gap: 6px; }
|
||||
.controls { display: grid; grid-template-rows: 1fr 1fr; gap: 6px; width: 58px; flex-shrink: 0; }
|
||||
.kbzone { display: block; }
|
||||
.keyboard {
|
||||
--kw: min(44px, calc((100vw - 126px) / 10)); /* uniform key width; row 1 (10) fills */
|
||||
display: flex; align-items: stretch; gap: 6px; width: 100%; max-width: 470px; margin: 12px auto 0;
|
||||
}
|
||||
.letters { flex: 1; display: flex; flex-direction: column; gap: 6px; }
|
||||
.krow { display: flex; gap: 4px; justify-content: center; } /* shorter rows auto-centre */
|
||||
.controls { display: grid; grid-template-rows: 1fr 1fr; gap: 6px; width: 42px; flex-shrink: 0; }
|
||||
.key {
|
||||
border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink);
|
||||
font-family: var(--label); font-weight: 700; font-size: 1.18rem; cursor: pointer; text-transform: uppercase;
|
||||
border: 1px solid var(--line); border-radius: 11px; background: var(--surface); color: var(--ink);
|
||||
font-family: var(--label); font-weight: 700; font-size: 1.05rem; cursor: pointer; text-transform: uppercase;
|
||||
padding: 0; box-shadow: 0 2px 0 rgba(120, 108, 84, 0.22), 0 3px 6px rgba(60, 50, 30, 0.07);
|
||||
transition: transform 0.06s ease, box-shadow 0.06s ease, background 0.12s ease, filter 0.12s ease;
|
||||
}
|
||||
.key:active { transform: translateY(2px); box-shadow: 0 0 0 rgba(0, 0, 0, 0); background: var(--bg); }
|
||||
.letters .key { min-width: 0; height: 52px; }
|
||||
.controls .key { height: 100%; font-size: 0.66rem; letter-spacing: 0.04em; }
|
||||
.controls .back { font-size: 1.35rem; }
|
||||
.krow .key { width: var(--kw); height: 50px; }
|
||||
.controls .key { width: 100%; height: 100%; font-size: 1.3rem; }
|
||||
.controls .enter { background: var(--accent); border-color: var(--accent); color: #fff;
|
||||
box-shadow: 0 2px 0 var(--accent-deep), 0 3px 6px rgba(0, 131, 173, 0.18); }
|
||||
.key.correct { background: #4a9d6e; border-color: #4a9d6e; color: #fff; box-shadow: 0 2px 0 #3a7d56; }
|
||||
@@ -264,23 +274,21 @@
|
||||
keyboard, so the active row + keyboard are always visible. */
|
||||
@media (max-width: 720px) {
|
||||
.wordgame { display: flex; flex-direction: column; height: 100%; max-width: 100%; }
|
||||
.play-area { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column;
|
||||
justify-content: flex-start; padding: 8px 0 4px; scrollbar-width: none; }
|
||||
.play-area { flex: 0 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column;
|
||||
justify-content: flex-start; padding: 8px 0 0; scrollbar-width: none; }
|
||||
.play-area::-webkit-scrollbar { display: none; } /* no stray scrollbar "divider" */
|
||||
.board {
|
||||
/* budget covers page padding + inter-tile gaps so 6 letters never overflow */
|
||||
--tile: min(64px, calc((100vw - 64px) / var(--cols)), calc((100dvh - 300px) / var(--rows)));
|
||||
gap: 5px; width: fit-content; margin: 0 auto 10px;
|
||||
gap: 5px; width: fit-content; margin: 0 auto;
|
||||
}
|
||||
.row { grid-template-columns: repeat(var(--cols), var(--tile)); gap: 5px; }
|
||||
.tile { width: var(--tile); height: var(--tile); aspect-ratio: auto; font-size: calc(var(--tile) * 0.46); }
|
||||
/* Full width so the keys aren't squished — auto side margins on a flex item
|
||||
shrink it to content and leave dead horizontal space. */
|
||||
.keyboard { flex-shrink: 0; width: 100%; max-width: none; align-self: stretch; gap: 6px;
|
||||
margin: 10px 0 calc(env(safe-area-inset-bottom) + 6px); }
|
||||
.letters { gap: 5px; }
|
||||
.letters .key { height: 50px; }
|
||||
.controls { width: 48px; }
|
||||
/* Float the keyboard up, centered in the space below the board. */
|
||||
.kbzone { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 0;
|
||||
padding-bottom: calc(env(safe-area-inset-bottom) + 4px); }
|
||||
.keyboard { --kw: min(44px, calc((100vw - 120px) / 10)); width: 100%; max-width: none; margin: 0; }
|
||||
.krow .key { height: 47px; }
|
||||
}
|
||||
.result { text-align: center; }
|
||||
.rmark { font-family: var(--serif); font-style: italic; color: var(--accent-deep); font-size: 1.2rem; margin: 0 0 10px; }
|
||||
|
||||
Reference in New Issue
Block a user