diff --git a/packages/frontend/src/components/SkOneko.vue b/packages/frontend/src/components/SkOneko.vue index 07c15d4304..b8f6a78d8b 100644 --- a/packages/frontend/src/components/SkOneko.vue +++ b/packages/frontend/src/components/SkOneko.vue @@ -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(); @@ -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, { passive: true }); window.requestAnimationFrame(onAnimationFrame); } +function uninit() { + window.removeEventListener('mousemove', mouseCallback, { passive: true }); +} + 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);