rename to snake_case

frontend/src/lib/admin.svelte

@@ -12,7 +12,7 @@ SPDX-License-Identifier: MPL-2.0
 	import Controls from '$lib/play/admin/controls.svelte';
 	import Question from '$lib/play/admin/question.svelte';
 	import { SocketGameControls } from '$lib/play/admin/socket_game_controls.ts';
-	import { GameState } from '$lib/play/admin/game_state.ts';
+	import type { IGameState } from '$lib/play/admin/game_state.ts';
 
 	const { t } = getLocalization();
 	const default_colors = ['#D6EDC9', '#B07156', '#7F7057', '#4E6E58'];
@@ -23,14 +23,10 @@ SPDX-License-Identifier: MPL-2.0
 	interface Props {
 		game_token: string;
 		bg_color: string;
-		game_state: GameState;
+		game_state: IGameState;
 	}
 
-	let {
+	let { game_token, bg_color, game_state = $bindable() }: Props = $props();
-		game_token,
-		bg_color,
-		game_state = $bindable()
-	}: Props = $props();
 
 	socket.on('get_question_results', () => {
 		console.log('get_question_results');
@@ -89,33 +85,41 @@ SPDX-License-Identifier: MPL-2.0
 </script>
 
 {#if game_state.control_visible}
-	<Controls
+	<Controls {bg_color} {socket_game_controls} {game_token} bind:game_state />
-		{bg_color}
-		{socket_game_controls}
-		{game_token}
-		bind:game_state
-	/>
 {/if}
 {#if game_state.timer_res !== '0' && game_state.selected_question >= 0}
 	<span
 		class="fixed top-0 bg-red-500 h-8 transition-all"
 		class:mt-10={game_state.control_visible}
-		style="width: {(100 / parseInt(game_state.quiz_data.questions[game_state.selected_question].time)) *
+		style="width: {(100 /
+			parseInt(game_state.quiz_data.questions[game_state.selected_question].time)) *
 			parseInt(game_state.timer_res)}vw"
 	></span>
 {/if}
 
-<div class="w-full h-full" class:pt-28={game_state.control_visible} class:pt-12={!game_state.control_visible}>
+<div
+	class="w-full h-full"
+	class:pt-28={game_state.control_visible}
+	class:pt-12={!game_state.control_visible}
+>
 	{#if game_state.timer_res !== undefined && !final_results_clicked && !game_state.question_results}
 		<!-- Question is shown -->
 		{#if game_state.quiz_data.questions[game_state.selected_question].type === QuizQuestionType.SLIDE}
 			{#await import('$lib/play/admin/slide.svelte')}
 				<Spinner my_20={false} />
 			{:then c}
-				<c.default question={game_state.quiz_data.questions[game_state.selected_question]} />
+				<c.default
+					question={game_state.quiz_data.questions[game_state.selected_question]}
+				/>
 			{/await}
 		{:else}
-			<Question quiz_data={game_state.quiz_data} selected_question={game_state.selected_question} timer_res={game_state.timer_res} answer_count={game_state.answer_count} default_colors={default_colors} />
+			<Question
+				quiz_data={game_state.quiz_data}
+				selected_question={game_state.selected_question}
+				timer_res={game_state.timer_res}
+				answer_count={game_state.answer_count}
+				{default_colors}
+			/>
 		{/if}
 	{/if}
 	<br />

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

@@ -8,7 +8,7 @@ SPDX-License-Identifier: MPL-2.0
 	import { QuizQuestionType } from '$lib/quiz_types';
 	import { getLocalization } from '$lib/i18n';
 	import { SocketGameControls } from '$lib/play/admin/socket_game_controls.ts';
-	import { GameState } from '$lib/play/admin/game_state.ts';
+	import type { GameState } from '$lib/play/admin/game_state.ts';
 
 	interface Props {
 		bg_color: string;
@@ -17,12 +17,7 @@ SPDX-License-Identifier: MPL-2.0
 		game_state: GameState;
 	}
 
-	let {
+	let { bg_color, socket_game_controls, game_token, game_state = $bindable() }: Props = $props();
-		bg_color,
-		socket_game_controls,
-		game_token,
-		game_state = $bindable()
-	}: Props = $props();
 
 	const { t } = getLocalization();
 
@@ -44,7 +39,9 @@ SPDX-License-Identifier: MPL-2.0
 	<div class="justify-self-end ml-auto mr-0 col-start-3 col-end-3">
 		{#if game_state.selected_question + 1 === game_state.quiz_data.questions.length && ((game_state.timer_res === '0' && game_state.question_results !== null) || game_state.quiz_data?.questions?.[game_state.selected_question]?.type === QuizQuestionType.SLIDE)}
 			{#if JSON.stringify(game_state.final_results) === JSON.stringify([null])}
-				<button onclick={() => socket_game_controls.get_final_results()} class="admin-button"
+				<button
+					onclick={() => socket_game_controls.get_final_results()}
+					class="admin-button"
 					>{$t('admin_page.get_final_results')}
 				</button>
 			{/if}
@@ -55,31 +52,50 @@ SPDX-License-Identifier: MPL-2.0
 						socket_game_controls.set_question_number(game_state.selected_question + 1);
 					}}
 					class="admin-button"
-					>{$t('admin_page.next_question', { question: game_state.selected_question + 2 })}
+					>{$t('admin_page.next_question', {
+						question: game_state.selected_question + 2
+					})}
 				</button>
 			{/if}
 			{#if game_state.question_results === null && game_state.selected_question !== -1}
 				{#if game_state.quiz_data.questions[game_state.selected_question].type === QuizQuestionType.SLIDE}
 					<button
 						onclick={() => {
-							socket_game_controls.set_question_number(game_state.selected_question + 1);
+							socket_game_controls.set_question_number(
+								game_state.selected_question + 1
+							);
 						}}
 						class="admin-button"
-						>{$t('admin_page.next_question', { question: game_state.selected_question + 2 })}
+						>{$t('admin_page.next_question', {
+							question: game_state.selected_question + 2
+						})}
 					</button>
 				{:else if game_state.quiz_data.questions[game_state.selected_question]?.hide_results === true}
 					<button
 						onclick={() => {
-							socket_game_controls.get_question_results(game_token, game_state.shown_question_now);
+							socket_game_controls.get_question_results(
+								game_token,
+								game_state.shown_question_now
+							);
 							setTimeout(() => {
-								socket_game_controls.set_question_number(game_state.selected_question + 1);
+								socket_game_controls.set_question_number(
+									game_state.selected_question + 1
+								);
 							}, 200);
 						}}
 						class="admin-button"
-						>{$t('admin_page.next_question', { question: game_state.selected_question + 2 })}
+						>{$t('admin_page.next_question', {
+							question: game_state.selected_question + 2
+						})}
 					</button>
 				{:else}
-					<button onclick={() => socket_game_controls.get_question_results(game_token, game_state.shown_question_now)} class="admin-button"
+					<button
+						onclick={() =>
+							socket_game_controls.get_question_results(
+								game_token,
+								game_state.shown_question_now
+							)}
+						class="admin-button"
 						>{$t('admin_page.show_results')}
 					</button>
 				{/if}
@@ -91,7 +107,9 @@ SPDX-License-Identifier: MPL-2.0
 						socket_game_controls.set_question_number(game_state.selected_question + 1);
 					}}
 					class="admin-button"
-					>{$t('admin_page.next_question', { question: game_state.selected_question + 2 })}
+					>{$t('admin_page.next_question', {
+						question: game_state.selected_question + 2
+					})}
 				</button>
 			{:else}
 				<button onclick={show_solutions} class="admin-button"

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

@@ -11,7 +11,7 @@ SPDX-License-Identifier: MPL-2.0
 	import GrayButton from '$lib/components/buttons/gray.svelte';
 	import { fade } from 'svelte/transition';
 	import { SocketGameControls } from '$lib/play/admin/socket_game_controls.ts';
-	import { GameState } from '$lib/play/admin/game_state';
+	import type { GameState } from '$lib/play/admin/game_state';
 
 	interface Props {
 		game_pin: string;
@@ -20,7 +20,12 @@ SPDX-License-Identifier: MPL-2.0
 		cqc_code: string;
 	}
 
-	let { game_pin, game_state = $bindable(), socket_game_controls, cqc_code = $bindable() }: Props = $props();
+	let {
+		game_pin,
+		game_state = $bindable(),
+		socket_game_controls,
+		cqc_code = $bindable()
+	}: Props = $props();
 
 	let fullscreen_open = $state(false);
 	const { t } = getLocalization();
@@ -96,7 +101,7 @@ SPDX-License-Identifier: MPL-2.0
 			<GrayButton
 				disabled={game_state.players.length < 1}
 				onclick={() => {
-					socket_game_controls.start_game()
+					socket_game_controls.start_game();
 				}}
 				>{$t('admin_page.start_game')}
 			</GrayButton>

frontend/src/lib/play/admin/game_state.ts

@@ -3,7 +3,7 @@
 // SPDX-License-Identifier: MPL-2.0
 
 import type { Player, PlayerAnswer } from '$lib/admin.ts';
-import { QuizData } from '$lib/quiz_types';
+import type { QuizData } from '$lib/quiz_types';
 
 /**
  * Interface that include all the game states for the admin page.

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

@@ -16,8 +16,9 @@ SPDX-License-Identifier: MPL-2.0
 	import GrayButton from '$lib/components/buttons/gray.svelte';
 	import { page } from '$app/state';
 	import { SocketGameControls } from '$lib/play/admin/socket_game_controls.ts';
-	import { IGameState } from '$lib/play/admin/game_state.ts';
+	import type { IGameState } from '$lib/play/admin/game_state.ts';
-	import { QuizQuestionType } from '$lib/quiz_types';
+	import { QuizQuestionType, type QuizData } from '$lib/quiz_types';
+	import type { Player, PlayerAnswer } from '$lib/admin';
 
 	navbarVisible.visible = false;
 
@@ -61,31 +62,37 @@ SPDX-License-Identifier: MPL-2.0
 			this.answer_count = $state(0);
 		}
 
-		isGameReadyToStart(): boolean {
+		is_game_ready_to_start(): boolean {
 			return !this.game_started && this.players.length > 0;
 		}
 
-		isGameStarting(): boolean {
+		is_game_starting(): boolean {
 			return this.game_started && this.selected_question === -1;
 		}
 
-		isActiveQuestionLastQuestion(): boolean {
+		is_active_question_last_question(): boolean {
 			return this.selected_question + 1 === this.quiz_data.questions.length;
 		}
 
-		isQuestionResultsVisible(): boolean {
+		is_question_results_visible(): boolean {
-			return this.timer_res === '0' && this.question_results !== null
+			return this.timer_res === '0' && this.question_results !== null;
 		}
 
-		isActiveQuestionSlide(): boolean {
+		is_active_question_slide(): boolean {
-			return this.quiz_data?.questions?.[this.selected_question]?.type === QuizQuestionType.SLIDE;
+			return (
+				this.quiz_data?.questions?.[this.selected_question]?.type === QuizQuestionType.SLIDE
+			);
 		}
 
-		isQuestionEnded(): boolean {
+		is_question_ended(): boolean {
-			return this.timer_res === '0' && this.question_results === null && this.selected_question !== -1;
+			return (
+				this.timer_res === '0' &&
+				this.question_results === null &&
+				this.selected_question !== -1
+			);
 		}
 
-		isQuestionStillOngoing(): boolean {
+		is_question_still_ongoing(): boolean {
 			return this.timer_res !== '0' && this.selected_question !== -1;
 		}
 	}
@@ -100,7 +107,6 @@ SPDX-License-Identifier: MPL-2.0
 	let warnToLeave = true;
 	let export_token = $state(undefined);
 
-
 	const socket_game_controls: SocketGameControls = new SocketGameControls(socket);
 	let game_state: GameState = $state(new GameState(game_token));
 
@@ -191,38 +197,41 @@ SPDX-License-Identifier: MPL-2.0
 				window.matchMedia('(prefers-color-scheme: dark)').matches);
 	}
 
-	let bg_color = $derived(game_state.quiz_data ? game_state.quiz_data.background_color : undefined);
+	let bg_color = $derived(
-	let bg_image = $derived(game_state.quiz_data ? game_state.quiz_data.background_image : undefined);
+		game_state.quiz_data ? game_state.quiz_data.background_color : undefined
+	);
+	let bg_image = $derived(
+		game_state.quiz_data ? game_state.quiz_data.background_image : undefined
+	);
 	let results_saved = $state(false);
 
-	let show_final_results = $derived(JSON.stringify(game_state.final_results) !== JSON.stringify([null]));
+	let show_final_results = $derived(
+		JSON.stringify(game_state.final_results) !== JSON.stringify([null])
+	);
 
 	// This function in called in every keyboard event in this page
 	const next_action = (e: KeyboardEvent) => {
-		if((e.key in ["Enter", " "])) return; // Don't catch events other than enter or spacebar
+		if (e.key in ['Enter', ' ']) return; // Don't catch events other than enter or spacebar
 
-		if(game_state.isGameReadyToStart()) {
+		if (game_state.is_game_ready_to_start()) {
-			socket_game_controls.start_game()
+			socket_game_controls.start_game();
-		}
+		} else if (
-
+			game_state.is_active_question_last_question() &&
-		else if(game_state.isActiveQuestionLastQuestion() && (game_state.isQuestionResultsVisible() || game_state.isActiveQuestionSlide())){
+			(game_state.is_question_results_visible() || game_state.is_active_question_slide())
+		) {
 			socket_game_controls.get_final_results();
-		}
+		} else if (
-
+			game_state.is_game_starting() ||
-		else if(game_state.isGameStarting() || game_state.isQuestionResultsVisible() || game_state.isActiveQuestionSlide()) {
+			game_state.is_question_results_visible() ||
+			game_state.is_active_question_slide()
+		) {
 			socket_game_controls.set_question_number(game_state.selected_question + 1);
-		}
+		} else if (game_state.is_question_still_ongoing()) {
-
-		else if(game_state.isQuestionStillOngoing()) {
 			socket_game_controls.show_solutions();
 			game_state.timer_res = '0';
-		}
+		} else if (game_state.is_question_ended()) {
-
-		else if(game_state.isQuestionEnded()) {
 			socket_game_controls.get_question_results(game_token, game_state.shown_question_now);
-		}
+		} else {
-
-		else {
 			console.warn('No action available for this event');
 		}
 	};
@@ -294,11 +303,7 @@ SPDX-License-Identifier: MPL-2.0
 			cqc_code={page.url.searchParams.get('cqc_code')}
 		/>
 	{:else}
-		<SomeAdminScreen
+		<SomeAdminScreen {game_token} {bg_color} bind:game_state />
-			{game_token}
-			{bg_color}
-			bind:game_state
-		/>
 	{/if}
 </div>
 <a