✨ New end-screen

frontend/src/lib/admin.svelte

@@ -28,7 +28,7 @@
 	let shown_question_now: number;
 	let final_results_clicked = false;
 
-	let player_scores = {};
+	export let player_scores;
 
 	export const set_question_number = (q_number: number) => {
 		question_results = null;

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

@@ -0,0 +1,58 @@
+<!--
+  - 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">
+	import { onMount } from 'svelte';
+
+	export let data;
+	export let show_final_results: boolean;
+	import { fly } from 'svelte/transition';
+	import confetti from 'canvas-confetti';
+
+	function sortObjectbyValue(obj) {
+		const ret = {};
+		Object.keys(obj)
+			.sort((a, b) => obj[b] - obj[a])
+			.forEach((s) => (ret[s] = obj[s]));
+		return ret;
+	}
+
+	$: data = sortObjectbyValue(data);
+
+	let player_names;
+	$: player_names = Object.keys(data);
+
+	let player_count_or_five;
+	$: player_count_or_five = player_names.length >= 5 ? 5 : player_names.length;
+
+	let canvas;
+	onMount(() => {
+		setTimeout(() => {
+			confetti.create(canvas, {
+				resize: true,
+				useWorker: true
+			});
+			confetti({ particleCount: 200, spread: 160 });
+		}, player_count_or_five * 1200 - 800);
+	});
+</script>
+
+{#if show_final_results}
+	<canvas bind:this={canvas} />
+	<div>
+		{#each player_names as player, i}
+			{#if i <= player_count_or_five - 1}
+				<p
+					in:fly={{ y: -300, delay: player_count_or_five * 1200 - (i + 1) * 1000 }}
+					style="font-size: {player_count_or_five - i / 2}rem"
+					class="text-center"
+				>
+					{i + 1}
+					: {player} with {data[player]} points
+				</p>
+			{/if}
+		{/each}
+	</div>
+{/if}

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

@@ -14,6 +14,7 @@
 	import AudioPlayer from '$lib/play/audio_player.svelte';
 	import { browser } from '$app/environment';
 	import { onMount } from 'svelte';
+	import FinalResults from '$lib/play/admin/final_results.svelte';
 
 	navbarVisible.set(false);
 
@@ -28,6 +29,7 @@
 	let { game_pin, auto_connect, game_token } = data;
 
 	let players: Array<Player> = [];
+	let player_scores = {};
 	let errorMessage = '';
 	let game_started = false;
 	let quiz_data: QuizData;
@@ -118,6 +120,8 @@
 	};
 	let bg_color;
 	$: bg_color = quiz_data ? quiz_data.background_color : undefined;
+	let show_final_results = false;
+	$: show_final_results = JSON.stringify(final_results) !== JSON.stringify([null]);
 </script>
 
 <svelte:window on:beforeunload={confirmUnload} />
@@ -137,13 +141,17 @@
 				>{$t('admin_page.export_results')}</button
 			>
 		</div>
-		{#await import('$lib/play/end.svelte') then c}
-			<svelte:component
-				this={c.default}
-				bind:final_results
-				bind:question_count={quiz_data.questions.length}
-			/>
-		{/await}
+		<!--{#if game_mode === 'kahoot'}-->
+		<FinalResults bind:data={player_scores} bind:show_final_results />
+		<!--		{:else}
+			{#await import('$lib/play/end.svelte') then c}
+				<svelte:component
+					this={c.default}
+					bind:final_results
+					bind:question_count={quiz_data.questions.length}
+				/>
+			{/await}
+		{/if}-->
 	{/if}
 	{#if !success}
 		<input placeholder="game id" bind:value={game_token} />
@@ -200,6 +208,7 @@
 			bind:quiz_data
 			bind:game_mode
 			bind:bg_color
+			bind:player_scores
 		/>
 	{/if}
 </div>