42/42_INT_14_transcendence
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fetchUser/Avatar() with optionnal username param

Browse Source 
+ miscs smalls changes
This commit is contained in:
LuckyLaszlo
2023-01-16 18:00:19 +01:00
parent b9e93bda17
commit 36f13cb5af
6 changed files with 21 additions and 131 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
srcs/requirements/svelte/api_front/.env
View File

@@ -1,2 +0,0 @@
WEBSITE_HOST=transcendance
WEBSITE_PORT=8080

4
srcs/requirements/svelte/api_front/src/pages/game/Game.svelte
View File

@@ -14,8 +14,8 @@
let user;
let allUsers;
let playerOneAvatar;
let playerTwoAvatar;
let playerOneAvatar = "";
let playerTwoAvatar = "";
//Game's stuff
const options = new pong.InitOptions();

6
srcs/requirements/svelte/api_front/src/pages/game/GameSpectator.svelte
View File

@@ -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";

112
srcs/requirements/svelte/api_front/src/pieces/Canvas.svelte
View File

@@ -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>

4
srcs/requirements/svelte/api_front/src/pieces/GenerateUserDisplay.svelte
View File

@@ -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:

24
srcs/requirements/svelte/api_front/src/pieces/utils.ts
View File

@@ -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 [];