jason/stellar
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Implement M1 Matter.js absorber loop
Some checks failed
CI / validate (push) Has been cancelled
Details

Browse Source
This commit is contained in:
jason
2026-03-22 23:57:14 -05:00
parent 177be6332b
commit fde065d7ef
13 changed files with 479 additions and 96 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
client/src/components/Hud.tsx
View File

@@ -1,33 +1,47 @@
import { type GameState } from "../game/types";
const objectives = [
"Bootstrap Matter.js world",
"Wire player state to the API",
"Start M1 absorber loop"
"Reach mass 40 to stabilize your pull",
"Keep sweeping the field to chain dust pickups",
"Persist profile data in M3"
];
export function Hud() {
interface HudProps {
gameState: GameState;
}
export function Hud({ gameState }: HudProps) {
return (
<aside className="rounded-3xl border border-white/10 bg-white/5 p-5 shadow-2xl shadow-cyan-950/30 backdrop-blur">
<div className="mb-6">
<p className="text-xs uppercase tracking-[0.3em] text-glow/70">Mission Board</p>
<h2 className="mt-2 text-2xl font-semibold text-white">Boot Sequence</h2>
<h2 className="mt-2 text-2xl font-semibold text-white">Sector Absorption</h2>
</div>
<dl className="grid grid-cols-2 gap-3 text-sm">
<div className="rounded-2xl bg-black/20 p-3">
<dt className="text-slate-400">Mass</dt>
<dd className="mt-1 text-xl font-semibold">12</dd>
<dd className="mt-1 text-xl font-semibold">{gameState.mass.toFixed(0)}</dd>
</div>
<div className="rounded-2xl bg-black/20 p-3">
<dt className="text-slate-400">Tier</dt>
<dd className="mt-1 text-xl font-semibold">Dustling</dd>
<dd className="mt-1 text-xl font-semibold">{gameState.tier}</dd>
</div>
<div className="rounded-2xl bg-black/20 p-3">
<dt className="text-slate-400">Pull Radius</dt>
<dd className="mt-1 text-xl font-semibold">48m</dd>
<dd className="mt-1 text-xl font-semibold">{gameState.pullRadius.toFixed(0)}m</dd>
</div>
<div className="rounded-2xl bg-black/20 p-3">
<dt className="text-slate-400">Mode</dt>
<dd className="mt-1 text-xl font-semibold">Sandbox</dd>
<dt className="text-slate-400">FPS</dt>
<dd className="mt-1 text-xl font-semibold">{gameState.fps.toFixed(0)}</dd>
</div>
<div className="rounded-2xl bg-black/20 p-3">
<dt className="text-slate-400">Consumed</dt>
<dd className="mt-1 text-xl font-semibold">{gameState.consumedDust}</dd>
</div>
<div className="rounded-2xl bg-black/20 p-3">
<dt className="text-slate-400">Dust Left</dt>
<dd className="mt-1 text-xl font-semibold">{gameState.dustRemaining}</dd>
</div>
</dl>
@@ -44,4 +58,3 @@ export function Hud() {
</aside>
);
}