remove mousemove callback when there's no longer a cat

This commit is contained in:
dakkar 2025-07-28 15:53:16 +01:00
parent 7d005876fb
commit b3857c6d9a

View file

@ -13,7 +13,7 @@ Displays Oneko, a cat that follows the cursor.
// oneko.js: https://github.com/adryd325/oneko.js
// modified to be a vue component by ShittyKopper :3
import { shallowRef, onMounted } from 'vue';
import { shallowRef, onMounted, onUnmounted } from 'vue';
const nekoEl = shallowRef<HTMLDivElement>();
@ -93,21 +93,26 @@ const spriteSets = {
],
};
function mouseCallback(event) {
mousePosX = event.clientX;
mousePosY = event.clientY;
}
function init() {
if (!nekoEl.value) return;
nekoEl.value.style.left = `${nekoPosX - 16}px`;
nekoEl.value.style.top = `${nekoPosY - 16}px`;
// TODO this causes a memory leak because it never gets unbound
window.document.addEventListener('mousemove', (event) => {
mousePosX = event.clientX;
mousePosY = event.clientY;
});
window.document.addEventListener('mousemove', mouseCallback);
window.requestAnimationFrame(onAnimationFrame);
}
function uninit() {
window.removeEventListener('mousemove', mouseCallback);
}
function onAnimationFrame(timestamp) {
// Stops execution if the neko element is removed from DOM
if (!nekoEl.value?.isConnected) {
@ -232,6 +237,7 @@ function frame() {
}
onMounted(init);
onUnmounted(uninit);
</script>
<style module>