From 4f220bf8107f885d21a3b0dbd31042a860fc3dbf Mon Sep 17 00:00:00 2001
From: Mawoka <git@mawoka.eu>
Date: Thu, 29 Sep 2022 12:15:18 +0200
Subject: [PATCH] :sparkles: Improved buttons in kahoot-mode

---
 frontend/src/app.css                          |  3 +
 frontend/src/lib/admin.svelte                 | 56 ++++++++++---------
 frontend/src/lib/dashboard/main_slider.svelte |  2 +-
 frontend/src/routes/admin/+page.svelte        |  6 +-
 .../src/routes/view/[quiz_id]/+page.svelte    |  7 +--
 5 files changed, 38 insertions(+), 36 deletions(-)

diff --git a/frontend/src/app.css b/frontend/src/app.css
index dabe700..4e0de9d 100644
--- a/frontend/src/app.css
+++ b/frontend/src/app.css
@@ -28,4 +28,7 @@
 	.normal-background {
 		@apply bg-gradient-to-r from-[#009444] via-[#39b54a] to-[#8dc63f] dark:bg-[#0f2702] dark:from-[#0f2702] dark:via-[#0f2702] dark:to[#0f2702];
 	}
+	.admin-button {
+		@apply 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;
+	}
 }
diff --git a/frontend/src/lib/admin.svelte b/frontend/src/lib/admin.svelte
index 27db7dc..0662483 100644
--- a/frontend/src/lib/admin.svelte
+++ b/frontend/src/lib/admin.svelte
@@ -92,7 +92,6 @@
 			circular_prgoress = 0;
 		}
 	}
-	$: console.log(quiz_data.questions.length, 'length of quiz');
 </script>
 
 {#if game_mode === 'kahoot'}
@@ -105,38 +104,47 @@
 			{selected_question === -1 ? '0' : selected_question + 1}
 			/{quiz_data.questions.length}
 		</p>
-		{#if selected_question >= 0}
+		{#if selected_question >= 0 && JSON.stringify(final_results) === JSON.stringify([null])}
 			<div class="flex justify-center flex-col my-auto col-start-2 col-end-2">
 				<h2 class="text-center">{quiz_data.questions[selected_question].question}</h2>
 				<p class="w-full text-center">{timer_res}</p>
 			</div>
 		{/if}
 		<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'}
+			{#if selected_question + 1 === quiz_data.questions.length && timer_res === '0' && question_results !== null}
 				{#if JSON.stringify(final_results) === JSON.stringify([null])}
-					<button on:click={get_final_results}>Get final results</button>
+					<button on:click={get_final_results} class="admin-button"
+						>Get final results</button
+					>
 				{/if}
 			{:else if timer_res === '0' || selected_question === -1}
-				<button
-					on:click={() => {
-						set_question_number(selected_question + 1);
-					}}
-					>Next Question ({selected_question + 2})
-				</button>
+				{#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"
+						>Next Question ({selected_question + 2})
+					</button>
+				{/if}
 				{#if question_results === null && selected_question !== -1}
-					<button on:click={get_question_results}>Show results</button>
+					<button on:click={get_question_results} class="admin-button"
+						>Show results</button
+					>
 				{/if}
 			{:else if selected_question !== -1}
-				<button on:click={show_solutions}>Stop time and show solutions</button>
+				<button on:click={show_solutions} class="admin-button"
+					>Stop time and show solutions</button
+				>
 			{:else}
-				<p>!OK!</p>
-				<button
+				<!--				<button
 					on:click={() => {
 						set_question_number(selected_question + 1);
 					}}
-					>Next Question ({selected_question + 2}
+					class='admin-button'
+				>Next Question ({selected_question + 2}
 					)
-				</button>
+				</button>-->
 			{/if}
 		</div>
 	</div>
@@ -196,15 +204,14 @@
 		{/if}
 	{/if}
 	<br />
-	{#if timer_res === '0'}
+	{#if timer_res === '0' && JSON.stringify(final_results) === JSON.stringify([null])}
 		{#if question_results === null}
 			{#if game_mode === 'normal'}
 				<div class="w-full flex justify-center">
 					<button
 						on:click={get_question_results}
 						id="GetQuestionResults"
-						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"
-						>{$t('admin_page.get_results')}</button
+						class="admin-button">{$t('admin_page.get_results')}</button
 					>
 				</div>
 			{/if}
@@ -233,8 +240,7 @@
 						timer_res = '0';
 					}}
 					id="GetQuestionResultsAndStopTime"
-					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"
-					>{$t('admin_page.stop_time')}</button
+					class="admin-button">{$t('admin_page.stop_time')}</button
 				>
 			</div>
 		{/if}
@@ -244,7 +250,7 @@
 		{#if game_mode === 'normal'}
 			<div class="w-full flex justify-center">
 				<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"
+					class="admin-button"
 					disabled={!(timer_res === undefined || timer_res === '0')}
 					id="SetQuestionNumber"
 					on:click={() => {
@@ -264,7 +270,7 @@
 					on:click={() => {
 						set_question_number(0);
 					}}
-					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"
+					class="admin-button"
 				>
 					{$t('admin_page.start_by_showing_first_question')}
 				</button>
@@ -273,9 +279,7 @@
 	{:else if final_results_clicked === false}
 		{#if game_mode === 'normal'}
 			<div class="w-screen flex justify-center">
-				<button
-					on:click={get_final_results}
-					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"
+				<button on:click={get_final_results} class="admin-button"
 					>{$t('admin_page.get_final_results')}</button
 				>
 			</div>
diff --git a/frontend/src/lib/dashboard/main_slider.svelte b/frontend/src/lib/dashboard/main_slider.svelte
index 70ba792..55eee97 100644
--- a/frontend/src/lib/dashboard/main_slider.svelte
+++ b/frontend/src/lib/dashboard/main_slider.svelte
@@ -10,7 +10,7 @@
 	import 'swiper/css/navigation';
 	import { Pagination, EffectCoverflow, Keyboard, Mousewheel, Navigation } from 'swiper';
 	import { QuizQuestionType } from '$lib/quiz_types.js';
-	import { getLocalization } from '../i18n';
+	import { getLocalization } from '$lib/i18n';
 	import StartGamePopup from './start_game.svelte';
 	import { onMount } from 'svelte';
 
diff --git a/frontend/src/routes/admin/+page.svelte b/frontend/src/routes/admin/+page.svelte
index 0e496fe..121d9a4 100644
--- a/frontend/src/routes/admin/+page.svelte
+++ b/frontend/src/routes/admin/+page.svelte
@@ -135,9 +135,7 @@
 >
 	{#if JSON.stringify(final_results) !== JSON.stringify([null])}
 		<div class="w-screen flex justify-center mt-8">
-			<button
-				on:click={request_answer_export}
-				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"
+			<button on:click={request_answer_export} class="admin-button"
 				>{$t('admin_page.export_results')}</button
 			>
 		</div>
@@ -189,7 +187,7 @@
 			{#if players.length > 0}
 				<div class="flex justify-center w-full mt-4">
 					<button
-						class="ml-4 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"
+						class="ml-4 admin-button"
 						id="startGame"
 						on:click={() => {
 							socket.emit('start_game', '');
diff --git a/frontend/src/routes/view/[quiz_id]/+page.svelte b/frontend/src/routes/view/[quiz_id]/+page.svelte
index 94c1bf7..3189b60 100644
--- a/frontend/src/routes/view/[quiz_id]/+page.svelte
+++ b/frontend/src/routes/view/[quiz_id]/+page.svelte
@@ -85,7 +85,7 @@
 	<div class="flex justify-center mt-8 mb-4">
 		{#if logged_in}
 			<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"
+				class="admin-button"
 				on:click={() => {
 					start_game = quiz.id;
 				}}
@@ -104,10 +104,7 @@
 		{/if}
 	</div>
 	<div class="flex justify-center m-2">
-		<a
-			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"
-			href="/practice?quiz_id={quiz.id}"
-		>
+		<a class="admin-button" href="/practice?quiz_id={quiz.id}">
 			{$t('words.practice')}
 		</a>
 	</div>