282 lines
8.9 KiB
TypeScript
282 lines
8.9 KiB
TypeScript
"use client";
|
|
|
|
import React, { useRef, useEffect, useState, useCallback } from "react";
|
|
import { useTheme } from "next-themes";
|
|
|
|
// Версионирование для сброса кэша Cloudflare при деплое
|
|
const ENGINE_VERSION = "3.0.2";
|
|
|
|
interface NetrunnerMatrixProps {
|
|
isSecure?: boolean;
|
|
}
|
|
|
|
export const NetrunnerMatrix: React.FC<NetrunnerMatrixProps> = ({
|
|
isSecure = false,
|
|
}) => {
|
|
const containerRef = useRef<HTMLDivElement>(null);
|
|
const workerRef = useRef<Worker | null>(null);
|
|
const [isLoaded, setIsLoaded] = useState(false);
|
|
const hasTransferred = useRef(false);
|
|
|
|
const { resolvedTheme, theme } = useTheme();
|
|
const [mounted, setMounted] = useState(false);
|
|
|
|
useEffect(() => {
|
|
setMounted(true);
|
|
return () => setMounted(false);
|
|
}, []);
|
|
|
|
const isDarkMode = mounted
|
|
? resolvedTheme === "dark" || theme === "dark"
|
|
: true;
|
|
|
|
const checkIsMobile = useCallback(() => {
|
|
if (typeof window === "undefined") return false;
|
|
return window.innerWidth <= 768 || "ontouchstart" in window;
|
|
}, []);
|
|
|
|
const getEyeY = useCallback(() => {
|
|
const anchor = document.getElementById("eye-anchor");
|
|
const container = containerRef.current;
|
|
if (anchor && container) {
|
|
const ar = anchor.getBoundingClientRect();
|
|
const cr = container.getBoundingClientRect();
|
|
return ar.top - cr.top + ar.height / 2;
|
|
}
|
|
// Фолбэк, если якорь еще не отрендерился
|
|
return typeof window !== "undefined" ? window.innerHeight * 0.4 : 300;
|
|
}, []);
|
|
|
|
// === 1. ИНИЦИАЛИЗАЦИЯ WEBGL ===
|
|
useEffect(() => {
|
|
if (
|
|
!mounted ||
|
|
typeof window === "undefined" ||
|
|
!("OffscreenCanvas" in window)
|
|
)
|
|
return;
|
|
|
|
const container = containerRef.current;
|
|
if (!container || hasTransferred.current) return;
|
|
|
|
const canvas = document.createElement("canvas");
|
|
canvas.className =
|
|
"absolute inset-0 w-full h-full block transition-opacity duration-1000 opacity-0 z-0";
|
|
container.insertBefore(canvas, container.firstChild);
|
|
|
|
try {
|
|
const isMobile = checkIsMobile();
|
|
|
|
// --- ДЕТЕКТОР СЛАБОГО ЖЕЛЕЗА И ДАУНСЭМПЛИНГ ---
|
|
const cores = navigator.hardwareConcurrency || 4;
|
|
const memory = (navigator as any).deviceMemory || 8;
|
|
const isWeakHardware = cores <= 4 || memory <= 4;
|
|
const isLowQuality = isMobile || isWeakHardware;
|
|
|
|
// На слабом ПК и телефонах рендерим 75% от разрешения экрана
|
|
const pixelScale = 1;
|
|
// ----------------------------------------------
|
|
|
|
const logicalWidth = container.clientWidth;
|
|
const logicalHeight = container.clientHeight;
|
|
|
|
canvas.width = logicalWidth * pixelScale;
|
|
canvas.height = logicalHeight * pixelScale;
|
|
|
|
const worker = new Worker(
|
|
`/wasm-matrix/matrix_worker.js?v=${ENGINE_VERSION}`,
|
|
{ type: "module" },
|
|
);
|
|
workerRef.current = worker;
|
|
|
|
const offscreen = canvas.transferControlToOffscreen();
|
|
hasTransferred.current = true;
|
|
const eyeScale = isMobile ? 0.8 : 1.5; // Оставили твои размеры
|
|
|
|
worker.postMessage(
|
|
{
|
|
type: "INIT",
|
|
payload: {
|
|
canvas: offscreen,
|
|
logicalWidth,
|
|
logicalHeight,
|
|
pixelScale,
|
|
eyeY: getEyeY(),
|
|
eyeScale,
|
|
isMobile,
|
|
isVpnOn: isSecure,
|
|
isDarkMode,
|
|
fontSize: isMobile ? 12 : 16,
|
|
isLowQuality, // Передаем флаг в воркер
|
|
},
|
|
},
|
|
[offscreen],
|
|
);
|
|
|
|
worker.onmessage = (e) => {
|
|
if (e.data.type === "READY") {
|
|
canvas.classList.remove("opacity-0");
|
|
canvas.classList.add("opacity-100");
|
|
}
|
|
};
|
|
|
|
const resizeObserver = new ResizeObserver((entries) => {
|
|
for (let entry of entries) {
|
|
const { width, height } = entry.contentRect;
|
|
if (width === 0 || height === 0) continue;
|
|
|
|
const isMob = width <= 768;
|
|
const lowQual = isMob || isWeakHardware;
|
|
const pScale = 1;
|
|
|
|
workerRef.current?.postMessage({
|
|
type: "RESIZE",
|
|
payload: {
|
|
logicalWidth: width,
|
|
logicalHeight: height,
|
|
pixelScale: pScale,
|
|
eyeY: getEyeY(),
|
|
eyeScale: isMob ? 0.8 : 1.5,
|
|
isMobile: isMob,
|
|
fontSize: isMob ? 12 : 16,
|
|
isLowQuality: lowQual,
|
|
},
|
|
});
|
|
}
|
|
});
|
|
|
|
resizeObserver.observe(container);
|
|
|
|
return () => {
|
|
resizeObserver.disconnect();
|
|
if (workerRef.current) {
|
|
workerRef.current.terminate();
|
|
workerRef.current = null;
|
|
}
|
|
if (container.contains(canvas)) {
|
|
container.removeChild(canvas);
|
|
}
|
|
hasTransferred.current = false;
|
|
};
|
|
} catch (e) {
|
|
console.error("Matrix WebGL Bridge Failed:", e);
|
|
}
|
|
}, [mounted, checkIsMobile, getEyeY]);
|
|
|
|
// === 2. РЕАКЦИЯ НА ТЕМУ И VPN (ВОЗВРАЩАЕМ!) ===
|
|
useEffect(() => {
|
|
if (workerRef.current && mounted) {
|
|
workerRef.current.postMessage({
|
|
type: "THEME",
|
|
payload: {
|
|
isVpnOn: isSecure,
|
|
isDarkMode: isDarkMode,
|
|
},
|
|
});
|
|
}
|
|
}, [isSecure, isDarkMode, mounted]); // Теперь React сообщит воркеру об изменениях
|
|
|
|
// === 3. ИНТЕРАКТИВНОСТЬ (МЫШЬ, КЛИКИ, ГИРОСКОП) ===
|
|
useEffect(() => {
|
|
if (!mounted || !workerRef.current || !containerRef.current) return;
|
|
|
|
const container = containerRef.current;
|
|
|
|
const handleOrientation = (e: DeviceOrientationEvent) => {
|
|
let gamma = e.gamma || 0;
|
|
if (gamma > 45) gamma = 45;
|
|
if (gamma < -45) gamma = -45;
|
|
const tiltX = gamma / 45.0;
|
|
workerRef.current?.postMessage({
|
|
type: "TILT",
|
|
payload: { x: tiltX, y: 0 },
|
|
});
|
|
};
|
|
|
|
window.addEventListener("deviceorientation", handleOrientation);
|
|
|
|
const handleEvents = (e: PointerEvent | TouchEvent) => {
|
|
const isDown = e.type === "pointerdown" || e.type === "touchstart";
|
|
const isMove = e.type === "pointermove" || e.type === "touchmove";
|
|
|
|
if (e.target instanceof Element && e.target.closest("button, a, input"))
|
|
return;
|
|
|
|
let clientX, clientY;
|
|
if ("touches" in e) {
|
|
clientX = e.touches[0]?.clientX;
|
|
clientY = e.touches[0]?.clientY;
|
|
} else {
|
|
clientX = (e as PointerEvent).clientX;
|
|
clientY = (e as PointerEvent).clientY;
|
|
}
|
|
|
|
if (clientX === undefined || clientY === undefined) return;
|
|
|
|
const rect = container.getBoundingClientRect();
|
|
const px = clientX - rect.left;
|
|
const py = clientY - rect.top;
|
|
|
|
if (isDown) {
|
|
workerRef.current?.postMessage({
|
|
type: "SHOCKWAVE",
|
|
payload: { x: px, y: py },
|
|
});
|
|
workerRef.current?.postMessage({
|
|
type: "DRAW_START",
|
|
payload: { x: px, y: py },
|
|
});
|
|
}
|
|
|
|
if (isMove) {
|
|
workerRef.current?.postMessage({
|
|
type: "KINETIC_SWIPE",
|
|
payload: { x: px, y: py },
|
|
});
|
|
workerRef.current?.postMessage({
|
|
type: "MOUSE_MOVE",
|
|
payload: { x: px, y: py },
|
|
});
|
|
}
|
|
};
|
|
|
|
const handlePointerUp = () => {
|
|
workerRef.current?.postMessage({ type: "DRAW_END", payload: {} });
|
|
};
|
|
|
|
window.addEventListener("pointerdown", handleEvents, { passive: true });
|
|
window.addEventListener("pointermove", handleEvents, { passive: true });
|
|
window.addEventListener("pointerup", handlePointerUp, { passive: true });
|
|
|
|
window.addEventListener("touchstart", handleEvents, { passive: true });
|
|
window.addEventListener("touchmove", handleEvents, { passive: true });
|
|
window.addEventListener("touchend", handlePointerUp, { passive: true });
|
|
|
|
return () => {
|
|
window.removeEventListener("deviceorientation", handleOrientation);
|
|
window.removeEventListener("pointerdown", handleEvents);
|
|
window.removeEventListener("pointermove", handleEvents);
|
|
window.removeEventListener("pointerup", handlePointerUp);
|
|
window.removeEventListener("touchstart", handleEvents);
|
|
window.removeEventListener("touchmove", handleEvents);
|
|
window.removeEventListener("touchend", handlePointerUp);
|
|
};
|
|
}, [mounted]);
|
|
|
|
return (
|
|
<div
|
|
ref={containerRef}
|
|
className="absolute inset-0 overflow-hidden z-0"
|
|
style={{ backgroundColor: isDarkMode ? "#0a0a0c" : "#fafafc" }}
|
|
>
|
|
<div
|
|
className="absolute inset-0 pointer-events-none opacity-[0.15] dark:opacity-[0.25] hidden md:block z-10"
|
|
style={{
|
|
background: `linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06))`,
|
|
backgroundSize: "100% 4px, 3px 100%",
|
|
}}
|
|
/>
|
|
</div>
|
|
);
|
|
};
|