Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/apursley2012/player-one/llms.txt

Use this file to discover all available pages before exploring further.

The HUD component mimics the persistent status bar found on classic arcade cabinets. It sits at the very top of the viewport as a fixed, non-interactive overlay, displaying a collection of game-style readouts — player tag, score, credits, a coin prompt, and a live clock — all set in the font-pixel typeface (Press Start 2P). Because it carries pointer-events-none, it never intercepts clicks intended for content below.

​
Visual Layout

The HUD is divided into two horizontal groups anchored to the left and right edges of the top bar.

​
Left Group

ElementValueColor
Terminal icon + labelPLAYER_1Lime (#a3ff12)
Score readoutSCORE: 999999Cyan (#00ffff)

​
Right Group

ElementValueColor
Insert promptINSERT COINMagenta (#ff00aa), pulsing
Coins icon + creditsCREDITS: 0Orange (#ff6600)
Live clockHH:MM:SS (24 h)Lime, opacity-50

​
Usage

import HUD from "./components/HUD";

// Render once in the root layout — no props required.
export default function Layout({ children }) {
  return (
    <>
      <HUD />
      <main>{children}</main>
    </>
  );
}
The HUD has no props. All values (player name, score, credits) are hard-coded display constants. Only the clock is dynamic.

​
Live Clock Behavior

The clock is the HUD’s sole reactive element. On mount, a useState hook captures new Date() as the initial value, and a setInterval fires every 1 000 ms to replace it with a fresh Date object. The interval is cleared in the useEffect cleanup function to prevent memory leaks on unmount. Time is formatted with: 
date.toLocaleTimeString('en-US', { hour12: false });
// → "14:07:42"
The hour12: false option forces 24-hour notation regardless of the user’s locale settings, keeping the display consistent across all environments. 
import { useState, useEffect } from "react";

const [time, setTime] = useState(new Date());

useEffect(() => {
  const id = setInterval(() => setTime(new Date()), 1000);
  return () => clearInterval(id);
}, []);

const display = time.toLocaleTimeString("en-US", { hour12: false });

​
Implementation Notes

import { useState, useEffect } from "react";
import { Terminal, Coins } from "lucide-react";

export default function HUD() {
  const [time, setTime] = useState(new Date());

  useEffect(() => {
    const id = setInterval(() => setTime(new Date()), 1000);
    return () => clearInterval(id);
  }, []);

  return (
    <div className="fixed top-0 left-0 right-0 z-50 pointer-events-none px-4 py-3 flex justify-between items-center">
      {/* Left */}
      <div className="flex flex-col gap-1">
        <span className="font-pixel text-lime flex items-center gap-2 text-xs">
          <Terminal size={12} /> PLAYER_1
        </span>
        <span className="font-pixel text-cyan text-xs">SCORE: 999999</span>
      </div>

      {/* Right */}
      <div className="flex flex-col gap-1 items-end">
        <span className="font-pixel text-magenta text-xs animate-pulse">
          INSERT COIN
        </span>
        <span className="font-pixel text-orange text-xs flex items-center gap-2">
          <Coins size={12} /> CREDITS: 0
        </span>
        <span className="font-pixel text-lime text-xs opacity-50">{display}</span>
      </div>
    </div>
  );
}
The HUD’s z-50 stacking context places it above most page content but below the Navigation modal (z-[100]), so the stage-select overlay correctly covers the HUD when open.
Do not remove the pointer-events-none class. Without it, the HUD bar would block clicks on any interactive elements positioned near the top of the viewport, including navigation anchors and hero CTAs.

​
Where It’s Used

HUD is rendered once in the root layout component, alongside CRTOverlay and Navigation, so it persists on every page without re-mounting during client-side route transitions. The pt-24 padding applied by PageTransition ensures page content begins below the HUD’s height.

Build docs developers (and LLMs) love

Get started for freeTalk to us