✨ Showing player's rank in the end (Closes #278)

frontend/src/lib/i18n/locales/en.json

@@ -290,7 +290,8 @@
         "your_score": "Your score: {{score}}",
         "join_description": "Join at {{url}} and enter {{pin}}.",
         "join_by_entering_code": "Join by entering the following code",
-        "points_added": "Points added"
+        "points_added": "Points added",
+        "your_place": "You're on place {{place}}!"
     },
     "editor_page": {
         "add_an_answer": "Add an answer",

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

@@ -4,7 +4,7 @@ SPDX-FileCopyrightText: 2023 Marlon W (Mawoka)
 SPDX-License-Identifier: MPL-2.0
 -->
 
-<script lang="ts">
+<script lang='ts'>
 	import { onMount } from 'svelte';
 	import { getLocalization } from '$lib/i18n';
 
@@ -54,8 +54,8 @@ SPDX-License-Identifier: MPL-2.0
 			{#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"
+					style='font-size: {player_count_or_five - i / 2}rem'
-					class="text-center"
+					class='text-center'
 				>
 					{$t('play_page.final_result_rank', {
 						place: i + 1,
@@ -67,9 +67,14 @@ SPDX-License-Identifier: MPL-2.0
 		{/each}
 	</div>
 	{#if data[username]}
-		<div class="fixed bottom-0 left-0 flex justify-center w-full mb-6">
+		<div class='fixed bottom-0 left-0 flex justify-center w-full mb-6'>
-			<div class="mx-auto p-2 border-[#B07156] border-4 rounded">
+			<div class='mx-auto p-2 border-[#B07156] border-4 rounded'>
-				<p>{$t('play_page.your_score', { score: data[username] })}</p>
+				<p class='text-center'>{$t('play_page.your_score', { score: data[username] })}</p>
+				{#each player_names as player, i}
+					{#if player === username}
+						<p class='text-center'>{$t('play_page.your_place', { place: i+1 })}</p>
+					{/if}
+				{/each}
 			</div>
 		</div>
 	{/if}