[#56] Landing Pagehttps://project.mdnd-it.cc/work_packages/56

2025-07-07 10:11:41 +02:00
parent 9296782fc1
commit 19c762fe67
19 changed files with 848 additions and 138 deletions
@@ -0,0 +1,77 @@
+import React, { useState } from "react"
+import LogoCard from "../../assets/pictures/LogoCard.jsx"
+import logoImg from "../../assets/pictures/Logo.png" // <-- EZT ADD HOZZÁ
+import ButtonDark from "../Buttons/ButtonDark.jsx"
+import InputBoxDark from "../Inputs/InputBoxDark.jsx"
+
+const PlayMenu = ({ onJoinGame, onCreateGame, user }) => {
+  const [joinCode, setJoinCode] = useState("")
+  const [error, setError] = useState("")
+
+  const handleJoin = () => {
+    if (!joinCode.trim()) {
+      setError("Add meg a játék kódját!")
+      return
+    }
+    setError("")
+    onJoinGame(joinCode)
+  }
+
+  const handleCreate = () => {
+    onCreateGame()
+  }
+
+  return (
+    <section
+      className="w-[95%] max-w-6xl mx-auto my-16 flex flex-col md:flex-row items-center justify-center rounded-3xl shadow-2xl min-h-[60vh] overflow-hidden"
+      style={{
+        background: "linear-gradient(90deg, var(--color-surface) 30%, var(--color-mint) 100%)",
+      }}
+    >
+      {/* Bal oldali animáció/kép */}
+      <div className="flex-1 flex items-center justify-center w-full h-full py-10 md:py-0 md:pl-10">
+        <LogoCard
+          imageSrc={logoImg}
+          containerHeight="450px"
+          containerWidth="450px"
+          imageHeight="450px"
+          imageWidth="450px"
+          rotateAmplitude={7}
+          scaleOnHover={1.03}
+          showMobileWarning={false}
+          showTooltip={false}
+          displayOverlayContent={false}
+        />
+      </div>
+      {/* Jobb oldali panel */}
+      <div className="flex-1 w-full flex flex-col items-center justify-center px-4 md:px-12 py-10">
+        <div className="w-full max-w-md rounded-2xl p-8 flex flex-col gap-8">
+          <div>
+            <h2 className="text-lg font-semibold mb-2 text-text">Csatlakozás játékhoz</h2>
+            <div className={`${error ? "border border-error rounded-lg" : ""}`}>
+              <InputBoxDark
+                type="text"
+                placeholder="Játék kódja"
+                value={joinCode}
+                onChange={(e) => setJoinCode(e.target.value)}
+                width="w-full"
+              />
+            </div>
+            {error && <div className="text-xs mt-1 text-error">{error}</div>}
+            <div className="mt-4">
+              <ButtonDark text="Csatlakozás" type="button" onClick={handleJoin} width="w-full" />
+            </div>
+          </div>
+          {user && (
+            <div>
+              <h2 className="text-lg font-semibold mb-2 text-text">Új játék létrehozása</h2>
+              <ButtonDark text="Játék létrehozása" type="button" onClick={handleCreate} width="w-full" />
+            </div>
+          )}
+        </div>
+      </div>
+    </section>
+  )
+}
+
+export default PlayMenu