// Racing HUD — Need for Speed / Gran Turismo inspired // Angular dark panels, orange/amber glow accents, sporty aggressive aesthetic const TOTAL_LAPS = 3; function fmt(seconds) { if (seconds == null || seconds <= 0) return '0:00.00'; const m = Math.floor(seconds / 60); const s = seconds % 60; const sInt = Math.floor(s); const ms = Math.floor((s - sInt) * 100); return m + ':' + (sInt < 10 ? '0' : '') + sInt + '.' + (ms < 10 ? '0' : '') + ms; } function ordinal(n) { if (n === 1) return { num: '1', suf: 'ST' }; if (n === 2) return { num: '2', suf: 'ND' }; if (n === 3) return { num: '3', suf: 'RD' }; return { num: String(n), suf: 'TH' }; } function posColor(n) { if (n === 1) return '#fbbf24'; // gold if (n === 2) return '#c0c0c0'; // silver if (n === 3) return '#cd7f32'; // bronze return '#e2e8f0'; // white-ish } export default function(localPlayer, world) { const st = localPlayer.state; const speed = Math.round((st.speed ?? 0) * 3.6); const gear = st.gear ?? 1; const rpm = Math.round(st.rpm ?? 900); const lap = Math.min((st.lap ?? 0) + 1, TOTAL_LAPS); const raceTime = st.raceTime ?? 0; const lapTime = st.currentLapTime ?? 0; const finished = st.finished === true; const rawPos = st.position; const pos = (typeof rawPos === 'number' && rawPos >= 1 && rawPos <= 4) ? rawPos : 1; const ord = ordinal(pos); const pColor = posColor(pos); const rm1 = world.getObject('race-manager'); const rm2 = world.getObject('t2-race-manager'); // Pick the race manager that's actively running a race (not in "menu" phase). // The player can only be racing on one track at a time, so at most one will be non-menu. const rm = (rm2?.state?.phase && rm2.state.phase !== 'menu') ? rm2 : (rm1?.state?.phase && rm1.state.phase !== 'menu') ? rm1 : (rm1 || rm2); const phase = rm?.state?.phase ?? 'menu'; const light = rm?.state?.light ?? 'off'; // Detect which track is active based on which manager is running const currentTrackId = (rm === rm2) ? 'track2' : 'track1'; // ─── Styles ─── const styles = ` `; // ─── Menu Screen (phase === "menu") ─── const menuScreen = `

CANYON

CIRCUIT

SELECT YOUR TRACK

3 LAPS • 4 RACERS • ONE WINNER

`; // ─── Traffic Light (phase === "countdown") ─── const redOn = '#ef4444'; const greenOn = '#22c55e'; const circleOff = '#1f2937'; const isGreen = light === 'green'; const topOn = light === 'red1' || light === 'red2' || light === 'red3' || isGreen; const midOn = light === 'red2' || light === 'red3' || isGreen; const botOn = light === 'red3' || isGreen; const topColor = topOn ? (isGreen ? greenOn : redOn) : circleOff; const midColor = midOn ? (isGreen ? greenOn : redOn) : circleOff; const botColor = botOn ? (isGreen ? greenOn : redOn) : circleOff; const topShadow = topOn ? (isGreen ? '0 0 16px 4px rgba(34,197,94,0.6)' : '0 0 16px 4px rgba(239,68,68,0.6)') : 'none'; const midShadow = midOn ? (isGreen ? '0 0 16px 4px rgba(34,197,94,0.6)' : '0 0 16px 4px rgba(239,68,68,0.6)') : 'none'; const botShadow = botOn ? (isGreen ? '0 0 16px 4px rgba(34,197,94,0.6)' : '0 0 16px 4px rgba(239,68,68,0.6)') : 'none'; const greenClass = isGreen ? 'green-glow' : ''; const trafficLight = `

`; // ─── Speedometer (bottom-right) ─── const rpmPct = Math.min((rpm - 900) / (7800 - 900) * 100, 100); const rpmHigh = rpm > 6500; const rpmColor = rpmHigh ? '#ef4444' : '#f97316'; const speedo = `

${speed}

${gear}

KM/H GEAR

1 ${(rpm / 1000).toFixed(1)}k 8

`; // ─── Race leaderboard (top-left) ─── const CAR_COLORS = { 'ai-car-1': '#60a5fa', // blue 'ai-car-2': '#f87171', // red 'ai-car-3': '#4ade80', // green }; const racers = world.query({ tags: ['racer'] }); const racerRows = racers.map(r => { const rs = r.state || {}; const name = rs.driverName || '???'; const rLap = Math.min((rs.lap || 0) + 1, TOTAL_LAPS); const rCp = rs.checkpoint || 0; const rPos = (typeof rs.position === 'number' && rs.position >= 1) ? rs.position : '-'; const isPlayer = r.tags.includes('player'); const color = isPlayer ? '#f97316' : (CAR_COLORS[r.id] || '#e2e8f0'); const rFinished = rs.finished === true; const raceTime = rs.raceTime ?? 0; const currentLapTime = rs.currentLapTime ?? 0; const wpIdx = rs.waypointIndex ?? 0; const progressScore = (rs.lap || 0) * 10000 + rCp * 1000 + wpIdx * 10; const score = (rFinished ? 999999 : 0) + progressScore; return { name, rLap, rCp, rPos, color, isPlayer, score, rFinished, raceTime, currentLapTime, progressScore }; }); racerRows.sort((a, b) => b.score - a.score); const leaderboardRows = racerRows.map((r, i) => { const posNum = i + 1; const pCol = posColor(posNum); const highlight = r.isPlayer ? 'border-l-2 border-orange-500' : ''; const nameWeight = r.isPlayer ? 'font-black' : 'font-bold'; const finTag = r.rFinished ? '✓' : ''; // F1-style timing: leader shows race time, others show gap const timeStr = r.raceTime > 0 ? fmt(r.raceTime) : '—'; let gapStr = ''; if (i > 0 && racerRows[0].raceTime > 0) { if (r.rFinished && racerRows[0].rFinished) { // Both finished — show actual time gap gapStr = '+' + (r.raceTime - racerRows[0].raceTime).toFixed(1) + 's'; } else if (r.rFinished || racerRows[0].rFinished) { // One finished, one not — show lap difference const lapDiff = racerRows[0].rLap - r.rLap; gapStr = lapDiff > 0 ? '+' + lapDiff + ' lap' + (lapDiff > 1 ? 's' : '') : ''; } else { // Both racing — estimate gap from progress difference const progDiff = racerRows[0].progressScore - r.progressScore; if (progDiff > 0 && racerRows[0].progressScore > 0) { // Estimate: how many seconds does it take the leader to cover this gap const leaderPace = racerRows[0].raceTime / Math.max(racerRows[0].progressScore, 1); const estGap = leaderPace * progDiff; gapStr = estGap >= 0.5 ? '+' + estGap.toFixed(1) + 's' : '+0.' + Math.max(1, Math.round(estGap * 10)) + 's'; } else { gapStr = '+0.0s'; } } } const lapStr = 'L' + r.rLap; return `

${posNum}

${r.name}${finTag}

${i === 0 ? timeStr : gapStr || timeStr} ${lapStr}

`; }).join(''); const position = `

STANDINGS ${fmt(raceTime)}

${leaderboardRows}

`; // ─── Lap counter (bottom-left) ─── const lapCounter = `

LAP ${lap}/${TOTAL_LAPS}

${fmt(lapTime)}

`; // ─── Race time + restart button (top-right) ─── const raceTimer = `

RACE TIME

${fmt(raceTime)}

`; // ─── Finish banner (center) ─── const finishBanner = `

FINISH!

FINAL TIME ${fmt(raceTime)}

${ord.num} ${ord.suf} PLACE

`; // ─── Speed bar indicator (bottom-right, below speedometer) ─── const speedPct = Math.min(speed / 126, 1) * 100; // 126 km/h = max speed from config const speedBar = `

`; // ─── HUD elements (reused across phases) ─── const hud = `${speedo}${speedBar}${position}${lapCounter}${raceTimer}`; // ─── Race Complete banner (top, temporary during "finishing" phase) ─── const raceCompleteBanner = `

RACE COMPLETE!

${fmt(raceTime)}

`; // ─── Phase-based composition ─── if (phase === 'menu') { return `

${styles} ${menuScreen}

`; } if (phase === 'countdown') { return `

${styles} ${hud} ${trafficLight}

`; } if (phase === 'finishing') { return `

${styles} ${hud} ${raceCompleteBanner}

`; } if (phase === 'finished' || finished) { return `

${styles} ${hud} ${finishBanner}

`; } // Default: "racing" or any other phase — just HUD return `

${styles} ${hud}

`; }

Spawn