From c9f71d4efb919b076e17b1a866d5c7d999f81846 Mon Sep 17 00:00:00 2001
From: LuckyLaszlo <luke.perrey.dev@gmail.com>
Date: Fri, 13 Jan 2023 17:31:41 +0100
Subject: [PATCH] Game.svelte html input changes + makefile mini fix

---
 Makefile                                      |  4 +-
 .../api_front/src/pages/game/Game.svelte      | 39 ++++++++++++-------
 .../src/pages/game/GameSpectator.svelte       | 16 +++++---
 3 files changed, 37 insertions(+), 22 deletions(-)

diff --git a/Makefile b/Makefile
index 27e3080f..6749dd1b 100644
--- a/Makefile
+++ b/Makefile
@@ -1,5 +1,7 @@
 DOCKERCOMPOSEPATH=./srcs/docker-compose.yml
 
+all : up
+
 #dev allow hot reload.
 up:
 	@bash ./make_env.sh
@@ -11,8 +13,6 @@ start:
 	docker compose -f ${DOCKERCOMPOSEPATH} start
 	docker logs --follow nestjs
 
-all : up
-
 re: down up
 
 down:
diff --git a/srcs/requirements/svelte/api_front/src/pages/game/Game.svelte b/srcs/requirements/svelte/api_front/src/pages/game/Game.svelte
index d2d39d21..b45ab9bb 100644
--- a/srcs/requirements/svelte/api_front/src/pages/game/Game.svelte
+++ b/srcs/requirements/svelte/api_front/src/pages/game/Game.svelte
@@ -268,25 +268,34 @@
 					<button class="pong_button" on:click={fetchInvitations}>Show invitations</button>
 					<fieldset in:fly="{{ y: 10, duration: 1000 }}">
 						<legend>game options</legend>
-						<div>
+
+						<label for="multi_balls">
 							<input type="checkbox" id="multi_balls" name="multi_balls" bind:checked={options.multi_balls}>
-							<label for="multi_balls">Multiples balls</label>
-						</div>
-						<div>
+							Multiples balls
+						</label>
+
+						<label for="moving_walls">
 							<input type="checkbox" id="moving_walls" name="moving_walls" bind:checked={options.moving_walls}>
-							<label for="moving_walls">Moving walls</label>
-						</div>
+							Moving walls
+						</label>
+
 						<div>
-							<p>sound :</p>
-							<input type="radio" id="sound_on" name="sound_selector" bind:group={options.sound} value="on">
-							<label for="sound_on">on</label>
-							<input type="radio" id="sound_off" name="sound_selector" bind:group={options.sound} value="off">
-							<label for="sound_off">off</label>
-						</div>
-						<div>
-							<input type="checkbox" id="isSomeoneIsInvited" bind:checked={options.isSomeoneIsInvited}>
-							<label for="moving_walls">Invite a friend</label>
+							sound :
+							<label for="sound_on">
+								<input type="radio" id="sound_on" name="sound_selector" bind:group={options.sound} value="on">
+								on
+							</label>
+							<label for="sound_off">
+								<input type="radio" id="sound_off" name="sound_selector" bind:group={options.sound} value="off">
+								off
+							</label>
 						</div>
+
+						<label for="invitation_checkbox">
+							<input type="checkbox" id="invitation_checkbox" bind:checked={options.isSomeoneIsInvited}>
+							Invite a friend
+						</label>
+
 						{#if options.isSomeoneIsInvited}
 							<select bind:value={options.playerTwoUsername}>
 								{#each allUsers as user }
diff --git a/srcs/requirements/svelte/api_front/src/pages/game/GameSpectator.svelte b/srcs/requirements/svelte/api_front/src/pages/game/GameSpectator.svelte
index 557b35ae..d0ba4bc7 100644
--- a/srcs/requirements/svelte/api_front/src/pages/game/GameSpectator.svelte
+++ b/srcs/requirements/svelte/api_front/src/pages/game/GameSpectator.svelte
@@ -131,13 +131,19 @@
 			<fieldset>
 				<legend>options</legend>
 				<button class="pong_button" on:click={fetchMatchList}>Reload</button>
+
 				<div>
-					<p>sound :</p>
-					<input type="radio" id="sound_on" name="sound_selector" bind:group={sound} value="on">
-					<label for="sound_on">on</label>
-					<input type="radio" id="sound_off" name="sound_selector" bind:group={sound} value="off">
-					<label for="sound_off">off</label>
+					sound :
+					<label for="sound_on">
+						<input type="radio" id="sound_on" name="sound_selector" bind:group={sound} value="on">
+						on
+					</label>
+					<label for="sound_off">
+						<input type="radio" id="sound_off" name="sound_selector" bind:group={sound} value="off">
+						off
+					</label>
 				</div>
+
 			</fieldset>
 			{#if matchList.length !== 0}
 				<menu id="match_list">