import { Heart, RotateCcw, ChevronRight, Users, Trophy, X } from "lucide-react"; const LANG = (() => { try { const l = (typeof navigator !== "undefined" && navigator.language) || "ko"; if (l.startsWith("ko")) return "ko"; if (l.startsWith("ja")) return "ja"; if (l.startsWith("zh")) return "zh"; return "en"; } catch { return "ko"; } })(); const t: Record> = { title: { ko: "밸런스 게임", en: "Balance Game", ja: "バランスゲーム", zh: "平衡游戏" }, subtitle: { ko: "둘이서 궁합 테스트!", en: "Compatibility Test for Two!", ja: "二人で相性テスト！", zh: "两人默契测试！" }, player1: { ko: "Player 1", en: "Player 1", ja: "プレイヤー1", zh: "玩家1" }, player2: { ko: "Player 2", en: "Player 2", ja: "プレイヤー2", zh: "玩家2" }, start: { ko: "게임 스타트", en: "Start Game", ja: "ゲーム開始", zh: "开始游戏" }, next: { ko: "다음", en: "Next", ja: "次へ", zh: "下一个" }, p1Turn: { ko: "Player 1 차례", en: "Player 1's Turn", ja: "プレイヤー1の番", zh: "玩家1的回合" }, p2Turn: { ko: "Player 2 차례", en: "Player 2's Turn", ja: "プレイヤー2の番", zh: "玩家2的回合" }, passPhone: { ko: "📱 상대에게 폰을 넘기세요!", en: "📱 Pass the phone!", ja: "📱 スマホを渡してね！", zh: "📱 把手机递过去！" }, ready: { ko: "준비 완료!", en: "Ready!", ja: "準備完了！", zh: "准备好了！" }, result: { ko: "결과", en: "Result", ja: "結果", zh: "结果" }, match: { ko: "일치", en: "Match", ja: "一致", zh: "一致" }, mismatch: { ko: "불일치 항목", en: "Mismatches", ja: "不一致項目", zh: "不一致项目" }, playAgain: { ko: "한번 더!", en: "Play Again", ja: "もう一度", zh: "再来一次" }, history: { ko: "기록", en: "History", ja: "履歴", zh: "历史" }, noHistory: { ko: "아직 기록이 없어요", en: "No history yet", ja: "まだ履歴がありません", zh: "暂无记录" }, qOf: { ko: "번째 질문", en: "of 10", ja: "問目", zh: "/ 10" }, vs: { ko: "vs", en: "vs", ja: "vs", zh: "vs" }, }; const T = (key: string) => (t[key] && t[key][LANG]) || t[key]?.["en"] || key; interface Question { ko: string; en: string; ja: string; zh: string; a: { ko: string; en: string; ja: string; zh: string }; b: { ko: string; en: string; ja: string; zh: string }; } function getQuestions(): Question[] { return [ { ko: "짜장면 vs 짬뽕", en: "Black bean noodles vs Spicy seafood noodles", ja: "ジャージャー麺 vs チャンポン", zh: "炸酱面 vs 海鲜面", a: { ko: "짜장면", en: "Black bean", ja: "ジャージャー麺", zh: "炸酱面" }, b: { ko: "짬뽕", en: "Spicy seafood", ja: "チャンポン", zh: "海鲜面" } }, { ko: "여름 vs 겨울", en: "Summer vs Winter", ja: "夏 vs 冬", zh: "夏天 vs 冬天", a: { ko: "여름", en: "Summer", ja: "夏", zh: "夏天" }, b: { ko: "겨울", en: "Winter", ja: "冬", zh: "冬天" } }, { ko: "아침형 vs 저녁형", en: "Morning person vs Night owl", ja: "朝型 vs 夜型", zh: "早起型 vs 夜猫子", a: { ko: "아침형", en: "Morning", ja: "朝型", zh: "早起型" }, b: { ko: "저녁형", en: "Night", ja: "夜型", zh: "夜猫子" } }, { ko: "산 vs 바다", en: "Mountain vs Beach", ja: "山 vs 海", zh: "山 vs 海", a: { ko: "산", en: "Mountain", ja: "山", zh: "山" }, b: { ko: "바다", en: "Beach", ja: "海", zh: "海" } }, { ko: "강아지 vs 고양이", en: "Dog vs Cat", ja: "犬 vs 猫", zh: "狗 vs 猫", a: { ko: "강아지", en: "Dog", ja: "犬", zh: "狗" }, b: { ko: "고양이", en: "Cat", ja: "猫", zh: "猫" } }, { ko: "영화 vs 드라마", en: "Movie vs Drama series", ja: "映画 vs ドラマ", zh: "电影 vs 电视剧", a: { ko: "영화", en: "Movie", ja: "映画", zh: "电影" }, b: { ko: "드라마", en: "Drama", ja: "ドラマ", zh: "电视剧" } }, { ko: "떡볶이 vs 순대", en: "Tteokbokki vs Sundae", ja: "トッポッキ vs スンデ", zh: "炒年糕 vs 血肠", a: { ko: "떡볶이", en: "Tteokbokki", ja: "トッポッキ", zh: "炒年糕" }, b: { ko: "순대", en: "Sundae", ja: "スンデ", zh: "血肠" } }, { ko: "전화 vs 문자", en: "Call vs Text", ja: "電話 vs メール", zh: "打电话 vs 发短信", a: { ko: "전화", en: "Call", ja: "電話", zh: "打电话" }, b: { ko: "문자", en: "Text", ja: "メール", zh: "发短信" } }, { ko: "소주 vs 맥주", en: "Soju vs Beer", ja: "焼酎 vs ビール", zh: "烧酒 vs 啤酒", a: { ko: "소주", en: "Soju", ja: "焼酎", zh: "烧酒" }, b: { ko: "맥주", en: "Beer", ja: "ビール", zh: "啤酒" } }, { ko: "혼자 여행 vs 같이 여행", en: "Solo travel vs Group travel", ja: "一人旅 vs グループ旅行", zh: "独自旅行 vs 结伴旅行", a: { ko: "혼자", en: "Solo", ja: "一人旅", zh: "独自" }, b: { ko: "같이", en: "Group", ja: "グループ", zh: "结伴" } }, ]; } const QUESTIONS = getQuestions(); interface HistoryEntry { date: string; score: number; total: number; } type Screen = "home" | "p1" | "pass" | "p2" | "result"; export default function App() { const [screen, setScreen] = useState("home"); const [currentQ, setCurrentQ] = useState(0); const [p1Answers, setP1Answers] = useState([]); const [p2Answers, setP2Answers] = useState([]); const [showHistory, setShowHistory] = useState(false); const [history, setHistory] = useSharedStorage("balance-history", []); const confettiRef = useRef(false); const matchCount = useMemo(() => { if (p1Answers.length !== 10 || p2Answers.length !== 10) return 0; return (p1Answers || []).reduce((acc, ans, i) => acc + (ans === p2Answers[i] ? 1 : 0), 0); }, [p1Answers, p2Answers]); const percentage = useMemo(() => Math.round((matchCount / 10) * 100), [matchCount]); const getEmoji = useCallback((pct: number) => { if (pct >= 90) return "💕"; if (pct >= 80) return "🥰"; if (pct >= 60) return "😊"; if (pct >= 40) return "🤔"; if (pct >= 20) return "😅"; return "💔"; }, []); const getGrade = useCallback((pct: number) => { if (pct >= 90) return { ko: "소울메이트!", en: "Soulmates!", ja: "ソウルメイト！", zh: "灵魂伴侣！" }[LANG] || "Soulmates!"; if (pct >= 80) return { ko: "찰떡궁합!", en: "Perfect match!", ja: "ベストマッチ！", zh: "天生一对！" }[LANG] || "Perfect match!"; if (pct >= 60) return { ko: "꽤 잘 맞아요!", en: "Pretty good!", ja: "かなり合ってる！", zh: "相当不错！" }[LANG] || "Pretty good!"; if (pct >= 40) return { ko: "다름의 매력?", en: "Opposites attract?", ja: "違いの魅力？", zh: "互补型？" }[LANG] || "Opposites attract?"; if (pct >= 20) return { ko: "아직 멀었어요", en: "Long way to go", ja: "まだまだこれから", zh: "还需努力" }[LANG] || "Long way to go"; return { ko: "완전 정반대!", en: "Total opposites!", ja: "完全に正反対！", zh: "完全相反！" }[LANG] || "Total opposites!"; }, []); const handleAnswer = useCallback((choice: number) => { if (screen === "p1") { const next = [...p1Answers, choice]; setP1Answers(next); if (next.length >= 10) { setCurrentQ(0); setScreen("pass"); } else { setCurrentQ(prev => prev + 1); } } else if (screen === "p2") { const next = [...p2Answers, choice]; setP2Answers(next); if (next.length >= 10) { setScreen("result"); const score = (p1Answers || []).reduce((acc, ans, i) => acc + (ans === next[i] ? 1 : 0), 0); const entry: HistoryEntry = { date: new Date().toLocaleDateString(), score, total: 10 }; setHistory((prev: HistoryEntry[]) => [entry, ...(Array.isArray(prev) ? prev : []).slice(0, 19)]); } else { setCurrentQ(prev => prev + 1); } } }, [screen, p1Answers, p2Answers, setHistory]); const resetGame = useCallback(() => { setScreen("home"); setCurrentQ(0); setP1Answers([]); setP2Answers([]); confettiRef.current = false; }, []); useEffect(() => { if (screen === "result" && percentage >= 80 && !confettiRef.current) { confettiRef.current = true; try { confetti({ particleCount: 120, spread: 80, origin: { y: 0.6 } }); } catch {} } }, [screen, percentage]); const q = QUESTIONS[currentQ]; const progressPct = screen === "p1" ? ((p1Answers.length) / 10) * 100 : screen === "p2" ? ((p2Answers.length) / 10) * 100 : 0; const svgRing = useMemo(() => { const r = 54; const c = 2 * Math.PI * r; const offset = c - (percentage / 100) * c; const color = percentage >= 80 ? "#f472b6" : percentage >= 60 ? "#a78bfa" : percentage >= 40 ? "#60a5fa" : "#94a3b8"; return { r, c, offset, color }; }, [percentage]); if (showHistory) { const safeHistory = Array.isArray(history) ? history : []; return (

{T("history")}

{safeHistory.length === 0 ? (

{T("noHistory")}

) : (safeHistory || []).map((entry: HistoryEntry, i: number) => { const pct = Math.round((entry.score / entry.total) * 100); return (

{entry.date}

{entry.score}/{entry.total} {T("match")}

{pct}% {getEmoji(pct)}

); })}

); } if (screen === "home") { return (

💑

{T("title")}

{T("subtitle")}

); } if (screen === "pass") { return (

📱

{T("passPhone")}

{T("p2Turn")}

); } if (screen === "result") { const mismatchIndices: number[] = []; for (let i = 0; i < 10; i++) { if (p1Answers[i] !== p2Answers[i]) mismatchIndices.push(i); } return (

{getEmoji(percentage)}

{getGrade(percentage)}

{mismatchIndices.length > 0 && (

{T("mismatch")}

{(mismatchIndices || []).map((qi) => { const mq = QUESTIONS[qi]; return (

{qi + 1}. {p1Answers[qi] === 0 ? mq.a[LANG] || mq.a.en : mq.b[LANG] || mq.b.en} {T("vs")} {p2Answers[qi] === 0 ? mq.a[LANG] || mq.a.en : mq.b[LANG] || mq.b.en}

); })}

)}

); } // Question screen (p1 or p2) const isP1 = screen === "p1"; return (

{isP1 ? T("p1Turn") : T("p2Turn")} {currentQ + 1} {T("qOf")}

{q[LANG] || q.en}

{T("vs")}

); }

밸런스 게임

밸런스 게임

reviews