diff --git a/SerpentRace_Frontend/src/pages/Game/GameScreen.jsx b/SerpentRace_Frontend/src/pages/Game/GameScreen.jsx index 364f1af1..bf9bfeef 100644 --- a/SerpentRace_Frontend/src/pages/Game/GameScreen.jsx +++ b/SerpentRace_Frontend/src/pages/Game/GameScreen.jsx @@ -66,12 +66,17 @@ const GameScreen = () => { { id: 3, name: "Fürtös", position: 68, score: 14, color: "bg-yellow-600", emoji: "😂" }, ]) + // New: selected dice value from dropdown (null = none) + const [selectedDice, setSelectedDice] = useState(null) + // Sort players by position in descending order const sortedPlayers = [...players].sort((a, b) => b.position - a.position) - // Handle dice roll + // Handle dice roll completion const handleDiceRoll = (value) => { console.log("Rolled:", value) + // reset dropdown selection after roll + setSelectedDice(null) // You can add logic here to move the current player based on the dice value } @@ -118,9 +123,6 @@ const GameScreen = () => { {/* Háttér */}
{[...Array(35)].map((_, i) => ( - // Sajat pulse effect! => node_modules/tailwindcss/index.css: - // --animate-pulse8: pulse 6s cubic-bezier(0.4, 0.2, 0.6, 1) infinite; -
{ {/* Dice Container */}

Dobókocka

-

Kattints a kockára dobáshoz!

- +

+ Kattints a kockára dobáshoz vagy válassz egy számot az alábbiból! +

+ + {/* Dropdown to select number 1-6 (triggers animated roll to that number) */} +
+ +
+ +
diff --git a/SerpentRace_Frontend/src/utils/dice/Dice.jsx b/SerpentRace_Frontend/src/utils/dice/Dice.jsx index 756a69cf..b752c17b 100644 --- a/SerpentRace_Frontend/src/utils/dice/Dice.jsx +++ b/SerpentRace_Frontend/src/utils/dice/Dice.jsx @@ -1,74 +1,103 @@ -import React, { useState, useEffect, useRef } from 'react'; +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 Dice = ({ onRoll }) => { - const [diceValue, setDiceValue] = useState(1); - const [isRolling, setIsRolling] = useState(false); - const animationRef = useRef(null); - const rollTimeoutRef = useRef(null); - const diceFaces = [ - [
], - [
,
], - [
,
,
], - [
,
, -
,
], - [
,
, -
, -
,
], - [
,
, -
,
, -
,
] - ]; - + [
], + [ +
, +
, + ], + [ +
, +
, +
, + ], + [ +
, +
, +
, +
, + ], + [ +
, +
, +
, +
, +
, + ], + [ +
, +
, +
, +
, +
, +
, + ], + ] + useEffect(() => { return () => { - if (animationRef.current) cancelAnimationFrame(animationRef.current); - if (rollTimeoutRef.current) clearTimeout(rollTimeoutRef.current); - }; - }, []); - - const rollDice = () => { - if (isRolling) return; - - setIsRolling(true); - - let duration = 0; - const rollInterval = 80; // ms between dice face changes - const maxDuration = 1500; // total animation time - + 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; - + 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); + const nextInterval = rollInterval * (1 + (duration / maxDuration) * 2) rollTimeoutRef.current = setTimeout(() => { - animationRef.current = requestAnimationFrame(rollAnimation); - }, nextInterval); + animationRef.current = requestAnimationFrame(rollAnimation) + }, nextInterval) } else { - // Final roll - const finalValue = Math.floor(Math.random() * 6) + 1; - setDiceValue(finalValue); - setIsRolling(false); - - if (onRoll) onRoll(finalValue); + // 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); - }; - + } + + 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 ( -
-
- {diceFaces[diceValue - 1]} -
+
+
{diceFaces[diceValue - 1]}
- ); -}; + ) +} -export default Dice; +export default Dice diff --git a/SerpentRace_Frontend/src/utils/dice/diceDotPositions.js b/SerpentRace_Frontend/src/utils/dice/diceDotPositions.js new file mode 100644 index 00000000..09cbdcfd --- /dev/null +++ b/SerpentRace_Frontend/src/utils/dice/diceDotPositions.js @@ -0,0 +1,9 @@ +export const dotPositions = { + center: { top: "50%", left: "50%", transform: "translate(-50%, -50%)" }, + topLeft: { top: "20%", left: "20%" }, + bottomRight: { bottom: "20%", right: "20%" }, + topRight: { top: "20%", right: "20%" }, + bottomLeft: { bottom: "20%", left: "20%" }, + middleLeft: { top: "50%", left: "20%", transform: "translateY(-50%)" }, + middleRight: { top: "50%", right: "20%", transform: "translateY(-50%)" }, +}