import React, { useState, useCallback, useRef, useEffect } from "react"; import { Play, RotateCcw, Plus, X } from "lucide-react"; var LANG = (typeof navigator !== "undefined" ? navigator.language : "ko").slice(0, 2); var T = { ko: { title: "사다리 타기", start: "시작!", reset: "다시", player: "참가자", result: "결과", add: "추가", empty: "참가자 2명 이상 추가하세요" }, en: { title: "Ladder Game", start: "Go!", reset: "Again", player: "Player", result: "Result", add: "Add", empty: "Add at least 2 players" }, ja: { title: "あみだくじ", start: "スタート!", reset: "もう一度", player: "参加者", result: "結果", add: "追加", empty: "2人以上追加してください" }, zh: { title: "抽签梯", start: "开始!", reset: "重来", player: "参与者", result: "结果", add: "添加", empty: "至少添加2名参与者" }, }; var t = T[LANG] || T.en; var COLORS = ["#1d4ed8","#dc2626","#065f46","#7c3aed","#be185d","#0e7490","#1e3a5f","#4338ca"]; var ROWS = 8; var W = 280; var PAD = 30; var TOP_Y = 60; var BOT_Y = 340; function buildRungs(n) { var rungs = []; for (var r = 0; r < ROWS; r++) { for (var c = 0; c < n - 1; c++) { if (Math.random() > 0.4) rungs.push({ r: r, c: c }); } } return rungs; } function traceRoute(startCol, n, rungs) { var gap = n > 1 ? W / (n - 1) : 0; var rowH = (BOT_Y - TOP_Y) / (ROWS + 1); var col = startCol; var pts = []; pts.push(col * gap + PAD + "," + 10); pts.push(col * gap + PAD + "," + TOP_Y); for (var r = 0; r < ROWS; r++) { var y = TOP_Y + (r + 1) * rowH; pts.push(col * gap + PAD + "," + y); var right = rungs.find(function(rg) { return rg.r === r && rg.c === col; }); var left = rungs.find(function(rg) { return rg.r === r && rg.c === col - 1; }); if (right) { col++; pts.push(col * gap + PAD + "," + y); } else if (left) { col--; pts.push(col * gap + PAD + "," + y); } } pts.push(col * gap + PAD + "," + BOT_Y); pts.push(col * gap + PAD + "," + (BOT_Y + 30)); return { d: "M " + pts.join(" L "), endCol: col }; } export default function App() { var [players, setPlayers] = useState(["", "", ""]); var [results, setResults] = useState(["", "", ""]); var [started, setStarted] = useState(false); var [rungs, setRungs] = useState([]); var [routes, setRoutes] = useState([]); var [progress, setProgress] = useState(0); var [done, setDone] = useState(false); var animRef = useRef(null); var validPlayers = players.filter(function(p) { return p.trim(); }); var n = validPlayers.length; var gap = n > 1 ? W / (n - 1) : 0; var rowH = (BOT_Y - TOP_Y) / (ROWS + 1); var handleStart = useCallback(function() { if (n < 2) return; var rs = results.filter(function(r) { return r.trim(); }); while (rs.length < n) rs.push("?"); var shuffled = rs.slice(0, n); for (var i = shuffled.length - 1; i > 0; i--) { var j = Math.floor(Math.random() * (i + 1)); var tmp = shuffled[i]; shuffled[i] = shuffled[j]; shuffled[j] = tmp; } setResults(shuffled.concat(results.slice(n))); var newRungs = buildRungs(n); setRungs(newRungs); var allRoutes = []; for (var k = 0; k < n; k++) { allRoutes.push(traceRoute(k, n, newRungs)); } setRoutes(allRoutes); setStarted(true); setDone(false); setProgress(0); var p = 0; animRef.current = setInterval(function() { p += 0.008; if (p >= n) { p = 1; clearInterval(animRef.current); setDone(true); } setProgress(p); }, 20); }, [n, players, results]); var handleReset = useCallback(function() { clearInterval(animRef.current); setStarted(false); setDone(false); setProgress(0); setRoutes([]); setRungs([]); }, []); if (!started) { return (

🪜 {t.title}

{t.player}

{players.map(function(p, i) { return (

{i + 1}

{players.length > 2 && }

); })}

{t.result}

{results.map(function(r, i) { return ; })}

); } return (

🪜 {t.title}

{validPlayers.map(function(p, i) { return {p}; })}

{results.slice(0, n).map(function(r, i) { return {r || "?"}; })}

{done && (

{routes.map(function(route, i) { return (

{validPlayers[i].slice(0, 1)}

{validPlayers[i]}

→

{results[route.endCol] || "?"}

); })}

)}

); }

Ladder Game

Ladder Game

reviews