From f3b4b57caf1c9cbd1f6cd7be656e1c7e9725b9d3 Mon Sep 17 00:00:00 2001
From: Mawoka <git@mawoka.eu>
Date: Mon, 16 Oct 2023 17:56:25 +0200
Subject: [PATCH] :ambulance:

---
 frontend/src/lib/play/join.svelte | 64 +++++++++++++++++--------------
 1 file changed, 35 insertions(+), 29 deletions(-)

diff --git a/frontend/src/lib/play/join.svelte b/frontend/src/lib/play/join.svelte
index 0d77cd4..b485d20 100644
--- a/frontend/src/lib/play/join.svelte
+++ b/frontend/src/lib/play/join.svelte
@@ -4,7 +4,7 @@ SPDX-FileCopyrightText: 2023 Marlon W (Mawoka)
 SPDX-License-Identifier: MPL-2.0
 -->
 
-<script lang="ts">
+<script lang='ts'>
 	import { socket } from '$lib/socket';
 	import { onDestroy, onMount } from 'svelte';
 	import { browser } from '$app/environment';
@@ -28,7 +28,8 @@ SPDX-License-Identifier: MPL-2.0
 	let hcaptcha = {
 		execute: async (_a, _b) => ({ response: '' }), // eslint-disable-line @typescript-eslint/no-unused-vars
 		// eslint-disable-next-line @typescript-eslint/no-empty-function
-		render: (_a, _b) => {} // eslint-disable-line @typescript-eslint/no-unused-vars
+		render: (_a, _b) => {
+		} // eslint-disable-line @typescript-eslint/no-unused-vars
 	};
 	let hcaptchaWidgetID;
 
@@ -51,7 +52,8 @@ SPDX-License-Identifier: MPL-2.0
 			hcaptcha = {
 				execute: async () => ({ response: '' }),
 				// eslint-disable-next-line @typescript-eslint/no-empty-function
-				render: () => {}
+				render: () => {
+				}
 			};
 		}
 	});
@@ -88,7 +90,9 @@ SPDX-License-Identifier: MPL-2.0
                 title: 'Game not found',
                 body: 'The game pin you entered seems invalid.'
             });*/
-			alert('Game not found');
+			if (browser) {
+				alert('Game not found');
+			}
 			game_pin = '';
 			return;
 		}
@@ -114,7 +118,7 @@ SPDX-License-Identifier: MPL-2.0
 		}
 		let captcha_resp: string;
 		if (Cookies.get('kicked')) {
-			console.log("%cYou're Banned!", 'font-size:6rem');
+			console.log('%cYou\'re Banned!', 'font-size:6rem');
 			return;
 		}
 
@@ -149,7 +153,7 @@ SPDX-License-Identifier: MPL-2.0
 					// eslint-disable-next-line no-undef
 					grecaptcha
 						.execute(import.meta.env.VITE_RECAPTCHA, { action: 'submit' })
-						.then(function (token) {
+						.then(function(token) {
 							socket.emit('join_game', {
 								username: username,
 								game_pin: game_pin,
@@ -170,7 +174,9 @@ SPDX-License-Identifier: MPL-2.0
 	};
 	socket.on('game_not_found', () => {
 		game_pin = '';
-		alert('Game not found');
+		if (browser) {
+			alert('Game not found');
+		}
 	});
 
 	$: console.log(game_pin, game_pin.length > 6);
@@ -179,65 +185,65 @@ SPDX-License-Identifier: MPL-2.0
 
 <svelte:head>
 	{#if captcha_enabled && hcaptchaSitekey}
-		<script src="https://js.hcaptcha.com/1/api.js" async defer></script>
+		<script src='https://js.hcaptcha.com/1/api.js' async defer></script>
 	{/if}
 	{#if import.meta.env.VITE_RECAPTCHA && captcha_enabled}
 		<script
-			src="https://www.google.com/recaptcha/api.js?render={import.meta.env.VITE_RECAPTCHA}"
+			src='https://www.google.com/recaptcha/api.js?render={import.meta.env.VITE_RECAPTCHA}'
 		></script>
 	{/if}
 </svelte:head>
 
 {#if game_pin === '' || game_pin.length < 6}
-	<div class="flex flex-col justify-center align-center w-screen h-screen">
-		<form on:submit|preventDefault class="flex-col flex justify-center align-center mx-auto">
-			<h1 class="text-lg text-center">{$t('words.game_pin')}</h1>
+	<div class='flex flex-col justify-center align-center w-screen h-screen'>
+		<form on:submit|preventDefault class='flex-col flex justify-center align-center mx-auto'>
+			<h1 class='text-lg text-center'>{$t('words.game_pin')}</h1>
 			<input
-				class="border border-gray-400 self-center text-center text-black ring-0 outline-none p-2 rounded-lg focus:shadow-2xl transition-all"
+				class='border border-gray-400 self-center text-center text-black ring-0 outline-none p-2 rounded-lg focus:shadow-2xl transition-all'
 				bind:value={game_pin}
-				maxlength="6"
-				inputmode="numeric"
+				maxlength='6'
+				inputmode='numeric'
 			/>
 			<!--				use:tippy={{content: "Please enter the game pin", sticky: true, placement: 'top'}}-->
 
 			<br />
-			<div class="mt-2">
+			<div class='mt-2'>
 				<BrownButton disabled={game_pin.length < 6}>{$t('words.submit')}</BrownButton>
 			</div>
 		</form>
 	</div>
 {:else}
-	<div class="flex flex-col justify-center align-center w-screen h-screen">
+	<div class='flex flex-col justify-center align-center w-screen h-screen'>
 		<form
 			on:submit|preventDefault={setUsername}
-			class="flex-col flex justify-center align-center mx-auto"
+			class='flex-col flex justify-center align-center mx-auto'
 		>
-			<h1 class="text-lg text-center">{$t('words.username')}</h1>
+			<h1 class='text-lg text-center'>{$t('words.username')}</h1>
 			<input
-				class="border border-gray-400 self-center text-center text-black ring-0 outline-none p-2 rounded-lg focus:shadow-2xl transition-all"
+				class='border border-gray-400 self-center text-center text-black ring-0 outline-none p-2 rounded-lg focus:shadow-2xl transition-all'
 				bind:value={username}
-				maxlength="17"
+				maxlength='17'
 			/>
 			{#if custom_field}
-				<h1 class="text-lg text-center">{custom_field}</h1>
+				<h1 class='text-lg text-center'>{custom_field}</h1>
 				<input
-					class="border border-gray-400 self-center text-center text-black ring-0 outline-none p-2 rounded-lg focus:shadow-2xl transition-all"
+					class='border border-gray-400 self-center text-center text-black ring-0 outline-none p-2 rounded-lg focus:shadow-2xl transition-all'
 					bind:value={custom_field_value}
 				/>
 			{/if}
 
-			<div class="mt-2">
+			<div class='mt-2'>
 				<BrownButton disabled={username.length <= 3} on:click={setUsername}
-					>{$t('words.submit')}</BrownButton
+				>{$t('words.submit')}</BrownButton
 				>
 			</div>
 		</form>
 	</div>
 {/if}
 <div
-	id="hcaptcha"
-	class="h-captcha"
+	id='hcaptcha'
+	class='h-captcha'
 	data-sitekey={hcaptchaSitekey}
-	data-size="invisible"
-	data-theme="dark"
+	data-size='invisible'
+	data-theme='dark'
 />