t.name.toLowerCase().includes(searchQuery.toLowerCase()));
+ const filteredTeams = teams.filter((t) => {
+ const { name } = parseSmartName(t.name);
+ return name.toLowerCase().includes(searchQuery.toLowerCase());
+ });
const selectedQuiz = quizzes.find((q) => q.id === selectedQuizId);
if (loading && quizzes.length === 0) {
@@ -212,16 +216,26 @@ export default function AdminTeamsPage() {
{filteredTeams.length > 0 ? filteredTeams.map((t) => (
-
+ {(() => {
+ const { name, avatarId } = parseSmartName(t.name);
+ return (
+
+
+ {avatarId ? (
+ 
+ ) : (
+
+ )}
+
+ {name}
+ |
@@ -308,7 +322,7 @@ export default function AdminTeamsPage() {
- Are you sure you want to remove {selectedTeam.name}?
+ Are you sure you want to remove {parseSmartName(selectedTeam.name).name}?
This will also delete all their submissions.
diff --git a/frontend/intelliquiz-frontend/src/pages/auth/UniversalLogin.tsx b/frontend/intelliquiz-frontend/src/pages/auth/UniversalLogin.tsx
index f1801bc..eaf00c6 100644
--- a/frontend/intelliquiz-frontend/src/pages/auth/UniversalLogin.tsx
+++ b/frontend/intelliquiz-frontend/src/pages/auth/UniversalLogin.tsx
@@ -1,8 +1,20 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
import { useNavigate } from 'react-router-dom';
-import { accessApi, type QuizAccessResponse } from '../../services/api';
+import { Volume2, VolumeX } from 'lucide-react';
+import { accessApi, type QuizAccessResponse, type TeamResponse } from '../../services/api';
import { getOrCreateDeviceId } from '../../services/deviceId';
import { saveParticipantSession, saveProctorSession } from '../../services/sessionStorage';
+import { formatSmartName, parseSmartName } from '../../utils/nameUtils';
+import {
+ GiTrophyCup,
+ GiGamepad,
+ GiBrain,
+ GiRocket,
+ GiCheckeredFlag,
+ GiJeweledChalice,
+ GiStarShuriken,
+ GiCrownedHeart
+} from 'react-icons/gi';
import '../../styles/landing.css';
const UniversalLogin: React.FC = () => {
@@ -10,9 +22,77 @@ const UniversalLogin: React.FC = () => {
const [code, setCode] = useState('');
const [participantName, setParticipantName] = useState('');
const [pendingPublicQuiz, setPendingPublicQuiz] = useState(null);
+ const [pendingRestrictedTeam, setPendingRestrictedTeam] = useState<{ team: TeamResponse; quiz: QuizAccessResponse } | null>(null);
+ const [selectedAvatar, setSelectedAvatar] = useState(null);
+ const [showAvatarSelection, setShowAvatarSelection] = useState(false);
const [loading, setLoading] = useState(false);
const [error, setError] = useState(null);
const [logoTapCount, setLogoTapCount] = useState(0);
+ const [isMuted, setIsMuted] = useState(false);
+ const audioRef = useRef(null);
+
+ const AVATARS = [
+ '1st-avatar.png',
+ '2nd-avatar.png',
+ '3rd-avatar.png',
+ '4th-avatar.png',
+ '5th-avatar.png',
+ '6th-avatar.png',
+ '7th-avatar.png',
+ '8th-avatar.png',
+ '9th-avatar.png',
+ '10th-avatar.png',
+ ];
+
+ // Audio setup
+ useEffect(() => {
+ const audio = new Audio('/landing-page%20sounds.mp3');
+ audio.loop = true;
+ audio.volume = 1.0;
+ audioRef.current = audio;
+
+ const attemptPlay = () => {
+ if (audioRef.current && !isMuted) {
+ audioRef.current.play().catch(() => {
+ // Play failed, wait for interaction
+ console.log("Autoplay blocked, waiting for interaction...");
+ });
+ }
+ };
+
+ const handleInteraction = () => {
+ attemptPlay();
+ window.removeEventListener('click', handleInteraction);
+ window.removeEventListener('touchstart', handleInteraction);
+ };
+
+ window.addEventListener('click', handleInteraction);
+ window.addEventListener('touchstart', handleInteraction);
+
+ // Initial attempt
+ attemptPlay();
+
+ return () => {
+ audio.pause();
+ audio.src = "";
+ window.removeEventListener('click', handleInteraction);
+ window.removeEventListener('touchstart', handleInteraction);
+ };
+ }, []);
+
+ // Sync mute state
+ useEffect(() => {
+ if (audioRef.current) {
+ audioRef.current.muted = isMuted;
+ if (!isMuted) {
+ audioRef.current.play().catch(() => {});
+ } else {
+ audioRef.current.pause();
+ }
+ }
+ }, [isMuted]);
+
+ const toggleMute = () => setIsMuted(prev => !prev);
const extractErrorMessage = (err: unknown, fallback: string): string => {
if (err instanceof Error && err.message) {
@@ -58,7 +138,7 @@ const UniversalLogin: React.FC = () => {
return;
}
- if (result.routeType === 'PARTICIPANT' && result.team) {
+ if (result.routeType === 'PARTICIPANT' && result.team && result.quiz) {
const access = await accessApi.checkParticipantAccess(
result.team.quizId,
result.team.id,
@@ -70,19 +150,28 @@ const UniversalLogin: React.FC = () => {
return;
}
- saveParticipantSession(
- result.team.quizId,
- result.team.id,
- result.team.name,
- result.team.accessCode,
- );
- navigate('/player/lobby');
+ // If team already has an avatar in their name, we can skip or show selection
+ const { avatarId } = parseSmartName(result.team.name);
+ if (avatarId) {
+ saveParticipantSession(
+ result.team.quizId,
+ result.team.id,
+ result.team.name,
+ result.team.accessCode,
+ );
+ navigate('/player/lobby');
+ } else {
+ // Show avatar selection for restricted team
+ setPendingRestrictedTeam({ team: result.team, quiz: result.quiz });
+ setShowAvatarSelection(true);
+ }
return;
}
// Public quiz pre-join path: code resolved to PARTICIPANT quiz but no team yet.
if (result.routeType === 'PARTICIPANT' && result.quiz?.accessMode === 'PUBLIC' && !result.team) {
setPendingPublicQuiz(result.quiz);
+ setShowAvatarSelection(false);
setError(null);
return;
}
@@ -95,47 +184,65 @@ const UniversalLogin: React.FC = () => {
}
};
- const handlePublicJoin = async (e: React.FormEvent) => {
+ const handlePublicNameSubmit = (e: React.FormEvent) => {
e.preventDefault();
- if (!pendingPublicQuiz) return;
if (!participantName.trim()) {
setError('Enter your participant or team name.');
return;
}
+ setShowAvatarSelection(true);
+ };
+ const handleAvatarConfirm = async () => {
setLoading(true);
setError(null);
+
try {
- const joined = await accessApi.joinPublicQuiz(
- pendingPublicQuiz.id,
- participantName.trim(),
- getOrCreateDeviceId(),
- );
- if (joined.routeType === 'PARTICIPANT' && joined.team) {
- const access = await accessApi.checkParticipantAccess(
- joined.team.quizId,
- joined.team.id,
+ if (pendingPublicQuiz) {
+ // Handle Public Join
+ const smartName = formatSmartName(participantName.trim(), selectedAvatar);
+ const joined = await accessApi.joinPublicQuiz(
+ pendingPublicQuiz.id,
+ smartName,
getOrCreateDeviceId(),
);
- if (!access.allowed) {
- setError(access.message || 'You cannot rejoin this quiz right now. Please contact the proctor/admin.');
- return;
+ if (joined.routeType === 'PARTICIPANT' && joined.team) {
+ saveParticipantSession(
+ joined.team.quizId,
+ joined.team.id,
+ joined.team.name,
+ joined.team.accessCode,
+ );
+ navigate('/player/lobby');
+ } else {
+ setError(joined.errorMessage || 'Unable to join this quiz right now.');
+ }
+ } else if (pendingRestrictedTeam) {
+ // Handle Restricted Join (Update name if possible, or just proceed)
+ // For now, since we can't update backend name for restricted teams easily,
+ // we store the avatar selection in the name ONLY if we have an API.
+ // If we don't, we can store it in local storage for the current user.
+
+ // Let's try to update the name via API (I will add this endpoint)
+ const smartName = formatSmartName(pendingRestrictedTeam.team.name, selectedAvatar);
+
+ try {
+ await accessApi.updateTeamName(pendingRestrictedTeam.team.id, smartName, pendingRestrictedTeam.team.accessCode);
+ } catch (err) {
+ console.warn('Failed to update name with avatar, proceeding anyway', err);
}
saveParticipantSession(
- joined.team.quizId,
- joined.team.id,
- joined.team.name,
- joined.team.accessCode,
+ pendingRestrictedTeam.team.quizId,
+ pendingRestrictedTeam.team.id,
+ smartName,
+ pendingRestrictedTeam.team.accessCode,
);
navigate('/player/lobby');
- return;
}
-
- setError(joined.errorMessage || 'Unable to join this quiz right now.');
} catch (err) {
- setError(extractErrorMessage(err, 'Unable to join this quiz right now.'));
+ setError(extractErrorMessage(err, 'Unable to join right now.'));
} finally {
setLoading(false);
}
@@ -143,7 +250,10 @@ const UniversalLogin: React.FC = () => {
const resetPublicJoin = () => {
setPendingPublicQuiz(null);
+ setPendingRestrictedTeam(null);
+ setShowAvatarSelection(false);
setParticipantName('');
+ setSelectedAvatar(null);
setError(null);
};
@@ -160,51 +270,46 @@ const UniversalLogin: React.FC = () => {
return (
-
-
-
-
-
- PUP Quiz Experience
- IntelliQuiz
- Interactive Quiz Platform
-
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
-
-
-
-
-
- Access Portal
-
- {!pendingPublicQuiz ? 'Enter your code to continue' : 'Set your team name'}
-
-
);
};
diff --git a/frontend/intelliquiz-frontend/src/pages/host/HostGame.tsx b/frontend/intelliquiz-frontend/src/pages/host/HostGame.tsx
index 0906c81..b97766e 100644
--- a/frontend/intelliquiz-frontend/src/pages/host/HostGame.tsx
+++ b/frontend/intelliquiz-frontend/src/pages/host/HostGame.tsx
@@ -1,7 +1,10 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
import { useNavigate, useSearchParams } from 'react-router-dom';
-import { Trophy, Sparkles, Home, Medal } from 'lucide-react';
-import { Pause, Play, BarChart3, ArrowRight, Gauge, Users, Timer as TimerIcon } from 'lucide-react';
+import { Trophy, Home, Volume2, VolumeX } from 'lucide-react';
+import {
+ Pause, Play, BarChart3, ArrowRight, Gauge, Users, Timer as TimerIcon,
+ Hourglass, PauseCircle, MonitorPlay
+} from 'lucide-react';
import { useSSE } from '../../hooks/useSSE';
import { clearSession, getProctorSession } from '../../services/sessionStorage';
import Timer from '../../components/game/Timer';
@@ -9,6 +12,7 @@ import QuestionDisplay from '../../components/game/QuestionDisplay';
import ScoreboardDisplay from '../../components/game/ScoreboardDisplay';
import RoundAnnouncementModal from '../../components/game/RoundAnnouncementModal';
import '../../styles/proctor.css';
+import './HostLobby.css'; // Reuse some layout styles
const HostGame: React.FC = () => {
const navigate = useNavigate();
@@ -78,6 +82,56 @@ const HostGame: React.FC = () => {
const [showRoundAnnouncement, setShowRoundAnnouncement] = useState(false);
const [startingRound, setStartingRound] = useState(false);
+ const [isMuted, setIsMuted] = useState(false);
+ const hasFiredFinalConfettiRef = useRef(false);
+ const audioRef = useRef (null);
+
+ // Audio Synchronization Logic
+ useEffect(() => {
+ const audio = new Audio('/host-lobby.mp3');
+ audio.loop = true;
+ audio.muted = isMuted;
+ audioRef.current = audio;
+
+ return () => {
+ audio.pause();
+ audioRef.current = null;
+ };
+ }, []);
+
+ useEffect(() => {
+ if (audioRef.current) {
+ audioRef.current.muted = isMuted;
+ }
+ }, [isMuted]);
+
+ useEffect(() => {
+ if (!audioRef.current) return;
+
+ const shouldPlay = [
+ 'LOBBY',
+ 'BUFFER',
+ 'SCOREBOARD',
+ 'ROUND_SUMMARY',
+ 'FINAL_RESULTS'
+ ].includes(gameState);
+
+ const handleAudio = async () => {
+ try {
+ if (shouldPlay) {
+ if (audioRef.current?.paused) {
+ await audioRef.current.play();
+ }
+ } else {
+ audioRef.current?.pause();
+ }
+ } catch (err) {
+ console.log('Audio control failed:', err);
+ }
+ };
+
+ handleAudio();
+ }, [gameState]);
const handleStartRoundFromModal = async () => {
if (startingRound || gameState !== 'BUFFER') return;
@@ -98,6 +152,11 @@ const HostGame: React.FC = () => {
setShowRoundAnnouncement(false);
setStartingRound(false);
}, [gameState, currentRound]);
+
+ useEffect(() => {
+ if (gameState !== 'FINAL_RESULTS' || hasFiredFinalConfettiRef.current) return;
+ hasFiredFinalConfettiRef.current = true;
+ }, [gameState]);
const isLastQuestion = totalQuestions > 0 && questionNumber >= totalQuestions;
const gamePhaseLabel = gameState.replace(/_/g, ' ');
@@ -142,14 +201,16 @@ const HostGame: React.FC = () => {
case 'PAUSED':
return (
-
+
);
case 'BUFFER':
@@ -249,6 +310,8 @@ const HostGame: React.FC = () => {
}
};
+ // Removing the full page early return for Scoreboard/Round Summary so they render inline with the question view.
+
return (
{
Question {questionNumber} of {totalQuestions}
- {session.quizTitle}
+ {session.quizTitle}
{/* Connection Status */}
-
-
-
- {connected ? 'Live' : 'Disconnected'}
+
+
+
+ {connected ? 'LIVE' : 'OFFLINE'}
+
+
- {/* Timer — hide the small header timer in CLASS mode (center timer only). */}
+ {/* Timer */}
{(gameState === 'QUESTION' || gameState === 'PAUSED') && !isClassMode && (
)}
@@ -336,6 +409,7 @@ const HostGame: React.FC = () => {
{(gameState === 'ACTIVE' || gameState === 'QUESTION') && !currentQuestion && !isClassMode && (
+
Live Audience View
@@ -390,7 +464,7 @@ const HostGame: React.FC = () => {
{/* GRADING State */}
{gameState === 'GRADING' && (
- ⏳
+
Time's Up!
Grading answers...
@@ -404,7 +478,7 @@ const HostGame: React.FC = () => {
questionNumber={questionNumber}
totalQuestions={totalQuestions}
correctAnswer={currentQuestion.correctAnswer}
- showCorrectAnswer={true}
+ showCorrectAnswer={gameState === 'ANSWER_REVEAL'}
disabled={true}
/>
@@ -413,30 +487,20 @@ const HostGame: React.FC = () => {
Correct Answer: {currentQuestion.correctAnswer}
-
- Results
-
-
- {rankings.slice(0, 10).map((team) => (
-
- {team.rank}. {team.teamName}
- {team.score} pts
-
- ))}
-
-
+ )}
+
+ {/* SCOREBOARD / ROUND_SUMMARY — full leaderboard, question hidden */}
+ {(gameState === 'SCOREBOARD' || gameState === 'ROUND_SUMMARY') && (
+
+
)}
{/* PAUSED State */}
{gameState === 'PAUSED' && (
- ⏸️
+
Quiz Paused
The timer has been paused. Click Resume to continue.
@@ -449,13 +513,6 @@ const HostGame: React.FC = () => {
)}
- {/* ROUND_SUMMARY/SCOREBOARD State */}
- {(gameState === 'ROUND_SUMMARY' || gameState === 'SCOREBOARD') && (
-
- )}
@@ -465,20 +522,13 @@ const HostGame: React.FC = () => {
-
-
Quiz Complete
- Final results are in. Great run from every team.
Teams
{rankings.length}
-
- Questions
- {totalQuestions || 0}
-
Winning Score
{rankings[0]?.score ?? 0}
@@ -486,40 +536,10 @@ const HostGame: React.FC = () => {
- {rankings.length > 0 && (
-
- Champion
-
- {rankings[0]?.teamName}
- {rankings[0]?.score ?? 0} points
-
-
- )}
-
- {rankings.length > 0 && (
-
- Top 3 Teams
- {rankings.slice(0, 3).map((team, idx) => (
-
-
- {idx === 0 ? : }
-
- {team.teamName}
- {team.score} pts
-
- ))}
-
- )}
-
-
-
-
+
|