import React, { useState, useCallback } from "react"; import { RotateCcw, History, X } from "lucide-react"; const LANG = (typeof navigator !== "undefined" ? navigator.language : "ko").slice(0, 2); const T = { ko: { roll: "굴리기", rolling: "굴리는 중...", history: "기록", clear: "초기화", total: "합계", count: "회" }, en: { roll: "Roll", rolling: "Rolling...", history: "History", clear: "Clear", total: "Total", count: "rolls" }, ja: { roll: "振る", rolling: "振り中...", history: "履歴", clear: "クリア", total: "合計", count: "回" }, zh: { roll: "掷骰", rolling: "掷骰中...", history: "记录", clear: "清除", total: "合计", count: "次" }, }; const t = T[LANG] || T.en; const DICE = [ { name: "D4", sides: 4, color: "from-rose-500 to-pink-600" }, { name: "D6", sides: 6, color: "from-blue-500 to-indigo-600" }, { name: "D8", sides: 8, color: "from-emerald-500 to-teal-600" }, { name: "D10", sides: 10, color: "from-amber-500 to-orange-600" }, { name: "D12", sides: 12, color: "from-purple-500 to-violet-600" }, { name: "D20", sides: 20, color: "from-red-600 to-rose-700" }, ]; export default function App() { const [diceIdx, setDiceIdx] = useState(1); const [result, setResult] = useState(null); const [rolling, setRolling] = useState(false); const [history, setHistory] = useSharedStorage("dice_hist", []); const [showHist, setShowHist] = useState(false); const [count, setCount] = useState(1); const dice = DICE[diceIdx]; const roll = useCallback(() => { if (rolling) return; setRolling(true); let ticks = 0; const iv = setInterval(() => { const results = []; for (let i = 0; i < count; i++) results.push(Math.floor(Math.random() * dice.sides) + 1); setResult(results); ticks++; if (ticks > 12) { clearInterval(iv); const final = []; for (let i = 0; i < count; i++) final.push(Math.floor(Math.random() * dice.sides) + 1); setResult(final); setHistory(prev => [{ dice: dice.name, values: final, sum: final.reduce((a, b) => a + b, 0), time: new Date().toLocaleTimeString(LANG, { hour: "2-digit", minute: "2-digit" }) }, ...(prev || []).slice(0, 29)]); setRolling(false); } }, 50); }, [dice, rolling, count, setHistory]); const total = result ? result.reduce((a, b) => a + b, 0) : 0; return (

{DICE.map((d, i) => ( ))}

{count}x

{(result || Array(count).fill(null)).map((val, i) => (

{val !== null ? val : "?"}

))}

{result && count > 1 && (

{t.total}: {total}

)}

{showHist && (

setShowHist(false)} />

{t.history}

{(history || []).map((h, i) => (

{h.dice} {h.values.join(" + ")}{h.values.length > 1 ? " = " + h.sum : ""} {h.time}

))}

)}

); }

Dice Roller

Dice Roller

reviews