From 16c596d23db887b3edfd3f939cea842a3c191b30 Mon Sep 17 00:00:00 2001
From: Mawoka <git@mawoka.eu>
Date: Wed, 31 Aug 2022 17:32:06 +0200
Subject: [PATCH] :sparkles: Small improvements to the playing-experience,
 mainly with range-answers

---
 frontend/src/lib/play/end.svelte          |  5 ++++-
 frontend/src/lib/play/question.svelte     | 20 +++++++++--------
 frontend/src/lib/play/show_results.svelte | 26 +++++++++++++++++++++--
 3 files changed, 39 insertions(+), 12 deletions(-)

diff --git a/frontend/src/lib/play/end.svelte b/frontend/src/lib/play/end.svelte
index 39b335c..f4c5bf4 100644
--- a/frontend/src/lib/play/end.svelte
+++ b/frontend/src/lib/play/end.svelte
@@ -64,6 +64,9 @@
 		}
 	};
 	let winners = getWinnersSorted();
+	$: {
+		console.log(winners, winners_arr);
+	}
 </script>
 
 <div>
@@ -75,7 +78,7 @@
 					{$t('play_page.1st_place')}: <span class="underline">{winners_arr[0]}</span>
 					<span
 						>{$t('play_page.with_out_of', {
-							correct_questions: winners[winners_arr[1]] ?? 0,
+							correct_questions: winners[winners_arr[0]] ?? 0,
 							total_question_count: quiz_data.questions.length
 						})}</span
 					>
diff --git a/frontend/src/lib/play/question.svelte b/frontend/src/lib/play/question.svelte
index 6d1469d..29869c8 100644
--- a/frontend/src/lib/play/question.svelte
+++ b/frontend/src/lib/play/question.svelte
@@ -93,15 +93,17 @@
 		{#await import('svelte-range-slider-pips')}
 			<Spinner />
 		{:then c}
-			<svelte:component
-				this={c.default}
-				bind:values={slider_value}
-				bind:min={question.answers.min}
-				bind:max={question.answers.max}
-				pips
-				float
-				all="label"
-			/>
+			<div class:pointer-events-none={selected_answer !== undefined}>
+				<svelte:component
+					this={c.default}
+					bind:values={slider_value}
+					bind:min={question.answers.min}
+					bind:max={question.answers.max}
+					pips
+					float
+					all="label"
+				/>
+			</div>
 			<div class="flex justify-center">
 				<button
 					class="w-1/2 text-3xl bg-amber-700 my-2 disabled:opacity-60 border border-white"
diff --git a/frontend/src/lib/play/show_results.svelte b/frontend/src/lib/play/show_results.svelte
index c822cb2..16f85b1 100644
--- a/frontend/src/lib/play/show_results.svelte
+++ b/frontend/src/lib/play/show_results.svelte
@@ -7,6 +7,7 @@
 	import type { Answer, QuizData } from '$lib/quiz_types';
 	import { getLocalization } from '$lib/i18n';
 	import { QuizQuestionType } from '../quiz_types.js';
+	import Spinner from '$lib/Spinner.svelte';
 
 	const { t } = getLocalization();
 	export let results: Array<Answer>;
@@ -22,6 +23,12 @@
 	for (let i = 0; i < results.length; i++) {
 		data_store[results[i].answer] += 1;
 	}
+
+	let slider_values = [
+		game_data.questions[parseInt(question_index)].answers.min_correct ?? 0,
+		game_data.questions[parseInt(question_index)].answers.max_correct ?? 0
+	];
+	console.log(slider_values, game_data.questions[parseInt(question_index)].answers);
 </script>
 
 <!-- Show the results from the results object -->
@@ -84,11 +91,26 @@
 				</table>
 			</div>
 		{:else if game_data.questions[parseInt(question_index)].type === QuizQuestionType.RANGE}
-			<p class="text-center">
+			<!--<p class="text-center">
 				Every number between {game_data.questions[parseInt(question_index)].answers
 					.min_correct} and {game_data.questions[parseInt(question_index)].answers
 					.max_correct} was correct.
-			</p>
+			</p>-->
+			{#await import('svelte-range-slider-pips')}
+				<Spinner />
+			{:then c}
+				<div class="grayscale pointer-events-none w-full">
+					<svelte:component
+						this={c.default}
+						bind:values={slider_values}
+						bind:min={game_data.questions[parseInt(question_index)].answers.min}
+						bind:max={game_data.questions[parseInt(question_index)].answers.max}
+						pips
+						float
+						all="label"
+					/>
+				</div>
+			{/await}
 		{/if}
 	</div>
 </div>