GameScreen feltöltés

2025-08-23 00:15:27 +02:00
parent 34a6df5949
commit d8598755e0
5 changed files with 434 additions and 17 deletions
@@ -10,7 +10,8 @@ import Landingpage from "./pages/Landing/Landingpage"
 import Home from "./pages/Landing/Home"
 import DeckManagerPage from "./pages/Decks/DeckManagerPage"
 import About from "./pages/About/About"
-import ScrollToTop from "./components/ScrollToTop";
+import ScrollToTop from "./components/ScrollToTop"
+import GameScreen from "./pages/Game/GameScreen"

 function App() {
  const [isMobile, setIsMobile] = useState(false)
@@ -40,22 +41,20 @@ function App() {

  return (
    <Router>
-            <Routes>
-              <Route path="/about" element={<About />} />
-              <Route path="/register" element={<AuthRegister />} />
-              <Route path="/login" element={<AuthLogin />} />
-              <Route path="/verify-email" element={<EmailVerification />} />
-              <Route path="/forgot-password" element={<ForgotPassword />} />
-              <Route path="/reset-password" element={<ResetPassword />} />
-              <Route path="/test" element={<Test />} />
-              <Route path="/" element={<Landingpage />} />
-              <Route path="/home" element={<Home />} />
-              <Route path="/decks" element={<DeckManagerPage />} />
-              {/* Add more routes as needed */}
-            </Routes>
-          
-        
-      
+      <Routes>
+        <Route path="/about" element={<About />} />
+        <Route path="/register" element={<AuthRegister />} />
+        <Route path="/login" element={<AuthLogin />} />
+        <Route path="/verify-email" element={<EmailVerification />} />
+        <Route path="/forgot-password" element={<ForgotPassword />} />
+        <Route path="/reset-password" element={<ResetPassword />} />
+        <Route path="/test" element={<Test />} />
+        <Route path="/" element={<Landingpage />} />
+        <Route path="/home" element={<Home />} />
+        <Route path="/decks" element={<DeckManagerPage />} />
+        <Route path="/game" element={<GameScreen />} />
+        {/* Add more routes as needed */}
+      </Routes>
    </Router>
  )
 }
@@ -0,0 +1,235 @@
+import React, { useState } from "react"
+import { getVerticalOffset } from "../../utils/randomUtils"
+import Dice from "../../utils/dice/Dice"
+
+const GameScreen = () => {
+  const boardRows = 5
+  const boardCols = 20
+  const totalCells = boardRows * boardCols
+  const cellSize = 40
+  const cellMargin = 2.5
+  const rowSpacing = 70 // Extra spacing between rows
+  const topOffset = rowSpacing * 0.5 // Increase topOffset for more spacing
+  const bottomOffset = rowSpacing * 0.5 // Increase bottomOffset for more spacing
+  const boardWidthPx = boardCols * (cellSize + cellMargin * 2)
+  const boardHeightPx =
+    boardRows * (cellSize + cellMargin * 2 + rowSpacing) + topOffset + bottomOffset - rowSpacing
+
+  // Generate a snake-like path with vertical spacing and vertical offsets
+  const generateWindingPath = () => {
+    const path = []
+    let currentNum = 1
+
+    for (let row = 0; row < boardRows && currentNum <= totalCells; row++) {
+      // Calculate the y position with extra row spacing
+      const baseYPosition = topOffset + row * (cellSize + cellMargin * 2 + rowSpacing)
+
+      // If row number is even, go right; if odd, go left
+      if (row % 2 === 0) {
+        // Left to right
+        for (let col = 0; col < boardCols && currentNum <= totalCells; col++) {
+          path.push({
+            number: currentNum++,
+            x: col * (cellSize + cellMargin * 2),
+            y: baseYPosition + getVerticalOffset(currentNum - 1),
+            type: getFieldType(currentNum - 1),
+          })
+        }
+      } else {
+        // Right to left
+        for (let col = boardCols - 1; col >= 0 && currentNum <= totalCells; col--) {
+          path.push({
+            number: currentNum++,
+            x: col * (cellSize + cellMargin * 2),
+            y: baseYPosition + getVerticalOffset(currentNum - 1),
+            type: getFieldType(currentNum - 1),
+          })
+        }
+      }
+    }
+
+    return path
+  }
+
+  const getFieldType = (count) => {
+    if (count % 17 === 0) return "clover"
+    if (count % 13 === 0) return "bad"
+    if ((count + 5) % 13 === 0) return "good"
+    return "regular"
+  }
+
+  const [path, setPath] = useState(generateWindingPath())
+  const [players, setPlayers] = useState([
+    { id: 1, name: "Béla", position: 34, score: 25, color: "bg-blue-600", emoji: "🐍" },
+    { id: 2, name: "Juci", position: 50, score: 30, color: "bg-green-600", emoji: "🐢" },
+    { id: 3, name: "Kati", position: 70, score: 15, color: "bg-purple-600", emoji: "🐇" },
+    { id: 3, name: "Fürtös", position: 68, score: 14, color: "bg-yellow-600", emoji: "😂" },
+  ])
+
+  // Sort players by position in descending order
+  const sortedPlayers = [...players].sort((a, b) => b.position - a.position)
+
+  // Handle dice roll
+  const handleDiceRoll = (value) => {
+    console.log("Rolled:", value)
+    // You can add logic here to move the current player based on the dice value
+  }
+
+  console.log("Generated path length:", path.length)
+
+  const getFieldStyle = (type) => {
+    switch (type) {
+      case "clover":
+        return "bg-teal-700 border-teal-500 shadow-teal-800"
+      case "bad":
+        return "bg-red-800 border-red-600 shadow-red-900"
+      case "good":
+        return "bg-blue-800 border-blue-600 shadow-blue-900"
+      default:
+        return "bg-gray-800 border-gray-600 shadow-gray-900"
+    }
+  }
+
+  const getPlayerPosition = (playerPosition) => {
+    const field = path.find((p) => p.number === playerPosition)
+    return field ? { top: `${field.y}px`, left: `${field.x}px` } : { top: 0, left: 0 }
+  }
+
+  // Function to get medal style based on rank
+  const getMedalStyle = (rank) => {
+    switch (rank) {
+      case 1:
+        return "bg-yellow-400 text-yellow-900 border-yellow-500 shadow-yellow-600"
+      case 2:
+        return "bg-gray-400 text-gray-900 border-gray-500 shadow-gray-600"
+      case 3:
+        return "bg-orange-500 text-orange-900 border-orange-600 shadow-orange-700"
+      default:
+        return "bg-gray-700 text-gray-300 border-gray-600 shadow-gray-800"
+    }
+  }
+
+  return (
+    <div className="p-4 bg-gradient-to-br from-gray-900 via-gray-800 to-teal-900 min-h-screen flex items-center justify-center">
+      <div className="w-full">
+        <div className="flex flex-col md:flex-row gap-6 justify-center">
+          {/* Game Board */}
+          <div className="relative bg-gray-800 p-6 rounded-2xl shadow-xl border border-teal-700 flex flex-col items-center justify-center overflow-hidden">
+            {/* 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"
+                  style={{
+                    width: Math.random() * 120 + 40 + "px",
+                    height: Math.random() * 120 + 40 + "px",
+                    top: Math.random() * 100 + "%",
+                    left: Math.random() * 100 + "%",
+                    transform: "translate(-50%, -50%)",
+                  }}
+                ></div>
+              ))}
+            </div>
+            <div className="relative" style={{ height: `${boardHeightPx}px`, width: `${boardWidthPx}px` }}>
+              {/* Mezők */}
+              {path.map((field) => (
+                <div
+                  key={field.number}
+                  className={`absolute w-10 h-10 border-2 flex items-center justify-center transition-all shadow-md hover:scale-110 ${getFieldStyle(
+                    field.type
+                  )}`}
+                  style={{
+                    top: `${field.y}px`,
+                    left: `${field.x}px`,
+                    width: `${cellSize}px`,
+                    height: `${cellSize}px`,
+                    margin: `${cellMargin}px`,
+                  }}
+                >
+                  <span className="text-gray-300 text-sm font-bold">{field.number}</span>
+                </div>
+              ))}
+
+              {/* Player tokens */}
+              {players.map((player) => (
+                <div
+                  key={player.id}
+                  className={`absolute w-6 h-6 ${player.color} rounded-full border-2 border-white shadow-lg flex items-center justify-center text-white text-xs font-bold z-10 animate-bounce`}
+                  style={{
+                    ...getPlayerPosition(player.position),
+                    transform: "translate(18px, 18px)",
+                  }}
+                >
+                  {player.emoji}
+                </div>
+              ))}
+            </div>
+
+            {/* Game information */}
+            {/* <div className="bg-white rounded-xl p-2 shadow-lg border border-indigo-100 max-w-3xl mx-auto mt-4 z-10">
+                            <p className="text-gray-600 text-sm text-center">
+                                <span className="inline-flex items-center mx-2"><span className="w-3 h-3 bg-white border border-gray-300 rounded-full mr-1"></span> Sima</span>
+                                <span className="inline-flex items-center mx-2"><span className="w-3 h-3 bg-green-200 border border-green-500 rounded-full mr-1"></span> Lóhere</span>
+                                <span className="inline-flex items-center mx-2"><span className="w-3 h-3 bg-red-200 border border-red-500 rounded-full mr-1"></span> Rossz</span>
+                                <span className="inline-flex items-center mx-2"><span className="w-3 h-3 bg-blue-200 border border-blue-500 rounded-full mr-1"></span> Jó</span>
+                            </p>
+                        </div> */}
+          </div>
+
+          {/* Right sidebar */}
+          <div className="flex-1 max-w-md">
+            <div className="bg-gray-800 rounded-xl p-4 shadow-lg mb-4 border border-teal-700">
+              <h2 className="text-xl font-semibold mb-3 text-teal-300">Játékosok</h2>
+              {sortedPlayers.map((player, index) => (
+                <div
+                  key={player.id}
+                  className="flex items-center mb-3 p-2 bg-gray-900 rounded-lg hover:bg-gray-800 transition-colors"
+                >
+                  <div
+                    className={`w-8 h-8 ${player.color} rounded-full mr-3 flex items-center justify-center text-white text-sm font-bold shadow-md`}
+                  >
+                    {player.emoji}
+                  </div>
+                  <div className="flex-1">
+                    <div className="font-medium text-sm text-gray-300 flex items-center">
+                      {player.name}
+                      <span
+                        className={`ml-2 px-2 py-1 rounded-full border text-xs font-bold shadow-md ${getMedalStyle(
+                          index + 1
+                        )}`}
+                      >
+                        {index + 1 === 1
+                          ? "🥇 1st"
+                          : index + 1 === 2
+                          ? "🥈 2nd"
+                          : index + 1 === 3
+                          ? "🥉 3rd"
+                          : `${index + 1}th`}
+                      </span>
+                    </div>
+                    <div className="text-xs text-gray-500">
+                      Pozíció: {player.position} • Pontszám: {player.score}
+                    </div>
+                  </div>
+                </div>
+              ))}
+            </div>
+
+            {/* 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} />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default GameScreen
@@ -0,0 +1,24 @@
+// Scaling factor for vertical offsets
+const offsetScalingFactor = 0.4;
+
+// Predefined vertical offsets represented as a 5x20 grid of zeros
+export const verticalOffsets = [
+    0,
+    -35, -10, -5, 10, 15, 12, 5, -5, -12, -15, -12, -5, 5, 12, 15, 12, 5, -5, 10, 35,
+    -35, -10, -5, 10, 15, 12, 5, -5, -12, -15, -12, -5, 5, 12, 15, 12, 5, -5, 10, 35,
+    -35, -10, -5, 10, 15, 12, 5, -5, -12, -15, -12, -5, 5, 12, 15, 12, 5, -5, 10, 35,
+    -35, -10, -5, 10, 15, 12, 5, -5, -12, -15, -12, -5, 5, 12, 15, 12, 5, -5, 10, 35,
+    -35, -10, -5, 10, 15, 12, 5, -5, -12, -15, -12, -5, 5, 12, 15, 12, 5, -5, 10, 35,
+];
+
+/**
+ * Gets a vertical offset value from the predefined array
+ * @param {number} index - Index to retrieve from the offsets array
+ * @returns {number} Offset value
+ */
+
+export const getVerticalOffset = (index) => {
+    const normalizedIndex = index % verticalOffsets.length;
+    const offset = verticalOffsets[normalizedIndex >= 0 ? normalizedIndex : 0];
+    return offset * offsetScalingFactor; // Apply scaling factor
+};
@@ -0,0 +1,139 @@
+import React, { useState, useEffect, useRef } from 'react';
+
+const Dice = ({ onRoll }) => {
+  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"></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"></div>, <div key="top-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"></div>, <div key="top-right" className="dice-dot"></div>, 
+     <div key="center" 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"></div>, <div key="top-right" className="dice-dot"></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>]
+  ];
+  
+  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
+    
+    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
+        const finalValue = Math.floor(Math.random() * 6) + 1;
+        setDiceValue(finalValue);
+        setIsRolling(false);
+        
+        if (onRoll) onRoll(finalValue);
+      }
+    };
+    
+    animationRef.current = requestAnimationFrame(rollAnimation);
+  };
+  
+  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);
+        }
+        
+        /* Positioning dots */
+        .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;
@@ -0,0 +1,20 @@
+// Predefined vertical offsets represented as a 5x20 grid of zeros
+export const verticalOffsets = [
+  0,
+  -35, -10, -5, 10, 15, 12, 5, -5, -12, -15, -12, -5, 5, 12, 15, 12, 5, -5, 10, 35,
+  -35, -10, -5, 10, 15, 12, 5, -5, -12, -15, -12, -5, 5, 12, 15, 12, 5, -5, 10, 35,
+  -35, -10, -5, 10, 15, 12, 5, -5, -12, -15, -12, -5, 5, 12, 15, 12, 5, -5, 10, 35,
+  -35, -10, -5, 10, 15, 12, 5, -5, -12, -15, -12, -5, 5, 12, 15, 12, 5, -5, 10, 35,
+  -35, -10, -5, 10, 15, 12, 5, -5, -12, -15, -12, -5, 5, 12, 15, 12, 5, -5, 10, 35,
+];
+
+/**
+ * Gets a vertical offset value from the predefined array
+ * @param {number} index - Index to retrieve from the offsets array
+ * @returns {number} Offset value
+ */
+
+export const getVerticalOffset = (index) => {
+  const normalizedIndex = index % verticalOffsets.length;
+  return verticalOffsets[normalizedIndex >= 0 ? normalizedIndex : 0];
+};