404 lines
15 KiB
TypeScript
404 lines
15 KiB
TypeScript
import { useEffect, useRef, useState } from 'react';
|
|
import { ChevronLeft, Loader2, Wifi, WifiOff } from 'lucide-react';
|
|
import * as THREE from 'three';
|
|
import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer.js';
|
|
import { RenderPass } from 'three/examples/jsm/postprocessing/RenderPass.js';
|
|
import { UnrealBloomPass } from 'three/examples/jsm/postprocessing/UnrealBloomPass.js';
|
|
|
|
interface Msg { text: string; id: number; }
|
|
interface Star { x: number; y: number; sz: number; ph: number; spd: number; col: [number, number, number]; }
|
|
|
|
const STAR_PALETTE: [number, number, number][] = [
|
|
[255, 255, 255], [255, 240, 210], [210, 220, 255], [255, 210, 210], [200, 255, 230],
|
|
];
|
|
|
|
function mkStar(W: number, H: number): Star {
|
|
return {
|
|
x: Math.random() * W | 0,
|
|
y: Math.random() * H | 0,
|
|
sz: Math.random() < 0.8 ? 1 : Math.random() < 0.6 ? 2 : 3,
|
|
ph: Math.random() * Math.PI * 2,
|
|
spd: Math.random() * 0.04 + 0.005,
|
|
col: STAR_PALETTE[Math.random() * STAR_PALETTE.length | 0],
|
|
};
|
|
}
|
|
|
|
// ── Shaders (verbatim from public/vortex/script.js) ──────────────────────────
|
|
|
|
const VERT_SHELL = `
|
|
varying vec2 vUv;
|
|
void main() {
|
|
vUv = uv;
|
|
gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
|
|
}
|
|
`;
|
|
|
|
const FRAG_SHELL = `
|
|
uniform float uTime;
|
|
uniform vec2 uGridSize;
|
|
uniform vec3 uColor;
|
|
uniform float uPulseSpeed;
|
|
uniform float uGap;
|
|
uniform float uOpacity;
|
|
varying vec2 vUv;
|
|
float random(vec2 st) {
|
|
return fract(sin(dot(st.xy, vec2(12.9898,78.233))) * 43758.5453123);
|
|
}
|
|
void main() {
|
|
vec2 gridUV = vUv * uGridSize;
|
|
vec2 cellID = floor(gridUV);
|
|
vec2 cellUV = fract(gridUV);
|
|
float padding = uGap;
|
|
float square = step(padding, cellUV.x) * step(padding, cellUV.y)
|
|
* step(cellUV.x, 1.0 - padding) * step(cellUV.y, 1.0 - padding);
|
|
float rnd = random(cellID);
|
|
float pulse = 0.5 + 0.5 * sin(uTime * uPulseSpeed + rnd * 6.28);
|
|
float alpha = square * (0.05 + 0.95 * pulse) * uOpacity;
|
|
gl_FragColor = vec4(uColor, alpha);
|
|
}
|
|
`;
|
|
|
|
const VERT_TRAIL = `
|
|
varying vec2 vUv;
|
|
void main() {
|
|
vUv = uv;
|
|
gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
|
|
}
|
|
`;
|
|
|
|
const FRAG_TRAIL = `
|
|
uniform float uTime;
|
|
uniform vec3 uColor;
|
|
uniform float uSpeed;
|
|
uniform float uSpeedMult;
|
|
uniform float uLength;
|
|
uniform float uLengthMult;
|
|
uniform float uOffset;
|
|
uniform float uDirection;
|
|
varying vec2 vUv;
|
|
void main() {
|
|
float finalSpeed = uSpeed * uSpeedMult;
|
|
float progress = fract(vUv.x * 2.0 - (uTime * finalSpeed * uDirection) + uOffset);
|
|
float finalLength = clamp(uLength * uLengthMult, 0.01, 0.99);
|
|
float alpha = 0.0;
|
|
if (uDirection > 0.0) {
|
|
alpha = smoothstep(1.0 - finalLength, 1.0, progress);
|
|
} else {
|
|
alpha = 1.0 - smoothstep(0.0, finalLength, progress);
|
|
}
|
|
alpha = pow(alpha, 3.0);
|
|
gl_FragColor = vec4(uColor, alpha);
|
|
}
|
|
`;
|
|
|
|
// ── Component ─────────────────────────────────────────────────────────────────
|
|
|
|
export default function RealityOverridePage({ onBack }: { onBack: () => void }) {
|
|
const containerRef = useRef<HTMLDivElement>(null);
|
|
const starCanvasRef = useRef<HTMLCanvasElement>(null);
|
|
const starsRef = useRef<Star[]>([]);
|
|
const wsRef = useRef<WebSocket | null>(null);
|
|
const msgIdRef = useRef(0);
|
|
const fadeTimer = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
|
|
const pausedRef = useRef(localStorage.getItem('ro-bg') === 'off');
|
|
const lastTapRef = useRef(0);
|
|
|
|
const [wsStatus, setWsStatus] = useState<'connecting' | 'connected' | 'disconnected'>('connecting');
|
|
const [currentCmd, setCurrentCmd] = useState<Msg | null>(null);
|
|
const [history, setHistory] = useState<Msg[]>([]);
|
|
const [bgVisible, setBgVisible] = useState(() => localStorage.getItem('ro-bg') !== 'off');
|
|
|
|
const toggleBg = () => {
|
|
pausedRef.current = !pausedRef.current;
|
|
const next = !pausedRef.current;
|
|
setBgVisible(next);
|
|
localStorage.setItem('ro-bg', next ? 'on' : 'off');
|
|
};
|
|
|
|
const handleTouchEnd = () => {
|
|
const now = Date.now();
|
|
if (now - lastTapRef.current < 300) { toggleBg(); lastTapRef.current = 0; }
|
|
else { lastTapRef.current = now; }
|
|
};
|
|
|
|
// ── Three.js vortex ─────────────────────────────────────────────────────────
|
|
useEffect(() => {
|
|
const container = containerRef.current;
|
|
if (!container) return;
|
|
|
|
const W = container.clientWidth || window.innerWidth;
|
|
const H = container.clientHeight || window.innerHeight;
|
|
|
|
// Scene
|
|
const scene = new THREE.Scene();
|
|
scene.fog = new THREE.FogExp2(0x000000, 0.12);
|
|
|
|
// Camera
|
|
const camera = new THREE.PerspectiveCamera(90, W / H, 0.01, 100);
|
|
|
|
// Renderer
|
|
const renderer = new THREE.WebGLRenderer({ antialias: true });
|
|
renderer.setSize(W, H);
|
|
renderer.setPixelRatio(window.devicePixelRatio);
|
|
renderer.toneMapping = THREE.NoToneMapping;
|
|
container.appendChild(renderer.domElement);
|
|
|
|
// Post-processing
|
|
const composer = new EffectComposer(renderer);
|
|
composer.addPass(new RenderPass(scene, camera));
|
|
const bloomPass = new UnrealBloomPass(new THREE.Vector2(W, H), 1.5, 0.4, 0.85);
|
|
bloomPass.threshold = 0.1;
|
|
bloomPass.strength = 0.5;
|
|
bloomPass.radius = 0.6;
|
|
composer.addPass(bloomPass);
|
|
|
|
// Tokamak group
|
|
const tokamakGroup = new THREE.Group();
|
|
scene.add(tokamakGroup);
|
|
|
|
// Grid shell
|
|
const shellMaterial = new THREE.ShaderMaterial({
|
|
vertexShader: VERT_SHELL,
|
|
fragmentShader: FRAG_SHELL,
|
|
uniforms: {
|
|
uTime: { value: 0 },
|
|
uGridSize: { value: new THREE.Vector2(600, 300) },
|
|
uColor: { value: new THREE.Color('#3388ff') },
|
|
uPulseSpeed: { value: 4.89 },
|
|
uGap: { value: 0.23 },
|
|
uOpacity: { value: 1.0 },
|
|
},
|
|
transparent: true,
|
|
side: THREE.DoubleSide,
|
|
depthWrite: false,
|
|
blending: THREE.AdditiveBlending,
|
|
});
|
|
tokamakGroup.add(new THREE.Mesh(new THREE.TorusGeometry(10, 3.0, 60, 200), shellMaterial));
|
|
|
|
// Trail lines
|
|
const trailsGroup = new THREE.Group();
|
|
tokamakGroup.add(trailsGroup);
|
|
const trailMaterials: THREE.ShaderMaterial[] = [];
|
|
|
|
for (let i = 0; i < 80; i++) {
|
|
const laneRadius = 7.5 + Math.random() * 5.0;
|
|
const mat = new THREE.ShaderMaterial({
|
|
vertexShader: VERT_TRAIL,
|
|
fragmentShader: FRAG_TRAIL,
|
|
uniforms: {
|
|
uTime: { value: 0 },
|
|
uColor: { value: new THREE.Color('#38cdff') },
|
|
uSpeed: { value: 0.1 + Math.random() * 0.3 },
|
|
uSpeedMult: { value: 1.0 },
|
|
uLength: { value: 0.1 + Math.random() * 0.2 },
|
|
uLengthMult: { value: 0.47 },
|
|
uOffset: { value: Math.random() * 100.0 },
|
|
uDirection: { value: 1.0 },
|
|
},
|
|
transparent: true,
|
|
blending: THREE.AdditiveBlending,
|
|
depthWrite: false,
|
|
});
|
|
const mesh = new THREE.Mesh(new THREE.TorusGeometry(laneRadius, 0.005, 6, 120), mat);
|
|
mesh.rotation.x = (Math.random() - 0.5) * 0.1;
|
|
mesh.position.z = (Math.random() - 0.5) * 0.5;
|
|
trailsGroup.add(mesh);
|
|
trailMaterials.push(mat);
|
|
}
|
|
|
|
// Animation loop — automated camera flight (no OrbitControls needed)
|
|
const clock = new THREE.Clock();
|
|
let cameraAngle = 0;
|
|
let animId = 0;
|
|
|
|
const animate = () => {
|
|
animId = requestAnimationFrame(animate);
|
|
const delta = clock.getDelta();
|
|
const elapsed = clock.getElapsedTime();
|
|
|
|
cameraAngle += 0.3 * delta;
|
|
const r = 10;
|
|
camera.position.set(Math.cos(cameraAngle) * r, Math.sin(cameraAngle) * r, 0.5);
|
|
const la = cameraAngle + 0.1;
|
|
camera.lookAt(Math.cos(la) * r, Math.sin(la) * r, 0);
|
|
|
|
if (pausedRef.current) return;
|
|
|
|
shellMaterial.uniforms.uTime.value = elapsed;
|
|
trailMaterials.forEach(m => { m.uniforms.uTime.value = elapsed; });
|
|
|
|
composer.render();
|
|
};
|
|
|
|
animate();
|
|
|
|
// Resize observer keeps canvas filling its container
|
|
const ro = new ResizeObserver(() => {
|
|
const w = container.clientWidth;
|
|
const h = container.clientHeight;
|
|
camera.aspect = w / h;
|
|
camera.updateProjectionMatrix();
|
|
renderer.setSize(w, h);
|
|
composer.setSize(w, h);
|
|
});
|
|
ro.observe(container);
|
|
|
|
return () => {
|
|
cancelAnimationFrame(animId);
|
|
ro.disconnect();
|
|
renderer.dispose();
|
|
if (container.contains(renderer.domElement)) container.removeChild(renderer.domElement);
|
|
};
|
|
}, []);
|
|
|
|
// ── Star field (always running, visible under Three.js when vortex is hidden) ─
|
|
useEffect(() => {
|
|
const canvas = starCanvasRef.current;
|
|
if (!canvas) return;
|
|
let animId = 0;
|
|
let prevW = 0, prevH = 0;
|
|
|
|
const loop = () => {
|
|
const W = canvas.clientWidth, H = canvas.clientHeight;
|
|
if (!W || !H) { animId = requestAnimationFrame(loop); return; }
|
|
if (W !== prevW || H !== prevH) {
|
|
canvas.width = W; canvas.height = H;
|
|
prevW = W; prevH = H;
|
|
starsRef.current = Array.from({ length: 200 }, () => mkStar(W, H));
|
|
}
|
|
const ctx = canvas.getContext('2d')!;
|
|
ctx.fillStyle = '#000010';
|
|
ctx.fillRect(0, 0, W, H);
|
|
for (const st of starsRef.current) {
|
|
st.ph += st.spd;
|
|
const br = Math.sin(st.ph) * 0.4 + 0.6;
|
|
const [r, g, b] = st.col;
|
|
ctx.fillStyle = `rgba(${r},${g},${b},${br})`;
|
|
ctx.fillRect(st.x, st.y, st.sz, st.sz);
|
|
if (st.sz >= 3 && br > 0.85) {
|
|
ctx.fillStyle = `rgba(${r},${g},${b},${br * 0.35})`;
|
|
ctx.fillRect(st.x - 2, st.y + 1, st.sz + 4, 1);
|
|
ctx.fillRect(st.x + 1, st.y - 2, 1, st.sz + 4);
|
|
}
|
|
}
|
|
animId = requestAnimationFrame(loop);
|
|
};
|
|
|
|
animId = requestAnimationFrame(loop);
|
|
return () => cancelAnimationFrame(animId);
|
|
}, []);
|
|
|
|
// ── WebSocket ───────────────────────────────────────────────────────────────
|
|
useEffect(() => {
|
|
let cancelled = false;
|
|
let ws: WebSocket | null = null;
|
|
|
|
const connect = () => {
|
|
if (cancelled) return;
|
|
ws = new WebSocket(`ws://${window.location.hostname}/ws`);
|
|
wsRef.current = ws;
|
|
setWsStatus('connecting');
|
|
ws.onopen = () => { if (!cancelled) setWsStatus('connected'); };
|
|
ws.onmessage = (e) => {
|
|
if (cancelled) return;
|
|
const id = msgIdRef.current++;
|
|
const msg: Msg = { text: String(e.data), id };
|
|
setCurrentCmd(msg);
|
|
setHistory(prev => [...prev.slice(-9), msg]);
|
|
clearTimeout(fadeTimer.current);
|
|
fadeTimer.current = setTimeout(() => setCurrentCmd(null), 5000);
|
|
};
|
|
ws.onclose = () => { if (!cancelled) { setWsStatus('disconnected'); setTimeout(connect, 3000); } };
|
|
ws.onerror = () => ws?.close();
|
|
};
|
|
|
|
connect();
|
|
return () => { cancelled = true; ws?.close(); };
|
|
}, []);
|
|
|
|
return (
|
|
<div
|
|
className="relative w-full h-full bg-black overflow-hidden"
|
|
onDoubleClick={toggleBg}
|
|
onTouchEnd={handleTouchEnd}
|
|
>
|
|
|
|
{/* Star field — always visible beneath the vortex */}
|
|
<canvas ref={starCanvasRef} className="absolute inset-0 w-full h-full" style={{ imageRendering: 'pixelated' }} />
|
|
|
|
{/* Three.js vortex — fades out on double-click/tap */}
|
|
<div ref={containerRef} className={`absolute inset-0 transition-opacity duration-500 ${bgVisible ? 'opacity-100' : 'opacity-0'}`} />
|
|
|
|
{/* CSS keyframe for command flash */}
|
|
<style>{`
|
|
@keyframes cmd-flash {
|
|
0% { opacity: 0; transform: translate(-50%,-50%) scale(0.92); }
|
|
10% { opacity: 1; transform: translate(-50%,-50%) scale(1); }
|
|
70% { opacity: 1; transform: translate(-50%,-50%) scale(1); }
|
|
100% { opacity: 0; transform: translate(-50%,-50%) scale(1); }
|
|
}
|
|
.cmd-flash { animation: cmd-flash 5s ease-out forwards; }
|
|
`}</style>
|
|
|
|
{/* Back */}
|
|
<button
|
|
onClick={onBack}
|
|
className="absolute top-3 left-3 z-10 flex items-center gap-1 text-white/50 hover:text-white text-xs px-2 py-1 rounded bg-black/40 border border-white/10"
|
|
>
|
|
<ChevronLeft className="w-3.5 h-3.5" /> Back
|
|
</button>
|
|
|
|
{/* WS status */}
|
|
<div className="absolute top-3 right-3 z-10 flex items-center gap-1.5 text-xs px-2 py-1 rounded bg-black/40 border border-white/10">
|
|
{wsStatus === 'connecting' && <><Loader2 className="w-3.5 h-3.5 text-yellow-400 animate-spin" /><span className="text-yellow-400">Connecting…</span></>}
|
|
{wsStatus === 'connected' && <><Wifi className="w-3.5 h-3.5 text-green-400" /><span className="text-green-400">Connected</span></>}
|
|
{wsStatus === 'disconnected' && <><WifiOff className="w-3.5 h-3.5 text-red-400" /><span className="text-red-400">Reconnecting…</span></>}
|
|
</div>
|
|
|
|
{/* Idle title — shown only before first message */}
|
|
{history.length === 0 && (
|
|
<div className="absolute inset-0 flex flex-col items-center justify-center z-10 pointer-events-none select-none">
|
|
<div
|
|
className="text-white/20 text-xl font-mono tracking-[0.3em] uppercase"
|
|
style={{ textShadow: '0 0 30px rgba(120,60,255,0.7)' }}
|
|
>
|
|
Reality Override
|
|
</div>
|
|
<div className="text-white/10 text-xs font-mono tracking-widest mt-2 uppercase">
|
|
Awaiting Commands<span className="animate-pulse">_</span>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Centered current command */}
|
|
{currentCmd && (
|
|
<div
|
|
key={currentCmd.id}
|
|
className="cmd-flash absolute z-10 pointer-events-none select-none text-center"
|
|
style={{ top: '50%', left: '50%', transform: 'translate(-50%,-50%)', maxWidth: '80%' }}
|
|
>
|
|
<div
|
|
className="font-mono text-2xl font-bold tracking-wide text-white break-words"
|
|
style={{ textShadow: '0 0 24px rgba(80,200,255,0.9), 0 0 60px rgba(80,200,255,0.4)' }}
|
|
>
|
|
{currentCmd.text}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* History log */}
|
|
{history.length > 0 && (
|
|
<div className="absolute bottom-4 left-4 right-4 z-10">
|
|
<div className="bg-black/70 border border-green-900/40 rounded px-3 py-2 space-y-0.5">
|
|
{history.map(m => (
|
|
<div key={m.id} className="text-green-400 text-xs font-mono truncate">
|
|
<span className="text-green-800 mr-2">></span>{m.text}
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|