Skip to content

Commit f4d0edf

Browse files
GizmotronnGizmotronn
committed
🧑🏼‍🚀🍿 ↝ [SSG-88 SSG-89 SSM-69]: Merging projects' missions
1 parent 01f05ea commit f4d0edf

File tree

4 files changed

+177
-10
lines changed

4 files changed

+177
-10
lines changed

‎app/tests/page.tsx

+2-4
Original file line numberDiff line numberDiff line change
@@ -6,16 +6,14 @@ import { MiningComponentComponent } from "@/components/(scenes)/mining/mining-co
66
import Greenhouse from "@/page.test";
77
import BigMap from "@/components/(scenes)/planetScene/bigMap";
88
import DiscoveriesPage from "@/content/Classifications/minimalDiscoveries";
9-
import UserMissions from "./missionsUnlocked";
10-
import SimpleeMissionGuide from "./singleMissionGuide";
9+
import DailyMinorPlanetMissions from "@/components/Structures/Missions/Astronomers/DailyMinorPlanet";
1110
// import { TopographicMap } from "@/components/topographic-map";
1211

1312
export default function TestPage() {
1413
return (
1514
// <StarnetLayout>
1615
<>
17-
<UserMissions />
18-
<SimpleeMissionGuide />
16+
<DailyMinorPlanetMissions />
1917
{/* <Greenhouse /> */}
2018
{/* <BigMap /> */}
2119
{/* <DiscoveriesPage /> */}

‎components/Structures/Missions/Astronomers/DailyMinorPlanet.tsx

+40
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import { CheckIcon, RadioIcon, SpeakerIcon, TelescopeIcon } from "lucide-react";
2+
import MissionShell from "../BasePlate";
3+
4+
const DailyMinorPlanetMissions = () => {
5+
const missions = [
6+
{
7+
id: 1,
8+
title: "Make an asteroid classification",
9+
description: "Use your telescope to look for an asteroid candidate.",
10+
icon: TelescopeIcon,
11+
points: 2,
12+
internalComponent: () => <div>Asteroid classification component here</div>,
13+
color: "text-blue-500",
14+
action: () => {},
15+
completedCount: 10,
16+
},
17+
{
18+
id: 2,
19+
title: "Propose a Planet Type",
20+
description: "Make a comment proposing a planet type.",
21+
icon: RadioIcon,
22+
points: 1,
23+
internalComponent: () => <div>Planet type proposal component here</div>,
24+
color: "text-green-500",
25+
action: () => {},
26+
completedCount: 5,
27+
},
28+
];
29+
30+
return (
31+
<MissionShell
32+
missions={missions}
33+
experiencePoints={25}
34+
level={3}
35+
currentChapter={2}
36+
/>
37+
);
38+
};
39+
40+
export default DailyMinorPlanetMissions;

‎components/Structures/Missions/Astronomers/PlanetHunters/PlanetHunters.tsx

+29-6
Original file line numberDiff line numberDiff line change
@@ -179,7 +179,7 @@ const PlanetHuntersSteps = () => {
179179
<div className="flex-1 overflow-y-auto w-full h-screen flex flex-col">
180180
<div className="flex flex-col items-center bg-[#1D2833] text-white rounded-2xl shadow-lg p-8 flex-1">
181181
<button
182-
className="mb-4 px-5 py-2 bg-[#5FCBC3] text-[#1D2833] rounded-full hover:bg-opacity-90"
182+
className="mb-4 px-5 py-2 bg-[#1D2833] text-[#5FCBC3] rounded-full hover:bg-opacity-90"
183183
onClick={() => setSelectedMission(null)}
184184
>
185185
Back
@@ -216,8 +216,33 @@ const PlanetHuntersSteps = () => {
216216
Level {level} ({experiencePoints} points)
217217
</p>
218218

219-
<div className="grid gap-4 w-full">
220-
{steps.map((step) => (
219+
<div className="bg-gray-700 p-6 rounded-2xl w-full mb-6">
220+
<div className="grid grid-cols-2 gap-4 w-full">
221+
{[steps[0], steps[1]].map((step) => (
222+
<div
223+
key={step.id}
224+
className={`flex items-center p-6 rounded-2xl cursor-pointer ${
225+
step.completedCount > 0 ? "bg-gray-700" : "bg-blue-500"
226+
}`}
227+
onClick={() => setSelectedMission(step)}
228+
>
229+
<step.icon className={`h-10 w-10 ${step.color}`} />
230+
<div className="ml-4">
231+
<h2 className={`text-lg font-bold ${step.color}`}>{step.title}</h2>
232+
<p className={`text-sm ${step.color}`}>{step.description}</p>
233+
</div>
234+
<div className="ml-auto text-right">
235+
<p className="text-xs">Completed</p>
236+
<p className="text-xl font-bold">{step.completedCount}</p>
237+
</div>
238+
</div>
239+
))}
240+
</div>
241+
</div>
242+
243+
{/* Mission 3 & Mission 4 below */}
244+
<div className="grid gap-4 w-full mt-6">
245+
{[steps[2], steps[3]].map((step) => (
221246
<div
222247
key={step.id}
223248
className={`flex items-center p-6 rounded-2xl shadow-md cursor-pointer ${
@@ -227,9 +252,7 @@ const PlanetHuntersSteps = () => {
227252
>
228253
<step.icon className={`h-10 w-10 ${step.color}`} />
229254
<div className="ml-4">
230-
<h2 className={`text-lg font-bold ${step.color}`}>
231-
{step.title}
232-
</h2>
255+
<h2 className={`text-lg font-bold ${step.color}`}>{step.title}</h2>
233256
<p className={`text-sm ${step.color}`}>{step.description}</p>
234257
</div>
235258
<div className="ml-auto text-right">

‎components/Structures/Missions/BasePlate.tsx

+106
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
1+
import { useState } from "react";
2+
import { Button } from "@/components/ui/button";
3+
import { Card, CardContent } from "@/components/ui/card";
4+
import { motion } from "framer-motion";
5+
import { AnimatePresence } from "framer-motion";
6+
7+
interface MissionConfig {
8+
id: number;
9+
title: string;
10+
description: string;
11+
icon: React.ElementType;
12+
points: number;
13+
internalComponent: React.ElementType;
14+
color: string;
15+
action: () => void;
16+
completedCount: number;
17+
};
18+
19+
interface MissionShellProps {
20+
missions: MissionConfig[];
21+
experiencePoints: number;
22+
level: number;
23+
currentChapter: number;
24+
};
25+
26+
const MissionShell = ({ missions, experiencePoints, level, currentChapter }: MissionShellProps) => {
27+
const [selectedMission, setSelectedMission] = useState<MissionConfig | null>(null);
28+
29+
const renderMission = (mission: MissionConfig) => {
30+
return (
31+
<div
32+
key={mission.id}
33+
className={`flex items-center p-6 rounded-2xl cursor-pointer shadow-md ${
34+
mission.completedCount > 0 ? "bg-gray-700" : "bg-blue-500"
35+
}`}
36+
onClick={() => setSelectedMission(mission)}
37+
>
38+
<mission.icon className={`w-10 h-10 ${mission.color}`} />
39+
<div className="ml-4">
40+
<h2 className={`text-lg font-bold ${mission.color}`}>{mission.title}</h2>
41+
<p className={`text-sm ${mission.color}`}>{mission.description}</p>
42+
<p className={`text-sm ${mission.color}`}>Points: {mission.points}</p>
43+
</div>
44+
<div className="ml-auto text-right">
45+
<p className="text-xs">Completed: {mission.completedCount}</p>
46+
<p className="text-xl font-bold">{mission.completedCount}</p>
47+
</div>
48+
</div>
49+
);
50+
};
51+
52+
return (
53+
<div className="flex flex-col items-center bg-[#1D2833] text-white rounded-2xl shadow-lg p-6 w-full max-w-4xl mx-auto">
54+
<div className="flex justify-between w-full mb-6">
55+
<h1 className="text-xl font-bold">Chapter {currentChapter}</h1>
56+
</div>
57+
58+
<div className="flex-1 overflow-y-auto w-full">
59+
<div className="w-full bg-gray-700 rounded-full h-4 mb-6">
60+
<div
61+
className="bg-[#5FCBC3] h-4 rounded-full"
62+
style={{ width: `${(experiencePoints % 9) * 10.5}%` }}
63+
></div>
64+
</div>
65+
</div>
66+
<p className="text-sm text-center mb-6">
67+
Level {level} ({experiencePoints} points)
68+
</p>
69+
70+
<div className="bg-gray-700 p-6 rounded-2xl w-full mb-6">
71+
<div className="grid grid-cols-2 gap-4 w-full">
72+
{missions.slice(0, 2).map((mission) => renderMission(mission))}
73+
</div>
74+
</div>
75+
76+
{/* Mission 3 & Mission 4 below */}
77+
<div className="grid gap-4 w-full mt-6">
78+
{missions.slice(2, 4).map((mission) => renderMission(mission))}
79+
</div>
80+
81+
<AnimatePresence>
82+
{selectedMission && (
83+
<motion.div
84+
className="fixed inset-0 flex justify-center items-center bg-black bg-opacity-50"
85+
initial={{ opacity: 0, y: -10 }}
86+
animate={{ opacity: 1, y: 0 }}
87+
exit={{ opacity: 0, y: -10 }}
88+
>
89+
<div className="bg-[#2C4F64] p-6 rounded-lg max-w-md w-full">
90+
<h3 className="text-xl font-semibold mb-2">{selectedMission.title}</h3>
91+
<p>{selectedMission.description}</p>
92+
<div className="mt-4">
93+
{selectedMission.internalComponent && <selectedMission.internalComponent />}
94+
</div>
95+
<Button onClick={() => setSelectedMission(null)} className="mt-4">
96+
Close
97+
</Button>
98+
</div>
99+
</motion.div>
100+
)}
101+
</AnimatePresence>
102+
</div>
103+
);
104+
};
105+
106+
export default MissionShell;

0 commit comments

Comments
 (0)