From 8039269cf3db7e35a088714ac113cb9b30854ad4 Mon Sep 17 00:00:00 2001
From: Mawoka <git@mawoka.eu>
Date: Sun, 18 Sep 2022 19:46:28 +0200
Subject: [PATCH] :ambulance: Fixed start_game on public quiz-view

---
 .../src/routes/view/[quiz_id]/+page.svelte    | 20 +++++++++++++++++--
 1 file changed, 18 insertions(+), 2 deletions(-)

diff --git a/frontend/src/routes/view/[quiz_id]/+page.svelte b/frontend/src/routes/view/[quiz_id]/+page.svelte
index 8de4044..94c1bf7 100644
--- a/frontend/src/routes/view/[quiz_id]/+page.svelte
+++ b/frontend/src/routes/view/[quiz_id]/+page.svelte
@@ -9,7 +9,8 @@
 	import { createTippy } from 'svelte-tippy';
 	import ImportedOrNot from '$lib/view_quiz/imported_or_not.svelte';
 	import { QuizQuestionType } from '$lib/quiz_types.js';
-	import { start_game } from '../../../lib/dashboard/start_game.svelte';
+	import StartGamePopup from '$lib/dashboard/start_game.svelte';
+	import { onMount } from 'svelte';
 
 	const tippy = createTippy({
 		arrow: true,
@@ -17,6 +18,17 @@
 		placement: 'right'
 	});
 
+	let start_game = null;
+
+	const close_start_game_if_esc_is_pressed = (key: KeyboardEvent) => {
+		if (key.code === 'Escape') {
+			start_game = null;
+		}
+	};
+	onMount(() => {
+		document.body.addEventListener('keydown', close_start_game_if_esc_is_pressed);
+	});
+
 	const { t } = getLocalization();
 	export let data;
 	let { quiz, logged_in }: { quiz: QuizData; logged_in: boolean } = data;
@@ -75,7 +87,7 @@
 			<button
 				class="px-4 py-2 leading-5 text-white transition-colors duration-200 transform bg-gray-700 rounded text-center hover:bg-gray-600 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50"
 				on:click={() => {
-					start_game(quiz.id);
+					start_game = quiz.id;
 				}}
 			>
 				{$t('words.start')}
@@ -166,3 +178,7 @@
 		</div>
 	{/each}
 </div>
+
+{#if start_game !== null}
+	<StartGamePopup bind:quiz_id={start_game} />
+{/if}