import { Trophy, Plus, Trash2, Zap, RotateCcw, ChevronRight, Crown, Sparkles, X, History } from "lucide-react"; declare function useSharedStorage(key: string, defaultValue: T): [T, (value: T | ((prev: T) => T)) => void]; declare function confetti(opts?: Record): void; const LANG = (() => { try { const l = (typeof navigator !== "undefined" && navigator.language) || "en"; if (l.startsWith("ko")) return "ko"; if (l.startsWith("ja")) return "ja"; if (l.startsWith("zh")) return "zh"; return "en"; } catch { return "en"; } })(); const T: Record> = { title: { ko: "이상형 월드컵", en: "Ideal World Cup", ja: "理想ワールドカップ", zh: "理想世界杯" }, subtitle: { ko: "나만의 토너먼트를 만들어보세요", en: "Create your own tournament", ja: "自分だけのトーナメントを作ろう", zh: "创建你的专属锦标赛" }, addItem: { ko: "항목 추가", en: "Add item", ja: "項目を追加", zh: "添加选项" }, placeholder: { ko: "항목을 입력하세요...", en: "Enter an item...", ja: "項目を入力...", zh: "输入选项..." }, startBtn: { ko: "토너먼트 GO!", en: "Start Tournament!", ja: "トーナメント開始!", zh: "开始锦标赛!" }, minItems: { ko: "최소 4개 항목이 필요합니다", en: "At least 4 items required", ja: "最低4項目必要です", zh: "至少需要4个选项" }, final: { ko: "결승", en: "Final", ja: "決勝", zh: "决赛" }, semiFinal: { ko: "준결승", en: "Semi-Final", ja: "準決勝", zh: "半决赛" }, quarterFinal: { ko: "8강", en: "Quarter-Final", ja: "準々決勝", zh: "八强" }, vs: { ko: "VS", en: "VS", ja: "VS", zh: "VS" }, winner: { ko: "우승!", en: "Champion!", ja: "優勝!", zh: "冠军!" }, champion: { ko: "최종 우승자", en: "Final Champion", ja: "最終優勝者", zh: "最终冠军" }, again: { ko: "다시 하기", en: "Play Again", ja: "もう一度", zh: "再来一次" }, bracket: { ko: "토너먼트 결과", en: "Tournament Results", ja: "トーナメント結果", zh: "锦标赛结果" }, pastResults: { ko: "과거 기록", en: "Past Results", ja: "過去の記録", zh: "历史记录" }, noPast: { ko: "아직 기록이 없습니다", en: "No records yet", ja: "まだ履歴がありません", zh: "暂无记录" }, presetLunch: { ko: "🍱 점심 메뉴", en: "🍱 Lunch Menu", ja: "🍱 ランチ", zh: "🍱 午餐菜单" }, presetTravel: { ko: "✈️ 여행지", en: "✈️ Travel", ja: "✈️ 旅行先", zh: "✈️ 旅行地" }, presetMovie: { ko: "🎬 영화", en: "🎬 Movies", ja: "🎬 映画", zh: "🎬 电影" }, cnt: { ko: "개", en: "", ja: "個", zh: "个" }, selectHint: { ko: "프리셋을 선택하거나 직접 입력하세요", en: "Select a preset or add your own", ja: "プリセットを選ぶか直接入力", zh: "选择预设或自行添加" }, }; const t = (key: string) => T[key]?.[LANG] || T[key]?.["en"] || key; const LUNCH_KO = ["김치찌개", "된장찌개", "비빔밥", "냉면", "돈까스", "짜장면", "치킨", "피자", "초밥", "떡볶이", "불고기", "국밥", "파스타", "햄버거", "라멘", "카레"]; const LUNCH_EN = ["Pizza", "Sushi", "Burger", "Pasta", "Tacos", "Ramen", "Fried Chicken", "Salad", "Steak", "Curry", "Sandwich", "Bibimbap", "Pho", "Pad Thai", "Fish and Chips", "Burrito"]; const LUNCH_JA = ["ラーメン", "寿司", "カレー", "牛丼", "うどん", "天ぷら", "焼肉", "ピザ", "パスタ", "ハンバーグ", "とんかつ", "お好み焼き", "そば", "親子丼", "餃子", "サンドイッチ"]; const LUNCH_ZH = ["火锅", "炒饭", "饺子", "面条", "烧烤", "寿司", "比萨", "汉堡", "沙拉", "炸鸡", "牛排", "拉面", "煎饼", "包子", "麻辣烫", "咖喱饭"]; const TRAVEL_KO = ["제주", "파리", "도쿄", "뉴욕", "방콕", "런던", "하와이", "발리", "프라하", "두바이", "오사카", "상하이", "부산", "다낭", "묵호", "교토"]; const TRAVEL_EN = ["Paris", "Tokyo", "New York", "Bangkok", "London", "Hawaii", "Bali", "Sydney", "Prague", "Dubai", "Barcelona", "Seoul", "Osaka", "Shanghai", "Kyoto", "Santorini"]; const TRAVEL_JA = ["パリ", "東京", "ニューヨーク", "バンコク", "ロンドン", "ハワイ", "バリ", "シドニー", "プラハ", "ドバイ", "バルセロナ", "ソウル", "大阪", "上海", "京都", "サントリーニ"]; const TRAVEL_ZH = ["巴黎", "东京", "纽约", "曼谷", "伦敦", "夏威夷", "巴厘岛", "悉尼", "布拉格", "迪拜", "巴塞罗那", "首尔", "大阪", "上海", "京都", "圣托里尼"]; const MOVIE_KO = ["인터스텔라", "기생충", "어벤져스", "인셉션", "타이타닉", "매트릭스", "해리포터", "라라랜드", "다크나이트", "토이스토리", "겨울왕국", "올드보이", "쇼생크탈출", "포레스트검프", "스파이더맨", "대부"]; const MOVIE_EN = ["Interstellar", "The Dark Knight", "Inception", "Titanic", "The Matrix", "Avengers", "Harry Potter", "La La Land", "Parasite", "Forrest Gump", "Shawshank Redemption", "Frozen", "Toy Story", "Spider-Man", "The Godfather", "Spirited Away"]; const MOVIE_JA = ["千と千尋の神隠し", "君の名は", "インターステラー", "ダークナイト", "タイタニック", "マトリックス", "アベンジャーズ", "ハリーポッター", "ラ・ラ・ランド", "鬼滅の刃", "ワンピース", "となりのトトロ", "もののけ姫", "スパイダーマン", "インセプション", "パラサイト"]; const MOVIE_ZH = ["星际穿越", "盗梦空间", "泰坦尼克号", "复仇者联盟", "黑客帝国", "哈利波特", "指环王", "爱乐之城", "寄生虫", "千与千寻", "你的名字", "蝙蝠侠", "冰雪奇缘", "狮子王", "功夫", "三体"]; function getPreset(key: string): string[] { if (key === "lunch") { if (LANG === "ko") return LUNCH_KO; if (LANG === "ja") return LUNCH_JA; if (LANG === "zh") return LUNCH_ZH; return LUNCH_EN; } if (key === "travel") { if (LANG === "ko") return TRAVEL_KO; if (LANG === "ja") return TRAVEL_JA; if (LANG === "zh") return TRAVEL_ZH; return TRAVEL_EN; } if (LANG === "ko") return MOVIE_KO; if (LANG === "ja") return MOVIE_JA; if (LANG === "zh") return MOVIE_ZH; return MOVIE_EN; } interface WcRecord { id: string; date: string; champ: string; second: string; total: number; log: { rnd: string; w: string; l: string }[]; } type Phase = "setup" | "battle" | "result"; function getRoundLabel(cnt: number): string { if (cnt <= 2) return t("final"); if (cnt <= 4) return t("semiFinal"); if (cnt <= 8) return t("quarterFinal"); return "Round of " + String(cnt); } export default function App() { const [phase, setPhase] = useState("setup" as Phase); const [items, setItems] = useState([] as string[]); const [inputVal, setInputVal] = useState(""); const [pair, setPair] = useState(["", ""] as [string, string]); const [queue, setQueue] = useState([] as string[]); const [nxt, setNxt] = useState([] as string[]); const [roundSz, setRoundSz] = useState(0); const [mIdx, setMIdx] = useState(0); const [mTotal, setMTotal] = useState(0); const [champ, setChamp] = useState(""); const [second, setSecond] = useState(""); const [bLog, setBLog] = useState([] as { rnd: string; w: string; l: string }[]); const [anim, setAnim] = useState(false); const [picked, setPicked] = useState(null as "left" | "right" | null); const [showPast, setShowPast] = useState(false); const [wcRecords, setWcRecords] = useSharedStorage("worldcup-records", [] as WcRecord[]); const inputRef = useRef(null as HTMLInputElement | null); const shuffle = useCallback((arr: string[]) => { const a = [...arr]; for (let i = a.length - 1; i > 0; i--) { const j = Math.floor(Math.random() * (i + 1)); [a[i], a[j]] = [a[j], a[i]]; } return a; }, []); const nearPow2 = useCallback((n: number) => { if (n <= 4) return 4; if (n <= 8) return 8; return 16; }, []); const addItem = useCallback(() => { const val = inputVal.trim(); if (!val || items.length >= 16 || items.includes(val)) return; setItems(prev => [...prev, val]); setInputVal(""); if (inputRef.current) inputRef.current.focus(); }, [inputVal, items]); const removeItem = useCallback((idx: number) => { setItems(prev => (prev || []).filter((_, i) => i !== idx)); }, []); const loadPreset = useCallback((key: string) => { const preset = getPreset(key); setItems(shuffle(preset).slice(0, 16)); }, [shuffle]); const beginRound = useCallback((list: string[]) => { const sz = list.length; setRoundSz(sz); setQueue(list.slice(2)); setNxt([]); setPair([list[0], list[1]]); setMIdx(0); setMTotal(Math.floor(sz / 2)); setPicked(null); }, []); const startTournament = useCallback(() => { if (items.length < 4) return; const sz = nearPow2(items.length); const shuffled = shuffle(items).slice(0, sz); setBLog([]); setChamp(""); setSecond(""); setPicked(null); setPhase("battle"); beginRound(shuffled); }, [items, shuffle, nearPow2, beginRound]); const finishWithChampion = useCallback((w: string, l: string, newLog: { rnd: string; w: string; l: string }[]) => { setChamp(w); setSecond(l); setBLog(newLog); setPhase("result"); try { confetti({ particleCount: 150, spread: 80, origin: { y: 0.6 } }); } catch {} }, []); const selectWinner = useCallback((side: "left" | "right") => { if (anim) return; setPicked(side); setAnim(true); const w = side === "left" ? pair[0] : pair[1]; const l = side === "left" ? pair[1] : pair[0]; const rnd = getRoundLabel(roundSz); setTimeout(() => { const newLog = [...bLog, { rnd, w, l }]; setBLog(newLog); const updNxt = [...nxt, w]; const updQueue = [...queue]; if (updQueue.length >= 2) { const a = updQueue.shift()!; const b = updQueue.shift()!; setQueue(updQueue); setNxt(updNxt); setPair([a, b]); setMIdx(prev => prev + 1); } else if (updQueue.length === 1) { const allNext = [...updNxt, updQueue[0]]; if (allNext.length === 1) { finishWithChampion(allNext[0], l, newLog); } else { beginRound(shuffle(allNext)); } } else { if (updNxt.length === 1) { finishWithChampion(updNxt[0], l, newLog); } else { beginRound(shuffle(updNxt)); } } setPicked(null); setAnim(false); }, 500); }, [anim, pair, queue, nxt, roundSz, bLog, shuffle, beginRound, finishWithChampion]); useEffect(() => { if (phase === "result" && champ) { const entry: WcRecord = { id: Date.now().toString(), date: new Date().toLocaleDateString(), champ, second, total: items.length, log: bLog, }; setWcRecords(prev => [entry, ...(Array.isArray(prev) ? prev : [])].slice(0, 20)); } }, [phase, champ]); const resetAll = useCallback(() => { setPhase("setup"); setItems([]); setInputVal(""); setChamp(""); setSecond(""); setBLog([]); setPicked(null); }, []); const playAgain = useCallback(() => { setPhase("setup"); setChamp(""); setSecond(""); setBLog([]); setPicked(null); }, []); const canStart = items.length >= 4; if (showPast) { const records = Array.isArray(wcRecords) ? wcRecords : []; return (

{t("pastResults")}

{records.length === 0 ? (

{t("noPast")}

) : ( (records || []).map((entry: WcRecord) => (

{entry.champ}

{entry.date}

vs {entry.second} ({entry.total}{t("cnt")})

{Array.isArray(entry.log) && entry.log.length > 0 && (

{entry.log.slice(-3).map((b: { rnd: string; w: string; l: string }, i: number) => (

{b.rnd} {b.w} vs {b.l}

))}

)}

)) )}

); } if (phase === "setup") { return (

{t("title")}

{t("selectHint")}

{(["lunch", "travel", "movie"] as const).map(key => ( ))}

setInputVal(e.target.value)} onKeyDown={e => { if (e.key === "Enter") addItem(); }} placeholder={t("placeholder")} className="flex-1 py-3 px-4 rounded-xl bg-white/10 text-white placeholder:text-violet-300/40 text-base outline-none focus:ring-2 focus:ring-violet-400/50" maxLength={30} />

{items.length}{t("cnt")} {items.length < 4 ? " — " + t("minItems") : ""}

{(items || []).map((item, idx) => (

{idx + 1} {item}

))}

); } if (phase === "battle") { const roundLabel = getRoundLabel(roundSz); const leftBg = picked === "left" ? "bg-emerald-500 scale-105 shadow-lg shadow-emerald-500/30" : picked === "right" ? "bg-white/5 opacity-40 scale-95" : "bg-gradient-to-br from-rose-500/80 to-pink-600/80"; const rightBg = picked === "right" ? "bg-emerald-500 scale-105 shadow-lg shadow-emerald-500/30" : picked === "left" ? "bg-white/5 opacity-40 scale-95" : "bg-gradient-to-br from-blue-500/80 to-indigo-600/80"; const pct = mTotal > 0 ? Math.round((mIdx / mTotal) * 100) : 0; return (

{roundLabel}

{mIdx + 1} / {mTotal}

{t("vs")}

); } const lastMatches = bLog.slice(-3); return (

{t("champion")}

{champ}

{t("winner")}

{t("bracket")}

{(lastMatches || []).map((b, i) => (

{b.rnd}

{b.w} {b.l}

))}

); }

이상형 월드컵

이상형 월드컵

reviews