castad
/
o2o-triple-pick
9
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Compare commits

base: castad:906896afadcda20bf6c1e2b3c9a35b16328f40c9
Branches Tags
castad:develop
castad:main
..
compare: castad:56261e7667eafae622588a5f4f2d1a9fce52faad
Branches Tags
castad:develop
castad:main

No commits in common. "906896afadcda20bf6c1e2b3c9a35b16328f40c9" and "56261e7667eafae622588a5f4f2d1a9fce52faad" have entirely different histories.
906896afad ... 56261e7667

1 changed files with 70 additions and 73 deletions
Show Stats Expand all files Collapse all files

143
frontend/src/components/Arena.tsx
View File

@ -289,12 +289,9 @@ export default function Arena({
);
})}
</div>
</section>
{/* ===== 내 예측 카드 (당신의 선택 + 스코어 + 제출) — AI 예측과 분리 ===== */}
<section className="mt-5 rounded-2xl border-2 border-[var(--green)]/60 bg-[var(--bg2)] p-5 shadow-[0_0_24px_rgba(74,255,160,0.08)]">
{/* 당신의 선택 */}
<div className="flex items-center justify-between">
<div className="mt-5 flex items-center justify-between">
<span className="text-[13px] font-bold text-[var(--ink-muted)]">
{t.yourPickLabel}
</span>
@ -345,74 +342,6 @@ export default function Arena({
</>
)}
</div>
{/* 투표 제출 (이메일 + CTA) — '당신의 선택' 카드 안으로 통합 */}
{!finished && !disabled && step === "form" && (
<div className="mt-4 border-t border-[var(--line-d)] pt-4">
<div className="mb-2.5 text-center text-[15px] font-extrabold text-[var(--green)]">
{t.emailGate}
</div>
<input
type="email"
inputMode="email"
list="tp-email-suggestions"
autoComplete="email"
value={email}
onChange={(e) => setEmail(e.target.value)}
placeholder={t.emailPh}
className="w-full rounded-2xl border border-[var(--share)] bg-[#0f1217] px-4 py-3 text-[16px] text-white shadow-[0_0_0_2px_rgba(166,94,255,0.12)] outline-none focus:shadow-[0_0_0_2px_rgba(166,94,255,0.3)]"
/>
{recentEmails.length > 0 && (
<datalist id="tp-email-suggestions">
{recentEmails.map((e) => (
<option key={e} value={e} />
))}
</datalist>
)}
<label className="mt-2.5 flex items-start gap-2 text-[13px] leading-snug text-[var(--ink-muted)]">
<input
type="checkbox"
checked={notify}
onChange={(e) => setNotify(e.target.checked)}
className="mt-0.5 accent-[var(--share)]"
/>
{t.notify}
</label>
{error && (
<p className="mt-2 text-[13px] font-bold text-[#ff6b6b]">{error}</p>
)}
{/* 투표하기 버튼 — 한국-남아공전에서만 양옆에 한국·일본 캐릭터(자동 말풍선) */}
<div className="mt-3.5 flex items-end justify-center gap-1">
{isKorRsa && (
<TalkingMascot
src="/assets/mascots/dog_point.webp"
lines={DOG_LINES}
className="h-16 w-auto select-none sm:h-20"
auto
autoDelayMs={1200}
autoIntervalMs={6000}
/>
)}
<button
onClick={confirmSubmit}
disabled={!emailValid || submitting}
className="btn-share flex flex-1 items-center justify-center gap-1.5 rounded-2xl py-3 text-[15px] font-extrabold transition active:scale-[0.99] disabled:opacity-[0.72]"
>
{submitting ? "…" : <>{t.submit} <span aria-hidden>→</span></>}
</button>
{isKorRsa && (
<TalkingMascot
src="/assets/mascots/tiger_point.webp"
lines={TIGER_LINES}
className="h-16 w-auto select-none sm:h-20"
auto
autoDelayMs={4200}
autoIntervalMs={6000}
/>
)}
</div>
</div>
)}
</section>
{/* ===== 종료된 경기: 결과 보기 ===== */}
@ -458,6 +387,74 @@ export default function Arena({
</button>
)}
{/* ===== 투표 제출 (D5): 이메일 + 단일 CTA를 한 카드로 통합 ===== */}
{!finished && !disabled && step === "form" && (
<div className="mt-5 rounded-2xl border-2 border-[var(--green)]/60 bg-[var(--bg2)] p-4 shadow-[0_0_24px_rgba(74,255,160,0.08)]">
<div className="mb-2.5 text-center text-[15px] font-extrabold text-[var(--green)]">
{t.emailGate}
</div>
<input
type="email"
inputMode="email"
list="tp-email-suggestions"
autoComplete="email"
value={email}
onChange={(e) => setEmail(e.target.value)}
placeholder={t.emailPh}
className="w-full rounded-2xl border border-[var(--share)] bg-[#0f1217] px-4 py-3 text-[16px] text-white shadow-[0_0_0_2px_rgba(166,94,255,0.12)] outline-none focus:shadow-[0_0_0_2px_rgba(166,94,255,0.3)]"
/>
{recentEmails.length > 0 && (
<datalist id="tp-email-suggestions">
{recentEmails.map((e) => (
<option key={e} value={e} />
))}
</datalist>
)}
<label className="mt-2.5 flex items-start gap-2 text-[13px] leading-snug text-[var(--ink-muted)]">
<input
type="checkbox"
checked={notify}
onChange={(e) => setNotify(e.target.checked)}
className="mt-0.5 accent-[var(--share)]"
/>
{t.notify}
</label>
{error && (
<p className="mt-2 text-[13px] font-bold text-[#ff6b6b]">{error}</p>
)}
{/* 투표하기 버튼 — 한국-남아공전에서만 양옆에 한국·일본 캐릭터(탭 시 투표 말풍선) */}
<div className="mt-3.5 flex items-end justify-center gap-1">
{isKorRsa && (
<TalkingMascot
src="/assets/mascots/dog_point.webp"
lines={DOG_LINES}
className="h-16 w-auto select-none sm:h-20"
auto
autoDelayMs={1200}
autoIntervalMs={6000}
/>
)}
<button
onClick={confirmSubmit}
disabled={!emailValid || submitting}
className="btn-share flex flex-1 items-center justify-center gap-1.5 rounded-2xl py-3 text-[15px] font-extrabold transition active:scale-[0.99] disabled:opacity-[0.72]"
>
{submitting ? "…" : <>{t.submit} <span aria-hidden>→</span></>}
</button>
{isKorRsa && (
<TalkingMascot
src="/assets/mascots/tiger_point.webp"
lines={TIGER_LINES}
className="h-16 w-auto select-none sm:h-20"
auto
autoDelayMs={4200}
autoIntervalMs={6000}
/>
)}
</div>
</div>
)}
{/* ===== 제출 완료: 같은 AI + 경기별 공유 (D8) ===== */}
{!finished && step === "done" && outcome && (
<div className="mt-5 rounded-2xl border border-[var(--green)]/50 bg-[var(--bg2)] p-5">
@ -691,7 +688,7 @@ function Stepper({
−
</StepBtn>
<div className="flex w-12 flex-col items-center">
<span className="font-mono text-[32px] font-extrabold leading-none tabular-nums text-[var(--ink)]">
<span className="font-mono text-[32px] font-extrabold leading-none tabular-nums">
{value}
</span>
<span className="mt-1 text-[11px] text-[var(--ink-muted)]">{label}</span>