🛵🍯 ↝ [SSP-41]: Asteroid Generator is working now

Author: Gizmotronn

components/Data/Generator/Astronomers/DailyMinorPlanet/asteroid-viewer.tsx

@@ -1,25 +1,31 @@
-import { Canvas } from "@react-three/fiber"
-import { Stars, OrbitControls } from "@react-three/drei";
+"use client";
+
+import { Canvas } from "@react-three/fiber";
+import { OrbitControls } from "@react-three/drei";
 import { Slider } from "@/components/ui/slider";
 import { useState } from "react";
 import { Asteroid } from "./Asteroid";
-import { Effects } from "./effects";
+import { Background } from "./background";
+
+interface AsteroidGeneratorProps {
+  classificationConfig?: any;
+  classificationId: string;
+};
 
-export default function AsteroidViewer() {
+export default function AsteroidViewer({ classificationConfig, classificationId }: AsteroidGeneratorProps) {
   const [metallic, setMetallic] = useState(0.5)
 
   return (
     <div className="w-full h-screen bg-black">
       <Canvas camera={{ position: [0, 0, 4] }}>
-        <color attach="background" args={["black"]} />
-        <Stars radius={100} depth={50} count={5000} factor={4} saturation={0} fade speed={1} />
+        <Background />
         <Asteroid metallic={metallic} />
         <OrbitControls enableZoom={false} autoRotate autoRotateSpeed={1} />
-        <Effects />
       </Canvas>
       <div className="absolute bottom-8 left-1/2 -translate-x-1/2 w-64 bg-black/50 p-4 rounded-lg">
-        <label className="text-white text-sm mb-2 block">Material Type</label>
+        <label htmlFor="material-slider" className="text-white text-sm mb-2 block">Material Type</label>
         <Slider
+          id="material-slider"
           value={[metallic]}
           onValueChange={([value]) => setMetallic(value)}
           max={1}

components/Data/Generator/Astronomers/DailyMinorPlanet/background.tsx

@@ -0,0 +1,63 @@
+import { useRef, useMemo } from "react"
+import * as THREE from "three"
+import { useFrame } from "@react-three/fiber"
+
+const vertexShader = `
+  varying vec2 vUv;
+  void main() {
+    vUv = uv;
+    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+  }
+`
+
+const fragmentShader = `
+  uniform float time;
+  varying vec2 vUv;
+
+  float random(vec2 st) {
+    return fract(sin(dot(st.xy, vec2(12.9898,78.233))) * 43758.5453123);
+  }
+
+  void main() {
+    vec2 uv = vUv;
+    
+    // Create a noisy background
+    float noise = random(uv + time * 0.1);
+    vec3 color = vec3(noise * 0.15);
+
+    // Add stars
+    float star = step(0.998, random(uv));
+    color += star;
+
+    gl_FragColor = vec4(color, 1.0);
+  }
+`
+
+export function Background() {
+  const shaderRef = useRef<THREE.ShaderMaterial>(null)
+
+  const uniforms = useMemo(
+    () => ({
+      time: { value: 0 },
+    }),
+    []
+  )
+
+  useFrame((state) => {
+    if (shaderRef.current) {
+      shaderRef.current.uniforms.time.value = state.clock.elapsedTime
+    }
+  })
+
+  return (
+    <mesh>
+      <planeGeometry args={[2, 2]} />
+      <shaderMaterial
+        ref={shaderRef}
+        vertexShader={vertexShader}
+        fragmentShader={fragmentShader}
+        uniforms={uniforms}
+      />
+    </mesh>
+  );
+};

components/Structures/Missions/Astronomers/DailyMinorPlanet/AsteroidMaker.tsx

@@ -0,0 +1,99 @@
+"use client";
+
+import React, { useEffect, useState } from "react";
+import { PostCardSingleWithGenerator } from "@/content/Posts/PostWithGen";
+import { useSession, useSupabaseClient } from "@supabase/auth-helpers-react";
+
+interface Classification {
+    id: number;
+    created_at: string;
+    content: string | null; 
+    author: string | null;
+    anomaly: number | null;
+    media: any | null; 
+    classificationtype: string | null;
+    classificationConfiguration: any | null; 
+};
+
+export default function DMPGenerator() {
+    const supabase = useSupabaseClient();
+    const session = useSession();
+
+    const [classifications, setClassifications] = useState<any[]>([]);
+    const [loading, setLoading] = useState<boolean>(true);
+    const [error, setError] = useState<string | null>(null);
+
+    const fetchClassifications = async () => {
+        if (!session?.user) {
+          setError("User session not found.");
+          setLoading(false);
+          return;
+        };
+      
+        setLoading(true);
+        setError(null);
+        try {
+          const { data, error } = await supabase
+            .from('classifications')
+            .select('*')
+            .eq("author", session.user.id)
+            .eq('classificationtype', 'telescope-minorPlanet')
+            .order('created_at', { ascending: false }) as { data: Classification[]; error: any };
+      
+          if (error) throw error;
+      
+          const processedData = data.map((classification) => {
+            const media = classification.media;
+            let images: string[] = [];
+      
+            if (Array.isArray(media) && media.length === 2 && typeof media[1] === "string") {
+              images.push(media[1]);
+            } else if (media && media.uploadUrl) {
+              images.push(media.uploadUrl);
+            };
+      
+            const votes = classification.classificationConfiguration?.votes || 0;
+      
+            return { ...classification, images, votes };
+          });
+      
+          setClassifications(processedData);
+        } catch (error) {
+          console.error("Error fetching classifications:", error);
+          setError("Failed to load classifications.");
+        } finally {
+          setLoading(false);
+        };
+    };  
+
+    useEffect(() => {
+        fetchClassifications();
+    }, [session]);
+
+    return (
+        <div className="space-y-8">
+            {loading ? (
+                <p>Loading classifications</p>
+            ) : error ? (
+                <p>{error}</p>
+            ) : (
+                classifications.map((classification) => (
+                    <PostCardSingleWithGenerator
+                      key={classification.id}
+                      classificationId={classification.id}
+                      title={classification.title}
+                      author={classification.author}
+                      content={classification.content}
+                      votes={classification.votes || 0}
+                      category={classification.category}
+                      tags={classification.tags || []}
+                      images={classification.images || []}
+                      anomalyId={classification.anomaly}
+                      classificationConfig={classification.classificationConfiguration}
+                      classificationType={classification.classificationtype}
+                    />
+                ))
+            )}
+        </div>
+    );
+};

components/Structures/Missions/Astronomers/DailyMinorPlanet/DailyMinorPlanet.tsx

@@ -4,6 +4,7 @@ import { BarChartBigIcon, GlassWater, Guitar, PenBoxIcon, RadioIcon, SpeechIcon,
 import MissionShell from "../../BasePlate";
 import { DailyMinorPlanet } from "@/components/Projects/Telescopes/DailyMinorPlanet";
 import VoteDMPClassifications from "./DMPVote";
+import DMPGenerator from "./AsteroidMaker";
 
 const DailyMinorPlanetMissions = () => {
   const supabase = useSupabaseClient();
@@ -73,7 +74,7 @@ const DailyMinorPlanetMissions = () => {
       icon: Guitar,
       points: 2,
       completedCount: 0,
-      // internalComponent: () => <div></div>,
+      internalComponent: () => <div><DMPGenerator /></div>,
       color: 'text-green-300',
       shadow: true,
       action: () => {},

content/Posts/PostWithGen.tsx

@@ -11,6 +11,7 @@ import { CommentCard } from "../Comments/CommentSingle";
 
 import CloudSignal from "@/components/Structures/Missions/Meteorologists/Cloudspotting/CloudSignal";
 import PlanetGenerator from "@/components/Data/Generator/Astronomers/PlanetHunters/PlanetGenerator";
+import AsteroidViewer from "@/components/Data/Generator/Astronomers/DailyMinorPlanet/asteroid-viewer";
 
 interface CommentProps {
   id: number;
@@ -95,6 +96,11 @@ export function PostCardSingleWithGenerator({
           classificationConfig={classificationConfig}
           author={author}
         />;
+      case "telescope-minorPlanet":
+        return <AsteroidViewer 
+          classificationId={String(classificationId)} 
+          classificationConfig={classificationConfig}
+        />;
       default:
         return (
           <div>

package.json

@@ -32,7 +32,7 @@
     "@radix-ui/react-toggle": "^1.1.0",
     "@react-three/drei": "^9.120.4",
     "@react-three/fiber": "^8.17.10",
-    "@react-three/postprocessing": "^2.16.3",
+    "@react-three/postprocessing": "^2.16.5",
     "@supabase/auth-helpers-nextjs": "^0.10.0",
     "@supabase/auth-helpers-react": "^0.5.0",
     "@supabase/auth-ui-react": "^0.4.7",

yarn.lock

@@ -1843,20 +1843,13 @@
   dependencies:
     "@radix-ui/react-compose-refs" "1.1.0"
 
-"@radix-ui/react-slot@1.1.1":
+"@radix-ui/react-slot@1.1.1", "@radix-ui/react-slot@^1.1.1":
   version "1.1.1"
   resolved "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.1.1.tgz"
   integrity sha512-RApLLOcINYJA+dMVbOju7MYv1Mb2EBp2nH4HdDzXTSyaR5optlm6Otrz1euW3HbdOR8UmmFK06TD+A9frYWv+g==
   dependencies:
     "@radix-ui/react-compose-refs" "1.1.1"
 
-"@radix-ui/react-slot@^1.1.1":
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/@radix-ui/react-slot/-/react-slot-1.1.1.tgz#ab9a0ffae4027db7dc2af503c223c978706affc3"
-  integrity sha512-RApLLOcINYJA+dMVbOju7MYv1Mb2EBp2nH4HdDzXTSyaR5optlm6Otrz1euW3HbdOR8UmmFK06TD+A9frYWv+g==
-  dependencies:
-    "@radix-ui/react-compose-refs" "1.1.1"
-
 "@radix-ui/react-switch@^1.1.1":
   version "1.1.1"
   resolved "https://registry.npmjs.org/@radix-ui/react-switch/-/react-switch-1.1.1.tgz"
@@ -2193,10 +2186,10 @@
     suspend-react "^0.1.3"
     zustand "^3.7.1"
 
-"@react-three/postprocessing@^2.16.3":
-  version "2.16.3"
-  resolved "https://registry.yarnpkg.com/@react-three/postprocessing/-/postprocessing-2.16.3.tgz#91bad6a541db7573f3100f1c7edf67d22c66413e"
-  integrity sha512-ftodXpUsy0/mzn0KqyV7MBau71dD9C5UOFnB3kHhCLNoxjKYQWZa9do0olJTSkl3owYXRfNHcLriK1Xn8wxZJw==
+"@react-three/postprocessing@^2.16.5":
+  version "2.16.5"
+  resolved "https://registry.yarnpkg.com/@react-three/postprocessing/-/postprocessing-2.16.5.tgz#861db992b8781e54f97b79dee48f84942817cdf5"
+  integrity sha512-LcZy25bSz1g9n/QgSRUfgESXnAUDDDeQBI6FJ9DZsxCBukbgxjT9BHexVIu9JJ3G8SkRi8I68Ii+zytP51D9dg==
   dependencies:
     buffer "^6.0.3"
     maath "^0.6.0"