thejayman77/upbeatBytes
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Daily Word mobile: true viewport + flat warm keyboard + height-aware tiles

Browse Source 
Make Daily Word feel like a focused mobile app screen, not a page with a keyboard.
* True viewport: while view==='play' && game==='word', a $effect locks body scroll
  and hides the site footer (mobile only), so the keyboard is genuinely pinned, not
  riding the document scroll. Effect cleanup ALWAYS removes the class on re-run or
  unmount, so leaving /play (back button OR any navigation) can never strand it.
* Keyboard restyled on-brand + modern: flat off-white (--surface) keys with a
  hairline border, soft 11px radius, no heavy raised shadow, ~46px tall, ↵ / ⌫
  glyphs, centered (max-width 430) instead of a full-bleed beige slab.
* Tiles now size to fit BOTH width and the height left above the keyboard
  (--tile = min(cap, width/cols, (100dvh-budget)/rows), gap 4px), so the active row
  and keyboard are always visible — Long Word's 6×7 gets slightly smaller tiles.

Real-device Safari/Chrome is the final check (100dvh + safe-area handling).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
jay
2026-06-11 07:27:39 -04:00
parent bd2a477570
commit 067e77ed5a
3 changed files with 45 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/app.css
+9
View File
@@ -65,3 +65,12 @@ button { font-family: inherit; cursor: pointer; }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.rise { animation: rise 0.5s ease both; }
@media (prefers-reduced-motion: reduce) { .rise { animation: none; } html { scroll-behavior: auto; } }
/* Daily Word on mobile becomes a focused, full-viewport screen: lock body scroll
and hide the site footer so the on-screen keyboard is truly pinned (not riding
the page's scroll). The .playing-word class is toggled by /play and always
removed on navigation via effect cleanup. Mobile only — desktop is unaffected. */
@media (max-width: 720px) {
html.playing-word, html.playing-word body { overflow: hidden; }
html.playing-word footer.site { display: none; }
}
frontend/src/lib/components/WordGame.svelte
+26 -21
View File
@@ -154,7 +154,7 @@
<p class="muted">Loading today’s puzzle…</p>
{:else}
<div class="play-area">
<div class="board" style="--len:{length}">
<div class="board" style="--cols:{length}; --rows:{maxGuesses}">
{#each Array(maxGuesses) as _, r (r)}
{@const g = guesses[r]}
{@const cs = cols[r] || null}
@@ -190,7 +190,7 @@
<div class="keyboard">
{#each ROWS as row, ri (ri)}
<div class="krow">
{#if ri === 2}<button class="key wide enter" onclick={() => key('enter')}>Enter</button>{/if}
{#if ri === 2}<button class="key wide enter" onclick={() => key('enter')} aria-label="Enter">↵</button>{/if}
{#each row as k (k)}
<button class="key {keyState[k] || ''}" onclick={() => key(k)}>{k.toUpperCase()}</button>
{/each}
@@ -206,7 +206,7 @@
.wordgame { max-width: 480px; margin: 0 auto; opacity: 0; transform: translateY(6px); }
.wordgame.ready { opacity: 1; transform: none; transition: opacity 0.3s ease, transform 0.3s ease; }
.board { display: grid; gap: 6px; margin: 0 auto 18px; width: min(100%, 340px); }
.row { display: grid; grid-template-columns: repeat(var(--len), 1fr); gap: 6px; }
.row { display: grid; grid-template-columns: repeat(var(--cols), 1fr); gap: 6px; }
.tile {
aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
border: 2px solid var(--line); border-radius: 8px; font-family: var(--label);
@@ -221,33 +221,38 @@
text-align: center; background: var(--ink); color: #fff; border-radius: 8px;
padding: 7px 14px; width: fit-content; margin: 0 auto 12px; font-size: 0.86rem;
}
.keyboard { display: flex; flex-direction: column; gap: 7px; margin-top: 8px; }
/* Flat, warm, on-brand keys — off-white with a hairline border, soft radius,
no heavy raised shadow. Centered, never a full-bleed slab. */
.keyboard { display: flex; flex-direction: column; gap: 6px; margin: 10px auto 0; max-width: 430px; }
.krow { display: flex; gap: 5px; justify-content: center; }
.key {
flex: 1; min-width: 0; max-width: 44px; height: 54px; border: none; border-radius: 8px;
background: #e9e2d4; color: var(--ink); font-family: var(--label); font-weight: 600;
font-size: 1rem; cursor: pointer; text-transform: uppercase;
box-shadow: 0 1.5px 0 rgba(70, 58, 36, 0.16); transition: background 0.12s ease, transform 0.05s ease;
flex: 1; min-width: 0; max-width: 42px; height: 48px; border: 1px solid var(--line); border-radius: 11px;
background: var(--surface); color: var(--ink); font-family: var(--label); font-weight: 600;
font-size: 0.92rem; cursor: pointer; text-transform: uppercase; transition: background 0.12s ease, transform 0.05s ease;
}
.key:active { transform: translateY(1px); box-shadow: none; }
.key.wide { max-width: 66px; font-size: 0.68rem; letter-spacing: 0.03em; }
.key.enter { background: var(--accent-soft); color: var(--accent-deep); }
.key.correct { background: #4a9d6e; color: #fff; box-shadow: 0 1.5px 0 rgba(40, 90, 60, 0.32); }
.key.present { background: #d8b24a; color: #fff; box-shadow: 0 1.5px 0 rgba(150, 110, 20, 0.32); }
.key.absent { background: #9aa6b2; color: #fff; box-shadow: 0 1.5px 0 rgba(80, 90, 100, 0.32); }
.key:hover { filter: brightness(0.97); }
.key:active { transform: translateY(1px); background: var(--bg); }
.key.wide { max-width: 56px; font-size: 1.1rem; }
.key.enter { background: var(--accent-soft); border-color: transparent; color: var(--accent-deep); }
.key.correct { background: #4a9d6e; border-color: #4a9d6e; color: #fff; }
.key.present { background: #d8b24a; border-color: #d8b24a; color: #fff; }
.key.absent { background: #9aa6b2; border-color: #9aa6b2; color: #fff; }
.key:hover { filter: brightness(0.98); }
.muted { color: var(--muted); text-align: center; }
/* Mobile: fill the height — board scrolls in the middle, keyboard pinned at the
bottom and always reachable (full-bleed, on-brand, safe-area aware). */
/* Mobile: a focused app screen — board sizes to fit BOTH width and the height
left above the 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: center; padding: 4px 0; }
.board { margin-bottom: 12px; }
.keyboard { flex-shrink: 0; margin: 6px -16px 0; gap: 6px; background: var(--bg);
border-top: 1px solid var(--line); padding: 9px 6px calc(9px + env(safe-area-inset-bottom)); }
.key { height: 50px; }
.board {
--tile: min(58px, calc((100vw - 44px) / var(--cols)), calc((100dvh - 300px) / var(--rows)));
gap: 4px; width: fit-content; margin: 0 auto 10px;
}
.row { grid-template-columns: repeat(var(--cols), var(--tile)); gap: 4px; }
.tile { width: var(--tile); height: var(--tile); aspect-ratio: auto; font-size: calc(var(--tile) * 0.46); }
.keyboard { flex-shrink: 0; margin: 8px auto calc(env(safe-area-inset-bottom) + 4px); gap: 5px; }
.key { height: 46px; }
}
.result { text-align: center; }
.rmark { font-family: var(--serif); font-style: italic; color: var(--accent-deep); font-size: 1.2rem; margin: 0 0 10px; }
frontend/src/routes/play/+page.svelte
+10
View File
@@ -73,6 +73,16 @@
function openGame(g) { game = g; view = 'select'; refreshStatus(); }
function pick(v) { if (game === 'word') variant = v; else wsSize = v; view = 'play'; }
// Daily Word on mobile = a focused viewport: lock scroll + hide footer. Cleanup
// ALWAYS removes the class (re-run or unmount), so leaving /play can't strand it.
$effect(() => {
if (typeof document === 'undefined') return;
if (view === 'play' && game === 'word') {
document.documentElement.classList.add('playing-word');
return () => document.documentElement.classList.remove('playing-word');
}
});
function back() {
view = view === 'play' ? 'select' : 'hub';
refreshStatus();