Skip to content

Commit dee0d11

Browse files
GizmotronnGizmotronn
committed
👨🏼‍✈️🛻 ↝ [SSP-39 SSP-42]: Making some updates to 'create cards'
1 parent 456666e commit dee0d11

File tree

5 files changed

+235
-109
lines changed

5 files changed

+235
-109
lines changed

‎components/Structures/IndividualStructure.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -216,7 +216,7 @@ const IndividualStructure: React.FC<IndividualStructureProps> = ({
216216
className={`p-4 rounded-3xl text-white mx-auto
217217
w-[90%] h-[90%] max-w-full max-h-[95%] fixed top-1/2 left-1/2
218218
transform -translate-x-1/2 -translate-y-1/2
219-
overflow-hidden bg-[#1D2833]/90`}
219+
overflow-y-auto bg-[#1D2833]/90`}
220220
>
221221
<DialogTitle></DialogTitle>
222222
<div className="relative flex flex-col items-center justify-center h-full">

‎components/Structures/Missions/BasePlate.tsx‎

Lines changed: 13 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ interface MissionConfig {
1313
color: string;
1414
action: () => void;
1515
completedCount?: number;
16-
};
16+
}
1717

1818
interface MissionShellProps {
1919
missions: MissionConfig[];
@@ -23,7 +23,7 @@ interface MissionShellProps {
2323
maxUnlockedChapter: number;
2424
onPreviousChapter: () => void;
2525
onNextChapter: () => void;
26-
};
26+
}
2727

2828
const MissionShell = ({
2929
missions,
@@ -87,13 +87,11 @@ const MissionShell = ({
8787
</Button>
8888
</div>
8989
</div>
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>
90+
<div className="w-full bg-gray-700 rounded-full h-4 mb-6">
91+
<div
92+
className="bg-[#5FCBC3] h-4 rounded-full"
93+
style={{ width: `${(experiencePoints % 9) * 10.5}%` }}
94+
></div>
9795
</div>
9896
<p className="text-sm text-center mb-6">
9997
Level {level} ({experiencePoints} points)
@@ -119,16 +117,16 @@ const MissionShell = ({
119117
<AnimatePresence>
120118
{selectedMission && (
121119
<motion.div
122-
className="flex flex-col bg-[#1D2833]"
123-
initial={{ opacity: 0 }}
124-
animate={{ opacity: 1 }}
125-
exit={{ opacity: 0 }}
120+
className="flex flex-col bg-[#1D2833] rounded-2xl p-6 w-full max-w-4xl mx-auto"
121+
initial={{ opacity: 0, scale: 0.95 }}
122+
animate={{ opacity: 1, scale: 1 }}
123+
exit={{ opacity: 0, scale: 0.95 }}
126124
>
127-
<div className="flex justify-between items-center p-4">
125+
<div className="flex justify-between items-center mb-4">
128126
<h3 className="text-xl font-semibold">{selectedMission.title}</h3>
129127
<Button onClick={() => setSelectedMission(null)}>Back</Button>
130128
</div>
131-
<div className="flex-1 overflow-auto">
129+
<div className="flex-1 overflow-y-auto max-h-[calc(100vh-150px)]">
132130
{selectedMission.internalComponent && <selectedMission.internalComponent />}
133131
</div>
134132
</motion.div>

‎components/Structures/Missions/Meteorologists/Cloudspotting/CloudMaker.tsx‎

Lines changed: 72 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
import React, { useEffect, useState } from "react";
44
import { PostCardSingleWithGenerator } from "@/content/Posts/PostWithGen";
55
import { useSession, useSupabaseClient } from "@supabase/auth-helpers-react";
6+
import CloudSignal from "./CloudSignal";
67

78
interface Classification {
89
id: number;
@@ -18,82 +19,82 @@ interface Classification {
1819
export default function CloudClassificationGenerator() {
1920
const supabase = useSupabaseClient();
2021
const session = useSession();
21-
22+
2223
const [classifications, setClassifications] = useState<any[]>([]);
2324
const [loading, setLoading] = useState<boolean>(true);
2425
const [error, setError] = useState<string | null>(null);
25-
26+
2627
const fetchClassifications = async () => {
27-
if (!session?.user) {
28-
setError("User session not found.");
29-
setLoading(false);
30-
return;
31-
};
32-
33-
setLoading(true);
34-
setError(null);
35-
try {
36-
const { data, error } = await supabase
37-
.from('classifications')
38-
.select('*')
39-
.eq("author", session.user.id)
40-
.eq('classificationtype', 'cloud')
41-
.order('created_at', { ascending: false }) as { data: Classification[]; error: any };
42-
43-
if (error) throw error;
44-
45-
const processedData = data.map((classification) => {
46-
const media = classification.media;
47-
let images: string[] = [];
48-
49-
if (Array.isArray(media) && media.length === 2 && typeof media[1] === "string") {
50-
images.push(media[1]);
51-
} else if (media && media.uploadUrl) {
52-
images.push(media.uploadUrl);
53-
}
54-
55-
const votes = classification.classificationConfiguration?.votes || 0;
56-
57-
return { ...classification, images, votes };
58-
});
59-
60-
setClassifications(processedData);
61-
} catch (error) {
62-
console.error("Error fetching classifications:", error);
63-
setError("Failed to load classifications.");
64-
} finally {
65-
setLoading(false);
66-
};
67-
};
68-
28+
if (!session?.user) {
29+
setError('User session not found.');
30+
setLoading(false);
31+
return;
32+
}
33+
34+
setLoading(true);
35+
setError(null);
36+
try {
37+
const { data, error } = await supabase
38+
.from('classifications')
39+
.select('*')
40+
.eq('author', session.user.id)
41+
.eq('classificationtype', 'cloud')
42+
.order('created_at', { ascending: false });
43+
44+
if (error) throw error;
45+
46+
const processedData = data.map((classification) => {
47+
const media = classification.media;
48+
let images: string[] = [];
49+
50+
if (Array.isArray(media) && media.length === 2 && typeof media[1] === 'string') {
51+
images.push(media[1]);
52+
} else if (media && media.uploadUrl) {
53+
images.push(media.uploadUrl);
54+
}
55+
56+
const votes = classification.classificationConfiguration?.votes || 0;
57+
58+
return { ...classification, images, votes };
59+
});
60+
61+
setClassifications(processedData);
62+
} catch (error) {
63+
console.error('Error fetching classifications:', error);
64+
setError('Failed to load classifications.');
65+
} finally {
66+
setLoading(false);
67+
}
68+
};
69+
6970
useEffect(() => {
70-
fetchClassifications();
71+
fetchClassifications();
7172
}, [session]);
72-
73+
7374
return (
74-
<div className="space-y-8">
75-
{loading ? (
76-
<p>Loading classifications</p>
77-
) : error ? (
78-
<p>{error}</p>
79-
) : (
80-
classifications.map((classification) => (
81-
<PostCardSingleWithGenerator
82-
key={classification.id}
83-
classificationId={classification.id}
84-
title={classification.title}
85-
author={classification.author}
86-
content={classification.content}
87-
votes={classification.votes || 0}
88-
category={classification.category}
89-
tags={classification.tags || []}
90-
images={classification.images || []}
91-
anomalyId={classification.anomaly}
92-
classificationConfig={classification.classificationConfiguration}
93-
classificationType={classification.classificationtype}
94-
/>
95-
))
96-
)}
97-
</div>
75+
<div className="space-y-8">
76+
{loading ? (
77+
<p>Loading classifications</p>
78+
) : error ? (
79+
<p>{error}</p>
80+
) : (
81+
classifications.map((classification) => (
82+
<PostCardSingleWithGenerator
83+
key={classification.id}
84+
classificationId={classification.id}
85+
title={classification.title}
86+
author={classification.author}
87+
content={classification.content}
88+
votes={classification.votes || 0}
89+
category={classification.category}
90+
tags={classification.tags || []}
91+
images={classification.images || []}
92+
anomalyId={classification.anomaly}
93+
classificationConfig={classification.classificationConfiguration}
94+
classificationType={classification.classificationtype}
95+
/>
96+
))
97+
)}
98+
</div>
9899
);
99-
};
100+
}

0 commit comments

Comments
 (0)