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/ChooseDeck.jsx
+25 -25
View File
@@ -144,7 +144,7 @@ const ChooseDeck = () => {
<Navbar />
</div>
<main className="flex-grow text-white px-6 pt-24 pb-20">
<main className="flex-grow text-white px-4 sm:px-6 pt-20 sm:pt-24 pb-16 sm:pb-20">
<motion.section
className="max-w-6xl mx-auto"
initial={{ opacity: 0, y: 20 }}
@@ -153,7 +153,7 @@ const ChooseDeck = () => {
>
{/* Title */}
<motion.h1
className="text-5xl font-extrabold text-green-300 mb-6 text-center tracking-wide drop-shadow-lg"
className="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-green-300 mb-4 sm: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 }}
@@ -162,7 +162,7 @@ const ChooseDeck = () => {
</motion.h1>
<motion.p
className="text-lg leading-relaxed text-zinc-200 mb-10 text-center max-w-3xl mx-auto"
className="text-sm sm:text-base lg:text-lg leading-relaxed text-zinc-200 mb-6 sm:mb-10 text-center max-w-3xl mx-auto"
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8, delay: 0.2 }}
@@ -172,8 +172,8 @@ const ChooseDeck = () => {
</motion.p>
{/* Filters */}
<div className="flex flex-col md:flex-row gap-3 justify-between items-center mb-10 bg-[color:var(--color-surface)]/80 backdrop-blur-lg rounded-2xl px-6 py-4 shadow-lg">
<div className="flex gap-2 items-center w-full md:w-auto flex-wrap">
<div className="flex flex-col gap-3 mb-6 sm:mb-10 bg-[color:var(--color-surface)]/80 backdrop-blur-lg rounded-xl sm:rounded-2xl px-4 sm:px-6 py-3 sm:py-4 shadow-lg">
<div className="flex gap-2 items-center w-full flex-wrap">
<SearchBox
value={search}
onChange={(e) => setSearch(e.target.value)}
@@ -181,10 +181,10 @@ const ChooseDeck = () => {
placeholder="Keresés..."
className="mr-4"
/>
<FaFilter style={{ color: "var(--color-success)" }} className="mr-2" />
<span className="text-[color:var(--color-text)] font-semibold mr-2">Típus:</span>
<FaFilter style={{ color: "var(--color-success)" }} className="mr-1 sm:mr-2 text-sm sm:text-base" />
<span className="text-[color:var(--color-text)] font-semibold mr-1 sm:mr-2 text-xs sm:text-sm">Típus:</span>
<button
className={`px-3 py-1 rounded-lg font-medium transition-all duration-200 ${
className={`px-2 sm:px-3 py-1 rounded-lg font-medium transition-all duration-200 text-xs sm:text-sm ${
selectedType === "All"
? "bg-[color:var(--color-surface-selected)] text-[color:var(--color-text)] border border-[color:var(--color-surface)]"
: "text-[color:var(--color-text)] bg-[color:var(--color-success)]/10 hover:bg-[color:var(--color-success)]/30"
@@ -196,7 +196,7 @@ const ChooseDeck = () => {
{deckTypes.map((type) => (
<button
key={type.label}
className={`px-3 py-1 rounded-lg font-medium transition-all duration-200 ml-1 ${
className={`px-2 sm:px-3 py-1 rounded-lg font-medium transition-all duration-200 ml-1 text-xs sm:text-sm ${
selectedType === type.label
? "text-[color:var(--color-text-inverse)] border border-[color:var(--color-surface)]"
: "text-[color:var(--color-text)] bg-[color:var(--color-success)]/10 hover:bg-[color:var(--color-success)]/30"
@@ -207,9 +207,9 @@ const ChooseDeck = () => {
{type.label === "Luck" ? "Szerencse" : type.label === "Question" ? "Kérdés" : "Joker"}
</button>
))}
<span className="text-[color:var(--color-text)] font-semibold mr-2 ml-2">Eredet:</span>
<span className="text-[color:var(--color-text)] font-semibold mr-1 sm:mr-2 ml-1 sm:ml-2 text-xs sm:text-sm">Eredet:</span>
<select
className="px-3 py-1 rounded-lg bg-[color:var(--color-success)]/10 hover:bg-[color:var(--color-success)]/30 text-[color:var(--color-text)] border-none focus:ring-2 focus:ring-[color:var(--color-success)] outline-none"
className="px-2 sm:px-3 py-1 rounded-lg bg-[color:var(--color-success)]/10 hover:bg-[color:var(--color-success)]/30 text-[color:var(--color-text)] border-none focus:ring-2 focus:ring-[color:var(--color-success)] outline-none text-xs sm:text-sm"
value={selectedOrigin}
onChange={(e) => setSelectedOrigin(e.target.value)}
>
@@ -223,7 +223,7 @@ const ChooseDeck = () => {
</option>
))}
</select>
<span className="text-[color:var(--color-text)] font-semibold mr-2 ml-2 flex items-center gap-1">
<span className="text-[color:var(--color-text)] font-semibold mr-1 sm:mr-2 ml-1 sm:ml-2 flex items-center gap-1 text-xs sm:text-sm">
Rendezés:
<button
type="button"
@@ -236,7 +236,7 @@ const ChooseDeck = () => {
</button>
</span>
<select
className="px-3 py-1 rounded-lg bg-[color:var(--color-success)]/10 hover:bg-[color:var(--color-success)]/30 text-[color:var(--color-text)] border-none focus:ring-2 focus:ring-[color:var(--color-success)] outline-none"
className="px-2 sm:px-3 py-1 rounded-lg bg-[color:var(--color-success)]/10 hover:bg-[color:var(--color-success)]/30 text-[color:var(--color-text)] border-none focus:ring-2 focus:ring-[color:var(--color-success)] outline-none text-xs sm:text-sm"
value={sortBy}
onChange={(e) => setSortBy(e.target.value)}
>
@@ -280,14 +280,14 @@ const ChooseDeck = () => {
)}
{/* Selection Info */}
<div className="mb-6 text-center">
<span className="text-[color:var(--color-text)] text-lg font-semibold">
<div className="mb-4 sm:mb-6 text-center">
<span className="text-[color:var(--color-text)] text-base sm:text-lg font-semibold">
Kiválasztva: {selectedDeckIds.length} pakli
</span>
</div>
{/* Decks Grid */}
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-8 mt-8">
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-4 sm:gap-6 lg:gap-8 mt-6 sm:mt-8">
{loading && (
<div className="col-span-full text-center text-[color:var(--color-text-muted]">Betöltés...</div>
)}
@@ -305,24 +305,24 @@ const ChooseDeck = () => {
return (
<div
key={deck.id}
className={`relative flex flex-col justify-between h-48 bg-[color:var(--color-card)] rounded-2xl p-6 shadow-lg border-t-4 hover:scale-105 transition-transform duration-200 cursor-pointer ${
isSelected ? "ring-4 ring-[color:var(--color-success)]" : ""
className={`relative flex flex-col justify-between h-40 sm:h-48 bg-[color:var(--color-card)] rounded-xl sm:rounded-2xl p-4 sm:p-6 shadow-lg border-t-4 hover:scale-105 transition-transform duration-200 cursor-pointer ${
isSelected ? "ring-2 sm:ring-4 ring-[color:var(--color-success)]" : ""
}`}
style={{ borderTopColor: borderColor }}
onClick={() => toggleDeckSelection(deck.id)}
>
{/* Selection Indicator */}
<div className="absolute top-3 right-3">
<div className="absolute top-2 sm:top-3 right-2 sm:right-3">
{isSelected ? (
<FaCheckCircle className="text-3xl text-[color:var(--color-success)]" />
<FaCheckCircle className="text-2xl sm:text-3xl text-[color:var(--color-success)]" />
) : (
<FaCircle className="text-3xl text-[color:var(--color-text-muted)] opacity-30" />
<FaCircle className="text-2xl sm:text-3xl text-[color:var(--color-text-muted)] opacity-30" />
)}
</div>
<div>
<span
className="inline-block px-3 py-1 rounded-full text-xs font-bold mb-2"
className="inline-block px-2 sm:px-3 py-1 rounded-full text-[10px] sm:text-xs font-bold mb-2"
style={{
background: deckType?.color,
color: "var(--color-text-inverse)",
@@ -330,11 +330,11 @@ const ChooseDeck = () => {
>
{deck.type === "Luck" ? "Szerencse" : deck.type === "Question" ? "Kérdés" : "Joker"}
</span>
<h2 className="text-xl font-bold text-[color:var(--color-text)] mb-1 truncate">
<h2 className="text-base sm:text-xl font-bold text-[color:var(--color-text)] mb-1 truncate">
{deck.name}
</h2>
</div>
<div className="text-[color:var(--color-text-muted)] text-sm mt-2">
<div className="text-[color:var(--color-text-muted)] text-xs sm:text-sm mt-2">
Létrehozva: {deck.created}
</div>
</div>
@@ -343,7 +343,7 @@ const ChooseDeck = () => {
</div>
{/* Continue Button */}
<div className="flex justify-center mt-12">
<div className="flex justify-center mt-8 sm:mt-12">
<ButtonGreen
text={`Tovább (${selectedDeckIds.length} pakli kiválasztva)`}
onClick={handleContinue}
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