final POC

SerpentRace_Frontend/src/pages/Game/JokerApprovalModal.jsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react"
+import React, { useState, useEffect } from "react"
 import { motion, AnimatePresence } from "framer-motion"
 
 /**
@@ -12,6 +12,7 @@ import { motion, AnimatePresence } from "framer-motion"
  * @param {Function} props.onReject - Elutasítás callback
  * @param {string} props.playerName - Játékos neve
  * @param {string} props.playerEmoji - Játékos emoji
+ * @param {number} props.timeLimit - Időkorlát másodpercben (default: 120)
  */
 const JokerApprovalModal = ({
   isOpen,
@@ -20,9 +21,49 @@ const JokerApprovalModal = ({
   onApprove,
   onReject,
   playerName,
-  playerEmoji = "🎭"
+  playerEmoji = "🎭",
+  timeLimit = 120
 }) => {
   const [isProcessing, setIsProcessing] = useState(false)
+  const [timeLeft, setTimeLeft] = useState(timeLimit)
+
+  // Timer countdown
+  useEffect(() => {
+    if (!isOpen) return
+
+    setTimeLeft(timeLimit)
+    const timer = setInterval(() => {
+      setTimeLeft(prev => {
+        if (prev <= 1) {
+          clearInterval(timer)
+          handleTimeout()
+          return 0
+        }
+        return prev - 1
+      })
+    }, 1000)
+
+    return () => clearInterval(timer)
+  }, [isOpen, timeLimit])
+
+  const handleTimeout = () => {
+    // Auto-reject on timeout
+    if (onReject && !isProcessing) {
+      handleReject()
+    }
+  }
+
+  const formatTime = (seconds) => {
+    const mins = Math.floor(seconds / 60)
+    const secs = seconds % 60
+    return `${mins}:${secs.toString().padStart(2, '0')}`
+  }
+
+  const getTimeColor = () => {
+    if (timeLeft > 60) return "text-green-400"
+    if (timeLeft > 30) return "text-yellow-400"
+    return "text-red-400 animate-pulse"
+  }
 
   const handleApprove = async () => {
     setIsProcessing(true)
@@ -82,13 +123,21 @@ const JokerApprovalModal = ({
                     <p className="text-purple-100 text-sm">Gamemaster jóváhagyás szükséges</p>
                   </div>
                 </div>
-                <button
-                  onClick={onClose}
-                  className="text-white/80 hover:text-white transition-colors text-2xl"
-                  disabled={isProcessing}
-                >
-                  ✕
-                </button>
+                <div className="flex items-center gap-3">
+                  {/* Timer */}
+                  <div className="bg-black/30 rounded-lg px-4 py-2">
+                    <div className={`text-2xl font-bold ${getTimeColor()}`}>
+                      ⏱️ {formatTime(timeLeft)}
+                    </div>
+                  </div>
+                  <button
+                    onClick={onClose}
+                    className="text-white/80 hover:text-white transition-colors text-2xl"
+                    disabled={isProcessing}
+                  >
+                    ✕
+                  </button>
+                </div>
               </div>
             </div>