📮 USPS TRIVIA CHALLENGE

Test Your Postal Service Knowledge

\n\n {/* Main Content */}\n {!currentUser ? (\n \n ) : (\n <>\n

\n 👋\n Welcome, {currentUser.name}!\n

🎯 You're now in the post office!

Trivia questions coming soon...

\n \n

\n \n \n \n )}\n

\n );\n}",[],[223,230,237],{"_104":246,"_95":247,"_153":248,"_155":231,"_156":138,"_157":101,"_159":22,"_106":249,"_100":250,"_162":180,"_164":251,"_165":22,"_166":-5,"_167":252,"_98":253},"a08b2684-487b-11f0-ae9b-76b3cceeab13","NameEntry.tsx","b070df40-487a-11f0-bbee-76b3cceeab13",["D",1749835625996],2,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState } from 'https://esm.sh/react@18.2.0';\n\ninterface NameEntryProps {\n onJoin: (name: string) => void;\n isConnecting: boolean;\n error: string | null;\n}\n\nexport function NameEntry({ onJoin, isConnecting, error }: NameEntryProps) {\n const [name, setName] = useState('');\n\n const handleSubmit = (e: React.FormEvent) => {\n e.preventDefault();\n if (name.trim() && !isConnecting) {\n onJoin(name.trim());\n }\n };\n\n return (\n

\n 📮\n Join the Post Office Trivia Challenge\n

\n \n {error && (\n

\n {error}\n

\n )}\n \n

\n );\n}",[],[223,230,247],{"_104":255,"_95":256,"_153":257,"_155":231,"_156":138,"_157":258,"_159":22,"_106":259,"_100":32,"_162":180,"_164":260,"_165":22,"_166":-5,"_167":261,"_98":262},"b968f6b4-487a-11f0-8aff-76b3cceeab13","UserList.tsx","b968f79a-487a-11f0-8aff-76b3cceeab13",10,["D",1749835238228],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from 'https://esm.sh/react@18.2.0';\nimport type { User } from '../../shared/types.ts';\n\ninterface UserListProps {\n users: User[];\n currentUserId: string | null;\n}\n\nexport function UserList({ users, currentUserId }: UserListProps) {\n return (\n

\n 👥\n Postal Workers Online ({users.length}/10)\n

\n \n {users.length === 0 ? (\n

\n 📭\n

No postal workers online yet...

Be the first to join!

\n ) : (\n

\n {users.map((user) => (\n \n \n {user.name}\n {user.id === currentUserId && (\n 📍\n )}\n

\n ))}\n

\n )}\n \n

\n {users.length < 10 ? (\n

🚚 Waiting for more postal workers to join... ({10 - users.length} spots available)

\n ) : (\n

📮 Post office is full! Ready to start trivia!

\n )}\n

\n \n );\n}",[],[223,230,256],[223,230],{"_104":265,"_95":266,"_153":267,"_155":224,"_156":138,"_157":225,"_159":22,"_106":268,"_100":32,"_162":269,"_164":270,"_165":22,"_166":-5,"_167":271,"_98":272},"95d107aa-487a-11f0-a9ec-76b3cceeab13","index.html","95d10886-487a-11f0-a9ec-76b3cceeab13",["D",1749835178513],"file","\n\n\n \n \n USPS Trivia Challenge\n \n \n \n \n \n \n\n\n

\n \n \n\n",[],[223,266],{"_104":274,"_95":275,"_153":276,"_155":224,"_156":138,"_157":277,"_159":160,"_106":278,"_100":32,"_162":180,"_164":279,"_165":22,"_166":-5,"_167":280,"_98":281},"ce99700e-487a-11f0-90fc-76b3cceeab13","index.tsx","ce9970d6-487a-11f0-90fc-76b3cceeab13",12,["D",1749835273779],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from 'https://esm.sh/react@18.2.0';\nimport { createRoot } from 'https://esm.sh/react-dom@18.2.0/client';\nimport { App } from './components/App.tsx';\n\nconst root = createRoot(document.getElementById('root')!);\nroot.render();",[],[223,275],{"_104":283,"_95":284,"_153":285,"_155":224,"_156":138,"_157":286,"_159":22,"_106":287,"_100":32,"_162":269,"_164":288,"_165":22,"_166":-5,"_167":289,"_98":290},"a830b47c-487a-11f0-9dd0-76b3cceeab13","style.css","a830b530-487a-11f0-9dd0-76b3cceeab13",8,["D",1749835209340],"/* USPS Trivia Game Styles */\n\n:root {\n --usps-blue: #004B87;\n --usps-red: #DA020E;\n --usps-light-blue: #0077BE;\n --usps-gray: #5A5A5A;\n --usps-light-gray: #F5F5F5;\n --usps-white: #FFFFFF;\n}\n\n* {\n box-sizing: border-box;\n}\n\nbody {\n font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n margin: 0;\n padding: 0;\n background: linear-gradient(135deg, var(--usps-blue) 0%, var(--usps-light-blue) 100%);\n min-height: 100vh;\n}\n\n.bg-usps-blue {\n background: linear-gradient(135deg, var(--usps-blue) 0%, var(--usps-light-blue) 100%);\n}\n\n.usps-container {\n max-width: 800px;\n margin: 0 auto;\n padding: 2rem;\n}\n\n.usps-header {\n text-align: center;\n margin-bottom: 3rem;\n color: white;\n}\n\n.usps-logo {\n font-size: 2.5rem;\n font-weight: 700;\n margin-bottom: 0.5rem;\n text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);\n}\n\n.usps-tagline {\n font-size: 1.1rem;\n opacity: 0.9;\n font-weight: 500;\n}\n\n.usps-card {\n background: white;\n border-radius: 12px;\n padding: 2rem;\n box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);\n border: 3px solid var(--usps-red);\n margin-bottom: 2rem;\n}\n\n.usps-card-header {\n border-bottom: 2px solid var(--usps-light-gray);\n padding-bottom: 1rem;\n margin-bottom: 1.5rem;\n}\n\n.usps-card-title {\n color: var(--usps-blue);\n font-size: 1.5rem;\n font-weight: 600;\n margin: 0;\n display: flex;\n align-items: center;\n gap: 0.5rem;\n}\n\n.usps-form {\n display: flex;\n flex-direction: column;\n gap: 1rem;\n}\n\n.usps-input {\n padding: 0.75rem 1rem;\n border: 2px solid var(--usps-light-gray);\n border-radius: 6px;\n font-size: 1rem;\n transition: border-color 0.2s;\n}\n\n.usps-input:focus {\n outline: none;\n border-color: var(--usps-blue);\n box-shadow: 0 0 0 3px rgba(0, 75, 135, 0.1);\n}\n\n.usps-button {\n background: var(--usps-red);\n color: white;\n border: none;\n padding: 0.75rem 1.5rem;\n border-radius: 6px;\n font-size: 1rem;\n font-weight: 600;\n cursor: pointer;\n transition: background-color 0.2s;\n}\n\n.usps-button:hover {\n background: #B8001A;\n}\n\n.usps-button:disabled {\n background: var(--usps-gray);\n cursor: not-allowed;\n}\n\n.users-grid {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));\n gap: 1rem;\n margin-top: 1rem;\n}\n\n.user-badge {\n background: var(--usps-light-blue);\n color: white;\n padding: 0.75rem 1rem;\n border-radius: 8px;\n text-align: center;\n font-weight: 500;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 0.5rem;\n}\n\n.user-badge.current-user {\n background: var(--usps-red);\n border: 2px solid white;\n box-shadow: 0 0 0 2px var(--usps-red);\n}\n\n.status-indicator {\n width: 8px;\n height: 8px;\n background: #00FF00;\n border-radius: 50%;\n display: inline-block;\n}\n\n.error-message {\n background: #FEE;\n color: var(--usps-red);\n padding: 1rem;\n border-radius: 6px;\n border: 1px solid var(--usps-red);\n margin-bottom: 1rem;\n}\n\n.loading-spinner {\n display: inline-block;\n width: 20px;\n height: 20px;\n border: 2px solid #f3f3f3;\n border-top: 2px solid var(--usps-blue);\n border-radius: 50%;\n animation: spin 1s linear infinite;\n}\n\n@keyframes spin {\n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n}\n\n.connection-status {\n position: fixed;\n top: 1rem;\n right: 1rem;\n padding: 0.5rem 1rem;\n border-radius: 20px;\n font-size: 0.875rem;\n font-weight: 500;\n display: flex;\n align-items: center;\n gap: 0.5rem;\n}\n\n.connection-status.connected {\n background: #D4EDDA;\n color: #155724;\n border: 1px solid #C3E6CB;\n}\n\n.connection-status.disconnected {\n background: #F8D7DA;\n color: #721C24;\n border: 1px solid #F5C6CB;\n}\n\n.postal-icon {\n font-size: 1.2em;\n}\n\n@media (max-width: 640px) {\n .usps-container {\n padding: 1rem;\n }\n \n .usps-logo {\n font-size: 2rem;\n }\n \n .users-grid {\n grid-template-columns: 1fr;\n }\n}",[],[223,284],[223],{"_104":293,"_95":294,"_153":295,"_155":-5,"_156":138,"_157":250,"_159":160,"_106":296,"_100":32,"_162":163,"_164":-5,"_165":22,"_166":-5,"_167":297,"_98":306},"7205417e-487a-11f0-aed0-76b3cceeab13","shared","871b29af-733c-45f6-a07c-d1731f9bbc70",["D",1749835118445],[298],{"_104":299,"_95":300,"_153":301,"_155":295,"_156":138,"_157":250,"_159":22,"_106":302,"_100":32,"_162":180,"_164":303,"_165":22,"_166":-5,"_167":304,"_98":305},"720539e0-487a-11f0-aed0-76b3cceeab13","types.ts","72053a8a-487a-11f0-aed0-76b3cceeab13",["D",1749835118445],"// Shared types for USPS Trivia Game\n\nexport interface User {\n id: string;\n name: string;\n joinedAt: number;\n isActive: boolean;\n}\n\nexport interface GameState {\n users: User[];\n maxUsers: number;\n gameStatus: 'waiting' | 'playing' | 'finished';\n}\n\n// WebSocket message types\nexport type WSMessage = \n | { type: 'user_joined'; user: User }\n | { type: 'user_left'; userId: string }\n | { type: 'users_update'; users: User[] }\n | { type: 'game_state'; state: GameState }\n | { type: 'error'; message: string };\n\nexport interface WSClientMessage {\n type: 'join' | 'leave';\n name?: string;\n userId?: string;\n}",[],[294,300],[294],{"_104":308,"_95":309,"_153":310,"_155":-5,"_156":138,"_157":241,"_159":22,"_106":311,"_100":32,"_162":269,"_164":312,"_165":22,"_166":-5,"_167":313,"_98":314},"6db5227e-487a-11f0-816c-76b3cceeab13","README.md","6db52314-487a-11f0-816c-76b3cceeab13",["D",1749835111222],"# USPS Trivia Game\n\nA realtime trivia game themed like a USPS post office, supporting up to 10 concurrent users.\n\n## Features\n\n- USPS post office themed design\n- Real-time user presence (see who's online)\n- Name entry and user management\n- Prepared for trivia functionality\n\n## Project Structure\n\n```\n├── backend/\n│ ├── index.ts # Main Hono server with WebSocket support\n│ ├── database/\n│ │ ├── migrations.ts # SQLite schema setup\n│ │ └── queries.ts # Database query functions\n│ └── routes/\n│ └── websocket.ts # WebSocket connection handling\n├── frontend/\n│ ├── index.html # Main HTML template\n│ ├── index.tsx # React frontend entry point\n│ ├── components/\n│ │ ├── App.tsx # Main app component\n│ │ ├── NameEntry.tsx # Name entry form\n│ │ └── UserList.tsx # Online users display\n│ └── style.css # USPS-themed styles\n└── shared/\n └── types.ts # Shared TypeScript types\n```\n\n## Getting Started\n\n1. The backend runs on Hono with WebSocket support for real-time features\n2. Frontend uses React with WebSocket client for real-time updates\n3. SQLite stores user sessions and game state\n4. USPS-themed styling with postal colors and typography\n\n## Current Status\n\n- ✅ User name entry\n- ✅ Real-time user presence\n- ✅ USPS theming\n- 🚧 Trivia functionality (coming next)",[],[309],"files",[150,169,175,184,194,201,210,221,228,235,245,254,264,273,282,292,298,307],"counts",{"_319":32,"_320":250,"_321":32,"_322":32},"pulls","branches","forks","envVars","contents",[],{"_104":246,"_95":247,"_153":248,"_155":231,"_156":138,"_157":101,"_159":22,"_106":326,"_100":250,"_162":180,"_164":251,"_165":22,"_166":-5,"_98":327},["D",1749835625996],[223,230,247],"upstreamProject","upstreamBranch","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name.branch.$branch.version.$version.code.$",{"_93":94,"_95":96,"_97":43,"_100":101,"_98":99,"_102":336,"_148":341,"_315":396,"_269":397,"_323":399,"_400":-5,"_401":22,"_402":-5,"_403":-5,"_404":-5,"_405":406},{"_104":105,"_95":96,"_106":337,"_108":-5,"_109":22,"_110":111,"_112":-5,"_113":-5,"_14":114,"_115":-5,"_116":22,"_117":-5,"_118":32,"_16":119,"_120":121,"_122":121,"_123":124,"_125":124,"_126":124,"_127":121,"_128":121,"_23":338,"_132":339,"_135":340,"_147":22},["D",1749834559473],{"_93":94,"_130":131},{"_93":94,"_134":131},{"_100":137,"_95":43,"_104":138,"_139":105,"_140":-5,"_141":-5,"_142":-5,"_143":-5,"_144":-5,"_145":96,"_146":94},[342,363,387,393],{"_104":151,"_95":152,"_153":154,"_155":-5,"_156":138,"_157":158,"_159":160,"_106":161,"_100":32,"_162":163,"_164":-5,"_165":22,"_166":-5,"_167":343,"_98":362},[344,353,359],{"_104":170,"_95":171,"_153":172,"_155":154,"_156":138,"_157":158,"_159":160,"_106":173,"_100":32,"_162":163,"_164":-5,"_165":22,"_166":-5,"_167":345,"_98":352},[346,349],{"_104":176,"_95":177,"_153":178,"_155":172,"_156":138,"_157":158,"_159":22,"_106":179,"_100":32,"_162":180,"_164":181,"_165":22,"_166":-5,"_167":347,"_98":348},[],[152,171,177],{"_104":185,"_95":186,"_153":187,"_155":172,"_156":138,"_157":188,"_159":22,"_106":189,"_100":32,"_162":180,"_164":190,"_165":22,"_166":-5,"_167":350,"_98":351},[],[152,171,186],[152,171],{"_104":195,"_95":196,"_153":197,"_155":154,"_156":138,"_157":198,"_159":160,"_106":199,"_100":32,"_162":163,"_164":-5,"_165":22,"_166":-5,"_167":354,"_98":358},[355],{"_104":202,"_95":203,"_153":204,"_155":197,"_156":138,"_157":198,"_159":22,"_106":205,"_100":32,"_162":180,"_164":206,"_165":22,"_166":-5,"_167":356,"_98":357},[],[152,196,203],[152,196],{"_104":211,"_95":212,"_153":213,"_155":154,"_156":138,"_157":214,"_159":22,"_106":215,"_100":188,"_162":216,"_164":217,"_165":22,"_166":-5,"_167":360,"_98":361},[],[152,212],[152],{"_104":222,"_95":223,"_153":224,"_155":-5,"_156":138,"_157":225,"_159":160,"_106":226,"_100":32,"_162":163,"_164":-5,"_165":22,"_166":-5,"_167":364,"_98":386},[365,377,380,383],{"_104":229,"_95":230,"_153":231,"_155":224,"_156":138,"_157":232,"_159":160,"_106":233,"_100":32,"_162":163,"_164":-5,"_165":22,"_166":-5,"_167":366,"_98":376},[367,370,373],{"_104":236,"_95":237,"_153":238,"_155":231,"_156":138,"_157":239,"_159":22,"_106":240,"_100":241,"_162":180,"_164":242,"_165":22,"_166":-5,"_167":368,"_98":369},[],[223,230,237],{"_104":246,"_95":247,"_153":248,"_155":231,"_156":138,"_157":101,"_159":22,"_106":249,"_100":250,"_162":180,"_164":251,"_165":22,"_166":-5,"_167":371,"_98":372},[],[223,230,247],{"_104":255,"_95":256,"_153":257,"_155":231,"_156":138,"_157":258,"_159":22,"_106":259,"_100":32,"_162":180,"_164":260,"_165":22,"_166":-5,"_167":374,"_98":375},[],[223,230,256],[223,230],{"_104":265,"_95":266,"_153":267,"_155":224,"_156":138,"_157":225,"_159":22,"_106":268,"_100":32,"_162":269,"_164":270,"_165":22,"_166":-5,"_167":378,"_98":379},[],[223,266],{"_104":274,"_95":275,"_153":276,"_155":224,"_156":138,"_157":277,"_159":160,"_106":278,"_100":32,"_162":180,"_164":279,"_165":22,"_166":-5,"_167":381,"_98":382},[],[223,275],{"_104":283,"_95":284,"_153":285,"_155":224,"_156":138,"_157":286,"_159":22,"_106":287,"_100":32,"_162":269,"_164":288,"_165":22,"_166":-5,"_167":384,"_98":385},[],[223,284],[223],{"_104":293,"_95":294,"_153":295,"_155":-5,"_156":138,"_157":250,"_159":160,"_106":296,"_100":32,"_162":163,"_164":-5,"_165":22,"_166":-5,"_167":388,"_98":392},[389],{"_104":299,"_95":300,"_153":301,"_155":295,"_156":138,"_157":250,"_159":22,"_106":302,"_100":32,"_162":180,"_164":303,"_165":22,"_166":-5,"_167":390,"_98":391},[],[294,300],[294],{"_104":308,"_95":309,"_153":310,"_155":-5,"_156":138,"_157":241,"_159":22,"_106":311,"_100":32,"_162":269,"_164":312,"_165":22,"_166":-5,"_167":394,"_98":395},[],[309],[342,344,346,349,353,355,359,363,365,367,370,373,377,380,383,387,389,393],{"_104":246,"_95":247,"_153":248,"_155":231,"_156":138,"_157":101,"_159":22,"_106":326,"_100":250,"_162":180,"_164":251,"_165":22,"_166":-5,"_98":398},[223,230,247],[],"upstream","showCompareCallout","pull","ahead","behind","templates",[],"actionData","errors"]