start nincs

2025-11-03 18:55:37 +01:00
parent 39e0d36a7f
commit 5d83588470
5 changed files with 522 additions and 5 deletions
@@ -0,0 +1,135 @@
+import React, { useState } from "react"
+import { useNavigate, useLocation } from "react-router-dom"
+import Navbar from "../../components/Navbar/Navbar.jsx"
+import Background from "../../assets/backgrounds/Background.jsx"
+import Footer from "../../components/Footer/Footer.jsx"
+import useRequireAuth from "../../hooks/useRequireAuth.jsx"
+import ButtonGreen from "../../components/Buttons/ButtonGreen.jsx"
+import { motion } from "framer-motion"
+
+const PlayerSetup = () => {
+  const [username] = useRequireAuth({ key: "username", redirectTo: "/" })
+  const navigate = useNavigate()
+  const location = useLocation()
+
+  const deckIds = location.state?.deckIds || []
+
+  const [maxPlayers, setMaxPlayers] = useState(4)
+  const [isPublic, setIsPublic] = useState(true)
+
+  const handleCreateLobby = () => {
+    const privacyFlag = isPublic ? 0 : 1
+    console.log({
+      deckIds,
+      playerCount: maxPlayers,
+      privacy: privacyFlag,
+    })
+    // Itt küldd el az API-nak a lobby létrehozását
+    // navigate("/game-lobby", { state: { lobbyId: response.lobbyId } })
+  }
+
+  if (deckIds.length === 0) {
+    navigate("/choosedeck")
+    return null
+  }
+
+  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-24 pb-20">
+        <motion.section
+          className="max-w-2xl mx-auto"
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.7 }}
+        >
+          <motion.h1
+            className="text-5xl font-extrabold text-green-300 mb-6 text-center tracking-wide drop-shadow-lg"
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.8, delay: 0.1 }}
+          >
+            Lobby Beállítások
+          </motion.h1>
+
+          <motion.p
+            className="text-lg leading-relaxed text-zinc-200 mb-10 text-center"
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.8, delay: 0.2 }}
+          >
+            {deckIds.length} pakli kiválasztva. Add meg a játék részleteit.
+          </motion.p>
+
+          <div className="bg-[color:var(--color-surface)]/80 backdrop-blur-lg rounded-2xl p-8 shadow-lg space-y-6">
+            {/* Max Players */}
+            <div>
+              <label className="block text-[color:var(--color-text)] font-semibold mb-2">
+                Maximális játékosszám:
+              </label>
+              <input
+                type="number"
+                min="2"
+                max="10"
+                value={maxPlayers}
+                onChange={(e) => setMaxPlayers(parseInt(e.target.value) || 2)}
+                className="w-full px-4 py-2 rounded-lg bg-[color:var(--color-card)] text-[color:var(--color-text)] border border-[color:var(--color-surface)] focus:ring-2 focus:ring-[color:var(--color-success)] outline-none"
+              />
+            </div>
+
+            {/* Public/Private */}
+            <div>
+              <label className="block text-[color:var(--color-text)] font-semibold mb-2">Játék típusa:</label>
+              <div className="flex gap-4">
+                <button
+                  className={`flex-1 px-4 py-3 rounded-lg font-medium transition-all duration-200 ${
+                    isPublic
+                      ? "bg-[color:var(--color-success)] text-[color:var(--color-text-inverse)]"
+                      : "bg-[color:var(--color-card)] text-[color:var(--color-text)] hover:bg-[color:var(--color-success)]/30"
+                  }`}
+                  onClick={() => setIsPublic(true)}
+                >
+                  🌐 Publikus
+                </button>
+                <button
+                  className={`flex-1 px-4 py-3 rounded-lg font-medium transition-all duration-200 ${
+                    !isPublic
+                      ? "bg-[color:var(--color-success)] text-[color:var(--color-text-inverse)]"
+                      : "bg-[color:var(--color-card)] text-[color:var(--color-text)] hover:bg-[color:var(--color-success)]/30"
+                  }`}
+                  onClick={() => setIsPublic(false)}
+                >
+                  🔒 Privát
+                </button>
+              </div>
+            </div>
+          </div>
+
+          {/* Action Buttons */}
+          <div className="flex justify-center gap-4 mt-8">
+            <ButtonGreen
+              text="Vissza"
+              onClick={() => navigate("/choosedeck")}
+              width="w-auto px-8"
+              className="bg-gray-600 hover:bg-gray-700"
+            />
+            <ButtonGreen text="Lobby Létrehozása" onClick={handleCreateLobby} width="w-auto px-8" />
+          </div>
+        </motion.section>
+      </main>
+
+      <footer className="mt-auto">
+        <Footer />
+      </footer>
+    </div>
+  )
+}
+
+export default PlayerSetup