Merge pull request 'dobokocka mukodik :O' (#56) from dice into main

Reviewed-on: #56
kocka kocka kocka kocka kocka kocka kocka

SerpentRace_Backend/src/Api/routers/tests.ts

@@ -1,66 +0,0 @@
-import e, { Router } from 'express';
-import { container, DIContainer } from '../../Application/Services/DIContainer';
-import { ErrorResponseService } from '../../Application/Services/ErrorResponseService';
-import { logRequest, logError, logAuth, logWarning, logOther } from '../../Application/Services/Logger';
-import { GenerateBoardCommand } from '../../Application/Game/commands/GenerateBoardCommand';
-
-const router = Router();
-
-//function to test the search service
-async function triggerAsyncBoardGeneration(gameId: string): Promise<boolean> {
-        try {
-            // Calculate default field counts based on game configuration
-            // For now, use reasonable defaults - this should be configurable by host in the future
-            const maxSpecialFieldsPercentage = parseInt(process.env.MAX_SPECIAL_FIELDS_PERCENTAGE || '67');
-            const maxSpecialFields = Math.floor((100 * maxSpecialFieldsPercentage) / 100);
-            
-            // Default distribution: 60% positive, 25% negative, 15% luck
-            const positiveFieldCount = Math.floor(maxSpecialFields * 0.6);
-            const negativeFieldCount = Math.floor(maxSpecialFields * 0.25);
-            const luckFieldCount = Math.floor(maxSpecialFields * 0.15);
-            
-            const command: GenerateBoardCommand = {
-                gameId,
-                positiveFieldCount,
-                negativeFieldCount,
-                luckFieldCount
-            };
-
-            logOther(`Triggering async board generation for game ${gameId}`, {
-                positiveFieldCount,
-                negativeFieldCount,
-                luckFieldCount,
-                totalSpecialFields: positiveFieldCount + negativeFieldCount + luckFieldCount
-            });
-
-            // Execute board generation in background
-            await DIContainer.getInstance().generateBoardCommandHandler.execute(command);
-            return true;
-
-        } catch (error) {
-            logError(`Async board generation failed for game ${gameId}`, error as Error);
-            // Don't propagate error - board generation failure shouldn't affect game creation
-            return false;
-        }
-    }
-
-
-// Game board generation endpoint
-router.post('/gameBoardGeneration', async (req, res) => {
-    try {
-        logRequest('Game board generation endpoint accessed', req, res);
-
-        const result = await triggerAsyncBoardGeneration("######-#####-#####-######");
-        
-        if (result) {
-            logOther('Game board generation triggered successfully', result);
-            return res.json({ message: 'Game board generation triggered successfully' });
-        } else {
-            throw new Error('Game board generation failed to trigger');
-        } 
-    } catch (error : any) {
-        logError('Error in game board generation endpoint', error);
-        return ErrorResponseService.sendInternalServerError(res);
-    }
-});
-export default router;

SerpentRace_Backend/src/Application/DTOs/DeckDto.ts

@@ -15,6 +15,7 @@ export interface ShortDeckDto {
   type: number;
   playedNumber: number;
   ctype: number;
+  cardsCount: number;
 }
 
 export interface DetailDeckDto {

SerpentRace_Backend/src/Application/DTOs/Mappers/DeckMapper.ts

@@ -9,6 +9,7 @@ export class DeckMapper {
       type: deck.type,
       playedNumber: deck.playedNumber,
       ctype: deck.ctype,
+      cardsCount: deck.cards.length,
     };
   }
 
@@ -26,6 +27,13 @@ export class DeckMapper {
   }
 
   static toShortDtoList(decks: DeckAggregate[]): ShortDeckDto[] {
-    return decks.map(this.toShortDto);
+    return decks.map(deck => ({
+      id: deck.id,
+      name: deck.name,
+      type: deck.type,
+      playedNumber: deck.playedNumber,
+      ctype: deck.ctype,
+      cardsCount: deck.cards.length,
+    }));
   }
 }

SerpentRace_Frontend/index.html

@@ -1,10 +1,10 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="icon" type="image/svg+xml" href="/src/assets/pictures/Logo.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React</title>
+    <title>SerpentRace</title>
   </head>
   <body>
     <div id="root"></div>

SerpentRace_Frontend/src/App.jsx

@@ -15,6 +15,7 @@ import About from "./pages/About/About"
 import ScrollToTop from "./components/ScrollToTop"
 import GameScreen from "./pages/Game/GameScreen"
 import Reports from "./pages/Report/Reports"
+import Lobby from "./pages/Lobby/Lobby"
 
 function App() {
   const [isMobile, setIsMobile] = useState(false)
@@ -46,6 +47,7 @@ function App() {
     <Router>
       <Routes>
         <Route path="/about" element={<About />} />
+        <Route path="/lobby" element={<Lobby />} />
         <Route path="/register" element={<AuthRegister />} />
         <Route path="/login" element={<AuthLogin />} />
         <Route path="/verify-email" element={<EmailVerification />} />

SerpentRace_Frontend/src/api/deckApi.js

@@ -10,6 +10,16 @@ export const createDeck = async (deck) => {
   }
 }
 
+// Get paginated decks (authenticated)
+export const getDecksPage = async (from = 0, to = 49) => {
+  try {
+    const response = await apiClient.get(`/decks/page/${from}/${to}`)
+    return response.data
+  } catch (err) {
+    throw err
+  }
+}
+
 export default {
   createDeck
 }

SerpentRace_Frontend/src/api/userApi.js

@@ -1,7 +1,7 @@
 import axios from "axios"
 
 export const API_CONFIG = {
-  baseURL: (import.meta.env.VITE_API_URL ? import.meta.env.VITE_API_URL : '') + "/api",
+  baseURL: (import.meta.env.VITE_API_URL ? import.meta.env.VITE_API_URL : "") + "/api",
   wsURL: "http://localhost:3000",
   timeout: 10000,
   retryAttempts: 3,
@@ -12,9 +12,9 @@ export const apiClient = axios.create({
   timeout: API_CONFIG.timeout,
   withCredentials: true, // Important for cookie-based auth
   headers: {
-    'Content-Type': 'application/json'
+    "Content-Type": "application/json",
-  }
+  },
-});
+})
 
 //login
 export const login = async (username, password) => {
@@ -36,16 +36,6 @@ export const register = async (username, email, password, fname, lname, phone) =
   }
 }
 
-//verify email
-export const verifyEmail = async (token) => {
-  try {
-    const response = await apiClient.get(`/users/verify-email/${token}`)
-    return response.data
-  } catch (error) {
-    throw error
-  }
-}
-
 // Get current user's game statistics
 export const getUserStats = async () => {
   try {

SerpentRace_Frontend/src/components/DeckCreator/DeckManager.jsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react"
+import React, { useState, useEffect } from "react"
 import { useNavigate } from "react-router-dom"
 import {
   FaPlus,
@@ -20,19 +20,7 @@ const deckTypes = [
   { label: "Fun", color: "var(--color-fun)" },
 ]
 
-const mockDecks = [
+// initial state will be fetched from backend
-  // Just for visual mockup
-  { id: 1, name: "Party Luck", type: "Luck", created: "2025-07-01", origin: "Vállalati" },
-  { id: 2, name: "Quiz Night", type: "Question", created: "2025-07-02", origin: "Saját" },
-  { id: 3, name: "Fun Times", type: "Fun", created: "2025-07-03", origin: "Vállalati" },
-  { id: 4, name: "Corporate Challenge", type: "Question", created: "2025-07-04", origin: "Vállalati" },
-  { id: 5, name: "Randomizer", type: "Luck", created: "2025-07-05", origin: "Saját" },
-  { id: 6, name: "Afterwork luck", type: "Luck", created: "2025-07-06", origin: "Saját" },
-  { id: 7, name: "Serpent Quiz", type: "Question", created: "2025-07-07", origin: "Vállalati" },
-  { id: 8, name: "Green Fortune", type: "Luck", created: "2025-07-08", origin: "Vállalati" },
-  { id: 9, name: "Team Builder", type: "Fun", created: "2025-07-09", origin: "Saját" },
-  { id: 10, name: "Knowledge Race", type: "Question", created: "2025-07-10", origin: "Saját" },
-]
 
 const origins = ["Mind", "Vállalati", "Saját"]
 
@@ -82,9 +70,39 @@ const DeckManager = () => {
   const [search, setSearch] = useState("")
   const [showSortHelp, setShowSortHelp] = useState(false)
   const [selectedDeck, setSelectedDeck] = useState(null)
+  const [decks, setDecks] = useState([])
+  const [loading, setLoading] = useState(false)
 
-  // Filter logic (mock)
+  useEffect(() => {
-  let filteredDecks = mockDecks.filter((deck) => {
+    let mounted = true
+    const load = async () => {
+      setLoading(true)
+      try {
+        const result = await import('../../api/deckApi').then(m => m.getDecksPage(0, 49))
+        if (!mounted) return
+        // map backend deck shape to UI shape
+        const mapped = result.decks.map(d => ({
+          id: d.id,
+          name: d.name,
+          type: d.type === 2 ? 'Question' : d.type === 1 ? 'Joker' : 'Luck',
+          created: d.creationdate ? new Date(d.creationdate).toLocaleDateString() : '',
+          origin: d.ctype === 2 ? 'Vállalati' : d.ctype === 0 ? 'Mind' : 'Saját',
+          raw: d
+        }))
+        setDecks(mapped)
+      } catch (err) {
+        console.error('Failed to load decks', err)
+      } finally {
+        setLoading(false)
+      }
+    }
+    load()
+    return () => { mounted = false }
+  }, [])
+
+  // Filter logic
+  const sourceDecks = decks
+  let filteredDecks = sourceDecks.filter((deck) => {
     const typeMatch = selectedType === "All" || deck.type === selectedType
     const originMatch = selectedOrigin === "Mind" || deck.origin === selectedOrigin
     const searchMatch = !search || deck.name.toLowerCase().includes(search.toLowerCase())
@@ -255,8 +273,14 @@ const DeckManager = () => {
             <FaPlus style={{ color: "var(--color-success)" }} className="text-5xl mb-2" />
             <span className="text-[color:var(--color-text)] font-semibold">Új pakli létrehozása</span>
           </div>
-          {/* Existing Decks (Mockup) */}
+          {/* Existing Decks (from backend) */}
-          {filteredDecks.map((deck) => {
+          {loading && (
+            <div className="col-span-full text-center text-[color:var(--color-text-muted)]">Betöltés...</div>
+          )}
+          {!loading && filteredDecks.length === 0 && (
+            <div className="col-span-full text-center text-[color:var(--color-text-muted)]">Nincsenek mentett paklik.</div>
+          )}
+          {!loading && filteredDecks.map((deck) => {
             const deckType = deckTypes.find((t) => t.label === deck.type)
             const borderColor = deckType ? deckType.color : "var(--color-success)"
             return (

SerpentRace_Frontend/src/components/Landingpage/PlayMenu.jsx

@@ -85,7 +85,6 @@ const PlayMenu = ({ onJoinGame, onCreateGame, user }) => {
                 <div className="text-sm text-gray-300">Nincs bejelentkezve</div>
               )}
             </div>
-            {/* opcionális kis info ikon helye, ha később kell */}
           </div>
 
           <div>

SerpentRace_Frontend/src/components/PopUp/DeckInfoPopUp.jsx

@@ -14,6 +14,10 @@ import {
 export default function DeckInfoPopUp({ deck, onClose }) {
   if (!deck) return null
 
+  // Debug: Log the deck structure to see what we're working with
+  console.log('Deck in popup:', deck)
+  console.log('Cards:', deck.cards)
+
   // Scroll blokkolás amikor a popup nyitva van
   useEffect(() => {
     // Scroll letiltása
@@ -33,13 +37,25 @@ export default function DeckInfoPopUp({ deck, onClose }) {
 
   const currentDeckType = deckTypes[deck.type] || { label: deck.type, color: "var(--color-success)" }
 
-  // Mock data - ezeket majd a backend adatokra cseréljük
+  // Use real deck data with safe fallbacks
+  const creator = deck.creatorName || deck.creator || (deck.user && deck.user.name) || "Ismeretlen"
+  const privacy = deck.origin === "Vállalati" || deck.ctype === 1 || deck.privacy === 'public' ? "Publikus" : "Privát"
+
+  // Get data from raw if available
+  const rawData = deck.raw || deck
+  
+  // Use played number from raw data for answers count
+  const questionsCount = rawData.cardCount || 0
+  const answersCount = rawData.playedNumber || 0
+
+  console.log('Calculated counts:', { questionsCount, answersCount, rawData })
+
   const mockData = {
-    creator: "John Doe",
+    ...deck,
-    privacy: deck.origin === "Vállalati" ? "Publikus" : "Privát", 
+    creator,
-    questionsCount: Math.floor(Math.random() * 50) + 10,
+    privacy,
-    answersCount: Math.floor(Math.random() * 200) + 50,
+    questionsCount,
-    ...deck
+    answersCount
   }
 
   const formatDate = (dateString) => {

SerpentRace_Frontend/src/pages/Auth/RegisterForm.jsx

@@ -6,7 +6,7 @@ import Button from "../../components/Buttons/Button"
 import { motion } from "framer-motion"
 import { useState } from "react"
 import { register } from "../../api/userApi"
-import { useNavigate } from "react-router-dom"
+import { useNavigate, useLocation } from "react-router-dom"
 
 export default function RegisterForm() {
   const [lastname, setLastname] = useState("")
@@ -19,6 +19,7 @@ export default function RegisterForm() {
   const [error, setError] = useState("")
   const [showErrorPopup, setShowErrorPopup] = useState(false)
   const navigate = useNavigate()
+  const location = useLocation()
 
   function validateEmail(email) {
     return /\S+@\S+\.\S+/.test(email)
@@ -50,7 +51,15 @@ export default function RegisterForm() {
       const response = await register(username, email, password, firstname, lastname, phone)
       // Check for 201 Created status
       if (response && response.status === 201) {
+        // Ha már a /login útvonalon van a user, a sima navigate nem biztos, hogy újraindítja a komponenst.
+        // Ilyenkor előbb beállítjuk a state-et, majd kényszerítünk egy teljes oldalletöltést.
+        if (location.pathname === "/login") {
           navigate("/login", { state: { success: true } })
+          // teljes újratöltés, hogy a login oldal újra feldolgozza a state-et
+          window.location.reload()
+        } else {
+          navigate("/login", { state: { success: true } })
+        }
       } else {
         let msg = "Sikertelen regisztráció."
         if (response && response.data && response.data.error) {

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 */}
             <div className="absolute w-full h-full opacity-10 pointer-events-none overflow-hidden">
               {[...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;
-
                 <div
                   key={i}
                   className="absolute rounded-full bg-teal-600 animate-pulse8"
@@ -222,8 +224,31 @@ const GameScreen = () => {
             {/* Dice Container */}
             <div className="bg-gray-800 rounded-xl p-4 shadow-lg border border-teal-700 text-center">
               <h2 className="text-xl font-semibold mb-3 text-teal-300">Dobókocka</h2>
-              <p className="text-gray-300 text-sm mb-4">Kattints a kockára dobáshoz!</p>
+              <p className="text-gray-300 text-sm mb-4">
-              <Dice onRoll={handleDiceRoll} />
+                Kattints a kockára dobáshoz vagy válassz egy számot az alábbiból!
+              </p>
+
+              {/* Dropdown to select number 1-6 (triggers animated roll to that number) */}
+              <div className="mb-3">
+                <select
+                  value={selectedDice ?? ""}
+                  onChange={(e) => {
+                    const v = e.target.value ? Number(e.target.value) : null
+                    setSelectedDice(v)
+                  }}
+                  className="bg-gray-900 text-gray-200 rounded-md p-2 border border-gray-700"
+                >
+                  <option value="">Válassz számot...</option>
+                  <option value="1">1</option>
+                  <option value="2">2</option>
+                  <option value="3">3</option>
+                  <option value="4">4</option>
+                  <option value="5">5</option>
+                  <option value="6">6</option>
+                </select>
+              </div>
+
+              <Dice onRoll={handleDiceRoll} selectedValue={selectedDice} />
             </div>
           </div>
         </div>

SerpentRace_Frontend/src/pages/Lobby/Lobby.jsx

@@ -0,0 +1,96 @@
+import React, { useEffect, useRef, useState } from "react"
+import { useNavigate, useLocation } from "react-router-dom"
+import Navbar from "../../components/Navbar/Navbar"
+import Background from "../../assets/backgrounds/Background.jsx"
+import useRequireAuth from "../../hooks/useRequireAuth"
+
+const Lobby = () => {
+  const [visible, setVisible] = useState(false)
+  const sectionRef = useRef(null)
+  const navigate = useNavigate()
+  const location = useLocation()
+
+  
+  const [user, setUser] = useRequireAuth()
+
+  useEffect(() => {
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting) setVisible(true)
+      },
+      { threshold: 0.3 }
+    )
+    if (sectionRef.current) observer.observe(sectionRef.current)
+    return () => observer.disconnect()
+  }, [])
+
+  const handleExit = () => {
+    if (window.confirm("Biztosan ki szeretnél lépni a lobbyból?")) {
+      navigate("/home")
+    }
+  }
+
+  const getInitials = (name) => {
+    return name
+      .split(" ")
+      .map((n) => n[0])
+      .join("")
+      .slice(0, 2)
+      .toUpperCase()
+  }
+
+  return (
+    <div className="flex flex-col min-h-screen overflow-y-auto relative">
+      <div className="fixed top-0 left-0 w-full h-full -z-10">
+        <Background />
+      </div>
+
+      <div className="fixed top-0 left-0 right-0 z-30">
+        <Navbar />
+      </div>
+
+      <main className="flex-grow text-white px-6 pt-16 mt-0 mb-20 flex items-center justify-center">
+        <section
+          ref={sectionRef}
+          className={`w-full max-w-3xl rounded-2xl p-8 md:p-10 transition-all duration-1000 ease-out backdrop-blur-md shadow-2xl ${
+            visible ? "opacity-100 translate-y-0" : "opacity-0 translate-y-10"
+          }`}
+          style={{ background: "rgba(0,0,0,0.25)" }}
+        >
+          <h1 className="text-4xl md:text-5xl font-extrabold text-green-300 mb-4 text-center tracking-wide drop-shadow-lg">
+            {user} Lobby-ja
+          </h1>
+
+          <p className="text-lg text-zinc-300 mb-8 text-center">
+            Játékosok, akik csatlakoztak ehhez a szobához:
+          </p>
+
+          <div className="bg-zinc-800/90 rounded-xl shadow-lg p-6 mb-8">
+            <ul className="flex flex-col gap-4">
+              <li className="bg-zinc-700 py-3 px-4 rounded-xl text-green-400 font-semibold flex items-center gap-4 shadow hover:shadow-green-500/20 transition">
+                <div
+                  className="w-10 h-10 rounded-full flex items-center justify-center text-sm font-semibold"
+                  style={{ background: "rgba(34,197,94,0.12)", color: "var(--color-mint)" }}
+                >
+                  {getInitials(user)}
+                </div>
+                <span className="text-white text-lg">{user}</span>
+              </li>
+            </ul>
+          </div>
+
+          <div className="flex justify-center">
+            <button
+              onClick={handleExit}
+              className="bg-gradient-to-r from-green-700 to-green-500 hover:from-green-600 hover:to-green-400 text-white px-8 py-3 rounded-xl font-semibold shadow-lg hover:shadow-green-400/30 transition-transform transform hover:scale-105"
+            >
+              Kilépés
+            </button>
+          </div>
+        </section>
+      </main>
+    </div>
+  )
+}
+
+export default Lobby

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 }) => {
+const Dice = ({ onRoll, selectedValue }) => {
-  const [diceValue, setDiceValue] = useState(1);
+  const [diceValue, setDiceValue] = useState(1)
-  const [isRolling, setIsRolling] = useState(false);
+  const [isRolling, setIsRolling] = useState(false)
-  const animationRef = useRef(null);
+  const animationRef = useRef(null)
-  const rollTimeoutRef = useRef(null);
+  const rollTimeoutRef = useRef(null)
 
   const diceFaces = [
-    [<div key="center" className="dice-dot"></div>],
+    [<div key="center" className="dice-dot" style={dotPositions.center}></div>],
-    [<div key="top-left" className="dice-dot"></div>, <div key="bottom-right" className="dice-dot"></div>],
+    [
-    [<div key="top-left" className="dice-dot"></div>, <div key="center" className="dice-dot"></div>, <div key="bottom-right" className="dice-dot"></div>],
+      <div key="top-left" className="dice-dot" style={dotPositions.topLeft}></div>,
-    [<div key="top-left" className="dice-dot"></div>, <div key="top-right" className="dice-dot"></div>, 
+      <div key="bottom-right" className="dice-dot" style={dotPositions.bottomRight}></div>,
-     <div key="bottom-left" className="dice-dot"></div>, <div key="bottom-right" className="dice-dot"></div>],
+    ],
-    [<div key="top-left" className="dice-dot"></div>, <div key="top-right" className="dice-dot"></div>, 
+    [
-     <div key="center" className="dice-dot"></div>, 
+      <div key="top-left" className="dice-dot" style={dotPositions.topLeft}></div>,
-     <div key="bottom-left" className="dice-dot"></div>, <div key="bottom-right" className="dice-dot"></div>],
+      <div key="center" className="dice-dot" style={dotPositions.center}></div>,
-    [<div key="top-left" className="dice-dot"></div>, <div key="top-right" className="dice-dot"></div>,
+      <div key="bottom-right" className="dice-dot" style={dotPositions.bottomRight}></div>,
-     <div key="middle-left" className="dice-dot"></div>, <div key="middle-right" className="dice-dot"></div>,
+    ],
-     <div key="bottom-left" className="dice-dot"></div>, <div key="bottom-right" className="dice-dot"></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 (animationRef.current) cancelAnimationFrame(animationRef.current)
-      if (rollTimeoutRef.current) clearTimeout(rollTimeoutRef.current);
+      if (rollTimeoutRef.current) clearTimeout(rollTimeoutRef.current)
-    };
+    }
-  }, []);
+  }, [])
 
-  const rollDice = () => {
+  // Helper that starts the rolling animation and finishes with targetValue if provided
-    if (isRolling) return;
+  const startRoll = (targetValue = null) => {
+    if (isRolling) return
 
-    setIsRolling(true);
+    setIsRolling(true)
 
-    let duration = 0;
+    let duration = 0
-    const rollInterval = 80; // ms between dice face changes
+    const rollInterval = 80 // ms between dice face changes
-    const maxDuration = 1500; // total animation time
+    const maxDuration = 1500 // total animation time
 
     const rollAnimation = () => {
-      const randomValue = Math.floor(Math.random() * 6) + 1;
+      const randomValue = Math.floor(Math.random() * 6) + 1
-      setDiceValue(randomValue);
+      setDiceValue(randomValue)
 
-      duration += rollInterval;
+      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);
+          animationRef.current = requestAnimationFrame(rollAnimation)
-        }, nextInterval);
+        }, nextInterval)
       } else {
-        // Final roll
+        // Final roll (use targetValue if provided)
-        const finalValue = Math.floor(Math.random() * 6) + 1;
+        const finalValue = targetValue != null ? Number(targetValue) : Math.floor(Math.random() * 6) + 1
-        setDiceValue(finalValue);
+        setDiceValue(finalValue)
-        setIsRolling(false);
+        setIsRolling(false)
 
-        if (onRoll) onRoll(finalValue);
+        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 (
-    <div 
+    <div className={`dice-container ${isRolling ? "rolling" : ""}`} onClick={rollDice}>
-      className={`dice-container ${isRolling ? 'rolling' : ''}`} 
+      <div className="dice">{diceFaces[diceValue - 1]}</div>
-      onClick={rollDice}
-    >
-      <div className="dice">
-        {diceFaces[diceValue - 1]}
-      </div>
       <style jsx>{`
         .dice-container {
           width: 80px;
@@ -107,11 +136,21 @@ const Dice = ({ onRoll }) => {
         }
 
         @keyframes roll {
-          0% { transform: rotateX(0deg) rotateY(0deg); }
+          0% {
-          25% { transform: rotateX(90deg) rotateY(45deg); }
+            transform: rotateX(0deg) rotateY(0deg);
-          50% { transform: rotateX(180deg) rotateY(90deg); }
+          }
-          75% { transform: rotateX(270deg) rotateY(135deg); }
+          25% {
-          100% { transform: rotateX(360deg) rotateY(180deg); }
+            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 {
@@ -123,17 +162,10 @@ const Dice = ({ onRoll }) => {
           box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
         }
 
-        /* Positioning dots */
+        /* removed :nth-child positioning — positions are provided inline from diceDotPositions.js */
-        .dice-dot:nth-child(1) { top: 50%; left: 50%; transform: translate(-50%, -50%); } /* Center */
-        .dice-dot:nth-child(2) { top: 20%; left: 20%; } /* Top-left */
-        .dice-dot:nth-child(3) { bottom: 20%; right: 20%; } /* Bottom-right */
-        .dice-dot:nth-child(4) { top: 20%; right: 20%; } /* Top-right */
-        .dice-dot:nth-child(5) { bottom: 20%; left: 20%; } /* Bottom-left */
-        .dice-dot:nth-child(6) { top: 50%; left: 20%; transform: translateY(-50%); } /* Middle-left */
-        .dice-dot:nth-child(7) { top: 50%; right: 20%; transform: translateY(-50%); } /* Middle-right */
       `}</style>
     </div>
-  );
+  )
-};
+}
 
-export default Dice;
+export default Dice

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%)" },
+}