AeThex-Corporation/aethex-forge
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Remove themes from Roadmap and add interactive Timeline

Browse source 
cgen-896e497728124ba5aeca8df2db003aa5
This commit is contained in:
Builder.io 2025-10-19 00:01:46 +00:00
parent 24fc10542a
commit c1bbbe646d
1 changed files with 6 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
client/pages/Roadmap.tsx
View file

@ -5,7 +5,7 @@ import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/com
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
import { useEffect, useMemo, useState } from "react"; import { useEffect, useMemo, useState } from "react";
import { Sparkles, Lock, Gift, Rocket, Target, Flame, Eye, CheckCircle2, TimerReset } from "lucide-react"; import { Sparkles, Lock, Gift, Rocket, Target, Flame, Eye, CheckCircle2, TimerReset } from "lucide-react";
import ThemeToggle, { type RoadmapTheme } from "@/components/roadmap/ThemeToggle"; import Timeline from "@/components/roadmap/Timeline";
import GalaxyMap from "@/components/roadmap/GalaxyMap"; import GalaxyMap from "@/components/roadmap/GalaxyMap";
import Achievements from "@/components/roadmap/Achievements"; import Achievements from "@/components/roadmap/Achievements";
import VoteWidget from "@/components/roadmap/VoteWidget"; import VoteWidget from "@/components/roadmap/VoteWidget";
@ -73,7 +73,6 @@ const storageKey = "aethex_roadmap_unlocks_v1";
export default function Roadmap() { export default function Roadmap() {
const [claimed, setClaimed] = useState<Record<string, boolean>>({}); const [claimed, setClaimed] = useState<Record<string, boolean>>({});
const [unlocked, setUnlocked] = useState<Record<string, boolean>>({}); const [unlocked, setUnlocked] = useState<Record<string, boolean>>({});
const [theme, setTheme] = useState<RoadmapTheme>("space");
const [focusedPhase, setFocusedPhase] = useState<Quest["phase"] | null>(null); const [focusedPhase, setFocusedPhase] = useState<Quest["phase"] | null>(null);
useEffect(() => { useEffect(() => {
@ -162,7 +161,6 @@ export default function Roadmap() {
<section className="container mx-auto px-4 pb-6"> <section className="container mx-auto px-4 pb-6">
<div className="grid gap-3 md:grid-cols-[1fr_1fr]"> <div className="grid gap-3 md:grid-cols-[1fr_1fr]">
<ThemeToggle value={theme} onChange={setTheme} />
<GalaxyMap <GalaxyMap
phases={["now","month1","month2","month3"].map((id) => ({ phases={["now","month1","month2","month3"].map((id) => ({
id: id as Quest["phase"], id: id as Quest["phase"],
@ -171,6 +169,11 @@ export default function Roadmap() {
}))} }))}
onSelect={(id) => setFocusedPhase(id)} onSelect={(id) => setFocusedPhase(id)}
/> />
<Timeline
events={QUESTS.map((q) => ({ id: q.id, title: q.title, phase: q.phase, xp: q.xp, claimed: !!claimed[q.id] }))}
onSelectPhase={(p) => setFocusedPhase(p)}
onToggleClaim={(id) => toggleClaim(id)}
/>
</div> </div>
</section> </section>