🦧🛕 ↝ [SSG-70 SSG-71 SSG-72 SSP-33]: Updating & reviewing mining scene (f.e. only)

Author: Gizmotronn

app/scenes/mining/page.tsx

@@ -21,7 +21,7 @@ export default function Mining() {
         <MiningComponent />
         <StructureMissionGuide />
     </EarthActionSceneLayout>
-  );
+  ); 
 };
 
 function MiningScene() {

app/tests/page.tsx

@@ -8,9 +8,8 @@ export default function TestPage() {
     return (
         <StarnetLayout>
           <>
-          <div style={{ width: "100vw", height: "100vh" }}>
-      <TopographicMap />
-    </div>
+            <div style={{ width: "100vw", height: "100vh" }}>
+            </div>
           </>
         </StarnetLayout>
     );
@@ -27,104 +26,4 @@ export default function TestPage() {
     },
   ]}  />
 
-*/
-
-import { Canvas } from "@react-three/fiber";
-import * as THREE from "three";
-import { createNoise2D } from "simplex-noise";
-import alea from "alea";
-
-// Topographic shaders
-const topographicVertexShader = `
-  varying vec2 vUv;
-  varying float vElevation;
-
-  void main() {
-    vUv = uv;
-    vElevation = position.z;
-    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
-  }
-`;
-
-const topographicFragmentShader = `
-  varying vec2 vUv;
-  varying float vElevation;
-  uniform vec3 uBaseColor;
-  uniform vec3 uContourColor;
-  uniform float uBands;
-  uniform float uContourWidth;
-
-  void main() {
-    float elevation = vElevation;
-    float bandedElevation = floor(elevation * uBands) / uBands;
-    float nextBand = floor(elevation * uBands + 1.0) / uBands;
-    float mixFactor = smoothstep(bandedElevation, nextBand, elevation);
-    
-    float contourLine = 1.0 - smoothstep(0.0, uContourWidth, abs(mixFactor - 0.5));
-    
-    vec3 finalColor = mix(uBaseColor, uContourColor, contourLine * 0.5);
-    
-    gl_FragColor = vec4(finalColor, 1.0);
-  }
-`;
-
-type TerrainProps = {
-  seed: number;
-  heightScale: number;
-  bands: number;
-  baseColor: string;
-  contourColor: string;
-};
-
-const Terrain: React.FC<TerrainProps> = ({ seed, heightScale, bands, baseColor, contourColor }) => {
-  const mesh = useRef<THREE.Mesh>(null); // Explicitly define mesh type
-  const prng = useMemo(() => alea(seed), [seed]);
-  const noise2D = useMemo(() => createNoise2D(prng), [prng]);
-
-  const geometry = useMemo(() => {
-    const geo = new THREE.PlaneGeometry(20, 20, 200, 200);
-    const positions = geo.attributes.position.array as Float32Array;
-
-    for (let i = 0; i < positions.length; i += 3) {
-      const x = positions[i];
-      const y = positions[i + 1];
-      const noise = noise2D(x * 0.05, y * 0.05);
-      positions[i + 2] = noise * heightScale;
-    }
-
-    geo.computeVertexNormals();
-    return geo;
-  }, [noise2D, heightScale]);
-
-  const material = useMemo(() => {
-    return new THREE.ShaderMaterial({
-      vertexShader: topographicVertexShader,
-      fragmentShader: topographicFragmentShader,
-      uniforms: {
-        uBaseColor: { value: new THREE.Color(baseColor) },
-        uContourColor: { value: new THREE.Color(contourColor) },
-        uBands: { value: bands },
-        uContourWidth: { value: 0.1 },
-      },
-    });
-  }, [baseColor, contourColor, bands]);
-
-  return (
-    <mesh ref={mesh} geometry={geometry} material={material} rotation={[-Math.PI / 2, 0, 0]} />
-  );
-};
-
-const TopographicMap = () => {
-  return (
-    <Canvas>
-      <ambientLight />
-      <Terrain
-        seed={42}
-        heightScale={1}
-        bands={40}
-        baseColor="#F5F5DC" // Beige
-        contourColor="#8B4513" // SaddleBrown
-      />
-    </Canvas>
-  );
-};
+*/

citizen

@@ -1,78 +1,85 @@
-import { useState, useEffect } from 'react';
-import { MineralDepositList } from './Structures/Mining/Deposits';
-import { ControlPanel } from './Structures/Mining/ControlPanel';
-// import { TerrainMap } from './terrain-map';
-import { Inventory } from './Inventory';
+import { useState, useEffect } from 'react'
+import { MineralDepositList } from './MineralDepositList'
+import { TopographicMap } from './TopographicMap'
+import { TerrainMap } from './TerrainMap'
+import { Inventory } from './Inventory'
+import { Button } from "@/components/ui/button"
 
 type MineralDeposit = {
   id: string
   name: string
   amount: number
-  availableAmount: number
-  level: number
-  uses: string[]
   position: { x: number; y: number }
-};
+}
 
 type Rover = {
   id: string
   name: string
   speed: number
   efficiency: number
   miningLevel: number
-};
+}
 
 type InventoryItem = {
   id: string
   name: string
   amount: number
-};
+}
+
+type Landmark = {
+  id: string
+  name: string
+  description: string
+  position: { x: number; y: number }
+  isOpen: boolean
+}
+
+const MINERALS = ['Iron', 'Copper', 'Coal', 'Nickel']
+
+const LANDMARKS: Landmark[] = [
+  { id: '1', name: 'Base Camp', description: 'Main operations center for the mining colony.', position: { x: 10, y: 10 }, isOpen: false },
+  { id: '2', name: 'Power Plant', description: 'Generates power for the entire mining operation.', position: { x: 80, y: 30 }, isOpen: false },
+  { id: '3', name: 'Research Lab', description: 'Conducts studies on Martian geology and potential life.', position: { x: 30, y: 70 }, isOpen: false },
+]
 
 export function MiningComponentComponent() {
   const [mineralDeposits, setMineralDeposits] = useState<MineralDeposit[]>([])
-  const [rovers, setRovers] = useState<Rover[]>([])
+  const [rover, setRover] = useState<Rover | null>(null)
   const [selectedDeposit, setSelectedDeposit] = useState<MineralDeposit | null>(null)
-  const [selectedRover, setSelectedRover] = useState<Rover | null>(null)
   const [roverPosition, setRoverPosition] = useState<{ x: number; y: number } | null>(null)
   const [inventory, setInventory] = useState<InventoryItem[]>([])
   const [isMining, setIsMining] = useState(false)
   const [activeMap, setActiveMap] = useState<'2D' | '3D'>('2D')
+  const [landmarks, setLandmarks] = useState<Landmark[]>(LANDMARKS)
 
   useEffect(() => {
-    setMineralDeposits([
-      { id: '1', name: 'Iron', amount: 1000, availableAmount: 500, level: 1, uses: ['Construction', 'Tools'], position: { x: 200, y: 150 } },
-      { id: '2', name: 'Copper', amount: 800, availableAmount: 400, level: 2, uses: ['Electronics', 'Wiring'], position: { x: 400, y: 300 } },
-      { id: '3', name: 'Gold', amount: 500, availableAmount: 200, level: 3, uses: ['Electronics', 'Jewelry'], position: { x: 300, y: 200 } },
-      { id: '4', name: 'Titanium', amount: 600, availableAmount: 300, level: 2, uses: ['Aerospace', 'Medical'], position: { x: 500, y: 250 } },
-      { id: '5', name: 'Platinum', amount: 400, availableAmount: 150, level: 4, uses: ['Catalysts', 'Electronics'], position: { x: 150, y: 350 } },
-    ])
-    setRovers([
-      { id: '1', name: 'Rover A', speed: 10, efficiency: 0.8, miningLevel: 1 },
-      { id: '2', name: 'Rover B', speed: 15, efficiency: 0.7, miningLevel: 2 },
-      { id: '3', name: 'Rover C', speed: 12, efficiency: 0.9, miningLevel: 3 },
-      { id: '4', name: 'Rover D', speed: 18, efficiency: 0.6, miningLevel: 4 },
-    ])
-    setInventory([
-      { id: '1', name: 'Iron', amount: 0 },
-      { id: '2', name: 'Copper', amount: 0 },
-      { id: '3', name: 'Gold', amount: 0 },
-      { id: '4', name: 'Titanium', amount: 0 },
-      { id: '5', name: 'Platinum', amount: 0 },
-    ])
+    const generateDeposits = () => {
+      const deposits: MineralDeposit[] = []
+      for (let i = 0; i < 4; i++) {
+        const mineral = MINERALS[Math.floor(Math.random() * MINERALS.length)]
+        deposits.push({
+          id: `${i + 1}`,
+          name: mineral,
+          amount: Math.floor(Math.random() * 500) + 500,
+          position: { x: Math.random() * 80 + 10, y: Math.random() * 80 + 10 },
+        })
+      }
+      return deposits
+    }
+
+    setMineralDeposits(generateDeposits())
+    setRover({ id: '1', name: 'Mars Rover', speed: 15, efficiency: 0.8, miningLevel: 2 })
+    setInventory(MINERALS.map((mineral, index) => ({ id: `${index + 1}`, name: mineral, amount: 0 })))
   }, [])
 
   const handleDepositSelect = (deposit: MineralDeposit) => {
     setSelectedDeposit(deposit)
   }
 
-  const handleRoverSelect = (rover: Rover) => {
-    setSelectedRover(rover)
-  }
-
   const handleStartMining = () => {
-    if (selectedDeposit && selectedRover) {
+    if (selectedDeposit && rover) {
       setIsMining(true)
-      setRoverPosition({ x: 50, y: 50 }) // Start position
+      setRoverPosition({ x: 5, y: 5 }) // Start position
 
       const duration = 5000 // 5 seconds to reach deposit
       const startTime = Date.now()
@@ -82,18 +89,19 @@ export function MiningComponentComponent() {
         const progress = Math.min(elapsedTime / duration, 1)
 
         setRoverPosition({
-          x: 50 + (selectedDeposit.position.x - 50) * progress,
-          y: 50 + (selectedDeposit.position.y - 50) * progress
+          x: 5 + (selectedDeposit.position.x - 5) * progress,
+          y: 5 + (selectedDeposit.position.y - 5) * progress
         })
 
         if (progress < 1) {
           requestAnimationFrame(animateRover)
         } else {
           // At deposit, start mining
           setTimeout(() => {
-            setRoverPosition({ x: 50, y: 50 }) // Return to base
+            setRoverPosition({ x: 5, y: 5 }) // Return to base
             setIsMining(false)
             updateInventory(selectedDeposit.name, 50) // Add mined resources to inventory
+            setSelectedDeposit(null) // Reset selected deposit
           }, 5000) // 5 seconds at deposit
         }
       }
@@ -112,53 +120,69 @@ export function MiningComponentComponent() {
     setActiveMap(prev => prev === '2D' ? '3D' : '2D')
   }
 
+  const handleLandmarkClick = (id: string) => {
+    setLandmarks(prev => prev.map(landmark => 
+      landmark.id === id ? { ...landmark, isOpen: !landmark.isOpen } : landmark
+    ))
+  }
+
   return (
-    <div className="flex flex-col h-screen bg-gray-100 text-[#2C4F64]">
-      <div className="flex-1 p-4 overflow-hidden flex flex-col">
-        <div className="mb-4 flex-shrink-0">
-          <div className="flex justify-between items-center mb-2">
-            <h2 className="text-2xl font-bold">Mars Mining Operation</h2>
-            <button
-              onClick={toggleMap}
-              className="px-4 py-2 bg-[#5FCBC3] text-white rounded hover:bg-[#5FCBC3]/80"
-            >
-              Switch to {activeMap === '2D' ? '3D' : '2D'} Map
-            </button>
-          </div>
-          {/* {activeMap === '2D' ? (
+    <div className="relative h-screen w-full overflow-hidden bg-gray-100 text-[#2C4F64] flex flex-col">
+      <div className="flex justify-between items-center p-4">
+        <h2 className="text-2xl font-bold">Mars Mining Operation</h2>
+        <Button
+          onClick={toggleMap}
+          variant="outline"
+          className="text-[#2C4F64] hover:bg-[#5FCBC3]/20"
+        >
+          Switch to {activeMap === '2D' ? '3D' : '2D'} Map
+        </Button>
+      </div>
+      <div className="flex-grow flex flex-col md:flex-row overflow-hidden">
+        <div className="w-full md:w-3/4 h-1/2 md:h-full relative">
+          {activeMap === '2D' ? (
             <TopographicMap 
               deposits={mineralDeposits} 
               roverPosition={roverPosition}
               selectedDeposit={selectedDeposit}
+              landmarks={landmarks}
+              onLandmarkClick={handleLandmarkClick}
             />
           ) : (
             <TerrainMap 
               deposits={mineralDeposits} 
               roverPosition={roverPosition}
               selectedDeposit={selectedDeposit}
+              landmarks={landmarks}
+              onLandmarkClick={handleLandmarkClick}
             />
-          )} */}
+          )}
         </div>
-        <div className="grid grid-cols-2 gap-4 flex-grow overflow-hidden">
-          {/* <div className="bg-white rounded-lg p-4 shadow overflow-hidden flex flex-col">
-            <MineralDepositList 
-              deposits={mineralDeposits} 
-              onSelect={handleDepositSelect} 
-              selectedDeposit={selectedDeposit}
-            />
+        <div className="w-full md:w-1/4 h-1/2 md:h-full overflow-y-auto bg-white bg-opacity-90 p-4">
+          <div className="space-y-4">
+            {selectedDeposit ? (
+              <div>
+                <h3 className="text-lg font-semibold mb-2">Selected Deposit: {selectedDeposit.name}</h3>
+                <p>Amount: {selectedDeposit.amount} units</p>
+                <Button 
+                  onClick={handleStartMining} 
+                  disabled={isMining}
+                  className="w-full mt-4"
+                >
+                  {isMining ? 'Mining...' : 'Start Mining'}
+                </Button>
+              </div>
+            ) : (
+              <MineralDepositList 
+                deposits={mineralDeposits} 
+                onSelect={handleDepositSelect}
+                selectedDeposit={selectedDeposit}
+              />
+            )}
           </div>
-          <div className="bg-white rounded-lg p-4 shadow overflow-hidden flex flex-col">
-            <ControlPanel 
-              rovers={rovers}
-              selectedRover={selectedRover}
-              onRoverSelect={handleRoverSelect}
-              onStartMining={handleStartMining}
-              isMining={isMining}
-            />
-          </div> */}
         </div>
       </div>
-      <div className="h-24 bg-white p-4 shadow flex-shrink-0">
+      <div className="bg-white bg-opacity-90 p-4 border-t border-gray-200">
         <Inventory inventory={inventory} />
       </div>
     </div>