fixed interactive banner

frontend/src/components/DynamicBanner.tsx

@@ -43,7 +43,7 @@ const MatrixBanner: React.FC<DynamicBannerProps & { settings: Banner['settings']
         alignItems: 'center',
         justifyContent: 'center',
         fontFamily: 'monospace',
-        zIndex: 1,
+        zIndex: 0,
         overflow: 'hidden',
         opacity: settings?.opacity || 0.5,
       }}

frontend/src/components/FirefliesBanner.tsx

@@ -121,18 +121,17 @@ const FirefliesBanner: React.FC<FirefliesBannerProps> = ({ username, palette, se
     const mouse = { x: -1000, y: -1000 };
     const handleMouseMove = (e: MouseEvent) => {
       const rect = canvas.getBoundingClientRect();
-      mouse.x = e.clientX - rect.left;
+      const x = e.clientX - rect.left;
-      mouse.y = e.clientY - rect.top;
+      const y = e.clientY - rect.top;
-    };
+      if (x < 0 || y < 0 || x > rect.width || y > rect.height) {
-
-    const parent = canvas.parentElement;
-    if (parent) {
-      parent.addEventListener('mousemove', handleMouseMove);
-      parent.addEventListener('mouseleave', () => {
         mouse.x = -1000;
         mouse.y = -1000;
-      });
+      } else {
-    }
+        mouse.x = x;
+        mouse.y = y;
+      }
+    };
+    window.addEventListener('mousemove', handleMouseMove);
 
     let time = 0;
     const draw = (now = 0) => {
@@ -252,9 +251,7 @@ const FirefliesBanner: React.FC<FirefliesBannerProps> = ({ username, palette, se
 
     return () => {
       resizeObserver.disconnect();
-      if (parent) {
+      window.removeEventListener('mousemove', handleMouseMove);
-        parent.removeEventListener('mousemove', handleMouseMove);
-      }
       cancelAnimationFrame(animationFrameId);
     };
   }, [
@@ -280,7 +277,7 @@ const FirefliesBanner: React.FC<FirefliesBannerProps> = ({ username, palette, se
         width: '100%',
         height: '100%',
         pointerEvents: 'none',
-        zIndex: 1,
+        zIndex: 0,
       }}
     />
   );

frontend/src/components/GenerativeBanner.tsx

@@ -113,44 +113,57 @@ const GenerativeBanner: React.FC<GenerativeBannerProps> = ({
 
     const mouse = { x: -1000, y: -1000, down: false };
 
-    const handleMouseMove = (e: MouseEvent) => {
+    const updateMouseFromCoords = (clientX: number, clientY: number) => {
       const rect = canvas.getBoundingClientRect();
-      mouse.x = e.clientX - rect.left;
+      const x = clientX - rect.left;
-      mouse.y = e.clientY - rect.top;
+      const y = clientY - rect.top;
+      if (x < 0 || y < 0 || x > rect.width || y > rect.height) {
+        mouse.x = -1000;
+        mouse.y = -1000;
+        return false;
+      }
+      mouse.x = x;
+      mouse.y = y;
+      return true;
+    };
+
+    const handleMouseMove = (e: MouseEvent) => {
+      if (!updateMouseFromCoords(e.clientX, e.clientY)) {
+        mouse.down = false;
+      }
     };
 
     const handleTouchMove = (e: TouchEvent) => {
       if (e.touches.length > 0) {
-        const rect = canvas.getBoundingClientRect();
+        updateMouseFromCoords(e.touches[0].clientX, e.touches[0].clientY);
-        mouse.x = e.touches[0].clientX - rect.left;
-        mouse.y = e.touches[0].clientY - rect.top;
       }
     };
 
-    const handleMouseDown = () => {
+    const handleMouseDown = (e: MouseEvent) => {
-      mouse.down = true;
+      const rect = canvas.getBoundingClientRect();
+      const x = e.clientX - rect.left;
+      const y = e.clientY - rect.top;
+      if (x >= 0 && y >= 0 && x <= rect.width && y <= rect.height) {
+        mouse.down = true;
+      }
     };
     const handleMouseUp = () => {
       mouse.down = false;
     };
+    const handleTouchStart = (e: TouchEvent) => {
+      if (e.touches.length > 0) {
+        if (updateMouseFromCoords(e.touches[0].clientX, e.touches[0].clientY)) {
+          mouse.down = true;
+        }
+      }
+    };
 
-    const parent = canvas.parentElement;
+    window.addEventListener('mousemove', handleMouseMove);
-    if (parent) {
+    window.addEventListener('touchmove', handleTouchMove, { passive: false });
-      parent.addEventListener('mousemove', handleMouseMove);
+    window.addEventListener('mousedown', handleMouseDown);
-      parent.addEventListener('touchmove', handleTouchMove, { passive: false });
+    window.addEventListener('mouseup', handleMouseUp);
-      parent.addEventListener('mousedown', handleMouseDown);
+    window.addEventListener('touchstart', handleTouchStart);
-      parent.addEventListener('mouseup', handleMouseUp);
+    window.addEventListener('touchend', handleMouseUp);
-      parent.addEventListener('touchstart', (e) => {
-        mouse.down = true;
-        handleTouchMove(e);
-      });
-      parent.addEventListener('touchend', handleMouseUp);
-      parent.addEventListener('mouseleave', () => {
-        mouse.x = -1000;
-        mouse.y = -1000;
-        mouse.down = false;
-      });
-    }
 
     const draw = (now = 0) => {
       const decision = gate(now);
@@ -282,14 +295,12 @@ const GenerativeBanner: React.FC<GenerativeBannerProps> = ({
 
     return () => {
       resizeObserver.disconnect();
-      if (parent) {
+      window.removeEventListener('mousemove', handleMouseMove);
-        parent.removeEventListener('mousemove', handleMouseMove);
+      window.removeEventListener('touchmove', handleTouchMove);
-        parent.removeEventListener('touchmove', handleTouchMove);
+      window.removeEventListener('mousedown', handleMouseDown);
-        parent.removeEventListener('mousedown', handleMouseDown);
+      window.removeEventListener('mouseup', handleMouseUp);
-        parent.removeEventListener('mouseup', handleMouseUp);
+      window.removeEventListener('touchstart', handleTouchStart);
-        parent.removeEventListener('touchstart', handleMouseDown);
+      window.removeEventListener('touchend', handleMouseUp);
-        parent.removeEventListener('touchend', handleMouseUp);
-      }
       cancelAnimationFrame(animationFrameId);
     };
   }, [
@@ -315,7 +326,7 @@ const GenerativeBanner: React.FC<GenerativeBannerProps> = ({
         width: '100%',
         height: '100%',
         pointerEvents: 'none',
-        zIndex: 1,
+        zIndex: 0,
         mixBlendMode: theme.palette.mode === 'light' ? 'multiply' : 'screen',
       }}
     />

frontend/src/components/GenerativeFlowBanner.tsx

@@ -124,18 +124,17 @@ const GenerativeFlowBanner: React.FC<GenerativeFlowProps> = ({ username, palette
     const mouse = { x: -1000, y: -1000 };
     const handleMouseMove = (e: MouseEvent) => {
       const rect = canvas.getBoundingClientRect();
-      mouse.x = e.clientX - rect.left;
+      const x = e.clientX - rect.left;
-      mouse.y = e.clientY - rect.top;
+      const y = e.clientY - rect.top;
-    };
+      if (x < 0 || y < 0 || x > rect.width || y > rect.height) {
-
-    const parent = canvas.parentElement;
-    if (parent) {
-      parent.addEventListener('mousemove', handleMouseMove);
-      parent.addEventListener('mouseleave', () => {
         mouse.x = -1000;
         mouse.y = -1000;
-      });
+      } else {
-    }
+        mouse.x = x;
+        mouse.y = y;
+      }
+    };
+    window.addEventListener('mousemove', handleMouseMove);
 
     const draw = (now = 0) => {
       const decision = gate(now);
@@ -227,9 +226,7 @@ const GenerativeFlowBanner: React.FC<GenerativeFlowProps> = ({ username, palette
 
     return () => {
       resizeObserver.disconnect();
-      if (parent) {
+      window.removeEventListener('mousemove', handleMouseMove);
-        parent.removeEventListener('mousemove', handleMouseMove);
-      }
       cancelAnimationFrame(animationFrameId);
     };
   }, [
@@ -254,7 +251,7 @@ const GenerativeFlowBanner: React.FC<GenerativeFlowProps> = ({ username, palette
         width: '100%',
         height: '100%',
         pointerEvents: 'none',
-        zIndex: 1,
+        zIndex: 0,
       }}
     />
   );

frontend/src/components/HextechBanner.tsx

@@ -122,27 +122,32 @@ const HextechBanner: React.FC<HextechBannerProps> = ({ username, palette, settin
     const mouse = { x: -1000, y: -1000, down: false };
     const handleMouseMove = (e: MouseEvent) => {
       const rect = canvas.getBoundingClientRect();
-      mouse.x = e.clientX - rect.left;
+      const x = e.clientX - rect.left;
-      mouse.y = e.clientY - rect.top;
+      const y = e.clientY - rect.top;
+      if (x < 0 || y < 0 || x > rect.width || y > rect.height) {
+        mouse.x = -1000;
+        mouse.y = -1000;
+        mouse.down = false;
+      } else {
+        mouse.x = x;
+        mouse.y = y;
+      }
     };
-    const handleMouseDown = () => {
+    const handleMouseDown = (e: MouseEvent) => {
-      mouse.down = true;
+      const rect = canvas.getBoundingClientRect();
+      const x = e.clientX - rect.left;
+      const y = e.clientY - rect.top;
+      if (x >= 0 && y >= 0 && x <= rect.width && y <= rect.height) {
+        mouse.down = true;
+      }
     };
     const handleMouseUp = () => {
       mouse.down = false;
     };
 
-    const parent = canvas.parentElement;
+    window.addEventListener('mousemove', handleMouseMove);
-    if (parent) {
+    window.addEventListener('mousedown', handleMouseDown);
-      parent.addEventListener('mousemove', handleMouseMove);
+    window.addEventListener('mouseup', handleMouseUp);
-      parent.addEventListener('mousedown', handleMouseDown);
-      parent.addEventListener('mouseup', handleMouseUp);
-      parent.addEventListener('mouseleave', () => {
-        mouse.x = -1000;
-        mouse.y = -1000;
-        mouse.down = false;
-      });
-    }
 
     const draw = (now = 0) => {
       const decision = gate(now);
@@ -269,11 +274,9 @@ const HextechBanner: React.FC<HextechBannerProps> = ({ username, palette, settin
 
     return () => {
       resizeObserver.disconnect();
-      if (parent) {
+      window.removeEventListener('mousemove', handleMouseMove);
-        parent.removeEventListener('mousemove', handleMouseMove);
+      window.removeEventListener('mousedown', handleMouseDown);
-        parent.removeEventListener('mousedown', handleMouseDown);
+      window.removeEventListener('mouseup', handleMouseUp);
-        parent.removeEventListener('mouseup', handleMouseUp);
-      }
       cancelAnimationFrame(animationFrameId);
     };
   }, [
@@ -298,7 +301,7 @@ const HextechBanner: React.FC<HextechBannerProps> = ({ username, palette, settin
         width: '100%',
         height: '100%',
         pointerEvents: 'none',
-        zIndex: 1,
+        zIndex: 0,
       }}
     />
   );

frontend/src/components/HextechCorruptionBanner.tsx

@@ -124,27 +124,32 @@ const HextechCorruptionBanner: React.FC<HextechCorruptionBannerProps> = ({
     const mouse = { x: -1000, y: -1000, down: false };
     const handleMouseMove = (e: MouseEvent) => {
       const rect = canvas.getBoundingClientRect();
-      mouse.x = e.clientX - rect.left;
+      const x = e.clientX - rect.left;
-      mouse.y = e.clientY - rect.top;
+      const y = e.clientY - rect.top;
+      if (x < 0 || y < 0 || x > rect.width || y > rect.height) {
+        mouse.x = -1000;
+        mouse.y = -1000;
+        mouse.down = false;
+      } else {
+        mouse.x = x;
+        mouse.y = y;
+      }
     };
-    const handleMouseDown = () => {
+    const handleMouseDown = (e: MouseEvent) => {
-      mouse.down = true;
+      const rect = canvas.getBoundingClientRect();
+      const x = e.clientX - rect.left;
+      const y = e.clientY - rect.top;
+      if (x >= 0 && y >= 0 && x <= rect.width && y <= rect.height) {
+        mouse.down = true;
+      }
     };
     const handleMouseUp = () => {
       mouse.down = false;
     };
 
-    const parent = canvas.parentElement;
+    window.addEventListener('mousemove', handleMouseMove);
-    if (parent) {
+    window.addEventListener('mousedown', handleMouseDown);
-      parent.addEventListener('mousemove', handleMouseMove);
+    window.addEventListener('mouseup', handleMouseUp);
-      parent.addEventListener('mousedown', handleMouseDown);
-      parent.addEventListener('mouseup', handleMouseUp);
-      parent.addEventListener('mouseleave', () => {
-        mouse.x = -1000;
-        mouse.y = -1000;
-        mouse.down = false;
-      });
-    }
 
     const draw = (now = 0) => {
       const decision = gate(now);
@@ -259,11 +264,9 @@ const HextechCorruptionBanner: React.FC<HextechCorruptionBannerProps> = ({
 
     return () => {
       resizeObserver.disconnect();
-      if (parent) {
+      window.removeEventListener('mousemove', handleMouseMove);
-        parent.removeEventListener('mousemove', handleMouseMove);
+      window.removeEventListener('mousedown', handleMouseDown);
-        parent.removeEventListener('mousedown', handleMouseDown);
+      window.removeEventListener('mouseup', handleMouseUp);
-        parent.removeEventListener('mouseup', handleMouseUp);
-      }
       cancelAnimationFrame(animationFrameId);
     };
   }, [
@@ -288,7 +291,7 @@ const HextechCorruptionBanner: React.FC<HextechCorruptionBannerProps> = ({
         width: '100%',
         height: '100%',
         pointerEvents: 'none',
-        zIndex: 1,
+        zIndex: 0,
       }}
     />
   );

frontend/src/components/NebulaBanner.tsx

@@ -158,29 +158,34 @@ const NebulaBanner: React.FC<NebulaBannerProps> = ({
     const mouse = { x: -1000, y: -1000, px: -1000, py: -1000, down: false };
     const handleMouseMove = (e: MouseEvent) => {
       const rect = canvas.getBoundingClientRect();
+      const x = e.clientX - rect.left;
+      const y = e.clientY - rect.top;
       mouse.px = mouse.x;
       mouse.py = mouse.y;
-      mouse.x = e.clientX - rect.left;
+      if (x < 0 || y < 0 || x > rect.width || y > rect.height) {
-      mouse.y = e.clientY - rect.top;
+        mouse.x = -1000;
+        mouse.y = -1000;
+        mouse.down = false;
+      } else {
+        mouse.x = x;
+        mouse.y = y;
+      }
     };
-    const handleMouseDown = () => {
+    const handleMouseDown = (e: MouseEvent) => {
-      mouse.down = true;
+      const rect = canvas.getBoundingClientRect();
+      const x = e.clientX - rect.left;
+      const y = e.clientY - rect.top;
+      if (x >= 0 && y >= 0 && x <= rect.width && y <= rect.height) {
+        mouse.down = true;
+      }
     };
     const handleMouseUp = () => {
       mouse.down = false;
     };
 
-    const parent = canvas.parentElement;
+    window.addEventListener('mousemove', handleMouseMove);
-    if (parent) {
+    window.addEventListener('mousedown', handleMouseDown);
-      parent.addEventListener('mousemove', handleMouseMove);
+    window.addEventListener('mouseup', handleMouseUp);
-      parent.addEventListener('mousedown', handleMouseDown);
-      parent.addEventListener('mouseup', handleMouseUp);
-      parent.addEventListener('mouseleave', () => {
-        mouse.x = -1000;
-        mouse.y = -1000;
-        mouse.down = false;
-      });
-    }
 
     let time = 0;
     const draw = (now = 0) => {
@@ -302,11 +307,9 @@ const NebulaBanner: React.FC<NebulaBannerProps> = ({
 
     return () => {
       resizeObserver.disconnect();
-      if (parent) {
+      window.removeEventListener('mousemove', handleMouseMove);
-        parent.removeEventListener('mousemove', handleMouseMove);
+      window.removeEventListener('mousedown', handleMouseDown);
-        parent.removeEventListener('mousedown', handleMouseDown);
+      window.removeEventListener('mouseup', handleMouseUp);
-        parent.removeEventListener('mouseup', handleMouseUp);
-      }
       cancelAnimationFrame(animationFrameId);
     };
   }, [
@@ -335,7 +338,7 @@ const NebulaBanner: React.FC<NebulaBannerProps> = ({
         width: '100%',
         height: '100%',
         pointerEvents: 'none',
-        zIndex: 1,
+        zIndex: 0,
       }}
     />
   );