import React, { useState, useCallback, useRef } from "react"; import { Plus, X, Shuffle, Trophy } from "lucide-react"; var LANG = (typeof navigator !== "undefined" ? navigator.language : "ko").slice(0, 2); var T = { ko: { title: "랜덤 뽑기", add: "추가", placeholder: "이름/항목 입력", draw: "뽑기!", drawing: "뽑는 중...", result: "당첨!", again: "다시 뽑기", empty: "항목을 추가하세요", emptyDesc: "이름, 번호, 팀 등을 넣고 랜덤 추첨", items: "개", clear: "전체 삭제" }, en: { title: "Random Picker", add: "Add", placeholder: "Enter name/item", draw: "Draw!", drawing: "Drawing...", result: "Winner!", again: "Draw again", empty: "Add items", emptyDesc: "Add names, numbers, teams for random draw", items: "items", clear: "Clear all" }, ja: { title: "ランダム抽選", add: "追加", placeholder: "名前/項目を入力", draw: "抽選!", drawing: "抽選中...", result: "当選!", again: "もう一度", empty: "項目を追加してください", emptyDesc: "名前、番号、チームなどを追加してランダム抽選", items: "件", clear: "全削除" }, zh: { title: "随机抽签", add: "添加", placeholder: "输入名称/项目", draw: "抽签!", drawing: "抽签中...", result: "中签!", again: "再抽", empty: "添加项目", emptyDesc: "添加姓名、号码、团队进行随机抽签", items: "项", clear: "清除全部" }, }; var t = T[LANG] || T.en; var COLORS = ["from-violet-500 to-purple-600", "from-blue-500 to-indigo-600", "from-emerald-500 to-teal-600", "from-rose-500 to-pink-600", "from-amber-500 to-orange-600", "from-cyan-500 to-sky-600"]; export default function App() { var [items, setItems] = useSharedStorage("picker_v2", []); var [input, setInput] = useState(""); var [winner, setWinner] = useState(null); var [spinning, setSpinning] = useState(false); var [displayItem, setDisplayItem] = useState(null); var spinRef = useRef(null); var list = items || []; var handleAdd = useCallback(function() { if (!input.trim()) return; setItems(function(prev) { return [...(prev || []), { id: Date.now(), name: input.trim() }]; }); setInput(""); }, [input, setItems]); var handleDraw = useCallback(function() { if (spinning || list.length < 2) return; setSpinning(true); setWinner(null); var count = 0; function tick() { setDisplayItem(list[Math.floor(Math.random() * list.length)]); count++; if (count > 15 + Math.floor(Math.random() * 10)) { var w = list[Math.floor(Math.random() * list.length)]; setWinner(w); setDisplayItem(w); setSpinning(false); return; } spinRef.current = setTimeout(tick, 40 + count * 10); } tick(); }, [spinning, list]); var del = useCallback(function(id) { setItems(function(prev) { return (prev || []).filter(function(i) { return i.id !== id; }); }); if (winner && winner.id === id) setWinner(null); }, [setItems, winner]); return (

🎯 {t.title}

{winner ? (

{winner.name}

{t.result}

) : spinning && displayItem ? (

{displayItem.name}

) : (

)}

{list.map(function(item) { var isWinner = winner && winner.id === item.id; return (

{item.name}

); })}

{list.length > 0 &&

{list.length} {t.items}

}

); }

Random Picker

Random Picker

reviews