Updated to Svelte 5

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

@@ -5,6 +5,8 @@ SPDX-License-Identifier: MPL-2.0
 -->
 
 <script lang="ts">
+	import { run } from 'svelte/legacy';
+
 	import VotingResults from './voting_results.svelte';
 	import { flip } from 'svelte/animate';
 	import { fly } from 'svelte/transition';
@@ -15,16 +17,19 @@ SPDX-License-Identifier: MPL-2.0
 
 	const { t } = getLocalization();
 
-	export let data;
-	export let question: Question;
+	interface Props {
+		data: any;
+		question: Question;
+		new_data: Array<{
+			username: string;
+			answer: string;
+			right: boolean;
+			time_taken: number;
+			score: number;
+		}>;
+	}
 
-	export let new_data: Array<{
-		username: string;
-		answer: string;
-		right: boolean;
-		time_taken: number;
-		score: number;
-	}>;
+	let { data = $bindable(), question, new_data }: Props = $props();
 
 	function sortObjectbyValue(obj) {
 		const ret = {};
@@ -35,7 +40,7 @@ SPDX-License-Identifier: MPL-2.0
 	}
 
 	// let data_by_username = {};
-	let score_by_username = {};
+	let score_by_username = $state({});
 
 	const do_sth = () => {
 		for (const i of new_data) {
@@ -43,13 +48,17 @@ SPDX-License-Identifier: MPL-2.0
 		}
 	};
 
-	$: {
+	run(() => {
 		new_data;
 		score_by_username;
 		do_sth();
-	}
+	});
 
-	let player_names;
+	let player_names = $derived(
+		Object.keys(data).sort(function (a, b) {
+			return data[b] - data[a];
+		})
+	);
 
 	if (JSON.stringify(data) === '{}') {
 		for (const i of new_data) {
@@ -57,12 +66,11 @@ SPDX-License-Identifier: MPL-2.0
 		}
 	}
 
-	$: data = sortObjectbyValue(data);
-	$: player_names = Object.keys(data).sort(function (a, b) {
-		return data[b] - data[a];
+	run(() => {
+		data = sortObjectbyValue(data);
 	});
 
-	let show_new_score_clicked = false;
+	let show_new_score_clicked = $state(false);
 
 	const show_new_score = () => {
 		// for (let i = 0; i++; i < player_names.length) {
@@ -98,34 +106,42 @@ SPDX-License-Identifier: MPL-2.0
 	<div class="flex justify-center">
 		<div>
 			<table class="table-auto text-xl">
-				<tr>
-					<th class="p-2 border-r border-r-black border-b-2 border-b-black"
-						>{$t('words.name')}</th
-					>
-					<th class="p-2 border-b-2 border-b-black">{$t('words.point', { count: 2 })}</th>
-					{#if show_new_score_clicked}
-						<th in:fly|global={{ x: 300 }} class="p-2 border-b-2 border-b-black"
-							>{$t('play_page.points_added')}
-						</th>
-					{/if}
-				</tr>
-				{#each player_names as player, i (player)}
-					<tr animate:flip>
-						<td class:hidden={i > 3} class="p-2 border-r border-r-black">{player}</td>
-						<td class:hidden={i > 3} class="p-2">{data[player]}</td>
+				<thead>
+					<tr>
+						<th class="p-2 border-r border-r-black border-b-2 border-b-black"
+							>{$t('words.name')}</th
+						>
+						<th class="p-2 border-b-2 border-b-black"
+							>{$t('words.point', { count: 2 })}</th
+						>
 						{#if show_new_score_clicked}
-							<td
-								in:fly|global={{ x: 300 }}
-								class:hidden={i > 3}
-								class="p-2"
-								class:text-red-600={score_by_username[player] === 0 ||
-									score_by_username[player] === undefined}
-							>
-								+{score_by_username[player] ?? '0'}
-							</td>
+							<th in:fly|global={{ x: 300 }} class="p-2 border-b-2 border-b-black"
+								>{$t('play_page.points_added')}
+							</th>
 						{/if}
 					</tr>
-				{/each}
+				</thead>
+				<tbody>
+					{#each player_names as player, i (player)}
+						<tr animate:flip>
+							<td class:hidden={i > 3} class="p-2 border-r border-r-black"
+								>{player}</td
+							>
+							<td class:hidden={i > 3} class="p-2">{data[player]}</td>
+							{#if show_new_score_clicked}
+								<td
+									in:fly|global={{ x: 300 }}
+									class:hidden={i > 3}
+									class="p-2"
+									class:text-red-600={score_by_username[player] === 0 ||
+										score_by_username[player] === undefined}
+								>
+									+{score_by_username[player] ?? '0'}
+								</td>
+							{/if}
+						</tr>
+					{/each}
+				</tbody>
 			</table>
 		</div>
 	</div>