add planet name, upgrade level and 3d render of PI setup

src/app/components/PlanetaryInteraction/PinsCanvas3D.tsx

@@ -0,0 +1,140 @@
+import React, { useEffect } from "react";
+import { PlanetInfo, PlanetInfoUniverse } from "./PlanetCard";
+import * as THREE from "three";
+import * as BufferGeometryUtils from "three/examples/jsm/utils/BufferGeometryUtils.js";
+import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
+
+const commandCenterIds = [2254, 2524, 2525, 2533, 2534, 2549, 2550, 2551];
+
+const PinsCanvas3D = ({
+  planetInfo,
+}: {
+  planetInfo: PlanetInfo | undefined;
+}) => {
+  useEffect(() => {
+    if (!planetInfo) return;
+    const pinsWithoutCommandCentes =
+      planetInfo?.pins.filter(
+        (p) => !commandCenterIds.some((c) => c === p.type_id)
+      ) ?? [];
+
+    const CANVAS = document.querySelector("#canvas") as HTMLCanvasElement;
+
+    if (!CANVAS) return;
+
+    const SCENE_ANTIALIAS = true;
+    const SCENE_ALPHA = true;
+    const SCENE_BACKGROUND_COLOR = 0x000000;
+
+    const CAMERA_FOV = 20;
+    const CAMERA_NEAR = 100;
+    const CAMERA_FAR = 500;
+    const CAMERA_X = 0;
+    const CAMERA_Y = 0;
+    const CAMERA_Z = 220;
+
+    const SPHERE_RADIUS = 30;
+    const LATITUDE_COUNT = 40;
+    const LONGITUDE_COUNT = 80;
+
+    const DOT_SIZE = 0.2;
+    const DOT_COLOR = 0x36454f;
+
+    const renderScene = () => {
+      const renderer = new THREE.WebGLRenderer({
+        canvas: CANVAS as HTMLCanvasElement,
+        antialias: SCENE_ANTIALIAS,
+        alpha: SCENE_ALPHA,
+      });
+
+      const camera = new THREE.PerspectiveCamera(
+        CAMERA_FOV,
+        CANVAS.width / CANVAS.height,
+        CAMERA_NEAR,
+        CAMERA_FAR
+      );
+
+      const controls = new OrbitControls(camera, renderer.domElement);
+      camera.position.set(CAMERA_X, CAMERA_Y, CAMERA_Z);
+      controls.update();
+
+      const scene = new THREE.Scene();
+      scene.background = new THREE.Color(SCENE_BACKGROUND_COLOR);
+
+      const dotGeometries: THREE.CircleGeometry[] = [];
+      const dotGeometriesPI: THREE.CircleGeometry[] = [];
+
+      const vector = new THREE.Vector3();
+      const vectorPI = new THREE.Vector3();
+
+      pinsWithoutCommandCentes.forEach((p) => {
+        const dotGeometryPI = new THREE.CircleGeometry(DOT_SIZE, 9);
+        const phi = p.latitude;
+        const theta = p.longitude;
+        vectorPI.setFromSphericalCoords(SPHERE_RADIUS, phi, theta);
+        dotGeometryPI.lookAt(vectorPI);
+        dotGeometryPI.translate(vectorPI.x, vectorPI.y, vectorPI.z);
+        dotGeometriesPI.push(dotGeometryPI);
+      });
+
+      for (let lat = 0; lat < LATITUDE_COUNT; lat += 1) {
+        for (let lng = 0; lng < LONGITUDE_COUNT; lng += 1) {
+          const dotGeometry = new THREE.CircleGeometry(DOT_SIZE, 5);
+          const phi = (Math.PI / LATITUDE_COUNT) * lat;
+          const theta = ((2 * Math.PI) / LONGITUDE_COUNT) * lng;
+          vector.setFromSphericalCoords(SPHERE_RADIUS, phi, theta);
+          dotGeometry.lookAt(vector);
+          dotGeometry.translate(vector.x, vector.y, vector.z);
+          dotGeometries.push(dotGeometry);
+        }
+      }
+
+      const mergedDotGeometries =
+        BufferGeometryUtils.mergeBufferGeometries(dotGeometries);
+
+      const mergedDotGeometriesPI =
+        BufferGeometryUtils.mergeBufferGeometries(dotGeometriesPI);
+
+      const dotMaterial = new THREE.MeshBasicMaterial({
+        color: DOT_COLOR,
+        side: THREE.DoubleSide,
+      });
+
+      const dotMaterialPI = new THREE.MeshBasicMaterial({
+        color: 0xfdda0d,
+        side: THREE.DoubleSide,
+      });
+      const dotMesh = new THREE.Mesh(mergedDotGeometries, dotMaterial);
+      const dotMeshPI = new THREE.Mesh(mergedDotGeometriesPI, dotMaterialPI);
+
+      scene.add(dotMesh);
+      scene.add(dotMeshPI);
+
+      const animate = (time: number) => {
+        time *= 0.001;
+        controls.update();
+        renderer.render(scene, camera);
+
+        requestAnimationFrame(animate);
+      };
+
+      requestAnimationFrame(animate);
+    };
+
+    const setCanvasSize = () => {
+      CANVAS.width = window.innerWidth;
+      CANVAS.height = window.innerHeight;
+
+      renderScene();
+    };
+
+    setCanvasSize();
+
+    // When the window isresized, redraw the scene.
+    window.addEventListener("resize", setCanvasSize);
+  }, [planetInfo]);
+
+  return <canvas id="canvas"></canvas>;
+};
+
+export default PinsCanvas3D;

src/app/components/PlanetaryInteraction/PlanetCard.tsx

@@ -1,11 +1,20 @@
-import { Stack, Typography, styled } from "@mui/material";
+import { Stack, Tooltip, Typography, styled } from "@mui/material";
 import Image from "next/image";
 import { AccessToken, Planet } from "@/types";
 import { Api } from "@/esi-api";
-import { useEffect, useState } from "react";
+import { forwardRef, useEffect, useState } from "react";
 import { DateTime } from "luxon";
 import { EXTRACTOR_TYPE_IDS } from "@/const";
 import Countdown from "react-countdown";
+import PinsCanvas3D from "./PinsCanvas3D";
+import Slide from "@mui/material/Slide";
+import { TransitionProps } from "@mui/material/transitions";
+import Dialog from "@mui/material/Dialog";
+import AppBar from "@mui/material/AppBar";
+import Toolbar from "@mui/material/Toolbar";
+import IconButton from "@mui/material/IconButton";
+import CloseIcon from "@mui/icons-material/Close";
+import Button from "@mui/material/Button";
 
 const StackItem = styled(Stack)(({ theme }) => ({
   ...theme.typography.body2,
@@ -16,40 +25,42 @@ const StackItem = styled(Stack)(({ theme }) => ({
   alignItems: "center",
 }));
 
+export interface Pin {
+  contents?: {
+    amount: number;
+    type_id: number;
+  }[];
+  expiry_time?: string;
+  extractor_details?: {
+    cycle_time?: number;
+    head_radius?: number;
+    heads: {
+      head_id: number;
+      latitude: number;
+      longitude: number;
+    }[];
+    product_type_id?: number;
+    qty_per_cycle?: number;
+  };
+  factory_details?: {
+    schematic_id: number;
+  };
+  install_time?: string;
+  last_cycle_start?: string;
+  latitude: number;
+  longitude: number;
+  pin_id: number;
+  schematic_id?: number;
+  type_id: number;
+}
+
 export interface PlanetInfo {
   links: {
     destination_pin_id: number;
     link_level: number;
     source_pin_id: number;
   }[];
-  pins: {
-    contents?: {
-      amount: number;
-      type_id: number;
-    }[];
-    expiry_time?: string;
-    extractor_details?: {
-      cycle_time?: number;
-      head_radius?: number;
-      heads: {
-        head_id: number;
-        latitude: number;
-        longitude: number;
-      }[];
-      product_type_id?: number;
-      qty_per_cycle?: number;
-    };
-    factory_details?: {
-      schematic_id: number;
-    };
-    install_time?: string;
-    last_cycle_start?: string;
-    latitude: number;
-    longitude: number;
-    pin_id: number;
-    schematic_id?: number;
-    type_id: number;
-  }[];
+  pins: Pin[];
   routes: {
     content_type_id: number;
     destination_pin_id: number;
@@ -60,6 +71,27 @@ export interface PlanetInfo {
   }[];
 }
 
+export interface PlanetInfoUniverse {
+  name: string;
+  planet_id: number;
+  position: {
+    x: number;
+    y: number;
+    z: number;
+  };
+  system_id: number;
+  type_id: number;
+}
+
+const Transition = forwardRef(function Transition(
+  props: TransitionProps & {
+    children: React.ReactElement;
+  },
+  ref: React.Ref<unknown>
+) {
+  return <Slide direction="up" ref={ref} {...props} />;
+});
+
 export const PlanetCard = ({
   planet,
   character,
@@ -70,6 +102,21 @@ export const PlanetCard = ({
   const [planetInfo, setPlanetInfo] = useState<PlanetInfo | undefined>(
     undefined
   );
+
+  const [planetInfoUniverse, setPlanetInfoUniverse] = useState<
+    PlanetInfoUniverse | undefined
+  >(undefined);
+
+  const [planetRenderOpen, setPlanetRenderOpen] = useState(false);
+
+  const handle3DrenderOpen = () => {
+    setPlanetRenderOpen(true);
+  };
+
+  const handle3DrenderClose = () => {
+    setPlanetRenderOpen(false);
+  };
+
   const extractors =
     (planetInfo &&
       planetInfo.pins
@@ -92,17 +139,29 @@ export const PlanetCard = ({
     ).data;
     return planetInfo;
   };
+
+  const getPlanetUniverse = async (
+    planet: Planet
+  ): Promise<PlanetInfoUniverse> => {
+    const api = new Api();
+    const planetInfo = (
+      await api.universe.getUniversePlanetsPlanetId(planet.planet_id)
+    ).data;
+    return planetInfo;
+  };
   useEffect(() => {
     getPlanet(character, planet).then(setPlanetInfo);
+    getPlanetUniverse(planet).then(setPlanetInfoUniverse);
   }, [planet, character]);
   return (
-    <StackItem alignItems="flex-start" height="100%">
+    <StackItem alignItems="flex-start" height="100%" position="relative">
       <Image
         src={`/${planet.planet_type}.png`}
         alt=""
         width={120}
         height={120}
         style={{ borderRadius: 8, marginRight: 4 }}
+        onClick={handle3DrenderOpen}
       />
       {extractors.some((e) => {
         if (!e) return true;
@@ -118,6 +177,11 @@ export const PlanetCard = ({
           style={{ position: "absolute" }}
         />
       )}
+      <div style={{ position: "absolute", top: 5, left: 10 }}>
+        <Typography fontSize="0.8rem">{planetInfoUniverse?.name}</Typography>
+        <Typography fontSize="0.8rem">L{planet.upgrade_level}</Typography>
+      </div>
+
       {extractors.map((e, idx) => {
         const inPast = () => {
           if (!e) return true;
@@ -142,6 +206,32 @@ export const PlanetCard = ({
           </Typography>
         );
       })}
+      <Dialog
+        fullScreen
+        open={planetRenderOpen}
+        onClose={handle3DrenderClose}
+        TransitionComponent={Transition}
+      >
+        <AppBar sx={{ position: "relative" }}>
+          <Toolbar>
+            <IconButton
+              edge="start"
+              color="inherit"
+              onClick={handle3DrenderClose}
+              aria-label="close"
+            >
+              <CloseIcon />
+            </IconButton>
+            <Typography sx={{ ml: 2, flex: 1 }} variant="h6" component="div">
+              {planetInfoUniverse?.name}
+            </Typography>
+            <Button autoFocus color="inherit" onClick={handle3DrenderClose}>
+              Close
+            </Button>
+          </Toolbar>
+        </AppBar>
+        <PinsCanvas3D planetInfo={planetInfo} />
+      </Dialog>
     </StackItem>
   );
 };