feat: Initialize QuizMaster Live project
This commit sets up the foundational structure for the QuizMaster Live application. It includes: - Initializing a new Vite project with React and TypeScript. - Configuring project dependencies and build tools (Vite, TypeScript). - Defining core application types for game state, players, questions, etc. - Setting up basic Tailwind CSS for styling and defining custom animations. - Integrating with the Google Gemini API for AI-powered question generation. - Configuring environment variables for API keys and defining the application's metadata. - Adding a README with setup instructions and local development guide.
This commit is contained in:
Philip
@@ -0,0 +1,638 @@
|
||||
import React, { useState } from 'react';
|
||||
import { useGame } from '../context/GameContext';
|
||||
import { GamePhase, Game, Question } from '../types';
|
||||
import { Soundboard } from './Soundboard';
|
||||
import { Play, SkipForward, CheckCircle, XCircle, Users, Library, Sparkles, Plus, Trash2, Edit, Save, ArrowLeft, Upload, RefreshCw, Image as ImageIcon, List, Trophy, RotateCcw } from 'lucide-react';
|
||||
import { generateQuestions } from '../services/geminiService';
|
||||
|
||||
export const HostView: React.FC = () => {
|
||||
const {
|
||||
gameState, activeGameName, players, teams, buzzQueue, questions, games,
|
||||
approvePlayer, startGame, startCountdown, openBuzzers,
|
||||
resolveBuzz, rectifyBuzz, skipQuestion, nextPhase, resetGame,
|
||||
createGame, updateGame, deleteGame, loadGameToLive
|
||||
} = useGame();
|
||||
|
||||
const [activeTab, setActiveTab] = useState<'GAME' | 'PLAYERS' | 'LIBRARY'>('GAME');
|
||||
|
||||
// Library State
|
||||
const [editingGameId, setEditingGameId] = useState<string | null>(null);
|
||||
const [newGameName, setNewGameName] = useState('');
|
||||
|
||||
// Editor State
|
||||
const [aiTopic, setAiTopic] = useState('');
|
||||
const [isGenerating, setIsGenerating] = useState(false);
|
||||
const [isAddingQuestion, setIsAddingQuestion] = useState(false);
|
||||
const [manualQ, setManualQ] = useState({ text: '', answer: '', points: 10, category: '', mediaUrl: '' });
|
||||
|
||||
const currentQ = questions[gameState.currentQuestionIndex];
|
||||
const isPreGame = gameState.currentQuestionIndex === -1;
|
||||
const isGameOver = gameState.currentQuestionIndex >= questions.length;
|
||||
// Correctly identify if we have finished all questions and are just lingering on the last leaderboard
|
||||
const isLastQuestionPhase = gameState.currentQuestionIndex === questions.length - 1;
|
||||
|
||||
// --- Handlers ---
|
||||
|
||||
const handleCreateGame = () => {
|
||||
if (newGameName.trim()) {
|
||||
createGame(newGameName);
|
||||
setNewGameName('');
|
||||
}
|
||||
};
|
||||
|
||||
const handleAiGenerate = async (gameId: string) => {
|
||||
if (!aiTopic) return;
|
||||
setIsGenerating(true);
|
||||
const newQuestions = await generateQuestions(aiTopic);
|
||||
if (newQuestions.length > 0) {
|
||||
const game = games.find(g => g.id === gameId);
|
||||
if (game) {
|
||||
updateGame(gameId, { questions: [...game.questions, ...newQuestions] });
|
||||
}
|
||||
alert(`Added ${newQuestions.length} questions!`);
|
||||
setAiTopic('');
|
||||
} else {
|
||||
alert("Failed to generate. Check API Key or try again.");
|
||||
}
|
||||
setIsGenerating(false);
|
||||
};
|
||||
|
||||
const handleImageUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const file = e.target.files?.[0];
|
||||
if (file) {
|
||||
const reader = new FileReader();
|
||||
reader.onloadend = () => {
|
||||
setManualQ(prev => ({ ...prev, mediaUrl: reader.result as string }));
|
||||
};
|
||||
reader.readAsDataURL(file);
|
||||
}
|
||||
};
|
||||
|
||||
const handleAddManualQuestion = (gameId: string) => {
|
||||
if (!manualQ.text || !manualQ.answer) return;
|
||||
const game = games.find(g => g.id === gameId);
|
||||
if (game) {
|
||||
// Detect Media Type
|
||||
let mediaType: 'image' | 'video' | undefined = undefined;
|
||||
if (manualQ.mediaUrl) {
|
||||
if (manualQ.mediaUrl.startsWith('data:image') || manualQ.mediaUrl.match(/\.(jpeg|jpg|gif|png)$/i)) {
|
||||
mediaType = 'image';
|
||||
} else if (manualQ.mediaUrl.includes('youtube') || manualQ.mediaUrl.includes('youtu.be')) {
|
||||
mediaType = 'video';
|
||||
} else {
|
||||
// Fallback assumption for uploads vs links
|
||||
mediaType = 'image';
|
||||
}
|
||||
}
|
||||
|
||||
const newQuestion: Question = {
|
||||
id: crypto.randomUUID(),
|
||||
text: manualQ.text,
|
||||
answer: manualQ.answer,
|
||||
points: Number(manualQ.points),
|
||||
category: manualQ.category || 'General',
|
||||
mediaUrl: manualQ.mediaUrl,
|
||||
mediaType
|
||||
};
|
||||
updateGame(gameId, { questions: [...game.questions, newQuestion] });
|
||||
setManualQ({ text: '', answer: '', points: 10, category: '', mediaUrl: '' });
|
||||
setIsAddingQuestion(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleDeleteQuestion = (gameId: string, qId: string) => {
|
||||
const game = games.find(g => g.id === gameId);
|
||||
if (game) {
|
||||
updateGame(gameId, { questions: game.questions.filter(q => q.id !== qId) });
|
||||
}
|
||||
};
|
||||
|
||||
const handleLoadGame = (gameId: string) => {
|
||||
// Removed confirm() as it can block execution or be annoying
|
||||
loadGameToLive(gameId);
|
||||
setActiveTab('GAME');
|
||||
};
|
||||
|
||||
// Find the winner of the current round (if any)
|
||||
const currentWinnerBuzz = buzzQueue.find(b => b.status === 'CORRECT');
|
||||
const currentWinner = currentWinnerBuzz ? players.find(p => p.id === currentWinnerBuzz.playerId) : null;
|
||||
|
||||
return (
|
||||
<div className="h-full bg-slate-100 flex flex-col overflow-hidden text-slate-800">
|
||||
{/* Top Bar */}
|
||||
<header className="bg-white border-b border-slate-200 px-6 py-3 flex justify-between items-center shadow-sm z-20 shrink-0">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="bg-indigo-600 text-white font-black px-2 py-1 rounded text-xl">QM</div>
|
||||
<h1 className="font-bold text-lg text-slate-700">Host Dashboard</h1>
|
||||
</div>
|
||||
{/* Active Game Display */}
|
||||
<div className="hidden md:flex items-center gap-2 px-3 py-1 bg-indigo-50 border border-indigo-200 rounded-full shadow-sm">
|
||||
<Library size={16} className="text-indigo-600" />
|
||||
<span className="text-xs text-indigo-400 font-bold uppercase">ACTIVE GAME:</span>
|
||||
<span className="text-sm font-bold text-indigo-900">{activeGameName}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-4 items-center">
|
||||
{isGameOver && (
|
||||
<div className="bg-red-600 text-white px-3 py-1 rounded font-bold animate-pulse">
|
||||
GAME OVER
|
||||
</div>
|
||||
)}
|
||||
<div className="px-3 py-1 bg-slate-100 rounded text-xs font-mono border border-slate-300">
|
||||
STATUS: <span className="font-bold text-indigo-600">{gameState.phase}</span>
|
||||
</div>
|
||||
<button
|
||||
onClick={resetGame}
|
||||
className="flex items-center gap-1 text-red-600 text-sm hover:underline hover:bg-red-50 px-2 py-1 rounded transition-colors"
|
||||
title="Resets scores and game phase, keeps players"
|
||||
>
|
||||
<RotateCcw size={14} /> Restart Game
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div className="flex flex-1 overflow-hidden">
|
||||
{/* Left Sidebar - Navigation & Soundboard */}
|
||||
<aside className="w-64 bg-slate-900 text-white flex flex-col overflow-y-auto">
|
||||
<nav className="p-4 space-y-2">
|
||||
<button
|
||||
onClick={() => setActiveTab('GAME')}
|
||||
className={`w-full flex items-center gap-3 px-4 py-3 rounded transition-colors ${activeTab === 'GAME' ? 'bg-indigo-600' : 'hover:bg-slate-800'}`}
|
||||
>
|
||||
<Play className="w-4 h-4" /> Game Control
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setActiveTab('PLAYERS')}
|
||||
className={`w-full flex items-center gap-3 px-4 py-3 rounded transition-colors ${activeTab === 'PLAYERS' ? 'bg-indigo-600' : 'hover:bg-slate-800'}`}
|
||||
>
|
||||
<Users className="w-4 h-4" /> Players ({players.length})
|
||||
</button>
|
||||
<button
|
||||
onClick={() => { setActiveTab('LIBRARY'); setEditingGameId(null); }}
|
||||
className={`w-full flex items-center gap-3 px-4 py-3 rounded transition-colors ${activeTab === 'LIBRARY' ? 'bg-indigo-600' : 'hover:bg-slate-800'}`}
|
||||
>
|
||||
<Library className="w-4 h-4" /> Game Library
|
||||
</button>
|
||||
</nav>
|
||||
|
||||
<div className="mt-auto p-4 border-t border-slate-800">
|
||||
<Soundboard />
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
{/* Main Content Area */}
|
||||
<main className="flex-1 overflow-y-auto p-8">
|
||||
|
||||
{/* GAME CONTROL TAB */}
|
||||
{activeTab === 'GAME' && (
|
||||
<div className="max-w-4xl mx-auto">
|
||||
{/* LAST QUESTION WARNING */}
|
||||
{isLastQuestionPhase && !isGameOver && (
|
||||
<div className="bg-amber-100 border-l-4 border-amber-500 text-amber-700 p-4 mb-6 font-bold shadow-sm">
|
||||
⚠️ THIS IS THE LAST QUESTION!
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Current Question Card */}
|
||||
<div className="bg-white p-6 rounded-xl shadow-md border border-slate-200 mb-8">
|
||||
<div className="flex justify-between items-start mb-4">
|
||||
<h2 className="text-xs font-bold text-slate-400 uppercase tracking-widest">
|
||||
{isPreGame
|
||||
? 'Ready to Start'
|
||||
: isGameOver ? 'Game Finished' : `Current Question (${gameState.currentQuestionIndex + 1}/${questions.length})`
|
||||
}
|
||||
</h2>
|
||||
{isPreGame && (
|
||||
<span className="text-xs bg-indigo-100 text-indigo-700 px-2 py-1 rounded font-bold">
|
||||
{questions.length} Questions Queued
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{currentQ ? (
|
||||
<>
|
||||
<div className="text-2xl font-bold mb-4">{currentQ.text}</div>
|
||||
{currentQ.mediaUrl && (
|
||||
<div className="mb-4">
|
||||
<span className="text-xs font-bold bg-slate-100 px-2 py-1 rounded text-slate-500 flex w-fit items-center gap-1">
|
||||
<ImageIcon size={12}/> Media Attached
|
||||
</span>
|
||||
<div className="text-xs text-blue-600 truncate mt-1 max-w-md">{currentQ.mediaUrl.substring(0, 50)}...</div>
|
||||
{currentQ.mediaType === 'image' && (
|
||||
<img src={currentQ.mediaUrl} alt="Preview" className="h-20 w-auto mt-2 rounded border border-slate-200" />
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
<div className="bg-green-50 px-4 py-3 rounded border border-green-200 text-green-800 font-mono mb-6">
|
||||
ANSWER: {currentQ.answer}
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<div className="text-slate-400 italic mb-6">
|
||||
{isPreGame ? "Game initialized. Waiting to start first question." : "Game Over. Check the final results."}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Controls based on Phase */}
|
||||
<div className="flex flex-wrap gap-4 border-t border-slate-100 pt-6">
|
||||
{gameState.phase === GamePhase.LOBBY && (
|
||||
<button onClick={startGame} className="bg-indigo-600 hover:bg-indigo-700 text-white px-6 py-3 rounded-lg font-bold shadow-lg transition-all">
|
||||
START GAME
|
||||
</button>
|
||||
)}
|
||||
|
||||
{/* Button logic for moving to next question OR finishing game */}
|
||||
{(gameState.phase === GamePhase.LEADERBOARD || gameState.phase === GamePhase.LOBBY) && !isGameOver && (
|
||||
isLastQuestionPhase && gameState.phase === GamePhase.LEADERBOARD ? (
|
||||
<button onClick={startCountdown} className="bg-indigo-800 hover:bg-indigo-900 text-white px-6 py-3 rounded-lg font-bold shadow-lg flex items-center gap-2 animate-pulse">
|
||||
<Trophy className="w-4 h-4" /> VIEW FINAL PODIUM
|
||||
</button>
|
||||
) : (
|
||||
<button onClick={startCountdown} className="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-lg font-bold shadow-lg flex items-center gap-2">
|
||||
<Play className="w-4 h-4" /> Start Question {gameState.currentQuestionIndex + 2}
|
||||
</button>
|
||||
)
|
||||
)}
|
||||
|
||||
{gameState.phase === GamePhase.QUESTION_DISPLAY && (
|
||||
<button onClick={openBuzzers} className="bg-red-600 hover:bg-red-700 text-white px-8 py-3 rounded-lg font-bold shadow-lg animate-pulse">
|
||||
OPEN BUZZERS
|
||||
</button>
|
||||
)}
|
||||
|
||||
{/* Skip/Reveal Button */}
|
||||
{(gameState.phase === GamePhase.QUESTION_DISPLAY || gameState.phase === GamePhase.BUZZER_OPEN || gameState.phase === GamePhase.ADJUDICATION) && (
|
||||
<button onClick={skipQuestion} className="bg-slate-500 hover:bg-slate-600 text-white px-6 py-3 rounded-lg font-bold shadow-lg flex items-center gap-2 ml-auto">
|
||||
<SkipForward className="w-4 h-4" /> Reveal Answer
|
||||
</button>
|
||||
)}
|
||||
|
||||
{gameState.phase === GamePhase.ANSWER_REVEAL && (
|
||||
<div className="flex w-full justify-between items-center">
|
||||
{/* UNDO BUTTON */}
|
||||
{currentWinner && (
|
||||
<button
|
||||
onClick={() => rectifyBuzz(currentWinner.id, 'WRONG')}
|
||||
className="bg-amber-100 hover:bg-amber-200 text-amber-800 px-4 py-3 rounded-lg font-bold border border-amber-300 flex items-center gap-2"
|
||||
>
|
||||
<RefreshCw className="w-4 h-4" />
|
||||
Undo Correct ({currentWinner.name})
|
||||
</button>
|
||||
)}
|
||||
|
||||
<button onClick={nextPhase} className="bg-slate-800 hover:bg-slate-900 text-white px-6 py-3 rounded-lg font-bold shadow-lg flex items-center gap-2 ml-auto">
|
||||
<SkipForward className="w-4 h-4" />
|
||||
{isLastQuestionPhase ? 'Finish Game' : 'Show Scores'}
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* QUESTION QUEUE PREVIEW (Added for better Host visibility) */}
|
||||
{isPreGame && questions.length > 0 && (
|
||||
<div className="bg-white rounded-xl shadow-sm border border-slate-200 p-4 mb-8">
|
||||
<div className="flex items-center gap-2 mb-3 text-slate-500 border-b border-slate-100 pb-2">
|
||||
<List size={16} />
|
||||
<h3 className="text-xs font-bold uppercase tracking-wider">Loaded Queue</h3>
|
||||
</div>
|
||||
<ul className="space-y-2 max-h-48 overflow-y-auto pr-2">
|
||||
{questions.map((q, idx) => (
|
||||
<li key={q.id} className="text-sm flex items-start gap-2 text-slate-600">
|
||||
<span className="font-mono font-bold text-slate-300 w-5">{idx+1}.</span>
|
||||
<span className="truncate">{q.text}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Buzzer Queue Adjudication */}
|
||||
{buzzQueue.length > 0 && (
|
||||
<div className="bg-white rounded-xl shadow-md border border-slate-200 overflow-hidden">
|
||||
<div className="bg-slate-50 px-6 py-3 border-b border-slate-200 flex justify-between items-center">
|
||||
<h3 className="font-bold text-slate-700">Buzzer Queue</h3>
|
||||
<span className="text-xs bg-slate-200 px-2 py-1 rounded text-slate-600">{buzzQueue.length} Buzzes</span>
|
||||
</div>
|
||||
<div className="divide-y divide-slate-100">
|
||||
{buzzQueue.map((buzz, idx) => {
|
||||
const player = players.find(p => p.id === buzz.playerId);
|
||||
const isCurrent = idx === 0 && buzz.status === 'PENDING';
|
||||
|
||||
return (
|
||||
<div key={buzz.playerId} className={`px-6 py-4 flex items-center justify-between ${isCurrent ? 'bg-yellow-50' : ''}`}>
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="font-mono font-bold text-slate-400">#{idx + 1}</div>
|
||||
<div>
|
||||
<div className="font-bold text-slate-800">{player?.name}</div>
|
||||
<div className="text-xs text-slate-500">{(buzz.timestamp % 10000)}ms</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
{buzz.status === 'PENDING' ? (
|
||||
isCurrent ? (
|
||||
<>
|
||||
<button
|
||||
onClick={() => resolveBuzz(buzz.playerId, true)}
|
||||
className="flex items-center gap-1 bg-green-100 text-green-700 px-3 py-1 rounded hover:bg-green-200 font-bold border border-green-300"
|
||||
>
|
||||
<CheckCircle className="w-4 h-4" /> CORRECT
|
||||
</button>
|
||||
<button
|
||||
onClick={() => resolveBuzz(buzz.playerId, false)}
|
||||
className="flex items-center gap-1 bg-red-100 text-red-700 px-3 py-1 rounded hover:bg-red-200 font-bold border border-red-300"
|
||||
>
|
||||
<XCircle className="w-4 h-4" /> WRONG
|
||||
</button>
|
||||
</>
|
||||
) : (
|
||||
<span className="text-xs text-slate-400 font-bold">WAITING</span>
|
||||
)
|
||||
) : (
|
||||
<div className="flex items-center gap-2">
|
||||
<span className={`text-xs font-bold px-2 py-1 rounded ${buzz.status === 'CORRECT' ? 'bg-green-100 text-green-700' : 'bg-red-100 text-red-700'}`}>
|
||||
{buzz.status}
|
||||
</span>
|
||||
{/* Correction Button for Wrong Answers */}
|
||||
{buzz.status === 'WRONG' && (
|
||||
<button
|
||||
onClick={() => rectifyBuzz(buzz.playerId, 'CORRECT')}
|
||||
title="Mark as Correct"
|
||||
className="p-1 text-slate-400 hover:text-green-600 hover:bg-green-50 rounded"
|
||||
>
|
||||
<RefreshCw className="w-3 h-3" />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* PLAYERS TAB */}
|
||||
{activeTab === 'PLAYERS' && (
|
||||
<div className="bg-white rounded-xl shadow-sm border border-slate-200">
|
||||
<table className="w-full text-left">
|
||||
<thead className="bg-slate-50 text-slate-500 text-xs uppercase font-bold">
|
||||
<tr>
|
||||
<th className="px-6 py-3">Name</th>
|
||||
<th className="px-6 py-3">Team</th>
|
||||
<th className="px-6 py-3">Score</th>
|
||||
<th className="px-6 py-3">Status</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-slate-100 text-slate-900">
|
||||
{players.map(p => (
|
||||
<tr key={p.id}>
|
||||
<td className="px-6 py-4 font-bold">{p.name}</td>
|
||||
<td className="px-6 py-4 text-slate-600">{teams.find(t => t.id === p.teamId)?.name || '-'}</td>
|
||||
<td className="px-6 py-4 font-mono">{p.score}</td>
|
||||
<td className="px-6 py-4">
|
||||
{p.isApproved ? (
|
||||
<span className="text-green-600 text-xs font-bold bg-green-100 px-2 py-1 rounded">JOINED</span>
|
||||
) : (
|
||||
<button onClick={() => approvePlayer(p.id)} className="text-blue-600 text-xs font-bold bg-blue-100 px-2 py-1 rounded hover:bg-blue-200">APPROVE</button>
|
||||
)}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* GAME LIBRARY TAB */}
|
||||
{activeTab === 'LIBRARY' && (
|
||||
<div className="space-y-6">
|
||||
{!editingGameId ? (
|
||||
/* MODE: LIST GAMES */
|
||||
<>
|
||||
<div className="flex justify-between items-center mb-6">
|
||||
<h2 className="text-2xl font-bold text-slate-800">Your Games</h2>
|
||||
<div className="flex gap-2">
|
||||
<input
|
||||
type="text"
|
||||
value={newGameName}
|
||||
onChange={e => setNewGameName(e.target.value)}
|
||||
placeholder="New Game Name..."
|
||||
className="px-4 py-2 rounded border border-slate-300 text-sm text-black bg-white"
|
||||
/>
|
||||
<button
|
||||
onClick={handleCreateGame}
|
||||
className="bg-indigo-600 text-white px-4 py-2 rounded text-sm font-bold hover:bg-indigo-700"
|
||||
>
|
||||
Create
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{games.map(game => (
|
||||
<div key={game.id} className="bg-white p-6 rounded-xl shadow-sm border border-slate-200 hover:shadow-md transition-shadow">
|
||||
<div className="flex justify-between items-start mb-4">
|
||||
<div className="h-12 w-12 bg-indigo-100 text-indigo-600 rounded-lg flex items-center justify-center">
|
||||
<Library className="w-6 h-6" />
|
||||
</div>
|
||||
<div className="flex gap-1">
|
||||
<button onClick={() => setEditingGameId(game.id)} className="p-2 text-slate-400 hover:text-indigo-600 hover:bg-indigo-50 rounded">
|
||||
<Edit className="w-4 h-4" />
|
||||
</button>
|
||||
<button onClick={() => deleteGame(game.id)} className="p-2 text-slate-400 hover:text-red-600 hover:bg-red-50 rounded">
|
||||
<Trash2 className="w-4 h-4" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<h3 className="font-bold text-lg mb-1 text-slate-900">{game.name}</h3>
|
||||
<p className="text-sm text-slate-500 mb-4">{game.questions.length} Questions</p>
|
||||
<button
|
||||
onClick={() => handleLoadGame(game.id)}
|
||||
className="w-full py-2 bg-green-50 text-green-700 border border-green-200 rounded font-bold text-sm hover:bg-green-100 flex items-center justify-center gap-2"
|
||||
>
|
||||
<Upload className="w-4 h-4" /> LOAD TO LIVE
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
/* MODE: EDIT GAME */
|
||||
(() => {
|
||||
const game = games.find(g => g.id === editingGameId);
|
||||
if (!game) return null;
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="flex items-center gap-4 mb-6">
|
||||
<button onClick={() => setEditingGameId(null)} className="p-2 hover:bg-slate-200 rounded-full">
|
||||
<ArrowLeft className="w-5 h-5 text-slate-600" />
|
||||
</button>
|
||||
<input
|
||||
value={game.name}
|
||||
onChange={e => updateGame(game.id, { name: e.target.value })}
|
||||
className="text-2xl font-bold bg-transparent border-b border-transparent hover:border-slate-300 focus:border-indigo-600 focus:outline-none px-2 py-1 text-slate-900"
|
||||
/>
|
||||
<span className="ml-auto text-sm text-slate-500">{game.questions.length} Questions</span>
|
||||
</div>
|
||||
|
||||
{/* AI Generator for this game */}
|
||||
<div className="bg-gradient-to-r from-purple-600 to-indigo-600 rounded-xl p-6 text-white shadow-lg">
|
||||
<div className="flex items-center gap-2 mb-4">
|
||||
<Sparkles className="w-5 h-5" />
|
||||
<h3 className="font-bold text-lg">AI Question Generator</h3>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<input
|
||||
type="text"
|
||||
value={aiTopic}
|
||||
onChange={(e) => setAiTopic(e.target.value)}
|
||||
placeholder="e.g. 80s Movies, World Capitals, Pokemon"
|
||||
className="flex-1 px-4 py-2 rounded text-slate-900 bg-white outline-none"
|
||||
/>
|
||||
<button
|
||||
onClick={() => handleAiGenerate(game.id)}
|
||||
disabled={isGenerating}
|
||||
className="bg-white text-purple-700 px-4 py-2 rounded font-bold hover:bg-purple-50 disabled:opacity-50"
|
||||
>
|
||||
{isGenerating ? 'Dreaming...' : 'Generate'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-white rounded-xl shadow-sm border border-slate-200">
|
||||
<div className="p-4 border-b border-slate-100 flex justify-between items-center">
|
||||
<h3 className="font-bold text-slate-700">Questions</h3>
|
||||
<button
|
||||
onClick={() => setIsAddingQuestion(!isAddingQuestion)}
|
||||
className="flex items-center gap-1 text-sm text-blue-600 font-bold hover:bg-blue-50 px-3 py-2 rounded"
|
||||
>
|
||||
<Plus className="w-4 h-4" /> Add Manual
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Add Manual Form */}
|
||||
{isAddingQuestion && (
|
||||
<div className="p-4 bg-slate-50 border-b border-slate-200">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
|
||||
<div className="flex flex-col gap-1">
|
||||
<label className="text-xs font-bold text-slate-500">Question</label>
|
||||
<input
|
||||
placeholder="e.g. What is 2+2?"
|
||||
className="p-2 border rounded text-black bg-white"
|
||||
value={manualQ.text}
|
||||
onChange={e => setManualQ({...manualQ, text: e.target.value})}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-col gap-1">
|
||||
<label className="text-xs font-bold text-slate-500">Answer</label>
|
||||
<input
|
||||
placeholder="e.g. 4"
|
||||
className="p-2 border rounded text-black bg-white"
|
||||
value={manualQ.answer}
|
||||
onChange={e => setManualQ({...manualQ, answer: e.target.value})}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-col gap-1">
|
||||
<label className="text-xs font-bold text-slate-500">Points</label>
|
||||
<input
|
||||
type="number"
|
||||
placeholder="10"
|
||||
className="p-2 border rounded text-black bg-white"
|
||||
value={manualQ.points}
|
||||
onChange={e => setManualQ({...manualQ, points: Number(e.target.value)})}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-col gap-1">
|
||||
<label className="text-xs font-bold text-slate-500">Category</label>
|
||||
<input
|
||||
placeholder="e.g. Math"
|
||||
className="p-2 border rounded text-black bg-white"
|
||||
value={manualQ.category}
|
||||
onChange={e => setManualQ({...manualQ, category: e.target.value})}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-col gap-1 md:col-span-2">
|
||||
<label className="text-xs font-bold text-slate-500">Media</label>
|
||||
<div className="flex gap-2">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="YouTube Link or Image URL"
|
||||
className="flex-1 p-2 border rounded text-black bg-white"
|
||||
value={manualQ.mediaUrl}
|
||||
onChange={e => setManualQ({...manualQ, mediaUrl: e.target.value})}
|
||||
/>
|
||||
<div className="relative">
|
||||
<input
|
||||
type="file"
|
||||
accept="image/*"
|
||||
onChange={handleImageUpload}
|
||||
className="absolute inset-0 w-full h-full opacity-0 cursor-pointer"
|
||||
/>
|
||||
<button className="h-full px-4 bg-slate-200 hover:bg-slate-300 text-slate-700 font-bold rounded flex items-center gap-2">
|
||||
<Upload size={16} /> Upload Img
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-[10px] text-slate-400">Supports YouTube links or Image Uploads</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex justify-end gap-2">
|
||||
<button onClick={() => setIsAddingQuestion(false)} className="px-3 py-1 text-slate-500 text-sm">Cancel</button>
|
||||
<button
|
||||
onClick={() => handleAddManualQuestion(game.id)}
|
||||
className="px-3 py-1 bg-blue-600 text-white rounded text-sm font-bold"
|
||||
>
|
||||
Save Question
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<ul className="divide-y divide-slate-100">
|
||||
{game.questions.length === 0 && (
|
||||
<li className="p-8 text-center text-slate-400">No questions yet. Add some manually or use AI!</li>
|
||||
)}
|
||||
{game.questions.map((q, i) => (
|
||||
<li key={q.id} className="p-4 hover:bg-slate-50 flex justify-between items-center group">
|
||||
<div className="flex-1">
|
||||
<div className="flex items-center gap-2 mb-1">
|
||||
<span className="font-bold text-slate-400 text-xs">Q{i+1}</span>
|
||||
<span className="text-xs bg-slate-100 px-2 py-0.5 rounded text-slate-500">{q.category}</span>
|
||||
<span className="text-xs bg-slate-100 px-2 py-0.5 rounded text-slate-500 font-mono">{q.points}pts</span>
|
||||
</div>
|
||||
<div className="font-medium text-slate-800 flex items-center gap-2">
|
||||
{q.mediaUrl && <ImageIcon size={14} className="text-indigo-500" />}
|
||||
{q.text}
|
||||
</div>
|
||||
<div className="text-sm text-green-700">A: {q.answer}</div>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => handleDeleteQuestion(game.id, q.id)}
|
||||
className="opacity-0 group-hover:opacity-100 p-2 text-red-400 hover:text-red-600"
|
||||
>
|
||||
<Trash2 className="w-4 h-4" />
|
||||
</button>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})()
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,354 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { useGame } from '../context/GameContext';
|
||||
import { GamePhase } from '../types';
|
||||
import { Trophy, Zap, Target, LogOut, Image as ImageIcon } from 'lucide-react';
|
||||
|
||||
export const PlayerView: React.FC = () => {
|
||||
const { gameState, players, teams, currentPlayerId, addPlayer, removePlayer, buzzQueue, handleBuzz, questions } = useGame();
|
||||
|
||||
const [name, setName] = useState('');
|
||||
const [team, setTeam] = useState('');
|
||||
const [hasJoined, setHasJoined] = useState(false);
|
||||
|
||||
// Auto-detect join state if currentPlayerId is set externally
|
||||
useEffect(() => {
|
||||
if (currentPlayerId) {
|
||||
setHasJoined(true);
|
||||
}
|
||||
}, [currentPlayerId]);
|
||||
|
||||
const currentPlayer = players.find(p => p.id === currentPlayerId);
|
||||
const currentTeam = teams.find(t => t.id === currentPlayer?.teamId);
|
||||
|
||||
// Handle case where player was removed (kicked or hard reset)
|
||||
useEffect(() => {
|
||||
if (hasJoined && !currentPlayer) {
|
||||
setHasJoined(false);
|
||||
setName('');
|
||||
setTeam('');
|
||||
}
|
||||
}, [currentPlayer, hasJoined]);
|
||||
|
||||
const myBuzz = buzzQueue.find(b => b.playerId === currentPlayerId);
|
||||
const isLockedOut = myBuzz && (myBuzz.status === 'WRONG' || (buzzQueue.length > 0 && buzzQueue[0].playerId !== currentPlayerId && myBuzz.status === 'PENDING'));
|
||||
const isMyTurn = myBuzz && myBuzz.status === 'PENDING' && buzzQueue[0].playerId === currentPlayerId;
|
||||
const isCorrect = myBuzz && myBuzz.status === 'CORRECT';
|
||||
const isWrong = myBuzz && myBuzz.status === 'WRONG';
|
||||
|
||||
// Calculate Rank
|
||||
const sortedTeams = [...teams].sort((a, b) => b.score - a.score);
|
||||
const myRank = currentTeam ? sortedTeams.findIndex(t => t.id === currentTeam.id) + 1 : '-';
|
||||
|
||||
const currentQ = questions[gameState.currentQuestionIndex];
|
||||
|
||||
// Helper for YouTube ID
|
||||
const getYoutubeId = (url: string) => {
|
||||
const regExp = /^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|&v=)([^#&?]*).*/;
|
||||
const match = url.match(regExp);
|
||||
return (match && match[2].length === 11) ? match[2] : null;
|
||||
};
|
||||
|
||||
const handleJoin = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
if (name && team) {
|
||||
addPlayer(name, team);
|
||||
setHasJoined(true);
|
||||
}
|
||||
};
|
||||
|
||||
const handleLeave = () => {
|
||||
if (currentPlayerId) {
|
||||
removePlayer(currentPlayerId);
|
||||
setHasJoined(false);
|
||||
setName('');
|
||||
setTeam('');
|
||||
}
|
||||
};
|
||||
|
||||
if (!hasJoined) {
|
||||
return (
|
||||
<div className="h-full bg-slate-900 p-6 flex flex-col justify-center overflow-y-auto">
|
||||
<div className="max-w-md mx-auto w-full bg-white rounded-2xl p-8 shadow-xl">
|
||||
<h1 className="text-3xl font-black text-slate-800 mb-2">Join Quiz</h1>
|
||||
<p className="text-slate-500 mb-6">Enter your details to enter the lobby.</p>
|
||||
<form onSubmit={handleJoin} className="space-y-4">
|
||||
<div>
|
||||
<label className="block text-sm font-bold text-slate-700 mb-1">Your Name</label>
|
||||
<input
|
||||
type="text"
|
||||
value={name}
|
||||
onChange={(e) => setName(e.target.value)}
|
||||
className="w-full px-4 py-3 border border-slate-300 rounded-lg focus:ring-2 focus:ring-blue-500 outline-none text-lg text-black bg-white"
|
||||
placeholder="e.g. Maverick"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-bold text-slate-700 mb-1">Team Name</label>
|
||||
<input
|
||||
type="text"
|
||||
value={team}
|
||||
onChange={(e) => setTeam(e.target.value)}
|
||||
className="w-full px-4 py-3 border border-slate-300 rounded-lg focus:ring-2 focus:ring-blue-500 outline-none text-lg text-black bg-white"
|
||||
placeholder="e.g. Top Guns"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<button
|
||||
type="submit"
|
||||
className="w-full py-4 bg-blue-600 hover:bg-blue-700 text-white font-bold text-xl rounded-lg transition-colors shadow-lg"
|
||||
>
|
||||
ENTER LOBBY
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (currentPlayer && !currentPlayer.isApproved) {
|
||||
return (
|
||||
<div className="h-full bg-slate-900 flex flex-col items-center justify-center p-6 text-center overflow-y-auto">
|
||||
<div className="animate-pulse mb-6 text-6xl">⏳</div>
|
||||
<h2 className="text-2xl font-bold text-white mb-2">Waiting for Host...</h2>
|
||||
<p className="text-slate-400 mb-8">Sit tight! You'll be in shortly.</p>
|
||||
<button onClick={handleLeave} className="text-slate-500 text-sm underline hover:text-white">Cancel & Leave</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// --- EXPLICIT FEEDBACK SCREENS ---
|
||||
|
||||
if (isCorrect) {
|
||||
return (
|
||||
<div className="h-full bg-green-600 flex flex-col items-center justify-center p-6 text-center animate-fade-in">
|
||||
<div className="bg-white/20 p-8 rounded-full mb-6">
|
||||
<span className="text-6xl">🎉</span>
|
||||
</div>
|
||||
<h1 className="text-5xl font-black text-white mb-2">CORRECT!</h1>
|
||||
<p className="text-green-100 text-xl font-medium">You got the points!</p>
|
||||
<div className="mt-8 text-white/80 font-mono text-sm">Wait for next question...</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (isWrong) {
|
||||
return (
|
||||
<div className="h-full bg-red-600 flex flex-col items-center justify-center p-6 text-center animate-fade-in">
|
||||
<div className="bg-white/20 p-8 rounded-full mb-6">
|
||||
<span className="text-6xl">❌</span>
|
||||
</div>
|
||||
<h1 className="text-5xl font-black text-white mb-2">WRONG!</h1>
|
||||
<p className="text-red-100 text-xl font-medium">Better luck next time.</p>
|
||||
<div className="mt-8 text-white/80 font-mono text-sm">You are locked out for this question.</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// --- FINAL STATS VIEW ---
|
||||
if (gameState.phase === GamePhase.FINAL_STATS) {
|
||||
const winningTeam = sortedTeams[0];
|
||||
|
||||
let fastestPlayer = null;
|
||||
let fastestTime = Infinity;
|
||||
players.forEach(p => {
|
||||
if (p.stats.bestReactionTime && p.stats.bestReactionTime < fastestTime) {
|
||||
fastestTime = p.stats.bestReactionTime;
|
||||
fastestPlayer = p;
|
||||
}
|
||||
});
|
||||
|
||||
const topPlayers = [...players].sort((a,b) => b.score - a.score).slice(0, 5);
|
||||
|
||||
return (
|
||||
<div className="h-full bg-slate-900 flex flex-col overflow-y-auto">
|
||||
{/* Header */}
|
||||
<div className="bg-slate-800 p-4 shadow-md text-center shrink-0 flex justify-between items-center">
|
||||
<h1 className="text-white font-black text-xl tracking-widest uppercase flex-1">Game Over</h1>
|
||||
<button onClick={handleLeave} className="text-slate-400 p-2"><LogOut size={20} /></button>
|
||||
</div>
|
||||
|
||||
<div className="flex-1 p-6 flex flex-col gap-6 items-center">
|
||||
{/* Winning Team Trophy */}
|
||||
<div className="bg-gradient-to-b from-yellow-500/20 to-slate-800 w-full max-w-sm rounded-2xl p-6 border border-yellow-500/30 flex flex-col items-center text-center shadow-lg relative overflow-hidden">
|
||||
<div className="absolute top-0 w-full h-1 bg-gradient-to-r from-transparent via-yellow-400 to-transparent"></div>
|
||||
<Trophy className="text-yellow-400 w-16 h-16 mb-4 drop-shadow-[0_0_15px_rgba(250,204,21,0.5)]" />
|
||||
<div className="text-yellow-100 text-sm font-bold uppercase tracking-wider mb-1">Winning Team</div>
|
||||
<div className="text-3xl font-black text-white mb-2">{winningTeam?.name || "No Winner"}</div>
|
||||
<div className="bg-yellow-500/20 px-4 py-1 rounded-full text-yellow-300 font-mono font-bold text-lg border border-yellow-500/50">
|
||||
{winningTeam?.score || 0} PTS
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Fastest Finger */}
|
||||
{fastestPlayer && (
|
||||
<div className="bg-slate-800 w-full max-w-sm rounded-xl p-4 border border-slate-700 flex items-center gap-4 shadow-md">
|
||||
<div className="bg-blue-900/50 p-3 rounded-lg text-blue-400">
|
||||
<Zap className="w-6 h-6" />
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-slate-400 text-xs font-bold uppercase">Fastest Buzzer</div>
|
||||
<div className="text-white font-bold text-lg">{fastestPlayer.name}</div>
|
||||
<div className="text-blue-400 font-mono text-sm">{(fastestTime / 1000).toFixed(2)}s reaction</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Top Players Table */}
|
||||
<div className="w-full max-w-sm">
|
||||
<h3 className="text-slate-400 text-xs font-bold uppercase tracking-wider mb-3">Top 5 Players</h3>
|
||||
<div className="bg-slate-800 rounded-xl overflow-hidden border border-slate-700">
|
||||
<table className="w-full text-left text-sm">
|
||||
<thead className="bg-slate-900/50 text-slate-500 text-xs uppercase">
|
||||
<tr>
|
||||
<th className="px-4 py-3">Rank</th>
|
||||
<th className="px-4 py-3">Name</th>
|
||||
<th className="px-4 py-3 text-right">Score</th>
|
||||
<th className="px-4 py-3 text-right">Acc</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-slate-700 text-white">
|
||||
{topPlayers.map((p, i) => (
|
||||
<tr key={p.id} className={p.id === currentPlayerId ? 'bg-indigo-900/30' : ''}>
|
||||
<td className="px-4 py-3 font-mono text-slate-400">#{i + 1}</td>
|
||||
<td className="px-4 py-3 font-medium truncate max-w-[100px]">{p.name}</td>
|
||||
<td className="px-4 py-3 text-right font-mono">{p.score}</td>
|
||||
<td className="px-4 py-3 text-right text-slate-400 text-xs">
|
||||
{p.stats.correctAnswers}/{p.stats.totalBuzzes}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// --- REGULAR GAMEPLAY UI ---
|
||||
return (
|
||||
<div className="h-full bg-slate-800 flex flex-col overflow-y-auto">
|
||||
{/* Header */}
|
||||
<div className="bg-slate-900 p-4 shadow-md flex justify-between items-center z-10 shrink-0 sticky top-0">
|
||||
<div>
|
||||
<div className="text-white font-bold text-lg">{currentPlayer?.name}</div>
|
||||
<div className="text-slate-400 text-sm font-bold">{currentTeam?.name || 'No Team'}</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="flex flex-col items-end">
|
||||
<div className="bg-blue-900 px-3 py-1 rounded text-blue-200 font-mono font-bold text-sm mb-1">
|
||||
{currentTeam?.score || 0} PTS
|
||||
</div>
|
||||
<div className="text-xs text-slate-400 font-bold uppercase">
|
||||
Rank #{myRank}
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
onClick={handleLeave}
|
||||
className="bg-slate-800 p-2 rounded text-slate-400 hover:text-red-400 ml-2"
|
||||
title="Leave Game"
|
||||
>
|
||||
<LogOut size={16} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Main Action Area */}
|
||||
<div className="flex-1 flex flex-col items-center justify-center p-6 relative">
|
||||
|
||||
{/* Dynamic Question Text & Media on Mobile */}
|
||||
{gameState.phase !== GamePhase.LOBBY && gameState.phase !== GamePhase.LEADERBOARD && gameState.phase !== GamePhase.FINAL_STATS && currentQ && (
|
||||
<div className="absolute top-4 left-4 right-4 text-center">
|
||||
<p className="text-slate-300 text-sm uppercase tracking-widest mb-2">Current Question</p>
|
||||
|
||||
{/* Media Preview on Player Device */}
|
||||
{currentQ.mediaUrl && (
|
||||
<div className="mb-4 w-full max-w-[200px] mx-auto rounded-lg overflow-hidden shadow-lg border border-slate-600 bg-black">
|
||||
{currentQ.mediaType === 'video' ? (
|
||||
<div className="aspect-video">
|
||||
<iframe
|
||||
className="w-full h-full"
|
||||
src={`https://www.youtube.com/embed/${getYoutubeId(currentQ.mediaUrl)}?autoplay=0`}
|
||||
frameBorder="0"
|
||||
allowFullScreen
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<img src={currentQ.mediaUrl} alt="Visual Clue" className="w-full h-auto object-contain" />
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<p className="text-white font-medium leading-snug">
|
||||
{currentQ.text}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* The Buzzer Logic */}
|
||||
{gameState.phase === GamePhase.BUZZER_OPEN ? (
|
||||
<button
|
||||
onClick={() => currentPlayerId && handleBuzz(currentPlayerId)}
|
||||
className="w-64 h-64 rounded-full bg-red-600 shadow-[0_10px_0_rgb(153,27,27)] active:shadow-none active:translate-y-2 transition-all flex items-center justify-center border-8 border-red-800 z-20 mt-32"
|
||||
>
|
||||
<span className="text-4xl font-black text-white tracking-widest">BUZZ!</span>
|
||||
</button>
|
||||
) : gameState.phase === GamePhase.ADJUDICATION ? (
|
||||
// State during adjudication
|
||||
myBuzz ? (
|
||||
isMyTurn ? (
|
||||
<div className="w-full h-full bg-green-600 absolute inset-0 flex flex-col items-center justify-center animate-pulse z-30">
|
||||
<span className="text-9xl mb-4">🎤</span>
|
||||
<h2 className="text-4xl font-black text-white uppercase">Your Turn!</h2>
|
||||
<p className="text-green-200 mt-2">Answer the host now.</p>
|
||||
</div>
|
||||
) : isLockedOut ? (
|
||||
<div className="flex flex-col items-center text-slate-500 mt-32">
|
||||
<div className="text-6xl mb-4">🔒</div>
|
||||
<span className="text-xl font-bold">LOCKED OUT</span>
|
||||
<span className="text-sm mt-2">Another player is answering...</span>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex flex-col items-center mt-32">
|
||||
<div className="text-6xl text-yellow-500 mb-4 font-bold">#{myBuzz.order}</div>
|
||||
<span className="text-white text-xl">In Queue...</span>
|
||||
</div>
|
||||
)
|
||||
) : (
|
||||
<div className="text-slate-500 font-bold text-xl mt-32">Locked</div>
|
||||
)
|
||||
) : (gameState.phase === GamePhase.LEADERBOARD) ? (
|
||||
// Leaderboard View for Players
|
||||
<div className="w-full max-w-sm">
|
||||
<h3 className="text-white text-center font-bold text-xl mb-4 uppercase tracking-wider">Top Teams</h3>
|
||||
<div className="bg-slate-700 rounded-xl overflow-hidden shadow-lg border border-slate-600">
|
||||
{sortedTeams.slice(0, 5).map((t, idx) => (
|
||||
<div key={t.id} className={`flex justify-between items-center p-4 border-b border-slate-600 ${t.id === currentTeam?.id ? 'bg-indigo-900/50' : ''}`}>
|
||||
<div className="flex items-center gap-3">
|
||||
<span className={`font-black w-6 ${idx === 0 ? 'text-yellow-400' : 'text-slate-400'}`}>#{idx + 1}</span>
|
||||
<span className={`font-bold ${t.id === currentTeam?.id ? 'text-white' : 'text-slate-300'}`}>{t.name}</span>
|
||||
</div>
|
||||
<span className="font-mono text-white">{t.score}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
// Default Idle State
|
||||
<div className="text-slate-500 text-center mt-32">
|
||||
{gameState.phase === GamePhase.LOBBY && <p>Waiting for game to start...</p>}
|
||||
{gameState.phase === GamePhase.COUNTDOWN && <p className="text-6xl text-white font-mono animate-ping">{gameState.countdownValue}</p>}
|
||||
{gameState.phase === GamePhase.QUESTION_DISPLAY && <p>Listen carefully...</p>}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Footer Info */}
|
||||
<div className="p-4 text-center text-slate-500 text-xs shrink-0">
|
||||
Phase: {gameState.phase}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,71 @@
|
||||
import React from 'react';
|
||||
import { Volume2, Bell, XCircle } from 'lucide-react';
|
||||
|
||||
export const Soundboard: React.FC = () => {
|
||||
const playTone = (freq: number, type: 'sine' | 'square' | 'sawtooth' | 'triangle', duration: number) => {
|
||||
const AudioContext = window.AudioContext || (window as any).webkitAudioContext;
|
||||
if (!AudioContext) return;
|
||||
|
||||
const ctx = new AudioContext();
|
||||
const osc = ctx.createOscillator();
|
||||
const gain = ctx.createGain();
|
||||
|
||||
osc.type = type;
|
||||
osc.frequency.setValueAtTime(freq, ctx.currentTime);
|
||||
|
||||
// Envelope
|
||||
gain.gain.setValueAtTime(0.1, ctx.currentTime);
|
||||
gain.gain.exponentialRampToValueAtTime(0.0001, ctx.currentTime + duration);
|
||||
|
||||
osc.connect(gain);
|
||||
gain.connect(ctx.destination);
|
||||
|
||||
osc.start();
|
||||
osc.stop(ctx.currentTime + duration);
|
||||
};
|
||||
|
||||
const playSound = (type: 'DING' | 'BUZZ' | 'THEME') => {
|
||||
if (type === 'DING') {
|
||||
// High pitch double beep
|
||||
playTone(1200, 'sine', 1);
|
||||
setTimeout(() => playTone(1600, 'sine', 1), 100);
|
||||
} else if (type === 'BUZZ') {
|
||||
// Low pitch sawtooth
|
||||
playTone(150, 'sawtooth', 0.8);
|
||||
} else if (type === 'THEME') {
|
||||
// Simple arpeggio jingle
|
||||
[440, 554, 659, 880].forEach((freq, i) => {
|
||||
setTimeout(() => playTone(freq, 'sine', 0.6), i * 150);
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="bg-slate-800 p-4 rounded-lg border border-slate-700">
|
||||
<h3 className="text-slate-400 text-xs font-bold uppercase tracking-wider mb-3">Soundboard</h3>
|
||||
<div className="grid grid-cols-3 gap-2">
|
||||
<button
|
||||
onClick={() => playSound('DING')}
|
||||
className="flex flex-col items-center justify-center p-3 bg-green-600 hover:bg-green-500 rounded text-white transition-colors active:scale-95 transform"
|
||||
>
|
||||
<Bell className="w-5 h-5 mb-1" />
|
||||
<span className="text-xs font-bold">DING</span>
|
||||
</button>
|
||||
<button
|
||||
onClick={() => playSound('BUZZ')}
|
||||
className="flex flex-col items-center justify-center p-3 bg-red-600 hover:bg-red-500 rounded text-white transition-colors active:scale-95 transform"
|
||||
>
|
||||
<XCircle className="w-5 h-5 mb-1" />
|
||||
<span className="text-xs font-bold">BUZZ</span>
|
||||
</button>
|
||||
<button
|
||||
onClick={() => playSound('THEME')}
|
||||
className="flex flex-col items-center justify-center p-3 bg-indigo-600 hover:bg-indigo-500 rounded text-white transition-colors active:scale-95 transform"
|
||||
>
|
||||
<Volume2 className="w-5 h-5 mb-1" />
|
||||
<span className="text-xs font-bold">THEME</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,264 @@
|
||||
import React from 'react';
|
||||
import { useGame } from '../context/GameContext';
|
||||
import { GamePhase } from '../types';
|
||||
import { BarChart, Bar, XAxis, YAxis, Tooltip, ResponsiveContainer, Cell } from 'recharts';
|
||||
import { Trophy, Zap, Users } from 'lucide-react';
|
||||
|
||||
export const SpectatorView: React.FC = () => {
|
||||
const { gameState, questions, teams, players, buzzQueue } = useGame();
|
||||
const currentQ = questions[gameState.currentQuestionIndex];
|
||||
|
||||
// Helper to get formatted leaderboard data
|
||||
const leaderboardData = [...teams].sort((a, b) => b.score - a.score);
|
||||
|
||||
const COLORS = ['#F59E0B', '#3B82F6', '#10B981', '#EC4899', '#8B5CF6'];
|
||||
|
||||
// Helper for YouTube ID extraction
|
||||
const getYoutubeId = (url: string) => {
|
||||
const regExp = /^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|&v=)([^#&?]*).*/;
|
||||
const match = url.match(regExp);
|
||||
return (match && match[2].length === 11) ? match[2] : null;
|
||||
};
|
||||
|
||||
const renderContent = () => {
|
||||
switch (gameState.phase) {
|
||||
case GamePhase.LOBBY:
|
||||
return (
|
||||
<div className="text-center animate-fade-in">
|
||||
<h1 className="text-6xl md:text-8xl font-black text-transparent bg-clip-text bg-gradient-to-r from-yellow-400 to-orange-500 mb-8">
|
||||
JOIN THE QUIZ
|
||||
</h1>
|
||||
<div className="bg-white p-4 inline-block rounded-xl mb-8">
|
||||
<img src="https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=https://quiz-app-demo.com" alt="QR Code" className="w-48 h-48" />
|
||||
</div>
|
||||
<p className="text-2xl text-slate-300 mb-8">Scan to Join</p>
|
||||
|
||||
<div className="flex flex-wrap justify-center gap-4 max-w-4xl mx-auto">
|
||||
{players.filter(p => p.isApproved).map(p => (
|
||||
<div key={p.id} className="bg-slate-800 border border-slate-600 px-6 py-3 rounded-full text-xl font-bold text-white animate-bounce-in">
|
||||
{p.name}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
case GamePhase.COUNTDOWN:
|
||||
return (
|
||||
<div className="flex items-center justify-center h-full">
|
||||
<div className="text-[20rem] font-black text-white animate-ping">
|
||||
{gameState.countdownValue}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
case GamePhase.QUESTION_DISPLAY:
|
||||
case GamePhase.BUZZER_OPEN:
|
||||
case GamePhase.ADJUDICATION:
|
||||
return (
|
||||
<div className="w-full max-w-6xl mx-auto p-8 flex flex-col h-full">
|
||||
<div className="mb-4 flex justify-between items-center text-slate-400 text-2xl font-mono uppercase tracking-widest shrink-0">
|
||||
<span>{currentQ?.category || 'General'}</span>
|
||||
<span>{currentQ?.points} PTS</span>
|
||||
</div>
|
||||
|
||||
<div className="flex-1 flex flex-col items-center justify-center">
|
||||
<h2 className="text-5xl md:text-7xl font-bold text-white leading-tight mb-8 text-center drop-shadow-xl">
|
||||
{currentQ?.text}
|
||||
</h2>
|
||||
|
||||
{/* Media Display */}
|
||||
{currentQ?.mediaUrl && (
|
||||
<div className="w-full max-w-3xl aspect-video bg-black rounded-xl overflow-hidden shadow-2xl border-4 border-slate-700 mb-8">
|
||||
{currentQ.mediaType === 'video' ? (
|
||||
<iframe
|
||||
className="w-full h-full"
|
||||
src={`https://www.youtube.com/embed/${getYoutubeId(currentQ.mediaUrl)}?autoplay=1&mute=0`}
|
||||
frameBorder="0"
|
||||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
|
||||
allowFullScreen
|
||||
/>
|
||||
) : (
|
||||
<img src={currentQ.mediaUrl} alt="Question Media" className="w-full h-full object-contain" />
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Buzzer Status for Audience */}
|
||||
<div className="flex justify-center gap-4 min-h-[100px] shrink-0 mt-8">
|
||||
{buzzQueue.map((buzz, idx) => {
|
||||
const player = players.find(p => p.id === buzz.playerId);
|
||||
let bg = 'bg-slate-700';
|
||||
if (buzz.status === 'CORRECT') bg = 'bg-green-600';
|
||||
if (buzz.status === 'WRONG') bg = 'bg-red-600';
|
||||
if (buzz.status === 'PENDING' && idx === 0) bg = 'bg-yellow-500 animate-pulse';
|
||||
|
||||
return (
|
||||
<div key={buzz.playerId} className={`${bg} transition-all duration-300 px-8 py-4 rounded-xl flex items-center gap-4 border-2 border-white/20`}>
|
||||
<span className="text-3xl font-black text-white">#{idx + 1}</span>
|
||||
<span className="text-2xl text-white font-bold">{player?.name}</span>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
case GamePhase.ANSWER_REVEAL:
|
||||
return (
|
||||
<div className="text-center max-w-5xl mx-auto">
|
||||
<h3 className="text-4xl text-slate-400 mb-8">The answer is...</h3>
|
||||
<div className="text-6xl md:text-8xl font-black text-green-400 bg-slate-800/50 p-12 rounded-3xl border border-green-500/30 backdrop-blur-sm animate-fade-in-up">
|
||||
{currentQ?.answer}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
case GamePhase.LEADERBOARD:
|
||||
return (
|
||||
<div className="w-full max-w-6xl mx-auto h-[80vh] flex flex-col">
|
||||
<h2 className="text-5xl font-bold text-white text-center mb-8">LEADERBOARD</h2>
|
||||
<div className="flex-1 w-full bg-slate-800/50 rounded-2xl p-8 border border-slate-700">
|
||||
<ResponsiveContainer width="100%" height="100%">
|
||||
<BarChart data={leaderboardData} layout="vertical" margin={{ top: 5, right: 30, left: 20, bottom: 5 }}>
|
||||
<XAxis type="number" hide />
|
||||
<YAxis dataKey="name" type="category" width={150} tick={{fill: 'white', fontSize: 20}} />
|
||||
<Tooltip cursor={{fill: 'transparent'}} contentStyle={{backgroundColor: '#1e293b', color: '#fff', border: 'none'}} />
|
||||
<Bar dataKey="score" radius={[0, 10, 10, 0]}>
|
||||
{leaderboardData.map((entry, index) => (
|
||||
<Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
|
||||
))}
|
||||
</Bar>
|
||||
</BarChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
case GamePhase.FINAL_STATS:
|
||||
const sortedTeams = [...teams].sort((a,b) => b.score - a.score);
|
||||
const winningTeam = sortedTeams[0];
|
||||
const otherTeams = sortedTeams.slice(1);
|
||||
|
||||
// Top 5 Players
|
||||
const topPlayers = [...players].sort((a,b) => b.score - a.score).slice(0, 5);
|
||||
|
||||
// Fastest Buzzer Calculation
|
||||
let fastestPlayer = null;
|
||||
let fastestTime = Infinity;
|
||||
players.forEach(p => {
|
||||
if (p.stats.bestReactionTime && p.stats.bestReactionTime < fastestTime) {
|
||||
fastestTime = p.stats.bestReactionTime;
|
||||
fastestPlayer = p;
|
||||
}
|
||||
});
|
||||
|
||||
return (
|
||||
<div className="text-center w-full max-w-6xl mx-auto pb-10 overflow-y-auto h-full">
|
||||
<h1 className="text-5xl font-black text-white mb-8 tracking-widest uppercase opacity-50">Game Over</h1>
|
||||
|
||||
{/* 1. Grand Champion Section */}
|
||||
<div className="flex justify-center mb-12">
|
||||
<div className="bg-gradient-to-b from-yellow-500/20 to-slate-900 px-20 py-10 rounded-3xl border-t-8 border-yellow-400 transform scale-110 shadow-[0_0_50px_rgba(234,179,8,0.3)] relative overflow-hidden">
|
||||
<div className="absolute top-0 inset-x-0 h-px bg-yellow-300 opacity-50"></div>
|
||||
<Trophy className="w-24 h-24 text-yellow-400 mx-auto mb-6 drop-shadow-lg" />
|
||||
<div className="text-yellow-200 font-bold uppercase tracking-[0.2em] mb-2 text-xl">Grand Champion</div>
|
||||
<div className="text-6xl font-black text-white mb-4">{winningTeam?.name || 'No Winner'}</div>
|
||||
<div className="text-4xl text-yellow-400 font-bold font-mono">{winningTeam?.score || 0} PTS</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-8 items-start">
|
||||
{/* 2. Remaining Teams Leaderboard */}
|
||||
<div className="bg-slate-800/50 rounded-2xl p-6 border border-slate-700">
|
||||
<h3 className="text-white text-xl font-bold uppercase tracking-wider mb-6 flex items-center justify-center gap-2">
|
||||
<Users className="text-slate-400" /> Team Standings
|
||||
</h3>
|
||||
<div className="space-y-3">
|
||||
{otherTeams.length > 0 ? (
|
||||
otherTeams.map((team, idx) => (
|
||||
<div key={team.id} className="flex items-center justify-between bg-slate-800 p-4 rounded-xl border-l-4 border-slate-600">
|
||||
<div className="flex items-center gap-4">
|
||||
<span className="text-2xl font-black text-slate-500">#{idx + 2}</span>
|
||||
<span className="text-xl font-bold text-white">{team.name}</span>
|
||||
</div>
|
||||
<span className="text-xl font-mono text-slate-300">{team.score}</span>
|
||||
</div>
|
||||
))
|
||||
) : (
|
||||
<div className="text-slate-500 italic p-4">No other teams participated.</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 3. Player Accolades */}
|
||||
<div className="flex flex-col gap-6">
|
||||
{/* Fastest Buzzer Card */}
|
||||
<div className="bg-gradient-to-r from-blue-900/50 to-slate-800/50 rounded-2xl p-6 border border-blue-500/30 flex items-center justify-between">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="bg-blue-600 p-4 rounded-full text-white shadow-lg">
|
||||
<Zap size={32} />
|
||||
</div>
|
||||
<div className="text-left">
|
||||
<div className="text-blue-300 font-bold uppercase tracking-wider text-sm">Fastest Finger</div>
|
||||
<div className="text-2xl font-bold text-white">{fastestPlayer?.name || '-'}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-4xl font-mono font-bold text-blue-400">
|
||||
{fastestPlayer && fastestTime !== Infinity ? (fastestTime / 1000).toFixed(2) : '-'}s
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Top 5 Players Table */}
|
||||
<div className="bg-slate-800/50 rounded-2xl overflow-hidden border border-slate-700">
|
||||
<div className="bg-slate-900/50 p-4 border-b border-slate-700">
|
||||
<h3 className="text-white font-bold uppercase tracking-wider text-center">Top 5 Players</h3>
|
||||
</div>
|
||||
<table className="w-full text-left">
|
||||
<thead className="text-slate-500 text-xs uppercase bg-slate-900/30">
|
||||
<tr>
|
||||
<th className="px-6 py-3">Rank</th>
|
||||
<th className="px-6 py-3">Player</th>
|
||||
<th className="px-6 py-3 text-right">Score</th>
|
||||
<th className="px-6 py-3 text-right">Acc</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-slate-700 text-white text-sm">
|
||||
{topPlayers.map((p, i) => (
|
||||
<tr key={p.id} className="hover:bg-slate-700/30">
|
||||
<td className="px-6 py-4 font-mono text-slate-400">#{i + 1}</td>
|
||||
<td className="px-6 py-4 font-bold">{p.name}</td>
|
||||
<td className="px-6 py-4 text-right font-mono text-lg">{p.score}</td>
|
||||
<td className="px-6 py-4 text-right text-slate-400">
|
||||
{p.stats.correctAnswers}/{p.stats.totalBuzzes}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="h-full bg-slate-900 flex flex-col items-center justify-center p-4 relative overflow-hidden font-sans">
|
||||
{/* Ambient Background Elements */}
|
||||
<div className="absolute top-0 left-0 w-full h-full opacity-10 pointer-events-none">
|
||||
<div className="absolute top-[-10%] right-[-10%] w-[50%] h-[50%] bg-blue-600 rounded-full blur-[150px]" />
|
||||
<div className="absolute bottom-[-10%] left-[-10%] w-[50%] h-[50%] bg-purple-600 rounded-full blur-[150px]" />
|
||||
</div>
|
||||
|
||||
<div className="z-10 w-full h-full flex flex-col justify-center">
|
||||
{renderContent()}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user