Compare commits
1 Commits
d3399470ba
...
gege
| Author | SHA1 | Date | |
|---|---|---|---|
 mategergely33
|
0ac5ead63a |
@@ -145,6 +145,8 @@ const Card_display = () => {
|
||||
"QUESTION": "Kérdés",
|
||||
"LUCK": "Szerencse",
|
||||
"JOKER": "Joker",
|
||||
"joker": "Joker",
|
||||
"luck": "Szerencse",
|
||||
// If backend converts to different numbers, map them:
|
||||
"0": "Igaz/Hamis", // truefalse = 0
|
||||
"1": "Feleletválasztós", // multiplechoice = 1
|
||||
@@ -352,7 +354,7 @@ const Card_display = () => {
|
||||
)}
|
||||
{paginatedCards.map((card, idx) => {
|
||||
const cardIndex = startIndex + idx + 1
|
||||
const questionText = card.question || card.statement || 'Kérdés hiányzik'
|
||||
const questionText = card.text || card.question || card.statement || 'Kérdés hiányzik'
|
||||
|
||||
// Get answers based on card type
|
||||
let answerOptions = []
|
||||
@@ -364,13 +366,30 @@ const Card_display = () => {
|
||||
// Detect card type by fields if subType is missing
|
||||
let detectedType = subType
|
||||
if (subType === 'undefined' || subType === 'null') {
|
||||
// Check by numeric type field first
|
||||
if (card.type === 3) {
|
||||
// type 3 = True/False
|
||||
detectedType = 'truefalse'
|
||||
} else if (card.type === 2) {
|
||||
// type 2 = Text answer
|
||||
detectedType = 'text'
|
||||
// First check deck type - if deck is JOKER or LUCK type, cards inherit that
|
||||
if (deck.type === 1) {
|
||||
// Deck type 1 = Joker deck
|
||||
detectedType = 'joker'
|
||||
} else if (deck.type === 0) {
|
||||
// Deck type 0 = Luck deck
|
||||
detectedType = 'luck'
|
||||
} else if (card.type !== undefined) {
|
||||
// Check by card.type field (string or numeric)
|
||||
const cardType = typeof card.type === 'string' ? card.type.toLowerCase() : card.type
|
||||
|
||||
if (cardType === 'joker' || card.type === 'JOKER') {
|
||||
// Joker card
|
||||
detectedType = 'joker'
|
||||
} else if (cardType === 'luck' || card.type === 'LUCK') {
|
||||
// Luck card
|
||||
detectedType = 'luck'
|
||||
} else if (card.type === 3) {
|
||||
// type 3 = True/False
|
||||
detectedType = 'truefalse'
|
||||
} else if (card.type === 2) {
|
||||
// type 2 = Text answer
|
||||
detectedType = 'text'
|
||||
}
|
||||
} else if (card.leftItems && card.rightItems && card.correctPairs) {
|
||||
// Has leftItems, rightItems AND correctPairs = matching
|
||||
detectedType = 'matching'
|
||||
@@ -385,6 +404,28 @@ const Card_display = () => {
|
||||
}
|
||||
}
|
||||
|
||||
// Extract consequence info for JOKER and LUCK cards
|
||||
let consequenceText = null
|
||||
if ((detectedType === 'joker' || detectedType === 'luck') && card.consequence) {
|
||||
const consequenceLabels = {
|
||||
0: 'Lépj előre',
|
||||
1: 'Lépj hátra',
|
||||
2: 'Kör kihagyás',
|
||||
3: 'Extra kör',
|
||||
5: 'Vissza a starthoz'
|
||||
}
|
||||
const consequenceType = consequenceLabels[card.consequence.type] || 'Ismeretlen hatás'
|
||||
const consequenceValue = card.consequence.value
|
||||
|
||||
if (consequenceValue && [0, 1].includes(card.consequence.type)) {
|
||||
consequenceText = `${consequenceType} ${consequenceValue} mezőt`
|
||||
} else if (consequenceValue && [2, 3].includes(card.consequence.type)) {
|
||||
consequenceText = `${consequenceType} (${consequenceValue} kör)`
|
||||
} else {
|
||||
consequenceText = consequenceType
|
||||
}
|
||||
}
|
||||
|
||||
if (detectedType === 'truefalse' || detectedType === '0') {
|
||||
// True/False cards
|
||||
answerOptions = ['Igaz', 'Hamis']
|
||||
@@ -432,16 +473,92 @@ const Card_display = () => {
|
||||
return (
|
||||
<div
|
||||
key={cardId}
|
||||
className="relative h-80 cursor-pointer"
|
||||
className="relative h-80"
|
||||
style={{ perspective: "1000px" }}
|
||||
onClick={() => toggleCardFlip(cardId)}
|
||||
>
|
||||
{detectedType === 'joker' ? (
|
||||
// Joker card - no flip, just show the task
|
||||
<div
|
||||
className="w-full h-full bg-[color:var(--color-card)] rounded-2xl p-6 shadow-lg border-l-4 flex flex-col"
|
||||
style={{
|
||||
borderLeftColor: "var(--color-fun)",
|
||||
}}
|
||||
>
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
<span className="text-[color:var(--color-text-muted)] text-sm font-medium">
|
||||
Kártya #{cardIndex}
|
||||
</span>
|
||||
<span
|
||||
className="inline-block px-2 py-1 rounded-full text-xs font-bold"
|
||||
style={{
|
||||
background: "var(--color-fun)",
|
||||
color: "var(--color-text-inverse)",
|
||||
}}
|
||||
>
|
||||
🃏 JOKER
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="flex-1 flex flex-col items-center justify-center">
|
||||
<div className="text-6xl mb-4">🃏</div>
|
||||
<div className="text-[color:var(--color-text)] text-center text-lg font-medium bg-[color:var(--color-fun)]/20 rounded-lg px-6 py-4 border-2 border-[color:var(--color-fun)]">
|
||||
{questionText}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="pt-3 border-t border-[color:var(--color-surface-selected)] text-xs text-[color:var(--color-text-muted)] text-center">
|
||||
<div>Típus: <span className="font-semibold">Joker</span></div>
|
||||
</div>
|
||||
</div>
|
||||
) : detectedType === 'luck' ? (
|
||||
// Luck card - no flip, show text and consequence
|
||||
<div
|
||||
className="w-full h-full bg-[color:var(--color-card)] rounded-2xl p-6 shadow-lg border-l-4 flex flex-col"
|
||||
style={{
|
||||
borderLeftColor: "var(--color-luck)",
|
||||
}}
|
||||
>
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
<span className="text-[color:var(--color-text-muted)] text-sm font-medium">
|
||||
Kártya #{cardIndex}
|
||||
</span>
|
||||
<span
|
||||
className="inline-block px-2 py-1 rounded-full text-xs font-bold"
|
||||
style={{
|
||||
background: "var(--color-luck)",
|
||||
color: "var(--color-text-inverse)",
|
||||
}}
|
||||
>
|
||||
🎲 SZERENCSE
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="flex-1 flex flex-col items-center justify-center">
|
||||
<div className="text-6xl mb-4">🎲</div>
|
||||
<div className="text-[color:var(--color-text)] text-center text-lg font-medium bg-[color:var(--color-luck)]/20 rounded-lg px-6 py-4 border-2 border-[color:var(--color-luck)] mb-4">
|
||||
{questionText}
|
||||
</div>
|
||||
{consequenceText && (
|
||||
<div className="text-[color:var(--color-text)] text-center">
|
||||
<div className="text-xl font-bold bg-[color:var(--color-luck)]/30 rounded-lg px-6 py-3 border-2 border-[color:var(--color-luck)]">
|
||||
{consequenceText}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="pt-3 border-t border-[color:var(--color-surface-selected)] text-xs text-[color:var(--color-text-muted)] text-center">
|
||||
<div>Típus: <span className="font-semibold">Szerencse</span></div>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div
|
||||
className={`relative w-full h-full transition-transform duration-500`}
|
||||
className={`relative w-full h-full transition-transform duration-500 ${detectedType !== 'joker' && detectedType !== 'luck' ? 'cursor-pointer' : ''}`}
|
||||
style={{
|
||||
transformStyle: "preserve-3d",
|
||||
transform: isFlipped ? "rotateY(180deg)" : "rotateY(0deg)"
|
||||
}}
|
||||
onClick={detectedType !== 'joker' && detectedType !== 'luck' ? () => toggleCardFlip(cardId) : undefined}
|
||||
>
|
||||
{/* Front side - Question */}
|
||||
<div
|
||||
@@ -455,15 +572,39 @@ const Card_display = () => {
|
||||
<span className="text-[color:var(--color-text-muted)] text-sm font-medium">
|
||||
Kártya #{cardIndex}
|
||||
</span>
|
||||
<span
|
||||
className="inline-block px-2 py-1 rounded-full text-xs font-bold"
|
||||
style={{
|
||||
background: currentDeckType?.color || "var(--color-success)",
|
||||
color: "var(--color-text-inverse)",
|
||||
}}
|
||||
>
|
||||
{answerCount} válasz
|
||||
</span>
|
||||
{detectedType !== 'joker' && detectedType !== 'luck' && (
|
||||
<span
|
||||
className="inline-block px-2 py-1 rounded-full text-xs font-bold"
|
||||
style={{
|
||||
background: currentDeckType?.color || "var(--color-success)",
|
||||
color: "var(--color-text-inverse)",
|
||||
}}
|
||||
>
|
||||
{answerCount} válasz
|
||||
</span>
|
||||
)}
|
||||
{detectedType === 'joker' && (
|
||||
<span
|
||||
className="inline-block px-2 py-1 rounded-full text-xs font-bold"
|
||||
style={{
|
||||
background: "var(--color-fun)",
|
||||
color: "var(--color-text-inverse)",
|
||||
}}
|
||||
>
|
||||
🃏 JOKER
|
||||
</span>
|
||||
)}
|
||||
{detectedType === 'luck' && (
|
||||
<span
|
||||
className="inline-block px-2 py-1 rounded-full text-xs font-bold"
|
||||
style={{
|
||||
background: "var(--color-luck)",
|
||||
color: "var(--color-text-inverse)",
|
||||
}}
|
||||
>
|
||||
🎲 SZERENCSE
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<h3 className="text-lg font-bold text-[color:var(--color-text)] mb-3">
|
||||
@@ -492,7 +633,7 @@ const Card_display = () => {
|
||||
>
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
<span className="text-[color:var(--color-text-muted)] text-sm font-medium">
|
||||
Megoldás
|
||||
{detectedType === 'joker' || detectedType === 'luck' ? 'Kártya hatás' : 'Megoldás'}
|
||||
</span>
|
||||
<span
|
||||
className="inline-block px-2 py-1 rounded-full text-xs font-bold"
|
||||
@@ -501,11 +642,37 @@ const Card_display = () => {
|
||||
color: "var(--color-text-inverse)",
|
||||
}}
|
||||
>
|
||||
{answerCount} válasz
|
||||
{detectedType === 'joker' || detectedType === 'luck' ? (detectedType === 'joker' ? '🃏 JOKER' : '🎲 SZERENCSE') : `${answerCount} válasz`}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{answerCount > 0 ? (
|
||||
{detectedType === 'joker' ? (
|
||||
// Joker card - just show the task/challenge
|
||||
<div className="flex flex-col items-center justify-center h-full py-8">
|
||||
<div className="text-6xl mb-4">🃏</div>
|
||||
<div className="text-[color:var(--color-text)] text-center text-lg font-medium bg-[color:var(--color-fun)]/20 rounded-lg px-6 py-4 border-2 border-[color:var(--color-fun)]">
|
||||
{questionText}
|
||||
</div>
|
||||
<div className="text-[color:var(--color-text-muted)] text-sm mt-4 text-center italic">
|
||||
A játékmester dönti el a teljesítést
|
||||
</div>
|
||||
</div>
|
||||
) : detectedType === 'luck' ? (
|
||||
// Luck card - show consequence
|
||||
<div className="flex flex-col items-center justify-center h-full py-8">
|
||||
<div className="text-6xl mb-4">🎲</div>
|
||||
{consequenceText && (
|
||||
<div className="text-[color:var(--color-text)] text-center">
|
||||
<div className="text-2xl font-bold mb-4 bg-[color:var(--color-luck)]/20 rounded-lg px-6 py-3 border-2 border-[color:var(--color-luck)]">
|
||||
{consequenceText}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<div className="text-[color:var(--color-text-muted)] text-sm mt-2 text-center italic">
|
||||
Azonnal végrehajt
|
||||
</div>
|
||||
</div>
|
||||
) : answerCount > 0 ? (
|
||||
<div className="space-y-2">
|
||||
<div className="text-[color:var(--color-text-muted)] text-sm font-medium mb-2">
|
||||
Helyes válasz:
|
||||
@@ -563,6 +730,7 @@ const Card_display = () => {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
|
||||
Reference in New Issue
Block a user