Skip to content

Commit

Permalink
🛝🥦 ↝ [SSG-78 SSP-33 SSP-36]: Some bug fixes and contours
Browse files Browse the repository at this point in the history
  • Loading branch information
@Gizmotronn
Gizmotronn committed Dec 1, 2024
1 parent 4758ea7 commit 0d59858
Show file tree
Hide file tree
Showing 3 changed files with 59 additions and 92 deletions.
10 changes: 1 addition & 9 deletions app/scenes/mining/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,18 +1,10 @@
"use client";

import React, { useState } from "react";
import { useActivePlanet } from "@/context/ActivePlanet";
import MineralsInventoryGrid from "@/components/Inventory/mineralsPanel";
import StarnetLayout from "@/components/Layout/Starnet";
import React from "react";
import { EarthActionSceneLayout, EarthViewLayout } from "@/components/(scenes)/planetScene/layout";
import StructureMissionGuide from "@/components/Layout/Guide";
import { MiningComponentComponent } from "@/components/mining-component";

enum Step {
MineralDeposits = "MINERAL_DEPOSITS",
MineralDetails = "MINERAL_DETAILS",
};

export default function Mining() {
return (
<EarthActionSceneLayout>
Expand Down
139 changes: 57 additions & 82 deletions components/mining-component.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,7 @@ export function MiningComponentComponent() {
const [isMining, setIsMining] = useState(false)
const [activeMap, setActiveMap] = useState<'2D' | '3D'>('2D')
const [landmarks, setLandmarks] = useState<Landmark[]>([]);
const [timeRemaining, setTimeRemaining] = useState(0);

useEffect(() => {
const fetchLandmarks = async () => {
Expand Down Expand Up @@ -195,6 +196,19 @@ export function MiningComponentComponent() {

const duration = 5000;
const startTime = Date.now();
const endTime = Date.now() + duration;
const timer = setInterval(() => {
const remaining = Math.max(0, endTime - Date.now());
setTimeRemaining(Math.ceil(remaining / 1000));
if (remaining <= 0) {
clearInterval(timer);
setIsMining(false);
setTimeRemaining(0);
setRoverPosition({ x: 5, y: 5 });
updateInventory(selectedDeposit.name, 10);
setSelectedDeposit(null);
}
}, 1000);

const animateRover = () => {
const elapsedTime = Date.now() - startTime;
Expand Down Expand Up @@ -232,7 +246,6 @@ export function MiningComponentComponent() {
const existingItem = inventory.find(item => item.name === resourceName);

if (existingItem) {
// Update existing item in inventory
const { error } = await supabase
.from("inventory")
.update({ quantity: existingItem.amount + minedAmount })
Expand Down Expand Up @@ -304,6 +317,17 @@ export function MiningComponentComponent() {
}
};

const [refreshKey, setRefreshKey] = useState(0);

const refreshParent = () => {
setRefreshKey((prevKey) => prevKey + 1);
};

useEffect(() => {
// Logic to fetch data whenever refreshKey changes
console.log('Parent component refreshed.');
}, [refreshKey]);

return (
<div className="fixed inset-0 flex items-center justify-center bg-gray-900 bg-opacity-50 z-50">
<div className="relative w-[90%] h-[90%] bg-gray-100 text-[#2C4F64] flex flex-col rounded-lg overflow-hidden md:w-[90%] md:h-[90%] sm:w-full sm:h-full">
Expand Down Expand Up @@ -345,11 +369,14 @@ export function MiningComponentComponent() {
<h3 className="text-lg font-semibold mb-2">Selected Deposit</h3>
<p>{selectedDeposit.name}</p>
<Button
onClick={handleStartMining}
className="mt-2 bg-green-500 hover:bg-green-600 text-white"
>
Start Mining
</Button>
onClick={handleStartMining}
disabled={isMining || !selectedDeposit}
className="w-full py-2 text-white bg-blue-500 hover:bg-blue-600 disabled:bg-gray-400"
>
{isMining
? `Mining in progress, time remaining: ${timeRemaining}s`
: "Start Mining"}
</Button>
</div>
) : (
<p className="text-gray-500">Select a deposit to start mining.</p>
Expand All @@ -366,12 +393,14 @@ export function MiningComponentComponent() {
<Inventory />
</div>
</div>
<Button
onClick={() => updatePlanetLocation(30)}
className="mt-2 bg-green-500 hover:bg-green-600 text-white"
>
Return to Earth
</Button>
{activePlanet !== 30 && (
<Button
onClick={() => updatePlanetLocation(30)}
className="mt-2 bg-green-500 hover:bg-green-600 text-white"
>
Return to Earth
</Button>
)}
{activeLandmark && (
<div
className="absolute inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50"
Expand All @@ -397,114 +426,60 @@ export function MiningComponentComponent() {
);
};

// type LandmarkModalProps = {
// landmark: Landmark | null;
// isOpen: boolean;
// onClose: () => void;
// };

// const LandmarkModal: React.FC<LandmarkModalProps> = ({ landmark, isOpen, onClose }) => {
// if (!isOpen || !landmark) return null;

// return (
// <div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50">
// <div className="bg-white rounded-lg shadow-lg max-w-md w-full p-6 relative">
// <button
// className="absolute top-3 right-3 text-gray-500 hover:text-gray-800"
// onClick={onClose}
// >
// &times;
// </button>
// <h2 className="text-2xl font-bold mb-2">{landmark.name}</h2>
// <p className="text-gray-700">{landmark.description}</p>
// </div>
// </div>
// );
// };

const MineralDepositsGenerator: React.FC = () => {
const supabase = useSupabaseClient();
const session = useSession();
const { activePlanet } = useActivePlanet();

const [classificationsCount, setClassificationsCount] = useState(0);
const [creatingDeposits, setCreatingDeposits] = useState(false);
const [mineralDeposits, setMineralDeposits] = useState<any[]>([]); // Track created deposits
const [notification, setNotification] = useState<string | null>(null);
const { activePlanet } = useActivePlanet();

const availableMinerals = [11, 13, 15, 16, 18, 19];

useEffect(() => {
const fetchClassifications = async () => {
if (!session?.user?.id || !activePlanet?.id) {
console.error("User or activePlanet is undefined.");
return;
}
const { data: classifications, error } = await supabase
.from('classifications')
.select('*')
.eq('user', session.user.id)
.eq('planet_id', activePlanet.id);

if (error) {
console.error("Error fetching classifications:", error);
} else {
console.log("Fetched classifications:", classifications);
// Make sure to set the classifications state correctly
}
};
fetchClassifications();
}, [session, activePlanet, supabase]);
const [creatingDeposits, setCreatingDeposits] = useState(false);

const handleCreateDeposits = async () => {
if (!session?.user?.id || !activePlanet?.id) {
console.error("User or activePlanet is undefined.");
return;
}

// Randomly pick a mineral ID from availableMinerals
setCreatingDeposits(true);

const randomMineral = availableMinerals[Math.floor(Math.random() * availableMinerals.length)];

const newDeposit = {
mineralconfiguration: {
mineral: randomMineral, // Use the mineral ID (number)
mineral: randomMineral,
quantity: 100,
icon_url: `https://example.com/mineral-icon-${randomMineral}.png`, // Assuming different icons for each mineral
icon_url: `https://example.com/mineral-icon-${randomMineral}.png`,
level: 1,
uses: ['Mining', 'Excavation'],
position: { x: Math.random() * 100, y: Math.random() * 100 } // Random position
uses: ["Mining", "Excavation"],
position: { x: Math.random() * 100, y: Math.random() * 100 },
},
owner: session.user.id,
anomaly: activePlanet.id,
};

const { data, error } = await supabase
.from('mineralDeposits')
.insert([newDeposit])
.select();
const { error } = await supabase
.from("mineralDeposits")
.insert([newDeposit]);

if (error) {
console.error("Error creating deposit:", error);
setCreatingDeposits(false);
return;
}

console.log("Created new deposit:", data);
// Optionally, update the local state to reflect the new deposit
setMineralDeposits(prevDeposits => [
...prevDeposits,
{ ...newDeposit.mineralconfiguration, id: data[0].id }
]);
// Trigger full reload
window.location.reload();
};

return (
<div className="mineral-deposits-container">
<div className="content">
<h2>Create Mineral Deposits</h2>
<p>You have {classificationsCount} classifications. You can create up to 3 mineral deposits.</p>
<Button onClick={handleCreateDeposits} disabled={creatingDeposits}>
{creatingDeposits ? 'Creating...' : 'Create Deposits'}
{creatingDeposits ? "Creating..." : "Create Deposits"}
</Button>
</div>
</div>
);
};
};
2 changes: 1 addition & 1 deletion components/topographic-map.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,7 @@ const BackgroundMap = ({ deposits, seed }: { deposits: MineralDeposit[]; seed: s
const { width, height } = canvas;

ctx.clearRect(0, 0, width, height);
ctx.fillStyle = "#F5F5DC";
ctx.fillStyle = "#a6142a" // "#F5F5DC";
ctx.fillRect(0, 0, width, height);

const step = 10;
Expand Down

0 comments on commit 0d59858

Please sign in to comment.