// Main menu screen. // Corridor backdrop, level tabs, leaderboard centrepiece with podium + list. // Classy: off-white surfaces, near-black ink, hairline strokes. var CORRIDOR = '/cdn/environment-white-futuristic-corridor-hallway-m5zg3lvg.webp'; var INK = 'oklch(0.18 0.005 80)'; var INK_SOFT = 'oklch(0.32 0.01 80)'; var INK_MUTE = 'oklch(0.48 0.008 80)'; var PAPER = 'oklch(0.97 0.008 80)'; var PAPER_T = 'oklch(0.97 0.008 80 / 0.94)'; var GOLD = 'oklch(0.78 0.13 85)'; var SILVER = 'oklch(0.78 0.005 80)'; var BRONZE = 'oklch(0.62 0.09 55)'; var RESPONSIVE = require('lib/ui-responsive.js'); var BEST_TIMES = require('lib/best-times.js'); function fmtTime(seconds) { if (seconds == null || !isFinite(seconds)) return '—:——.——'; if (seconds < 0) seconds = 0; var m = Math.floor(seconds / 60); var s = seconds - m * 60; var sStr = (s < 10 ? '0' : '') + s.toFixed(2); return m + ':' + sStr; } function nameOf(p) { if (!p) return '—'; // Persisted leaderboard entries carry name directly. if (p.name) return String(p.name); // Local player view: profile fields are merged into state as displayName. if (p.displayName) return String(p.displayName); var id = String(p.userId || p.id || ''); if (id.startsWith('player/')) id = id.slice(7); return id.slice(0, 10) || 'player'; } function avatarOf(p) { if (!p) return null; if (p.image) return String(p.image); if (p.portraitUrl) return String(p.portraitUrl); if (p.avatarUrl) return String(p.avatarUrl); return null; } function idOf(p) { if (!p) return null; return p.userId || p.id || null; } function stickmanAvatar(size) { // Simple SVG silhouette used when a profile image isn't available. var s = size || 56; return ( '' ); } var MEDAL_GOLD = '/cdn/moodboard-bodies-floor/sprite-medal-gold-photorealistic-front-view-no-ribbon-isolated.png'; var MEDAL_SILVER = '/cdn/moodboard-bodies-floor/sprite-medal-silver-photorealistic-front-view-no-ribbon-isolated.png'; var MEDAL_BRONZE = '/cdn/moodboard-bodies-floor/sprite-medal-bronze-photorealistic-front-view-no-ribbon-isolated.png'; function medalUrlForRank(rank) { if (rank === 1) return MEDAL_GOLD; if (rank === 2) return MEDAL_SILVER; if (rank === 3) return MEDAL_BRONZE; return null; } // Inline SVG used as a tiling background — monochrome gaussian-style noise. // fractalNoise + greyscale matrix + low alpha = soft grain. var NOISE_SVG = ( '' ); var NOISE_URL = 'url("data:image/svg+xml;utf8,' + encodeURIComponent(NOISE_SVG) + '")'; function medalPlaceholder(size, rank) { var url = medalUrlForRank(rank); if (!url) return stickmanAvatar(Math.round(size * 0.78)); var inner = Math.round(size * 0.78); return ( '

' + // Faded grayscale medal '

' + // Monochrome grain overlay — clipped to a circle to match the avatar ring '

' + '

' ); } function avatarBlock(p, size, rank) { var url = avatarOf(p); if (url) { return '

'; } return ( '

' + medalPlaceholder(size, rank) + '

' ); } function podiumSpot({ rank, player, accent, big, localId }) { var avSize = big ? 84 : 60; var isMe = player && (player.userId === localId || player.id === localId); var name = player ? nameOf(player) : 'awaiting'; var time = player ? fmtTime(player.bestTime) : fmtTime(null); var rankLabel = rank === 1 ? '1ST' : (rank === 2 ? '2ND' : '3RD'); return ( '

' + // Rank label '

' + rankLabel + '

' + // Avatar — cropped circle, hairline ring, accent ring '

' + avatarBlock(player, avSize, rank) + '

' + // Name pill '

' + name + '

' + // Time '

' + time + '

' + '

' ); } function listRow(entry, rank, localId) { var isMe = entry && (entry.userId === localId || entry.id === localId); var empty = !entry; var rowOpacity = empty ? 0.55 : 1; return ( '

' + '

' + rank + '

' + '

' + (empty ? '—' : nameOf(entry)) + '

' + '

' + (empty ? '—:——.——' : fmtTime(entry.bestTime)) + '

' + '

' ); } function levelTab({ level, label, selected, locked }) { var bg = selected ? INK : 'transparent'; var fg = selected ? PAPER : (locked ? INK_MUTE : INK); var border = selected ? INK : 'oklch(0.7 0.006 80)'; var onclick = locked ? '' : 'onclick="sendAction(\'selectLevel\', { level: ' + level + ' })"'; return ( '' ); } function renderMainMenu({ localPlayer, world }) { var s = (localPlayer && localPlayer.state) || {}; // Default to Level 1 (the new course cal is building). Level 2 is the // existing sanctum course. Both are selectable tabs. var selectedLevel = s.selectedLevel || 1; // Persisted board fetched by menu-controller.js — array of { userId, name, image, time }. var entries = Array.isArray(s.leaderboard) ? s.leaderboard.slice() : []; // Make sure the local player is visible even before their submit-callback round-trips. // The engine merges displayName/portraitUrl into localPlayer.state but NOT userId — // derive it from the entity id (player/c_). var localUid = null; if (s.userId) { localUid = s.userId; } else if (localPlayer && typeof localPlayer.id === 'string') { var rawId = localPlayer.id; if (rawId.indexOf('player/c_') === 0) localUid = rawId.slice('player/c_'.length); else if (rawId.indexOf('player/') === 0) localUid = rawId.slice('player/'.length); } // Personal best for the currently selected level — the leaderboard panel // shows that level's board, so the injected local row should match. var localBest = BEST_TIMES.bestFor(s, selectedLevel); if (localUid && localBest != null) { var have = false; for (var i = 0; i < entries.length; i++) { if (entries[i] && entries[i].userId === localUid) { if (entries[i].time == null || localBest < entries[i].time) { entries[i] = { userId: localUid, name: s.displayName || entries[i].name, image: s.portraitUrl || entries[i].image, time: localBest, }; } have = true; break; } } if (!have) { entries.push({ userId: localUid, name: s.displayName || null, image: s.portraitUrl || null, time: localBest, }); } } entries.sort(function (a, b) { return (a.time ?? Infinity) - (b.time ?? Infinity); }); // Normalize: ui rows treat .bestTime; keep it equivalent to .time. var normalized = entries.map(function (e) { return { userId: e.userId, name: e.name, image: e.image, bestTime: e.time != null ? e.time : e.bestTime, }; }); var first = normalized[0] || null; var second = normalized[1] || null; var third = normalized[2] || null; var rest = normalized.slice(3, 12); // 7 list rows past the podium → top 10 total (3 on the podium + 7 list rows). var ROW_COUNT = 7; var restRows = []; for (var i = 0; i < ROW_COUNT; i++) { restRows.push(rest[i] || null); } // Match against userId (persisted board key); fall back to entity id for old rows. var localId = localUid || (localPlayer && localPlayer.id); var podium = ( '

' + podiumSpot({ rank: 2, player: second, accent: SILVER, localId: localId }) + podiumSpot({ rank: 1, player: first, accent: GOLD, big: true, localId: localId }) + podiumSpot({ rank: 3, player: third, accent: BRONZE, localId: localId }) + '

' ); var listBody = ( '

' + restRows.map(function (e, i) { return listRow(e, i + 4, localId); }).join('') + '

' ); return ( '

' +
      RESPONSIVE.renderResponsiveStyle('.bf-ui') +
      // Corridor backdrop — untouched
      '
' +

      // Top-left: your personal "bodies hit the floor" count.
      '' +
        'Your body has hit
the floor
' +
        '
' +
        '' +
          (typeof s.myBodiesHitFloor === 'number' ? s.myBodiesHitFloor.toLocaleString() : '—') +
        '
' +
        'Times · lifetime
' +
      '
' +

      // Top-right: global "bodies that hit the floor" count.
      '' +
        'Bodies that hit
the floor
(All players)
' +
        '
' +
        '' +
          (typeof s.bodiesHitFloor === 'number' ? s.bodiesHitFloor.toLocaleString() : '—') +
        '
' +
        'All levels · lifetime
' +
      '
' +

      // Layout styles. The whole menu scales via --bf-scale (set by
      // ui-responsive media queries). Corner counters auto-hide when the
      // viewport gets too narrow to fit them alongside the leaderboard.
      '' +

      // Content column — tight vertical padding so the whole menu fits without scrolling on shorter displays
      '' +
        '' +

        // Level tabs — span the same width as the leaderboard centerpiece.
        '' +
          levelTab({ level: 1, label: 'Level 1', selected: selectedLevel === 1, locked: false }) +
          levelTab({ level: 2, label: 'Level 2', selected: selectedLevel === 2, locked: false }) +
          levelTab({ level: 3, label: 'Level 3', selected: selectedLevel === 3, locked: false }) +
        '
' +

        // Leaderboard + side rail — flex-wrap layout that stacks on narrow.
        '' +
          // Leaderboard card
          '' +
            // Card header
            '' +
              'Leaderboard
' +
              'Level ' + selectedLevel + '
' +
            '
' +

            podium +

            // List body
            '' + listBody + '
' +
          '
' +

          // Bodies counter stack — anchored to the right edge of the leaderboard on wide,
          // stacks below + side-by-side on medium, stacks vertically on narrow (see 

Spawn