pguzman/QuizMaster
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Integrate join URL and QR code for player access

Browse Source 
Adds a dynamic join URL and QR code displayed on the spectator view and host dashboard. This allows players to easily join the quiz session by scanning the QR code or navigating to the provided URL.

The `joinUrl` is now managed within the `GameContext` and exposed to relevant components. The spectator view uses this URL to generate the QR code, while the host view displays it for easy access. This enhances the onboarding experience for new players and simplifies session management.
This commit is contained in:
Philip
2026-01-28 19:01:34 -08:00
parent 1939574e0f
commit c5cf88491f
7 changed files with 403 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files
App.tsx
+29 -9
View File
@@ -1,28 +1,39 @@
import React, { useState, useEffect, Suspense } from 'react';
import { GameProvider } from './context/GameContext';
import { Monitor, Smartphone, LayoutDashboard, Loader2 } from 'lucide-react';
import { GameProvider, useGame } from './context/GameContext';
import { Monitor, Smartphone, LayoutDashboard, Loader2, RefreshCw } from 'lucide-react';
// Lazy load components to reduce initial bundle size
const HostView = React.lazy(() => import('./components/HostView').then(module => ({ default: module.HostView })));
const PlayerView = React.lazy(() => import('./components/PlayerView').then(module => ({ default: module.PlayerView })));
const SpectatorView = React.lazy(() => import('./components/SpectatorView').then(module => ({ default: module.SpectatorView })));
const App: React.FC = () => {
// Inner Component to access Context
const AppContent: React.FC = () => {
const { setIsHost, isSyncing, isHost } = useGame();
const [view, setView] = useState<'HOST' | 'PLAYER' | 'SPECTATOR'>('SPECTATOR');
// Simple hash routing for demo purposes
useEffect(() => {
const handleHashChange = () => {
const hash = window.location.hash;
if (hash === '#host') setView('HOST');
else if (hash === '#player') setView('PLAYER');
else setView('SPECTATOR');
if (hash === '#host') {
setView('HOST');
setIsHost(true); // Promote this session to Host Authority
}
else if (hash === '#player') {
setView('PLAYER');
setIsHost(false);
}
else {
setView('SPECTATOR');
setIsHost(false);
}
};
handleHashChange();
window.addEventListener('hashchange', handleHashChange);
return () => window.removeEventListener('hashchange', handleHashChange);
}, []);
}, [setIsHost]);
const navigate = (newView: 'HOST' | 'PLAYER' | 'SPECTATOR') => {
setView(newView);
@@ -39,13 +50,15 @@ const App: React.FC = () => {
};
return (
<GameProvider>
<div className="flex flex-col h-screen bg-slate-950 overflow-hidden">
{/* Top Navigation Bar */}
<nav className="flex items-center justify-between px-4 py-3 bg-slate-900 border-b border-slate-800 shadow-md shrink-0 z-50">
<div className="flex items-center gap-3">
<div className="w-8 h-8 bg-gradient-to-tr from-indigo-600 to-purple-600 rounded-lg flex items-center justify-center font-black italic text-white shadow-lg border border-white/10">Q</div>
<span className="font-bold text-lg tracking-wide text-slate-100 hidden sm:block">QuizMaster Live</span>
{isSyncing && (
<RefreshCw size={14} className="text-slate-500 animate-spin ml-2" />
)}
</div>
<div className="flex bg-slate-800 p-1 rounded-lg border border-slate-700">
@@ -82,6 +95,13 @@ const App: React.FC = () => {
</Suspense>
</div>
</div>
);
};
const App: React.FC = () => {
return (
<GameProvider>
<AppContent />
</GameProvider>
);
};
@@ -107,4 +127,4 @@ const NavButton: React.FC<NavButtonProps> = ({ active, onClick, icon, label }) =
</button>
);
export default App;
export default App;