Instead of using onDestroy, return a function from onMount

web-svelte/src/components/modals/JoinLobby.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-import { onDestroy, createEventDispatcher, onMount } from "svelte";
 import { isHost, myName, gameCode, players } from "../../stores";
+import { createEventDispatcher, onMount } from "svelte";
 import SciFiButton from "../SciFi-Button.svelte";
 import { ILobbyInfo, Status } from "common";
 import BaseModal from "./BaseModal.svelte";
@@ -28,6 +28,10 @@ function handleLobbyConnection(data: ILobbyInfo) {
 onMount(() => {
 	socket.on(`res:lobby.players.join`, handleLobbyConnection);
 	socket.on(`res:lobby.create`, handleLobbyConnection);
+	return () => {
+		socket.off(`res:lobby.players.join`);
+		socket.off(`res:lobby.create`);
+	};
 });
 
 function connectToLobby() {
@@ -45,12 +49,7 @@ function connectToLobby() {
 			name: $myName
 		});
 	};
-}
+};
-
-onDestroy(() => {
-	socket.off(`res:lobby.create`);
-	socket.off(`res:lobby.players.join`);
-});
 </script>
 
 <BaseModal {open} on:close>

web-svelte/src/components/modals/ShipDesigner.svelte

@@ -2,10 +2,11 @@
 import { Status, colours, spaceships } from "common";
 import SpaceShuttle from "../icons/spaceship.svelte";
 import SciFiButton from "../SciFi-Button.svelte";
-import { createEventDispatcher } from "svelte";
+import { createEventDispatcher, onMount } from "svelte";
 import { myName, players } from "../../stores";
 import BaseModal from "./BaseModal.svelte";
 import Hexagon from "../Hexagon.svelte";
+import { socket } from "../../main";
 
 const emit = createEventDispatcher();
 
@@ -20,6 +21,15 @@ var selectedColour = player.colour.hex;
 var selectedShip = player.ship.id;
 var error = null;
 
+function designUpdate(data: any) {};
+
+onMount(() => {
+	socket.on(`req:lobby.players.update`, designUpdate);
+	return () => {
+		socket.off(`req:lobby.players.update`);
+	};
+});
+
 function saveShipDesign() {
 	/* TODO: Send event to server, wait for confirmation */
 	let response: any = {

web-svelte/src/views/lobby/multiplayer.svelte

@@ -6,8 +6,8 @@ import SciFiButton from "../../components/SciFi-Button.svelte";
 import { ILobbyInfo, Status, gameOptions } from "common";
 import Player from "../../components/Player.svelte";
 import { isHost, players } from "../../stores";
-import { onMount, onDestroy } from "svelte"
 import { socket } from "../../main";
+import { onMount } from "svelte";
 
 function handleLobbyInfo(data: ILobbyInfo) {
 	if (data.status == Status.Success) {
@@ -19,6 +19,9 @@ function handleLobbyInfo(data: ILobbyInfo) {
 
 onMount(() => {
 	socket.on(`res:lobby.info`, handleLobbyInfo);
+	return () => {
+		socket.off(`res:lobby.info`);
+	};
 });
 
 function tempButtonHandler() {};
@@ -41,10 +44,6 @@ function toggleOption(e: CustomEvent<string>) {
 
 	// TODO: Send websocket event to server
 };
-
-onDestroy(() => {
-	socket.off(`res:lobby.info`);
-});
 </script>
 
 <OptionInfo