developer/scrabble-game
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Stage 8 polish: profile validation, finished-game UI, badge + Safari fixes
Tests · Go / test (push) Successful in 7s
Details
Tests · Integration / integration (push) Successful in 11s
Details
Tests · UI / test (push) Successful in 17s
Details

Browse Source 
Owner-review follow-up on the Stage 8 branch:
- Friend code is copyable (📋 + toast). The lobby notification badge is fixed —
  it had inherited the hamburger-bar style — into a proper round count dot.
- Safari: min-width:0 on flex text inputs (friend code, profile, chat) so they
  shrink instead of pushing the adjacent button off-screen.
- Profile editing is validated on both the UI and the backend: display-name format
  (letters joined by single space/./_ separators, no leading/trailing/adjacent
  separators, <=32 runes), a UTC-offset timezone picker (account.ResolveZone parses
  ±HH:MM or a legacy IANA name), a 10-minute away grid capped at 12h (wrap-aware),
  and email format; Save is disabled and invalid fields red-bordered until valid.
  Language stays in Settings.
- In a game, an "add to friends" menu item flips to a disabled "request sent"; chat
  send/nudge became ⬆️/🛎️ icon buttons.
- A finished game drops its last-word highlight, hides Check word / Drop game,
  disables zoom, and draws an inert (greyed) footer instead of hiding it.

Tests: account validators (name/away/zone), UI profileValidation, e2e for the
finished-game footer/menu and the copy control. Docs (PLAN, ARCHITECTURE,
FUNCTIONAL +ru, UI_DESIGN) updated for the display-name rule, UTC-offset timezone
and the 12h away window.
This commit is contained in:
Ilia Denisov
2026-06-03 22:12:59 +02:00
parent 2d82c75f0b
commit acbb2d8254
21 changed files with 602 additions and 115 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ui/src/screens/Profile.svelte
+115 -38
View File
@@ -3,35 +3,70 @@
import { app, handleError, logout, showToast } from '../lib/app.svelte';
import { gateway } from '../lib/gateway';
import { t } from '../lib/i18n/index.svelte';
import type { ProfileUpdate } from '../lib/model';
import {
awayDurationOk,
awayHours,
awayMinutes,
browserOffset,
isOffsetZone,
timezoneOffsets,
validDisplayName,
validEmail,
} from '../lib/profileValidation';
let editing = $state(false);
let form = $state<ProfileUpdate>(blankForm());
let dn = $state('');
let tz = $state('+00:00');
let startH = $state('00');
let startM = $state('00');
let endH = $state('07');
let endM = $state('00');
let blockChat = $state(false);
let blockFriendRequests = $state(false);
let emailInput = $state('');
let codeInput = $state('');
let emailSent = $state(false);
function blankForm(): ProfileUpdate {
const p = app.profile;
return {
displayName: p?.displayName ?? '',
preferredLanguage: p?.preferredLanguage ?? 'en',
timeZone: p?.timeZone ?? 'UTC',
awayStart: p?.awayStart ?? '00:00',
awayEnd: p?.awayEnd ?? '07:00',
blockChat: p?.blockChat ?? false,
blockFriendRequests: p?.blockFriendRequests ?? false,
};
function defaultTz(): string {
const b = browserOffset();
return timezoneOffsets.includes(b) ? b : '+00:00';
}
function splitTime(hhmm: string): [string, string] {
const m = /^(\d{2}):(\d{2})$/.exec(hhmm);
if (!m) return ['00', '00'];
return [m[1], awayMinutes.includes(m[2]) ? m[2] : '00'];
}
function startEdit() {
form = blankForm();
const p = app.profile!;
dn = p.displayName;
tz = isOffsetZone(p.timeZone) && timezoneOffsets.includes(p.timeZone) ? p.timeZone : defaultTz();
[startH, startM] = splitTime(p.awayStart);
[endH, endM] = splitTime(p.awayEnd);
blockChat = p.blockChat;
blockFriendRequests = p.blockFriendRequests;
editing = true;
}
const awayStart = $derived(`${startH}:${startM}`);
const awayEnd = $derived(`${endH}:${endM}`);
const nameOk = $derived(validDisplayName(dn));
const awayOk = $derived(awayDurationOk(awayStart, awayEnd));
const formValid = $derived(nameOk && awayOk);
const emailOk = $derived(validEmail(emailInput));
async function save() {
if (!formValid) return;
try {
app.profile = await gateway.profileUpdate(form);
app.profile = await gateway.profileUpdate({
displayName: dn.trim(),
preferredLanguage: app.profile!.preferredLanguage, // language lives in Settings
timeZone: tz,
awayStart,
awayEnd,
blockChat,
blockFriendRequests,
});
editing = false;
showToast(t('profile.saved'));
} catch (e) {
@@ -40,12 +75,11 @@
}
async function requestEmail() {
const email = emailInput.trim();
if (!email) return;
if (!emailOk) return;
try {
await gateway.emailBindRequest(email);
await gateway.emailBindRequest(emailInput.trim());
emailSent = true;
showToast(t('profile.emailSent', { email }));
showToast(t('profile.emailSent', { email: emailInput.trim() }));
} catch (e) {
handleError(e);
}
@@ -75,37 +109,45 @@
<form class="edit" onsubmit={(e) => { e.preventDefault(); void save(); }}>
<label>
<span>{t('profile.displayName')}</span>
<input bind:value={form.displayName} maxlength="64" />
<input class:invalid={!nameOk} bind:value={dn} maxlength="40" />
</label>
<label>
<span>{t('profile.timezone')}</span>
<input bind:value={form.timeZone} />
<select bind:value={tz}>
{#each timezoneOffsets as o (o)}<option value={o}>{o}</option>{/each}
</select>
</label>
<fieldset class="away">
<fieldset class="away" class:invalid={!awayOk}>
<legend>{t('profile.awayWindow')}</legend>
<div class="times">
<label><span>{t('profile.from')}</span><input type="time" bind:value={form.awayStart} /></label>
<label><span>{t('profile.to')}</span><input type="time" bind:value={form.awayEnd} /></label>
<span class="tlabel">{t('profile.from')}</span>
<select bind:value={startH}>{#each awayHours as h (h)}<option>{h}</option>{/each}</select>
<span class="colon">:</span>
<select bind:value={startM}>{#each awayMinutes as m (m)}<option>{m}</option>{/each}</select>
</div>
<div class="times">
<span class="tlabel">{t('profile.to')}</span>
<select bind:value={endH}>{#each awayHours as h (h)}<option>{h}</option>{/each}</select>
<span class="colon">:</span>
<select bind:value={endM}>{#each awayMinutes as m (m)}<option>{m}</option>{/each}</select>
</div>
<p class="muted">{t('profile.awayHint')}</p>
</fieldset>
<label class="check">
<input type="checkbox" bind:checked={form.blockChat} />
<input type="checkbox" bind:checked={blockChat} />
<span>{t('profile.blockChat')}</span>
</label>
<label class="check">
<input type="checkbox" bind:checked={form.blockFriendRequests} />
<input type="checkbox" bind:checked={blockFriendRequests} />
<span>{t('profile.blockFriendRequests')}</span>
</label>
<div class="formacts">
<button type="submit" class="btn">{t('common.save')}</button>
<button type="submit" class="btn" disabled={!formValid}>{t('common.save')}</button>
<button type="button" class="ghost" onclick={() => (editing = false)}>{t('common.cancel')}</button>
</div>
</form>
{:else}
<dl>
<dt>{t('profile.language')}</dt>
<dd>{p.preferredLanguage}</dd>
<dt>{t('profile.timezone')}</dt>
<dd>{p.timeZone}</dd>
<dt>{t('profile.awayWindow')}</dt>
@@ -123,12 +165,23 @@
<h3>{t('profile.bindEmail')}</h3>
{#if !emailSent}
<div class="addrow">
<input bind:value={emailInput} placeholder={t('login.emailPlaceholder')} type="email" />
<button class="ghost" onclick={requestEmail}>{t('login.sendCode')}</button>
<input
class:invalid={emailInput.length > 0 && !emailOk}
bind:value={emailInput}
placeholder={t('login.emailPlaceholder')}
type="email"
/>
<button class="ghost" onclick={requestEmail} disabled={!emailOk}>{t('login.sendCode')}</button>
</div>
{:else}
<div class="addrow">
<input bind:value={codeInput} placeholder={t('profile.emailCode')} inputmode="numeric" maxlength="6" />
<input
class="codein"
bind:value={codeInput}
placeholder={t('profile.emailCode')}
inputmode="numeric"
maxlength="6"
/>
<button class="btn" onclick={confirmEmail}>{t('common.ok')}</button>
</div>
{/if}
@@ -183,26 +236,33 @@
flex-direction: column;
gap: 14px;
}
.edit label {
.edit > label {
display: flex;
flex-direction: column;
gap: 4px;
font-size: 0.9rem;
color: var(--text-muted);
}
.edit input:not([type]),
.edit input[type='time'] {
.edit input:not([type='checkbox']),
.edit select {
min-width: 0;
padding: 9px 11px;
border: 1px solid var(--border);
background: var(--surface);
color: var(--text);
border-radius: var(--radius-sm);
}
.invalid {
border-color: var(--danger, #c0392b) !important;
}
.away {
border: 1px solid var(--border);
border-radius: var(--radius-sm);
padding: 10px 12px;
margin: 0;
display: flex;
flex-direction: column;
gap: 8px;
}
.away legend {
color: var(--text-muted);
@@ -211,10 +271,16 @@
}
.times {
display: flex;
gap: 12px;
align-items: center;
gap: 8px;
}
.times label {
flex: 1;
.tlabel {
min-width: 2.5em;
color: var(--text-muted);
font-size: 0.85rem;
}
.colon {
font-weight: 700;
}
.check {
flex-direction: row !important;
@@ -226,6 +292,9 @@
display: flex;
gap: 10px;
}
.btn:disabled {
opacity: 0.5;
}
.emailbox h3 {
margin: 0 0 8px;
font-size: 0.95rem;
@@ -237,12 +306,17 @@
}
.addrow input {
flex: 1;
min-width: 0;
padding: 9px 11px;
border: 1px solid var(--border);
background: var(--surface);
color: var(--text);
border-radius: var(--radius-sm);
}
.addrow input.codein {
letter-spacing: 0.3em;
font-size: 1.1rem;
}
.btn {
align-self: flex-start;
padding: 9px 14px;
@@ -258,6 +332,9 @@
color: var(--text);
border-radius: var(--radius-sm);
}
.ghost:disabled {
opacity: 0.5;
}
.logout {
margin-top: 8px;
align-self: flex-start;