Game, Controls – remove listeners before unmount

Author: calvinjuarez

src/components/Controls.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { inject, onMounted } from 'vue';
+import { inject, onBeforeUnmount, onMounted } from 'vue';
 
 import Joystick from '@/components/Joystick.vue';
 
@@ -10,28 +10,38 @@ const Key = { 87: 'w', 65: 'a', 83: 's', 68: 'd', 16: 'shift' };
 const KEYS = Object.keys(Key).map(key => +key);
 
 
+const _onKeyDown = e => {
+	if (store.input.hasKey)
+		e.preventDefault();
+
+	if (e.altKey || e.ctrlKey || e.metaKey) return;
+	if (! KEYS.includes(e.keyCode)) return;
+
+	store.input.key[Key[e.keyCode]] = true;
+};
+const _onKeyUp = e => {
+	if (store.input.hasKey)
+		e.preventDefault();
+
+	if (! KEYS.includes(e.keyCode)) return;
+
+	store.input.key[Key[e.keyCode]] = false;
+};
+const _onBeforeUnload = e => {
+	if (store.input.hasKey)
+		e.preventDefault();
+};
+
+
 onMounted(() => {
-	window.addEventListener('keydown', e => {
-		if (store.input.hasKey)
-			e.preventDefault();
-
-		if (e.altKey || e.ctrlKey || e.metaKey) return;
-		if (! KEYS.includes(e.keyCode)) return;
-
-		store.input.key[Key[e.keyCode]] = true;
-	}, false);
-	window.addEventListener('keyup', e => {
-		if (store.input.hasKey)
-			e.preventDefault();
-
-		if (! KEYS.includes(e.keyCode)) return;
-
-		store.input.key[Key[e.keyCode]] = false;
-	}, false);
-	window.addEventListener('beforeunload', e => {
-		if (store.input.hasKey)
-			e.preventDefault();
-	});
+	window.addEventListener('keydown', _onKeyDown, false);
+	window.addEventListener('keyup', _onKeyUp, false);
+	window.addEventListener('beforeunload', _onBeforeUnload);
+});
+onBeforeUnmount(() => {
+	window.removeEventListener('keydown', _onKeyDown, false);
+	window.removeEventListener('keyup', _onKeyUp, false);
+	window.removeEventListener('beforeunload', _onBeforeUnload);
 });
 </script>
 

src/components/Game.vue

@@ -142,9 +142,13 @@ window.$game = { clock, store, sprite, hitbox };
 watch(() => store.isPaused, () => store.isPaused && draw());
 
 
+const _onBlur = () => isWindowFocussed = false;
+const _onFocus = () => isWindowFocussed = true;
+
+
 onMounted(() => {
-	window.addEventListener('blur', () => isWindowFocussed = false);
-	window.addEventListener('focus', () => isWindowFocussed = true);
+	window.addEventListener('blur', _onBlur);
+	window.addEventListener('focus', _onFocus);
 
 	store.displayTo(document.getElementById('game-display'));
 
@@ -155,6 +159,9 @@ onMounted(() => {
 });
 
 onBeforeUnmount(() => {
+	window.removeEventListener('blur', _onBlur);
+	window.removeEventListener('focus', _onFocus);
+
 	delete window.$game;
 
 	store.reset();