Merge remote-tracking branch 'origin/main'

SerpentRace_Frontend/src/pages/About/About.jsx

@@ -2,13 +2,13 @@ import React, { useEffect, useRef, useState } from "react"
 import Navbar from "../../components/Navbar/Navbar"
 import Footer from "../../components/Footer/Footer"
 import Background from "../../assets/backgrounds/Background.jsx"
-import Walke from "../../assets/pictures/walke.jpg"
-import Busi from "../../assets/pictures/busi.jpg"
-import Gege from "../../assets/pictures/gege.jpg"
-import Zsola from "../../assets/pictures/zsola.jpg"
-import Donat from "../../assets/pictures/donat.jpg"
-import Turo from "../../assets/pictures/turo.jpg"
-import Piskor from "../../assets/pictures/piskor.jpg"
+import Walke from "../../assets/pictures/walke.JPG"
+import Busi from "../../assets/pictures/busi.JPG"
+import Gege from "../../assets/pictures/gege.JPG"
+import Zsola from "../../assets/pictures/zsola.JPG"
+import Donat from "../../assets/pictures/donat.JPG"
+import Turo from "../../assets/pictures/turo.JPG"
+import Piskor from "../../assets/pictures/piskor.JPG"
 
 const About = () => {
   const [visible, setVisible] = useState(false)

SerpentRace_Frontend/src/pages/DeckCreator/DeckCreator.jsx

@@ -0,0 +1,201 @@
+// src/pages/DeckCreator/DeckCreator.jsx
+// Deck Creator Page - Deck létrehozás és szerkesztés
+
+import React, { useState, useEffect } from "react"
+import { useParams, useNavigate } from "react-router-dom"
+import Navbar from "../../components/Navbar/Navbar.jsx"
+import DeckHeader from "../../components/DeckCreator/DeckHeader.jsx"
+import CardsList from "../../components/DeckCreator/CardsList.jsx"
+import CardEditor from "../../components/DeckCreator/CardEditor.jsx"
+
+export default function DeckCreator() {
+  const { deckId } = useParams() // URL-ből deck ID (új deck esetén undefined)
+  const navigate = useNavigate()
+
+  // Deck alapadatok
+  const [deck, setDeck] = useState({
+    id: null,
+    name: "Új Deck",
+    type: "Question", // Question, Luck, Fun
+    privacy: "private", // private, public
+    description: "",
+    cards: []
+  })
+
+  // UI állapotok
+  const [selectedCard, setSelectedCard] = useState(null)
+  const [isCreatingCard, setIsCreatingCard] = useState(false)
+  const [newCardType, setNewCardType] = useState(null) // task, joker, luck
+
+  // Betöltés (később API-ból)
+  useEffect(() => {
+    if (deckId) {
+      // TODO: Betöltés API-ból
+      loadDeck(deckId)
+    } else {
+      // Új deck
+      setDeck({
+        id: null,
+        name: "Új Deck",
+        type: "Question",
+        privacy: "private",
+        description: "",
+        cards: []
+      })
+    }
+  }, [deckId])
+
+  const loadDeck = async (id) => {
+    // Mock deck betöltés
+    const mockDeck = {
+      id: id,
+      name: "Quiz Night",
+      type: "Question",
+      privacy: "public",
+      description: "Szórakoztató kvíz este",
+      cards: [
+        {
+          id: 1,
+          type: "task",
+          subType: "quiz",
+          question: "Mi Magyarország fővárosa?",
+          options: ["Budapest", "Debrecen", "Szeged", "Pécs"],
+          correctAnswer: 0,
+          points: 10,
+          timeLimit: 30,
+          explanation: "Budapest 1873 óta Magyarország fővárosa."
+        },
+        {
+          id: 2,
+          type: "task",
+          subType: "truefalse",
+          statement: "A Duna Magyarország leghosszabb folyója.",
+          isTrue: false,
+          points: 5,
+          timeLimit: 15,
+          explanation: "A Tisza a leghosszabb folyó Magyarországon."
+        }
+      ]
+    }
+    setDeck(mockDeck)
+  }
+
+  const handleDeckUpdate = (updates) => {
+    setDeck(prev => ({ ...prev, ...updates }))
+  }
+
+  const handleSaveDeck = async () => {
+    try {
+      // TODO: API mentés
+      console.log("Deck mentése:", deck)
+      alert("✅ Deck sikeresen mentve!")
+    } catch (error) {
+      console.error("Mentési hiba:", error)
+      alert("❌ Hiba történt a mentés során!")
+    }
+  }
+
+  const handleBack = () => {
+    if (confirm("Biztosan visszamész? A nem mentett változtatások elvesznek.")) {
+      navigate("/decks")
+    }
+  }
+
+  const handleCreateCard = (cardType) => {
+    setNewCardType(cardType)
+    setIsCreatingCard(true)
+    setSelectedCard(null)
+  }
+
+  const handleSelectCard = (card) => {
+    setSelectedCard(card)
+    setIsCreatingCard(false)
+    setNewCardType(null)
+  }
+
+  const handleSaveCard = (cardData) => {
+    if (isCreatingCard) {
+      // Új kártya hozzáadása
+      const newCard = {
+        ...cardData,
+        id: Date.now(), // Temporary ID
+      }
+      setDeck(prev => ({
+        ...prev,
+        cards: [...prev.cards, newCard]
+      }))
+      setIsCreatingCard(false)
+      setNewCardType(null)
+      setSelectedCard(newCard)
+    } else {
+      // Meglévő kártya frissítése
+      setDeck(prev => ({
+        ...prev,
+        cards: prev.cards.map(card => 
+          card.id === cardData.id ? cardData : card
+        )
+      }))
+      setSelectedCard(cardData)
+    }
+  }
+
+  const handleDeleteCard = (cardId) => {
+    if (confirm("Biztosan törlöd ezt a kártyát?")) {
+      setDeck(prev => ({
+        ...prev,
+        cards: prev.cards.filter(card => card.id !== cardId)
+      }))
+      
+      if (selectedCard?.id === cardId) {
+        setSelectedCard(null)
+      }
+    }
+  }
+
+  return (
+    <div className="w-full min-h-screen bg-[color:var(--color-background)] flex flex-col">
+      <Navbar />
+      
+      <main className="flex-1 flex flex-col">
+        {/* Deck Header */}
+        <DeckHeader 
+          deck={deck}
+          onUpdate={handleDeckUpdate}
+          onSave={handleSaveDeck}
+          onBack={handleBack}
+        />
+
+        {/* Main Content */}
+        <div className="flex-1 flex">
+          {/* Left Panel - Cards List */}
+          <div className="w-80 bg-[color:var(--color-surface)] border-r border-[color:var(--color-surface-selected)] flex flex-col">
+            <CardsList
+              cards={deck.cards}
+              selectedCard={selectedCard}
+              onSelectCard={handleSelectCard}
+              onCreateCard={handleCreateCard}
+              onDeleteCard={handleDeleteCard}
+              isCreatingCard={isCreatingCard}
+              newCardType={newCardType}
+            />
+          </div>
+
+          {/* Right Panel - Card Editor */}
+          <div className="flex-1 bg-[color:var(--color-background)] flex flex-col">
+            <CardEditor
+              card={selectedCard}
+              isCreating={isCreatingCard}
+              cardType={newCardType}
+              onSave={handleSaveCard}
+              onCancel={() => {
+                setIsCreatingCard(false)
+                setNewCardType(null)
+                setSelectedCard(null)
+              }}
+            />
+          </div>
+        </div>
+      </main>
+    </div>
+  )
+}

SerpentRace_Frontend/src/pages/Report/Reports.jsx

@@ -0,0 +1,58 @@
+// src/pages/Reports/Reports.jsx
+import { useState } from "react"
+import Navbar from "../../components/Navbar/Navbar.jsx"
+import Footer from "../../components/Footer/Footer.jsx"
+import Background from "../../assets/backgrounds/Background.jsx"
+
+export default function Reports() {
+  return (
+    <div className="w-full min-h-screen flex flex-col relative overflow-x-hidden">
+      {/* Háttér */}
+      <div className="fixed inset-0 -z-10 pointer-events-none">
+        <Background />
+      </div>
+
+      {/* Navbar */}
+      <div className="fixed top-0 left-0 right-0 z-30">
+        <Navbar />
+      </div>
+
+      {/* Fő tartalom */}
+      <main className="flex-1 flex flex-col items-center justify-start py-15 min-h-0 mt-[64px] px-4">
+        <div className="bg-gradient-to-br from-[#2a3b34] to-[#3e584f] rounded-2xl shadow-xl p-8 w-full max-w-5xl">
+          {/* Fejléc */}
+          <div className="text-center mb-8">
+            <h2 className="text-3xl font-bold text-white">Játék Riportok</h2>
+            <p className="text-gray-300 mt-2">
+              Áttekintés a legutóbbi játékokról és statisztikákról
+            </p>
+          </div>
+
+          {/* Statisztikai kártyák */}
+          <div className="grid grid-cols-1 sm:grid-cols-3 gap-6 mb-8">
+            <div className="bg-[#1e2a25] rounded-xl p-6 text-center shadow-inner">
+              <h3 className="text-3xl font-bold text-[#3dcf85]">25</h3>
+              <p className="text-gray-300 mt-2">Lejátszott játék</p>
+            </div>
+            <div className="bg-[#1e2a25] rounded-xl p-6 text-center shadow-inner">
+              <h3 className="text-3xl font-bold text-[#3dcf85]">78%</h3>
+              <p className="text-gray-300 mt-2">Átlagos nyerési arány</p>
+            </div>
+            <div className="bg-[#1e2a25] rounded-xl p-6 text-center shadow-inner">
+              <h3 className="text-3xl font-bold text-[#3dcf85]">120</h3>
+              <p className="text-gray-300 mt-2">Legmagasabb pontszám</p>
+            </div>
+          </div>
+
+          {/* Grafikon helyőrző */}
+          <div className="h-72 flex items-center justify-center border-2 border-dashed border-[#3dcf85] rounded-xl bg-[#121816] text-[#3dcf85]">
+            valami grafikon lehet itt
+          </div>
+        </div>
+      </main>
+
+      {/* Footer */}
+      <Footer />
+    </div>
+  )
+}