{
  "id": "dice-roller",
  "name": "Dice Roller",
  "category": "lifestyle",
  "tags": ["dice", "roll", "random", "game", "rpg", "dnd"],
  "description": "Roll various dice (D4, D6, D8, D10, D12, D20) with history.",
  "triggers": ["dice roller", "roll dice", "dnd dice", "rpg dice", "random roll"],
  "defaultSize": { "w": 4, "h": 4 },
  "source": "function DiceRoller() {\n  const [sides, setSides] = React.useState(20);\n  const [result, setResult] = React.useState(null);\n  const [history, setHistory] = React.useState([]);\n  const [rolling, setRolling] = React.useState(false);\n\n  const roll = ()=>{\n    setRolling(true);\n    let count = 0;\n    const id = setInterval(()=>{\n      setResult(Math.floor(Math.random()*sides)+1);\n      count++;\n      if(count>8){\n        clearInterval(id);\n        const final = Math.floor(Math.random()*sides)+1;\n        setResult(final);\n        setHistory(h=>[{sides,result:final,time:new Date().toLocaleTimeString()},...h].slice(0,10));\n        setRolling(false);\n      }\n    },80);\n  };\n\n  const dice = [4,6,8,10,12,20,100];\n\n  return (\n    <div style={{padding:16,fontFamily:'system-ui',height:'100%',display:'flex',flexDirection:'column',alignItems:'center'}}>\n      <div style={{fontSize:18,fontWeight:700,marginBottom:12}}>Dice Roller</div>\n      <div style={{display:'flex',gap:6,marginBottom:16}}>\n        {dice.map(d=> (\n          <button key={d} onClick={()=>setSides(d)}\n            style={{width:40,height:40,borderRadius:8,border:'1px solid #ccc',background:sides===d?'#007AFF':'#fff',color:sides===d?'#fff':'#000',cursor:'pointer',fontSize:13,fontWeight:600}}>\n            D{d}\n          </button>\n        ))}\n      </div>\n      <div style={{width:80,height:80,borderRadius:16,background:rolling?'#FF9500':'#007AFF',color:'#fff',display:'flex',alignItems:'center',justifyContent:'center',fontSize:36,fontWeight:700,marginBottom:16,transition:'background 0.2s'}}>\n        {result ?? '?'}\n      </div>\n      <button onClick={roll} disabled={rolling}\n        style={{padding:'10px 28px',borderRadius:8,background:'#34C759',color:'#fff',border:'none',cursor:'pointer',fontSize:16,fontWeight:600,opacity:rolling?0.6:1}}>\n        Roll D{sides}\n      </button>\n      <div style={{marginTop:12,width:'100%',maxHeight:80,overflow:'auto'}}>\n        {history.map((h,i)=> (\n          <div key={i} style={{display:'flex',justifyContent:'space-between',padding:'4px 0',fontSize:12,color:'#888',borderBottom:'1px solid #eee'}}>\n            <span>D{h.sides}: <strong style={{color:'#000'}}>{h.result}</strong></span>\n            <span>{h.time}</span>\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n}\nrender(<DiceRoller/>);",
  "placeholders": []
}