// Blooket-style full UI with themes const CONFIG = require('lib/data/blooket.json'); const THEMES = require('lib/data/themes.json'); // Modern SVG icon system — no emoji const SVG = { profile: '', store: '', level: '', settings: '', party: '', connections:'', hub: '', lock: '', chat: '', flag: '', coin: '', trophy: '', gem: '', crown: '', fire: '', bolt: '', sparkle: '', mask: '', dice: '', frame: '', game: '', chart: '', check: '', menu: '', people: '', }; function icon(name, cls) { const s = SVG[name] || ''; if (!cls) return s; return s.replace('class="', 'class="' + cls + ' '); } function safe(fn) { try { return fn(); } catch { return ''; } } function getTheme(state) { const id = state.theme || 'purple'; return THEMES.themes[id] || THEMES.themes.purple; } function renderMenu(state, localPlayer) { const theme = getTheme(state); const showPicker = state.showThemePicker; const activeTab = state.activeTab || null; const playerProfile = (localPlayer && localPlayer.profile) || {}; const playerName = playerProfile.displayName || 'Player'; const playerAvatar = playerProfile.avatarUrl || playerProfile.portraitUrl || ''; const playerLevel = state.playerLevel || 1; const playerXp = state.playerXp || 0; const xpNeeded = playerLevel * 200; const xpPct = Math.min(100, Math.round((playerXp / xpNeeded) * 100)); const playerCoins = state.playerCoins || 0; const themeBtns = Object.entries(THEMES.themes).map(([id, t]) => { const selected = (state.theme || 'purple') === id; return ` `; }).join(''); // Tab bar items const tabs = [ { id: 'profile', icon: `___PROFILE___` }, { id: 'store', icon: 'store' }, { id: 'level', icon: 'level' }, { id: 'settings', icon: 'settings' }, { id: 'party', icon: 'party' }, { id: 'connections', icon: 'connections' }, { id: 'hub', icon: 'hub' }, ]; const tabBar = `

${tabs.map(t => ` ${SVG[t.icon] || t.icon} `).join('')}

`; const isSignedIn = !!(playerProfile.userId); // Tab panels const profilePanel = activeTab === 'profile' ? `

${SVG.profile}

${isSignedIn ? ` ${playerAvatar ? `

` : `

${playerName[0].toUpperCase()}

` }

${playerName}

spawn.co account

Level ${playerLevel}

Coins ${SVG.coin} ${playerCoins}

Games Played ${state.gamesPlayed || 0}

Best Streak ${SVG.fire} ${state.bestStreak || 0}

` : `

${SVG.profile}

Guest

` : ''; const storeItems = [ { name: 'Double XP', price: 100, icon: SVG.bolt, desc: 'Earn 2x XP next game' }, { name: 'Name Glow', price: 250, icon: SVG.sparkle, desc: 'Glowing name in chat' }, { name: 'VIP Badge', price: 500, icon: SVG.gem, desc: 'Show off your VIP status' }, { name: 'Custom Emoji', price: 150, icon: SVG.mask, desc: 'Unlock special emojis' }, { name: 'Lucky Dice', price: 300, icon: SVG.dice, desc: 'Bonus points on streaks' }, { name: 'Gold Frame', price: 400, icon: SVG.frame, desc: 'Gold profile frame' }, ]; const storePanel = activeTab === 'store' ? `

${SVG.store}

${SVG.coin} ${playerCoins}

${storeItems.map(item => `

${item.icon}

${item.name}

${item.desc}

`).join('')}

` : ''; const levelPanel = activeTab === 'level' ? `

${SVG.level}

${playerLevel}

Level ${playerLevel} Player

XP Progress ${playerXp} / ${xpNeeded}

Play more games to earn XP and level up!

Rewards

${SVG.trophy}

Level 5

Unlock custom themes

${playerLevel >= 5 ? SVG.check : SVG.lock}

${SVG.gem}

Level 10

VIP badge

${playerLevel >= 10 ? SVG.check : SVG.lock}

${SVG.crown}

Level 20

Gold name

${playerLevel >= 20 ? SVG.check : SVG.lock}

` : ''; const settingsPanel = activeTab === 'settings' ? `

${SVG.settings}

Sound Effects

Music

Notifications

Animations

` : ''; const chatLocked = !(state.chatUnlocked); const chatPanelMenu = activeTab === 'party' ? `

${SVG.party}

${chatLocked ? `

${SVG.lock}

Party is Locked

Verify your age to unlock party chat. You must be 13 or older to use party chat.

How old are you?

${[10,11,12,13,14,15,16,17].map(age => ` `).join('')}

` : `

⊹

Party Unlocked!

Party chat is available in multiplayer games.

${SVG.check} Age verified

` : ''; const friendsList = state.friends || []; const friendSearchResults = state.friendSearchResults || []; const friendsPanel = activeTab === 'connections' ? `

${SVG.connections}

✦

${friendSearchResults.length > 0 ? `

Search Results

${friendSearchResults.map(r => `

${r[0].toUpperCase()}

${r}

spawn.co player

`).join('')}

` : ''}

Your Connections (${friendsList.length})

${friendsList.length > 0 ? `

${friendsList.map(f => `

${f[0].toUpperCase()}

${f}

● Online

`).join('')}

` : `

${SVG.people}

No connections yet. Search for players above!

` : ''; const hubPanel = activeTab === 'hub' ? `

${SVG.hub}

See who's online and what's happening

${SVG.game}

Active Games

3 games running now

${SVG.people}

Players Online

12 players online

${SVG.trophy}

Top Player Today

QuizMaster99 — 4,500 pts

${SVG.chart}

Most Popular Subject

Maths ${SVG.fire}

` : ''; return `

${tabBar}

BLOOKET

The Ultimate Quiz Game

${showPicker ? `

Pick a Theme

${themeBtns}

` : ''}

${profilePanel}${storePanel}${levelPanel}${settingsPanel}${chatPanelMenu}${friendsPanel}${hubPanel} `; } function renderSubjectSelect(mode, state) { const theme = getTheme(state); const subjects = CONFIG.subjects; const colors = { maths: '#f59e0b', english: '#3b82f6', science: '#22c55e' }; const gradients = { maths: 'linear-gradient(135deg, #f59e0b, #d97706)', english: 'linear-gradient(135deg, #3b82f6, #2563eb)', science: 'linear-gradient(135deg, #22c55e, #16a34a)' }; const subjectIcons = { maths: '/cdn/sprite-transparent-cartoon-calculator-yellow.png', english: '/cdn/sprite-transparent-cartoon-open-book-blue.png', science: '/cdn/sprite-transparent-cartoon-science-flask-green.png' }; const buttons = Object.keys(subjects).map(key => ` `).join(''); return `

Choose Subject

${mode === 'solo' ? 'Solo Play' : 'Multiplayer'}

${buttons}

`; } function renderDifficultySelect(state) { const theme = getTheme(state); const diffs = [ { id: 'baby', label: 'Baby', icon: '○', desc: 'Super easy questions', gradient: 'linear-gradient(135deg, #f9a8d4, #f472b6)', shadow: 'rgba(244,114,182,0.4)' }, { id: 'easy', label: 'Easy', icon: '◔', desc: 'Simple and fun', gradient: 'linear-gradient(135deg, #22c55e, #16a34a)', shadow: 'rgba(34,197,94,0.4)' }, { id: 'normal', label: 'Normal', icon: '◑', desc: 'Standard difficulty', gradient: 'linear-gradient(135deg, #3b82f6, #6366f1)', shadow: 'rgba(99,102,241,0.4)' }, { id: 'hard', label: 'Hard', icon: '${SVG.fire}', desc: 'Challenge yourself', gradient: 'linear-gradient(135deg, #ef4444, #dc2626)', shadow: 'rgba(239,68,68,0.4)' }, ]; return `

Pick Difficulty

How tough do you want it?

${diffs.map(d => ` `).join('')}

`; } function renderMultiLobby(state) { const theme = getTheme(state); return `

Multiplayer

Play with friends or join others

— or —

`; } function renderLobbyHost(state) { const theme = getTheme(state); const code = state.roomCode; const players = state.lobbyPlayers || []; const subject = state.subject; const subjects = CONFIG.subjects; const colors = { maths: '#f59e0b', english: '#3b82f6', science: '#22c55e' }; const subjectImgs = { maths: '/cdn/sprite-transparent-cartoon-calculator-yellow.png', english: '/cdn/sprite-transparent-cartoon-open-book-blue.png', science: '/cdn/sprite-transparent-cartoon-science-flask-green.png' }; const playerList = players.map(p => `

${p[0]}

${p}

`).join(''); const subjectBtns = Object.keys(subjects).map(key => { const selected = subject === key; return ` `; }).join(''); return `

Host Game

✦

${code ? `

Your Room Code

${code}

Share this with friends!

Pick Subject

${subjectBtns}

Players (${players.length})

${playerList}

${subject ? ` ` : ''} ` : ` `}

`; } function renderLobbyJoin(state) { const theme = getTheme(state); return `

Join Game

Search for a room to join

✦

Ask the host for their 6-digit room code

`; } function renderPlaying(state, world) { const theme = getTheme(state); const q = state.questionData; if (!q) return ''; const current = (state.currentQ ?? 0) + 1; const total = state.totalQ || CONFIG.questionsPerRound; const showAnswer = state.showAnswer; const correctIdx = state.correctIndex; const isMulti = state.mode === 'multi'; const showGameMenu = state.showGameMenu || false; const chatMessages = state.chatMessages || []; const showChat = state.showChat || false; const showPlayerList = state.showPlayerList || false; const selectedPlayer = state.selectedPlayer || null; const showAdminSettings = state.showAdminSettings || false; const hostName = state.hostName || ''; const adminChatEnabled = state.adminChatEnabled !== false; const adminMaxPlayers = state.adminMaxPlayers || 20; const chatUnlocked = state.chatUnlocked || false; const showAgeCheck = state.showAgeCheck || false; const viewingPlayerIdx = state.viewingPlayerIdx ?? -1; // Player count for multiplayer const lobbyPlayers = state.lobbyPlayers || []; const playerCount = isMulti ? lobbyPlayers.length : 0; const answerColors = [ { bg: '#ef4444' }, { bg: '#3b82f6' }, { bg: '#f59e0b' }, { bg: '#22c55e' } ]; const answerShapes = ['▲', '◆', '●', '■']; const answers = (q.answers || []).map((a, i) => { const isCorrect = i === correctIdx; const style = showAnswer ? (isCorrect ? 'background: #22c55e; box-shadow: 0 0 30px rgba(34,197,94,0.5); transform: scale(1.05);' : 'background: rgba(255,255,255,0.05); opacity: 0.4;') : 'background: ' + answerColors[i].bg + '; box-shadow: 0 8px 20px ' + answerColors[i].bg + '44;'; return ` `; }).join(''); // Scores const scores = state.scores || {}; const sorted = Object.entries(scores).sort((a, b) => b[1] - a[1]); const scoreBoard = sorted.length > 0 ? sorted.map(([name, score]) => `

${name}${score}

` ).join('') : ''; // Player list panel (multiplayer only) const playerListPanel = isMulti && showPlayerList ? `

${SVG.people} (${playerCount})

${lobbyPlayers.map((p, idx) => ` `).join('')}

` : ''; // Selected player profile card const profileCard = isMulti && selectedPlayer ? `

${selectedPlayer[0].toUpperCase()}

${selectedPlayer}

spawn.co profile

Score ${(state.scores || {})[selectedPlayer] ?? 0}

Streak ${(state.streaks || {})[selectedPlayer] ?? 0}

${selectedPlayer !== hostName ? ` ` : '

This is you

` : ''; // Chat panel (multiplayer only) const chatLocked = !chatUnlocked; const chatPanel = isMulti && showChat ? `

${chatLocked ? SVG.lock + ' Party Locked' : SVG.party + ' Party'}

${chatLocked ? `

${SVG.lock}

Chat is locked

Verify your age to unlock chat and see messages from other players.

You must be 13+ to chat

` : `

${chatMessages.map(m => `

${m.name}: ${m.text}

`).join('')} ${chatMessages.length === 0 ? '

No messages yet

' : ''}

` : ''; // Admin settings panel (host only, multiplayer) const adminPanel = isMulti && showAdminSettings ? `

${SVG.settings}

Only you (the host) can see this panel.

Game Controls

Chat Enabled

Max Players

${adminMaxPlayers}

Player Management

${lobbyPlayers.map(p => `

${p}

${p !== hostName ? ` ` : 'Host'}

`).join('')}

Danger Zone

` : ''; // Age verification overlay const ageCheckOverlay = showAgeCheck ? `

${SVG.lock}

Age Verification

To unlock chat, please confirm your age.
You must be 13 or older to use chat.

How old are you?

${[10,11,12,13,14,15,16,17].map(age => ` `).join('')}

` : ''; // Player viewer — browse all players left/right const viewingPlayer = (isMulti && viewingPlayerIdx >= 0 && viewingPlayerIdx < lobbyPlayers.length) ? lobbyPlayers[viewingPlayerIdx] : null; const playerViewer = viewingPlayer ? `

${viewingPlayerIdx + 1} / ${lobbyPlayers.length}

${viewingPlayer[0].toUpperCase()}

${viewingPlayer}

spawn.co player

${(state.scores || {})[viewingPlayer] ?? 0} Score

${(state.streaks || {})[viewingPlayer] ?? 0} Streak

${viewingPlayer !== hostName ? ` ` : '

This is you

` : ''; // In-game settings panel const showInGameSettings = state.showInGameSettings || false; const inGameSettingsPanel = showInGameSettings ? `

${SVG.settings}

Sound Effects

Music

Notifications

Animations

` : ''; // Game menu overlay with tabs const menuTab = state.menuTab || null; const menuTabs = [ { id: 'people', icon: 'people' }, { id: 'chat', icon: 'chat' }, { id: 'report', icon: 'flag' }, { id: 'settings', icon: 'settings' }, ]; // Tab content let menuTabContent = ''; if (menuTab === 'people') { menuTabContent = `

${lobbyPlayers.length > 0 ? lobbyPlayers.map(p => `

${p[0].toUpperCase()}

${p}

${p === hostName ? 'You' : `${(state.scores || {})[p] ?? 0}pts`}

`).join('') : '

No players

`; } else if (menuTab === 'chat') { const chatMsgs = chatMessages; menuTabContent = `

${chatMsgs.map(m => `

${m.name}: ${m.text}

`).join('')} ${chatMsgs.length === 0 ? '

No messages yet

' : ''}

`; } else if (menuTab === 'report') { menuTabContent = `

${SVG.flag}

Report inappropriate behavior or content.

`; } else if (menuTab === 'settings') { menuTabContent = `

Sound

Music

Notifications

Animations

`; } const gameMenu = showGameMenu ? `

Game Menu

${isMulti ? `

${menuTabs.map(t => ` `).join('')}

${menuTabContent || ''}

` : ''}

${isMulti ? ` ` : ''}

` : ''; return `

Q${current} / ${total}

${scoreBoard ? `

${scoreBoard}

` : ''}

${isMulti ? ` ${SVG.people} ⊹ ` : ''} ${SVG.menu}

${q.q}

${answers}

${chatPanel} ${playerListPanel} ${profileCard} ${adminPanel} ${playerViewer} ${ageCheckOverlay} ${inGameSettingsPanel} ${gameMenu} `; } function renderResults(state) { const theme = getTheme(state); const scores = state.scores || {}; const sorted = Object.entries(scores).sort((a, b) => b[1] - a[1]); const podium = sorted.slice(0, 5); const rankLabels = ['1st', '2nd', '3rd', '4th', '5th']; const rankColors = ['#f59e0b', '#9ca3af', '#d97706', '#6b7280', '#6b7280']; const rows = podium.map(([name, score], i) => `

${rankLabels[i]}

${name}

${score}

`).join(''); const topScore = podium.length > 0 ? podium[0][1] : 0; return `

Game Over!

Top Score: ${topScore}

${rows}

`; } export default function(localPlayer, world) { const mgr = world.query({ tags: ['game-manager'] })[0]; if (!mgr) return renderMenu({}, localPlayer); const s = mgr.state || {}; const profile = localPlayer.profile || {}; switch (s.phase) { case 'menu': return safe(() => renderMenu(s, localPlayer)); case 'solo-subject': return safe(() => renderSubjectSelect('solo', s)); case 'multi-difficulty': return safe(() => renderDifficultySelect(s)); case 'multi-lobby': return safe(() => renderMultiLobby(s)); case 'lobby-host': return safe(() => renderLobbyHost(s)); case 'lobby-join': return safe(() => renderLobbyJoin(s)); case 'playing': return safe(() => renderPlaying(s)); case 'results': return safe(() => renderResults(s)); default: return safe(() => renderMenu(s, localPlayer)); } }

Spawn