♻️ Cleaned admin-game code up

frontend/src/lib/admin.svelte

@@ -11,16 +11,14 @@ SPDX-License-Identifier: MPL-2.0
 	import type { PlayerAnswer } from '$lib/admin.ts';
 	import { socket } from './socket';
 	import { QuizQuestionType } from '$lib/quiz_types';
-	import { kahoot_icons } from './play/kahoot_mode_assets/kahoot_icons';
-	import CircularTimer from '$lib/play/circular_progress.svelte';
 	import Spinner from '$lib/Spinner.svelte';
-	import { get_foreground_color } from '$lib/helpers';
-	import MediaComponent from '$lib/editor/MediaComponent.svelte';
+	import Controls from '$lib/play/admin/controls.svelte';
+	import Question from '$lib/play/admin/question.svelte';
 
 	export let game_token: string;
 	export let quiz_data: QuizData;
-	export let game_mode;
-	export let bg_color;
+	export let game_mode: string;
+	export let bg_color: string;
 
 	const { t } = getLocalization();
 	const default_colors = ['#D6EDC9', '#B07156', '#7F7057', '#4E6E58'];
@@ -37,10 +35,6 @@ SPDX-License-Identifier: MPL-2.0
 
 	export let player_scores;
 
-	const set_question_number = (q_number: number) => {
-		socket.emit('set_question_number', q_number.toString());
-	};
-
 	socket.on('get_question_results', () => {
 		console.log('get_question_results');
 	});
@@ -54,20 +48,6 @@ SPDX-License-Identifier: MPL-2.0
 		answer_count = 0;
 		timer(timer_res);
 	});
-	const get_question_results = () => {
-		socket.emit('get_question_results', {
-			game_id: game_token,
-			question_number: shown_question_now
-		});
-	};
-	const show_solutions = () => {
-		socket.emit('show_solutions', {});
-		timer_res = '0';
-	};
-
-	const get_final_results = () => {
-		socket.emit('get_final_results', {});
-	};
 
 	socket.on('solutions', (_) => {
 		timer_res = '0';
@@ -109,97 +89,33 @@ SPDX-License-Identifier: MPL-2.0
 			timer_res = seconds.toString();
 		}, 1000);
 	};
-	let circular_progress = 0;
-	$: {
-		try {
-			circular_progress =
-				1 -
-				((100 / quiz_data.questions[selected_question].time) * parseInt(timer_res)) / 100;
-		} catch {
-			circular_progress = 0;
-		}
-	}
 </script>
 
 {#if control_visible}
-	<div
-		class="fixed top-0 w-full h-10 z-20 grid grid-cols-2"
-		style="background: {bg_color ? bg_color : 'transparent'}"
-		class:text-black={bg_color}
-	>
-		<p class="mr-auto ml-0 col-start-1 col-end-1">
-			{selected_question === -1 ? '0' : selected_question + 1}
-			/{quiz_data.questions.length}
-		</p>
-		<div class="justify-self-end ml-auto mr-0 col-start-3 col-end-3">
-			{#if selected_question + 1 === quiz_data.questions.length && ((timer_res === '0' && question_results !== null) || quiz_data?.questions?.[selected_question]?.type === QuizQuestionType.SLIDE)}
-				{#if JSON.stringify(final_results) === JSON.stringify([null])}
-					<button on:click={get_final_results} class="admin-button"
-						>{$t('admin_page.get_final_results')}
-					</button>
-				{/if}
-			{:else if timer_res === '0' || selected_question === -1}
-				{#if (selected_question + 1 !== quiz_data.questions.length && question_results !== null) || selected_question === -1}
-					<button
-						on:click={() => {
-							set_question_number(selected_question + 1);
-						}}
-						class="admin-button"
-						>{$t('admin_page.next_question', { question: selected_question + 2 })}
-					</button>
-				{/if}
-				{#if question_results === null && selected_question !== -1}
-					{#if quiz_data.questions[selected_question].type === QuizQuestionType.SLIDE}
-						<button
-							on:click={() => {
-								set_question_number(selected_question + 1);
-							}}
-							class="admin-button"
-							>{$t('admin_page.next_question', { question: selected_question + 2 })}
-						</button>
-					{:else}
-						<button on:click={get_question_results} class="admin-button"
-							>{$t('admin_page.show_results')}
-						</button>
-					{/if}
-				{/if}
-			{:else if selected_question !== -1}
-				{#if quiz_data.questions[selected_question].type === QuizQuestionType.SLIDE}
-					<button
-						on:click={() => {
-							set_question_number(selected_question + 1);
-						}}
-						class="admin-button"
-						>{$t('admin_page.next_question', { question: selected_question + 2 })}
-					</button>
-				{:else}
-					<button on:click={show_solutions} class="admin-button"
-						>{$t('admin_page.stop_time_and_solutions')}
-					</button>
-				{/if}
-			{:else}
-				<!--				<button
-                    on:click={() => {
-                        set_question_number(selected_question + 1);
-                    }}
-                    class='admin-button'
-                >Next Question ({selected_question + 2}
-                    )
-                </button>-->
-			{/if}
-		</div>
-	</div>
+	<Controls
+		{bg_color}
+		{selected_question}
+		{quiz_data}
+		bind:timer_res
+		{final_results}
+		{socket}
+		{question_results}
+		{game_token}
+		{shown_question_now}
+	/>
 {/if}
 {#if timer_res !== '0' && selected_question >= 0}
 	<span
 		class="fixed top-0 bg-red-500 h-8 transition-all"
 		class:mt-10={control_visible}
-		style="width: {(100 / quiz_data.questions[selected_question].time) * parseInt(timer_res)}vw"
+		style="width: {(100 / parseInt(quiz_data.questions[selected_question].time)) *
+			parseInt(timer_res)}vw"
 	/>
 {/if}
 
 <div class="w-full h-full" class:pt-28={control_visible} class:pt-12={!control_visible}>
 	{#if timer_res !== undefined && !final_results_clicked && !question_results}
+		<!-- Question is shown -->
 		{#if quiz_data.questions[selected_question].type === QuizQuestionType.SLIDE}
 			{#await import('$lib/play/admin/slide.svelte')}
 				<Spinner my_20={false} />
@@ -210,81 +126,7 @@ SPDX-License-Identifier: MPL-2.0
 				/>
 			{/await}
 		{:else}
-			<div class="flex flex-col justify-center w-screen h-1/6">
-				<h1 class="text-6xl text-center">
-					{@html quiz_data.questions[selected_question].question}
-				</h1>
-				<!--			<span class='text-center py-2 text-lg'>{$t('admin_page.time_left')}: {timer_res}</span>-->
-				<div class="grid grid-cols-3 my-2">
-					<span />
-					<div class="m-auto">
-						<CircularTimer
-							bind:text={timer_res}
-							bind:progress={circular_progress}
-							color="#ef4444"
-						/>
-					</div>
-					<p class="m-auto text-3xl">
-						{$t('admin_page.answers_submitted', { answer_count: answer_count })}
-					</p>
-				</div>
-			</div>
-			{#if quiz_data.questions[selected_question].image !== null}
-				<div class="flex w-full">
-					<MediaComponent
-						src={quiz_data.questions[selected_question].image}
-						muted={false}
-						css_classes="max-h-[20vh] object-cover mx-auto mb-8 w-auto"
-					/>
-				</div>
-			{/if}
-			{#if quiz_data.questions[selected_question].type === QuizQuestionType.ABCD || quiz_data.questions[selected_question].type === QuizQuestionType.VOTING || quiz_data.questions[selected_question].type === QuizQuestionType.CHECK}
-				<div class="grid grid-rows-2 grid-flow-col auto-cols-auto gap-2 w-full p-4">
-					{#each quiz_data.questions[selected_question].answers as answer, i}
-						<div
-							class="rounded-lg h-fit flex border-2 border-black"
-							style="background-color: {answer.color ?? default_colors[i]};"
-							class:opacity-50={!answer.right &&
-								timer_res === '0' &&
-								quiz_data.questions[selected_question].type ===
-									QuizQuestionType.ABCD}
-						>
-							<img
-								class="w-14 inline-block pl-4"
-								alt="icon"
-								style="color: {get_foreground_color(
-									answer.color ?? default_colors[i]
-								)}"
-								src={kahoot_icons[i]}
-							/>
-							<span
-								class="text-center text-2xl px-2 py-4 w-full"
-								style="color: {get_foreground_color(
-									answer.color ?? default_colors[i]
-								)}">{answer.answer}</span
-							>
-							<span class="pl-4 w-10" />
-						</div>
-					{/each}
-				</div>
-			{:else if quiz_data.questions[selected_question].type === QuizQuestionType.TEXT}
-				{#if timer_res === '0'}
-					<div class="grid grid-cols-2 gap-2 w-full p-4">
-						{#each quiz_data.questions[selected_question].answers as answer, i}
-							<div class="rounded-lg h-fit flex bg-[#B07156]">
-								<span class="text-center text-2xl px-2 py-4 w-full text-black"
-									>{answer.answer}</span
-								>
-								<span class="pl-4 w-10" />
-							</div>
-						{/each}
-					</div>
-				{:else}
-					<div class="flex justify-center">
-						<p class="text-2xl">{$t('admin_page.enter_answer_into_field')}</p>
-					</div>
-				{/if}
-			{/if}
+			<Question {quiz_data} {selected_question} {timer_res} {answer_count} {default_colors} />
 		{/if}
 	{/if}
 	<br />

frontend/src/lib/components/popover/commandpalettenotice.svelte

@@ -4,7 +4,7 @@ SPDX-FileCopyrightText: 2023 Marlon W (Mawoka)
 SPDX-License-Identifier: MPL-2.0
 -->
 
-<script lang='ts'>
+<script lang="ts">
 	import Smalltop from './smalltop.svelte';
 	import { PopoverTypes } from '$lib/components/popover/smalltop';
 	import Cookies from 'js-cookie';
@@ -19,9 +19,10 @@ SPDX-License-Identifier: MPL-2.0
 			return;
 		}
 		open = true;
-		Cookies.set('commandpalette_notice', 'shown', { expires: new Date().setDate(new Date().getDate() + 30) });
+		Cookies.set('commandpalette_notice', 'shown', {
+			expires: new Date().setDate(new Date().getDate() + 30)
+		});
 	});
-
 </script>
 
-<Smalltop bind:open type={PopoverTypes.Generic} data={$t("dashboard.commandpalette_notice")} />
+<Smalltop bind:open type={PopoverTypes.Generic} data={$t('dashboard.commandpalette_notice')} />

frontend/src/lib/components/popover/smalltop.svelte

@@ -4,7 +4,7 @@ SPDX-FileCopyrightText: 2023 Marlon W (Mawoka)
 SPDX-License-Identifier: MPL-2.0
 -->
 
-<script lang='ts'>
+<script lang="ts">
 	import { fly } from 'svelte/transition';
 	import { getLocalization } from '$lib/i18n';
 	import { createEventDispatcher } from 'svelte';
@@ -12,29 +12,29 @@ SPDX-License-Identifier: MPL-2.0
 
 	const { t } = getLocalization();
 
-	const dispatch = createEventDispatcher()
-
+	const dispatch = createEventDispatcher();
 
 	export let open = false;
 	export let type: PopoverTypes;
-	export let data: undefined | { game_pin: number | string; game_id: string } | string = undefined;
+	export let data: undefined | { game_pin: number | string; game_id: string } | string =
+		undefined;
 
-	$: dispatch("open", open)
+	$: dispatch('open', open);
 </script>
 
 {#if open}
-	<div class='fixed w-screen top-10 z-[60] flex justify-center' transition:fly={{ y: -100 }}>
+	<div class="fixed w-screen top-10 z-[60] flex justify-center" transition:fly={{ y: -100 }}>
 		<div
-			class='flex items-center p-4 w-full max-w-xs text-gray-500 bg-white rounded-lg shadow dark:text-gray-400 dark:bg-gray-800'
-			role='alert'
+			class="flex items-center p-4 w-full max-w-xs text-gray-500 bg-white rounded-lg shadow dark:text-gray-400 dark:bg-gray-800"
+			role="alert"
 		>
-			<div class='ml-3 text-sm font-normal'>
+			<div class="ml-3 text-sm font-normal">
 				{#if type === PopoverTypes.Copy}
 					{$t('components.popover.copied_to_clipboard')}
 				{:else if type === PopoverTypes.GameInLobby}A game is currently in the lobby. Click <a
-					class='underline'
-					href='/remote?game_pin={data.game_pin}&game_id={data.game_id}'>here</a
-				> to join as a remote.
+						class="underline"
+						href="/remote?game_pin={data.game_pin}&game_id={data.game_id}">here</a
+					> to join as a remote.
 				{:else if type === PopoverTypes.Generic}
 					{@html data}
 				{:else}
@@ -42,26 +42,26 @@ SPDX-License-Identifier: MPL-2.0
 				{/if}
 			</div>
 			<button
-				type='button'
-				class='ml-auto -mx-1.5 -my-1.5 bg-white text-gray-400 hover:text-gray-900 rounded-lg focus:ring-2 focus:ring-gray-300 p-1.5 hover:bg-gray-100 inline-flex h-8 w-8 dark:text-gray-500 dark:hover:text-white dark:bg-gray-800 dark:hover:bg-gray-700'
-				data-dismiss-target='#toast-default'
-				aria-label='Close'
+				type="button"
+				class="ml-auto -mx-1.5 -my-1.5 bg-white text-gray-400 hover:text-gray-900 rounded-lg focus:ring-2 focus:ring-gray-300 p-1.5 hover:bg-gray-100 inline-flex h-8 w-8 dark:text-gray-500 dark:hover:text-white dark:bg-gray-800 dark:hover:bg-gray-700"
+				data-dismiss-target="#toast-default"
+				aria-label="Close"
 				on:click={() => {
 					open = false;
 				}}
 			>
-				<span class='sr-only'>{$t('words.close')}</span>
+				<span class="sr-only">{$t('words.close')}</span>
 				<svg
-					aria-hidden='true'
-					class='w-5 h-5'
-					fill='currentColor'
-					viewBox='0 0 20 20'
-					xmlns='http://www.w3.org/2000/svg'
+					aria-hidden="true"
+					class="w-5 h-5"
+					fill="currentColor"
+					viewBox="0 0 20 20"
+					xmlns="http://www.w3.org/2000/svg"
 				>
 					<path
-						fill-rule='evenodd'
-						d='M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z'
-						clip-rule='evenodd'
+						fill-rule="evenodd"
+						d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
+						clip-rule="evenodd"
 					/>
 				</svg>
 			</button>

frontend/src/lib/play/admin/controls.svelte

@@ -0,0 +1,104 @@
+<!--
+SPDX-FileCopyrightText: 2023 Marlon W (Mawoka)
+
+SPDX-License-Identifier: MPL-2.0
+-->
+
+<script lang="ts">
+	import { QuizQuestionType } from '$lib/quiz_types';
+	import type { QuizData } from '$lib/quiz_types';
+	import type { Socket } from 'socket.io-client';
+	import { getLocalization } from '$lib/i18n';
+
+	export let bg_color: string;
+	export let selected_question: number;
+	export let quiz_data: QuizData;
+	export let timer_res: string;
+	export let final_results;
+	export let socket: Socket;
+
+	export let game_token: string;
+
+	export let question_results;
+
+	export let shown_question_now: number;
+
+	const { t } = getLocalization();
+	const set_question_number = (q_number: number) => {
+		socket.emit('set_question_number', q_number.toString());
+	};
+
+	const get_question_results = () => {
+		socket.emit('get_question_results', {
+			game_id: game_token,
+			question_number: shown_question_now
+		});
+	};
+	const show_solutions = () => {
+		socket.emit('show_solutions', {});
+		timer_res = '0';
+	};
+
+	const get_final_results = () => {
+		socket.emit('get_final_results', {});
+	};
+</script>
+
+<div
+	class="fixed top-0 w-full h-10 z-20 grid grid-cols-2"
+	style="background: {bg_color ? bg_color : 'transparent'}"
+	class:text-black={bg_color}
+>
+	<p class="mr-auto ml-0 col-start-1 col-end-1">
+		{selected_question === -1 ? '0' : selected_question + 1}
+		/{quiz_data.questions.length}
+	</p>
+	<div class="justify-self-end ml-auto mr-0 col-start-3 col-end-3">
+		{#if selected_question + 1 === quiz_data.questions.length && ((timer_res === '0' && question_results !== null) || quiz_data?.questions?.[selected_question]?.type === QuizQuestionType.SLIDE)}
+			{#if JSON.stringify(final_results) === JSON.stringify([null])}
+				<button on:click={get_final_results} class="admin-button"
+					>{$t('admin_page.get_final_results')}
+				</button>
+			{/if}
+		{:else if timer_res === '0' || selected_question === -1}
+			{#if (selected_question + 1 !== quiz_data.questions.length && question_results !== null) || selected_question === -1}
+				<button
+					on:click={() => {
+						set_question_number(selected_question + 1);
+					}}
+					class="admin-button"
+					>{$t('admin_page.next_question', { question: selected_question + 2 })}
+				</button>
+			{/if}
+			{#if question_results === null && selected_question !== -1}
+				{#if quiz_data.questions[selected_question].type === QuizQuestionType.SLIDE}
+					<button
+						on:click={() => {
+							set_question_number(selected_question + 1);
+						}}
+						class="admin-button"
+						>{$t('admin_page.next_question', { question: selected_question + 2 })}
+					</button>
+				{:else}
+					<button on:click={get_question_results} class="admin-button"
+						>{$t('admin_page.show_results')}
+					</button>
+				{/if}
+			{/if}
+		{:else if selected_question !== -1}
+			{#if quiz_data.questions[selected_question].type === QuizQuestionType.SLIDE}
+				<button
+					on:click={() => {
+						set_question_number(selected_question + 1);
+					}}
+					class="admin-button"
+					>{$t('admin_page.next_question', { question: selected_question + 2 })}
+				</button>
+			{:else}
+				<button on:click={show_solutions} class="admin-button"
+					>{$t('admin_page.stop_time_and_solutions')}
+				</button>
+			{/if}
+		{/if}
+	</div>
+</div>

frontend/src/lib/play/admin/question.svelte

@@ -0,0 +1,109 @@
+<!--
+SPDX-FileCopyrightText: 2023 Marlon W (Mawoka)
+
+SPDX-License-Identifier: MPL-2.0
+-->
+
+<script lang="ts">
+	import { QuizQuestionType } from '$lib/quiz_types';
+	import type { QuizData } from '$lib/quiz_types';
+	import { get_foreground_color } from '$lib/helpers.js';
+	import { kahoot_icons } from '$lib/play/kahoot_mode_assets/kahoot_icons.js';
+	import CircularTimer from '$lib/play/circular_progress.svelte';
+	import MediaComponent from '$lib/editor/MediaComponent.svelte';
+	import { getLocalization } from '$lib/i18n';
+
+	export let quiz_data: QuizData;
+	export let selected_question: number;
+	export let timer_res: string;
+
+	export let answer_count: number;
+	export let default_colors: string[];
+
+	const { t } = getLocalization();
+
+	let circular_progress = 0;
+	$: {
+		try {
+			circular_progress =
+				1 -
+				((100 / parseInt(quiz_data.questions[selected_question].time)) *
+					parseInt(timer_res)) /
+					100;
+		} catch {
+			circular_progress = 0;
+		}
+	}
+</script>
+
+<div class="flex flex-col justify-center w-screen h-1/6">
+	<h1 class="text-6xl text-center">
+		{@html quiz_data.questions[selected_question].question}
+	</h1>
+	<!--			<span class='text-center py-2 text-lg'>{$t('admin_page.time_left')}: {timer_res}</span>-->
+	<div class="grid grid-cols-3 my-2">
+		<span />
+		<div class="m-auto">
+			<CircularTimer
+				bind:text={timer_res}
+				bind:progress={circular_progress}
+				color="#ef4444"
+			/>
+		</div>
+		<p class="m-auto text-3xl">
+			{$t('admin_page.answers_submitted', { answer_count: answer_count })}
+		</p>
+	</div>
+</div>
+{#if quiz_data.questions[selected_question].image !== null}
+	<div class="flex w-full">
+		<MediaComponent
+			src={quiz_data.questions[selected_question].image}
+			muted={false}
+			css_classes="max-h-[20vh] object-cover mx-auto mb-8 w-auto"
+		/>
+	</div>
+{/if}
+{#if quiz_data.questions[selected_question].type === QuizQuestionType.ABCD || quiz_data.questions[selected_question].type === QuizQuestionType.VOTING || quiz_data.questions[selected_question].type === QuizQuestionType.CHECK}
+	<div class="grid grid-rows-2 grid-flow-col auto-cols-auto gap-2 w-full p-4">
+		{#each quiz_data.questions[selected_question].answers as answer, i}
+			<div
+				class="rounded-lg h-fit flex border-2 border-black"
+				style="background-color: {answer.color ?? default_colors[i]};"
+				class:opacity-50={!answer.right &&
+					timer_res === '0' &&
+					quiz_data.questions[selected_question].type === QuizQuestionType.ABCD}
+			>
+				<img
+					class="w-14 inline-block pl-4"
+					alt="icon"
+					style="color: {get_foreground_color(answer.color ?? default_colors[i])}"
+					src={kahoot_icons[i]}
+				/>
+				<span
+					class="text-center text-2xl px-2 py-4 w-full"
+					style="color: {get_foreground_color(answer.color ?? default_colors[i])}"
+					>{answer.answer}</span
+				>
+				<span class="pl-4 w-10" />
+			</div>
+		{/each}
+	</div>
+{:else if quiz_data.questions[selected_question].type === QuizQuestionType.TEXT}
+	{#if timer_res === '0'}
+		<div class="grid grid-cols-2 gap-2 w-full p-4">
+			{#each quiz_data.questions[selected_question].answers as answer, i}
+				<div class="rounded-lg h-fit flex bg-[#B07156]">
+					<span class="text-center text-2xl px-2 py-4 w-full text-black"
+						>{answer.answer}</span
+					>
+					<span class="pl-4 w-10" />
+				</div>
+			{/each}
+		</div>
+	{:else}
+		<div class="flex justify-center">
+			<p class="text-2xl">{$t('admin_page.enter_answer_into_field')}</p>
+		</div>
+	{/if}
+{/if}

frontend/src/routes/dashboard/+page.svelte

@@ -9,7 +9,7 @@ SPDX-License-Identifier: MPL-2.0
 	import { getLocalization } from '$lib/i18n';
 	import Footer from '$lib/footer.svelte';
 	import { navbarVisible, signedIn } from '$lib/stores';
-	import CommandpaletteNotice from "$lib/components/popover/commandpalettenotice.svelte"
+	import CommandpaletteNotice from '$lib/components/popover/commandpalettenotice.svelte';
 	// import Spinner from "$lib/Spinner.svelte";
 	import Fuse from 'fuse.js';
 	import BrownButton from '$lib/components/buttons/brown.svelte';

frontend/src/routes/play/+page.svelte

@@ -73,42 +73,45 @@ SPDX-License-Identifier: MPL-2.0
 		socket.emit('echo_time_sync', data);
 	});
 
-	socket.on("connect", async () => {
-		console.log("Connected!")
-		const cookie_data = Cookies.get("joined_game")
+	socket.on('connect', async () => {
+		console.log('Connected!');
+		const cookie_data = Cookies.get('joined_game');
 		if (!cookie_data) {
-			return
+			return;
 		}
-		const data = JSON.parse(cookie_data)
-		socket.emit("rejoin_game", {old_sid: data.sid, username: data.username, game_pin: data.game_pin})
-		const res = await fetch(
-			`/api/v1/quiz/play/check_captcha/${game_pin}`
-		);
+		const data = JSON.parse(cookie_data);
+		socket.emit('rejoin_game', {
+			old_sid: data.sid,
+			username: data.username,
+			game_pin: data.game_pin
+		});
+		const res = await fetch(`/api/v1/quiz/play/check_captcha/${game_pin}`);
 		const json = await res.json();
 		game_mode = json.game_mode;
-	})
+	});
 
 	// Socket-events
 	socket.on('joined_game', (data) => {
 		gameData = data;
 		// eslint-disable-next-line no-undef
 		plausible('Joined Game', { props: { game_id: gameData.game_id } });
-		Cookies.set("joined_game", JSON.stringify({sid: socket.id, username, game_pin}), {expires: 3600})
+		Cookies.set('joined_game', JSON.stringify({ sid: socket.id, username, game_pin }), {
+			expires: 3600
+		});
 	});
 	socket.on('rejoined_game', (data) => {
 		gameData = data;
 		if (data.started) {
-			gameMeta.started = true
+			gameMeta.started = true;
 		}
-
 	});
 
 	socket.on('game_not_found', () => {
-		const cookie_data = Cookies.get("joined_game")
+		const cookie_data = Cookies.get('joined_game');
 		if (cookie_data) {
-			Cookies.remove("joined_game")
-			window.location.reload()
-			return
+			Cookies.remove('joined_game');
+			window.location.reload();
+			return;
 		}
 		game_pin_valid = false;
 	});
@@ -127,7 +130,7 @@ SPDX-License-Identifier: MPL-2.0
 
 	socket.on('question_results', (data) => {
 		restart();
-		answer_results = data
+		answer_results = data;
 	});
 
 	socket.on('username_already_exists', () => {
@@ -144,7 +147,7 @@ SPDX-License-Identifier: MPL-2.0
 	});
 	socket.on('final_results', (data) => {
 		final_results = data;
-		Cookies.remove("joined_game")
+		Cookies.remove('joined_game');
 	});
 
 	socket.on('solutions', (data) => {

frontend/tsconfig.json

@@ -37,6 +37,7 @@
 {
 	"extends": "./.svelte-kit/tsconfig.json",
 	"compilerOptions": {
-		"resolveJsonModule": true
+		"resolveJsonModule": true,
+		"allowImportingTsExtensions": true
 	}
 }

simulate_players.py

@@ -8,7 +8,7 @@ import sys
 import socketio
 
 NUMBER_OF_PLAYERS = 200
-GAME_PIN = 563037
+GAME_PIN = sys.argv[1]
 q_index = 0