17b1d0fcda
- 웹(React+Vite): 홈(큰 버튼 2개·하던 게임 돌아가기), 6자리 코드 입력(붙여넣기 감지·자동 입장), 링크 입장(닉네임 한 칸), 대기실(코드/링크 복사·공유·QR·자리·준비·방장 메뉴·설정), 오목(SVG 판·두 번 눌러 확정·금수/위험 표시·시계·무르기·무승부·기권·키보드 조작·스크린리더 안내), 결과(한 판 더 투표·방 전적·공정성 확인), 채팅·반응, 계정(닉네임 변경·글자 크기·테마·소리·진동) - WS 클라이언트: 지수 백오프+지터 재연결, 화면 복귀/온라인 즉시 재연결, seq 순서 처리, ping/pong 지연·시계 보정, 서버 재시작 안내, 다른 창 접속 처리 - @bg/shared/lite: 브라우저용 진입점(zod 제외) → 첫 화면 JS 약 90KB gzip - e2e/omok.e2e.ts: 브라우저 두 개(모바일·PC)로 방 만들기→링크 입장→대국→새로고침 복구→승리→한 판 더 - deploy: Dockerfile(운영 의존성만, 267MB), docker-compose(app+Caddy), Caddyfile(보안 헤더·CSP), .env.example - 프록시 뒤에서만 X-Forwarded-For 신뢰(TRUST_PROXY=1) Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
45 lines
2.1 KiB
TypeScript
45 lines
2.1 KiB
TypeScript
/** Ring countdown to a server deadline (docs/07 §4). */
|
|
import { useEffect, useRef, useState } from 'react';
|
|
import { socket } from '../net/socket';
|
|
import { haptic, sounds } from '../lib/feedback';
|
|
|
|
export function useServerNow(intervalMs = 250): number {
|
|
const [now, setNow] = useState(() => socket.now());
|
|
useEffect(() => {
|
|
const t = setInterval(() => setNow(socket.now()), intervalMs);
|
|
return () => clearInterval(t);
|
|
}, [intervalMs]);
|
|
return now;
|
|
}
|
|
|
|
export function TurnTimer({ deadline, totalMs, mine, size = 44 }: { deadline: number | null; totalMs: number; mine: boolean; size?: number }) {
|
|
const now = useServerNow();
|
|
const warned = useRef<number | null>(null);
|
|
const left = deadline ? Math.max(0, deadline - now) : null;
|
|
const sec = left === null ? null : Math.ceil(left / 1000);
|
|
useEffect(() => {
|
|
if (!mine || sec === null) return;
|
|
if ((sec === 10 || sec === 5) && warned.current !== sec) {
|
|
warned.current = sec;
|
|
sounds.warn();
|
|
if (sec === 5) haptic([60, 40, 60]);
|
|
}
|
|
}, [sec, mine]);
|
|
if (left === null) return null;
|
|
const frac = Math.min(1, left / Math.max(1, totalMs));
|
|
const color = sec! <= 5 ? 'var(--danger)' : sec! <= 10 ? 'var(--warning)' : 'var(--success)';
|
|
const r = size / 2 - 4;
|
|
const c = 2 * Math.PI * r;
|
|
return (
|
|
<span style={{ position: 'relative', width: size, height: size, display: 'inline-flex' }} role="timer" aria-label={`남은 시간 ${sec}초`}>
|
|
<svg width={size} height={size} style={{ transform: 'rotate(-90deg)' }} aria-hidden>
|
|
<circle cx={size / 2} cy={size / 2} r={r} fill="none" stroke="var(--surface-2)" strokeWidth={4} />
|
|
<circle cx={size / 2} cy={size / 2} r={r} fill="none" stroke={color} strokeWidth={4} strokeDasharray={c} strokeDashoffset={c * (1 - frac)} strokeLinecap="round" />
|
|
</svg>
|
|
<span style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', fontWeight: 700, fontSize: size > 40 ? '0.95rem' : '0.8rem', color }}>
|
|
{sec! >= 600 ? `${Math.floor(sec! / 60)}분` : sec! >= 100 ? `${Math.floor(sec! / 60)}:${String(sec! % 60).padStart(2, '0')}` : sec}
|
|
</span>
|
|
</span>
|
|
);
|
|
}
|