final POC

2025-11-24 23:28:57 +01:00
parent ce02f55a99
commit 6b3446e9b6
49 changed files with 4634 additions and 4620 deletions
@@ -1,5 +1,43 @@
 import React, { useState, useEffect } from "react"
 import { motion, AnimatePresence } from "framer-motion"
+import { CardType } from "../../constants/CardTypes"
+import { DndContext, closestCenter, PointerSensor, useSensor, useSensors } from '@dnd-kit/core'
+import { arrayMove, SortableContext, verticalListSortingStrategy, useSortable } from '@dnd-kit/sortable'
+import { CSS } from '@dnd-kit/utilities'
+
+/**
+ * Draggable item for sentence pairing
+ */
+const DraggableItem = ({ id, text, disabled }) => {
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging,
+  } = useSortable({ id, disabled })
+
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+    opacity: isDragging ? 0.5 : 1,
+  }
+
+  return (
+    <div
+      ref={setNodeRef}
+      style={style}
+      {...attributes}
+      {...listeners}
+      className={`bg-gray-800 border-2 border-purple-500 rounded-lg p-3 text-white ${
+        disabled ? 'cursor-default' : 'cursor-grab active:cursor-grabbing'
+      } ${isDragging ? 'shadow-lg' : ''}`}
+    >
+      {text}
+    </div>
+  )
+}

 /**
 * CardDisplayModal - Kártya megjelenítése a játékos számára
@@ -11,6 +49,8 @@ import { motion, AnimatePresence } from "framer-motion"
 * @param {string} props.cardType - Kártya típusa (QUESTION, LUCK, JOKER)
 * @param {Function} props.onSubmitAnswer - Válasz beküldése (csak QUESTION típusnál)
 * @param {number} props.timeLimit - Időkorlát másodpercben (default: 60)
+ * @param {boolean} props.isMyTurn - Whether this is the active player (can answer) or spectator (read-only)
+ * @param {string} props.submittedAnswer - For spectators, shows what the active player answered
 */
 const CardDisplayModal = ({
  isOpen,
@@ -18,16 +58,22 @@ const CardDisplayModal = ({
  card,
  cardType = "QUESTION",
  onSubmitAnswer,
-  timeLimit = 60
+  timeLimit = 60,
+  isMyTurn = true,
+  submittedAnswer = null
 }) => {
  const [playerAnswer, setPlayerAnswer] = useState("")
  const [selectedOption, setSelectedOption] = useState(null)
  const [timeLeft, setTimeLeft] = useState(timeLimit)
  const [isProcessing, setIsProcessing] = useState(false)
+  
+  // For sentence pairing drag and drop
+  const [rightItems, setRightItems] = useState([])
+  const sensors = useSensors(useSensor(PointerSensor))

-  // Timer countdown
+  // Timer countdown (only for active player)
  useEffect(() => {
-    if (!isOpen || cardType !== "QUESTION") return
+    if (!isOpen || cardType !== "QUESTION" || !isMyTurn) return

    setTimeLeft(timeLimit)
    const timer = setInterval(() => {
@@ -42,7 +88,7 @@ const CardDisplayModal = ({
    }, 1000)

    return () => clearInterval(timer)
-  }, [isOpen, timeLimit])
+  }, [isOpen, timeLimit, isMyTurn])

  // Reset state when modal opens
  useEffect(() => {
@@ -50,8 +96,13 @@ const CardDisplayModal = ({
      setPlayerAnswer("")
      setSelectedOption(null)
      setIsProcessing(false)
+      
+      // Initialize sentence pairing right items
+      if (card?.sentencePairs && card.sentencePairs.length > 0) {
+        setRightItems(card.sentencePairs.map(p => ({ id: p.id, text: p.right })))
+      }
    }
-  }, [isOpen])
+  }, [isOpen, card])

  const handleTimeout = () => {
    if (onSubmitAnswer) {
@@ -60,27 +111,49 @@ const CardDisplayModal = ({
  }

  const handleSubmit = async () => {
-    if (isProcessing) return
+    if (isProcessing || !isMyTurn) return

    let answer = null
    
-    // Quiz típus - A, B, C, D
-    if (card?.type === 0 || card?.answerOptions) {
+    // Different answer formats based on card type
+    if (card?.type === CardType.SENTENCE_PAIRING && card?.sentencePairs) {
+      // Answer is array of pairs
+      answer = card.sentencePairs.map((leftPair, index) => ({
+        pairId: leftPair.id,
+        leftText: leftPair.left,
+        rightText: rightItems[index].text
+      }))
+    } else if (selectedOption !== null) {
      answer = selectedOption
-    }
-    // Szöveges válasz
-    else {
+    } else {
      answer = playerAnswer.trim()
    }

-    if (!answer) return
+    if (!answer || (Array.isArray(answer) && answer.length === 0)) {
+      console.warn('⚠️ No answer provided')
+      return
+    }

+    console.log('📝 Submitting answer:', answer)
    setIsProcessing(true)
    
    try {
      await onSubmitAnswer(answer)
    } catch (error) {
-      console.error("Válasz küldési hiba:", error)
+      console.error("❌ Válasz küldési hiba:", error)
+      setIsProcessing(false)
+    }
+  }
+
+  const handleDragEnd = (event) => {
+    const { active, over } = event
+    
+    if (active.id !== over.id) {
+      setRightItems((items) => {
+        const oldIndex = items.findIndex(item => item.id === active.id)
+        const newIndex = items.findIndex(item => item.id === over.id)
+        return arrayMove(items, oldIndex, newIndex)
+      })
    }
  }

@@ -97,7 +170,7 @@ const CardDisplayModal = ({
    switch (cardType) {
      case "QUESTION": return "Feladat Kártya"
      case "LUCK": return "Szerencse Kártya"
-      case "JOKER": return "Joker Kártya"
+      case "JOKER": return "Joker Kártya Feladat"
      default: return "Kártya"
    }
  }
@@ -143,7 +216,7 @@ const CardDisplayModal = ({
            animate={{ scale: 1, opacity: 1, y: 0 }}
            exit={{ scale: 0.9, opacity: 0, y: 20 }}
            transition={{ type: "spring", duration: 0.5 }}
-            className="relative bg-gradient-to-br from-gray-900 via-gray-800 to-gray-900 rounded-2xl shadow-2xl border-2 border-purple-500/30 max-w-2xl w-full overflow-hidden"
+            className="relative bg-gradient-to-br from-gray-900 via-gray-800 to-gray-900 rounded-2xl shadow-2xl border-2 border-purple-500/30 max-w-2xl w-full overflow-hidden max-h-[90vh] overflow-y-auto"
          >
            {/* Header */}
            <div className={`bg-gradient-to-r ${getCardBgGradient()} p-6 relative overflow-hidden`}>
@@ -154,13 +227,20 @@ const CardDisplayModal = ({
                  <div>
                    <h2 className="text-2xl font-bold text-white">{getCardTitle()}</h2>
                    {cardType === "QUESTION" && (
-                      <p className="text-white/80 text-sm">Válaszolj a kérdésre!</p>
+                      <p className="text-white/80 text-sm">
+                        {isMyTurn ? "Válaszolj a kérdésre!" : "Néző mód - Várakozás a játékosra"}
+                      </p>
+                    )}
+                    {cardType === "JOKER" && (
+                      <p className="text-purple-100 text-sm">
+                        {isMyTurn ? "Gamemaster jóváhagyás szükséges" : "Várakozás a Gamemaster döntésére"}
+                      </p>
                    )}
                  </div>
                </div>
                
-                {/* Timer - csak QUESTION típusnál */}
-                {cardType === "QUESTION" && (
+                {/* Timer - csak QUESTION típusnál és aktív játékosnál */}
+                {cardType === "QUESTION" && isMyTurn && (
                  <div className="bg-black/30 rounded-lg px-4 py-2">
                    <div className={`text-2xl font-bold ${getTimeColor()}`}>
                      ⏱️ {formatTime(timeLeft)}
@@ -172,57 +252,261 @@ const CardDisplayModal = ({

            {/* Content */}
            <div className="p-6 space-y-6">
-              {/* Question/Text */}
-              <div className="bg-gray-800/50 rounded-xl p-5 border border-gray-700">
-                <div className="flex items-start gap-3">
-                  <div className="text-3xl">📝</div>
-                  <div className="flex-1">
-                    <p className="text-white text-lg leading-relaxed">
-                      {card.question || card.text || card.statement}
-                    </p>
+              {/* JOKER CARD SPECIFIC LAYOUT */}
+              {cardType === "JOKER" ? (
+                <>
+                  {/* Player Info */}
+                  <div className="bg-gray-800/50 rounded-xl p-4 border border-gray-700">
+                    <div className="flex items-center gap-3">
+                      <div className="text-4xl">{card.playerEmoji || "🎭"}</div>
+                      <div>
+                        <p className="text-gray-400 text-sm">Játékos</p>
+                        <p className="text-white font-semibold text-lg">{card.playerName}</p>
+                      </div>
+                    </div>
                  </div>
-                </div>
-              </div>

-              {/* Answer Options - Quiz típus (type: 0) */}
-              {cardType === "QUESTION" && (card.type === 0 || card.answerOptions) && (
+                  {/* Joker Card Details */}
+                  <div className="bg-gradient-to-br from-purple-900/30 to-pink-900/30 rounded-xl p-5 border border-purple-500/30">
+                    <div className="flex items-start gap-3 mb-3">
+                      <div className="text-3xl">🎯</div>
+                      <div className="flex-1">
+                        <h3 className="text-purple-300 font-semibold mb-2">Feladat címe</h3>
+                        <p className="text-white text-lg font-medium">
+                          {card.question || "Joker Kártya Feladat"}
+                        </p>
+                      </div>
+                    </div>
+
+                    {card.consequence && (
+                      <div className="flex items-start gap-3">
+                        <div className="text-2xl">📝</div>
+                        <div className="flex-1">
+                          <h3 className="text-purple-300 font-semibold mb-2">Feladat leírása</h3>
+                          <p className="text-gray-300 leading-relaxed">
+                            {card.consequence}
+                          </p>
+                        </div>
+                      </div>
+                    )}
+
+                    {/* Points Info (if available) */}
+                    {card.points && (
+                      <div className="mt-4 pt-4 border-t border-purple-500/20">
+                        <div className="flex items-center gap-2">
+                          <span className="text-2xl">⭐</span>
+                          <span className="text-yellow-400 font-bold text-lg">
+                            {card.points} pont
+                          </span>
+                          <span className="text-gray-400 text-sm">járható érte</span>
+                        </div>
+                      </div>
+                    )}
+                  </div>
+
+                  {/* Waiting for gamemaster message */}
+                  {card.waitingForGamemaster && (
+                    <div className="bg-yellow-900/20 rounded-xl p-4 border border-yellow-500/30">
+                      <div className="flex items-start gap-3">
+                        <div className="text-2xl">ℹ️</div>
+                        <div className="flex-1">
+                          <p className="text-yellow-200 text-sm">
+                            <strong>Várakozás:</strong> A Gamemaster döntése szükséges a folytatáshoz.
+                          </p>
+                        </div>
+                      </div>
+                    </div>
+                  )}
+                </>
+              ) : (
+                <>
+                  {/* REGULAR CARD LAYOUT */}
+                  {/* Spectator Notice */}
+                  {!isMyTurn && (
+                    <div className="bg-blue-900/30 rounded-xl p-4 border border-blue-500/50 text-center">
+                      <p className="text-blue-300 font-semibold">👀 Néző módban vagy</p>
+                      <p className="text-gray-300 text-sm mt-1">Várakozás a játékos válaszára...</p>
+                    </div>
+                  )}
+
+                  {/* Question/Text */}
+                  <div className="bg-gray-800/50 rounded-xl p-5 border border-gray-700">
+                    <div className="flex items-start gap-3">
+                      <div className="text-3xl">📝</div>
+                      <div className="flex-1">
+                        <p className="text-white text-lg leading-relaxed">
+                          {card.question || card.text || card.statement}
+                        </p>
+                      </div>
+                    </div>
+                  </div>
+                </>
+              )}
+
+              {/* QUIZ TYPE - Four Buttons (A, B, C, D) */}
+              {cardType === "QUESTION" && card.type === CardType.QUIZ && card.answerOptions && card.answerOptions.length > 0 && (
                <div className="space-y-3">
-                  <h3 className="text-purple-300 font-semibold">Válaszd ki a helyes választ:</h3>
-                  {card.answerOptions?.map((option, index) => (
-                    <button
-                      key={index}
-                      onClick={() => setSelectedOption(option.answer)}
-                      disabled={isProcessing}
-                      className={`w-full text-left p-4 rounded-lg border-2 transition-all ${
-                        selectedOption === option.answer
-                          ? "bg-purple-600 border-purple-400 text-white"
-                          : "bg-gray-800 border-gray-600 text-gray-300 hover:border-purple-500"
-                      } ${isProcessing ? "opacity-50 cursor-not-allowed" : "cursor-pointer"}`}
-                    >
-                      <span className="font-bold">{option.answer})</span> {option.text}
-                    </button>
-                  ))}
+                  <h3 className="text-purple-300 font-semibold">
+                    {isMyTurn ? "Válaszd ki a helyes választ:" : "Válasz lehetőségek:"}
+                  </h3>
+                  <div className="grid grid-cols-1 gap-3">
+                    {card.answerOptions.map((option, index) => (
+                      <button
+                        key={index}
+                        onClick={() => isMyTurn && setSelectedOption(option.answer)}
+                        disabled={!isMyTurn || isProcessing}
+                        className={`w-full text-left p-4 rounded-lg border-2 transition-all ${
+                          selectedOption === option.answer
+                            ? "bg-purple-600 border-purple-400 text-white scale-105"
+                            : submittedAnswer === option.answer
+                            ? "bg-blue-600 border-blue-400 text-white"
+                            : "bg-gray-800 border-gray-600 text-gray-300"
+                        } ${isMyTurn && !isProcessing ? "hover:border-purple-500 cursor-pointer" : "cursor-default"} ${
+                          !isMyTurn ? "opacity-75" : ""
+                        }`}
+                      >
+                        <div className="flex items-center gap-3">
+                          <span className="text-2xl font-bold bg-gray-900/50 rounded-full w-10 h-10 flex items-center justify-center">
+                            {option.answer}
+                          </span>
+                          <span className="flex-1">{option.text}</span>
+                        </div>
+                      </button>
+                    ))}
+                  </div>
+                  {!isMyTurn && submittedAnswer && (
+                    <p className="text-blue-300 text-center text-sm">
+                      ℹ️ A játékos választása: <span className="font-bold">{submittedAnswer}</span>
+                    </p>
+                  )}
                </div>
              )}

-              {/* Text Input - egyéb kérdés típusok */}
-              {cardType === "QUESTION" && card.type !== 0 && !card.answerOptions && (
+              {/* TRUE/FALSE TYPE - Two Buttons */}
+              {cardType === "QUESTION" && card.type === CardType.TRUE_FALSE && (
                <div className="space-y-3">
-                  <h3 className="text-purple-300 font-semibold">Írd be a választ:</h3>
+                  <h3 className="text-purple-300 font-semibold text-center">
+                    {isMyTurn ? "Igaz vagy Hamis?" : "Válasz lehetőségek:"}
+                  </h3>
+                  <div className="grid grid-cols-2 gap-4">
+                    <button
+                      onClick={() => isMyTurn && setSelectedOption("Igaz")}
+                      disabled={!isMyTurn || isProcessing}
+                      className={`p-6 rounded-xl border-2 transition-all ${
+                        selectedOption === "Igaz"
+                          ? "bg-green-600 border-green-400 text-white scale-105"
+                          : submittedAnswer === "Igaz"
+                          ? "bg-blue-600 border-blue-400 text-white"
+                          : "bg-gray-800 border-gray-600 text-gray-300"
+                      } ${isMyTurn && !isProcessing ? "hover:border-green-500 cursor-pointer" : "cursor-default"}`}
+                    >
+                      <div className="text-center">
+                        <div className="text-4xl mb-2">✅</div>
+                        <div className="text-xl font-bold">IGAZ</div>
+                      </div>
+                    </button>
+                    <button
+                      onClick={() => isMyTurn && setSelectedOption("Hamis")}
+                      disabled={!isMyTurn || isProcessing}
+                      className={`p-6 rounded-xl border-2 transition-all ${
+                        selectedOption === "Hamis"
+                          ? "bg-red-600 border-red-400 text-white scale-105"
+                          : submittedAnswer === "Hamis"
+                          ? "bg-blue-600 border-blue-400 text-white"
+                          : "bg-gray-800 border-gray-600 text-gray-300"
+                      } ${isMyTurn && !isProcessing ? "hover:border-red-500 cursor-pointer" : "cursor-default"}`}
+                    >
+                      <div className="text-center">
+                        <div className="text-4xl mb-2">❌</div>
+                        <div className="text-xl font-bold">HAMIS</div>
+                      </div>
+                    </button>
+                  </div>
+                  {!isMyTurn && submittedAnswer && (
+                    <p className="text-blue-300 text-center text-sm">
+                      ℹ️ A játékos választása: <span className="font-bold">{submittedAnswer}</span>
+                    </p>
+                  )}
+                </div>
+              )}
+
+              {/* SENTENCE_PAIRING TYPE - Drag and Drop */}
+              {cardType === "QUESTION" && card.type === CardType.SENTENCE_PAIRING && card.sentencePairs && card.sentencePairs.length > 0 && (
+                <div className="space-y-4">
+                  <h3 className="text-purple-300 font-semibold text-center">
+                    {isMyTurn ? "Párosítsd a mondatokat! (Húzd a jobb oldali elemeket)" : "Mondatpárosítás:"}
+                  </h3>
+                  <div className="grid grid-cols-2 gap-4">
+                    {/* Left column - fixed */}
+                    <div className="space-y-3">
+                      <p className="text-gray-400 text-sm text-center font-semibold">Bal oldal</p>
+                      {card.sentencePairs.map((pair, index) => (
+                        <div
+                          key={`left-${pair.id}`}
+                          className="bg-gray-800 border-2 border-blue-500 rounded-lg p-3 text-white"
+                        >
+                          {pair.left}
+                        </div>
+                      ))}
+                    </div>
+                    
+                    {/* Right column - draggable */}
+                    <div className="space-y-3">
+                      <p className="text-gray-400 text-sm text-center font-semibold">
+                        {isMyTurn ? "Jobb oldal (húzható)" : "Jobb oldal"}
+                      </p>
+                      <DndContext
+                        sensors={sensors}
+                        collisionDetection={closestCenter}
+                        onDragEnd={handleDragEnd}
+                      >
+                        <SortableContext
+                          items={rightItems.map(item => item.id)}
+                          strategy={verticalListSortingStrategy}
+                          disabled={!isMyTurn}
+                        >
+                          {rightItems.map((item) => (
+                            <DraggableItem
+                              key={item.id}
+                              id={item.id}
+                              text={item.text}
+                              disabled={!isMyTurn}
+                            />
+                          ))}
+                        </SortableContext>
+                      </DndContext>
+                    </div>
+                  </div>
+                  {!isMyTurn && (
+                    <p className="text-blue-300 text-center text-sm">
+                      ℹ️ Várakozás a játékos párosítására...
+                    </p>
+                  )}
+                </div>
+              )}
+
+              {/* OWN_ANSWER and CLOSER - Text Input */}
+              {cardType === "QUESTION" && (card.type === CardType.OWN_ANSWER || card.type === CardType.CLOSER) && (
+                <div className="space-y-3">
+                  <h3 className="text-purple-300 font-semibold">
+                    {isMyTurn ? "Írd be a választ:" : "A játékos válasza:"}
+                  </h3>
                  <input
                    type="text"
-                    value={playerAnswer}
-                    onChange={(e) => setPlayerAnswer(e.target.value)}
-                    onKeyPress={(e) => e.key === 'Enter' && handleSubmit()}
-                    disabled={isProcessing}
-                    placeholder="Válaszod..."
-                    className="w-full bg-gray-800 border-2 border-gray-600 rounded-lg px-4 py-3 text-white focus:border-purple-500 focus:outline-none disabled:opacity-50"
+                    value={isMyTurn ? playerAnswer : submittedAnswer || "Várakozás..."}
+                    onChange={(e) => isMyTurn && setPlayerAnswer(e.target.value)}
+                    onKeyPress={(e) => isMyTurn && e.key === 'Enter' && !isProcessing && playerAnswer.trim() && handleSubmit()}
+                    disabled={!isMyTurn || isProcessing}
+                    placeholder={card.type === CardType.CLOSER ? "Számot adj meg" : "Válaszod..."}
+                    className={`w-full bg-gray-800 border-2 border-gray-600 rounded-lg px-4 py-3 text-white focus:border-purple-500 focus:outline-none disabled:opacity-50 ${
+                      !isMyTurn ? "cursor-default" : ""
+                    }`}
                  />
                </div>
              )}

              {/* Hint (if available) */}
-              {card.hint && (
+              {card.hint && isMyTurn && (
                <div className="bg-yellow-900/20 rounded-xl p-4 border border-yellow-500/30">
                  <div className="flex items-start gap-3">
                    <div className="text-2xl">💡</div>
@@ -234,11 +518,11 @@ const CardDisplayModal = ({
                </div>
              )}

-              {/* Submit Button - csak QUESTION típusnál */}
-              {cardType === "QUESTION" && (
+              {/* Submit Button - csak QUESTION típusnál és aktív játékosnál */}
+              {cardType === "QUESTION" && isMyTurn && (
                <button
                  onClick={handleSubmit}
-                  disabled={isProcessing || (!playerAnswer && !selectedOption)}
+                  disabled={isProcessing || (!playerAnswer.trim() && selectedOption === null && card.type !== CardType.SENTENCE_PAIRING)}
                  className="w-full bg-gradient-to-r from-purple-600 to-blue-600 hover:from-purple-500 hover:to-blue-500 
                           text-white font-bold py-4 px-6 rounded-xl shadow-lg
                           transform transition-all duration-200 hover:scale-105 active:scale-95
@@ -254,8 +538,8 @@ const CardDisplayModal = ({
                </button>
              )}

-              {/* Close Button - LUCK és JOKER típusnál */}
-              {(cardType === "LUCK" || cardType === "JOKER") && (
+              {/* Close Button - LUCK és JOKER típusnál vagy nézőknél */}
+              {((cardType === "LUCK" || cardType === "JOKER") || !isMyTurn) && (
                <button
                  onClick={onClose}
                  className="w-full bg-gradient-to-r from-green-600 to-teal-600 hover:from-green-500 hover:to-teal-500