From 006700d5b714b81f44ef283ae72106391e7126eb Mon Sep 17 00:00:00 2001
From: "Builder.io" <builder-bot@builder.io>
Date: Sat, 18 Oct 2025 23:54:09 +0000
Subject: [PATCH] Add GalaxyMap component with planet nodes and progress rings

cgen-739244e46cef4cf8a43258149fa4484d
---
 client/components/roadmap/GalaxyMap.tsx | 62 +++++++++++++++++++++++++
 1 file changed, 62 insertions(+)
 create mode 100644 client/components/roadmap/GalaxyMap.tsx

diff --git a/client/components/roadmap/GalaxyMap.tsx b/client/components/roadmap/GalaxyMap.tsx
new file mode 100644
index 00000000..fc0cfaa5
--- /dev/null
+++ b/client/components/roadmap/GalaxyMap.tsx
@@ -0,0 +1,62 @@
+import { Badge } from "@/components/ui/badge";
+import { cn } from "@/lib/utils";
+import { Rocket, Target, Flame, Sparkles, Waypoints } from "lucide-react";
+
+export interface PhaseSummary {
+  id: "now" | "month1" | "month2" | "month3";
+  label: string;
+  percent: number; // 0..100
+}
+
+export default function GalaxyMap({ phases, onSelect }: { phases: PhaseSummary[]; onSelect?: (id: PhaseSummary["id"]) => void }) {
+  const iconFor: Record<PhaseSummary["id"], any> = {
+    now: Target,
+    month1: Flame,
+    month2: Rocket,
+    month3: Sparkles,
+  };
+
+  return (
+    <div className="relative rounded-xl border border-border/40 bg-background/50 p-4 overflow-hidden">
+      <div className="pointer-events-none absolute inset-0 opacity-30" aria-hidden>
+        <svg className="h-full w-full" viewBox="0 0 800 240" preserveAspectRatio="none">
+          <defs>
+            <radialGradient id="g" cx="50%" cy="50%" r="50%">
+              <stop offset="0%" stopColor="rgba(99,102,241,0.35)" />
+              <stop offset="100%" stopColor="transparent" />
+            </radialGradient>
+          </defs>
+          <circle cx="120" cy="120" r="90" fill="url(#g)" />
+          <circle cx="400" cy="80" r="70" fill="url(#g)" />
+          <circle cx="680" cy="140" r="100" fill="url(#g)" />
+        </svg>
+      </div>
+
+      <div className="grid grid-cols-2 md:grid-cols-4 gap-4 relative">
+        {phases.map((p) => {
+          const Icon = iconFor[p.id];
+          return (
+            <button key={p.id} onClick={() => onSelect?.(p.id)} className="group relative rounded-xl border border-border/40 bg-background/60 p-4 backdrop-blur hover:border-aethex-400/50 transition">
+              <div className="flex items-center justify-between">
+                <div className="flex items-center gap-2">
+                  <Icon className="h-5 w-5 text-aethex-300" />
+                  <span className="font-semibold text-foreground">{p.label}</span>
+                </div>
+                <Badge variant="outline" className="text-xs">{p.percent}%</Badge>
+              </div>
+              <div className="mt-3 h-2 w-full rounded bg-border/50 overflow-hidden">
+                <div className={cn("h-full bg-gradient-to-r from-aethex-500 to-neon-blue transition-all" )} style={{ width: `${Math.max(0, Math.min(100, Math.round(p.percent))) }%` }} />
+              </div>
+              <div className="mt-2 text-xs text-muted-foreground">Tap to focus this phase</div>
+            </button>
+          );
+        })}
+      </div>
+
+      <div className="mt-3 flex items-center gap-2">
+        <Waypoints className="h-4 w-4 text-muted-foreground" />
+        <p className="text-xs text-muted-foreground">Planets represent phases. Progress fills as quests are claimed.</p>
+      </div>
+    </div>
+  );
+}