Merge remote-tracking branch 'origin/main'
This commit is contained in:
@@ -9,10 +9,12 @@ import ResetPassword from "./pages/Auth/ResetPassword"
|
||||
import Landingpage from "./pages/Landing/Landingpage"
|
||||
import Home from "./pages/Landing/Home"
|
||||
import DeckManagerPage from "./pages/Decks/DeckManagerPage"
|
||||
import DeckCreator from "./pages/DeckCreator/DeckCreator"
|
||||
import CompanyHub from "./pages/Companies/Companies"
|
||||
import About from "./pages/About/About"
|
||||
import ScrollToTop from "./components/ScrollToTop"
|
||||
import GameScreen from "./pages/Game/GameScreen"
|
||||
import Reports from "./pages/Report/Reports"
|
||||
|
||||
function App() {
|
||||
const [isMobile, setIsMobile] = useState(false)
|
||||
@@ -53,8 +55,11 @@ function App() {
|
||||
<Route path="/" element={<Landingpage />} />
|
||||
<Route path="/home" element={<Home />} />
|
||||
<Route path="/decks" element={<DeckManagerPage />} />
|
||||
<Route path="/deck-creator" element={<DeckCreator />} />
|
||||
<Route path="/deck-creator/:deckId" element={<DeckCreator />} />
|
||||
<Route path="/game" element={<GameScreen />} />
|
||||
<Route path="/companies" element={<CompanyHub />} />
|
||||
<Route path="/report" element={<Reports />} />
|
||||
|
||||
{/* Add more routes as needed */}
|
||||
</Routes>
|
||||
|
||||
@@ -0,0 +1,224 @@
|
||||
// src/components/DeckCreator/CardEditor.jsx
|
||||
// Jobb oldali kártya szerkesztő
|
||||
|
||||
import React, { useState, useEffect } from "react"
|
||||
import { FaSave, FaTimes, FaEye } from "react-icons/fa"
|
||||
import TaskCardEditor from "./TaskCardEditor.jsx"
|
||||
import JokerCardEditor from "./JokerCardEditor.jsx"
|
||||
import LuckCardEditor from "./LuckCardEditor.jsx"
|
||||
import CardPreview from "./CardPreview.jsx"
|
||||
|
||||
export default function CardEditor({ card, isCreating, cardType, onSave, onCancel }) {
|
||||
const [cardData, setCardData] = useState(null)
|
||||
const [showPreview, setShowPreview] = useState(false)
|
||||
|
||||
// Alapértelmezett kártya adatok
|
||||
const getDefaultCardData = (type) => {
|
||||
const baseData = {
|
||||
id: null,
|
||||
type: type,
|
||||
points: 10,
|
||||
timeLimit: 30
|
||||
}
|
||||
|
||||
switch (type) {
|
||||
case 'task':
|
||||
return {
|
||||
...baseData,
|
||||
subType: 'quiz',
|
||||
question: '',
|
||||
options: ['', '', '', ''],
|
||||
correctAnswer: 0,
|
||||
explanation: ''
|
||||
}
|
||||
case 'joker':
|
||||
return {
|
||||
...baseData,
|
||||
title: '',
|
||||
description: '',
|
||||
effect: '',
|
||||
actionType: 'skip',
|
||||
usage: 'once'
|
||||
}
|
||||
case 'luck':
|
||||
return {
|
||||
...baseData,
|
||||
event: '',
|
||||
positiveEffect: '',
|
||||
negativeEffect: '',
|
||||
probability: 50,
|
||||
risk: 'low'
|
||||
}
|
||||
default:
|
||||
return baseData
|
||||
}
|
||||
}
|
||||
|
||||
// Kártya adatok inicializálása
|
||||
useEffect(() => {
|
||||
if (isCreating && cardType) {
|
||||
setCardData(getDefaultCardData(cardType))
|
||||
} else if (card) {
|
||||
setCardData({ ...card })
|
||||
} else {
|
||||
setCardData(null)
|
||||
}
|
||||
}, [card, isCreating, cardType])
|
||||
|
||||
const handleSave = () => {
|
||||
if (!cardData) return
|
||||
|
||||
// Validáció
|
||||
if (!validateCard(cardData)) return
|
||||
|
||||
onSave(cardData)
|
||||
}
|
||||
|
||||
const validateCard = (data) => {
|
||||
if (data.type === 'task') {
|
||||
if (!data.question && !data.statement) {
|
||||
alert("❌ Kérdés vagy állítás megadása kötelező!")
|
||||
return false
|
||||
}
|
||||
if (data.subType === 'quiz' && data.options.some(opt => !opt.trim())) {
|
||||
alert("❌ Minden válaszlehetőséget ki kell tölteni!")
|
||||
return false
|
||||
}
|
||||
} else if (data.type === 'joker') {
|
||||
if (!data.text || !data.text.trim()) {
|
||||
alert("❌ Joker kártya szövege nem lehet üres!")
|
||||
return false
|
||||
}
|
||||
} else if (data.type === 'luck') {
|
||||
if (!data.text || !data.text.trim()) {
|
||||
alert("❌ Szerencse kártya szövege nem lehet üres!")
|
||||
return false
|
||||
}
|
||||
}
|
||||
|
||||
return true
|
||||
}
|
||||
|
||||
const updateCardData = (updates) => {
|
||||
setCardData(prev => prev ? { ...prev, ...updates } : null)
|
||||
}
|
||||
|
||||
// Ha nincs kiválasztott kártya vagy új kártya létrehozás
|
||||
if (!cardData) {
|
||||
return (
|
||||
<div className="flex-1 flex items-center justify-center bg-[color:var(--color-background)]">
|
||||
<div className="text-center">
|
||||
<div className="text-6xl mb-4">🃏</div>
|
||||
<div className="text-[color:var(--color-text)] text-xl font-semibold mb-2">
|
||||
Válassz ki egy kártyát
|
||||
</div>
|
||||
<div className="text-[color:var(--color-text-muted)]">
|
||||
Klikkelj egy kártyára a bal oldalon a szerkesztéshez,<br />
|
||||
vagy hozz létre egy újat.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex-1 flex flex-col">
|
||||
{/* Header */}
|
||||
<div className="bg-[color:var(--color-surface)] border-b border-[color:var(--color-surface-selected)] px-6 py-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="text-2xl">
|
||||
{cardData.type === 'task' && '📋'}
|
||||
{cardData.type === 'joker' && '🃏'}
|
||||
{cardData.type === 'luck' && '🎲'}
|
||||
</div>
|
||||
<div>
|
||||
<h2 className="text-xl font-bold text-[color:var(--color-text)]">
|
||||
{isCreating ? 'Új' : 'Szerkesztés'} {' '}
|
||||
{cardData.type === 'task' && 'Feladat kártya'}
|
||||
{cardData.type === 'joker' && 'Joker kártya'}
|
||||
{cardData.type === 'luck' && 'Szerencse kártya'}
|
||||
</h2>
|
||||
<div className="text-[color:var(--color-text-muted)] text-sm">
|
||||
{cardData.type === 'task' && cardData.subType && (
|
||||
<>
|
||||
{cardData.subType === 'quiz' && 'Quiz (A/B/C/D)'}
|
||||
{cardData.subType === 'truefalse' && 'Igaz/Hamis'}
|
||||
{cardData.subType === 'matching' && 'Párosítás'}
|
||||
{cardData.subType === 'text' && 'Szöveges válasz'}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-3">
|
||||
<button
|
||||
onClick={() => setShowPreview(!showPreview)}
|
||||
className={`
|
||||
flex items-center gap-2 px-4 py-2 rounded-xl font-medium transition-all duration-200
|
||||
${showPreview
|
||||
? 'bg-[color:var(--color-success)] text-[color:var(--color-text-inverse)]'
|
||||
: 'bg-[color:var(--color-background)] text-[color:var(--color-text)] hover:bg-[color:var(--color-surface-selected)]'
|
||||
}
|
||||
`}
|
||||
>
|
||||
<FaEye />
|
||||
Előnézet
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={onCancel}
|
||||
className="flex items-center gap-2 px-4 py-2 rounded-xl bg-[color:var(--color-background)] hover:bg-[color:var(--color-surface-selected)] text-[color:var(--color-text)] transition-all duration-200"
|
||||
>
|
||||
<FaTimes />
|
||||
Mégse
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={handleSave}
|
||||
className="flex items-center gap-2 px-6 py-2 rounded-xl bg-[color:var(--color-success)] hover:bg-[color:var(--color-success)]/80 text-[color:var(--color-text-inverse)] font-semibold transition-all duration-200 hover:scale-105 shadow-lg"
|
||||
>
|
||||
<FaSave />
|
||||
Mentés
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<div className="flex-1 overflow-hidden">
|
||||
{showPreview ? (
|
||||
/* Preview Mode */
|
||||
<div className="h-full bg-[color:var(--color-background)] flex items-center justify-center p-6">
|
||||
<CardPreview card={cardData} />
|
||||
</div>
|
||||
) : (
|
||||
/* Edit Mode */
|
||||
<div className="h-full overflow-y-auto p-6">
|
||||
{cardData.type === 'task' && (
|
||||
<TaskCardEditor
|
||||
card={cardData}
|
||||
onChange={updateCardData}
|
||||
/>
|
||||
)}
|
||||
|
||||
{cardData.type === 'joker' && (
|
||||
<JokerCardEditor
|
||||
card={cardData}
|
||||
onChange={updateCardData}
|
||||
/>
|
||||
)}
|
||||
|
||||
{cardData.type === 'luck' && (
|
||||
<LuckCardEditor
|
||||
card={cardData}
|
||||
onChange={updateCardData}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,148 @@
|
||||
// src/components/DeckCreator/CardPreview.jsx
|
||||
// Kártya előnézet komponens
|
||||
|
||||
import React from "react"
|
||||
import { FaQuestionCircle, FaTheaterMasks, FaDice, FaClock, FaStar } from "react-icons/fa"
|
||||
|
||||
export default function CardPreview({ card }) {
|
||||
if (!card) {
|
||||
return (
|
||||
<div className="text-center text-[color:var(--color-text-muted)]">
|
||||
<div className="text-6xl mb-4">🃏</div>
|
||||
<div>Nincs kiválasztott kártya az előnézethez</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// Kártya típus specifikus beállítások
|
||||
const getCardConfig = (card) => {
|
||||
switch (card.type) {
|
||||
case 'task':
|
||||
return {
|
||||
bgColor: 'var(--color-question)',
|
||||
icon: FaQuestionCircle,
|
||||
title: 'FELADAT KÁRTYA',
|
||||
emoji: '📋'
|
||||
}
|
||||
case 'joker':
|
||||
return {
|
||||
bgColor: 'var(--color-fun)',
|
||||
icon: FaTheaterMasks,
|
||||
title: 'JOKER KÁRTYA',
|
||||
emoji: '🎭'
|
||||
}
|
||||
case 'luck':
|
||||
return {
|
||||
bgColor: 'var(--color-luck)',
|
||||
icon: FaDice,
|
||||
title: 'SZERENCSE KÁRTYA',
|
||||
emoji: '🎲'
|
||||
}
|
||||
default:
|
||||
return {
|
||||
bgColor: 'var(--color-border)',
|
||||
icon: FaQuestionCircle,
|
||||
title: 'ISMERETLEN KÁRTYA',
|
||||
emoji: '❓'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const config = getCardConfig(card)
|
||||
|
||||
// Kártya tartalom meghatározása
|
||||
const getCardContent = (card) => {
|
||||
if (card.type === 'task') {
|
||||
return card.question || card.statement || 'Feladat leírása...'
|
||||
}
|
||||
if (card.type === 'joker' || card.type === 'luck') {
|
||||
return card.text || 'Kártya szövege...'
|
||||
}
|
||||
return 'Kártya tartalma...'
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex items-center justify-center p-6">
|
||||
{/* Kártya container */}
|
||||
<div
|
||||
className="relative w-80 h-96 rounded-2xl shadow-2xl transform transition-all duration-300 hover:scale-105"
|
||||
style={{
|
||||
background: `linear-gradient(135deg, ${config.bgColor}15, ${config.bgColor}05)`,
|
||||
border: `3px solid ${config.bgColor}`,
|
||||
}}
|
||||
>
|
||||
{/* Kártya header */}
|
||||
<div
|
||||
className="h-16 rounded-t-xl flex items-center justify-center relative overflow-hidden"
|
||||
style={{ backgroundColor: config.bgColor }}
|
||||
>
|
||||
{/* Háttér pattern */}
|
||||
<div className="absolute inset-0 opacity-20">
|
||||
<div className="w-full h-full" style={{
|
||||
backgroundImage: `repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(255,255,255,0.1) 10px, rgba(255,255,255,0.1) 20px)`
|
||||
}} />
|
||||
</div>
|
||||
|
||||
<div className="relative flex items-center gap-3">
|
||||
<config.icon className="text-white text-xl" />
|
||||
<span className="text-white font-bold text-sm tracking-wide">
|
||||
{config.title}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Kártya body */}
|
||||
<div className="p-6 h-80 flex flex-col">
|
||||
{/* Főikon */}
|
||||
<div className="text-center mb-4">
|
||||
<div className="text-5xl mb-2">{config.emoji}</div>
|
||||
</div>
|
||||
|
||||
{/* Tartalom */}
|
||||
<div className="flex-1 flex flex-col justify-center">
|
||||
<div
|
||||
className="text-[color:var(--color-text)] text-center leading-relaxed"
|
||||
style={{
|
||||
fontSize: card.text && card.text.length > 100 ? '14px' : '16px'
|
||||
}}
|
||||
>
|
||||
{getCardContent(card)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Alsó információk */}
|
||||
<div className="border-t border-[color:var(--color-border)] pt-4 mt-4">
|
||||
<div className="flex justify-between items-center text-sm">
|
||||
{/* Idő */}
|
||||
{card.timeLimit && (
|
||||
<div className="flex items-center gap-1 text-[color:var(--color-text-muted)]">
|
||||
<FaClock className="text-xs" />
|
||||
<span>{card.timeLimit}s</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Pontok */}
|
||||
{card.points && (
|
||||
<div className="flex items-center gap-1 text-[color:var(--color-text-muted)]">
|
||||
<FaStar className="text-xs" />
|
||||
<span>{card.points} pont</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Ha nincs idő/pont info */}
|
||||
{!card.timeLimit && !card.points && (
|
||||
<div className="text-[color:var(--color-text-muted)] text-xs w-full text-center">
|
||||
SerpentRace Deck
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Kártya corner dekoráció */}
|
||||
<div className="absolute top-2 right-2 w-4 h-4 rounded-full" style={{ backgroundColor: config.bgColor, opacity: 0.3 }} />
|
||||
<div className="absolute bottom-2 left-2 w-4 h-4 rounded-full" style={{ backgroundColor: config.bgColor, opacity: 0.3 }} />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,230 @@
|
||||
// src/components/DeckCreator/CardsList.jsx
|
||||
// Bal oldali kártyák listája és új kártya létrehozás
|
||||
|
||||
import React from "react"
|
||||
import { FaPlus, FaEdit, FaTrash, FaQuestionCircle, FaCheck, FaTimes, FaDice, FaTheaterMasks } from "react-icons/fa"
|
||||
|
||||
const cardTypeIcons = {
|
||||
task: { icon: FaQuestionCircle, color: "var(--color-question)" },
|
||||
joker: { icon: FaTheaterMasks, color: "var(--color-fun)" },
|
||||
luck: { icon: FaDice, color: "var(--color-luck)" }
|
||||
}
|
||||
|
||||
const cardSubTypeLabels = {
|
||||
quiz: "Quiz",
|
||||
truefalse: "Igaz/Hamis",
|
||||
matching: "Párosítás",
|
||||
text: "Szöveges válasz"
|
||||
}
|
||||
|
||||
export default function CardsList({
|
||||
cards,
|
||||
selectedCard,
|
||||
onSelectCard,
|
||||
onCreateCard,
|
||||
onDeleteCard,
|
||||
isCreatingCard,
|
||||
newCardType
|
||||
}) {
|
||||
|
||||
const getCardPreview = (card) => {
|
||||
if (card.type === 'task') {
|
||||
return card.question || card.statement || 'Új feladat kártya'
|
||||
}
|
||||
if (card.type === 'joker') {
|
||||
return card.text || 'Új joker kártya'
|
||||
}
|
||||
if (card.type === 'luck') {
|
||||
return card.text || 'Új szerencse kártya'
|
||||
}
|
||||
return 'Ismeretlen kártya'
|
||||
}
|
||||
|
||||
const getCardTypeLabel = (card) => {
|
||||
if (card.type === 'task') {
|
||||
if (card.subType) {
|
||||
return cardSubTypeLabels[card.subType] || 'Feladat'
|
||||
}
|
||||
return 'Feladat'
|
||||
}
|
||||
if (card.type === 'joker') {
|
||||
return 'Joker'
|
||||
}
|
||||
if (card.type === 'luck') {
|
||||
return 'Szerencse'
|
||||
}
|
||||
return 'Ismeretlen'
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex flex-col h-full">
|
||||
{/* Header */}
|
||||
<div className="p-4 border-b border-[color:var(--color-surface-selected)]">
|
||||
<h2 className="text-lg font-bold text-[color:var(--color-text)] mb-4 flex items-center gap-2">
|
||||
🃏 Kártyák
|
||||
</h2>
|
||||
|
||||
{/* New Card Dropdown */}
|
||||
<div className="relative group">
|
||||
<button className="w-full flex items-center justify-center gap-2 px-4 py-3 rounded-xl bg-[color:var(--color-success)] hover:bg-[color:var(--color-success)]/80 text-[color:var(--color-text-inverse)] font-semibold transition-all duration-200 hover:scale-105 shadow-lg">
|
||||
<FaPlus />
|
||||
Új kártya
|
||||
</button>
|
||||
|
||||
{/* Dropdown Menu */}
|
||||
<div className="absolute top-full left-0 right-0 mt-2 bg-[color:var(--color-card)] rounded-xl shadow-lg border border-[color:var(--color-surface-selected)] opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-10">
|
||||
<button
|
||||
onClick={() => onCreateCard('task')}
|
||||
className="w-full flex items-center gap-3 px-4 py-3 hover:bg-[color:var(--color-surface-selected)] text-[color:var(--color-text)] transition-colors duration-200 rounded-t-xl"
|
||||
>
|
||||
<FaQuestionCircle className="text-[color:var(--color-question)]" />
|
||||
📋 Feladat kártya
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={() => onCreateCard('joker')}
|
||||
className="w-full flex items-center gap-3 px-4 py-3 hover:bg-[color:var(--color-surface-selected)] text-[color:var(--color-text)] transition-colors duration-200"
|
||||
>
|
||||
<FaTheaterMasks className="text-[color:var(--color-fun)]" />
|
||||
🃏 Joker kártya
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={() => onCreateCard('luck')}
|
||||
className="w-full flex items-center gap-3 px-4 py-3 hover:bg-[color:var(--color-surface-selected)] text-[color:var(--color-text)] transition-colors duration-200 rounded-b-xl"
|
||||
>
|
||||
<FaDice className="text-[color:var(--color-luck)]" />
|
||||
🎲 Szerencse kártya
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Cards List */}
|
||||
<div className="flex-1 overflow-y-auto p-4 space-y-3">
|
||||
{/* Creating Card Indicator */}
|
||||
{isCreatingCard && (
|
||||
<div className="bg-[color:var(--color-background)]/50 border-2 border-dashed border-[color:var(--color-success)] rounded-xl p-4 animate-pulse">
|
||||
<div className="flex items-center gap-3">
|
||||
{newCardType && (
|
||||
<div className="flex items-center justify-center w-8 h-8 rounded-full bg-[color:var(--color-success)]/20">
|
||||
{React.createElement(cardTypeIcons[newCardType]?.icon || FaQuestionCircle, {
|
||||
className: "text-[color:var(--color-success)] text-sm"
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
<div>
|
||||
<div className="text-[color:var(--color-text)] font-medium">
|
||||
Új {newCardType === 'task' ? 'feladat' : newCardType === 'joker' ? 'joker' : 'szerencse'} kártya
|
||||
</div>
|
||||
<div className="text-[color:var(--color-text-muted)] text-sm">
|
||||
Szerkesztés folyamatban...
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Existing Cards */}
|
||||
{cards.map((card, index) => {
|
||||
const cardIcon = cardTypeIcons[card.type] || cardTypeIcons.task
|
||||
const isSelected = selectedCard?.id === card.id
|
||||
|
||||
return (
|
||||
<div
|
||||
key={card.id}
|
||||
onClick={() => onSelectCard(card)}
|
||||
className={`
|
||||
p-4 rounded-xl border cursor-pointer transition-all duration-200 hover:scale-105 group
|
||||
${isSelected
|
||||
? 'bg-[color:var(--color-success)]/10 border-[color:var(--color-success)] shadow-lg'
|
||||
: 'bg-[color:var(--color-background)]/50 border-[color:var(--color-surface-selected)] hover:bg-[color:var(--color-background)]/80'
|
||||
}
|
||||
`}
|
||||
>
|
||||
{/* Card Header */}
|
||||
<div className="flex items-start justify-between gap-2 mb-3">
|
||||
<div className="flex items-center gap-3 flex-1 min-w-0">
|
||||
<div className="flex items-center justify-center w-10 h-10 rounded-full border-2" style={{ borderColor: cardIcon.color }}>
|
||||
{React.createElement(cardIcon.icon, {
|
||||
style: { color: cardIcon.color },
|
||||
className: "text-lg"
|
||||
})}
|
||||
</div>
|
||||
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="text-[color:var(--color-text)] font-bold text-sm mb-1">
|
||||
#{index + 1} - {getCardTypeLabel(card)}
|
||||
</div>
|
||||
{card.timeLimit && (
|
||||
<div className="text-[color:var(--color-text-muted)] text-xs flex items-center gap-1">
|
||||
⏱️ {card.timeLimit} másodperc
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Action Buttons */}
|
||||
<div className="flex gap-1 opacity-0 group-hover:opacity-100 transition-opacity duration-200">
|
||||
<button
|
||||
onClick={(e) => {
|
||||
e.stopPropagation()
|
||||
onDeleteCard(card.id)
|
||||
}}
|
||||
className="p-1.5 rounded-lg bg-[color:var(--color-error)]/10 hover:bg-[color:var(--color-error)]/20 text-[color:var(--color-error)] transition-colors duration-200"
|
||||
>
|
||||
<FaTrash className="text-xs" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Card Content Preview */}
|
||||
<div className="bg-[color:var(--color-surface)]/30 rounded-lg p-3 mb-2">
|
||||
<div
|
||||
className="text-[color:var(--color-text)] text-sm leading-relaxed"
|
||||
style={{
|
||||
display: '-webkit-box',
|
||||
WebkitLineClamp: 2,
|
||||
WebkitBoxOrient: 'vertical',
|
||||
overflow: 'hidden'
|
||||
}}
|
||||
>
|
||||
{getCardPreview(card)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
|
||||
{/* Empty State */}
|
||||
{cards.length === 0 && !isCreatingCard && (
|
||||
<div className="text-center py-12">
|
||||
<div className="text-[color:var(--color-text-muted)] text-lg mb-2">🃏</div>
|
||||
<div className="text-[color:var(--color-text-muted)] text-sm">
|
||||
Még nincsenek kártyák.
|
||||
<br />
|
||||
Hozz létre az első kártyát!
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Footer Stats */}
|
||||
<div className="p-4 border-t border-[color:var(--color-surface-selected)] bg-[color:var(--color-background)]/30">
|
||||
<div className="text-center">
|
||||
<div className="text-[color:var(--color-text)] font-semibold">
|
||||
📊 Összesen: {cards.length} kártya
|
||||
</div>
|
||||
|
||||
{cards.length > 0 && (
|
||||
<div className="flex justify-center gap-4 mt-2 text-xs text-[color:var(--color-text-muted)]">
|
||||
<span>📋 {cards.filter(c => c.type === 'task').length}</span>
|
||||
<span>🃏 {cards.filter(c => c.type === 'joker').length}</span>
|
||||
<span>🎲 {cards.filter(c => c.type === 'luck').length}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,161 @@
|
||||
// src/components/DeckCreator/DeckHeader.jsx
|
||||
// Deck alapadatok szerkesztése és mentés
|
||||
|
||||
import React from "react"
|
||||
import { FaSave, FaArrowLeft, FaGlobe, FaLock, FaQuestionCircle, FaDice, FaLaughBeam } from "react-icons/fa"
|
||||
|
||||
const deckTypes = [
|
||||
{ value: "Question", label: "Kérdés", icon: FaQuestionCircle, color: "var(--color-question)" },
|
||||
{ value: "Luck", label: "Szerencse", icon: FaDice, color: "var(--color-luck)" },
|
||||
{ value: "Fun", label: "Szórakozás", icon: FaLaughBeam, color: "var(--color-fun)" }
|
||||
]
|
||||
|
||||
const privacyOptions = [
|
||||
{ value: "private", label: "Privát", icon: FaLock },
|
||||
{ value: "public", label: "Publikus", icon: FaGlobe }
|
||||
]
|
||||
|
||||
export default function DeckHeader({ deck, onUpdate, onSave, onBack }) {
|
||||
const currentDeckType = deckTypes.find(type => type.value === deck.type) || deckTypes[0]
|
||||
const currentPrivacy = privacyOptions.find(option => option.value === deck.privacy) || privacyOptions[0]
|
||||
|
||||
const handleInputChange = (field, value) => {
|
||||
onUpdate({ [field]: value })
|
||||
}
|
||||
|
||||
const cardsCount = deck.cards?.length || 0
|
||||
const taskCards = deck.cards?.filter(card => card.type === 'task')?.length || 0
|
||||
const jokerCards = deck.cards?.filter(card => card.type === 'joker')?.length || 0
|
||||
const luckCards = deck.cards?.filter(card => card.type === 'luck')?.length || 0
|
||||
|
||||
return (
|
||||
<div className="bg-[color:var(--color-surface)] border-b border-[color:var(--color-surface-selected)] px-6 py-4">
|
||||
{/* Top Row - Title and Actions */}
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<div className="flex items-center gap-4">
|
||||
<button
|
||||
onClick={onBack}
|
||||
className="flex items-center gap-2 px-4 py-2 rounded-xl bg-[color:var(--color-background)] hover:bg-[color:var(--color-surface-selected)] text-[color:var(--color-text)] transition-all duration-200"
|
||||
>
|
||||
<FaArrowLeft />
|
||||
Vissza
|
||||
</button>
|
||||
|
||||
<h1 className="text-2xl font-bold text-[color:var(--color-text)]">
|
||||
📝 Deck Szerkesztés
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
<button
|
||||
onClick={onSave}
|
||||
className="flex items-center gap-2 px-6 py-2 rounded-xl bg-[color:var(--color-success)] hover:bg-[color:var(--color-success)]/80 text-[color:var(--color-text-inverse)] font-semibold transition-all duration-200 hover:scale-105 shadow-lg"
|
||||
>
|
||||
<FaSave />
|
||||
Mentés
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Main Content Row */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6 items-end">
|
||||
{/* Deck Basic Info */}
|
||||
<div className="lg:col-span-2 space-y-4">
|
||||
{/* Deck Name */}
|
||||
<div>
|
||||
<label className="block text-[color:var(--color-text-muted)] text-sm font-medium mb-2">
|
||||
📦 Deck neve
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={deck.name}
|
||||
onChange={(e) => handleInputChange('name', e.target.value)}
|
||||
className="w-full px-4 py-2 rounded-xl bg-[color:var(--color-background)] border border-[color:var(--color-surface-selected)] text-[color:var(--color-text)] focus:ring-2 focus:ring-[color:var(--color-success)] focus:border-transparent outline-none transition-all duration-200"
|
||||
placeholder="Add meg a deck nevét..."
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Type and Privacy Row */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
{/* Deck Type */}
|
||||
<div>
|
||||
<label className="block text-[color:var(--color-text-muted)] text-sm font-medium mb-2">
|
||||
🎯 Típus
|
||||
</label>
|
||||
<select
|
||||
value={deck.type}
|
||||
onChange={(e) => handleInputChange('type', e.target.value)}
|
||||
className="w-full px-4 py-2 rounded-xl bg-[color:var(--color-background)] border border-[color:var(--color-surface-selected)] text-[color:var(--color-text)] focus:ring-2 focus:ring-[color:var(--color-success)] focus:border-transparent outline-none transition-all duration-200"
|
||||
>
|
||||
{deckTypes.map(type => (
|
||||
<option key={type.value} value={type.value}>
|
||||
{type.label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{/* Privacy */}
|
||||
<div>
|
||||
<label className="block text-[color:var(--color-text-muted)] text-sm font-medium mb-2">
|
||||
👁️ Láthatóság
|
||||
</label>
|
||||
<select
|
||||
value={deck.privacy}
|
||||
onChange={(e) => handleInputChange('privacy', e.target.value)}
|
||||
className="w-full px-4 py-2 rounded-xl bg-[color:var(--color-background)] border border-[color:var(--color-surface-selected)] text-[color:var(--color-text)] focus:ring-2 focus:ring-[color:var(--color-success)] focus:border-transparent outline-none transition-all duration-200"
|
||||
>
|
||||
{privacyOptions.map(option => (
|
||||
<option key={option.value} value={option.value}>
|
||||
{option.label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{/* Description */}
|
||||
<div>
|
||||
<label className="block text-[color:var(--color-text-muted)] text-sm font-medium mb-2">
|
||||
📝 Leírás
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={deck.description}
|
||||
onChange={(e) => handleInputChange('description', e.target.value)}
|
||||
className="w-full px-4 py-2 rounded-xl bg-[color:var(--color-background)] border border-[color:var(--color-surface-selected)] text-[color:var(--color-text)] focus:ring-2 focus:ring-[color:var(--color-success)] focus:border-transparent outline-none transition-all duration-200"
|
||||
placeholder="Rövid leírás..."
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Stats Panel */}
|
||||
<div className="bg-[color:var(--color-background)]/50 rounded-xl p-4 border border-[color:var(--color-surface-selected)]">
|
||||
<h3 className="text-[color:var(--color-text)] font-semibold mb-3 flex items-center gap-2">
|
||||
📊 Statisztikák
|
||||
</h3>
|
||||
|
||||
<div className="space-y-2 text-sm">
|
||||
<div className="flex justify-between items-center">
|
||||
<span className="text-[color:var(--color-text-muted)]">Összes kártya:</span>
|
||||
<span className="text-[color:var(--color-text)] font-semibold">{cardsCount}</span>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-between items-center">
|
||||
<span className="text-[color:var(--color-text-muted)]">📋 Feladat:</span>
|
||||
<span className="text-[color:var(--color-question)] font-semibold">{taskCards}</span>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-between items-center">
|
||||
<span className="text-[color:var(--color-text-muted)]">🃏 Joker:</span>
|
||||
<span className="text-[color:var(--color-success)] font-semibold">{jokerCards}</span>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-between items-center">
|
||||
<span className="text-[color:var(--color-text-muted)]">🎲 Szerencse:</span>
|
||||
<span className="text-[color:var(--color-luck)] font-semibold">{luckCards}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,152 @@
|
||||
// src/components/DeckCreator/JokerCardEditor.jsx
|
||||
// Joker kártya szerkesztő
|
||||
|
||||
import React, { useState, useEffect } from 'react'
|
||||
import { FaTheaterMasks, FaInfoCircle, FaUsers } from 'react-icons/fa'
|
||||
|
||||
export default function JokerCardEditor({ card, onChange }) {
|
||||
const [cardData, setCardData] = useState({
|
||||
type: 'joker',
|
||||
text: ''
|
||||
})
|
||||
|
||||
useEffect(() => {
|
||||
if (card) {
|
||||
setCardData({
|
||||
type: 'joker',
|
||||
text: card.text || ''
|
||||
})
|
||||
}
|
||||
}, [card])
|
||||
|
||||
const handleTextChange = (e) => {
|
||||
const newCardData = {
|
||||
...cardData,
|
||||
text: e.target.value
|
||||
}
|
||||
setCardData(newCardData)
|
||||
|
||||
if (onChange) {
|
||||
onChange(newCardData)
|
||||
}
|
||||
}
|
||||
|
||||
// Példa joker kártyák
|
||||
const exampleCards = [
|
||||
"Felelsz vagy mersz? (Az előző játékos kérdez)",
|
||||
"Csinálj 20 felülést!",
|
||||
"Mesélj el egy vicces történetet az életedből!",
|
||||
"Utánozd a kedvenc állatodat 30 másodpercig!",
|
||||
"Énekelj el egy dalt amit mindenki ismer!",
|
||||
"Mondj el 5 dolgot amiért hálás vagy!",
|
||||
"Táncolj 1 percig zene nélkül!"
|
||||
]
|
||||
|
||||
const insertExample = (example) => {
|
||||
setCardData(prev => ({
|
||||
...prev,
|
||||
text: example
|
||||
}))
|
||||
|
||||
if (onChange) {
|
||||
onChange({
|
||||
...cardData,
|
||||
text: example
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="max-w-4xl mx-auto">
|
||||
<div className="bg-[color:var(--color-surface)] rounded-xl p-6">
|
||||
{/* Header */}
|
||||
<div className="flex items-center gap-3 mb-6">
|
||||
<FaTheaterMasks className="text-2xl text-[color:var(--color-fun)]" />
|
||||
<h3 className="text-xl font-bold text-[color:var(--color-text)]">
|
||||
Joker Kártya Szerkesztő
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
{/* Info box */}
|
||||
<div className="bg-[color:var(--color-fun)]/10 border border-[color:var(--color-fun)]/30 rounded-lg p-4 mb-6">
|
||||
<div className="flex items-start gap-3">
|
||||
<FaInfoCircle className="text-[color:var(--color-fun)] mt-1 flex-shrink-0" />
|
||||
<div>
|
||||
<h4 className="font-semibold text-[color:var(--color-text)] mb-2 flex items-center gap-2">
|
||||
<FaUsers className="text-sm" />
|
||||
Joker kártya működése:
|
||||
</h4>
|
||||
<p className="text-[color:var(--color-text-muted)] text-sm mb-2">
|
||||
A joker kártyák interaktív feladatokat tartalmaznak, melyek megtörik a jeget a játékosok között.
|
||||
Ezek lehetnek fizikai feladatok, kérdések, vagy szórakoztató kihívások.
|
||||
</p>
|
||||
<p className="text-[color:var(--color-fun)] text-sm font-medium">
|
||||
Cél: Szórakozás és játékosok közötti kapcsolat erősítése
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Card text input */}
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<label className="block text-[color:var(--color-text)] font-medium mb-2">
|
||||
Joker kártya feladat *
|
||||
</label>
|
||||
<textarea
|
||||
value={cardData.text}
|
||||
onChange={handleTextChange}
|
||||
placeholder="Pl: Felelsz vagy mersz? (Az előző játékos kérdez)"
|
||||
className="w-full h-32 p-4 bg-[color:var(--color-surface)] border border-[color:var(--color-border)] rounded-lg text-[color:var(--color-text)] placeholder-[color:var(--color-text-muted)] resize-none focus:outline-none focus:border-[color:var(--color-fun)] transition-colors"
|
||||
maxLength={150}
|
||||
/>
|
||||
<div className="flex justify-between items-center mt-2">
|
||||
<span className="text-xs text-[color:var(--color-text-muted)]">
|
||||
Maximális hossz: 150 karakter
|
||||
</span>
|
||||
<span className="text-xs text-[color:var(--color-text-muted)]">
|
||||
{cardData.text.length}/150
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Example cards */}
|
||||
<div className="mt-6">
|
||||
<h4 className="text-sm font-medium text-[color:var(--color-text)] mb-3">
|
||||
💡 Példa joker kártyák (kattints rájuk a beszúráshoz):
|
||||
</h4>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-2">
|
||||
{exampleCards.map((example, index) => (
|
||||
<button
|
||||
key={index}
|
||||
onClick={() => insertExample(example)}
|
||||
className="text-left p-3 bg-[color:var(--color-fun)]/5 hover:bg-[color:var(--color-fun)]/10 border border-[color:var(--color-fun)]/20 rounded-lg text-sm text-[color:var(--color-text)] transition-colors"
|
||||
>
|
||||
{example}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Preview */}
|
||||
{cardData.text.trim() && (
|
||||
<div className="mt-6 p-4 bg-[color:var(--color-fun)]/5 border border-[color:var(--color-fun)]/20 rounded-lg">
|
||||
<h4 className="text-sm font-medium text-[color:var(--color-text)] mb-2">
|
||||
Kártya előnézet:
|
||||
</h4>
|
||||
<div className="bg-[color:var(--color-surface)] border-2 border-[color:var(--color-fun)] rounded-lg p-4 text-center">
|
||||
<FaTheaterMasks className="text-2xl text-[color:var(--color-fun)] mx-auto mb-2" />
|
||||
<p className="text-[color:var(--color-text)] font-medium">
|
||||
{cardData.text}
|
||||
</p>
|
||||
<div className="mt-2 text-xs text-[color:var(--color-fun)] font-medium">
|
||||
🃏 JOKER KÁRTYA
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,105 @@
|
||||
// src/components/DeckCreator/LuckCardEditor.jsx
|
||||
// Szerencse kártya szerkesztő
|
||||
|
||||
import React, { useState, useEffect } from 'react'
|
||||
import { FaDice, FaInfoCircle } from 'react-icons/fa'
|
||||
|
||||
export default function LuckCardEditor({ card, onChange }) {
|
||||
const [cardData, setCardData] = useState({
|
||||
type: 'luck',
|
||||
text: ''
|
||||
})
|
||||
|
||||
useEffect(() => {
|
||||
if (card) {
|
||||
setCardData({
|
||||
type: 'luck',
|
||||
text: card.text || ''
|
||||
})
|
||||
}
|
||||
}, [card])
|
||||
|
||||
const handleTextChange = (e) => {
|
||||
const newCardData = {
|
||||
...cardData,
|
||||
text: e.target.value
|
||||
}
|
||||
setCardData(newCardData)
|
||||
|
||||
if (onChange) {
|
||||
onChange(newCardData)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="max-w-4xl mx-auto">
|
||||
<div className="bg-[color:var(--color-surface)] rounded-xl p-6">
|
||||
{/* Header */}
|
||||
<div className="flex items-center gap-3 mb-6">
|
||||
<FaDice className="text-2xl text-[color:var(--color-luck)]" />
|
||||
<h3 className="text-xl font-bold text-[color:var(--color-text)]">
|
||||
Szerencse Kártya Szerkesztő
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
{/* Info box */}
|
||||
<div className="bg-[color:var(--color-luck)]/10 border border-[color:var(--color-luck)]/30 rounded-lg p-4 mb-6">
|
||||
<div className="flex items-start gap-3">
|
||||
<FaInfoCircle className="text-[color:var(--color-luck)] mt-1 flex-shrink-0" />
|
||||
<div>
|
||||
<h4 className="font-semibold text-[color:var(--color-text)] mb-2">
|
||||
Szerencse kártya működése:
|
||||
</h4>
|
||||
<p className="text-[color:var(--color-text-muted)] text-sm mb-2">
|
||||
Amikor egy játékos szerencse mezőre lép, kap egy kártyát amit felolvas.
|
||||
A kártyán lévő utasítás azonnal teljesül.
|
||||
</p>
|
||||
<p className="text-[color:var(--color-luck)] text-sm font-medium">
|
||||
Példa: "Órai projektekkel kiváltottál több vizsgát is! Lépj előre 4 mezőt"
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Card text input */}
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<label className="block text-[color:var(--color-text)] font-medium mb-2">
|
||||
Kártya szövege *
|
||||
</label>
|
||||
<textarea
|
||||
value={cardData.text}
|
||||
onChange={handleTextChange}
|
||||
placeholder="Pl: Órai projektekkel kiváltottál több vizsgát is! Lépj előre 4 mezőt"
|
||||
className="w-full h-32 p-4 bg-[color:var(--color-surface)] border border-[color:var(--color-border)] rounded-lg text-[color:var(--color-text)] placeholder-[color:var(--color-text-muted)] resize-none focus:outline-none focus:border-[color:var(--color-luck)] transition-colors"
|
||||
maxLength={200}
|
||||
/>
|
||||
<div className="flex justify-between items-center mt-2">
|
||||
<span className="text-xs text-[color:var(--color-text-muted)]">
|
||||
Maximális hossz: 200 karakter
|
||||
</span>
|
||||
<span className="text-xs text-[color:var(--color-text-muted)]">
|
||||
{cardData.text.length}/200
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Preview */}
|
||||
{cardData.text.trim() && (
|
||||
<div className="mt-6 p-4 bg-[color:var(--color-luck)]/5 border border-[color:var(--color-luck)]/20 rounded-lg">
|
||||
<h4 className="text-sm font-medium text-[color:var(--color-text)] mb-2">
|
||||
Kártya előnézet:
|
||||
</h4>
|
||||
<div className="bg-[color:var(--color-surface)] border-2 border-[color:var(--color-luck)] rounded-lg p-4 text-center">
|
||||
<FaDice className="text-2xl text-[color:var(--color-luck)] mx-auto mb-2" />
|
||||
<p className="text-[color:var(--color-text)] font-medium">
|
||||
{cardData.text}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,500 @@
|
||||
// src/components/DeckCreator/TaskCardEditor.jsx
|
||||
// Feladat kártya szerkesztő (Quiz, Igaz/Hamis, Párosítás, Szöveges)
|
||||
|
||||
import React from "react"
|
||||
import { FaPlus, FaTrash, FaCheck, FaTimes } from "react-icons/fa"
|
||||
|
||||
const taskSubTypes = [
|
||||
{ value: 'quiz', label: '📋 Quiz (A/B/C/D)', description: 'Feleletválasztós kérdés' },
|
||||
{ value: 'truefalse', label: '✅ Igaz/Hamis', description: 'Igaz vagy hamis állítás' },
|
||||
{ value: 'matching', label: '🔗 Párosítás', description: 'Elemek összekapcsolása' },
|
||||
{ value: 'text', label: '✏️ Szöveges válasz', description: 'Szabadszöveges válasz' }
|
||||
]
|
||||
|
||||
const timeLimits = [
|
||||
{ value: 15, label: '15 másodperc' },
|
||||
{ value: 30, label: '30 másodperc' },
|
||||
{ value: 45, label: '45 másodperc' },
|
||||
{ value: 60, label: '1 perc' },
|
||||
{ value: 90, label: '1.5 perc' },
|
||||
{ value: 120, label: '2 perc' }
|
||||
]
|
||||
|
||||
export default function TaskCardEditor({ card, onChange }) {
|
||||
|
||||
const updateField = (field, value) => {
|
||||
onChange({ [field]: value })
|
||||
}
|
||||
|
||||
const updateOption = (index, value) => {
|
||||
const newOptions = [...card.options]
|
||||
newOptions[index] = value
|
||||
onChange({ options: newOptions })
|
||||
}
|
||||
|
||||
const addMatchingPair = () => {
|
||||
const newLeft = [...(card.leftItems || []), '']
|
||||
const newRight = [...(card.rightItems || []), '']
|
||||
const newCorrectPairs = { ...(card.correctPairs || {}), [newLeft.length - 1]: newRight.length - 1 }
|
||||
|
||||
onChange({
|
||||
leftItems: newLeft,
|
||||
rightItems: newRight,
|
||||
correctPairs: newCorrectPairs
|
||||
})
|
||||
}
|
||||
|
||||
const removeMatchingPair = (index) => {
|
||||
const newLeft = card.leftItems.filter((_, i) => i !== index)
|
||||
const newRight = card.rightItems.filter((_, i) => i !== index)
|
||||
const newCorrectPairs = {}
|
||||
|
||||
// Újraszámozás
|
||||
Object.entries(card.correctPairs).forEach(([leftIdx, rightIdx]) => {
|
||||
const newLeftIdx = parseInt(leftIdx) > index ? parseInt(leftIdx) - 1 : parseInt(leftIdx)
|
||||
const newRightIdx = parseInt(rightIdx) > index ? parseInt(rightIdx) - 1 : parseInt(rightIdx)
|
||||
if (newLeftIdx !== index && newRightIdx !== index) {
|
||||
newCorrectPairs[newLeftIdx] = newRightIdx
|
||||
}
|
||||
})
|
||||
|
||||
onChange({
|
||||
leftItems: newLeft,
|
||||
rightItems: newRight,
|
||||
correctPairs: newCorrectPairs
|
||||
})
|
||||
}
|
||||
|
||||
const addAcceptedAnswer = () => {
|
||||
const newAnswers = [...(card.acceptedAnswers || []), '']
|
||||
onChange({ acceptedAnswers: newAnswers })
|
||||
}
|
||||
|
||||
const updateAcceptedAnswer = (index, value) => {
|
||||
const newAnswers = [...card.acceptedAnswers]
|
||||
newAnswers[index] = value
|
||||
onChange({ acceptedAnswers: newAnswers })
|
||||
}
|
||||
|
||||
const removeAcceptedAnswer = (index) => {
|
||||
const newAnswers = card.acceptedAnswers.filter((_, i) => i !== index)
|
||||
onChange({ acceptedAnswers: newAnswers })
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="max-w-4xl mx-auto space-y-6">
|
||||
{/* Feladat típus választó */}
|
||||
<div className="bg-[color:var(--color-surface)] rounded-xl p-6">
|
||||
<h3 className="text-lg font-semibold text-[color:var(--color-text)] mb-4">
|
||||
🎯 Feladat típusa
|
||||
</h3>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-3">
|
||||
{taskSubTypes.map(type => (
|
||||
<button
|
||||
key={type.value}
|
||||
onClick={() => updateField('subType', type.value)}
|
||||
className={`
|
||||
p-4 rounded-xl border text-left transition-all duration-200 hover:scale-105
|
||||
${card.subType === type.value
|
||||
? 'bg-[color:var(--color-success)]/10 border-[color:var(--color-success)] shadow-lg'
|
||||
: 'bg-[color:var(--color-background)] border-[color:var(--color-surface-selected)] hover:bg-[color:var(--color-surface-selected)]'
|
||||
}
|
||||
`}
|
||||
>
|
||||
<div className="font-semibold text-[color:var(--color-text)]">
|
||||
{type.label}
|
||||
</div>
|
||||
<div className="text-sm text-[color:var(--color-text-muted)] mt-1">
|
||||
{type.description}
|
||||
</div>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Quiz típus szerkesztő */}
|
||||
{card.subType === 'quiz' && (
|
||||
<div className="bg-[color:var(--color-surface)] rounded-xl p-6">
|
||||
<h3 className="text-lg font-semibold text-[color:var(--color-text)] mb-4">
|
||||
📋 Quiz kérdés
|
||||
</h3>
|
||||
|
||||
{/* Kérdés */}
|
||||
<div className="mb-6">
|
||||
<label className="block text-[color:var(--color-text-muted)] text-sm font-medium mb-2">
|
||||
Kérdés
|
||||
</label>
|
||||
<textarea
|
||||
value={card.question || ''}
|
||||
onChange={(e) => updateField('question', e.target.value)}
|
||||
className="w-full px-4 py-3 rounded-xl bg-[color:var(--color-background)] border border-[color:var(--color-surface-selected)] text-[color:var(--color-text)] focus:ring-2 focus:ring-[color:var(--color-success)] focus:border-transparent outline-none transition-all duration-200 resize-none"
|
||||
rows="3"
|
||||
placeholder="Írd be a kérdést..."
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Válaszlehetőségek */}
|
||||
<div className="space-y-3">
|
||||
<label className="block text-[color:var(--color-text-muted)] text-sm font-medium">
|
||||
Válaszlehetőségek
|
||||
</label>
|
||||
|
||||
{['A', 'B', 'C', 'D'].map((letter, index) => (
|
||||
<div key={index} className="flex items-center gap-3">
|
||||
<div className="flex items-center gap-2">
|
||||
<button
|
||||
onClick={() => updateField('correctAnswer', index)}
|
||||
className={`
|
||||
w-8 h-8 rounded-full flex items-center justify-center font-bold text-sm transition-all duration-200
|
||||
${card.correctAnswer === index
|
||||
? 'bg-[color:var(--color-success)] text-[color:var(--color-text-inverse)]'
|
||||
: 'bg-[color:var(--color-background)] text-[color:var(--color-text)] border border-[color:var(--color-surface-selected)]'
|
||||
}
|
||||
`}
|
||||
>
|
||||
{letter}
|
||||
</button>
|
||||
|
||||
{card.correctAnswer === index && (
|
||||
<FaCheck className="text-[color:var(--color-success)] text-sm" />
|
||||
)}
|
||||
</div>
|
||||
|
||||
<input
|
||||
type="text"
|
||||
value={card.options?.[index] || ''}
|
||||
onChange={(e) => updateOption(index, e.target.value)}
|
||||
className="flex-1 px-4 py-2 rounded-xl bg-[color:var(--color-background)] border border-[color:var(--color-surface-selected)] text-[color:var(--color-text)] focus:ring-2 focus:ring-[color:var(--color-success)] focus:border-transparent outline-none transition-all duration-200"
|
||||
placeholder={`${letter} válasz...`}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Igaz/Hamis típus szerkesztő */}
|
||||
{card.subType === 'truefalse' && (
|
||||
<div className="bg-[color:var(--color-surface)] rounded-xl p-6">
|
||||
<h3 className="text-lg font-semibold text-[color:var(--color-text)] mb-4">
|
||||
✅ Igaz/Hamis állítás
|
||||
</h3>
|
||||
|
||||
{/* Állítás */}
|
||||
<div className="mb-6">
|
||||
<label className="block text-[color:var(--color-text-muted)] text-sm font-medium mb-2">
|
||||
Állítás
|
||||
</label>
|
||||
<textarea
|
||||
value={card.statement || ''}
|
||||
onChange={(e) => updateField('statement', e.target.value)}
|
||||
className="w-full px-4 py-3 rounded-xl bg-[color:var(--color-background)] border border-[color:var(--color-surface-selected)] text-[color:var(--color-text)] focus:ring-2 focus:ring-[color:var(--color-success)] focus:border-transparent outline-none transition-all duration-200 resize-none"
|
||||
rows="3"
|
||||
placeholder="Írd be az állítást..."
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Helyes válasz */}
|
||||
<div>
|
||||
<label className="block text-[color:var(--color-text-muted)] text-sm font-medium mb-3">
|
||||
Helyes válasz
|
||||
</label>
|
||||
|
||||
<div className="flex gap-4">
|
||||
<button
|
||||
onClick={() => updateField('isTrue', true)}
|
||||
className={`
|
||||
flex items-center gap-3 px-6 py-3 rounded-xl font-medium transition-all duration-200 hover:scale-105
|
||||
${card.isTrue === true
|
||||
? 'bg-[color:var(--color-success)] text-[color:var(--color-text-inverse)] shadow-lg'
|
||||
: 'bg-[color:var(--color-background)] text-[color:var(--color-text)] border border-[color:var(--color-surface-selected)]'
|
||||
}
|
||||
`}
|
||||
>
|
||||
<FaCheck />
|
||||
✅ IGAZ
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={() => updateField('isTrue', false)}
|
||||
className={`
|
||||
flex items-center gap-3 px-6 py-3 rounded-xl font-medium transition-all duration-200 hover:scale-105
|
||||
${card.isTrue === false
|
||||
? 'bg-[color:var(--color-error)] text-[color:var(--color-text-inverse)] shadow-lg'
|
||||
: 'bg-[color:var(--color-background)] text-[color:var(--color-text)] border border-[color:var(--color-surface-selected)]'
|
||||
}
|
||||
`}
|
||||
>
|
||||
<FaTimes />
|
||||
❌ HAMIS
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Párosítás típus szerkesztő */}
|
||||
{card.subType === 'matching' && (
|
||||
<div className="bg-[color:var(--color-surface)] rounded-xl p-6">
|
||||
<h3 className="text-lg font-semibold text-[color:var(--color-text)] mb-4">
|
||||
🔗 Párosítás feladat
|
||||
</h3>
|
||||
|
||||
{/* Feladat leírás */}
|
||||
<div className="mb-6">
|
||||
<label className="block text-[color:var(--color-text-muted)] text-sm font-medium mb-2">
|
||||
Feladat leírása
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={card.taskDescription || ''}
|
||||
onChange={(e) => updateField('taskDescription', e.target.value)}
|
||||
className="w-full px-4 py-2 rounded-xl bg-[color:var(--color-background)] border border-[color:var(--color-surface-selected)] text-[color:var(--color-text)] focus:ring-2 focus:ring-[color:var(--color-success)] focus:border-transparent outline-none transition-all duration-200"
|
||||
placeholder="Pl.: Párosítsd a országokat a fővárosukkal"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Párosítások */}
|
||||
<div className="space-y-4">
|
||||
<div className="flex justify-between items-center">
|
||||
<label className="text-[color:var(--color-text-muted)] text-sm font-medium">
|
||||
Párosítások
|
||||
</label>
|
||||
<button
|
||||
onClick={addMatchingPair}
|
||||
className="flex items-center gap-2 px-3 py-1 rounded-lg bg-[color:var(--color-success)] text-[color:var(--color-text-inverse)] text-sm font-medium hover:bg-[color:var(--color-success)]/80 transition-all duration-200"
|
||||
>
|
||||
<FaPlus />
|
||||
Új pár
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{(card.leftItems || []).map((leftItem, index) => (
|
||||
<div key={index} className="grid grid-cols-5 gap-3 items-center">
|
||||
<input
|
||||
type="text"
|
||||
value={leftItem}
|
||||
onChange={(e) => {
|
||||
const newLeft = [...card.leftItems]
|
||||
newLeft[index] = e.target.value
|
||||
onChange({ leftItems: newLeft })
|
||||
}}
|
||||
className="col-span-2 px-3 py-2 rounded-xl bg-[color:var(--color-background)] border border-[color:var(--color-surface-selected)] text-[color:var(--color-text)] focus:ring-2 focus:ring-[color:var(--color-success)] focus:border-transparent outline-none transition-all duration-200 text-sm"
|
||||
placeholder="Bal oldal..."
|
||||
/>
|
||||
|
||||
<div className="text-center text-[color:var(--color-text-muted)]">↔</div>
|
||||
|
||||
<input
|
||||
type="text"
|
||||
value={card.rightItems?.[index] || ''}
|
||||
onChange={(e) => {
|
||||
const newRight = [...(card.rightItems || [])]
|
||||
newRight[index] = e.target.value
|
||||
onChange({ rightItems: newRight })
|
||||
}}
|
||||
className="px-3 py-2 rounded-xl bg-[color:var(--color-background)] border border-[color:var(--color-surface-selected)] text-[color:var(--color-text)] focus:ring-2 focus:ring-[color:var(--color-success)] focus:border-transparent outline-none transition-all duration-200 text-sm"
|
||||
placeholder="Jobb oldal..."
|
||||
/>
|
||||
|
||||
<button
|
||||
onClick={() => removeMatchingPair(index)}
|
||||
className="p-2 rounded-lg bg-[color:var(--color-error)]/10 text-[color:var(--color-error)] hover:bg-[color:var(--color-error)]/20 transition-all duration-200"
|
||||
>
|
||||
<FaTrash className="text-xs" />
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Szöveges válasz típus szerkesztő */}
|
||||
{card.subType === 'text' && (
|
||||
<div className="bg-[color:var(--color-surface)] rounded-xl p-6">
|
||||
<h3 className="text-lg font-semibold text-[color:var(--color-text)] mb-4">
|
||||
✏️ Szöveges válasz
|
||||
</h3>
|
||||
|
||||
{/* Kérdés */}
|
||||
<div className="mb-6">
|
||||
<label className="block text-[color:var(--color-text-muted)] text-sm font-medium mb-2">
|
||||
Kérdés
|
||||
</label>
|
||||
<textarea
|
||||
value={card.question || ''}
|
||||
onChange={(e) => updateField('question', e.target.value)}
|
||||
className="w-full px-4 py-3 rounded-xl bg-[color:var(--color-background)] border border-[color:var(--color-surface-selected)] text-[color:var(--color-text)] focus:ring-2 focus:ring-[color:var(--color-success)] focus:border-transparent outline-none transition-all duration-200 resize-none"
|
||||
rows="3"
|
||||
placeholder="Írd be a kérdést..."
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Elfogadott válaszok */}
|
||||
<div className="mb-6">
|
||||
<div className="flex justify-between items-center mb-3">
|
||||
<label className="text-[color:var(--color-text-muted)] text-sm font-medium">
|
||||
Elfogadott válaszok
|
||||
</label>
|
||||
<button
|
||||
onClick={addAcceptedAnswer}
|
||||
className="flex items-center gap-2 px-3 py-1 rounded-lg bg-[color:var(--color-success)] text-[color:var(--color-text-inverse)] text-sm font-medium hover:bg-[color:var(--color-success)]/80 transition-all duration-200"
|
||||
>
|
||||
<FaPlus />
|
||||
Új válasz
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
{(card.acceptedAnswers || ['', '', '']).map((answer, index) => (
|
||||
<div key={index} className="flex gap-2">
|
||||
<input
|
||||
type="text"
|
||||
value={answer}
|
||||
onChange={(e) => updateAcceptedAnswer(index, e.target.value)}
|
||||
className="flex-1 px-3 py-2 rounded-xl bg-[color:var(--color-background)] border border-[color:var(--color-surface-selected)] text-[color:var(--color-text)] focus:ring-2 focus:ring-[color:var(--color-success)] focus:border-transparent outline-none transition-all duration-200 text-sm"
|
||||
placeholder={`Elfogadott válasz ${index + 1}...`}
|
||||
/>
|
||||
|
||||
{(card.acceptedAnswers?.length || 0) > 1 && (
|
||||
<button
|
||||
onClick={() => removeAcceptedAnswer(index)}
|
||||
className="p-2 rounded-lg bg-[color:var(--color-error)]/10 text-[color:var(--color-error)] hover:bg-[color:var(--color-error)]/20 transition-all duration-200"
|
||||
>
|
||||
<FaTrash className="text-xs" />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="text-xs text-[color:var(--color-text-muted)] mt-2">
|
||||
Vesszővel elválasztva is megadhatsz több elfogadott választ egy mezőben
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Beállítások */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
<label className="flex items-center gap-2 text-sm">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={card.caseSensitive || false}
|
||||
onChange={(e) => updateField('caseSensitive', e.target.checked)}
|
||||
className="w-4 h-4 text-[color:var(--color-success)] border-[color:var(--color-surface-selected)] rounded focus:ring-[color:var(--color-success)]"
|
||||
/>
|
||||
<span className="text-[color:var(--color-text)]">Kis/nagy betű érzékeny</span>
|
||||
</label>
|
||||
|
||||
<label className="flex items-center gap-2 text-sm">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={card.exactMatch || false}
|
||||
onChange={(e) => updateField('exactMatch', e.target.checked)}
|
||||
className="w-4 h-4 text-[color:var(--color-success)] border-[color:var(--color-surface-selected)] rounded focus:ring-[color:var(--color-success)]"
|
||||
/>
|
||||
<span className="text-[color:var(--color-text)]">Pontos egyezés</span>
|
||||
</label>
|
||||
|
||||
<label className="flex items-center gap-2 text-sm">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={card.partialAccepted || true}
|
||||
onChange={(e) => updateField('partialAccepted', e.target.checked)}
|
||||
className="w-4 h-4 text-[color:var(--color-success)] border-[color:var(--color-surface-selected)] rounded focus:ring-[color:var(--color-success)]"
|
||||
/>
|
||||
<span className="text-[color:var(--color-text)]">Részleges elfogadás</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
{/* Tipp */}
|
||||
<div className="mt-4">
|
||||
<label className="block text-[color:var(--color-text-muted)] text-sm font-medium mb-2">
|
||||
Tipp (opcionális)
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={card.hint || ''}
|
||||
onChange={(e) => updateField('hint', e.target.value)}
|
||||
className="w-full px-4 py-2 rounded-xl bg-[color:var(--color-background)] border border-[color:var(--color-surface-selected)] text-[color:var(--color-text)] focus:ring-2 focus:ring-[color:var(--color-success)] focus:border-transparent outline-none transition-all duration-200"
|
||||
placeholder="Segítő tipp a játékosoknak..."
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Közös beállítások */}
|
||||
<div className="bg-[color:var(--color-surface)] rounded-xl p-6">
|
||||
<h3 className="text-lg font-semibold text-[color:var(--color-text)] mb-4">
|
||||
⚙️ Beállítások
|
||||
</h3>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
{/* Pontszám */}
|
||||
<div>
|
||||
<label className="block text-[color:var(--color-text-muted)] text-sm font-medium mb-2">
|
||||
💰 Pontszám
|
||||
</label>
|
||||
<input
|
||||
type="number"
|
||||
value={card.points || 10}
|
||||
onChange={(e) => updateField('points', parseInt(e.target.value) || 0)}
|
||||
className="w-full px-4 py-2 rounded-xl bg-[color:var(--color-background)] border border-[color:var(--color-surface-selected)] text-[color:var(--color-text)] focus:ring-2 focus:ring-[color:var(--color-success)] focus:border-transparent outline-none transition-all duration-200"
|
||||
min="0"
|
||||
max="1000"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Időlimit */}
|
||||
<div>
|
||||
<label className="block text-[color:var(--color-text-muted)] text-sm font-medium mb-2">
|
||||
⏱️ Időlimit
|
||||
</label>
|
||||
<select
|
||||
value={card.timeLimit || 30}
|
||||
onChange={(e) => updateField('timeLimit', parseInt(e.target.value))}
|
||||
className="w-full px-4 py-2 rounded-xl bg-[color:var(--color-background)] border border-[color:var(--color-surface-selected)] text-[color:var(--color-text)] focus:ring-2 focus:ring-[color:var(--color-success)] focus:border-transparent outline-none transition-all duration-200"
|
||||
>
|
||||
{timeLimits.map(time => (
|
||||
<option key={time.value} value={time.value}>
|
||||
{time.label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{/* Karakterlimit (csak szöveges válasznál) */}
|
||||
{card.subType === 'text' && (
|
||||
<div>
|
||||
<label className="block text-[color:var(--color-text-muted)] text-sm font-medium mb-2">
|
||||
📝 Karakterlimit
|
||||
</label>
|
||||
<input
|
||||
type="number"
|
||||
value={card.characterLimit || 100}
|
||||
onChange={(e) => updateField('characterLimit', parseInt(e.target.value) || 0)}
|
||||
className="w-full px-4 py-2 rounded-xl bg-[color:var(--color-background)] border border-[color:var(--color-surface-selected)] text-[color:var(--color-text)] focus:ring-2 focus:ring-[color:var(--color-success)] focus:border-transparent outline-none transition-all duration-200"
|
||||
min="10"
|
||||
max="500"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Magyarázat */}
|
||||
<div className="mt-6">
|
||||
<label className="block text-[color:var(--color-text-muted)] text-sm font-medium mb-2">
|
||||
💡 Magyarázat (opcionális)
|
||||
</label>
|
||||
<textarea
|
||||
value={card.explanation || ''}
|
||||
onChange={(e) => updateField('explanation', e.target.value)}
|
||||
className="w-full px-4 py-3 rounded-xl bg-[color:var(--color-background)] border border-[color:var(--color-surface-selected)] text-[color:var(--color-text)] focus:ring-2 focus:ring-[color:var(--color-success)] focus:border-transparent outline-none transition-all duration-200 resize-none"
|
||||
rows="3"
|
||||
placeholder="Magyarázat a helyes válaszhoz..."
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -1,4 +1,5 @@
|
||||
import React, { useState } from "react"
|
||||
import { useNavigate } from "react-router-dom"
|
||||
import {
|
||||
FaPlus,
|
||||
FaFilter,
|
||||
@@ -11,6 +12,7 @@ import {
|
||||
} from "react-icons/fa"
|
||||
import SearchBox from "../Search/SearchBox"
|
||||
import PopUp from "../PopUp/PopUp"
|
||||
import DeckInfoPopUp from "../PopUp/DeckInfoPopUp"
|
||||
|
||||
const deckTypes = [
|
||||
{ label: "Luck", color: "var(--color-luck)" },
|
||||
@@ -72,11 +74,14 @@ const sortOptions = [
|
||||
]
|
||||
|
||||
const DeckManager = () => {
|
||||
const navigate = useNavigate()
|
||||
|
||||
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)
|
||||
const [selectedDeck, setSelectedDeck] = useState(null)
|
||||
|
||||
// Filter logic (mock)
|
||||
let filteredDecks = mockDecks.filter((deck) => {
|
||||
@@ -243,7 +248,10 @@ const DeckManager = () => {
|
||||
{/* 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">
|
||||
{/* Create New Deck (Mockup) */}
|
||||
<div 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">
|
||||
<div
|
||||
onClick={() => navigate('/deck-creator')}
|
||||
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"
|
||||
>
|
||||
<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>
|
||||
</div>
|
||||
@@ -254,8 +262,9 @@ 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"
|
||||
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"
|
||||
style={{ borderTopColor: borderColor }}
|
||||
onClick={() => setSelectedDeck(deck)}
|
||||
>
|
||||
<div>
|
||||
<span
|
||||
@@ -285,6 +294,14 @@ const DeckManager = () => {
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Deck Info Popup */}
|
||||
{selectedDeck && (
|
||||
<DeckInfoPopUp
|
||||
deck={selectedDeck}
|
||||
onClose={() => setSelectedDeck(null)}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
import React, { useState } from "react"
|
||||
import Logo from "../../assets/pictures/Logo"
|
||||
import About from "../../pages/About/About"
|
||||
import Home from "../../pages/Landing/Home"
|
||||
|
||||
const navLinkClass = "px-3 py-2 rounded-lg text-white transition-all duration-200 hover:bg-white/10"
|
||||
|
||||
@@ -14,25 +15,25 @@ const Navbar = () => {
|
||||
<div className="flex justify-between h-16 items-center">
|
||||
{/* Logo */}
|
||||
<div className="flex-shrink-0 flex items-center gap-2">
|
||||
<div className="flex items-center mt-1 h-9">
|
||||
<a href="/" className="flex items-center mt-1 h-9">
|
||||
<Logo size={36} />
|
||||
</div>
|
||||
<span className="flex items-center h-9 text-white font-bold text-2xl tracking-tight">
|
||||
</a>
|
||||
<a href="/" className="flex items-center h-9 text-white font-bold text-2xl tracking-tight">
|
||||
SerpentRace
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
{/* Desktop Menu */}
|
||||
<div className="hidden md:flex space-x-8">
|
||||
<a href="#" className={navLinkClass}>
|
||||
<a href="/home" className={navLinkClass}>
|
||||
Home
|
||||
</a>
|
||||
<a href="#" className={navLinkClass}>
|
||||
Leaderboard
|
||||
<a href="/report" className={navLinkClass}>
|
||||
Stats
|
||||
</a>
|
||||
<a href="/about" className={navLinkClass}>
|
||||
About
|
||||
</a>
|
||||
<a href="#" className={navLinkClass}>
|
||||
<a href="/companies" className={navLinkClass}>
|
||||
Contact
|
||||
</a>
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,208 @@
|
||||
import React, { useEffect } from "react"
|
||||
import {
|
||||
FaUser,
|
||||
FaLock,
|
||||
FaGlobe,
|
||||
FaTags,
|
||||
FaCalendarAlt,
|
||||
FaQuestionCircle,
|
||||
FaComment,
|
||||
FaTimes,
|
||||
FaEdit
|
||||
} from "react-icons/fa"
|
||||
|
||||
export default function DeckInfoPopUp({ deck, onClose }) {
|
||||
if (!deck) return null
|
||||
|
||||
// Scroll blokkolás amikor a popup nyitva van
|
||||
useEffect(() => {
|
||||
// Scroll letiltása
|
||||
document.body.style.overflow = 'hidden'
|
||||
|
||||
// Cleanup function - scroll visszaállítása amikor a komponens unmount-ol
|
||||
return () => {
|
||||
document.body.style.overflow = 'unset'
|
||||
}
|
||||
}, [])
|
||||
|
||||
const deckTypes = {
|
||||
"Luck": { label: "Szerencse", color: "var(--color-luck)" },
|
||||
"Question": { label: "Kérdés", color: "var(--color-question)" },
|
||||
"Fun": { label: "Szórakozás", color: "var(--color-fun)" }
|
||||
}
|
||||
|
||||
const currentDeckType = deckTypes[deck.type] || { label: deck.type, color: "var(--color-success)" }
|
||||
|
||||
// Mock data - ezeket majd a backend adatokra cseréljük
|
||||
const mockData = {
|
||||
creator: "John Doe",
|
||||
privacy: deck.origin === "Vállalati" ? "Publikus" : "Privát",
|
||||
questionsCount: Math.floor(Math.random() * 50) + 10,
|
||||
answersCount: Math.floor(Math.random() * 200) + 50,
|
||||
...deck
|
||||
}
|
||||
|
||||
const formatDate = (dateString) => {
|
||||
const date = new Date(dateString)
|
||||
return date.toLocaleDateString('hu-HU', {
|
||||
year: 'numeric',
|
||||
month: 'long',
|
||||
day: 'numeric'
|
||||
})
|
||||
}
|
||||
|
||||
const handleOpenDeck = () => {
|
||||
alert("⚠️ A pakli megnyitás funkció még fejlesztés alatt áll!")
|
||||
}
|
||||
|
||||
const handleEditDeck = () => {
|
||||
alert("⚠️ A pakli szerkesztés funkció még fejlesztés alatt áll!")
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 bg-black/60 flex items-center justify-center z-50 backdrop-blur-sm">
|
||||
<div
|
||||
className="bg-[color:var(--color-surface)] rounded-3xl shadow-2xl min-w-[350px] max-w-[420px] w-full mx-4 relative border border-[color:var(--color-surface-selected)] overflow-hidden"
|
||||
style={{
|
||||
background: `linear-gradient(135deg, var(--color-surface) 0%, var(--color-card) 100%)`
|
||||
}}
|
||||
>
|
||||
{/* Header with deck type color */}
|
||||
<div
|
||||
className="h-2 w-full"
|
||||
style={{ backgroundColor: currentDeckType.color }}
|
||||
></div>
|
||||
|
||||
{/* Close button */}
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="absolute top-4 right-4 text-[color:var(--color-text-muted)] hover:text-[color:var(--color-text)] text-xl font-bold leading-none p-2 rounded-full hover:bg-[color:var(--color-surface-selected)] transition-all duration-200"
|
||||
aria-label="Bezárás"
|
||||
>
|
||||
<FaTimes />
|
||||
</button>
|
||||
|
||||
<div className="p-6">
|
||||
{/* Deck name and type */}
|
||||
<div className="mb-5">
|
||||
<div className="flex items-center gap-3 mb-2">
|
||||
<h2 className="text-xl font-bold text-[color:var(--color-text)]">
|
||||
{mockData.name}
|
||||
</h2>
|
||||
<span
|
||||
className="inline-block px-3 py-1 rounded-full text-xs font-bold"
|
||||
style={{
|
||||
background: currentDeckType.color,
|
||||
color: "var(--color-text-inverse)",
|
||||
}}
|
||||
>
|
||||
{currentDeckType.label}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Data grid */}
|
||||
<div className="grid grid-cols-1 gap-3">
|
||||
{/* Creator */}
|
||||
<div className="flex items-center gap-3 p-3 bg-[color:var(--color-background)]/50 rounded-xl">
|
||||
<div className="flex items-center justify-center w-8 h-8 rounded-full bg-[color:var(--color-success)]/20">
|
||||
<FaUser className="text-[color:var(--color-success)] text-sm" />
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-[color:var(--color-text-muted)] text-xs font-medium">Létrehozó</div>
|
||||
<div className="text-[color:var(--color-text)] font-semibold text-sm">{mockData.creator}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Privacy */}
|
||||
<div className="flex items-center gap-3 p-3 bg-[color:var(--color-background)]/50 rounded-xl">
|
||||
<div className="flex items-center justify-center w-8 h-8 rounded-full bg-[color:var(--color-warning)]/20">
|
||||
{mockData.privacy === "Privát" ? (
|
||||
<FaLock className="text-[color:var(--color-warning)] text-sm" />
|
||||
) : (
|
||||
<FaGlobe className="text-[color:var(--color-warning)] text-sm" />
|
||||
)}
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-[color:var(--color-text-muted)] text-xs font-medium">Láthatóság</div>
|
||||
<div className="text-[color:var(--color-text)] font-semibold text-sm">{mockData.privacy}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Type */}
|
||||
<div className="flex items-center gap-3 p-3 bg-[color:var(--color-background)]/50 rounded-xl">
|
||||
<div
|
||||
className="flex items-center justify-center w-8 h-8 rounded-full"
|
||||
style={{ backgroundColor: `${currentDeckType.color}20` }}
|
||||
>
|
||||
<FaTags style={{ color: currentDeckType.color }} className="text-sm" />
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-[color:var(--color-text-muted)] text-xs font-medium">Típus</div>
|
||||
<div className="text-[color:var(--color-text)] font-semibold text-sm">{currentDeckType.label}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Date */}
|
||||
<div className="flex items-center gap-3 p-3 bg-[color:var(--color-background)]/50 rounded-xl">
|
||||
<div className="flex items-center justify-center w-8 h-8 rounded-full bg-[color:var(--color-primary)]/20">
|
||||
<FaCalendarAlt className="text-[color:var(--color-primary)] text-sm" />
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-[color:var(--color-text-muted)] text-xs font-medium">Létrehozás dátuma</div>
|
||||
<div className="text-[color:var(--color-text)] font-semibold text-sm">{formatDate(mockData.created)}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Questions and Answers in one row */}
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
{/* Questions */}
|
||||
<div className="flex items-center gap-2 p-3 bg-[color:var(--color-background)]/50 rounded-xl">
|
||||
<div className="flex items-center justify-center w-8 h-8 rounded-full bg-[color:var(--color-question)]/20">
|
||||
<FaQuestionCircle className="text-[color:var(--color-question)] text-sm" />
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-[color:var(--color-text-muted)] text-xs font-medium">Kérdések</div>
|
||||
<div className="text-[color:var(--color-text)] font-semibold">{mockData.questionsCount}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Answers */}
|
||||
<div className="flex items-center gap-2 p-3 bg-[color:var(--color-background)]/50 rounded-xl">
|
||||
<div className="flex items-center justify-center w-8 h-8 rounded-full bg-[color:var(--color-fun)]/20">
|
||||
<FaComment className="text-[color:var(--color-fun)] text-sm" />
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-[color:var(--color-text-muted)] text-xs font-medium">Válaszok</div>
|
||||
<div className="text-[color:var(--color-text)] font-semibold">{mockData.answersCount}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Action buttons */}
|
||||
<div className="mt-5 pt-4 border-t border-[color:var(--color-surface-selected)]">
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
{/* Open button */}
|
||||
<button
|
||||
className="px-4 py-2.5 rounded-xl font-semibold text-[color:var(--color-text-inverse)] transition-all duration-200 hover:scale-105 shadow-lg bg-[color:var(--color-success)] hover:bg-[color:var(--color-success)]/80"
|
||||
onClick={handleOpenDeck}
|
||||
>
|
||||
Megnyitás
|
||||
</button>
|
||||
|
||||
{/* Edit button */}
|
||||
<button
|
||||
className="px-4 py-2.5 rounded-xl font-semibold text-[color:var(--color-text)] border border-[color:var(--color-surface-selected)] transition-all duration-200 hover:scale-105 hover:bg-[color:var(--color-surface-selected)] flex items-center justify-center gap-2"
|
||||
onClick={handleEditDeck}
|
||||
>
|
||||
<FaEdit className="text-sm" />
|
||||
Szerkesztés
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -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)
|
||||
|
||||
@@ -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>
|
||||
)
|
||||
}
|
||||
@@ -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>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user