🔩🎾 ↝ [SSG-50]: Community station initialisation

app/api/gameplay/communityStations/projects/31011/route.ts

@@ -0,0 +1,60 @@
+import { NextRequest, NextResponse } from 'next/server';
+
+interface Project {
+  id: string;
+  name: string;
+  identifier: string;
+  missionRoute: number;
+};
+
+interface Mission {
+  id: string;
+  name: string;
+  type: string;
+  project: string;
+  missionRouteId?: number;
+};
+
+interface CommunityStationConfig {
+  stationName: string;
+  inventoryItemId: number;
+  projects: Project[];
+  missions: Mission[];
+};
+
+const greenhouseStation: CommunityStationConfig = {
+  stationName: "Greenhouse",
+  inventoryItemId: 31011,
+  projects: [
+    {
+      id: "1",
+      name: "Wildwatch Burrowing Owls",
+      identifier: "zoodex-burrOwls",
+      missionRoute: 3000002,
+    },
+    {
+      id: "2",
+      name: "Iguanas from Above",
+      identifier: "zoodex-iguanasFromAbove",
+      missionRoute: 3000004,
+    },
+  ],
+  missions: [
+    {
+      id: "1",
+      name: "Spot an owl in the wild",
+      type: "Upload",
+      project: "1",
+    },
+    {
+      id: "2",
+      name: "Track iguana movement",
+      type: "Analysis",
+      project: "2",
+    },
+  ],
+};
+
+export async function GET(req: NextRequest) {
+  return NextResponse.json(greenhouseStation);
+};

app/api/gameplay/communityStations/projects/route.ts

@@ -0,0 +1,110 @@
+import { NextRequest, NextResponse } from 'next/server';
+import React from 'react';
+
+import { BurrowingOwl } from '@/components/Projects/Zoodex/burrowingOwls';
+import { ZoodexIguanas } from '@/components/Projects/Zoodex/iguanasFromAbove';
+
+interface Project {
+  id: string;
+  name: string;
+  identifier: string;
+  component: React.ComponentType;
+  missionRoute: number;
+  structure: string;
+  // isUnlocked: boolean; // Uncomment if needed
+  // level: number; // Uncomment if needed
+}
+
+interface Mission {
+  id: string;
+  name: string;
+  type: string;
+  // completionRate: number; // Uncomment if needed
+  project: string;
+  // level: number; // Uncomment if needed
+  // isUnlocked: boolean; // Uncomment if needed
+}
+
+interface CommunityStationConfig {
+  stationName: string;
+  inventoryItemId: number;
+  projects: Project[];
+  missions: Mission[];
+}
+
+const greenhouseStation: CommunityStationConfig = {
+  stationName: "Greenhouse",
+  inventoryItemId: 31011,
+  projects: [
+    {
+      id: "1",
+      name: "Wildwatch Burrowing Owls",
+      identifier: "zoodex-burrowingOwls",
+      component: BurrowingOwl,
+      structure: "Zoodex",
+      missionRoute: 3000002,
+    },
+    {
+      id: "2",
+      name: "Iguanas from Above",
+      identifier: "zoodex-iguanasFromAbove",
+      component: ZoodexIguanas,
+      structure: "Zoodex",
+      missionRoute: 3000004,
+    },
+  ],
+  missions: [
+    {
+      id: "1",
+      name: "Spot an owl in the wild",
+      type: "Upload",
+      project: "1",
+    },
+    {
+      id: "2",
+      name: "Track iguana movement",
+      type: "Analysis",
+      project: "2",
+    },
+  ],
+};
+
+const weatherBalloonStation: CommunityStationConfig = {
+  stationName: "Weather balloon",
+  inventoryItemId: 31012,
+  projects: [],
+  missions: [
+    {
+      id: "1",
+      name: "Determine planet type to allow for population of relevant anomalies, and then attribute some clouds",
+      type: "Upload",
+      project: "1",
+    },
+  ],
+};
+
+const spaceTelescopeStation: CommunityStationConfig = {
+  stationName: "Space telescope",
+  inventoryItemId: 31013,
+  projects: [],
+  missions: [
+    {
+      id: "1",
+      name: "Map planet type based on lightcurve information", // and then we can attribute/participate other missions/projects",
+      type: "Upload",
+      project: "1",
+    },
+  ],
+};
+
+export async function GET(req: NextRequest) {
+  const response = {
+    stations: [
+      greenhouseStation,
+      weatherBalloonStation,
+      spaceTelescopeStation,
+    ],
+  };
+
+  return NextResponse.json(response);
+};

app/api/gameplay/inventory/route.ts

@@ -10,7 +10,7 @@ export interface InventoryItem {
   description: string;
   cost?: number;
   icon_url: string;
-  ItemCategory: string;
+  ItemCategory: string; 
   parentItem?: number | null;
   itemLevel?: number;
   locationType?: string;
@@ -84,6 +84,32 @@ const inventoryItems: InventoryItem[] = [
     ItemCategory: "Structure",
     locationType: 'Surface',
   },
+
+  // Community stations
+  {
+    id: 31011,
+    name: "Greenhouse",
+    description: "Collect and study biological anomalies across multiple locations",
+    icon_url: "/assets/Items/Greenhouse.png",
+    ItemCategory: 'CommunityStation',
+    locationType: 'Surface',
+  },
+  {
+    id: 31012,
+    name: "Weather balloon",
+    description: "Collect and study weather events and entities more closely in your planet's atmosphere",
+    icon_url: "/assets/Items/WeatherBalloon.png",
+    ItemCategory: 'CommunityStation',
+    locationType: 'Atmosphere',
+  },
+  {
+    id: 31013,
+    name: "Space Telescope",
+    description: "Collect & compare discoveries more readily per-location", // to-update
+    icon_url: "/assets/Items/SpaceTelescope.png",
+    ItemCategory: 'CommunityStation',
+    locationType: 'Orbital',
+  },
 
   // Tests
   {

app/auth/onlineUsers.tsx

@@ -0,0 +1,49 @@
+'use client';
+
+import React, { useState, useEffect } from "react";
+import { useSupabaseClient, useSession } from "@supabase/auth-helpers-react";
+
+export default function OnlineUserList() {
+    const supabase = useSupabaseClient();
+    const session = useSession();  // Session must be loaded first
+    const [onlineUsers, setOnlineUsers] = useState(0);
+
+    useEffect(() => {
+        // Wait until session is ready
+        if (!session?.user?.id) return;
+
+        const roomOne = supabase.channel('room_01', {
+            config: {
+                presence: {
+                    key: session.user.id,  // Ensure session user id is used correctly
+                },
+            },
+        });
+
+        roomOne
+            .on('presence', { event: 'sync' }, () => {
+                const currentPresenceState = roomOne.presenceState();
+                const onlineUsersCount = Object.keys(currentPresenceState).length;
+                setOnlineUsers(onlineUsersCount);
+            })
+            .on('presence', { event: 'join' }, ({ key, newPresences }) => {
+                console.log('User joined:', key, newPresences);
+            })
+            .on('presence', { event: 'leave' }, ({ key, leftPresences }) => {
+                console.log('User left:', key, leftPresences);
+            })
+            .subscribe();
+
+        // Clean up the subscription on unmount
+        return () => {
+            roomOne.unsubscribe();
+        };
+    }, [session?.user?.id, supabase]);
+
+    return (
+        <div className="flex items-center gap-1">
+            <div className="h-4 w-4 bg-green-500 rounded-full animate-pulse"></div>
+            <h1 className='text-sm text-gray-400'>{onlineUsers} Online</h1>
+        </div>
+    );
+};

app/layout.tsx

@@ -14,10 +14,11 @@ import { Analytics } from "@vercel/analytics/react"
 import { MissionProvider } from "@/context/MissionContext";
 import TutorialPopup from "../content/Dialogue/helpButton";
 import AppLayout from "@/components/Layout/Layout";
+import Header from "@/components/ui/Header";
 
 interface RootLayoutProps {
   children: ReactNode;
-}
+};
 
 export default function RootLayout({ children }: RootLayoutProps) {
   const [supabaseClient] = useState(() => createPagesBrowserClient());

app/page.tsx

@@ -1,8 +1,6 @@
 "use client"
 
-import { OnboardingLayout } from "@/components/Template";
 import { useSession, useSupabaseClient } from "@supabase/auth-helpers-react";
-import { Landing } from "@/components/landing";
 import { useEffect, useState } from "react";
 import LoginPage from "./auth/LoginModal";
 import OnboardingWindow from "../components/(scenes)/chapters/(onboarding)/window";

app/scenes/globe/Structures.tsx

@@ -8,6 +8,7 @@ import { StructuresConfigForSandbox } from "@/constants/Structures/SandboxProper
 import { InventoryStructureItem, StructureItemDetail } from "@/types/Items";
 import { useActivePlanet } from "@/context/ActivePlanet";
 import "../../../styles/Anims/StarterStructureAnimations.css";
+import { CreateCommunityStation } from "@/components/Structures/Build/MakeCommunityStation";
 
 interface StructuresOnPlanetProps {
     onStructuresFetch: (
@@ -105,6 +106,9 @@ export default function StructuresOnPlanet({ onStructuresFetch }: StructuresOnPl
 
     return (
   <div className="relative">
+                <div className="mx-3">
+                  <CreateCommunityStation />
+                </div>
               <div className={`grid grid-cols-3 gap-1 gap-y-3 relative ${userStructuresOnPlanet.length === 1 ? 'justify-center' : ''}`}>
                   {userStructuresOnPlanet.map((structure) => {
                       const itemDetail = itemDetails.get(structure.item);
@@ -136,7 +140,11 @@ export default function StructuresOnPlanet({ onStructuresFetch }: StructuresOnPl
                       onClose={handleClose}
                   />
               )}
-              <UnownedSurfaceStructures />
+              <div className="m">
+                <div className="mx-3">
+                  <UnownedSurfaceStructures />
+                </div>
+              </div>
           </div>
     );
 };