Donat/SerpentRace
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

telefonos nezet

Browse Source
This commit is contained in:
mategery
2025-11-18 15:37:29 +01:00
parent 22ea5c43f2
commit 4bcb93d357
14 changed files with 388 additions and 346 deletions
Download Patch File Download Diff File Expand all files Collapse all files
SerpentRace_Frontend/src/pages/Game/Lobby.jsx
+30 -30
View File
@@ -189,25 +189,25 @@ const Lobby = () => {
{/* Waiting for Approval Screen (Non-gamemaster, PRIVATE games) */}
{!isGamemaster && approvalStatus === "pending" && (
<div className="flex-1 flex items-center justify-center px-4 py-24">
<div className="bg-zinc-900/95 backdrop-blur-sm rounded-3xl p-8 max-w-md w-full border border-yellow-500/50 shadow-2xl">
<div className="flex-1 flex items-center justify-center px-4 py-20 sm:py-24">
<div className="bg-zinc-900/95 backdrop-blur-sm rounded-2xl sm:rounded-3xl p-6 sm:p-8 max-w-md w-full border border-yellow-500/50 shadow-2xl">
<div className="text-center">
<div className="mb-6">
<div className="inline-flex items-center justify-center w-20 h-20 rounded-full bg-yellow-900/30 border-4 border-yellow-500/50 animate-pulse">
<span className="text-4xl">⏳</span>
<div className="mb-4 sm:mb-6">
<div className="inline-flex items-center justify-center w-16 h-16 sm:w-20 sm:h-20 rounded-full bg-yellow-900/30 border-4 border-yellow-500/50 animate-pulse">
<span className="text-3xl sm:text-4xl">⏳</span>
</div>
</div>
<h2 className="text-3xl font-bold text-yellow-300 mb-4">Várakozás jóváhagyásra</h2>
<p className="text-zinc-300 text-lg mb-6">
<h2 className="text-2xl sm:text-3xl font-bold text-yellow-300 mb-3 sm:mb-4">Várakozás jóváhagyásra</h2>
<p className="text-zinc-300 text-base sm:text-lg mb-4 sm:mb-6">
A gamemaster még nem hagyta jóvá a csatlakozásodat.
</p>
<p className="text-zinc-400 text-sm mb-8">
Kérjük, várj türelemmel, amíg a gamemaster elfogadja a kérelmedet.
</p>
<div className="flex flex-col gap-3">
<div className="bg-zinc-800 rounded-lg p-4 border border-zinc-700">
<div className="flex flex-col gap-2 sm:gap-3">
<div className="bg-zinc-800 rounded-lg p-3 sm:p-4 border border-zinc-700">
<p className="text-zinc-400 text-xs mb-1">Játék kód:</p>
<p className="text-2xl font-mono font-bold text-green-300 tracking-widest">{gameCode}</p>
<p className="text-xl sm:text-2xl font-mono font-bold text-green-300 tracking-widest">{gameCode}</p>
</div>
<button
onClick={handleExit}
@@ -223,28 +223,28 @@ const Lobby = () => {
{/* Normal Lobby View (Gamemaster or approved players) */}
{(isGamemaster || approvalStatus !== "pending") && (
<div className="flex-1 flex items-center justify-center px-4 py-24">
<div className="flex-1 flex items-center justify-center px-4 py-20 sm:py-24">
<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 ${
className={`w-full max-w-3xl rounded-xl sm:rounded-2xl p-6 sm: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">
<h1 className="text-3xl sm:text-4xl md:text-5xl font-extrabold text-green-300 mb-3 sm:mb-4 text-center tracking-wide drop-shadow-lg">
Játék Lobby
</h1>
{/* Game Code Display */}
<div className="bg-gradient-to-r from-green-600/20 to-teal-600/20 rounded-xl p-6 mb-6 border-2 border-green-400/50">
<p className="text-lg text-zinc-300 mb-2 text-center font-semibold">Játék Kód:</p>
<div className="flex items-center justify-center gap-3">
<p className="text-5xl font-mono font-extrabold text-green-300 tracking-widest drop-shadow-lg">
<div className="bg-gradient-to-r from-green-600/20 to-teal-600/20 rounded-lg sm:rounded-xl p-4 sm:p-6 mb-4 sm:mb-6 border-2 border-green-400/50">
<p className="text-base sm:text-lg text-zinc-300 mb-2 text-center font-semibold">Játék Kód:</p>
<div className="flex flex-col sm:flex-row items-center justify-center gap-2 sm:gap-3">
<p className="text-3xl sm:text-4xl lg:text-5xl font-mono font-extrabold text-green-300 tracking-widest drop-shadow-lg">
{gameCode}
</p>
<button
onClick={copyGameCode}
className="bg-green-600 hover:bg-green-500 text-white px-4 py-2 rounded-lg font-semibold transition-all duration-200 hover:scale-105"
className="bg-green-600 hover:bg-green-500 text-white px-3 sm:px-4 py-2 rounded-lg font-semibold transition-all duration-200 hover:scale-105 text-sm sm:text-base w-full sm:w-auto"
title="Másolás vágólapra"
>
📋 Másolás
@@ -268,33 +268,33 @@ const Lobby = () => {
</span>
</div>
<p className="text-lg text-zinc-300 mb-6 text-center">Játékosok ({currentPlayers.length}):</p>
<p className="text-base sm:text-lg text-zinc-300 mb-4 sm:mb-6 text-center">Játékosok ({currentPlayers.length}):</p>
{/* Pending Players Section (Gamemaster only, PRIVATE games) */}
{isGamemaster && pendingPlayers && pendingPlayers.length > 0 && (
<div className="bg-yellow-900/20 border-2 border-yellow-500/50 rounded-xl shadow-lg p-6 mb-6">
<h3 className="text-xl font-bold text-yellow-300 mb-4 flex items-center gap-2">
<div className="bg-yellow-900/20 border-2 border-yellow-500/50 rounded-lg sm:rounded-xl shadow-lg p-4 sm:p-6 mb-4 sm:mb-6">
<h3 className="text-lg sm:text-xl font-bold text-yellow-300 mb-3 sm:mb-4 flex items-center gap-2">
<span>⏳</span>
Jóváhagyásra váró játékosok ({pendingPlayers.length})
</h3>
<ul className="flex flex-col gap-3">
{pendingPlayers.map((player, index) => (
<li key={index} className="bg-zinc-700 py-3 px-4 rounded-xl flex items-center gap-4">
<div className="w-10 h-10 rounded-full flex items-center justify-center text-sm font-semibold bg-yellow-900/30 text-yellow-300 border border-yellow-500/50">
<li key={index} className="bg-zinc-700 py-2 sm:py-3 px-3 sm:px-4 rounded-lg sm:rounded-xl flex flex-col sm:flex-row items-start sm:items-center gap-2 sm:gap-4">
<div className="w-8 h-8 sm:w-10 sm:h-10 rounded-full flex items-center justify-center text-xs sm:text-sm font-semibold bg-yellow-900/30 text-yellow-300 border border-yellow-500/50">
{getInitials(player.playerName)}
</div>
<div className="flex-1">
<span className="text-white text-lg font-semibold">{player.playerName}</span>
<div className="flex-1 min-w-0">
<span className="text-white text-base sm:text-lg font-semibold truncate block">{player.playerName}</span>
{player.isAuthenticated && (
<span className="ml-2 text-xs bg-green-600/30 text-green-300 px-2 py-0.5 rounded-full border border-green-500/50">
✓ Bejelentkezve
</span>
)}
</div>
<div className="flex gap-2">
<div className="flex gap-2 w-full sm:w-auto">
<button
onClick={() => handleApprovePlayer(player.playerName)}
className="bg-green-600 hover:bg-green-500 text-white px-4 py-2 rounded-lg font-semibold transition-all duration-200 hover:scale-105 flex items-center gap-1"
className="flex-1 sm:flex-none bg-green-600 hover:bg-green-500 text-white px-3 sm:px-4 py-2 rounded-lg font-semibold transition-all duration-200 hover:scale-105 flex items-center justify-center gap-1 text-sm"
title="Jóváhagyás"
>
<span>✓</span>
@@ -315,8 +315,8 @@ const Lobby = () => {
</div>
)}
<div className="bg-zinc-800/90 rounded-xl shadow-lg p-6 mb-8">
<ul className="flex flex-col gap-4">
<div className="bg-zinc-800/90 rounded-lg sm:rounded-xl shadow-lg p-4 sm:p-6 mb-6 sm:mb-8">
<ul className="flex flex-col gap-3 sm:gap-4">
{currentPlayers.length === 0 ? (
<li className="text-center text-zinc-400 py-4">Várakozás játékosokra...</li>
) : (
@@ -359,7 +359,7 @@ const Lobby = () => {
)}
</div>
<div className="flex justify-center gap-4">
<div className="flex flex-col sm:flex-row justify-center gap-3 sm:gap-4">
{isGamemaster ? (
/* Gamemaster view - can start game */
<button