diff --git a/SerpentRace_Frontend/src/App.jsx b/SerpentRace_Frontend/src/App.jsx index 5ff35f64..8d5df49d 100644 --- a/SerpentRace_Frontend/src/App.jsx +++ b/SerpentRace_Frontend/src/App.jsx @@ -8,6 +8,7 @@ import ForgotPassword from "./pages/Auth/ForgotPassword" import ResetPassword from "./pages/Auth/ResetPassword" import Landingpage from "./pages/Landing/Landingpage" import Home from "./pages/Landing/Home" +import DeckManagerPage from "./pages/Decks/DeckManagerPage" function App() { const [isMobile, setIsMobile] = useState(false) @@ -46,6 +47,7 @@ function App() { } /> } /> } /> + } /> {/* Add more routes as needed */} diff --git a/SerpentRace_Frontend/src/components/Landingpage/DeckManager.jsx b/SerpentRace_Frontend/src/components/Landingpage/DeckManager.jsx new file mode 100644 index 00000000..2951956a --- /dev/null +++ b/SerpentRace_Frontend/src/components/Landingpage/DeckManager.jsx @@ -0,0 +1,292 @@ +import React, { useState } from "react" +import { + FaPlus, + FaFilter, + FaCalendarAlt, + FaArrowUp, + FaArrowDown, + FaSortAlphaDown, + FaSortAlphaUp, + FaQuestionCircle, +} from "react-icons/fa" +import SearchBox from "../Search/SearchBox" +import PopUp from "../PopUp/PopUp" + +const deckTypes = [ + { label: "Luck", color: "var(--color-luck)" }, + { label: "Question", color: "var(--color-question)" }, + { label: "Fun", color: "var(--color-fun)" }, +] + +const mockDecks = [ + // Just for visual mockup + { id: 1, name: "Party Luck", type: "Luck", created: "2025-07-01", origin: "Vállalati" }, + { id: 2, name: "Quiz Night", type: "Question", created: "2025-07-02", origin: "Saját" }, + { id: 3, name: "Fun Times", type: "Fun", created: "2025-07-03", origin: "Vállalati" }, + { id: 4, name: "Corporate Challenge", type: "Question", created: "2025-07-04", origin: "Vállalati" }, + { id: 5, name: "Randomizer", type: "Luck", created: "2025-07-05", origin: "Saját" }, + { id: 6, name: "Afterwork luck", type: "Luck", created: "2025-07-06", origin: "Saját" }, + { id: 7, name: "Serpent Quiz", type: "Question", created: "2025-07-07", origin: "Vállalati" }, + { id: 8, name: "Green Fortune", type: "Luck", created: "2025-07-08", origin: "Vállalati" }, + { id: 9, name: "Team Builder", type: "Fun", created: "2025-07-09", origin: "Saját" }, + { id: 10, name: "Knowledge Race", type: "Question", created: "2025-07-10", origin: "Saját" }, +] + +const origins = ["Mind", "Vállalati", "Saját"] + +const sortOptions = [ + { + value: "date-asc", + label: ( + <> + + + + ), + }, + { + value: "date-desc", + label: ( + <> + + + + ), + }, + { + value: "abc-asc", + label: ( + <> + + + ), + }, + { + value: "abc-desc", + label: ( + <> + + + ), + }, +] + +const DeckManager = () => { + const [selectedType, setSelectedType] = useState("All") + const [selectedOrigin, setSelectedOrigin] = useState("Mind") + const [sortBy, setSortBy] = useState("date-desc") + const [search, setSearch] = useState("") + const [showSortHelp, setShowSortHelp] = useState(false) + + // Filter logic (mock) + let filteredDecks = mockDecks.filter((deck) => { + const typeMatch = selectedType === "All" || deck.type === selectedType + const originMatch = selectedOrigin === "Mind" || deck.origin === selectedOrigin + const searchMatch = !search || deck.name.toLowerCase().includes(search.toLowerCase()) + return typeMatch && originMatch && searchMatch + }) + + // Sort logic + filteredDecks = [...filteredDecks].sort((a, b) => { + if (sortBy === "date-asc") { + return a.created.localeCompare(b.created) + } else if (sortBy === "date-desc") { + return b.created.localeCompare(a.created) + } else if (sortBy === "abc-asc") { + return a.name.localeCompare(b.name) + } else if (sortBy === "abc-desc") { + return b.name.localeCompare(a.name) + } + return 0 + }) + + return ( +
+
+ {/* Filters */} +
+
+ setSearch(e.target.value)} + width={240} + placeholder="Keresés..." + className="mr-4" + /> + + Típus: + + {deckTypes.map((type) => ( + + ))} + Eredet: + + + Rendezés: + + + + {showSortHelp && ( + setShowSortHelp(false)}> +

Rendezési lehetőségek magyarázata

+
    +
  • + 📅↑ – Dátum szerint növekvő sorrendben (legrégebbi + elöl) +
    • +
  • + 📅↓ – Dátum szerint csökkenő sorrendben (legújabb elöl) +
    • +
  • + A→Z – Név szerint növekvő sorrendben (A-tól Z-ig) +
    • +
  • + Z→A – Név szerint csökkenő sorrendben (Z-től A-ig) +
    • +
+ + + )} +
+
+ {/* Decks Grid */} +
+ {/* Create New Deck (Mockup) */} +
+ + Új pakli létrehozása +
+ {/* Existing Decks (Mockup) */} + {filteredDecks.map((deck) => { + const deckType = deckTypes.find((t) => t.label === deck.type) + const borderColor = deckType ? deckType.color : "var(--color-success)" + return ( +
+
+ + {deck.type === "Luck" + ? "Szerencse" + : deck.type === "Question" + ? "Kérdés" + : deck.type === "Fun" + ? "Szórakozás" + : deck.type} + +

+ {deck.name} +

+
+
+ Létrehozva: {deck.created} +
+
+ ) + })} +
+
+
+ ) +} + +export default DeckManager diff --git a/SerpentRace_Frontend/src/components/Landingpage/LandingPage.jsx b/SerpentRace_Frontend/src/components/Landingpage/LandingPage.jsx index 5b42dcb2..86f1f507 100644 --- a/SerpentRace_Frontend/src/components/Landingpage/LandingPage.jsx +++ b/SerpentRace_Frontend/src/components/Landingpage/LandingPage.jsx @@ -23,7 +23,7 @@ const LandingPage = ({ onNavigateToPlay, onNavigateToAuth }) => { { { mindezt szórakozva! { animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.7, delay: 1 }} > - - + + @@ -71,7 +71,7 @@ const LandingPage = ({ onNavigateToPlay, onNavigateToAuth }) => { >
{
-

Közösségi élmény

-

+

Közösségi élmény

+

Ismerkedj, nevess, tanulj! A SerpentRace összehozza a társaságot, legyen szó baráti összejövetelről vagy csapatépítésről.

@@ -110,8 +110,8 @@ const LandingPage = ({ onNavigateToPlay, onNavigateToAuth }) => {
-

Személyre szabható

-

+

Személyre szabható

+

Kérdéskártyák, szabályok, design – minden a te igényeidhez igazítható, akár céges brandinggel is!

@@ -128,8 +128,8 @@ const LandingPage = ({ onNavigateToPlay, onNavigateToAuth }) => {
-

Folyamatos támogatás

-

+

Folyamatos támogatás

+

Gyors, segítőkész ügyfélszolgálat – ha bármilyen kérdésed vagy problémád van, mindig számíthatsz ránk!

@@ -154,11 +154,11 @@ const LandingPage = ({ onNavigateToPlay, onNavigateToAuth }) => { viewport={{ once: true }} transition={{ duration: 0.7, delay: 0.3 }} > -

+

Próbáld ki te is a SerpentRace-t!

-

+

Legyél részese egy új közösségi élménynek, vagy rendeld meg saját, személyre szabott társasjátékodat – mi mindenben segítünk!

diff --git a/SerpentRace_Frontend/src/components/PopUp/PopUp.jsx b/SerpentRace_Frontend/src/components/PopUp/PopUp.jsx index c169ab08..ac7a471f 100644 --- a/SerpentRace_Frontend/src/components/PopUp/PopUp.jsx +++ b/SerpentRace_Frontend/src/components/PopUp/PopUp.jsx @@ -1,7 +1,7 @@ // src/components/PopUp/PopUp.jsx // sima komponens, ami megjeleníti a popupot -import React from "react"; +import React from "react" export default function PopUp({ children, onClose }) { return ( @@ -17,5 +17,5 @@ export default function PopUp({ children, onClose }) { {children}
- ); -} \ No newline at end of file + ) +} diff --git a/SerpentRace_Frontend/src/components/Search/SearchBox.jsx b/SerpentRace_Frontend/src/components/Search/SearchBox.jsx new file mode 100644 index 00000000..3d5bb7fd --- /dev/null +++ b/SerpentRace_Frontend/src/components/Search/SearchBox.jsx @@ -0,0 +1,22 @@ +import React from "react" +import { FaSearch } from "react-icons/fa" + +const SearchBox = ({ value, onChange, width = 220, placeholder = "Keresés...", className = "" }) => { + return ( +
+ + +
+ ) +} + +export default SearchBox diff --git a/SerpentRace_Frontend/src/index.css b/SerpentRace_Frontend/src/index.css index 39b0929a..4870f184 100644 --- a/SerpentRace_Frontend/src/index.css +++ b/SerpentRace_Frontend/src/index.css @@ -24,9 +24,16 @@ --color-secondary: #8d8e83; --color-accent: #0d0d0f; + /* Deck típus színek */ + --color-luck: #5fa985; /* zöld, mint a success */ + --color-question: #4f7be6; /* új kék, illik az oldalhoz */ + --color-fun: #e15b64; /* piros, mint az error */ + /* Háttérszínek */ --color-background: #181d23; + --color-background-selected: #232a31; --color-surface: #222d2f; + --color-surface-selected: #314045; --color-card: #2c383b; /* Szövegszínek */ diff --git a/SerpentRace_Frontend/src/pages/Cards/Cards.jsx b/SerpentRace_Frontend/src/pages/Cards/Cards.jsx deleted file mode 100644 index e69de29b..00000000 diff --git a/SerpentRace_Frontend/src/pages/Decks/DeckManagerPage.jsx b/SerpentRace_Frontend/src/pages/Decks/DeckManagerPage.jsx new file mode 100644 index 00000000..ab14944e --- /dev/null +++ b/SerpentRace_Frontend/src/pages/Decks/DeckManagerPage.jsx @@ -0,0 +1,16 @@ +// src/pages/Decks/DeckManagerPage.jsx +// Deck Management Page (with Navbar, no Footer) + +import DeckManager from "../../components/Landingpage/DeckManager.jsx" +import Navbar from "../../components/Navbar/Navbar.jsx" + +export default function DeckManagerPage() { + return ( +
+ +
+ +
+
+ ) +}