From 121e693e92e20f1014360a2de8ad8696d0e6c426 Mon Sep 17 00:00:00 2001
From: Mawoka <git@mawoka.eu>
Date: Sun, 1 Oct 2023 10:49:44 +0200
Subject: [PATCH] :sparkles: Updated admin-join-screen

---
 classquiz/socket_server/__init__.py           |  2 +
 .../lib/play/admin/game_not_started.svelte    | 69 +++++++++----------
 2 files changed, 36 insertions(+), 35 deletions(-)

diff --git a/classquiz/socket_server/__init__.py b/classquiz/socket_server/__init__.py
index 341f3c7..0aaa2bf 100644
--- a/classquiz/socket_server/__init__.py
+++ b/classquiz/socket_server/__init__.py
@@ -433,6 +433,8 @@ async def submit_answer(sid: str, data: dict):
         score = calculate_score(
             abs(diff) - latency, int(float(game_data.questions[int(float(data.question_index))].time))
         )
+        if score > 1000:
+            score = 1000
     await redis.hincrby(f"game_session:{session['game_pin']}:player_scores", session["username"], score)
     answer_data = AnswerData(
         username=session["username"],
diff --git a/frontend/src/lib/play/admin/game_not_started.svelte b/frontend/src/lib/play/admin/game_not_started.svelte
index 265b248..fc6eff3 100644
--- a/frontend/src/lib/play/admin/game_not_started.svelte
+++ b/frontend/src/lib/play/admin/game_not_started.svelte
@@ -4,10 +4,11 @@ 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';
+	import GrayButton from '$lib/components/buttons/gray.svelte';
 
 	export let game_pin: string;
 	export let players;
@@ -34,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'
@@ -49,47 +50,45 @@ 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"
+			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-col flex justify-center'>
+					<p class='mx-auto'>{$t('play_page.join_by_entering_code')}</p>
 					<ControllerCodeDisplay code={cqc_code} />
 				</div>
 			</div>
 		{/if}
 	</div>
-	<p class="text-3xl text-center">{$t('words.pin')}: {game_pin}</p>
-	<div class="flex justify-center w-full mt-4">
-		<ul class="list-disc pl-8">
-			{#if players.length > 0}
-				{#each players as player}
-					<li>
+	<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>
+			<GrayButton
+				disabled={players.length < 1}
+				on:click={() => {
+					socket.emit('start_game', '');
+				}}
+			>{$t('admin_page.start_game')}
+			</GrayButton>
+		</div>
+	</div>
+	<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'>
 						<span
-							class="hover:line-through"
+							class='hover:line-through text-lg'
 							on:click={() => {
 								kick_player(player.username);
 							}}>{player.username}</span
 						>
-						<!--					<button>{$t('words.kick')}</button>-->
-					</li>
-				{/each}
-			{/if}
-		</ul>
+					<!--					<button>{$t('words.kick')}</button>-->
+				</div>
+			{/each}
+		{/if}
 	</div>
-	{#if players.length > 0}
-		<div class="flex justify-center w-full mt-4">
-			<button
-				class="ml-4 admin-button"
-				id="startGame"
-				on:click={() => {
-					socket.emit('start_game', '');
-				}}
-				>{$t('admin_page.start_game')}
-			</button>
-		</div>
-	{/if}
+
 </div>