diff --git a/frontend/src/pages/observation.tsx b/frontend/src/pages/observation.tsx index f4a2a38..6315848 100644 --- a/frontend/src/pages/observation.tsx +++ b/frontend/src/pages/observation.tsx @@ -3,18 +3,74 @@ import React, { useEffect, useRef, useState } from 'react'; import type { ReactElement } from 'react'; import Head from 'next/head'; import { useRouter } from 'next/router'; -import { mdiClose, mdiCamera, mdiTarget, mdiInformationOutline, mdiTelescope } from '@mdi/js'; +import { + mdiClose, + mdiCamera, + mdiTarget, + mdiInformationOutline, + mdiTelescope, + mdiMagnifyPlusOutline, + mdiMagnifyMinusOutline, + mdiOrbitVariant, + mdiFlare, + mdiWeatherNight, + mdiCrosshairsGps +} from '@mdi/js'; import BaseIcon from '../components/BaseIcon'; import { useAppDispatch, useAppSelector } from '../stores/hooks'; import { fetch as fetchSkyObjects } from '../stores/sky_objects/sky_objectsSlice'; import LayoutAuthenticated from '../layouts/Authenticated'; +const PRESET_TARGETS = [ + { + id: 'mars', + name: 'Mars', + type: 'Planet', + img: 'https://images-assets.nasa.gov/image/PIA04591/PIA04591~medium.jpg', + dist: '225M km', + temp: '210K' + }, + { + id: 'jupiter', + name: 'Jupiter', + type: 'Planet', + img: 'https://images-assets.nasa.gov/image/PIA04866/PIA04866~medium.jpg', + dist: '778M km', + temp: '110K' + }, + { + id: 'orion', + name: 'Orion Nebula', + type: 'Nebula', + img: 'https://images-assets.nasa.gov/image/PIA08653/PIA08653~medium.jpg', + dist: '1,344 ly', + temp: '10,000K' + }, + { + id: 'andromeda', + name: 'Andromeda', + type: 'Galaxy', + img: 'https://images-assets.nasa.gov/image/PIA15416/PIA15416~medium.jpg', + dist: '2.5M ly', + temp: '2.7K' + }, + { + id: 'pillars', + name: 'Pillars of Creation', + type: 'Nebula', + img: 'https://images-assets.nasa.gov/image/as11-40-5874/as11-40-5874~medium.jpg', // Using a generic high-res space image placeholder + dist: '6,500 ly', + temp: '15K' + } +]; + const ObservationPage = () => { const videoRef = useRef(null); const [isCameraActive, setIsCameraActive] = useState(false); const [mode, setMode] = useState<'normal' | 'ir' | 'deep'>('normal'); - const [scanning, setScanning] = useState(false); - const [identifiedObject, setIdentifiedObject] = useState(null); + const [zoom, setZoom] = useState(1); + const [selectedTarget, setSelectedTarget] = useState(null); + const [isFocusing, setIsFocusing] = useState(false); const [telemetry, setTelemetry] = useState({ temp: -233, dist: 1.5, @@ -22,8 +78,6 @@ const ObservationPage = () => { }); const dispatch = useAppDispatch(); - const { sky_objects } = useAppSelector((state) => state.sky_objects); - const router = useRouter(); useEffect(() => { dispatch(fetchSkyObjects({})); @@ -56,18 +110,34 @@ const ObservationPage = () => { return () => stopCamera(); }, []); - useEffect(() => { - if (scanning) { - const timeout = setTimeout(() => { - if (sky_objects.length > 0) { - const randomObj = sky_objects[Math.floor(Math.random() * sky_objects.length)]; - setIdentifiedObject(randomObj); - } - setScanning(false); - }, 3000); - return () => clearTimeout(timeout); - } - }, [scanning, sky_objects]); + const handleZoom = (direction: 'in' | 'out') => { + setZoom(prev => { + if (direction === 'in') { + return Math.min(prev * 2.5, 100000000000000); + } else { + return Math.max(prev / 2.5, 1); + } + }); + }; + + const selectTarget = (target: any) => { + setSelectedTarget(target); + setIsFocusing(true); + + // Animate zoom in + let currentZoom = zoom; + const targetZoom = 1000000; + const interval = setInterval(() => { + currentZoom *= 1.5; + if (currentZoom >= targetZoom) { + setZoom(targetZoom); + setIsFocusing(false); + clearInterval(interval); + } else { + setZoom(currentZoom); + } + }, 100); + }; // Simulate telemetry fluctuations useEffect(() => { @@ -89,45 +159,83 @@ const ObservationPage = () => { } }; + const formatZoom = (z: number) => { + if (z >= 1000000000000) return `${(z / 1000000000000).toFixed(1)}T`; + if (z >= 1000000000) return `${(z / 1000000000).toFixed(1)}B`; + if (z >= 1000000) return `${(z / 1000000).toFixed(1)}M`; + if (z >= 1000) return `${(z / 1000).toFixed(1)}K`; + return `${z.toFixed(0)}x`; + }; + + const isDeepZoom = zoom > 5000; + return (
- JWST | Live Observation + JWST | Deep Space Observation - {/* Camera View */} -
+ {/* Main Viewport */} +
{!isCameraActive && ( -
-
- +
+
+
-

Systems Offline

+

Systems Offline

)} + + {/* Live Camera Feed */}