43156a9f63
- 방 막대에 [🚪 나가기]를 두고 메뉴에서는 뺀다. [← 홈]도 같은 동작. 한 번 누르면 바로 나가고, 게임 중에 자리에 앉아 있을 때만 기권 확인을 묻는다. 휴대폰은 방 링크 복사를 메뉴로 옮겨 한 줄에 맞춘다. - 자리·관전자·결과 화면의 이름을 누르면 기록 카드(이 게임 판·승·패·무·승률, 이 방 전적, 전체 합계). GET /api/users/:id/stats (로그인 필요). - 게스트 경고: 이름 정하기, 로그인 페이지, /me, 게스트가 있는 대기실. - 관리자 사용자 상세: 전체 기록, 게임별 기록 표, 최근 게임(GET /api/admin/users/:id/games). 목록에 전적 열(PC). Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
84 lines
2.7 KiB
TypeScript
84 lines
2.7 KiB
TypeScript
/** One-field start: nickname (pre-filled suggestion) + start button; Discord as secondary (docs/05 §1). */
|
||
import { useState } from 'react';
|
||
import { nicknameError, normalizeNickname, suggestNickname } from '@bg/shared/lite';
|
||
import { api, discordLoginUrl } from '../net/api';
|
||
import { useSession } from '../store/session';
|
||
|
||
export function NicknameForm({
|
||
next,
|
||
submitLabel = '이 이름으로 시작하기',
|
||
onDone,
|
||
showDiscord = true,
|
||
}: {
|
||
next: string;
|
||
submitLabel?: string;
|
||
onDone?: () => void;
|
||
/** The login page shows its own big Discord button, so it hides this one. */
|
||
showDiscord?: boolean;
|
||
}) {
|
||
const [nick, setNick] = useState(() => suggestNickname());
|
||
const [error, setError] = useState<string | null>(null);
|
||
const [busy, setBusy] = useState(false);
|
||
const discord = useSession((s) => s.discordEnabled);
|
||
|
||
const submit = async (e: React.FormEvent) => {
|
||
e.preventDefault();
|
||
const n = normalizeNickname(nick);
|
||
const err = nicknameError(n);
|
||
if (err) return setError(err);
|
||
setBusy(true);
|
||
try {
|
||
const r = await api.guest(n);
|
||
useSession.getState().setMe(r.me);
|
||
await useSession.getState().refresh();
|
||
onDone?.();
|
||
} catch (ex) {
|
||
setError((ex as Error).message);
|
||
} finally {
|
||
setBusy(false);
|
||
}
|
||
};
|
||
|
||
return (
|
||
<form className="stack" onSubmit={submit}>
|
||
<label className="field">
|
||
내 이름(닉네임)
|
||
<input
|
||
className="input"
|
||
value={nick}
|
||
onChange={(e) => {
|
||
setNick(e.target.value);
|
||
setError(null);
|
||
}}
|
||
onFocus={(e) => e.target.select()}
|
||
maxLength={20}
|
||
autoComplete="nickname"
|
||
enterKeyHint="go"
|
||
/>
|
||
</label>
|
||
{error && <p className="field-error">{error}</p>}
|
||
<button className="btn btn-primary btn-block" disabled={busy}>
|
||
{busy ? '잠시만요…' : submitLabel}
|
||
</button>
|
||
{discord && showDiscord && (
|
||
<a className="btn btn-secondary btn-block" href={discordLoginUrl(next)}>
|
||
디스코드로 로그인
|
||
</a>
|
||
)}
|
||
<GuestWarning />
|
||
<p className="muted small">이름은 나중에 언제든 바꿀 수 있어요.</p>
|
||
</form>
|
||
);
|
||
}
|
||
|
||
/** Guests are deleted with their records a day after they leave the site (docs/05 §4). */
|
||
export function GuestWarning() {
|
||
const discord = useSession((s) => s.discordEnabled);
|
||
return (
|
||
<p className="guest-warning small" role="note">
|
||
⚠️ 게스트는 기록이 오래 저장되지 않아요. 사이트에 들어오지 않은 채 하루가 지나면 계정과 기록이 모두 지워져요.
|
||
{discord && ' 기록을 남기려면 디스코드로 로그인해 주세요.'}
|
||
</p>
|
||
);
|
||
}
|