Skip to content

Commit 0f6b300

Browse files
GizmotronnGizmotronn
committed
📑🛕 ↝ [SSC-56 SSC-58 SSC-59]: CoM C1 mission points calculator working & integrating generator + new ideas
1 parent 65f962d commit 0f6b300

File tree

5 files changed

+628
-229
lines changed

5 files changed

+628
-229
lines changed

‎components/Structures/Missions/BasePlate.tsx‎

Lines changed: 59 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -67,77 +67,74 @@ const MissionShell = ({
6767
);
6868
};
6969

70-
// Calculate points needed for next chapter
7170
const pointsForNextChapter = currentChapter * 9;
7271

7372
return (
74-
<div className="flex flex-col items-center bg-[#1D2833] text-white rounded-2xl shadow-lg p-6 w-full max-w-4xl mx-auto">
75-
{!selectedMission && (
76-
<>
77-
<div className="flex justify-between items-center w-full mb-6">
78-
<h1 className="text-xl font-bold">Chapter {currentChapter}</h1>
79-
<div className="flex space-x-4">
80-
<Button onClick={onPreviousChapter} disabled={currentChapter === 1}>
81-
Previous
82-
</Button>
83-
<Button
84-
onClick={onNextChapter}
85-
disabled={currentChapter === maxUnlockedChapter || experiencePoints < pointsForNextChapter}
86-
>
87-
Next
88-
</Button>
89-
</div>
90-
</div>
91-
<div className="flex-1 overflow-y-auto w-full">
92-
<div className="w-full bg-gray-700 rounded-full h-4 mb-6">
93-
<div
94-
className="bg-[#5FCBC3] h-4 rounded-full"
95-
style={{ width: `${(experiencePoints % 9) * 10.5}%` }}
96-
></div>
97-
</div>
98-
</div>
99-
<p className="text-sm text-center mb-6">
100-
Level {level} ({experiencePoints} points)
101-
</p>
102-
{/* Chapter 1: First two missions in a row, the rest in a column */}
103-
{currentChapter === 1 ? (
73+
<div className="flex flex-col items-center bg-[#1D2833] text-white rounded-2xl shadow-lg p-6 w-full max-w-4xl mx-auto">
74+
{!selectedMission && (
10475
<>
105-
<div className="bg-gray-700 p-6 rounded-2xl w-full mb-6">
106-
<div className="grid grid-cols-2 gap-4 w-full">
107-
{missions.slice(0, 2).map((mission) => renderMission(mission))}
76+
<div className="flex justify-between items-center w-full mb-6">
77+
<h1 className="text-xl font-bold">Chapter {currentChapter}</h1>
78+
<div className="flex space-x-4">
79+
<Button onClick={onPreviousChapter} disabled={currentChapter === 1}>
80+
Previous
81+
</Button>
82+
<Button
83+
onClick={onNextChapter}
84+
disabled={currentChapter === maxUnlockedChapter || experiencePoints < pointsForNextChapter}
85+
>
86+
Next
87+
</Button>
10888
</div>
10989
</div>
110-
<div className="grid gap-4 w-full mt-6 overflow-y-auto max-h-[calc(100vh-200px)]">
111-
{missions.slice(2).map((mission) => renderMission(mission))}
90+
<div className="flex-1 overflow-y-auto w-full">
91+
<div className="w-full bg-gray-700 rounded-full h-4 mb-6">
92+
<div
93+
className="bg-[#5FCBC3] h-4 rounded-full"
94+
style={{ width: `${(experiencePoints % 9) * 10.5}%` }}
95+
></div>
96+
</div>
11297
</div>
98+
<p className="text-sm text-center mb-6">
99+
Level {level} ({experiencePoints} points)
100+
</p>
101+
{currentChapter === 1 ? (
102+
<>
103+
<div className="bg-gray-700 p-6 rounded-2xl w-full mb-6">
104+
<div className="grid grid-cols-2 gap-4 w-full">
105+
{missions.slice(0, 2).map((mission) => renderMission(mission))}
106+
</div>
107+
</div>
108+
<div className="grid gap-4 w-full mt-6 overflow-y-auto max-h-[calc(100vh-200px)]">
109+
{missions.slice(2).map((mission) => renderMission(mission))}
110+
</div>
111+
</>
112+
) : (
113+
<div className="grid gap-4 w-full mt-6 overflow-y-auto max-h-[calc(100vh-200px)]">
114+
{missions.map((mission) => renderMission(mission))}
115+
</div>
116+
)}
113117
</>
114-
) : (
115-
// For other chapters, all missions in a single column
116-
<div className="grid gap-4 w-full mt-6 overflow-y-auto max-h-[calc(100vh-200px)]">
117-
{missions.map((mission) => renderMission(mission))}
118-
</div>
119118
)}
120-
</>
121-
)}
122-
<AnimatePresence>
123-
{selectedMission && (
124-
<motion.div
125-
className="flex flex-col bg-[#1D2833]"
126-
initial={{ opacity: 0 }}
127-
animate={{ opacity: 1 }}
128-
exit={{ opacity: 0 }}
129-
>
130-
<div className="flex justify-between items-center p-4">
131-
<h3 className="text-xl font-semibold">{selectedMission.title}</h3>
132-
<Button onClick={() => setSelectedMission(null)}>Back</Button>
133-
</div>
134-
<div className="flex-1 overflow-auto">
135-
{selectedMission.internalComponent && <selectedMission.internalComponent />}
136-
</div>
137-
</motion.div>
138-
)}
139-
</AnimatePresence>
140-
</div>
119+
<AnimatePresence>
120+
{selectedMission && (
121+
<motion.div
122+
className="flex flex-col bg-[#1D2833]"
123+
initial={{ opacity: 0 }}
124+
animate={{ opacity: 1 }}
125+
exit={{ opacity: 0 }}
126+
>
127+
<div className="flex justify-between items-center p-4">
128+
<h3 className="text-xl font-semibold">{selectedMission.title}</h3>
129+
<Button onClick={() => setSelectedMission(null)}>Back</Button>
130+
</div>
131+
<div className="flex-1 overflow-auto">
132+
{selectedMission.internalComponent && <selectedMission.internalComponent />}
133+
</div>
134+
</motion.div>
135+
)}
136+
</AnimatePresence>
137+
</div>
141138
);
142139
};
143140

0 commit comments

Comments
 (0)