Wip front match history

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

@@ -469,10 +469,7 @@ canvas {
 	padding: 10px;
 }
 .avatar {
-	min-height: 5vw;
-	min-width: 5vw;
-	
-	max-width: 5vw;
-	max-height: 5vw;
+	height: 5vw;
+	width: 5vw;
 }
 </style>

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

@@ -3,8 +3,8 @@
 	import { onMount, onDestroy } from "svelte";
 	import { fade, fly } from 'svelte/transition';
 
-	import MatchListElem from "../../pieces/MatchListElem.svelte";
-	import type { Match } from "../../pieces/Match";
+	import MatchOngoingElem from "../../pieces/MatchOngoingElem.svelte";
+	import type { MatchOngoing } from "../../pieces/Match";
 	import { fetchAvatar } from "../../pieces/utils";
 
 	import * as pongSpectator from "./client/pongSpectator";
@@ -22,7 +22,7 @@
 	//html boolean for pages
 	let hiddenGame = true;
 
-	let matchList: Match[] = [];
+	let matchList: MatchOngoing[] = [];
 	let watchGameStateInterval;
 	const watchGameStateIntervalRate = 142;
 	let timeoutArr = [];
@@ -51,7 +51,7 @@
 		resetPage();
 	};
 
-	async function initGameSpectator(match: Match)
+	async function initGameSpectator(match: MatchOngoing)
 	{
 		watchGameStateInterval = setInterval(watchGameState, watchGameStateIntervalRate);
 		pongSpectator.init(match.gameOptions, sound, gameAreaId, match.gameServerIdOfTheMatch);
@@ -173,7 +173,7 @@
 			{#if matchList.length !== 0}
 				<menu id="match_list">
 					{#each matchList as match}
-						<MatchListElem match={match} on:click={(e) => initGameSpectator(match)} />
+						<MatchOngoingElem match={match} on:click={(e) => initGameSpectator(match)} />
 					{/each}
 				</menu>
 			{:else}
@@ -268,10 +268,7 @@ canvas {
 	font-size: 1vw;
 }
 .avatar {
-	min-height: 5vw;
-	min-width: 5vw;
-	
-	max-width: 5vw;
-	max-height: 5vw;
+	height: 5vw;
+	width: 5vw;
 }
 </style>

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

@@ -2,6 +2,7 @@
 
 	import { onMount } from 'svelte';
 	import GenerateUserDisplay from '../../pieces/GenerateUserDisplay.svelte';
+	import MatchHistory from '../../pieces/MatchHistory.svelte';
 	import { push } from 'svelte-spa-router';
 
 	import Chat from '../../pieces/chat/Chat.svelte';
@@ -18,9 +19,9 @@
 <div class="background-pages">
 	<div class="outer">
 		{#if user !== undefined}
+			<button id="setting_button" on:click={() => (push('/profile/settings'))}>Profile Settings</button>
 			<GenerateUserDisplay user={user}/>
-			<button on:click={() => (push('/profile/settings'))}>Profile Settings</button>
-			<!-- Match History -->
+			<MatchHistory user={user}/>
 		{:else}
 			<h2>Sorry</h2>
 			<div>Failed to load current</div>
@@ -30,10 +31,14 @@
 
 <style>
 
-  div.outer{
-    max-width: 100%;
-    text-align: center;
-    padding-bottom: 10px;
-  }
+	div.outer{
+		max-width: 100%;
+		text-align: center;
+		padding-bottom: 10px;
+	}
+
+	#setting_button {
+		margin-top: 25px;
+	}
 
 </style>

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

@@ -6,6 +6,7 @@
 
 	import { onMount } from 'svelte';
 	import GenerateUserDisplay from '../../pieces/GenerateUserDisplay.svelte';
+	import MatchHistory from '../../pieces/MatchHistory.svelte';
 	import { fetchUser } from "../../pieces/utils";
 
 	export let params;
@@ -20,7 +21,7 @@
 <div class="background-pages">
 	{#if oneUser}
 		<GenerateUserDisplay user={oneUser}/>
-		<!-- Match history -->
+		<MatchHistory user={oneUser}/>
 	{:else}
 		<h2>Sorry</h2>
 		<div>Failed to load user {params.username}</div>

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

@@ -100,7 +100,8 @@
   }
 
   .avatar{
-    max-width: 150px;
+    width: 15vw;
+    height: 15vw;
   }
 
 /* The variable rich section */

srcs/requirements/svelte/api_front/src/pieces/Match.ts

@@ -2,9 +2,18 @@
 import type { MatchOptions } from "../pages/game/client/pongSpectator";
 export { MatchOptions } from "../pages/game/client/pongSpectator";
 
-export class Match {
+export class MatchOngoing {
 	gameServerIdOfTheMatch: string;
 	gameOptions: MatchOptions;
 	playerOneUsername: string;
 	playerTwoUsername: string;
 }
+
+export class MatchHistory {
+	id: number;
+	date: Date;
+	playerOneUsername: string;
+	playerTwoUsername: string;
+	playerOneResult: number;
+	playerTwoResult: number;
+}

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

@@ -0,0 +1,163 @@
+
+<script lang="ts">
+	import { onMount, onDestroy } from "svelte";
+	import { fetchAvatar } from "./utils.js";
+	import type { MatchHistory } from "./Match";
+
+	export let user;
+	let matchList: MatchHistory[] = [];
+
+	onMount( async() => {
+		matchList = await fetchMatchList(user.username);
+		console.log(matchList);
+		// matchList = await mockMatchList(user.username);
+	})
+
+	async function fetchMatchList(username: string)
+	{
+		let url = `http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/game/match/history/${username}`;
+
+		return fetch(url)
+			.then((response) => {
+				if (!response.ok) {
+					throw new Error("HTTP " + response.status);
+				}
+				return response.json();
+			})
+			.catch((error) => { 
+				console.log("catch fetchMatchList: ", error);
+				return [];
+			});
+	}
+
+	async function mockMatchList(username?: string)
+	{
+		return [
+			{
+				playerOneUsername: "hulamy",
+				playerTwoUsername: "lperrey",
+				playerOneResult: 5,
+				playerTwoResult: 11,
+				date: new Date()
+			},
+			{
+				playerOneUsername: "hulamy",
+				playerTwoUsername: "lperrey",
+				playerOneResult: 14,
+				playerTwoResult: 12,
+				date: new Date()
+			},
+			{
+				playerOneUsername: "hulamy",
+				playerTwoUsername: "lperrey",
+				playerOneResult: 0,
+				playerTwoResult: 0,
+				date: new Date()
+			},
+			{
+				playerOneUsername: "hulamy",
+				playerTwoUsername: "lperrey",
+				playerOneResult: 3,
+				playerTwoResult: 0,
+				date: new Date()
+			},
+		]
+	}
+</script>
+
+<br />
+<div class="background-pages">
+<div class="principal-div">
+	<table class="stats-table">
+		<thead>
+			<tr>
+				<th>#</th>
+				<th>Player One</th>
+				<th></th>
+				<th>VS</th>
+				<th></th>
+				<th>Player Two</th>
+				<th>Result</th>
+			</tr>
+		</thead>
+		<tbody>
+			{#each matchList as match, i}
+				<tr>
+					<th>{i + 1}</th>
+					{#await fetchAvatar(match.playerOneUsername) then avatar}
+						<td>
+							<img class="avatar" src="{avatar}" alt="avatarOne">
+							<br>
+							{match.playerOneUsername}
+						</td>
+					{/await}
+					<td>{match.playerOneResult}</td>
+					<td>VS</td>
+					<td>{match.playerTwoResult}</td>
+					{#await fetchAvatar(match.playerTwoUsername) then avatar}
+						<td>
+							<img class="avatar" src="{avatar}" alt="avatarOne">
+							<br>
+							{match.playerTwoUsername}
+						</td>
+					{/await}
+					{#if match.playerOneResult === match.playerTwoResult}
+						<th>DRAW</th>
+					{:else if (user.username === match.playerOneUsername && match.playerOneResult > match.playerTwoResult)
+					|| (user.username === match.playerTwoUsername && match.playerTwoResult > match.playerOneResult)}
+						<th>WIN</th>
+					{:else}
+						<th>LOSE</th>
+					{/if}
+				</tr>
+			{/each}
+		</tbody>
+	</table>
+</div>
+</div>
+
+<style>
+
+	.avatar {
+		width: 3vw;
+		height: 3vw;
+	}
+
+	.principal-div {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+	}
+	.stats-table {
+		margin-left: auto;
+		margin-right: auto;
+		font-size: 1vw;
+		min-width: 400px;
+	}
+
+	.stats-table thead tr {
+		background-color: #618174;
+		color: #ffffff;
+	}
+
+	.stats-table th,
+	.stats-table td {
+		padding: 12px 15px;
+		size: 10vw;
+		max-width: 10vw;
+		overflow-wrap: break-word;
+	}
+
+	.stats-table tbody tr {
+		border-bottom: 1px solid #dddddd;
+	}
+
+	.stats-table tbody tr:nth-of-type(even) {
+		background-color: #555;
+	}
+
+	.stats-table tbody tr:last-of-type {
+		border-bottom: 2px solid #618174;
+	}
+</style>
+

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

@@ -1,9 +1,9 @@
 
 <script lang="ts">
 	import { onMount, onDestroy } from "svelte";
-	import { Match, MatchOptions} from "./Match";
+	import { MatchOngoing, MatchOptions} from "./Match";
 
-	export let match: Match;
+	export let match: MatchOngoing;
 
 	let matchOptionsString = "";