Skip to content

Commit

Permalink
🚋🦠 ↝ [SSG-130 SSG-131 SSG-148]: Improvements to bio stations, desert …
Browse files Browse the repository at this point in the history 
…b.station layout
  • Loading branch information
@Gizmotronn
Gizmotronn committed Feb 22, 2025
1 parent 5f02fef commit 60e79ea
Show file tree
Hide file tree
Showing 5 changed files with 364 additions and 157 deletions.
137 changes: 66 additions & 71 deletions app/scenes/desert/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,8 @@ import { ZoodexIguanas } from "@/components/Projects/Zoodex/iguanasFromAbove";
import { BiomePattern } from "@/components/Structures/Missions/Biologists/BiomePattern";
import { iconMap } from "@/components/Structures/Missions/Biologists/StationCard";
import Navbar from "@/components/Layout/Navbar";
import DesertGallery from "@/components/Structures/Missions/Biologists/gallery/desertGallery";
import DesertCounter from "@/components/Structures/Missions/Biologists/timer/desertTimer";

interface Project {
id: number;
Expand All @@ -24,30 +26,28 @@ interface Animal {
icon: string;
}

const fetchProjects = (): Project[] => {
return [
{
id: 1,
station: 3104001,
biome: "Desert",
title: "Burrowing Owls",
icon: Bird,
completedCount: 0,
internalComponent: () => <BurrowingOwl />,
color: "text-green-400",
},
{
id: 2,
station: 3104001,
biome: "Desert",
title: "Iguanas from Above",
icon: PawPrint,
completedCount: 5,
internalComponent: () => <ZoodexIguanas />,
color: "text-green-700",
},
];
};
const fetchProjects = (): Project[] => [
{
id: 1,
station: 3104001,
biome: "Desert",
title: "Burrowing Owls",
icon: Bird,
completedCount: 0,
internalComponent: () => <BurrowingOwl />,
color: "text-green-400",
},
{
id: 2,
station: 3104001,
biome: "Desert",
title: "Iguanas from Above",
icon: PawPrint,
completedCount: 5,
internalComponent: () => <ZoodexIguanas />,
color: "text-green-700",
},
];

const DesertBaseEarthScene = () => {
const [activeStation] = useState<any | null>({
Expand All @@ -65,77 +65,72 @@ const DesertBaseEarthScene = () => {

useEffect(() => {
if (activeStation) {
const filteredProjects = fetchProjects().filter(
(p) => p.station === Number(activeStation.id)
);
setProjects(filteredProjects);
setProjects(fetchProjects().filter((p) => p.station === Number(activeStation.id)));
}
}, [activeStation]);

return (
<div className="relative h-screen w-full grid grid-rows-[auto_1fr_auto]">
<img
className="absolute inset-0 w-full h-full object-cover"
src="/assets/Backdrops/Earth.png"
alt="Earth Background"
/>
<div className="relative w-full bg-black text-white">
<Navbar />
<div className="relative z-10 flex flex-col bg-black bg-opacity-60 p-5 md:p-10 rounded-lg overflow-hidden">
{/* <h1 className="text-3xl font-bold text-white text-center">Desert Station</h1> */}
<div className="relative py-10 flex flex-col gap-6 p-6">
<img
className="absolute inset-0 w-full h-full object-cover opacity-20"
src="/assets/Backdrops/Earth.png"
alt="Earth Background"
/>

<div className="mt-8 bg-gray-800 p-8 rounded-lg overflow-auto">
<h2 className="text-3xl font-bold text-white">{activeStation.name} | {activeStation.id}</h2>
<p className="text-gray-400 mt-2">{activeStation.description}</p>

<div className="mt-6">
{/* Station Overview */}
<div className="relative z-10 bg-gray-900 bg-opacity-80 p-6 rounded-lg shadow-lg">
<h2 className="text-2xl font-bold">{activeStation.name} | {activeStation.id}</h2>
<p className="text-gray-400">{activeStation.description}</p>

<div className="mt-4 flex items-center gap-4">
<h3 className="text-lg font-semibold text-blue-400">Biome</h3>
<div className="flex items-center gap-2">
<BiomePattern biome={activeStation.biome} className="w-12 h-12" />
<span className="text-white">{activeStation.biome}</span>
</div>
<BiomePattern biome={activeStation.biome} className="w-10 h-10" />
<span>{activeStation.biome}</span>
</div>
</div>

<div className="mt-6">
<h3 className="text-lg font-semibold text-blue-400">Animals available for study</h3>
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
{/* Dashboard Grid */}
<div className="relative z-10 grid grid-cols-1 md:grid-cols-2 gap-6">
{/* Animals Section */}
<div className="bg-gray-900 bg-opacity-80 p-6 rounded-lg shadow-lg">
<h3 className="text-xl font-semibold text-blue-400">Animals available for study</h3>
<div className="mt-4 grid grid-cols-2 gap-4">
{activeStation.animals.map((animal: Animal) => {
const AnimalIcon = iconMap[animal.icon as keyof typeof iconMap];
return (
<div key={animal.name} className="flex items-center gap-2">
{AnimalIcon && <AnimalIcon className="w-6 h-6 text-blue-400" />}
<span className="text-white">{animal.name}</span>
<span>{animal.name}</span>
</div>
);
})}
</div>
<div className="p-12">
<h3 className="text-l font-semibold text-blue-600">Your discoveries</h3>
<DesertGallery />
<DesertCounter />
</div>
</div>

{/* <div className="mt-6">
<h3 className="text-lg font-semibold text-blue-400">Location</h3>
<p className="text-white">{activeStation.location.coordinates}</p>
{activeStation.location.depth && (
<p className="text-white">{activeStation.location.depth}</p>
)}
{activeStation.location.altitude && (
<p className="text-white">{activeStation.location.altitude}</p>
)}
</div> */}

<div className="mt-6">
{/* Projects Section */}
<div className="bg-gray-900 bg-opacity-80 p-6 rounded-lg shadow-lg">
<h3 className="text-xl font-semibold text-white">Projects</h3>
{projects.length > 0 ? (
projects.map((project) => (
<div key={project.id} className="mt-6">
<h4 className="text-lg text-white">{project.title}</h4>
<p className="text-sm text-white">Completed: {project.completedCount}</p>
<div id={`project-${project.id}`} className="mt-8">
<h3 className="text-xl">{project.title}</h3>
{project.internalComponent && <project.internalComponent />}
<div className="mt-4 grid gap-4">
{projects.map((project) => (
<div key={project.id} className="bg-gray-800 p-4 rounded-lg">
<h4 className="text-lg">{project.title}</h4>
<p className="text-sm text-gray-400">Completed: {project.completedCount}</p>
<div className="mt-4">
{project.internalComponent && <project.internalComponent />}
</div>
</div>
</div>
))
))}
</div>
) : (
<p className="text-white">No projects available</p>
<p className="mt-4 text-gray-400">No projects available</p>
)}
</div>
</div>
Expand Down
104 changes: 59 additions & 45 deletions components/Projects/Zoodex/burrowingOwls.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -211,6 +211,8 @@ export function BurrowingOwl() {

const [anomaly, setAnomaly] = useState<Anomaly | null>(null);
const [imageUrl, setImageUrl] = useState<string | null>(null);
const [showTutorial, setShowTutorial] = useState(false);

const [loading, setLoading] = useState(true);

// Check tutorial mission
Expand Down Expand Up @@ -256,41 +258,40 @@ export function BurrowingOwl() {
fetchAnomaly();
}, [session, supabase, activePlanet]);

// Check tutorial mission
useEffect(() => {
const checkTutorialMission = async () => {
if (!session) return;

try {
const { data: missionData, error: missionError } = await supabase
.from("missions")
.select("id")
.eq("user", session.user.id)
.eq("mission", "3000002");

if (missionError) throw missionError;

setHasMission3000002(missionData.length > 0);
} catch (error: any) {
console.error("Error checking user mission: ", error.message || error);
setHasMission3000002(false);
} finally {
setMissionLoading(false);
};
};

checkTutorialMission();
}, [session, supabase]);

if (missionLoading) {
return <div>Loading mission status...</div>;
};

if (!hasMission3000002) {
return (
<BurrowingOwlTutorial anomalyId={anomaly?.id.toString() || "4567867"} />
);
};
// useEffect(() => {
// const checkTutorialMission = async () => {
// if (!session) return;

// try {
// const { data: missionData, error: missionError } = await supabase
// .from("missions")
// .select("id")
// .eq("user", session.user.id)
// .eq("mission", "3000002");

// if (missionError) throw missionError;

// setHasMission3000002(missionData.length > 0);
// } catch (error: any) {
// console.error("Error checking user mission: ", error.message || error);
// setHasMission3000002(false);
// } finally {
// setMissionLoading(false);
// };
// };

// checkTutorialMission();
// }, [session, supabase]);

// if (missionLoading) {
// return <div>Loading mission status...</div>;
// };

// if (!hasMission3000002) {
// return (
// <BurrowingOwlTutorial anomalyId={anomaly?.id.toString() || "4567867"} />
// );
// };

if (loading) {
return (
Expand All @@ -311,16 +312,29 @@ export function BurrowingOwl() {
return (
<div className="flex flex-col items-start gap-4 pb-4 relative w-full max-w-lg overflow-y-auto max-h-[90vh] rounded-lg">
<div className="pb-4 rounded-md relative w-full">
{imageUrl && (
<img src={imageUrl} alt={anomaly.content} className="w-full h-64 object-cover" />
)}
<ClassificationForm
anomalyId={anomaly.id.toString()}
anomalyType="zoodex-burrowingOwl"
missionNumber={100000035}
assetMentioned={imageUrl || ""}
structureItemId={3104}
/>
<center>
<button
onClick={() => setShowTutorial((prev) => !prev)}
className="mb-4 px-4 py-2 bg-[#D689E3] text-white rounded"
>
{showTutorial ? "Close Tutorial" : "Show Tutorial"}
</button>

{showTutorial && anomaly && <BurrowingOwlTutorial anomalyId={anomaly.id.toString()} />}

{!showTutorial && (
<>
<img src={imageUrl || ''} alt={anomaly.content} className="w-full h-64 object-cover" />
<ClassificationForm
anomalyId={anomaly.id.toString()}
anomalyType="zoodex-burrowingOwl"
missionNumber={100000035}
assetMentioned={imageUrl || ""}
structureItemId={3104}
/>
</>
)}
</center>
</div>
</div>
);
Expand Down
Loading

0 comments on commit 60e79ea

Please sign in to comment.