little cleanup of the last commit

+ CSS adjustements

srcs/requirements/svelte/api_front/src/pages/game/Game.svelte

@@ -305,11 +305,11 @@
 
 		{#if gameState.matchStarted && !gameState.matchEnded}
 			<div class="div_game">
-				<button class="pong_button" on:click={leaveMatch}>forfeit</button>
+				<button class="pong_button margin_top" on:click={leaveMatch}>forfeit</button>
 			</div>
 		{:else if !gameState.matchStarted}
 			<div class="div_game">
-				<button class="pong_button" on:click={leaveMatch}>leave matchmaking</button>
+				<button class="pong_button margin_top" on:click={leaveMatch}>leave matchmaking</button>
 			</div>
 		{/if}
 	{/if}
@@ -470,6 +470,11 @@ canvas {
 }
 .avatar {
 	height: 5vw;
-	width: 5vw;
+    width: 5vw;
+	margin-top: 2vw;
+	margin-bottom: -2vw;
+}
+button.margin_top {
+	margin-top: 1vw;
 }
 </style>

srcs/requirements/svelte/api_front/src/pages/game/GameSpectator.svelte

@@ -144,7 +144,7 @@
 
 		{#if !gameState.matchEnded}
 			<div class="div_game">
-				<button class="pong_button" on:click={leaveMatch}>leave</button>
+				<button class="pong_button margin_top" on:click={leaveMatch}>leave</button>
 			</div>
 		{/if}
 	{/if}
@@ -171,11 +171,12 @@
 
 			</fieldset>
 			{#if matchList.length !== 0}
-				<menu id="match_list">
+				<!-- <menu id="match_list"> -->
 					{#each matchList as match}
 						<MatchOngoingElem match={match} on:click={(e) => initGameSpectator(match)} />
+						<br>
 					{/each}
-				</menu>
+				<!-- </menu> -->
 			{:else}
 				<p>no match ongoing</p>
 			{/if}
@@ -263,12 +264,16 @@ canvas {
 	font-size: 1vw;
 	padding: 10px;
 }
-#match_list {
-	font-family: 'Courier New', Courier, monospace;
-	font-size: 1vw;
-}
+/* #match_list {
+	text-align: center;
+} */
 .avatar {
 	height: 5vw;
 	width: 5vw;
+	margin-top: 2vw;
+	margin-bottom: -2vw;
+}
+button.margin_top {
+	margin-top: 1vw;
 }
 </style>

srcs/requirements/svelte/api_front/src/pages/profile/ProfileDisplay.svelte

@@ -38,7 +38,13 @@
 	}
 
 	#setting_button {
-		margin-top: 25px;
+		margin-top: 1vw;
+		font-family: "PressStart2P";
+		background-color: #618174;
+		border-color: #071013;
+		color: white;
+		border-width: 2px;
+		font-size: 1vw;
 	}
 
 </style>

srcs/requirements/svelte/api_front/src/pieces/GenerateUserDisplay.svelte

@@ -90,18 +90,23 @@
   div.outer{
     max-width: 960px;
     margin: 40px auto;
+    margin-top: 1vw;
   }
 
 /* The main part */
   main{
     max-width: 960px;
     margin: 40px auto;
+    margin-top: 1vw;
     text-align: center;
   }
 
   .avatar{
     width: 15vw;
     height: 15vw;
+	max-width: 130px;
+	max-height: 130px;
+	margin-bottom: 1vw;
   }
 
 /* The variable rich section */

srcs/requirements/svelte/api_front/src/pieces/MatchHistory.svelte

@@ -5,9 +5,9 @@
 	import type { MatchHistory } from "./Match";
 
 	export let user;
-	let matchList = [];
+	let matchList: MatchHistory[] = [];
+
 	onMount( async() => {
-		console.log(user.username + 'jjjjjjjjjjjjj')
 		matchList = await fetchMatchList(user.username);
 		console.log(matchList);
 		// matchList = await mockMatchList(user.username);
@@ -16,7 +16,6 @@
 	async function fetchMatchList(username: string)
 	{
 		let url = `http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/game/match/history?username=${username}`;
-		console.log(url + 'ffffffff')
 		return fetch(url)
 			.then((response) => {
 				if (!response.ok) {
@@ -96,7 +95,7 @@
 					<td>{match.playerTwoResult}</td>
 					{#await fetchAvatar(match.playerTwoUsername) then avatar}
 						<td>
-							<img class="avatar" src="{avatar}" alt="avatarOne">
+							<img class="avatar" src="{avatar}" alt="avatarTwo">
 							<br>
 							{match.playerTwoUsername}
 						</td>

srcs/requirements/svelte/api_front/src/pieces/MatchOngoingElem.svelte

@@ -2,6 +2,7 @@
 <script lang="ts">
 	import { onMount, onDestroy } from "svelte";
 	import { MatchOngoing, MatchOptions} from "./Match";
+	import { fetchAvatar } from "./utils.js";
 
 	export let match: MatchOngoing;
 
@@ -25,14 +26,31 @@
 </script>
 <!--  -->
 
-<li>
-	<button on:click>
-		'{match.playerOneUsername}' VS '{match.playerTwoUsername}'
-		<br/> [{matchOptionsString}]
-	</button>
-</li>
-
+	<div>
+		{#await fetchAvatar(match.playerOneUsername) then avatar}
+			<img class="avatar" src="{avatar}" alt="avatarOne">
+		{/await}
+		<button on:click class="match_elem">
+			'{match.playerOneUsername}' VS '{match.playerTwoUsername}'
+			<br/>
+			[{matchOptionsString}]
+		</button>
+		{#await fetchAvatar(match.playerTwoUsername) then avatar}
+			<img class="avatar" src="{avatar}" alt="avatarTwo">
+		{/await}
+	</div>
 
 <!--  -->
 <style>
+
+	.avatar {
+		width: 3vw;
+		height: 3vw;
+		margin-bottom: -1vw;
+	}
+
+	.match_elem {
+		margin: 1vw;
+	}
+
 </style>