From 36f13cb5af20505b45b32201d9525af2495a2015 Mon Sep 17 00:00:00 2001
From: LuckyLaszlo <luke.perrey.dev@gmail.com>
Date: Mon, 16 Jan 2023 18:00:19 +0100
Subject: [PATCH] fetchUser/Avatar() with optionnal username param + miscs
 smalls changes

---
 srcs/requirements/svelte/api_front/.env       |   2 -
 .../api_front/src/pages/game/Game.svelte      |   4 +-
 .../src/pages/game/GameSpectator.svelte       |   6 +-
 .../svelte/api_front/src/pieces/Canvas.svelte | 112 ------------------
 .../src/pieces/GenerateUserDisplay.svelte     |   4 +-
 .../svelte/api_front/src/pieces/utils.ts      |  24 ++--
 6 files changed, 21 insertions(+), 131 deletions(-)
 delete mode 100644 srcs/requirements/svelte/api_front/.env
 delete mode 100644 srcs/requirements/svelte/api_front/src/pieces/Canvas.svelte

diff --git a/srcs/requirements/svelte/api_front/.env b/srcs/requirements/svelte/api_front/.env
deleted file mode 100644
index 1b450684..00000000
--- a/srcs/requirements/svelte/api_front/.env
+++ /dev/null
@@ -1,2 +0,0 @@
-WEBSITE_HOST=transcendance
-WEBSITE_PORT=8080
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 3cf3590f..1b28fd70 100644
--- a/srcs/requirements/svelte/api_front/src/pages/game/Game.svelte
+++ b/srcs/requirements/svelte/api_front/src/pages/game/Game.svelte
@@ -14,8 +14,8 @@
 	let user;
 	let allUsers;
 
-	let playerOneAvatar;
-	let playerTwoAvatar;
+	let playerOneAvatar = "";
+	let playerTwoAvatar = "";
 
 	//Game's stuff
 	const options = new pong.InitOptions();
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 033c25eb..9d538c88 100644
--- a/srcs/requirements/svelte/api_front/src/pages/game/GameSpectator.svelte
+++ b/srcs/requirements/svelte/api_front/src/pages/game/GameSpectator.svelte
@@ -5,13 +5,13 @@
 
 	import MatchListElem from "../../pieces/MatchListElem.svelte";
 	import type { Match } from "../../pieces/Match";
-	import { fetchUser, fetchAllUsers, fetchAvatar } from "../../pieces/utils";
+	import { fetchAvatar } from "../../pieces/utils";
 
 	import * as pongSpectator from "./client/pongSpectator";
 	import { gameState } from "./client/ws";
 
-	let playerOneAvatar;
-	let playerTwoAvatar;
+	let playerOneAvatar = "";
+	let playerTwoAvatar = "";
 
 	//Game's stuff
 	const gameAreaId = "game_area";
diff --git a/srcs/requirements/svelte/api_front/src/pieces/Canvas.svelte b/srcs/requirements/svelte/api_front/src/pieces/Canvas.svelte
deleted file mode 100644
index 5fd1264a..00000000
--- a/srcs/requirements/svelte/api_front/src/pieces/Canvas.svelte
+++ /dev/null
@@ -1,112 +0,0 @@
-<script lang="ts">
-	import { onMount } from 'svelte';
-  // rename to PotatoCanvas?
-
-	let canvas;
-  // let img;
-  let loaded = false;
-// i feel like they told me not to do this, new Image(), isn't there another way?
-  // never mind they do seem to do this shit...
-  // no idea if this should be in onMount...
-  const img = new Image();
-  img.src = 'img/potato_logo.png';
-  img.onload = () => {
-    loaded = true;
-    // not sure if i'll use this...
-  }
-
-  // $: scaleRatio = window.innerWidth / 10;
-  $: scaleRatio = 30;
-  $: nPotoatoRows = Math.floor(window.innerHeight / 200);
-  $: nPotoatoCols = Math.floor(window.innerWidth / 200);
-  // $: spacing = (canvas.height - (img.height / scaleRatio * (nPotoatoRows - 1) )) / nPotoatoRows;
-
-
-  // apparently i might need to move all my reactive statements outside the onMount... not sure why...
-
-
-
-  onMount(() => {
-
-    // in this on mount we will set the canvas and the img
-
-		const ctx = canvas.getContext('2d');
-		// let frame = requestAnimationFrame(loop);
-    ctx.width = window.innerWidth;
-    ctx.height = window.innerHeight;
-
-    // console.log(nPotoatoCols);
-
-    // img = fetch('img/potato_logo.png');
-
-    // Moving the IMG stuff from her out of mount
-
-    // let nPotoatoRows = 4;
-    // $: nPotoatoRows = Math.floor(canvas.height / 200);
-    let spacing = (canvas.height - (img.height / scaleRatio * (nPotoatoRows - 1) )) / nPotoatoRows;
-    // $: spacing = (canvas.height - (img.height / scaleRatio * (nPotoatoRows - 1) )) / nPotoatoRows;
-    // i prolly need a number of potatos X and Y vars
-
-
-
-    // i could do it so there are more potatos than can fit on the screen, translate them over, and then after some point
-    // shift them all back to the next position they would be in, so it looks like they keep going to infinity
-
-    // let dx = 1.5;
-    let dx = 1;
-    // let dy = -0.5;
-    let dy = -1;
-    // let startX = spacing;
-    // let startY = spacing;
-    // let startX = 0;
-    // let startY = 0;
-    let startX = -(spacing * 2.5);
-    let startY = -(spacing * 2.5);
-    let x = startX;
-    let y = startY;
-
-    let frame = requestAnimationFrame(loop);
-    // i don't think i need t...
-		function loop(t) {
-      // yea ok a loop in a loop in a loop, horrible idea...
-      ctx.clearRect(0, 0, canvas.width, canvas.height);
-      // this has to be at the end, no?
-      frame = requestAnimationFrame(loop);
-      // if (x > 900) {
-      //   x = startX;
-      //   y = startY;
-      // }
-      // else {
-      //   x += dx;
-      //   y += dy;
-      // }
-
-      for (let i = 0; i < 20; i++) {
-        for (let j = 0; j < 10; j++) {
-          // ctx.drawImage(img, x + (i * spacing * 2), y + (j * spacing), img.width / scaleRatio, img.height / scaleRatio);
-          ctx.drawImage(img, x + (i * spacing), y + (j * spacing), img.width / scaleRatio, img.height / scaleRatio);
-        }
-      }
-
-		}
-
-		return () => {
-			cancelAnimationFrame(frame);
-		};
-	});
-
-</script>
-
-<canvas
-	bind:this={canvas}
-	width={window.innerWidth}
-	height={window.innerHeight}
-></canvas>
-
-<style>
-	canvas {
-		width: 100%;
-		height: 100%;
-		background-color: #666;
-	}
-</style>
diff --git a/srcs/requirements/svelte/api_front/src/pieces/GenerateUserDisplay.svelte b/srcs/requirements/svelte/api_front/src/pieces/GenerateUserDisplay.svelte
index 95fcc5ee..d8a9904d 100644
--- a/srcs/requirements/svelte/api_front/src/pieces/GenerateUserDisplay.svelte
+++ b/srcs/requirements/svelte/api_front/src/pieces/GenerateUserDisplay.svelte
@@ -62,11 +62,11 @@
 
 <!-- is this if excessive? -->
 <div class="outer">
-  {#if user !== undefined}
+  {#if user}
   <main>
     <!-- <img class="icon" src="img/default_user_icon.png" alt="default user icon"> -->
     <!-- <img class="icon" src="{user.image_url}" alt="default user icon"> -->
-    <img class="avatar" src="{avatar}" alt="default user icon">
+    <img class="avatar" src="{avatar}" alt="user avatar">
     <div class="error">{errors.avatar}</div>
     <div class="username">{user.username}</div>
     <div class="rank">Rank:
diff --git a/srcs/requirements/svelte/api_front/src/pieces/utils.ts b/srcs/requirements/svelte/api_front/src/pieces/utils.ts
index bc498c49..e193b039 100644
--- a/srcs/requirements/svelte/api_front/src/pieces/utils.ts
+++ b/srcs/requirements/svelte/api_front/src/pieces/utils.ts
@@ -1,7 +1,12 @@
 
-export async function fetchAvatar(username: string)
+export async function fetchAvatar(username?: string)
 {
-	return fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/user/avatar?username=${username}`)
+	let url = `http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/user/avatar`;
+	if (username) {
+		url += `?username=${username}`;
+	}
+
+	return fetch(url)
 		.then((response) => {
 			if (!response.ok) {
 				throw new Error("HTTP " + response.status);
@@ -17,18 +22,20 @@ export async function fetchAvatar(username: string)
 		});
 }
 
-export async function fetchUser()
+export async function fetchUser(username?: string)
 {
-	return fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/user`)
+	let url = `http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/user`;
+	if (username) {
+		url += `?username=${username}`;
+	}
+
+	return fetch(url)
 		.then((response) => {
 			if (!response.ok) {
 				throw new Error("HTTP " + response.status);
 			}
 			return response.json();
 		})
-		.then((body) => {
-			return body;
-		})
 		.catch((error) => { 
 			console.log("catch fetchUser: ", error);
 			return null;
@@ -44,9 +51,6 @@ export async function fetchAllUsers()
 			}
 			return response.json();
 		})
-		.then((body) => {
-			return body;
-		})
 		.catch((error) => { 
 			console.log("catch fetchAllUsers: ", error);
 			return [];