M0

client/src/components/Hud.tsx

@@ -0,0 +1,47 @@
+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>
+  );
+}
+