optimization and some fixes

components/graphics/NetrunnerMatrix.tsx

@@ -3,7 +3,7 @@
 import React, { useRef, useEffect, useState } from "react";
 import { useTheme } from "next-themes";
 
-const ENGINE_VERSION = "2.0.2";
+const ENGINE_VERSION = "2.0.3";
 
 interface NetrunnerMatrixProps {
   isSecure?: boolean;
@@ -49,32 +49,35 @@ export const NetrunnerMatrix: React.FC<NetrunnerMatrixProps> = ({
 
     if (!canvas || !container || hasTransferred.current) return;
 
-    const getEyeY = (scale: number) => {
+    const getEyeY = () => {
       const anchor = document.getElementById("eye-anchor");
       const canvas = canvasRef.current;
       if (anchor && canvas) {
         const ar = anchor.getBoundingClientRect();
         const cr = canvas.getBoundingClientRect();
-        return (ar.top - cr.top + ar.height / 2) * scale;
+        return ar.top - cr.top + ar.height / 2;
       }
       return 0;
     };
 
     const isMobile = checkIsMobile();
-    const pixelScale = Math.min(window.devicePixelRatio || 1, 1.5);
-    const initialWidth = container.clientWidth * pixelScale;
-    const initialHeight = container.clientHeight * pixelScale;
+    // Берем плотность пикселей экрана, ограничиваем до 2.0 для баланса резкости и FPS
+    const pixelScale = Math.min(window.devicePixelRatio || 1, 2.0);
 
-    dimensionsRef.current = { width: initialWidth, height: initialHeight };
+    // ЛОГИЧЕСКИЙ размер (в CSS пикселях) - для физики Rust
+    const logicalWidth = container.clientWidth;
+    const logicalHeight = container.clientHeight;
+
+    dimensionsRef.current = { width: logicalWidth, height: logicalHeight };
 
     try {
-      canvas.width = initialWidth;
-      canvas.height = initialHeight;
+      // ФИЗИЧЕСКИЙ размер Canvas (для резкости)
+      canvas.width = logicalWidth * pixelScale;
+      canvas.height = logicalHeight * pixelScale;
+
       const worker = new Worker(
         `/wasm-matrix/matrix_worker.js?v=${ENGINE_VERSION}`,
-        {
-          type: "module",
-        },
+        { type: "module" },
       );
       workerRef.current = worker;
 
@@ -86,9 +89,10 @@ export const NetrunnerMatrix: React.FC<NetrunnerMatrixProps> = ({
           type: "INIT",
           payload: {
             canvas: offscreen,
-            width: initialWidth,
-            height: initialHeight,
-            eyeY: getEyeY(pixelScale),
+            logicalWidth,
+            logicalHeight,
+            pixelScale,
+            eyeY: getEyeY(), // Без scale, так как движок теперь работает в логических координатах
             isMobile,
             isVpnOn: isSecure,
             isDarkMode,
@@ -106,18 +110,18 @@ export const NetrunnerMatrix: React.FC<NetrunnerMatrixProps> = ({
         resizeTimeout = setTimeout(() => {
           if (!container || !workerRef.current) return;
           const isMob = checkIsMobile();
-          const scale = isMob
-            ? 1.0
-            : Math.min(window.devicePixelRatio || 1, 1.5);
-          const w = container.clientWidth * scale;
-          const h = container.clientHeight * scale;
-          dimensionsRef.current = { width: w, height: h };
+          const pScale = Math.min(window.devicePixelRatio || 1, 2.0);
+          const lw = container.clientWidth;
+          const lh = container.clientHeight;
+          dimensionsRef.current = { width: lw, height: lh };
+
           workerRef.current.postMessage({
             type: "RESIZE",
             payload: {
-              width: w,
-              height: h,
-              eyeY: getEyeY(scale),
+              logicalWidth: lw,
+              logicalHeight: lh,
+              pixelScale: pScale,
+              eyeY: getEyeY(),
               isMobile: isMob,
               fontSize: isMob ? 10 : 16,
             },
@@ -149,61 +153,56 @@ export const NetrunnerMatrix: React.FC<NetrunnerMatrixProps> = ({
       });
     }
   }, [isSecure, isDarkMode, mounted]);
+
   useEffect(() => {
     if (!mounted || !workerRef.current) return;
 
-    // --- 1. Гироскоп (Наклон телефона) ---
     const handleOrientation = (e: DeviceOrientationEvent) => {
-      let gamma = e.gamma || 0; // Наклон влево/вправо (-90 до 90)
-
-      // Ограничиваем угол для комфорта
+      let gamma = e.gamma || 0;
       if (gamma > 45) gamma = 45;
       if (gamma < -45) gamma = -45;
-
-      // Нормализуем от -1.0 до 1.0
       const tiltX = gamma / 45.0;
-
       workerRef.current?.postMessage({
         type: "TILT",
         payload: { x: tiltX, y: 0 },
       });
     };
 
-    // Запрос прав для iOS 13+ (если нужно, можно вынести в кнопку включения VPN)
     if (
       typeof (DeviceOrientationEvent as any).requestPermission === "function"
     ) {
-      // Это должно вызываться по клику пользователя, здесь оставлено для примера
-      // (DeviceOrientationEvent as any).requestPermission().then(...)
+      // iOS permission logic omitted for brevity
     } else {
       window.addEventListener("deviceorientation", handleOrientation);
     }
 
-    // --- 2. Ударные волны и Кинетический свайп ---
     const handleEvents = (e: any) => {
       const isDown = e.type === "pointerdown" || e.type === "touchstart";
       const isMove = e.type === "pointermove" || e.type === "touchmove";
 
+      const isInteractive = e.target.closest(
+        'button, a, input, [role="button"], [role="switch"]',
+      );
+      if (isDown && isInteractive) return;
+
       let clientX = e.touches ? e.touches[0].clientX : e.clientX;
       let clientY = e.touches ? e.touches[0].clientY : e.clientY;
 
       if (clientX === undefined) return;
 
       const rect = canvasRef.current!.getBoundingClientRect();
+      // Scale теперь всегда 1.0, так как dimensionsRef равен логическому CSS размеру
       const scaleX = dimensionsRef.current.width / rect.width;
       const scaleY = dimensionsRef.current.height / rect.height;
       const px = (clientX - rect.left) * scaleX;
       const py = (clientY - rect.top) * scaleY;
 
-      // Ударная волна при клике/тапе
       if (isDown) {
         workerRef.current?.postMessage({
           type: "SHOCKWAVE",
           payload: { x: px, y: py },
         });
       }
-
-      // Магнитный свайп
       if (isMove) {
         workerRef.current?.postMessage({
           type: "KINETIC_SWIPE",
@@ -220,7 +219,9 @@ export const NetrunnerMatrix: React.FC<NetrunnerMatrixProps> = ({
     return () => {
       window.removeEventListener("deviceorientation", handleOrientation);
       window.removeEventListener("pointerdown", handleEvents);
-      // ... удаляем остальные листенеры ...
+      window.removeEventListener("pointermove", handleEvents);
+      window.removeEventListener("touchstart", handleEvents);
+      window.removeEventListener("touchmove", handleEvents);
     };
   }, [mounted]);