Skip to content

Commit

Permalink
️♟️📇 ↝ [SSM-100 SSM-88]: Can now view projects and components in gree…
Browse files Browse the repository at this point in the history 
…nhouse stations (dialogue & sizing/styling improvements required, though)
  • Loading branch information
@Gizmotronn
Gizmotronn committed Jan 31, 2025
1 parent 656c98c commit 6413f5b
Show file tree
Hide file tree
Showing 2 changed files with 226 additions and 164 deletions.
212 changes: 98 additions & 114 deletions components/Structures/Missions/Biologists/ResearchStations.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import { useSession, useSupabaseClient } from "@supabase/auth-helpers-react";
import { useActivePlanet } from "@/context/ActivePlanet";
import { InventoryItem } from "@/types/Items";
import BiomassStats from "./BiomassOnPlanet";
import StationModal from "./StationModal";

const initialStations: Station[] = [
{
Expand Down Expand Up @@ -40,55 +41,14 @@ const initialStations: Station[] = [
darkColor: "rgb(20, 83, 45)",
},
animals: [
{ name: "Plankton Portal", icon: "Fish", biomassType: 'Fauna', mass: 0.0000001 }, // Need to update mass values
{ name: "Plankton Portal", icon: "Fish", biomassType: 'Fauna', mass: 0.0000001 },
],
location: {
coordinates: "2.4162° S, 54.2397° W",
altitude: "-10m",
},
built: false,
},
// {
// id: "3",
// name: "Arctic Research Base",
// icon: "Snowflake",
// biome: {
// name: "Polar",
// color: "rgb(148, 163, 184)",
// accentColor: "rgb(226, 232, 240)",
// darkColor: "rgb(51, 65, 85)",
// },
// animals: [
// { name: "Polar Bear", icon: "Bear" },
// { name: "Penguin", icon: "Bird" },
// { name: "Seal", icon: "Fish" },
// ],
// location: {
// coordinates: "78.4162° N, 15.2397° E",
// },
// built: false,
// },
// {
// id: "4",
// name: "Deep Sea Laboratory",
// icon: "Waves",
// biome: {
// name: "Abyssal",
// color: "rgb(30, 58, 138)",
// accentColor: "rgb(37, 99, 235)",
// darkColor: "rgb(30, 27, 75)",
// },
// animals: [
// { name: "Anglerfish", icon: "Fish" },
// { name: "Giant Squid", icon: "Bug" },
// { name: "Tube Worm", icon: "Wand2" },
// ],
// location: {
// coordinates: "31.4162° N, 159.2397° W",
// depth: "-2500m",
// },
// built: false,
// },
];

const initialMilestones: Milestone[] = [
Expand Down Expand Up @@ -127,116 +87,138 @@ export function GreenhouseResearchStations() {
const [stations, setStations] = useState<Station[]>(initialStations)
const [milestones, setMilestones] = useState<Milestone[]>(initialMilestones)
const [loading, setLoading] = useState<boolean | null>(false);
const [activeStation, setActiveStation] = useState<Station | null>(null);

// const fetchStations = useCallback(async () => {
// if (!session || !activePlanet) {
// setLoading(false);
// return;
// };

// try {
// const { data: createdGreenhouseStations, error: createdGreenhouseStationsError } = await supabase
// .from("inventory")
// .select("*")
// .eq("owner", session.user.id)
// .eq("anomaly", activePlanet.id);

// if (createdGreenhouseStationsError) {
// console.error("Error");
// throw createdGreenhouseStationsError;
// };

// const ownedStations = createdGreenhouseStations.map((item: { item: number }) => item.item);

// const response = await fetch('/api/gameplay/inventory');
// const stationItems: InventoryItem[] = await response.json();
// const greenhouseStations = stationItems.filter(item =>
// item.ItemCategory === 'BioDomeStation'
// );

// setStations(greenhouseStations);
// } catch (error: any) {
// console.error(error);
// } finally {
// setLoading(false);
// }
// }, [session, supabase, activePlanet]);
const closeModal = () => setActiveStation(null);

const fetchStations = useCallback(async () => {
if (!session || !activePlanet) {
setLoading(false);
return;
}

setLoading(true);

try {
const { data: inventoryItems, error } = await supabase
.from("inventory")
.select("item, owner, quantity")
.eq("owner", session.user.id)
.eq("anomaly", activePlanet.id);

if (error) {
console.error("Error fetching inventory: ", error);
throw error;
}

// Filter stations that are in the inventory and have quantity >= 1
const ownedStations = inventoryItems
.filter((item) => item.quantity >= 1)
.map((item) => item.item);

// Mark stations as built if they exist in the inventory and have quantity >= 1
const updatedStations = stations.map((station) => ({
...station,
built: ownedStations.includes(parseInt(station.id, 10)),
}));

setStations(updatedStations);

// Update milestone for stations
setMilestones((prevMilestones) =>
prevMilestones.map((milestone) =>
milestone.type === "stations"
? { ...milestone, current: ownedStations.length }
: milestone
)
);
} catch (error) {
console.error("Error fetching stations: ", error);
} finally {
setLoading(false);
}
}, [session, supabase, activePlanet, stations]);

useEffect(() => {
if (!session) {
return;
};
}

// fetchStations();
}, [session]);
fetchStations();
}, [session, fetchStations]);

async function handleBuild (id: string) {
setStations(stations.map((station) => (station.id === id ? { ...station, built: true } : station)))
async function handleBuild(id: string) {
setStations(stations.map((station) => (station.id === id ? { ...station, built: true } : station)));

if (!session) {
console.warn("A unique session error, relating to the attempted creation of a greenhouse station")
return (null);
};
console.warn("Session error during station creation.");
return;
}

try {
const { error } = await supabase
.from("inventory")
.insert([
{
owner: session.user.id,
anomaly: activePlanet?.id || 30,
item: id,
quantity: 1,
configuration: {},
},
]);
const { error } = await supabase.from("inventory").insert([
{
owner: session.user.id,
anomaly: activePlanet?.id || 30,
item: id,
quantity: 1,
configuration: {},
},
]);

if (error) {
throw error;
};
}

alert("You have now built a new observatory for biological missions");
alert("You have built a new observatory for biological missions.");
} catch (error) {
console.error("Error adding greenhouse station: ", error);
};
}

// Update station milestone
setMilestones(
setMilestones((milestones) =>
milestones.map((milestone) =>
milestone.type === "stations" ? { ...milestone, current: milestone.current + 1 } : milestone,
),
milestone.type === "stations" ? { ...milestone, current: milestone.current + 1 } : milestone
)
);
};
}

const buildableStations = stations.filter((station) => !station.built)
const builtStations = stations.filter((station) => station.built)
const buildableStations = stations.filter((station) => !station.built);
const builtStations = stations.filter((station) => station.built);

return (
<div className="min-h-screen bg-gray-900 bg-[linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)),repeating-linear-gradient(0deg,transparent,transparent_40px,rgba(71,85,105,0.1)_40px,rgba(71,85,105,0.1)_80px)]">
<div className="container mx-auto px-4 py-8">
<h1 className="text-4xl font-bold mb-8 text-white tracking-tight">Research Stations</h1>

<div className="min-h-screen bg-gray-900">
{!activeStation && ( <div className="container mx-auto px-4 py-8">
{/* Other content */}
<div className="grid lg:grid-cols-[2fr,1fr] gap-8">
<div className="space-y-8">
{/* Available Stations */}
<section>
<h2 className="text-2xl font-semibold mb-4 text-blue-400">Available Stations</h2>
<div className="grid gap-6">
{buildableStations.map((station) => (
<StationCard key={station.id} station={station} onBuild={handleBuild} onView={function (id: string): void {
throw new Error("Function not implemented.");
} } />
<StationCard
key={station.id}
station={station}
onBuild={handleBuild}
onView={() => {}}
/>
))}
</div>
</section>

{/* Built Stations */}
{builtStations.length > 0 && (
<section>
<h2 className="text-2xl font-semibold mb-4 text-blue-400">Built Stations</h2>
<div className="grid gap-6">
{builtStations.map((station) => (
<StationCard key={station.id} station={station} onBuild={handleBuild} onView={function (id: string): void {
throw new Error("Function not implemented.");
} } />
<StationCard
key={station.id}
station={station}
onBuild={handleBuild}
onView={() => setActiveStation(station)}
/>
))}
</div>
</section>
Expand All @@ -245,10 +227,12 @@ export function GreenhouseResearchStations() {

<div className="lg:border-l lg:border-gray-800 lg:pl-8">
<Milestones milestones={milestones} />
{/* <BiomassStats /> */}
</div>
</div>
</div>
)}
{/* Render StationModal if there's an active station */}
{activeStation && <StationModal station={activeStation} setActiveStation={setActiveStation} />}
</div>
);
};
Loading

0 comments on commit 6413f5b

Please sign in to comment.