48 lines
1.7 KiB
TypeScript
48 lines
1.7 KiB
TypeScript
|
const objectives = [
|
||
|
|
"Bootstrap Matter.js world",
|
||
|
|
"Wire player state to the API",
|
||
|
|
"Start M1 absorber loop"
|
||
|
|
];
|
||
|
|
|
||
|
|
export function Hud() {
|
||
|
|
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>
|
||
|
|
</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>
|
||
|
|
</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>
|
||
|
|
</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>
|
||
|
|
</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>
|
||
|
|
</div>
|
||
|
|
</dl>
|
||
|
|
|
||
|
|
<div className="mt-6">
|
||
|
|
<p className="text-xs uppercase tracking-[0.3em] text-amber-300/70">Next Steps</p>
|
||
|
|
<ul className="mt-3 space-y-3 text-sm text-slate-200">
|
||
|
|
{objectives.map((objective) => (
|
||
|
|
<li key={objective} className="rounded-2xl border border-white/10 bg-black/20 px-4 py-3">
|
||
|
|
{objective}
|
||
|
|
</li>
|
||
|
|
))}
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</aside>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|