SerpentRace/SerpentRace_Frontend/src/utils/dice/Dice.jsx

import React, { useState, useEffect, useRef } from "react"
import { dotPositions } from "./diceDotPositions"

const Dice = ({ onRoll, selectedValue }) => {
  const [diceValue, setDiceValue] = useState(1)
  const [isRolling, setIsRolling] = useState(false)
  const animationRef = useRef(null)
  const rollTimeoutRef = useRef(null)

  const diceFaces = [
    [<div key="center" className="dice-dot" style={dotPositions.center}></div>],
    [
      <div key="top-left" className="dice-dot" style={dotPositions.topLeft}></div>,
      <div key="bottom-right" className="dice-dot" style={dotPositions.bottomRight}></div>,
    ],
    [
      <div key="top-left" className="dice-dot" style={dotPositions.topLeft}></div>,
      <div key="center" className="dice-dot" style={dotPositions.center}></div>,
      <div key="bottom-right" className="dice-dot" style={dotPositions.bottomRight}></div>,
    ],
    [
      <div key="top-left" className="dice-dot" style={dotPositions.topLeft}></div>,
      <div key="top-right" className="dice-dot" style={dotPositions.topRight}></div>,
      <div key="bottom-left" className="dice-dot" style={dotPositions.bottomLeft}></div>,
      <div key="bottom-right" className="dice-dot" style={dotPositions.bottomRight}></div>,
    ],
    [
      <div key="top-left" className="dice-dot" style={dotPositions.topLeft}></div>,
      <div key="top-right" className="dice-dot" style={dotPositions.topRight}></div>,
      <div key="center" className="dice-dot" style={dotPositions.center}></div>,
      <div key="bottom-left" className="dice-dot" style={dotPositions.bottomLeft}></div>,
      <div key="bottom-right" className="dice-dot" style={dotPositions.bottomRight}></div>,
    ],
    [
      <div key="top-left" className="dice-dot" style={dotPositions.topLeft}></div>,
      <div key="top-right" className="dice-dot" style={dotPositions.topRight}></div>,
      <div key="middle-left" className="dice-dot" style={dotPositions.middleLeft}></div>,
      <div key="middle-right" className="dice-dot" style={dotPositions.middleRight}></div>,
      <div key="bottom-left" className="dice-dot" style={dotPositions.bottomLeft}></div>,
      <div key="bottom-right" className="dice-dot" style={dotPositions.bottomRight}></div>,
    ],
  ]

  useEffect(() => {
    return () => {
      if (animationRef.current) cancelAnimationFrame(animationRef.current)
      if (rollTimeoutRef.current) clearTimeout(rollTimeoutRef.current)
    }
  }, [])

  // Helper that starts the rolling animation and finishes with targetValue if provided
  const startRoll = (targetValue = null) => {
    if (isRolling) return

    setIsRolling(true)

    let duration = 0
    const rollInterval = 80 // ms between dice face changes
    const maxDuration = 1500 // total animation time

    const rollAnimation = () => {
      const randomValue = Math.floor(Math.random() * 6) + 1
      setDiceValue(randomValue)

      duration += rollInterval

      if (duration < maxDuration) {
        // Speed effect: slow down towards the end
        const nextInterval = rollInterval * (1 + (duration / maxDuration) * 2)
        rollTimeoutRef.current = setTimeout(() => {
          animationRef.current = requestAnimationFrame(rollAnimation)
        }, nextInterval)
      } else {
        // Final roll (use targetValue if provided)
        const finalValue = targetValue != null ? Number(targetValue) : Math.floor(Math.random() * 6) + 1
        setDiceValue(finalValue)
        setIsRolling(false)

        if (onRoll) onRoll(finalValue)
      }
    }

    animationRef.current = requestAnimationFrame(rollAnimation)
  }

  // Click to roll randomly
  const rollDice = () => {
    startRoll(null)
  }

  // If parent provides a selectedValue, animate to that value
  useEffect(() => {
    if (selectedValue != null) {
      startRoll(Number(selectedValue))
    }
  }, [selectedValue])

  return (
    <div className={`dice-container ${isRolling ? "rolling" : ""}`} onClick={rollDice}>
      <div className="dice">{diceFaces[diceValue - 1]}</div>
      <style jsx>{`
        .dice-container {
          width: 80px;
          height: 80px;
          perspective: 600px;
          cursor: pointer;
          margin: 0 auto;
          transition: transform 0.2s;
        }

        .dice-container:hover {
          transform: scale(1.05);
        }

        .dice-container:active {
          transform: scale(0.95);
        }

        .dice {
          width: 100%;
          height: 100%;
          position: relative;
          transform-style: preserve-3d;
          transition: transform 0.2s;
          display: flex;
          align-items: center;
          justify-content: center;
          background-color: #e63946;
          border-radius: 10px;
          box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
          padding: 8px;
        }

        .rolling .dice {
          animation: roll 0.5s infinite linear;
        }

        @keyframes roll {
          0% {
            transform: rotateX(0deg) rotateY(0deg);
          }
          25% {
            transform: rotateX(90deg) rotateY(45deg);
          }
          50% {
            transform: rotateX(180deg) rotateY(90deg);
          }
          75% {
            transform: rotateX(270deg) rotateY(135deg);
          }
          100% {
            transform: rotateX(360deg) rotateY(180deg);
          }
        }

        .dice-dot {
          width: 14px;
          height: 14px;
          border-radius: 50%;
          background-color: white;
          position: absolute;
          box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
        }

        /* removed :nth-child positioning — positions are provided inline from diceDotPositions.js */
      `}</style>
    </div>
  )
}

export default Dice