diff --git a/.gitignore b/.gitignore index dae8c0c3..d2dd5f3e 100644 --- a/.gitignore +++ b/.gitignore @@ -6,6 +6,11 @@ .pnp.js .env +citizen +/citizen +supabase +/supabase + # testing /coverage .env diff --git a/components/Content/Inventory/UserOwnedItems.tsx b/components/Content/Inventory/UserOwnedItems.tsx index 077e2364..97603429 100644 --- a/components/Content/Inventory/UserOwnedItems.tsx +++ b/components/Content/Inventory/UserOwnedItems.tsx @@ -81,10 +81,80 @@ const OwnedItemsList: React.FC = () => { })} ); - }; +}; export default OwnedItemsList; +interface InventoryItem { + id: number; + name: string; + icon_url: string; + quantity: number; +} + +export const ItemsVerticalList: React.FC = () => { + const session = useSession(); + const [itemDetails, setItemDetails] = useState([]); + const supabase = useSupabaseClient(); + + useEffect(() => { + const fetchOwnedItems = async () => { + try { + if (!session) return; + + const user = session.user.id; + // Fetch owned items from the database + const { data: ownedItemsData, error: ownedItemsError } = await supabase + .from('inventoryUSERS') + .select('*') + .eq('owner', user) + .gt('id', 20); + + if (ownedItemsError) { + throw ownedItemsError; + } + + if (ownedItemsData) { + const itemIds = ownedItemsData.map(item => item.item); + // Fetch details of owned items + const { data: itemDetailsData, error: itemDetailsError } = await supabase + .from('inventoryITEMS') + .select('*') + .in('id', itemIds); + + if (itemDetailsError) { + throw itemDetailsError; + } + + if (itemDetailsData) { + setItemDetails(itemDetailsData); + } + } + } catch (error) { + console.error('Error fetching owned items:', error.message); + } + }; + + fetchOwnedItems(); + }, [session]); + + return ( +
+ {itemDetails.map(item => ( +
+
+
+ {item.name} +
+

{item.name}

+
+

x{item.quantity}

+
+ ))} +
+ ); +}; + export const SectorStructureOwned: React.FC<{ sectorid: string }> = ({ sectorid }) => { const supabase = useSupabaseClient(); const session = useSession(); diff --git a/components/Content/Planets/Construction/GlobeClickable.tsx b/components/Content/Planets/Construction/GlobeClickable.tsx new file mode 100644 index 00000000..969b683c --- /dev/null +++ b/components/Content/Planets/Construction/GlobeClickable.tsx @@ -0,0 +1,70 @@ +import { useEffect, useRef } from "react"; +import * as THREE from "three"; +import { Sprite, SpriteMaterial, TextureLoader } from "three"; +import { useFrame } from "@react-three/fiber"; + +interface Landmass { + lat: number; + lng: number; + imageURL: string; + onClickFunction: () => void; +} + +interface ClickableImagesProps { + landmasses: Landmass[]; +} + +function ClickableImages({ landmasses }: ClickableImagesProps) { + const groupRef = useRef(null); + + useEffect(() => { + if (groupRef.current) { + landmasses.forEach((landmass) => { + const { lat, lng, imageURL, onClickFunction } = landmass; + + // Load texture + const textureLoader = new TextureLoader(); + const texture = textureLoader.load(imageURL); + + // Create a sprite with the texture + const spriteMaterial = new SpriteMaterial({ map: texture }); + const sprite = new Sprite(spriteMaterial); + + // Set the size of the sprite + const size = 8; // Adjust size as needed (e.g. 8 for Tailwind scale) + sprite.scale.set(size, size, 1); + + // Convert lat/lng to 3D coordinates + const radius = 100; // Adjust radius as needed + const phi = (90 - lat) * (Math.PI / 180); + const theta = lng * (Math.PI / 180); + sprite.position.set( + radius * Math.sin(phi) * Math.cos(theta), + radius * Math.cos(phi), + radius * Math.sin(phi) * Math.sin(theta) + ); + + // Create a click handler for the sprite + const handleClick = (event: any) => { + event.stopPropagation(); + onClickFunction(); + }; + + // Add event listener to the sprite for the 'click' event + sprite.addEventListener('click', handleClick); + + // Add the sprite to the group + groupRef.current.add(sprite); + }); + } + }, [landmasses]); + + // Use useFrame hook to continuously update the scene if needed + useFrame(() => { + // Add any animation logic here if required + }); + + return ; +} + +export default ClickableImages; \ No newline at end of file diff --git a/components/Content/Planets/GalleryList.tsx b/components/Content/Planets/GalleryList.tsx index c83e78f8..6c7792ce 100644 --- a/components/Content/Planets/GalleryList.tsx +++ b/components/Content/Planets/GalleryList.tsx @@ -122,8 +122,8 @@ const PlanetGalleryWithSectors: React.FC = () => { let query = supabase .from('basePlanets') .select('*') - .order('created_at', { ascending: false }) - .limit(200); + .order('created_at', { ascending: true }) + .limit(3); // Set this to be owned planets const { data, error } = await query; @@ -302,12 +302,12 @@ export const Garden: React.FC = ({ onClose }) => {
- + */}
diff --git a/components/Content/Planets/PlanetGlobe.tsx b/components/Content/Planets/PlanetGlobe.tsx new file mode 100644 index 00000000..85689501 --- /dev/null +++ b/components/Content/Planets/PlanetGlobe.tsx @@ -0,0 +1,304 @@ +import { useEffect, useRef, useState } from "react"; +import { Color, Scene, Fog, PerspectiveCamera, Vector3 } from "three"; +import ThreeGlobe from "three-globe"; +import { useThree, Object3DNode, Canvas, extend } from "@react-three/fiber"; +import { OrbitControls } from "@react-three/drei"; +import countries from "../../../context/data/globe.json"; +declare module "@react-three/fiber" { + interface ThreeElements { + threeGlobe: Object3DNode; + } +} + +extend({ ThreeGlobe }); + +const RING_PROPAGATION_SPEED = 3; +const aspect = 1.2; +const cameraZ = 300; + +type Position = { + order: number; + startLat: number; + startLng: number; + endLat: number; + endLng: number; + arcAlt: number; + color: string; +}; + +export type GlobeConfig = { + pointSize?: number; + globeColor?: string; + showAtmosphere?: boolean; + atmosphereColor?: string; + atmosphereAltitude?: number; + emissive?: string; + emissiveIntensity?: number; + shininess?: number; + polygonColor?: string; + ambientLight?: string; + directionalLeftLight?: string; + directionalTopLight?: string; + pointLight?: string; + arcTime?: number; + arcLength?: number; + rings?: number; + maxRings?: number; + initialPosition?: { + lat: number; + lng: number; + }; + autoRotate?: boolean; + autoRotateSpeed?: number; +}; + +interface WorldProps { + globeConfig: GlobeConfig; + data: Position[]; +} + +let numbersOfRings = [0]; + +export function Globe({ globeConfig, data }: WorldProps) { + const [globeData, setGlobeData] = useState< + | { + size: number; + order: number; + color: (t: number) => string; + lat: number; + lng: number; + }[] + | null + >(null); + + const globeRef = useRef(null); + + const defaultProps = { + pointSize: 1, + atmosphereColor: "#ffffff", + showAtmosphere: true, + atmosphereAltitude: 0.1, + polygonColor: "rgba(255,255,255,0.7)", + globeColor: "#1d072e", + emissive: "#000000", + emissiveIntensity: 0.1, + shininess: 0.9, + arcTime: 2000, + arcLength: 0.9, + rings: 1, + maxRings: 3, + ...globeConfig, + }; + + useEffect(() => { + if (globeRef.current) { + _buildData(); + _buildMaterial(); + } + }, [globeRef.current]); + + const _buildMaterial = () => { + if (!globeRef.current) return; + + const globeMaterial = globeRef.current.globeMaterial() as unknown as { + color: Color; + emissive: Color; + emissiveIntensity: number; + shininess: number; + }; + globeMaterial.color = new Color(globeConfig.globeColor); + globeMaterial.emissive = new Color(globeConfig.emissive); + globeMaterial.emissiveIntensity = globeConfig.emissiveIntensity || 0.1; + globeMaterial.shininess = globeConfig.shininess || 0.9; + }; + + const _buildData = () => { + const arcs = data; + let points = []; + for (let i = 0; i < arcs.length; i++) { + const arc = arcs[i]; + const rgb = hexToRgb(arc.color) as { r: number; g: number; b: number }; + points.push({ + size: defaultProps.pointSize, + order: arc.order, + color: (t: number) => `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${1 - t})`, + lat: arc.startLat, + lng: arc.startLng, + }); + points.push({ + size: defaultProps.pointSize, + order: arc.order, + color: (t: number) => `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${1 - t})`, + lat: arc.endLat, + lng: arc.endLng, + }); + } + + // remove duplicates for same lat and lng + const filteredPoints = points.filter( + (v, i, a) => + a.findIndex((v2) => + ["lat", "lng"].every( + (k) => v2[k as "lat" | "lng"] === v[k as "lat" | "lng"] + ) + ) === i + ); + + setGlobeData(filteredPoints); + }; + + useEffect(() => { + if (globeRef.current && globeData) { + globeRef.current + .hexPolygonsData(countries.features) + .hexPolygonResolution(3) + .hexPolygonMargin(0.7) + .showAtmosphere(defaultProps.showAtmosphere) + .atmosphereColor(defaultProps.atmosphereColor) + .atmosphereAltitude(defaultProps.atmosphereAltitude) + .hexPolygonColor((e) => { + return defaultProps.polygonColor; + }); + startAnimation(); + } + }, [globeData]); + + const startAnimation = () => { + if (!globeRef.current || !globeData) return; + + globeRef.current + .arcsData(data) + .arcStartLat((d) => (d as { startLat: number }).startLat * 1) + .arcStartLng((d) => (d as { startLng: number }).startLng * 1) + .arcEndLat((d) => (d as { endLat: number }).endLat * 1) + .arcEndLng((d) => (d as { endLng: number }).endLng * 1) + .arcColor((e: any) => (e as { color: string }).color) + .arcAltitude((e) => { + return (e as { arcAlt: number }).arcAlt * 1; + }) + .arcStroke((e) => { + return [0.32, 0.28, 0.3][Math.round(Math.random() * 2)]; + }) + .arcDashLength(defaultProps.arcLength) + .arcDashInitialGap((e) => (e as { order: number }).order * 1) + .arcDashGap(15) + .arcDashAnimateTime((e) => defaultProps.arcTime); + + globeRef.current + .pointsData(data) + .pointColor((e) => (e as { color: string }).color) + .pointsMerge(true) + .pointAltitude(0.0) + .pointRadius(2); + + globeRef.current + .ringsData([]) + .ringColor((e: any) => (t: any) => e.color(t)) + .ringMaxRadius(defaultProps.maxRings) + .ringPropagationSpeed(RING_PROPAGATION_SPEED) + .ringRepeatPeriod( + (defaultProps.arcTime * defaultProps.arcLength) / defaultProps.rings + ); + }; + + useEffect(() => { + if (!globeRef.current || !globeData) return; + + const interval = setInterval(() => { + if (!globeRef.current || !globeData) return; + numbersOfRings = genRandomNumbers( + 0, + data.length, + Math.floor((data.length * 4) / 5) + ); + + globeRef.current.ringsData( + globeData.filter((d, i) => numbersOfRings.includes(i)) + ); + }, 2000); + + return () => { + clearInterval(interval); + }; + }, [globeRef.current, globeData]); + + return ( + <> + + + ); +} + +export function WebGLRendererConfig() { + const { gl, size } = useThree(); + + useEffect(() => { + gl.setPixelRatio(window.devicePixelRatio); + gl.setSize(size.width, size.height); + gl.setClearColor(0xffaaff, 0); + }, []); + + return null; +} + +export function World(props: WorldProps) { + const { globeConfig } = props; + const scene = new Scene(); + scene.fog = new Fog(0xffffff, 400, 2000); + return ( + + + + + + + + + + ); +} + +export function hexToRgb(hex: string) { + var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i; + hex = hex.replace(shorthandRegex, function (m, r, g, b) { + return r + r + g + g + b + b; + }); + + var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex); + return result + ? { + r: parseInt(result[1], 16), + g: parseInt(result[2], 16), + b: parseInt(result[3], 16), + } + : null; +} + +export function genRandomNumbers(min: number, max: number, count: number) { + const arr = []; + while (arr.length < count) { + const r = Math.floor(Math.random() * (max - min)) + min; + if (arr.indexOf(r) === -1) arr.push(r); + } + + return arr; +} diff --git a/components/Content/Planets/PlanetGlobeTest.tsx b/components/Content/Planets/PlanetGlobeTest.tsx new file mode 100644 index 00000000..d55da3b8 --- /dev/null +++ b/components/Content/Planets/PlanetGlobeTest.tsx @@ -0,0 +1,427 @@ +"use client"; +import React from "react"; +import { motion } from "framer-motion"; +import dynamic from "next/dynamic"; + +const World = dynamic(() => import("./PlanetGlobe").then((m) => m.World), { + ssr: false, +}); + +export function GlobeDemo() { + const globeConfig = { + pointSize: 4, + globeColor: "#062056", + showAtmosphere: true, + atmosphereColor: "#FFFFFF", + atmosphereAltitude: 0.4, + emissive: "#06b6d4", + emissiveIntensity: 0.1, + shininess: 0.3, + polygonColor: "rgba(255,255,255,0.7)", + ambientLight: "#38bdf8", + directionalLeftLight: "#ffffff", + directionalTopLight: "#ffffff", + pointLight: "#ffffff", + arcTime: 1000, + arcLength: 0.9, + rings: 5, + maxRings: 9, + initialPosition: { lat: 22.3193, lng: 114.1694 }, + autoRotate: true, + autoRotateSpeed: 0.03, + }; + const colors = ["#06b6d4", "06b6d4", "#6366f1"]; + const sampleArcs = [ + { + order: 1, + startLat: -19.885592, + startLng: -43.951191, + endLat: -22.9068, + endLng: -43.1729, + arcAlt: 0.1, + color: colors[Math.floor(Math.random() * (colors.length - 1))], + }, + { + order: 1, + startLat: 28.6139, + startLng: 77.209, + endLat: 3.139, + endLng: 101.6869, + arcAlt: 0.2, + color: colors[Math.floor(Math.random() * (colors.length - 1))], + }, + { + order: 1, + startLat: -19.885592, + startLng: -43.951191, + endLat: -1.303396, + endLng: 36.852443, + arcAlt: 0.5, + color: colors[Math.floor(Math.random() * (colors.length - 1))], + }, + { + order: 2, + startLat: 1.3521, + startLng: 103.8198, + endLat: 35.6762, + endLng: 139.6503, + arcAlt: 0.2, + color: colors[Math.floor(Math.random() * (colors.length - 1))], + }, + { + order: 2, + startLat: 51.5072, + startLng: -0.1276, + endLat: 3.139, + endLng: 101.6869, + arcAlt: 0.3, + color: colors[Math.floor(Math.random() * (colors.length - 1))], + }, + { + order: 2, + startLat: -15.785493, + startLng: -47.909029, + endLat: 36.162809, + endLng: -115.119411, + arcAlt: 0.3, + color: colors[Math.floor(Math.random() * (colors.length - 1))], + }, + { + order: 3, + startLat: -33.8688, + startLng: 151.2093, + endLat: 22.3193, + endLng: 114.1694, + arcAlt: 0.3, + color: colors[Math.floor(Math.random() * (colors.length - 1))], + }, + { + order: 3, + startLat: 21.3099, + startLng: -157.8581, + endLat: 40.7128, + endLng: -74.006, + arcAlt: 0.3, + color: colors[Math.floor(Math.random() * (colors.length - 1))], + }, + { + order: 3, + startLat: -6.2088, + startLng: 106.8456, + endLat: 51.5072, + endLng: -0.1276, + arcAlt: 0.3, + color: colors[Math.floor(Math.random() * (colors.length - 1))], + }, + { + order: 4, + startLat: 11.986597, + startLng: 8.571831, + endLat: -15.595412, + endLng: -56.05918, + arcAlt: 0.5, + color: colors[Math.floor(Math.random() * (colors.length - 1))], + }, + { + order: 4, + startLat: -34.6037, + startLng: -58.3816, + endLat: 22.3193, + endLng: 114.1694, + arcAlt: 0.7, + color: colors[Math.floor(Math.random() * (colors.length - 1))], + }, + { + order: 4, + startLat: 51.5072, + startLng: -0.1276, + endLat: 48.8566, + endLng: -2.3522, + arcAlt: 0.1, + color: colors[Math.floor(Math.random() * (colors.length - 1))], + }, + { + order: 5, + startLat: 14.5995, + startLng: 120.9842, + endLat: 51.5072, + endLng: -0.1276, + arcAlt: 0.3, + color: colors[Math.floor(Math.random() * (colors.length - 1))], + }, + { + order: 5, + startLat: 1.3521, + startLng: 103.8198, + endLat: -33.8688, + endLng: 151.2093, + arcAlt: 0.2, + color: colors[Math.floor(Math.random() * (colors.length - 1))], + }, + { + order: 5, + startLat: 34.0522, + startLng: -118.2437, + endLat: 48.8566, + endLng: -2.3522, + arcAlt: 0.2, + color: colors[Math.floor(Math.random() * (colors.length - 1))], + }, + { + order: 6, + startLat: -15.432563, + startLng: 28.315853, + endLat: 1.094136, + endLng: -63.34546, + arcAlt: 0.7, + color: colors[Math.floor(Math.random() * (colors.length - 1))], + }, + { + order: 6, + startLat: 37.5665, + startLng: 126.978, + endLat: 35.6762, + endLng: 139.6503, + arcAlt: 0.1, + color: colors[Math.floor(Math.random() * (colors.length - 1))], + }, + { + order: 6, + startLat: 22.3193, + startLng: 114.1694, + endLat: 51.5072, + endLng: -0.1276, + arcAlt: 0.3, + color: colors[Math.floor(Math.random() * (colors.length - 1))], + }, + { + order: 7, + startLat: -19.885592, + startLng: -43.951191, + endLat: -15.595412, + endLng: -56.05918, + arcAlt: 0.1, + color: colors[Math.floor(Math.random() * (colors.length - 1))], + }, + { + order: 7, + startLat: 48.8566, + startLng: -2.3522, + endLat: 52.52, + endLng: 13.405, + arcAlt: 0.1, + color: colors[Math.floor(Math.random() * (colors.length - 1))], + }, + { + order: 7, + startLat: 52.52, + startLng: 13.405, + endLat: 34.0522, + endLng: -118.2437, + arcAlt: 0.2, + color: colors[Math.floor(Math.random() * (colors.length - 1))], + }, + { + order: 8, + startLat: -8.833221, + startLng: 13.264837, + endLat: -33.936138, + endLng: 18.436529, + arcAlt: 0.2, + color: colors[Math.floor(Math.random() * (colors.length - 1))], + }, + { + order: 8, + startLat: 49.2827, + startLng: -123.1207, + endLat: 52.3676, + endLng: 4.9041, + arcAlt: 0.2, + color: colors[Math.floor(Math.random() * (colors.length - 1))], + }, + { + order: 8, + startLat: 1.3521, + startLng: 103.8198, + endLat: 40.7128, + endLng: -74.006, + arcAlt: 0.5, + color: colors[Math.floor(Math.random() * (colors.length - 1))], + }, + { + order: 9, + startLat: 51.5072, + startLng: -0.1276, + endLat: 34.0522, + endLng: -118.2437, + arcAlt: 0.2, + color: colors[Math.floor(Math.random() * (colors.length - 1))], + }, + { + order: 9, + startLat: 22.3193, + startLng: 114.1694, + endLat: -22.9068, + endLng: -43.1729, + arcAlt: 0.7, + color: colors[Math.floor(Math.random() * (colors.length - 1))], + }, + { + order: 9, + startLat: 1.3521, + startLng: 103.8198, + endLat: -34.6037, + endLng: -58.3816, + arcAlt: 0.5, + color: colors[Math.floor(Math.random() * (colors.length - 1))], + }, + { + order: 10, + startLat: -22.9068, + startLng: -43.1729, + endLat: 28.6139, + endLng: 77.209, + arcAlt: 0.7, + color: colors[Math.floor(Math.random() * (colors.length - 1))], + }, + { + order: 10, + startLat: 34.0522, + startLng: -118.2437, + endLat: 31.2304, + endLng: 121.4737, + arcAlt: 0.3, + color: colors[Math.floor(Math.random() * (colors.length - 1))], + }, + { + order: 10, + startLat: -6.2088, + startLng: 106.8456, + endLat: 52.3676, + endLng: 4.9041, + arcAlt: 0.3, + color: colors[Math.floor(Math.random() * (colors.length - 1))], + }, + { + order: 11, + startLat: 41.9028, + startLng: 12.4964, + endLat: 34.0522, + endLng: -118.2437, + arcAlt: 0.2, + color: colors[Math.floor(Math.random() * (colors.length - 1))], + }, + { + order: 11, + startLat: -6.2088, + startLng: 106.8456, + endLat: 31.2304, + endLng: 121.4737, + arcAlt: 0.2, + color: colors[Math.floor(Math.random() * (colors.length - 1))], + }, + { + order: 11, + startLat: 22.3193, + startLng: 114.1694, + endLat: 1.3521, + endLng: 103.8198, + arcAlt: 0.2, + color: colors[Math.floor(Math.random() * (colors.length - 1))], + }, + { + order: 12, + startLat: 34.0522, + startLng: -118.2437, + endLat: 37.7749, + endLng: -122.4194, + arcAlt: 0.1, + color: colors[Math.floor(Math.random() * (colors.length - 1))], + }, + { + order: 12, + startLat: 35.6762, + startLng: 139.6503, + endLat: 22.3193, + endLng: 114.1694, + arcAlt: 0.2, + color: colors[Math.floor(Math.random() * (colors.length - 1))], + }, + { + order: 12, + startLat: 22.3193, + startLng: 114.1694, + endLat: 34.0522, + endLng: -118.2437, + arcAlt: 0.3, + color: colors[Math.floor(Math.random() * (colors.length - 1))], + }, + { + order: 13, + startLat: 52.52, + startLng: 13.405, + endLat: 22.3193, + endLng: 114.1694, + arcAlt: 0.3, + color: colors[Math.floor(Math.random() * (colors.length - 1))], + }, + { + order: 13, + startLat: 11.986597, + startLng: 8.571831, + endLat: 35.6762, + endLng: 139.6503, + arcAlt: 0.3, + color: colors[Math.floor(Math.random() * (colors.length - 1))], + }, + { + order: 13, + startLat: -22.9068, + startLng: -43.1729, + endLat: -34.6037, + endLng: -58.3816, + arcAlt: 0.1, + color: colors[Math.floor(Math.random() * (colors.length - 1))], + }, + { + order: 14, + startLat: -33.936138, + startLng: 18.436529, + endLat: 21.395643, + endLng: 39.883798, + arcAlt: 0.3, + color: colors[Math.floor(Math.random() * (colors.length - 1))], + }, + ]; + + return ( +
+
+ +

+ +

+

+

+ +
+
+ ; +
+
+
+ ); +}; \ No newline at end of file diff --git a/components/Content/Planets/Sectors/Grid.tsx b/components/Content/Planets/Sectors/Grid.tsx new file mode 100644 index 00000000..37aff83f --- /dev/null +++ b/components/Content/Planets/Sectors/Grid.tsx @@ -0,0 +1,67 @@ +import { useSupabaseClient } from "@supabase/auth-helpers-react"; +import Link from "next/link"; +import React, { useEffect, useState } from "react"; + +export default function PublicSectorsGrid() { + const supabase = useSupabaseClient(); + + const [sectors, setSectors] = useState([]); + + async function fetchSectors() { + try { + const { data, error } = await supabase + .from('basePlanetSectors') + .select('*') + .limit(10) + + if (error) { + console.assert('Error fetching sector data: ', error.message); + return; + }; + + setSectors(data); + } catch (error) { + console.error(error); + }; + }; + + useEffect(() => { + fetchSectors(); + }, []) + + return ( + + ); +}; \ No newline at end of file diff --git a/components/Content/Planets/Sectors/SectorSetup.tsx b/components/Content/Planets/Sectors/SectorSetup.tsx index fb6b8d59..44ad81af 100644 --- a/components/Content/Planets/Sectors/SectorSetup.tsx +++ b/components/Content/Planets/Sectors/SectorSetup.tsx @@ -29,7 +29,7 @@ export default function CreateBasePlanetSector() { } } catch (error) { console.error(error.message); - } + }; }; fetchUserPlanet(); diff --git a/components/Content/Populate/StructureCreate.tsx b/components/Content/Populate/StructureCreate.tsx index ba57b20c..bce364e6 100644 --- a/components/Content/Populate/StructureCreate.tsx +++ b/components/Content/Populate/StructureCreate.tsx @@ -2,6 +2,7 @@ import React, { useEffect, useState } from "react"; import { useSession, useSupabaseClient } from "@supabase/auth-helpers-react"; import axios from "axios"; import Link from "next/link"; +import { LightkurveBaseGraph } from "../Planets/PlanetData/ContentPlaceholder"; interface Structure { id: number; @@ -162,9 +163,61 @@ interface PlacedStructuresProps { export const PlacedStructures = ({ sectorId }) => { const supabase = useSupabaseClient(); const [placedStructures, setPlacedStructures] = useState([]); + const [usingStructure, setUsingStructure] = useState(null); + + // Planet data + const [planetData, setPlanetData] = useState(null); + + useEffect(() => { + if (sectorId) { + getPlanetData(); + }; + }, [sectorId]); + + const getPlanetData = async () => { + try { + const { data, error } = await supabase + .from('basePlanetSectors') + .select('anomaly') + .eq("id", sectorId); + + if (data) { + setPlanetId(data); + } + + if (error) { + throw error; + } + } catch (error) { + console.error(error.message); + } + try { + const { data, error } = await supabase + .from("basePlanets") + .select("*") + .eq("id", planetId) + .single(); + + if (data) { + setPlanetData(data); + }; + + if (error) { + throw error; + }; + } catch (error: any) { + console.error(error.message); + }; + }; + + const [planetId, setPlanetId] = useState(null); + const handleClosePopup = () => { + setUsingStructure(null); + }; useEffect(() => { const fetchPlacedStructures = async () => { + console.log('Planet id', planetId) try { // Fetch all structure items from inventoryITEMS table const { data: structureItems, error: structureItemsError } = await supabase @@ -223,7 +276,35 @@ export const PlacedStructures = ({ sectorId }) => { {structure.present && ( handleStructureClick(structure.id)}> - View More + {structure.id === 22 && ( +
+ {/*