Make the button components use the click listen instead of the handler

web-svelte/src/components/Player.svelte

@@ -19,7 +19,7 @@ let canLeave = $myName == $hostName || name == $myName;
 	{#if $myName == name}
 		<SciFiButton
 			background="{colour}"
-			handler={changeColour}
+			on:click={changeColour}
 			height="60px"
 			width="60px"
 			hoverBackground="{colour}"
@@ -51,7 +51,7 @@ let canLeave = $myName == $hostName || name == $myName;
 	{#if canLeave}
 	<SciFiButton
 		background="#ff0000"
-		handler={exitPlayer}
+		on:click={exitPlayer}
 		height="60px"
 		width="75px"
 		hoverBackground="#ff0000"

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

@@ -28,7 +28,7 @@ function closeModal() {
 	>
 		<SciFiButton
 			classes="close-button"
-			handler={closeModal}
+			on:click={closeModal}
 			height="60"
 			width="60"
 			on:click

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

@@ -92,7 +92,7 @@ function toggleOptionsModal() {
 		<div class="sci-fi-box">
 			<div class="info-button-container">
 				<SciFiButton
-					handler={toggleOptionsModal}
+					on:click={_ => modal.options = true}
 					height="60px"
 					width="60px"
 				>
@@ -119,14 +119,14 @@ function toggleOptionsModal() {
 		<div class="flex-row">
 			<SciFiButton
 				title="Starts the game"
-				handler={tempButtonHandler}
+				on:click={tempButtonHandler}
 			>
 				Start Game
 			</SciFiButton>
 			<SciFiButton
 				title="Delete the lobby, preventing further games from being played"
 				background="#ff0000"
-				handler={tempButtonHandler}
+				on:click={tempButtonHandler}
 				>
 				Delete Game
 			</SciFiButton>