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

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

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>
-              <Dice onRoll={handleDiceRoll} />
+              <p className="text-gray-300 text-sm mb-4">
+                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>