✨ Showing player count on admin screen

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

@@ -291,7 +291,8 @@
         "join_description": "Join at {{url}} and enter {{pin}}.",
         "join_by_entering_code": "Join by entering the following code",
         "points_added": "Points added",
-        "your_place": "You're on place {{place}}!"
+        "your_place": "You're on place {{place}}!",
+        "players_waiting": "{{count}} players are waiting"
     },
     "editor_page": {
         "add_an_answer": "Add an answer",

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

@@ -4,7 +4,7 @@ SPDX-FileCopyrightText: 2023 Marlon W (Mawoka)
 SPDX-License-Identifier: MPL-2.0
 -->
 
-<script lang="ts">
+<script lang='ts'>
 	import AudioPlayer from '$lib/play/audio_player.svelte';
 	import ControllerCodeDisplay from '$lib/components/controller/code.svelte';
 	import { getLocalization } from '$lib/i18n';
@@ -35,11 +35,11 @@ SPDX-License-Identifier: MPL-2.0
 	};
 </script>
 
-<div class="w-full h-full">
+<div class='w-full h-full'>
 	<AudioPlayer bind:play={play_music} />
-	<div class="grid grid-cols-3 mt-12">
-		<div class="flex justify-center">
-			<p class="m-auto text-2xl">
+	<div class='grid grid-cols-3 mt-12'>
+		<div class='flex justify-center'>
+			<p class='m-auto text-2xl'>
 				{$t('play_page.join_description', {
 					url:
 						window.location.host === 'classquiz.de'
@@ -50,39 +50,57 @@ SPDX-License-Identifier: MPL-2.0
 			</p>
 		</div>
 		<img
-			alt="QR code to join the game"
-			src="/api/v1/utils/qr/{game_pin}"
-			class="block mx-auto w-1/2 dark:bg-white shadow-2xl rounded"
+			alt='QR code to join the game'
+			src='/api/v1/utils/qr/{game_pin}'
+			class='block mx-auto w-1/2 dark:bg-white shadow-2xl rounded'
 		/>
 		{#if cqc_code}
-			<div class="m-auto">
-				<div class="flex-col flex justify-center">
-					<p class="mx-auto">{$t('play_page.join_by_entering_code')}</p>
+			<div class='m-auto'>
+				<div class='flex justify-center my-4'>
+					<p class='m-auto text-2xl'>
+						{$t('play_page.players_waiting', {
+							count: players.length ?? 0
+						})}
+					</p>
+				</div>
+				<div class='flex-col flex justify-center'>
+					<p class='mx-auto'>{$t('play_page.join_by_entering_code')}</p>
 					<ControllerCodeDisplay code={cqc_code} />
 				</div>
+
+			</div>
+
+		{:else}
+			<div class='flex justify-center'>
+				<p class='m-auto text-2xl'>
+					{$t('play_page.players_waiting', {
+						count: players.length ?? 0
+					})}
+				</p>
 			</div>
 		{/if}
+
 	</div>
-	<p class="text-3xl text-center">
-		{$t('words.pin')}: <span class="select-all">{game_pin}</span>
+	<p class='text-3xl text-center'>
+		{$t('words.pin')}: <span class='select-all'>{game_pin}</span>
 	</p>
-	<div class="flex justify-center w-full mt-4">
+	<div class='flex justify-center w-full mt-4'>
 		<div>
 			<GrayButton
 				disabled={players.length < 1}
 				on:click={() => {
 					socket.emit('start_game', '');
 				}}
-				>{$t('admin_page.start_game')}
+			>{$t('admin_page.start_game')}
 			</GrayButton>
 		</div>
 	</div>
-	<div class="flex flex-row w-full mt-4 px-10 flex-wrap">
+	<div class='flex flex-row w-full mt-4 px-10 flex-wrap'>
 		{#if players.length > 0}
 			{#each players as player}
-				<div class="p-2 m-2 border-2 border-[#B07156] rounded hover:cursor-pointer">
+				<div class='p-2 m-2 border-2 border-[#B07156] rounded hover:cursor-pointer'>
 					<span
-						class="hover:line-through text-lg"
+						class='hover:line-through text-lg'
 						on:click={() => {
 							kick_player(player.username);
 						}}>{player.username}</span