📮 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":245,"_95":246,"_153":247,"_155":231,"_156":138,"_157":232,"_159":22,"_106":248,"_100":32,"_162":180,"_164":249,"_165":22,"_166":-5,"_167":250,"_98":251},"b070de32-487a-11f0-bbee-76b3cceeab13","NameEntry.tsx","b070df40-487a-11f0-bbee-76b3cceeab13",["D",1749835223180],"/** @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 Postal Service Trivia Challenge\n

\n \n {error && (\n

\n {error}\n

\n )}\n \n

\n );\n}",[],[223,230,246],{"_104":253,"_95":254,"_153":255,"_155":231,"_156":138,"_157":256,"_159":22,"_106":257,"_100":32,"_162":180,"_164":258,"_165":22,"_166":-5,"_167":259,"_98":260},"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,254],[223,230],{"_104":263,"_95":264,"_153":265,"_155":224,"_156":138,"_157":225,"_159":22,"_106":266,"_100":32,"_162":267,"_164":268,"_165":22,"_166":-5,"_167":269,"_98":270},"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,264],{"_104":272,"_95":273,"_153":274,"_155":224,"_156":138,"_157":275,"_159":160,"_106":276,"_100":32,"_162":180,"_164":277,"_165":22,"_166":-5,"_167":278,"_98":279},"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,273],{"_104":281,"_95":282,"_153":283,"_155":224,"_156":138,"_157":284,"_159":22,"_106":285,"_100":32,"_162":267,"_164":286,"_165":22,"_166":-5,"_167":287,"_98":288},"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,282],[223],{"_104":291,"_95":292,"_153":293,"_155":-5,"_156":138,"_157":294,"_159":160,"_106":295,"_100":32,"_162":163,"_164":-5,"_165":22,"_166":-5,"_167":296,"_98":305},"7205417e-487a-11f0-aed0-76b3cceeab13","shared","871b29af-733c-45f6-a07c-d1731f9bbc70",2,["D",1749835118445],[297],{"_104":298,"_95":299,"_153":300,"_155":293,"_156":138,"_157":294,"_159":22,"_106":301,"_100":32,"_162":180,"_164":302,"_165":22,"_166":-5,"_167":303,"_98":304},"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}",[],[292,299],[292],{"_104":307,"_95":308,"_153":309,"_155":-5,"_156":138,"_157":240,"_159":22,"_106":310,"_100":32,"_162":267,"_164":311,"_165":22,"_166":-5,"_167":312,"_98":313},"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)",[],[308],"files",[150,169,175,184,194,201,210,221,228,235,244,252,262,271,280,290,297,306],"counts",{"_318":32,"_319":294,"_320":32,"_321":32},"pulls","branches","forks","envVars","contents",[],{"_104":253,"_95":254,"_153":255,"_155":231,"_156":138,"_157":256,"_159":22,"_106":325,"_100":32,"_162":180,"_164":258,"_165":22,"_166":-5,"_98":326},["D",1749835238228],[223,230,254],"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":335,"_148":340,"_314":395,"_267":396,"_322":398,"_399":-5,"_400":22,"_401":-5,"_402":-5,"_403":-5,"_404":405},{"_104":105,"_95":96,"_106":336,"_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":337,"_132":338,"_135":339,"_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},[341,362,386,392],{"_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":342,"_98":361},[343,352,358],{"_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":344,"_98":351},[345,348],{"_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":346,"_98":347},[],[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":349,"_98":350},[],[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":353,"_98":357},[354],{"_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":355,"_98":356},[],[152,196,203],[152,196],{"_104":211,"_95":212,"_153":213,"_155":154,"_156":138,"_157":214,"_159":22,"_106":215,"_100":158,"_162":216,"_164":217,"_165":22,"_166":-5,"_167":359,"_98":360},[],[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":363,"_98":385},[364,376,379,382],{"_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":365,"_98":375},[366,369,372],{"_104":236,"_95":237,"_153":238,"_155":231,"_156":138,"_157":101,"_159":22,"_106":239,"_100":240,"_162":180,"_164":241,"_165":22,"_166":-5,"_167":367,"_98":368},[],[223,230,237],{"_104":245,"_95":246,"_153":247,"_155":231,"_156":138,"_157":232,"_159":22,"_106":248,"_100":32,"_162":180,"_164":249,"_165":22,"_166":-5,"_167":370,"_98":371},[],[223,230,246],{"_104":253,"_95":254,"_153":255,"_155":231,"_156":138,"_157":256,"_159":22,"_106":257,"_100":32,"_162":180,"_164":258,"_165":22,"_166":-5,"_167":373,"_98":374},[],[223,230,254],[223,230],{"_104":263,"_95":264,"_153":265,"_155":224,"_156":138,"_157":225,"_159":22,"_106":266,"_100":32,"_162":267,"_164":268,"_165":22,"_166":-5,"_167":377,"_98":378},[],[223,264],{"_104":272,"_95":273,"_153":274,"_155":224,"_156":138,"_157":275,"_159":160,"_106":276,"_100":32,"_162":180,"_164":277,"_165":22,"_166":-5,"_167":380,"_98":381},[],[223,273],{"_104":281,"_95":282,"_153":283,"_155":224,"_156":138,"_157":284,"_159":22,"_106":285,"_100":32,"_162":267,"_164":286,"_165":22,"_166":-5,"_167":383,"_98":384},[],[223,282],[223],{"_104":291,"_95":292,"_153":293,"_155":-5,"_156":138,"_157":294,"_159":160,"_106":295,"_100":32,"_162":163,"_164":-5,"_165":22,"_166":-5,"_167":387,"_98":391},[388],{"_104":298,"_95":299,"_153":300,"_155":293,"_156":138,"_157":294,"_159":22,"_106":301,"_100":32,"_162":180,"_164":302,"_165":22,"_166":-5,"_167":389,"_98":390},[],[292,299],[292],{"_104":307,"_95":308,"_153":309,"_155":-5,"_156":138,"_157":240,"_159":22,"_106":310,"_100":32,"_162":267,"_164":311,"_165":22,"_166":-5,"_167":393,"_98":394},[],[308],[341,343,345,348,352,354,358,362,364,366,369,372,376,379,382,386,388,392],{"_104":253,"_95":254,"_153":255,"_155":231,"_156":138,"_157":256,"_159":22,"_106":325,"_100":32,"_162":180,"_164":258,"_165":22,"_166":-5,"_98":397},[223,230,254],[],"upstream","showCompareCallout","pull","ahead","behind","templates",[],"actionData","errors"]