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/components/DeckCreator/DeckManager.jsx
+22 -24
View File
@@ -147,10 +147,10 @@ const DeckManager = () => {
return (
<div className="w-full flex flex-col bg-[color:var(--color-background)]">
<div className="w-full max-w-[1200px] mx-auto px-4 py-10">
<div className="w-full max-w-[1200px] mx-auto px-4 py-10 pb-32">
{/* 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">
<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)}
@@ -158,10 +158,10 @@ const DeckManager = () => {
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"
@@ -173,7 +173,7 @@ const DeckManager = () => {
{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"
@@ -190,10 +190,9 @@ const DeckManager = () => {
: type.label}
</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"
style={{ backgroundColor: "rgba(0, 255, 0, 0.10)" }}
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)}
>
@@ -201,7 +200,7 @@ const DeckManager = () => {
<option
key={origin}
value={origin}
style={{ backgroundColor: "var(--color-surface)", color: "var(--color-text)" }}
className="bg-zinc-800 text-white"
>
{origin === "Mind"
? "Mind"
@@ -213,7 +212,7 @@ const DeckManager = () => {
</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"
@@ -226,33 +225,32 @@ const DeckManager = () => {
</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 flex items-center"
style={{ backgroundColor: "rgba(0, 255, 0, 0.10)" }}
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 flex items-center text-xs sm:text-sm"
value={sortBy}
onChange={(e) => setSortBy(e.target.value)}
aria-label="Rendezés"
>
<option
value="date-asc"
style={{ backgroundColor: "var(--color-surface)", color: "var(--color-text)" }}
className="bg-zinc-800 text-white"
>
📅↑
</option>
<option
value="date-desc"
style={{ backgroundColor: "var(--color-surface)", color: "var(--color-text)" }}
className="bg-zinc-800 text-white"
>
📅↓
</option>
<option
value="abc-asc"
style={{ backgroundColor: "var(--color-surface)", color: "var(--color-text)" }}
className="bg-zinc-800 text-white"
>
A→Z
</option>
<option
value="abc-desc"
style={{ backgroundColor: "var(--color-surface)", color: "var(--color-text)" }}
className="bg-zinc-800 text-white"
>
Z→A
</option>
@@ -316,14 +314,14 @@ const DeckManager = () => {
</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">
{/* Create New Deck (Mockup) */}
<div
onClick={() => goDeckCreator()}
className="flex flex-col items-center justify-center h-48 bg-[color:var(--color-card)] border-2 border-dashed border-[color:var(--color-success)] rounded-2xl cursor-pointer hover:bg-[color:var(--color-success)]/20 transition-all duration-200 shadow-lg"
className="flex flex-col items-center justify-center h-40 sm:h-48 bg-[color:var(--color-card)] border-2 border-dashed border-[color:var(--color-success)] rounded-xl sm:rounded-2xl cursor-pointer hover:bg-[color:var(--color-success)]/20 transition-all duration-200 shadow-lg"
>
<FaPlus style={{ color: "var(--color-success)" }} className="text-5xl mb-2" />
<span className="text-[color:var(--color-text)] font-semibold">Új pakli létrehozása</span>
<FaPlus style={{ color: "var(--color-success)" }} className="text-4xl sm:text-5xl mb-2" />
<span className="text-[color:var(--color-text)] font-semibold text-sm sm:text-base">Új pakli létrehozása</span>
</div>
{/* Existing Decks (from backend) */}
{loading && (
@@ -338,13 +336,13 @@ const DeckManager = () => {
return (
<div
key={deck.id}
className="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"
className="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"
style={{ borderTopColor: borderColor }}
onClick={() => setSelectedDeck(deck)}
>
<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)",