import React, { useState, useEffect } from 'react'; import { Sparkles, Trophy, Gamepad2, Play, Square, User, Eye, Smile, Calendar } from 'lucide-react'; const FaceAnalyzerGame = ({ faceAnalyses, gameState, wsUrl }) => { const [isPlaying, setIsPlaying] = useState(false); const [targetEmotion, setTargetEmotion] = useState("Happy"); // Supabase states const [showLeaderboard, setShowLeaderboard] = useState(false); const [leaderboard, setLeaderboard] = useState([]); const [playerName, setPlayerName] = useState(''); const [isSubmittingScore, setIsSubmittingScore] = useState(false); const [lastGameScore, setLastGameScore] = useState(null); const emotionEmojis = { "Neutral": "😐", "Happy": "😄", "Sad": "😢", "Surprise": "😲", "Angry": "😡", "Fear": "😨", "Disgust": "🤢", "Contempt": "😒" }; const eyeColorHex = { "Blue": "#00d2ff", "Green": "#39ff14", "Brown": "#b07d62", "Hazel": "#c2a649", "Grey": "#a0aab2", "Unknown": "#ffffff" }; const translateGender = (g) => { return g === "Male" ? "ذكر" : g === "Female" ? "أنثى" : g; }; const translateEmotion = (e) => { const dict = { "Neutral": "طبيعي / حيادي", "Happy": "سعيد", "Sad": "حزين", "Surprise": "متفاجئ", "Angry": "غاضب", "Fear": "خائف", "Disgust": "مشمئز", "Contempt": "مستاء" }; return dict[e] || e; }; const translateFaceShape = (s) => { const dict = { "Oval": "بيضوي", "Round": "دائري", "Square": "مربع", "Heart": "قلبي", "Oblong": "مستطيل / ممدود", "Unknown": "غير معروف" }; return dict[s] || s; }; const translateEyeColor = (c) => { const dict = { "Blue": "أزرق", "Green": "أخضر", "Brown": "بني", "Hazel": "عسلي", "Grey": "رمادي", "Unknown": "غير معروف" }; return dict[c] || c; }; const translateFeedback = (fb) => { if (!fb) return ""; let res = fb; res = res.replace(/Mimic: (\w+)!/, 'قم بمحاكاة: $1!'); res = res.replace(/Correct! Now make: (\w+)!/, 'صحيح! والآن قم بمحاكاة: $1!'); // Translate English emotion names to Arabic inside text res = res.replace(/Happy/g, 'سعيد'); res = res.replace(/Sad/g, 'حزين'); res = res.replace(/Surprise/g, 'متفاجئ'); res = res.replace(/Angry/g, 'غاضب'); res = res.replace(/Neutral/g, 'طبيعي'); res = res.replace(/Fear/g, 'خائف'); res = res.replace(/Disgust/g, 'مشمئز'); res = res.replace(/Contempt/g, 'مستاء'); return res; }; // Fetch leaderboard scores from backend API const fetchLeaderboard = () => { if (!wsUrl) return; let httpBaseUrl = wsUrl.replace(/^ws/, 'http').replace(/\/ws$/, ''); fetch(`${httpBaseUrl}/api/leaderboard`) .then(res => res.json()) .then(data => { if (Array.isArray(data)) { setLeaderboard(data); } }) .catch(err => console.error("Error loading leaderboard:", err)); }; useEffect(() => { if (wsUrl) { fetchLeaderboard(); } }, [showLeaderboard, wsUrl]); const handleStartGame = () => { setIsPlaying(true); setLastGameScore(null); if (window.sendGameActionToWs) { window.sendGameActionToWs("start_game", { target_emotion: targetEmotion }); } }; const handleStopGame = () => { setIsPlaying(false); if (window.sendGameActionToWs) { window.sendGameActionToWs("stop_game"); } if (gameState && gameState.score > 0) { setLastGameScore(gameState.score); } }; const handleEmotionChange = (e) => { setTargetEmotion(e.target.value); if (isPlaying && window.sendGameActionToWs) { window.sendGameActionToWs("start_game", { target_emotion: e.target.value }); } }; const handleSaveScore = () => { if (!playerName.trim() || !lastGameScore || !wsUrl) return; setIsSubmittingScore(true); let httpBaseUrl = wsUrl.replace(/^ws/, 'http').replace(/\/ws$/, ''); fetch(`${httpBaseUrl}/api/leaderboard`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ player_name: playerName, score: lastGameScore, high_score: gameState?.high_score || lastGameScore }) }) .then(res => res.json()) .then(() => { setLastGameScore(null); setPlayerName(''); setIsSubmittingScore(false); setShowLeaderboard(true); fetchLeaderboard(); }) .catch(err => { console.error("Error saving score:", err); setIsSubmittingScore(false); }); }; const analysesList = Object.entries(faceAnalyses || {}).map(([pid, analysis]) => ({ id: pid, ...analysis })); return (
{/* Panel 1: Face Attributes Card */}

ماسح الوجه البيومتري

{analysesList.length === 0 ? (
بانتظار رصد وجه في بث الكاميرا...
) : (
{analysesList.map((person) => (
ملف الشخص #{person.id} نشط
{/* Age & Gender */}
العمر / الجنس
{translateGender(person.gender)} | فئة {person.age}
{/* Emotion */}
الحالة النفسية
{emotionEmojis[person.emotion] || "😐"} {translateEmotion(person.emotion)}
{/* Face Shape */}
شكل الوجه
وجه {translateFaceShape(person.face_shape)}
{/* Eye Color */}
لون العين
{translateEyeColor(person.eye_color)}
))}
)}
{/* Panel 2: Interactive Emotion Game Card */}

{showLeaderboard ? 'لوحة صدارة المشاعر' : 'مركز لعبة محاكاة المشاعر'}

{/* Game Scoreboard */}
أعلى نتيجة: {gameState?.high_score || 0}
النتيجة الحالية: {gameState?.score || 0}
{/* Game Main Area / Leaderboard Area */} {showLeaderboard ? (
{leaderboard.length === 0 ? (
لا يوجد نتائج مسجلة بعد. كن أول من يسجل نتيجة!
) : ( {leaderboard.map((row, idx) => ( ))}
الترتيب اللاعب النقاط التاريخ
#{idx + 1} {row.player_name} {row.score} {new Date(row.created_at).toLocaleDateString('ar-EG', { month: 'numeric', day: 'numeric' })}
)}
) : lastGameScore ? (

انتهت اللعبة! نتيجتك: {lastGameScore} نقطة

أدخل اسمك لحفظ النتيجة في لوحة الصدارة العالمية:

setPlayerName(e.target.value)} className="cyber-font" style={{ flex: 1, backgroundColor: 'rgba(0,0,0,0.6)', border: '1px solid var(--neon-cyan)', borderRadius: '6px', padding: '6px 10px', color: '#fff', fontSize: '12px', outline: 'none', textAlign: 'center' }} placeholder="الاسم" maxLength={15} disabled={isSubmittingScore} />
) : (
{isPlaying ? (
{emotionEmojis[gameState?.target_emotion] || "😐"}

حاكي تعبير: {translateEmotion(gameState?.target_emotion)?.toUpperCase()}

{translateFeedback(gameState?.feedback) || "انظر إلى الكاميرا وقم بمطابقة الملامح المطلوبة!"}

) : (

اختبر الوجوه والتعبيرات الذاتية!

اختر شعوراً بدائياً وابدأ اللعبة. سيقوم نموذج الذكاء الاصطناعي بتحليل ومطابقة دقة ملامح وجهك وقياسها في الوقت المباشر.

)}
)} {/* Controls */}
{!isPlaying && !lastGameScore && (
الشعور البدائي:
)} {!lastGameScore && (
{!isPlaying ? ( ) : ( )}
)}
); }; export default FaceAnalyzerGame;