Build Apps with Grok

import { useState } from "react"

const faces = ["⚀", "⚁", "⚂", "⚃", "⚄", "⚅"]

function DiceRoller() {
  const [result, setResult] = useState(0)
  const [rolling, setRolling] = useState(false)
  const [history, setHistory] = useState<number[]>([])

  const roll = () => {
    setRolling(true)
    let ticks = 0
    const interval = setInterval(() => {
      setResult(Math.floor(Math.random() * 6))
      ticks++
      if (ticks > 10) {
        clearInterval(interval)
        const final = Math.floor(Math.random() * 6)
        setResult(final)
        setHistory(prev => [final + 1, ...prev].slice(0, 10))
        setRolling(false)
      }
    }, 80)
  }

  return (
    <div className="text-center p-8">
      <div className={`text-8xl mb-6 transition-transform ${rolling ? "animate-bounce" : ""}`}>
        {faces[result]}
      </div>
      <button onClick={roll} disabled={rolling}
        className="px-8 py-3 bg-purple-600 text-white rounded-full text-lg disabled:opacity-50">
        {rolling ? "Rolling..." : "Roll Dice"}
      </button>
      {history.length > 0 && (
        <div className="mt-4 flex gap-2 justify-center">
          {history.map((v, i) => (
            <span key={i} className="text-2xl opacity-50">{faces[v - 1]}</span>
          ))}
        </div>
      )}
    </div>
  )
}