From 36688bb552dddcfec427eca7278ece84564bdbbd Mon Sep 17 00:00:00 2001
From: Mawoka <git@mawoka.eu>
Date: Sun, 5 Feb 2023 21:33:10 +0100
Subject: [PATCH] :sparkles: More progress on frontend for game results

---
 frontend/src/routes/results/+page.svelte      | 20 ++--
 .../routes/results/[result_id]/+page.svelte   |  7 +-
 .../[result_id]/player_overview.svelte        |  5 +-
 .../[result_id]/question_overview.svelte      | 59 +++++++++++-
 .../[result_id]/question_tab_thing.svelte     | 94 +++++++++++++++++++
 5 files changed, 173 insertions(+), 12 deletions(-)
 create mode 100644 frontend/src/routes/results/[result_id]/question_tab_thing.svelte

diff --git a/frontend/src/routes/results/+page.svelte b/frontend/src/routes/results/+page.svelte
index fcbac5a..0ff7dff 100644
--- a/frontend/src/routes/results/+page.svelte
+++ b/frontend/src/routes/results/+page.svelte
@@ -15,15 +15,15 @@
 			<table class="w-full">
 				<tr class="border-b-2 dark:border-gray-500 text-left border-gray-300">
 					<th class="border-r dark:border-gray-500 p-1 mx-auto border-gray-300"
-						>Quiz Title</th
-					>
+						>Quiz Title
+					</th>
 					<th class="border-r dark:border-gray-500 p-1 mx-auto border-gray-300"
-						>Date Played</th
-					>
+						>Date Played
+					</th>
 					<th class="border-r dark:border-gray-500 p-1 mx-auto border-gray-300"
-						>Player count</th
-					>
-					<th>Note</th>
+						>Player count
+					</th>
+					<th class="mx-auto p-1">Note</th>
 				</tr>
 				{#each data.results as result}
 					<tr class="text-left">
@@ -38,7 +38,11 @@
 						<td class="border-r dark:border-gray-500 p-1 border-gray-300"
 							>{Object.keys(result.player_scores).length}</td
 						>
-						<td>{result.note}</td>
+						<td class:p-1={result.note}>
+							{#if result.note}
+								{result.note}
+							{/if}
+						</td>
 					</tr>
 				{/each}
 			</table>
diff --git a/frontend/src/routes/results/[result_id]/+page.svelte b/frontend/src/routes/results/[result_id]/+page.svelte
index ee85583..914229c 100644
--- a/frontend/src/routes/results/[result_id]/+page.svelte
+++ b/frontend/src/routes/results/[result_id]/+page.svelte
@@ -6,6 +6,7 @@
 <script lang="ts">
 	import type { PageData } from './$types';
 	import PlayerOverview from './player_overview.svelte';
+	import QuestionOverview from './question_overview.svelte';
 
 	export let data: PageData;
 
@@ -65,7 +66,11 @@
 			</button>
 		</div>
 	</div>
-	{#if selected_tab === SelectedTab.Overview}{:else if selected_tab === SelectedTab.Questions}{:else if selected_tab === SelectedTab.Players}
+	{#if selected_tab === SelectedTab.Overview}{:else if selected_tab === SelectedTab.Questions}
+		<div>
+			<QuestionOverview quiz={data.results.quiz} answers={data.results.answers} />
+		</div>
+	{:else if selected_tab === SelectedTab.Players}
 		<div>
 			<PlayerOverview
 				custom_field={data.results.custom_field_data}
diff --git a/frontend/src/routes/results/[result_id]/player_overview.svelte b/frontend/src/routes/results/[result_id]/player_overview.svelte
index 71aad1a..565be87 100644
--- a/frontend/src/routes/results/[result_id]/player_overview.svelte
+++ b/frontend/src/routes/results/[result_id]/player_overview.svelte
@@ -12,6 +12,7 @@
 	};
 
 	let usernames = Object.keys(scores);
+	console.log(custom_field);
 </script>
 
 <div class="w-full">
@@ -22,7 +23,7 @@
 					>Player name</th
 				>
 				<th class="p-1 mx-auto">Player Score</th>
-				{#if custom_field}
+				{#if Object.keys(custom_field).length !== 0}
 					<th class="border-l dark:border-gray-500 p-1 mx-auto border-gray-300"
 						>Custom field</th
 					>
@@ -32,7 +33,7 @@
 				<tr class="text-left">
 					<td class="border-r dark:border-gray-500 p-1 border-gray-300">{uname}</td>
 					<td class="p-1">{scores[uname]}</td>
-					{#if custom_field}
+					{#if custom_field[uname]}
 						<td class="border-l dark:border-gray-500 p-1 border-gray-300"
 							>{custom_field[uname]}</td
 						>
diff --git a/frontend/src/routes/results/[result_id]/question_overview.svelte b/frontend/src/routes/results/[result_id]/question_overview.svelte
index e050045..7a67da3 100644
--- a/frontend/src/routes/results/[result_id]/question_overview.svelte
+++ b/frontend/src/routes/results/[result_id]/question_overview.svelte
@@ -5,6 +5,8 @@
   -->
 <script lang="ts">
 	import type { QuizData } from '$lib/quiz_types';
+	import { fly } from 'svelte/transition';
+	import QuestionTab from './question_tab_thing.svelte';
 
 	export let quiz: QuizData;
 	export let answers: {
@@ -13,5 +15,60 @@
 		right: boolean;
 		tike_taken: number;
 		score: number;
-	}[];
+	}[][];
+
+	const get_average_score = (q_index: number): number => {
+		const q_answers = answers[q_index];
+		let summed_up_scores = 0;
+		for (const answer of q_answers) {
+			summed_up_scores = summed_up_scores + answer.score;
+		}
+		return summed_up_scores / q_answers.length;
+	};
+
+	const get_number_of_correct_answers = (q_index: number): number => {
+		const q_answers = answers[q_index];
+		let correct_answer = 0;
+		for (const answer of q_answers) {
+			if (answer.right) {
+				correct_answer++;
+			}
+		}
+		return correct_answer;
+	};
+
+	const toggle_dropdown = (q_index: number) => {
+		if (question_open === q_index) {
+			question_open = false;
+		} else {
+			question_open = q_index;
+		}
+	};
+	let question_open: number | boolean = false;
 </script>
+
+<div class="w-full flex justify-center">
+	<div class="w-11/12 flex flex-col w-full">
+		{#each quiz.questions as question, i}
+			<div>
+				<div class="w-full bg-white bg-opacity-60 p-2 rounded grid grid-cols-3 z-40">
+					<button
+						class="text-center underline text-xl"
+						on:click={() => {
+							toggle_dropdown(i);
+						}}>{question.question}</button
+					>
+					<p class="text-center text-sm my-auto">Average Score: {get_average_score(i)}</p>
+					<p class="text-center text-sm my-auto">
+						{get_number_of_correct_answers(i)} correct Answer(s)
+					</p>
+				</div>
+				{#if question_open === i}
+					<div transition:fly={{ y: -10 }}>
+						<QuestionTab {question} answers={answers[i]} />
+					</div>
+				{/if}
+			</div>
+		{/each}
+	</div>
+</div>
diff --git a/frontend/src/routes/results/[result_id]/question_tab_thing.svelte b/frontend/src/routes/results/[result_id]/question_tab_thing.svelte
new file mode 100644
index 0000000..3bad81c
--- /dev/null
+++ b/frontend/src/routes/results/[result_id]/question_tab_thing.svelte
@@ -0,0 +1,94 @@
+<!--
+  - This Source Code Form is subject to the terms of the Mozilla Public
+  - License, v. 2.0. If a copy of the MPL was not distributed with this
+  - file, You can obtain one at https://mozilla.org/MPL/2.0/.
+  -->
+<script lang="ts">
+	export let question;
+
+	interface Answer {
+		username: string;
+		answer: string;
+		right: boolean;
+		time_taken: number;
+		score: number;
+	}
+
+	export let answers: Answer[];
+	console.log(question);
+
+	const get_answer_count_for_answer = (answer: string): number => {
+		let count = 0;
+		for (const a of answers) {
+			if (a.answer === answer) {
+				count++;
+			}
+		}
+		return count;
+	};
+	const get_answers_for_answer = (answer: string): Array<Answer> => {
+		let ret_answers = [];
+		for (const a of answers) {
+			if (a.answer === answer) {
+				ret_answers.push(a);
+			}
+		}
+		return ret_answers;
+	};
+</script>
+
+<div class="flex justify-center">
+	<div class="bg-white p-2 -z-10 w-10/12 rounded">
+		<div class="flex flex-col">
+			{#each question.answers as answer}
+				<div class="grid grid-cols-4">
+					<p>{answer.answer}</p>
+					<div class="col-span-3 flex w-full border-l border-gray-500 px-1">
+						<div class="my-auto w-full mr-1">
+							<span
+								class="h-1 block bg-green-600 my-auto"
+								style="width: {(get_answer_count_for_answer(answer.answer) /
+									answers.length) *
+									100}%"
+							/>
+						</div>
+						<p>{get_answer_count_for_answer(answer.answer)}</p>
+					</div>
+				</div>
+			{/each}
+		</div>
+		<div class="mt-2">
+			<table class="w-full text-left">
+				<tr class="border-b-2 dark:border-gray-500 text-left border-gray-300">
+					<th class="border-r dark:border-gray-500 p-1 mx-auto border-gray-300"
+						>Player Name</th
+					>
+					<th class="border-r dark:border-gray-500 p-1 mx-auto border-gray-300">Score</th>
+					<th class="border-r dark:border-gray-500 p-1 mx-auto border-gray-300"
+						>Time Taken</th
+					>
+					<th class="border-r dark:border-gray-500 p-1 mx-auto border-gray-300">Answer</th
+					>
+					<th class="p-1">Correct?</th>
+				</tr>
+				{#each answers as answer}
+					<tr>
+						<td class="border-r dark:border-gray-500 p-1 border-gray-300"
+							>{answer.username}</td
+						>
+						<td class="border-r dark:border-gray-500 p-1 border-gray-300"
+							>{answer.score}</td
+						>
+						<td class="border-r dark:border-gray-500 p-1 border-gray-300"
+							>{answer.time_taken}</td
+						>
+						<td class="border-r dark:border-gray-500 p-1 border-gray-300"
+							>{answer.answer}</td
+						>
+						<td class="p-1">{answer.right}</td>
+					</tr>
+				{/each}
+			</table>
+		</div>
+	</div>
+</div>