Skip to content

Commit

Permalink
🐡🪁 ↝ [SSM-57 SSM-55 SSM-56 SSM-40 SSC-30 SSM-54]: Updating some minin…
Browse files Browse the repository at this point in the history 
…g views, new ideas/missions integrated into the flow
  • Loading branch information
@Gizmotronn
Gizmotronn committed Nov 6, 2024
1 parent 2a5e5c9 commit 157a622
Show file tree
Hide file tree
Showing 10 changed files with 257 additions and 340 deletions.
18 changes: 7 additions & 11 deletions app/scenes/mining/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,10 +5,10 @@ import { useActivePlanet } from "@/context/ActivePlanet";
import MineralDeposits from "@/components/Structures/Mining/Archive/AvailableDeposits";
import { SelectMineralPanel } from "@/components/Structures/Mining/Archive/MiningPanels";
import MineralsInventoryGrid from "@/components/Inventory/mineralsPanel";
import { MiningComponentComponent } from "@/components/Structures/Mining/Mining";
import { Card } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { MiningComponent } from "@/components/Structures/Mining/Mining";
import StarnetLayout from "@/components/Layout/Starnet";
import { EarthActionSceneLayout, EarthViewLayout } from "@/components/(scenes)/planetScene/layout";
import StructureMissionGuide from "@/components/Layout/Guide";

enum Step {
MineralDeposits = "MINERAL_DEPOSITS",
Expand All @@ -17,14 +17,10 @@ enum Step {

export default function Mining() {
return (
<StarnetLayout>
<main className="container mx-auto px-4 relative z-10">
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">

</div>
<MiningComponentComponent />
</main>
</StarnetLayout>
<EarthActionSceneLayout>
<MiningComponent />
<StructureMissionGuide />
</EarthActionSceneLayout>
);
};

Expand Down
21 changes: 18 additions & 3 deletions components/(scenes)/planetScene/layout.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,8 +17,8 @@ interface PlanetViewLayoutProps {
children: React.ReactNode[];
};

interface PlanetViewLayoutProps {
children: React.ReactNode[];
interface PlanetActionSceneProps {
children: React.ReactNode;
};

const PlanetViewLayout: React.FC<PlanetViewLayoutProps> = ({ children }) => {
Expand Down Expand Up @@ -170,7 +170,7 @@ export const EarthViewLayout: React.FC<PlanetViewLayoutProps> = ({
/>

<div className="relative flex flex-1 z-10">
<VerticalToolbar />
{/* <VerticalToolbar /> */}

<div className="relative flex flex-col flex-1">
{children.slice(0, 2).map((child, index) => (
Expand Down Expand Up @@ -202,4 +202,19 @@ export const EarthViewLayout: React.FC<PlanetViewLayoutProps> = ({
</div>
</div>
);
};

export const EarthActionSceneLayout: React.FC<PlanetActionSceneProps> = ({
children,
}) => {
return (
<div className="relative min-h-screen h-screen w-full flex flex-col">
<img
className="absolute inset-0 w-full h-full object-cover"
src="/assets/Backdrops/Earth.png"
alt="Earth Background"
/>
{children}
</div>
);
};
4 changes: 2 additions & 2 deletions components/Layout/BottomMenu.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
import { Globe, Rss, HelpCircle, Star } from "lucide-react";
import { Globe, HelpCircle, Star, Pickaxe } from "lucide-react";
import { usePathname } from "next/navigation";
import Link from "next/link";
import { useState } from "react";

const menuItems = [
{ icon: Globe, label: "Planet", href: "/" },
{ icon: Rss, label: "Mining", href: "/scenes/mining" },
{ icon: Pickaxe, label: "Mining", href: "/scenes/mining" },
{ icon: Star, label: "Travel", href: "/scenes/travel" },
{
icon: HelpCircle,
Expand Down
198 changes: 132 additions & 66 deletions components/Layout/Guide.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,16 +2,18 @@ import React, { useEffect, useState } from "react";
import { Button } from "../ui/button";
import { Card, CardContent } from "../ui/card";
import { motion, AnimatePresence } from "framer-motion";
import { ChevronLeft, ChevronRight, CloudHail, HelpCircle, LightbulbIcon, Telescope, TreeDeciduous } from "lucide-react";
import { ChevronLeft, ChevronRight, CloudHail, HelpCircle, LightbulbIcon, LucideTestTubeDiagonal, Pickaxe, Telescope, TestTube2, TreeDeciduous } from "lucide-react";
import { useSession, useSupabaseClient } from "@supabase/auth-helpers-react";
import MissionPathway from "../Missions/Pathway";
import { useActivePlanet } from "@/context/ActivePlanet";

interface Mission {
id: number;
name: string;
description: string;
icon: React.ElementType;
color: string;
requiredItem?: number;
};

interface DialogueStep {
Expand All @@ -26,6 +28,7 @@ const astronomyMissions: Mission[] = [
description: "Click on the 'Telescope' structure to make some classifications",
icon: Telescope,
color: 'text-cyan-300',
requiredItem: 3103,
},
{
id: 10000001,
Expand All @@ -43,6 +46,7 @@ const biologistMissions: Mission[] = [
description: "Click on the 'Biodome' structure to make some classifications",
icon: TreeDeciduous,
color: 'text-green-300',
requiredItem: 3104,
},
];

Expand All @@ -53,23 +57,53 @@ const meteorologyMissions: Mission[] = [
description: "Click on your LIDAR module to make some classifications",
icon: CloudHail,
color: 'text-blue-300',
requiredItem: 3105,
},
];

const globalMissions: Mission[] = [
{
id: 200000015,
name: "Research a new module",
description: 'Click on your structure and then the "Research" tab to unlock new projects and data sources to contribute to!',
icon: TestTube2,
color: 'text-purple-300',
},
{
id: 200000013,
name: "Collect some fuel",
description: "Click on the mining tab to visit some mineral deposits your probes have found and mine them for fuel",
icon: Pickaxe,
color: 'text-red-300',
},
{
id: 30000001,
name: "Discover a new planet",
description: "Create and use a telescope to discover a new planet using the Planet Hunters module",
icon: Telescope,
color: 'text-purple-300',
},
];

// Research station - walk the user through this. Then upload data, verify/vet (consensus), then we introduce travel. Add a "close"/swipe-down option so that the tutorial section can be hidden/minimised. Then we go through the guide for the different views....and determine the differentials from Pathway.tsx and this new list
// As well as researching for other projects/mission modules that aren't in `mission-selector`
// We'll also need to update this for different planets & chapters

const dialogueSteps: DialogueStep[] = [

];

export default function StructureMissionGuide() {
const StructureMissionGuide = () => {
const supabase = useSupabaseClient();
const session = useSession();
const { activePlanet } = useActivePlanet();

const [completedMissions, setCompletedMissions] = useState<number[]>([]);
const [loading, setLoading] = useState(true);
const [currentCategory, setCurrentCategory] = useState(0);
const [minimized, setMinimized] = useState(false); // State to handle minimization
const [minimized, setMinimized] = useState(false);
const [ownedItems, setOwnedItems] = useState<number[]>([]);
const [scrollableMissions, setScrollableMissions] = useState<Mission[]>([]);

const categories = [
{ missions: astronomyMissions, name: 'Astronomer' },
Expand All @@ -78,57 +112,79 @@ export default function StructureMissionGuide() {
];

useEffect(() => {
async function fetchCompletedMissions() {
if (!session?.user?.id) return;

const { data, error } = await supabase
.from('missions')
.select('mission')
.eq('user', session.user.id);

if (error) {
console.error("Error fetching completed missions:", error);
} else {
const completedMissionIds = data.map((mission: { mission: number }) => mission.mission);
async function fetchInventoryAndCompletedMissions() {
if (!session?.user?.id || !activePlanet?.id) return;

try {
const { data: inventoryData, error: inventoryError } = await supabase
.from('inventory')
.select('item')
.eq('owner', session.user.id)
.eq('anomaly', activePlanet.id)
.in('item', [3103, 3104, 3105, 3106]);

if (inventoryError) throw inventoryError;

const ownedItems = inventoryData.map((inv: { item: number }) => inv.item);
setOwnedItems(ownedItems);

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

if (missionError) throw missionError;

const completedMissionIds = missionData.map((mission: { mission: number }) => mission.mission);
setCompletedMissions(completedMissionIds);

if (ownedItems.includes(3103)) {
setCurrentCategory(0); // Astronomy
} else if (ownedItems.includes(3104)) {
setCurrentCategory(1); // Biology
} else if (ownedItems.includes(3105)) {
setCurrentCategory(2); // Meteorology
} else {
setCurrentCategory(Math.floor(Math.random() * categories.length)); // Random category if no specific items are owned
}
} catch (error) {
console.error("Error fetching inventory or missions:", error);
}

setLoading(false);
}

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

const handleNextCategory = () => {
setCurrentCategory((prevCategory) => (prevCategory + 1) % categories.length);
};

const handlePreviousCategory = () => {
setCurrentCategory((prevCategory) => (prevCategory - 1 + categories.length) % categories.length);
};
fetchInventoryAndCompletedMissions();
}, [session, activePlanet, supabase]);

const toggleMinimize = () => {
setMinimized(!minimized);
useEffect(() => {
const missionsToDisplay = [
...categories[currentCategory].missions.slice(0, 2), // Get only the first 2 missions
...globalMissions.slice(0, 2), // Add 2 global missions
];
setScrollableMissions(missionsToDisplay);
}, [currentCategory]);

const userHasRequiredItem = (requiredItem?: number) => {
return requiredItem ? ownedItems.includes(requiredItem) : false;
};

return (
<div className="p-4 max-w-6xl mx-auto font-mono">
{minimized ? (
<Button onClick={toggleMinimize} className="bg-blue-600 text-white flex items-center space-x-2">
<Button onClick={() => setMinimized(false)} className="bg-blue-600 text-white flex items-center space-x-2">
<HelpCircle className="w-5 h-5" />
<span>Help</span>
</Button>
) : (
<Card className="overflow-hidden relative bg-gradient-to-r from-gray-900 via-gray-800 to-gray-900 border-2 border-gray-700">
<CardContent className="p-4">
<div className="flex justify-between mb-4 items-center">
{/* Mission Group Header */}
<h2 className="text-xl font-semibold text-gray-300">
Mission guide for {categories[currentCategory].name} pathway
Mission Guide for {categories[currentCategory].name} Pathway
</h2>

<Button
onClick={toggleMinimize}
onClick={() => setMinimized(true)}
className="bg-gray-700 text-gray-300 hover:bg-gray-600 px-2 py-1 text-sm"
>
Minimize
Expand All @@ -137,50 +193,60 @@ export default function StructureMissionGuide() {

<div className="flex justify-between mb-4">
<Button
onClick={handlePreviousCategory}
className="bg-gray-700 text-gray-300 hover:bg-gray-600 px-2 py-1 text-sm"
onClick={() => setCurrentCategory((currentCategory - 1 + categories.length) % categories.length)}
className="bg-gray-700 text-gray-300 hover:bg-gray-600 p-2"
disabled={categories.length <= 1}
>
<ChevronLeft className="h-4 w-4" />
<ChevronLeft />
</Button>
<Button
onClick={handleNextCategory}
className="bg-blue-600 text-white hover:bg-blue-500 px-2 py-1 text-sm"
onClick={() => setCurrentCategory((currentCategory + 1) % categories.length)}
className="bg-gray-700 text-gray-300 hover:bg-gray-600 p-2"
disabled={categories.length <= 1}
>
<ChevronRight className="h-4 w-4" />
<ChevronRight />
</Button>
</div>

<div className="grid grid-cols-1 gap-2">
{loading ? (
<p>Loading missions...</p>
) : (
categories[currentCategory].missions.map((mission) => (
<Card
key={mission.id}
className={`cursor-pointer hover:shadow-lg transition-all duration-300 ${
completedMissions.includes(mission.id) ? 'bg-gray-700' : 'bg-gray-800'
} border border-gray-600 relative overflow-hidden`}
>
<CardContent className="p-2 flex items-center">
<mission.icon className={`w-6 h-6 mr-2 ${mission.color}`} />
<div>
<h3 className={`text-xs font-semibold ${mission.color}`}>{mission.name}</h3>
{completedMissions.includes(mission.id) ? (
<p className="text-xs text-gray-400 line-through decoration-dotted decoration-green-400">
{mission.description}
</p>
) : (
<p className="text-xs text-gray-400">{mission.description}</p>
)}
</div>
</CardContent>
</Card>
))
)}
<div className="mb-4 p-4 border border-gray-600 rounded bg-gray-800 text-gray-200">
<p className="mt-1">
Welcome! Build structures like the Telescope to complete missions and expand your research.
Click the 'Guide' button to view your missions.
</p>
</div>

{/* Scrollable Missions Section */}
<div className="overflow-y-auto max-h-40 relative">
<div className="grid grid-cols-1 gap-4">
{scrollableMissions.map((mission) => (
<div key={mission.id} className="flex">
<Card
className={`cursor-pointer hover:shadow-lg transition-all duration-300 ${
completedMissions.includes(mission.id) ? 'bg-gray-700' : 'bg-gray-800'
} border border-gray-600 relative overflow-hidden w-full`}
>
<CardContent className="p-2 flex items-center">
<mission.icon className={`w-6 h-6 mr-2 ${mission.color}`} />
<div>
<h3 className={`font-semibold text-gray-300 ${completedMissions.includes(mission.id) ? 'line-through text-green-400' : ''}`}>
{mission.name}
</h3>
<p className="text-gray-400">{mission.description}</p>
{userHasRequiredItem(mission.requiredItem) && (
<span className="text-green-300 text-sm">Ready to complete!</span>
)}
</div>
</CardContent>
</Card>
</div>
))}
</div>
</div>
</CardContent>
</Card>
)}
</div>
);
};
};

export default StructureMissionGuide;
Loading

0 comments on commit 157a622

Please sign in to comment.