nvrl/holy-flavor-rater
1
0 Fork 0
mirror of https://github.com/narrrl/holy-flavor-rater.git synced 2026-11-03 16:41:27 +01:00
Code Issues Packages Projects Releases Wiki Activity

fixed interactive banner

Browse Source
This commit is contained in:
nvrl committed 2026-04-25 12:49:26 +02:00
1 parent 94dea2be8e
commit 5219a66722
7 files changed
+140 -126
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

frontend/src/components/DynamicBanner.tsx
+1 -1
View File
@@ -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
+11 -14
View File
@@ -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;
mouse.y = e.clientY - rect.top;
};
const parent = canvas.parentElement;
if (parent) {
parent.addEventListener('mousemove', handleMouseMove);
parent.addEventListener('mouseleave', () => {
const x = e.clientX - rect.left;
const y = e.clientY - rect.top;
if (x < 0 || y < 0 || x > rect.width || y > rect.height) {
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) {
parent.removeEventListener('mousemove', handleMouseMove);
}
window.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
+45 -34
View File
@@ -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;
mouse.y = e.clientY - rect.top;
const x = clientX - rect.left;
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();
mouse.x = e.touches[0].clientX - rect.left;
mouse.y = e.touches[0].clientY - rect.top;
updateMouseFromCoords(e.touches[0].clientX, e.touches[0].clientY);
}
};
const handleMouseDown = () => {
mouse.down = true;
const handleMouseDown = (e: MouseEvent) => {
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;
if (parent) {
parent.addEventListener('mousemove', handleMouseMove);
parent.addEventListener('touchmove', handleTouchMove, { passive: false });
parent.addEventListener('mousedown', handleMouseDown);
parent.addEventListener('mouseup', 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;
});
}
window.addEventListener('mousemove', handleMouseMove);
window.addEventListener('touchmove', handleTouchMove, { passive: false });
window.addEventListener('mousedown', handleMouseDown);
window.addEventListener('mouseup', handleMouseUp);
window.addEventListener('touchstart', handleTouchStart);
window.addEventListener('touchend', handleMouseUp);
const draw = (now = 0) => {
const decision = gate(now);
@@ -282,14 +295,12 @@ const GenerativeBanner: React.FC<GenerativeBannerProps> = ({
return () => {
resizeObserver.disconnect();
if (parent) {
parent.removeEventListener('mousemove', handleMouseMove);
parent.removeEventListener('touchmove', handleTouchMove);
parent.removeEventListener('mousedown', handleMouseDown);
parent.removeEventListener('mouseup', handleMouseUp);
parent.removeEventListener('touchstart', handleMouseDown);
parent.removeEventListener('touchend', handleMouseUp);
}
window.removeEventListener('mousemove', handleMouseMove);
window.removeEventListener('touchmove', handleTouchMove);
window.removeEventListener('mousedown', handleMouseDown);
window.removeEventListener('mouseup', handleMouseUp);
window.removeEventListener('touchstart', handleTouchStart);
window.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
+11 -14
View File
@@ -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;
mouse.y = e.clientY - rect.top;
};
const parent = canvas.parentElement;
if (parent) {
parent.addEventListener('mousemove', handleMouseMove);
parent.addEventListener('mouseleave', () => {
const x = e.clientX - rect.left;
const y = e.clientY - rect.top;
if (x < 0 || y < 0 || x > rect.width || y > rect.height) {
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) {
parent.removeEventListener('mousemove', handleMouseMove);
}
window.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
+24 -21
View File
@@ -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;
mouse.y = e.clientY - rect.top;
const x = e.clientX - rect.left;
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 = () => {
mouse.down = true;
const handleMouseDown = (e: MouseEvent) => {
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;
if (parent) {
parent.addEventListener('mousemove', handleMouseMove);
parent.addEventListener('mousedown', handleMouseDown);
parent.addEventListener('mouseup', handleMouseUp);
parent.addEventListener('mouseleave', () => {
mouse.x = -1000;
mouse.y = -1000;
mouse.down = false;
});
}
window.addEventListener('mousemove', handleMouseMove);
window.addEventListener('mousedown', handleMouseDown);
window.addEventListener('mouseup', handleMouseUp);
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) {
parent.removeEventListener('mousemove', handleMouseMove);
parent.removeEventListener('mousedown', handleMouseDown);
parent.removeEventListener('mouseup', handleMouseUp);
}
window.removeEventListener('mousemove', handleMouseMove);
window.removeEventListener('mousedown', handleMouseDown);
window.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
+24 -21
View File
@@ -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;
mouse.y = e.clientY - rect.top;
const x = e.clientX - rect.left;
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 = () => {
mouse.down = true;
const handleMouseDown = (e: MouseEvent) => {
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;
if (parent) {
parent.addEventListener('mousemove', handleMouseMove);
parent.addEventListener('mousedown', handleMouseDown);
parent.addEventListener('mouseup', handleMouseUp);
parent.addEventListener('mouseleave', () => {
mouse.x = -1000;
mouse.y = -1000;
mouse.down = false;
});
}
window.addEventListener('mousemove', handleMouseMove);
window.addEventListener('mousedown', handleMouseDown);
window.addEventListener('mouseup', handleMouseUp);
const draw = (now = 0) => {
const decision = gate(now);
@@ -259,11 +264,9 @@ const HextechCorruptionBanner: React.FC<HextechCorruptionBannerProps> = ({
return () => {
resizeObserver.disconnect();
if (parent) {
parent.removeEventListener('mousemove', handleMouseMove);
parent.removeEventListener('mousedown', handleMouseDown);
parent.removeEventListener('mouseup', handleMouseUp);
}
window.removeEventListener('mousemove', handleMouseMove);
window.removeEventListener('mousedown', handleMouseDown);
window.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
+24 -21
View File
@@ -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;
mouse.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 = () => {
mouse.down = true;
const handleMouseDown = (e: MouseEvent) => {
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;
if (parent) {
parent.addEventListener('mousemove', handleMouseMove);
parent.addEventListener('mousedown', handleMouseDown);
parent.addEventListener('mouseup', handleMouseUp);
parent.addEventListener('mouseleave', () => {
mouse.x = -1000;
mouse.y = -1000;
mouse.down = false;
});
}
window.addEventListener('mousemove', handleMouseMove);
window.addEventListener('mousedown', handleMouseDown);
window.addEventListener('mouseup', handleMouseUp);
let time = 0;
const draw = (now = 0) => {
@@ -302,11 +307,9 @@ const NebulaBanner: React.FC<NebulaBannerProps> = ({
return () => {
resizeObserver.disconnect();
if (parent) {
parent.removeEventListener('mousemove', handleMouseMove);
parent.removeEventListener('mousedown', handleMouseDown);
parent.removeEventListener('mouseup', handleMouseUp);
}
window.removeEventListener('mousemove', handleMouseMove);
window.removeEventListener('mousedown', handleMouseDown);
window.removeEventListener('mouseup', handleMouseUp);
cancelAnimationFrame(animationFrameId);
};
}, [
@@ -335,7 +338,7 @@ const NebulaBanner: React.FC<NebulaBannerProps> = ({
width: '100%',
height: '100%',
pointerEvents: 'none',
zIndex: 1,
zIndex: 0,
}}
/>
);