🍳🐌 ↝ [SSC-68 SSC-69 SSP-55]: Can now comment temperature values

components/Projects/Lidar/Clouds.tsx

@@ -6,8 +6,13 @@ import { useActivePlanet } from "@/context/ActivePlanet";
 import ClassificationForm from "@/components/Projects/(classifications)/PostForm";
 import { Anomaly } from "../Telescopes/Transiting";
 import { CloudspottingOnMars } from "./cloudspottingOnMars"; 
+import PreferredTerrestrialClassifications from "@/components/Structures/Missions/PickPlanet";
 
-export function StarterLidar() {
+interface SelectedAnomProps {
+    anomalyid?: number;
+};
+
+export function StarterLidar({ anomalyid }: SelectedAnomProps) {
     const supabase = useSupabaseClient();
     const session = useSession();
 
@@ -136,8 +141,24 @@ export function StarterLidar() {
                     missionNumber={100000034}
                     assetMentioned={imageUrl || ""}
                     structureItemId={3105}
+                    parentPlanetLocation={anomalyid?.toString()}
                 />
             </div>
         </div>
     );
-};
+};
+
+export function CloudspottingWrapper() {
+    const [selectedAnomaly, setSelectedAnomaly] = useState<number | null>(null);
+
+    return (
+        <div className="space-y-8">
+            {!selectedAnomaly && (
+                <PreferredTerrestrialClassifications onSelectAnomaly={setSelectedAnomaly} />
+            )}
+            {selectedAnomaly && (
+                <StarterLidar anomalyid={selectedAnomaly} />
+            )}
+        </div>
+    )
+}

components/Structures/Missions/Astronomers/PlanetHunters/PlanetTemperature.tsx

@@ -7,7 +7,7 @@ interface ClassificationConfiguration {
   classificationOptions: { [key: string]: any };
   temperature?: string;
   votes?: number;
-}
+};
 
 interface Classification {
   author: string;
@@ -21,7 +21,80 @@ interface Classification {
   image_url?: string;
   images?: string[];
   votes?: number;
-}
+};
+
+const calculatePlanetTemperature = (
+  surfaceTempStar: number,
+  orbitalPeriodDays: number,
+  albedo: number = 0.3
+): number => {
+  const orbitalPeriodSeconds = orbitalPeriodDays * 24 * 60 * 60;
+  const semiMajorAxis = Math.cbrt((orbitalPeriodSeconds ** 2 * 6.67430e-11 * 1.989e30) / (4 * Math.PI ** 2));
+  const flux = (surfaceTempStar ** 4 * 5.670374419e-8) / (4 * Math.PI * semiMajorAxis ** 2);
+  const equilibriumTemp = ((1 - albedo) * flux / (4 * 5.670374419e-8)) ** 0.25;
+  return Math.round(equilibriumTemp - 273.15); // Convert to Celsius
+};
+
+const Calculator: React.FC = () => {
+  const [surfaceTempStar, setSurfaceTempStar] = useState("");
+  const [orbitalPeriodDays, setOrbitalPeriodDays] = useState("");
+  const [albedo, setAlbedo] = useState("0.3");
+  const [result, setResult] = useState<number | null>(null);
+
+  const handleCalculate = () => {
+    const tempStar = parseFloat(surfaceTempStar);
+    const periodDays = parseFloat(orbitalPeriodDays);
+    const albedoValue = parseFloat(albedo);
+    if (!isNaN(tempStar) && !isNaN(periodDays) && !isNaN(albedoValue)) {
+      setResult(calculatePlanetTemperature(tempStar, periodDays, albedoValue));
+    }
+  };
+
+  return (
+    <div className="p-4 rounded shadow-md text-white bg-blackboard">
+      <h3 className="text-lg font-bold mb-4">Temperature Calculator</h3>
+      <div className="mb-2">
+        <label className="block text-gray-300">Star Surface Temperature (K)</label>
+        <input
+          type="number"
+          value={surfaceTempStar}
+          onChange={(e) => setSurfaceTempStar(e.target.value)}
+          className="w-full p-2 rounded bg-gray-800 text-white border border-gray-600"
+        />
+      </div>
+      <div className="mb-2">
+        <label className="block text-gray-300">Orbital Period (days)</label>
+        <input
+          type="number"
+          value={orbitalPeriodDays}
+          onChange={(e) => setOrbitalPeriodDays(e.target.value)}
+          className="w-full p-2 rounded bg-gray-800 text-white border border-gray-600"
+        />
+      </div>
+      <div className="mb-2">
+        <label className="block text-gray-300">Albedo</label>
+        <input
+          type="number"
+          step="0.01"
+          value={albedo}
+          onChange={(e) => setAlbedo(e.target.value)}
+          className="w-full p-2 rounded bg-gray-800 text-white border border-gray-600"
+        />
+      </div>
+      <button
+        onClick={handleCalculate}
+        className="w-full p-2 bg-blue-500 rounded text-white hover:bg-blue-600"
+      >
+        Calculate
+      </button>
+      {result !== null && (
+        <p className="mt-4 text-green-400 text-center">
+          Estimated Temperature: {result}°C
+        </p>
+      )}
+    </div>
+  );
+};
 
 const PlanetTemperatureForm: React.FC = () => {
   const supabase = useSupabaseClient();
@@ -125,7 +198,7 @@ const PlanetTemperatureForm: React.FC = () => {
 
   if (loading) {
     return <>Loading...</>;
-  }
+  };
 
   return (
     <div className="flex flex-col justify-center items-center">
@@ -139,9 +212,11 @@ const PlanetTemperatureForm: React.FC = () => {
               content={currentClassification.content || ""}
               category={currentClassification.classificationtype || "Planet"}
               images={currentClassification.images || []}
-            //   votes={currentClassification.votes || 0}
             />
           </SciFiPanel>
+          <SciFiPanel>
+            <Calculator />
+          </SciFiPanel>
           <SciFiPanel>
             <div className="flex flex-col items-center mt-4 gap-4">
               <textarea
@@ -165,12 +240,12 @@ const PlanetTemperatureForm: React.FC = () => {
               </button>
               <button
                 onClick={fetchRandomClassification}
-                className="px-4 py-2 text-white bg-gray-500 rounded mt-2"
+                className="px-4 py-2 text-white bg-green-500 rounded mt-2"
               >
-                Show Random Post
+                Select a different planet
               </button>
             </div>
-          </SciFiPanel>
+            </SciFiPanel>
         </div>
       ) : (
         <div>No classifications found.</div>

components/Structures/Missions/Astronomers/PlanetHunters/PlanetType.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useState } from "react";
 import { useSupabaseClient, useSession } from "@supabase/auth-helpers-react";
 import { PostCardSingle } from "@/content/Posts/PostSingle";
+import { SimplePostSingle } from "@/content/Posts/SimplePostSingle";
 
 interface Classification {
   author: string;
@@ -44,10 +45,20 @@ const PlanetTypeCommentForm = () => {
           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);
+          if (Array.isArray(media)) {
+            media.forEach((item) => {
+              if (typeof item === "string" && item.startsWith("http")) {
+                images.push(item);
+              } else if (Array.isArray(item)) {
+                item.forEach((nested) => {
+                  if (typeof nested === "string" && nested.startsWith("http")) {
+                    images.push(nested);
+                  }
+                });
+              } else if (typeof item === "object" && item.uploadUrl) {
+                images.push(item.uploadUrl);
+              }
+            });
           }
 
           const votes = classification.classificationConfiguration?.votes || 0;
@@ -169,7 +180,7 @@ const PlanetTypeCommentForm = () => {
       console.log("Comment inserted successfully with planet type.");
     } catch (err) {
       console.error("Error inserting comment: ", err);
-    }
+    };
   };
 
   const handleCommentInputChange = (classificationId: number, value: string) => {
@@ -184,7 +195,15 @@ const PlanetTypeCommentForm = () => {
         <div className="space-y-8">
           {classifications.map((classification) => (
             <div key={classification.id} className="space-y-4">
-              <PostCardSingle
+              <SimplePostSingle
+                id={classification.id.toString()}
+                title={`Planet discovery #${classification.id}`}
+                author={classification.author || "Unknown"}
+                content={classification.content || ""}
+                category={classification.classificationtype || "Planet"}
+                images={classification.images || []}
+              />
+              {/* <PostCardSingle
                 key={classification.id}
                 classificationId={classification.id}
                 title={classification.title}
@@ -198,7 +217,7 @@ const PlanetTypeCommentForm = () => {
                 classificationConfig={classification.classificationConfiguration}
                 classificationType={classification.classificationtype}
                 commentStatus={false}
-              />
+              /> */}
               <p className="text-sm italic text-cyan-500">{classification.content}</p>
               {classification.image_url && (
                 <img

components/Structures/Missions/Meteorologists/Cloudspotting/CloudspottingOnMars.tsx

@@ -2,7 +2,7 @@ import { useEffect, useState } from "react";
 import { useSupabaseClient, useSession } from "@supabase/auth-helpers-react";
 import MissionShell from "../../BasePlate";
 import { CloudCogIcon, FolderCog, PaintBucket, Vote } from "lucide-react";
-import { StarterLidar } from "@/components/Projects/Lidar/Clouds";
+import { CloudspottingWrapper, StarterLidar } from "@/components/Projects/Lidar/Clouds";
 import VoteCoMClassifications from "./CoMVote";
 import CloudClassificationGenerator from "./CloudMaker";
 
@@ -42,7 +42,7 @@ const CloudspottingOnMars = () => {
                 icon: CloudCogIcon,
                 points: 2,
                 completedCount: 0,
-                internalComponent: () => <StarterLidar />,
+                internalComponent: () => <CloudspottingWrapper />,
                 color: "text-blue-500",
             },
             {