Small changes (kidding)

2022-02-28 17:14:47 +01:00
parent 4f668748e1
commit 805258c5ff
19 changed files with 4008 additions and 2647 deletions
@@ -0,0 +1,106 @@
+<script lang="ts">
+	import { socket } from '$lib/socket';
+	import { onDestroy, onMount } from 'svelte';
+	import { browser } from '$app/env';
+
+	export let game_pin: string;
+
+	let username = '';
+	let hcaptchaSitekey = 'ee81b2a1-acf3-4d20-b2a4-a7ea94c7eba5';
+
+	let hcaptcha = {
+		execute: async (_a, _b) => ({ response: '' }),
+		render: (_a, _b) => {}
+	};
+	let hcaptchaWidgetID;
+
+	onMount(() => {
+		if (browser) {
+			hcaptcha = window.hcaptcha;
+			if (hcaptcha.render) {
+				hcaptchaWidgetID = hcaptcha.render('hcaptcha', {
+					sitekey: hcaptchaSitekey,
+					size: 'invisible',
+					theme: 'dark'
+				});
+			}
+		}
+	});
+
+	onDestroy(() => {
+		if (browser) {
+			hcaptcha = {
+				execute: async () => ({ response: '' }),
+				render: () => {}
+			};
+		}
+	});
+
+	const setUsername = async () => {
+		if (username.length <= 3) {
+			return;
+		}
+		const { response } = await hcaptcha.execute(hcaptchaWidgetID, {
+			async: true
+		});
+		socket.emit('join_game', {
+			username: username,
+			game_pin: game_pin,
+			captcha: response
+		});
+	};
+	socket.on('game_not_found', () => {
+		alert('Game not found');
+	});
+</script>
+
+<svelte:head>
+	<script src="https://js.hcaptcha.com/1/api.js?render=explicit" async defer></script>
+</svelte:head>
+
+{#if game_pin === '' || game_pin.length <= 7}
+	<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">Game Pin</h1>
+			<input
+				class="border border-amber-800 self-center text-center"
+				bind:value={game_pin}
+				maxlength="8"
+			/>
+			<br />
+			<button
+				class="bg-amber-800 hover:bg-amber-700 text-white font-bold py-2 px-4 rounded"
+				type="submit"
+			>
+				Submit
+			</button>
+		</form>
+	</div>
+{:else}
+	<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"
+		>
+			<h1 class="text-lg text-center">Username</h1>
+			<input class="border border-amber-800" bind:value={username} />
+			<button
+				class="bg-amber-800 hover:bg-amber-700 text-white font-bold py-2 px-4 rounded disabled:cursor-not-allowed disabled:opacity-50"
+				type="submit"
+				disabled={username.length <= 3}
+			>
+				Submit
+			</button>
+		</form>
+	</div>
+{/if}
+<div
+	id="hcaptcha"
+	class="h-captcha"
+	data-sitekey={hcaptchaSitekey}
+	data-size="invisible"
+	data-theme="dark"
+/>