Stage 8: UI social/account/history surfaces
Wire the deferred Stage 7 surfaces end-to-end (UI -> gateway transcode -> backend REST -> existing domain services): friends (incl. one-time friend codes), per-user blocks, friend-game invitations, profile editing + email binding, the statistics screen, and the in-game history + GCG export. Friends gain two add paths (interview decision, a deliberate plan change): one-time 6-digit codes (friend_codes table, 12h TTL, single-use, rate-limited redeem); and play-gated requests (shared game required) where an explicit decline is permanent, an ignored request lapses after 30 days, and a code bypasses a decline. Migration 00006 widens friendships_status_chk and adds friend_codes. Lobby notification badge is poll + push: a new generic `notify` event drives it live; the client polls on open/focus. Language stays a single Settings control that writes through to the durable account's preferred_language. GCG export is finished-only (game.ErrGameActive) and shares/downloads the .gcg file. Tests: backend unit + inttest (friend gate/decline/code, ListInvitations, GetStats, GCG gate), gateway transcode round-trips + notify constructor, UI vitest (codecs, win-rate, share choice) + Playwright social specs. Docs: PLAN (Stage 8 done + refinements + TODO-5), ARCHITECTURE, FUNCTIONAL(+ru), UI_DESIGN, TESTING, module READMEs.
This commit is contained in:
Ilia Denisov
+218
-16
@@ -1,23 +1,141 @@
|
||||
<script lang="ts">
|
||||
import Screen from '../components/Screen.svelte';
|
||||
import { app, logout } from '../lib/app.svelte';
|
||||
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';
|
||||
|
||||
let editing = $state(false);
|
||||
let form = $state<ProfileUpdate>(blankForm());
|
||||
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 startEdit() {
|
||||
form = blankForm();
|
||||
editing = true;
|
||||
}
|
||||
|
||||
async function save() {
|
||||
try {
|
||||
app.profile = await gateway.profileUpdate(form);
|
||||
editing = false;
|
||||
showToast(t('profile.saved'));
|
||||
} catch (e) {
|
||||
handleError(e);
|
||||
}
|
||||
}
|
||||
|
||||
async function requestEmail() {
|
||||
const email = emailInput.trim();
|
||||
if (!email) return;
|
||||
try {
|
||||
await gateway.emailBindRequest(email);
|
||||
emailSent = true;
|
||||
showToast(t('profile.emailSent', { email }));
|
||||
} catch (e) {
|
||||
handleError(e);
|
||||
}
|
||||
}
|
||||
|
||||
async function confirmEmail() {
|
||||
try {
|
||||
app.profile = await gateway.emailBindConfirm(emailInput.trim(), codeInput.trim());
|
||||
emailSent = false;
|
||||
emailInput = '';
|
||||
codeInput = '';
|
||||
showToast(t('profile.emailBound'));
|
||||
} catch (e) {
|
||||
handleError(e);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<Screen title={t('profile.title')} back="/">
|
||||
<div class="page">
|
||||
{#if app.profile}
|
||||
<div class="name">{app.profile.displayName}</div>
|
||||
{#if app.profile.isGuest}<span class="badge">{t('profile.guest')}</span>{/if}
|
||||
<dl>
|
||||
<dt>{t('profile.language')}</dt>
|
||||
<dd>{app.profile.preferredLanguage}</dd>
|
||||
<dt>{t('profile.timezone')}</dt>
|
||||
<dd>{app.profile.timeZone}</dd>
|
||||
<dt>{t('profile.hintBalance')}</dt>
|
||||
<dd>{app.profile.hintBalance}</dd>
|
||||
</dl>
|
||||
<p class="muted">{t('profile.readonly')}</p>
|
||||
{@const p = app.profile}
|
||||
<div class="name">{p.displayName}</div>
|
||||
{#if p.isGuest}<span class="badge">{t('profile.guest')}</span>{/if}
|
||||
|
||||
{#if editing}
|
||||
<form class="edit" onsubmit={(e) => { e.preventDefault(); void save(); }}>
|
||||
<label>
|
||||
<span>{t('profile.displayName')}</span>
|
||||
<input bind:value={form.displayName} maxlength="64" />
|
||||
</label>
|
||||
<label>
|
||||
<span>{t('profile.timezone')}</span>
|
||||
<input bind:value={form.timeZone} />
|
||||
</label>
|
||||
<fieldset class="away">
|
||||
<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>
|
||||
</div>
|
||||
<p class="muted">{t('profile.awayHint')}</p>
|
||||
</fieldset>
|
||||
<label class="check">
|
||||
<input type="checkbox" bind:checked={form.blockChat} />
|
||||
<span>{t('profile.blockChat')}</span>
|
||||
</label>
|
||||
<label class="check">
|
||||
<input type="checkbox" bind:checked={form.blockFriendRequests} />
|
||||
<span>{t('profile.blockFriendRequests')}</span>
|
||||
</label>
|
||||
<div class="formacts">
|
||||
<button type="submit" class="btn">{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>
|
||||
<dd>{p.awayStart}–{p.awayEnd}</dd>
|
||||
<dt>{t('profile.hintBalance')}</dt>
|
||||
<dd>{p.hintBalance}</dd>
|
||||
</dl>
|
||||
|
||||
{#if p.isGuest}
|
||||
<p class="muted">{t('profile.guestLocked')}</p>
|
||||
{:else}
|
||||
<button class="btn" onclick={startEdit}>{t('profile.edit')}</button>
|
||||
|
||||
<section class="emailbox">
|
||||
<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>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="addrow">
|
||||
<input bind:value={codeInput} placeholder={t('profile.emailCode')} inputmode="numeric" maxlength="6" />
|
||||
<button class="btn" onclick={confirmEmail}>{t('common.ok')}</button>
|
||||
</div>
|
||||
{/if}
|
||||
</section>
|
||||
{/if}
|
||||
{/if}
|
||||
|
||||
<button class="logout" onclick={() => logout()}>{t('login.title')} / logout</button>
|
||||
{/if}
|
||||
</div>
|
||||
@@ -26,14 +144,16 @@
|
||||
<style>
|
||||
.page {
|
||||
padding: var(--pad);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
.name {
|
||||
font-size: 1.4rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
.badge {
|
||||
display: inline-block;
|
||||
margin-top: 4px;
|
||||
align-self: flex-start;
|
||||
padding: 2px 8px;
|
||||
border-radius: 999px;
|
||||
background: var(--surface-2);
|
||||
@@ -44,7 +164,7 @@
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr;
|
||||
gap: 6px 16px;
|
||||
margin: 20px 0;
|
||||
margin: 0;
|
||||
}
|
||||
dt {
|
||||
color: var(--text-muted);
|
||||
@@ -56,9 +176,91 @@
|
||||
.muted {
|
||||
color: var(--text-muted);
|
||||
font-size: 0.9rem;
|
||||
margin: 0;
|
||||
}
|
||||
.edit {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 14px;
|
||||
}
|
||||
.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'] {
|
||||
padding: 9px 11px;
|
||||
border: 1px solid var(--border);
|
||||
background: var(--surface);
|
||||
color: var(--text);
|
||||
border-radius: var(--radius-sm);
|
||||
}
|
||||
.away {
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-sm);
|
||||
padding: 10px 12px;
|
||||
margin: 0;
|
||||
}
|
||||
.away legend {
|
||||
color: var(--text-muted);
|
||||
font-size: 0.9rem;
|
||||
padding: 0 4px;
|
||||
}
|
||||
.times {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
}
|
||||
.times label {
|
||||
flex: 1;
|
||||
}
|
||||
.check {
|
||||
flex-direction: row !important;
|
||||
align-items: center;
|
||||
gap: 10px !important;
|
||||
color: var(--text) !important;
|
||||
}
|
||||
.formacts {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
}
|
||||
.emailbox h3 {
|
||||
margin: 0 0 8px;
|
||||
font-size: 0.95rem;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
.addrow {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
.addrow input {
|
||||
flex: 1;
|
||||
padding: 9px 11px;
|
||||
border: 1px solid var(--border);
|
||||
background: var(--surface);
|
||||
color: var(--text);
|
||||
border-radius: var(--radius-sm);
|
||||
}
|
||||
.btn {
|
||||
align-self: flex-start;
|
||||
padding: 9px 14px;
|
||||
border: 1px solid var(--accent);
|
||||
background: var(--accent);
|
||||
color: var(--accent-text);
|
||||
border-radius: var(--radius-sm);
|
||||
}
|
||||
.ghost {
|
||||
padding: 9px 14px;
|
||||
border: 1px solid var(--border);
|
||||
background: var(--surface);
|
||||
color: var(--text);
|
||||
border-radius: var(--radius-sm);
|
||||
}
|
||||
.logout {
|
||||
margin-top: 16px;
|
||||
margin-top: 8px;
|
||||
align-self: flex-start;
|
||||
padding: 8px 14px;
|
||||
border: 1px solid var(--border);
|
||||
background: var(--surface);
|
||||
|
||||
Reference in New Issue
Block a user