613 lines
25 KiB
TypeScript
613 lines
25 KiB
TypeScript
import React, { useEffect, useRef, useState } from 'react';
|
|
import type { ReactElement } from 'react';
|
|
import Head from 'next/head';
|
|
import {
|
|
mdiClose,
|
|
mdiTelescope,
|
|
mdiMagnifyPlusOutline,
|
|
mdiMagnifyMinusOutline,
|
|
mdiOrbitVariant,
|
|
mdiFlare,
|
|
mdiWeatherNight,
|
|
mdiCrosshairsGps,
|
|
mdiRecord,
|
|
mdiStop,
|
|
mdiDownload,
|
|
mdiAutoFix,
|
|
mdiAccountGroup,
|
|
mdiStarCircle,
|
|
mdiChatProcessingOutline
|
|
} from '@mdi/js';
|
|
import BaseIcon from '../components/BaseIcon';
|
|
import { useAppDispatch } from '../stores/hooks';
|
|
import { fetch as fetchSkyObjects } from '../stores/sky_objects/sky_objectsSlice';
|
|
import LayoutAuthenticated from '../layouts/Authenticated';
|
|
|
|
const CELEBRITIES = [
|
|
{ id: 'beyonce', name: 'Beyoncé', category: 'Singer', reaction: 'This view is absolutely flawless! Like a diamond in the sky.' },
|
|
{ id: 'jackson', name: 'Michael Jackson', category: 'Singer', reaction: 'Hee-hee! Looking at the stars is a thriller!' },
|
|
{ id: 'mercury', name: 'Freddie Mercury', category: 'Singer', reaction: 'I see a little silhouetto of a galaxy! Magnificent!' },
|
|
{ id: 'swift', name: 'Taylor Swift', category: 'Singer', reaction: 'I can see the sparks fly in that nebula. Enchanting!' },
|
|
{ id: 'dicaprio', name: 'Leonardo DiCaprio', category: 'Actor', reaction: 'I\'m the king of the world... or at least this telescope!' },
|
|
{ id: 'streep', name: 'Meryl Streep', category: 'Actress', reaction: 'The performance of these celestial bodies is award-worthy.' },
|
|
{ id: 'hanks', name: 'Tom Hanks', category: 'Actor', reaction: 'Houston, we have an incredible view here!' },
|
|
{ id: 'davinci', name: 'Leonardo da Vinci', category: 'Painter', reaction: 'The proportions of this universe are divine. A true masterpiece.' },
|
|
{ id: 'vangogh', name: 'Vincent van Gogh', category: 'Painter', reaction: 'The starry night... it\'s even more vibrant than I painted it!' },
|
|
{ id: 'kahlo', name: 'Frida Kahlo', category: 'Painter', reaction: 'Feet, what do I need them for if I have wings to fly to these stars?' },
|
|
];
|
|
|
|
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',
|
|
dist: '6,500 ly',
|
|
temp: '15K'
|
|
}
|
|
];
|
|
|
|
const ObservationPage = () => {
|
|
const videoRef = useRef<HTMLVideoElement>(null);
|
|
const [isCameraActive, setIsCameraActive] = useState(false);
|
|
const [mode, setMode] = useState<'normal' | 'ir' | 'deep'>('normal');
|
|
const [zoom, setZoom] = useState(1);
|
|
const [selectedTarget, setSelectedTarget] = useState<any>(null);
|
|
const [isFocusing, setIsFocusing] = useState(false);
|
|
const [isSharpnessMax, setIsSharpnessMax] = useState(false);
|
|
const [telemetry, setTelemetry] = useState({
|
|
temp: -233,
|
|
dist: 1.5,
|
|
focal: 131,
|
|
});
|
|
|
|
// Simulation States
|
|
const [audienceCount, setAudienceCount] = useState(0);
|
|
const [isSimActive, setIsSimActive] = useState(false);
|
|
const [activeCelebrities, setActiveCelebrities] = useState<string[]>([]);
|
|
const [chatMessages, setChatMessages] = useState<any[]>([]);
|
|
const [showSimPanel, setShowSimPanel] = useState(false);
|
|
|
|
// Recording states
|
|
const [isRecording, setIsRecording] = useState(false);
|
|
const [mediaRecorder, setMediaRecorder] = useState<MediaRecorder | null>(null);
|
|
const [recordedChunks, setRecordedChunks] = useState<Blob[]>([]);
|
|
const [videoUrl, setVideoUrl] = useState<string | null>(null);
|
|
|
|
const dispatch = useAppDispatch();
|
|
|
|
useEffect(() => {
|
|
dispatch(fetchSkyObjects({}));
|
|
}, [dispatch]);
|
|
|
|
const startCamera = async () => {
|
|
try {
|
|
const stream = await navigator.mediaDevices.getUserMedia({
|
|
video: {
|
|
facingMode: 'environment',
|
|
width: { ideal: 1920 },
|
|
height: { ideal: 1080 }
|
|
},
|
|
audio: true
|
|
});
|
|
if (videoRef.current) {
|
|
videoRef.current.srcObject = stream;
|
|
setIsCameraActive(true);
|
|
}
|
|
} catch (err) {
|
|
console.error("Camera/Audio access denied:", err);
|
|
alert("Camera and Microphone access are required for full simulation recording.");
|
|
}
|
|
};
|
|
|
|
const stopCamera = () => {
|
|
if (videoRef.current && videoRef.current.srcObject) {
|
|
const tracks = (videoRef.current.srcObject as MediaStream).getTracks();
|
|
tracks.forEach(track => track.stop());
|
|
setIsCameraActive(false);
|
|
if (isRecording) stopRecording();
|
|
}
|
|
};
|
|
|
|
useEffect(() => {
|
|
return () => stopCamera();
|
|
}, []);
|
|
|
|
// Audience Simulation Logic
|
|
useEffect(() => {
|
|
let interval: any;
|
|
if (isSimActive) {
|
|
interval = setInterval(() => {
|
|
setAudienceCount(prev => {
|
|
const target = 1000000;
|
|
if (prev < target) {
|
|
return Math.min(prev + Math.floor(Math.random() * 5000) + 1000, target);
|
|
}
|
|
return target;
|
|
});
|
|
|
|
// Generate Chat Messages
|
|
if (activeCelebrities.length > 0 && Math.random() > 0.7) {
|
|
const randomCelebId = activeCelebrities[Math.floor(Math.random() * activeCelebrities.length)];
|
|
const celeb = CELEBRITIES.find(c => c.id === randomCelebId);
|
|
if (celeb) {
|
|
const newMessage = {
|
|
id: Date.now(),
|
|
name: celeb.name,
|
|
category: celeb.category,
|
|
text: celeb.reaction,
|
|
time: new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
|
|
};
|
|
setChatMessages(prev => [newMessage, ...prev].slice(0, 10));
|
|
}
|
|
}
|
|
}, 2000);
|
|
} else {
|
|
setAudienceCount(0);
|
|
setChatMessages([]);
|
|
}
|
|
return () => clearInterval(interval);
|
|
}, [isSimActive, activeCelebrities]);
|
|
|
|
const toggleCelebrity = (id: string) => {
|
|
setActiveCelebrities(prev =>
|
|
prev.includes(id) ? prev.filter(c => c !== id) : [...prev, id]
|
|
);
|
|
};
|
|
|
|
const selectAllCelebrities = () => {
|
|
setActiveCelebrities(CELEBRITIES.map(c => c.id));
|
|
};
|
|
|
|
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);
|
|
|
|
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);
|
|
};
|
|
|
|
useEffect(() => {
|
|
const interval = setInterval(() => {
|
|
setTelemetry(prev => ({
|
|
temp: prev.temp + (Math.random() - 0.5),
|
|
dist: 1.5 + (Math.random() - 0.5) * 0.01,
|
|
focal: 131.4 + (Math.random() - 0.5),
|
|
}));
|
|
}, 2000);
|
|
return () => clearInterval(interval);
|
|
}, []);
|
|
|
|
const getFilter = () => {
|
|
let base = 'none';
|
|
switch (mode) {
|
|
case 'ir': base = 'contrast(1.2) brightness(1.1) hue-rotate(180deg) saturate(1.5)'; break;
|
|
case 'deep': base = 'contrast(1.5) brightness(0.8) saturate(0.5) blur(0.5px)'; break;
|
|
default: base = 'none';
|
|
}
|
|
|
|
if (isSharpnessMax) {
|
|
base += ' contrast(1.4) brightness(1.1) saturate(1.2) drop-shadow(0 0 1px white)';
|
|
}
|
|
|
|
return base;
|
|
};
|
|
|
|
// Recording Logic
|
|
const startRecording = () => {
|
|
if (!videoRef.current || !videoRef.current.srcObject) return;
|
|
const stream = videoRef.current.srcObject as MediaStream;
|
|
const options = { mimeType: 'video/webm;codecs=vp8,opus' };
|
|
if (!MediaRecorder.isTypeSupported(options.mimeType)) options.mimeType = 'video/webm';
|
|
const recorder = new MediaRecorder(stream, options);
|
|
const chunks: Blob[] = [];
|
|
recorder.ondataavailable = (event) => { if (event.data.size > 0) chunks.push(event.data); };
|
|
recorder.onstop = () => {
|
|
const blob = new Blob(chunks, { type: 'video/webm' });
|
|
const url = URL.createObjectURL(blob);
|
|
setVideoUrl(url);
|
|
};
|
|
recorder.start();
|
|
setIsRecording(true);
|
|
setMediaRecorder(recorder);
|
|
setVideoUrl(null);
|
|
};
|
|
|
|
const stopRecording = () => {
|
|
if (mediaRecorder && mediaRecorder.state !== 'inactive') {
|
|
mediaRecorder.stop();
|
|
setIsRecording(false);
|
|
}
|
|
};
|
|
|
|
const downloadVideo = () => {
|
|
if (videoUrl) {
|
|
const a = document.createElement('a');
|
|
a.style.display = 'none';
|
|
a.href = videoUrl;
|
|
a.download = `JWST-CELEB-REC-${new Date().getTime()}.webm`;
|
|
document.body.appendChild(a);
|
|
a.click();
|
|
window.URL.revokeObjectURL(videoUrl);
|
|
setVideoUrl(null);
|
|
}
|
|
};
|
|
|
|
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 (
|
|
<div className="relative h-screen w-full bg-black overflow-hidden flex flex-col font-mono text-[#00F2FF]">
|
|
<Head>
|
|
<title>JWST | Global Observation Live</title>
|
|
</Head>
|
|
|
|
{/* Main Viewport */}
|
|
<div className="absolute inset-0 z-0 bg-gray-950 overflow-hidden">
|
|
{!isCameraActive && (
|
|
<div className="flex flex-col items-center justify-center h-full space-y-6 z-10 relative">
|
|
<div className="w-32 h-32 border-2 border-[#E3B341] rounded-full flex items-center justify-center animate-pulse">
|
|
<BaseIcon path={mdiTelescope} size={64} className="text-[#E3B341]" />
|
|
</div>
|
|
<p className="text-[#E3B341] uppercase tracking-[0.4em] font-bold text-xl">Systems Offline</p>
|
|
<button
|
|
onClick={startCamera}
|
|
className="bg-[#E3B341] text-black px-12 py-4 font-bold uppercase tracking-widest hover:bg-white transition-all transform hover:scale-105"
|
|
>
|
|
Initialize Deployment
|
|
</button>
|
|
</div>
|
|
)}
|
|
|
|
{/* Live Camera Feed */}
|
|
<video
|
|
ref={videoRef}
|
|
autoPlay
|
|
playsInline
|
|
muted
|
|
className={`absolute inset-0 w-full h-full object-cover transition-all duration-1000 ${isCameraActive && (!isDeepZoom || !selectedTarget) ? 'opacity-100' : 'opacity-0'}`}
|
|
style={{
|
|
filter: getFilter(),
|
|
transform: `scale(${1 + Math.log10(zoom)})`,
|
|
transition: 'transform 0.5s ease-out, opacity 1.5s ease-in-out',
|
|
imageRendering: isSharpnessMax ? 'crisp-edges' : 'auto'
|
|
}}
|
|
/>
|
|
|
|
{/* Deep Space Layer */}
|
|
{selectedTarget && (
|
|
<div
|
|
className={`absolute inset-0 w-full h-full bg-cover bg-center transition-opacity duration-1000 ${isDeepZoom ? 'opacity-100' : 'opacity-0'}`}
|
|
style={{
|
|
backgroundImage: `url(${selectedTarget.img})`,
|
|
transform: `scale(${1 + (Math.log10(zoom) - 3) / 20})`,
|
|
filter: getFilter(),
|
|
imageRendering: isSharpnessMax ? 'crisp-edges' : 'auto'
|
|
}}
|
|
/>
|
|
)}
|
|
|
|
{/* Audience Visual Simulation Overlay */}
|
|
{isSimActive && audienceCount > 1000 && (
|
|
<div className="absolute inset-0 z-10 pointer-events-none overflow-hidden opacity-30">
|
|
{/* Heatmap/Crowd Particles Effect */}
|
|
<div className="absolute bottom-0 w-full h-1/4 bg-gradient-to-t from-[#E3B341]/20 to-transparent"></div>
|
|
{[...Array(20)].map((_, i) => (
|
|
<div
|
|
key={i}
|
|
className="absolute bg-[#00F2FF] rounded-full blur-[2px] animate-pulse"
|
|
style={{
|
|
width: Math.random() * 4 + 2,
|
|
height: Math.random() * 4 + 2,
|
|
left: `${Math.random() * 100}%`,
|
|
bottom: `${Math.random() * 20}%`,
|
|
opacity: Math.random(),
|
|
animationDelay: `${Math.random() * 5}s`
|
|
}}
|
|
/>
|
|
))}
|
|
</div>
|
|
)}
|
|
|
|
{/* Loading Overlay */}
|
|
{isFocusing && (
|
|
<div className="absolute inset-0 z-50 flex items-center justify-center bg-black/40 backdrop-blur-sm">
|
|
<div className="flex flex-col items-center space-y-4">
|
|
<div className="w-16 h-16 border-4 border-[#00F2FF] border-t-transparent rounded-full animate-spin"></div>
|
|
<div className="text-[#00F2FF] uppercase tracking-[0.3em] font-bold animate-pulse">Adjusting Focal Plane...</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* UI Controls & Telemetry */}
|
|
{isCameraActive && (
|
|
<div className="absolute inset-0 z-20 p-4 flex flex-col justify-between pointer-events-none">
|
|
{/* Top Bar */}
|
|
<div className="flex justify-between items-start pointer-events-auto">
|
|
<div className="bg-black/80 border-l-4 border-[#E3B341] p-4 backdrop-blur-lg min-w-[240px]">
|
|
<div className="text-[10px] text-gray-400 uppercase tracking-tighter">Global Observation Stream</div>
|
|
<div className="flex items-center space-x-2">
|
|
<div className={`w-2 h-2 rounded-full ${isRecording ? 'bg-red-500 animate-pulse' : 'bg-green-500'}`}></div>
|
|
<div className="font-bold text-[#E3B341] tracking-widest uppercase text-xs">
|
|
{isRecording ? 'A/V REC ACTIVE' : (isFocusing ? 'Acquiring Target' : 'LIVE TRANSMISSION')}
|
|
</div>
|
|
</div>
|
|
|
|
{isSimActive && (
|
|
<div className="mt-2 flex items-center space-x-2 bg-white/5 p-1 px-2 rounded">
|
|
<BaseIcon path={mdiAccountGroup} size={14} className="text-[#00F2FF]" />
|
|
<span className="text-white text-xs font-bold">{audienceCount.toLocaleString()} <span className="text-[10px] text-gray-400 font-normal">WATCHING</span></span>
|
|
</div>
|
|
)}
|
|
|
|
<div className="mt-3 grid grid-cols-2 gap-x-4 text-[9px]">
|
|
<div className="flex flex-col">
|
|
<span className="text-gray-500">BUS TEMP</span>
|
|
<span className="text-white">{(selectedTarget && isDeepZoom ? 6.5 : telemetry.temp).toFixed(1)}K</span>
|
|
</div>
|
|
<div className="flex flex-col">
|
|
<span className="text-gray-500">MAGNIFICATION</span>
|
|
<span className="text-[#00F2FF] font-bold">{formatZoom(zoom)}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex space-x-2">
|
|
{/* Advanced Sim Control */}
|
|
<button
|
|
onClick={() => setShowSimPanel(!showSimPanel)}
|
|
className={`p-3 bg-black/80 border transition-all ${isSimActive ? 'border-[#E3B341] text-[#E3B341]' : 'border-white/20 text-white opacity-60'}`}
|
|
title="Advanced Simulations"
|
|
>
|
|
<BaseIcon path={mdiStarCircle} size={20} />
|
|
</button>
|
|
|
|
{/* Recording System */}
|
|
<div className="flex space-x-1 bg-black/60 p-1 border border-white/10">
|
|
{!isRecording ? (
|
|
<button
|
|
onClick={startRecording}
|
|
className="p-3 bg-black/80 border border-white/20 hover:bg-red-600 transition-all text-white"
|
|
>
|
|
<BaseIcon path={mdiRecord} size={20} className="text-red-500" />
|
|
</button>
|
|
) : (
|
|
<button
|
|
onClick={stopRecording}
|
|
className="p-3 bg-red-600 border border-white/20 transition-all text-white animate-pulse"
|
|
>
|
|
<BaseIcon path={mdiStop} size={20} />
|
|
</button>
|
|
)}
|
|
{videoUrl && (
|
|
<button
|
|
onClick={downloadVideo}
|
|
className="p-3 bg-blue-600 border border-white/20 transition-all text-white"
|
|
>
|
|
<BaseIcon path={mdiDownload} size={20} />
|
|
</button>
|
|
)}
|
|
</div>
|
|
|
|
<button
|
|
onClick={() => setIsSharpnessMax(!isSharpnessMax)}
|
|
className={`p-3 bg-black/80 border transition-all ${isSharpnessMax ? 'border-[#00F2FF] text-[#00F2FF]' : 'border-white/20 text-white opacity-60'}`}
|
|
>
|
|
<BaseIcon path={mdiAutoFix} size={20} />
|
|
</button>
|
|
<button
|
|
onClick={stopCamera}
|
|
className="p-3 bg-black/80 border border-red-500/40 hover:bg-red-500/40 transition-all"
|
|
>
|
|
<BaseIcon path={mdiClose} size={20} className="text-white" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Advanced Simulation Panel */}
|
|
{showSimPanel && (
|
|
<div className="absolute top-20 right-4 w-72 bg-black/95 border border-[#E3B341] p-4 backdrop-blur-xl pointer-events-auto z-50">
|
|
<div className="flex justify-between items-center mb-4">
|
|
<h3 className="text-[#E3B341] font-bold uppercase text-xs tracking-widest">Audience Simulation</h3>
|
|
<button onClick={() => setShowSimPanel(false)}><BaseIcon path={mdiClose} size={16} /></button>
|
|
</div>
|
|
|
|
<div className="space-y-4">
|
|
<div className="flex items-center justify-between bg-white/5 p-2 rounded">
|
|
<span className="text-[10px] uppercase">Live Audience (1M max)</span>
|
|
<button
|
|
onClick={() => setIsSimActive(!isSimActive)}
|
|
className={`px-3 py-1 text-[9px] uppercase font-bold rounded ${isSimActive ? 'bg-red-600 text-white' : 'bg-[#00F2FF] text-black'}`}
|
|
>
|
|
{isSimActive ? 'Disable' : 'Enable'}
|
|
</button>
|
|
</div>
|
|
|
|
<div className="border-t border-white/10 pt-4">
|
|
<div className="flex justify-between items-center mb-2">
|
|
<span className="text-[10px] uppercase text-gray-400">Personalities (Famous Artists)</span>
|
|
<button onClick={selectAllCelebrities} className="text-[8px] text-[#00F2FF] uppercase underline">Select All</button>
|
|
</div>
|
|
<div className="grid grid-cols-2 gap-2 max-h-40 overflow-y-auto pr-2 custom-scrollbar">
|
|
{CELEBRITIES.map(celeb => (
|
|
<button
|
|
key={celeb.id}
|
|
onClick={() => toggleCelebrity(celeb.id)}
|
|
className={`p-1.5 text-left text-[9px] rounded transition-all border ${activeCelebrities.includes(celeb.id) ? 'bg-[#E3B341] text-black border-[#E3B341]' : 'bg-white/5 text-white border-white/10'}`}
|
|
>
|
|
{celeb.name}
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Simulation Chat / Interaction Overlay */}
|
|
{isSimActive && chatMessages.length > 0 && (
|
|
<div className="absolute left-4 top-1/2 -translate-y-1/2 w-64 flex flex-col space-y-2 pointer-events-none">
|
|
{chatMessages.map(msg => (
|
|
<div key={msg.id} className="bg-black/60 backdrop-blur-md p-2 border-l-2 border-[#E3B341] animate-fade-in-right">
|
|
<div className="flex justify-between items-center">
|
|
<span className="text-[#E3B341] font-bold text-[9px] uppercase">{msg.name}</span>
|
|
<span className="text-[8px] text-gray-500">{msg.category}</span>
|
|
</div>
|
|
<p className="text-white text-[10px] leading-tight mt-1 italic">"{msg.text}"</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
|
|
{/* Zoom Controls */}
|
|
<div className="absolute right-4 top-1/2 -translate-y-1/2 flex flex-col space-y-4 pointer-events-auto items-center">
|
|
<button
|
|
onClick={() => handleZoom('in')}
|
|
className="w-12 h-12 bg-black/80 border border-[#00F2FF] flex items-center justify-center hover:bg-[#00F2FF] hover:text-black transition-all rounded-full shadow-[0_0_15px_rgba(0,242,255,0.3)]"
|
|
>
|
|
<BaseIcon path={mdiMagnifyPlusOutline} size={24} />
|
|
</button>
|
|
<div className="h-40 w-1 bg-gray-800 relative rounded-full overflow-hidden">
|
|
<div
|
|
className="absolute bottom-0 left-0 w-full bg-[#00F2FF] transition-all duration-300"
|
|
style={{ height: `${(Math.log10(zoom) / 14) * 100}%` }}
|
|
></div>
|
|
</div>
|
|
<button
|
|
onClick={() => handleZoom('out')}
|
|
className="w-12 h-12 bg-black/80 border border-[#00F2FF] flex items-center justify-center hover:bg-[#00F2FF] hover:text-black transition-all rounded-full"
|
|
>
|
|
<BaseIcon path={mdiMagnifyMinusOutline} size={24} />
|
|
</button>
|
|
</div>
|
|
|
|
{/* Bottom Area: Controls */}
|
|
<div className="flex flex-col items-center space-y-4">
|
|
{/* Target Selector */}
|
|
<div className="flex flex-wrap justify-center gap-2 pointer-events-auto bg-black/60 p-3 backdrop-blur-md rounded-xl border border-white/10 max-w-lg">
|
|
{PRESET_TARGETS.map(target => (
|
|
<button
|
|
key={target.id}
|
|
onClick={() => selectTarget(target)}
|
|
className={`px-3 py-1.5 text-[9px] uppercase tracking-[0.2em] border transition-all ${selectedTarget?.id === target.id ? 'bg-[#E3B341] text-black border-[#E3B341]' : 'bg-black/60 text-white border-white/20 hover:border-[#E3B341]'}`}
|
|
>
|
|
{target.name}
|
|
</button>
|
|
))}
|
|
</div>
|
|
|
|
{/* Sensor Modes */}
|
|
<div className="flex justify-center space-x-6 pointer-events-auto pb-4">
|
|
{[
|
|
{ id: 'normal', label: 'VIS', icon: mdiWeatherNight, color: 'text-white' },
|
|
{ id: 'ir', label: 'NIRSpec', icon: mdiFlare, color: 'text-[#E3B341]' },
|
|
{ id: 'deep', label: 'MIRI', icon: mdiOrbitVariant, color: 'text-purple-400' }
|
|
].map(btn => (
|
|
<button
|
|
key={btn.id}
|
|
onClick={() => setMode(btn.id as any)}
|
|
className={`flex flex-col items-center p-2 w-16 transition-all ${mode === btn.id ? 'scale-110' : 'opacity-40 hover:opacity-100'}`}
|
|
>
|
|
<div className={`p-2 rounded-full border ${mode === btn.id ? 'border-[#00F2FF] bg-[#00F2FF]/10' : 'border-white/10'}`}>
|
|
<BaseIcon path={btn.icon} size={20} className={btn.color} />
|
|
</div>
|
|
<div className={`text-[8px] mt-1 font-bold tracking-tighter ${btn.color}`}>{btn.label}</div>
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Futuristic Scanline */}
|
|
<div className="absolute inset-0 pointer-events-none z-40 bg-scanline opacity-10"></div>
|
|
|
|
<style jsx global>{`
|
|
@keyframes fade-in-right {
|
|
from { opacity: 0; transform: translateX(-20px); }
|
|
to { opacity: 1; transform: translateX(0); }
|
|
}
|
|
.animate-fade-in-right {
|
|
animation: fade-in-right 0.5s ease-out forwards;
|
|
}
|
|
.custom-scrollbar::-webkit-scrollbar {
|
|
width: 4px;
|
|
}
|
|
.custom-scrollbar::-webkit-scrollbar-track {
|
|
background: rgba(255, 255, 255, 0.05);
|
|
}
|
|
.custom-scrollbar::-webkit-scrollbar-thumb {
|
|
background: #E3B341;
|
|
border-radius: 10px;
|
|
}
|
|
`}</style>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
ObservationPage.getLayout = function getLayout(page: ReactElement) {
|
|
return <LayoutAuthenticated>{page}</LayoutAuthenticated>;
|
|
};
|
|
|
|
export default ObservationPage;
|