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

merge with master

Browse Source
This commit is contained in:
simplonco
2023-01-16 07:22:51 +01:00
parent cc47a64b2a 102d03c4bb
commit 4cfac6bd25
17 changed files with 384 additions and 327 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
srcs/requirements/svelte/api_front/public/global.css
View File

@@ -12,11 +12,23 @@ body {
box-sizing: border-box;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
/* tmp? */
background: bisque;
background-color: #333;
display: flex;
flex-direction: column;
}
@font-face {
font-family: "Bit5x3";
src:
url("./fonts/Bit5x3.woff2") format("woff2"),
local("Bit5x3"),
url("./fonts/Bit5x3.woff") format("woff");
font-weight: normal;
font-style: normal;
font-display: swap;
}
a {
color: rgb(0,100,200);
text-decoration: none;
@@ -30,6 +42,13 @@ a:visited {
color: rgb(0,80,160);
}
.background-pages {
background-color: #333;
font-family: "Bit5x3";
font-size: 2vw;
color: white;
}
label {
display: block;
}

6
srcs/requirements/svelte/api_front/src/App.svelte
View File

@@ -1,7 +1,9 @@
<script lang="ts">
import Router, { replace } from "svelte-spa-router";
import { primaryRoutes } from "./routes/primaryRoutes.js";
import { location } from 'svelte-spa-router';
import Chat from './pieces/chat/Chat.svelte';
import Header from './pieces/Header.svelte';
const conditionsFailed = (event) => {
console.error('conditionsFailed event', event.detail);
@@ -13,6 +15,10 @@
</script>
{#if ($location !== '/')}
<Header/>
{/if}
<Chat />
<Router routes={primaryRoutes} on:conditionsFailed={conditionsFailed}/>

27
srcs/requirements/svelte/api_front/src/pages/NotFound.svelte
View File

@@ -2,9 +2,24 @@
import { link } from "svelte-spa-router";
</script>
<h1>We are sorry!</h1>
<p>This isn't a url that we use.</p>
<p>Go home you're drunk.</p>
<a href="/" use:link>
<h2>Take me home →</h2>
</a>
<div class="background-pages">
<div class="content">
<h1>We are sorry!</h1>
<p>This isn't a url that we use.</p>
<p>Go home you're drunk.</p>
</div>
</div>
<style>
.content {
left: 50%;
position: absolute;
-ms-transform: translateX(-50%);
transform: translateX(-50%);
}
</style>

18
srcs/requirements/svelte/api_front/src/pages/SplashPage.svelte
View File

@@ -42,16 +42,6 @@
</div>
<style>
@font-face {
font-family: "Bit5x3";
src:
url("/fonts/Bit5x3.woff2") format("woff2"),
local("Bit5x3"),
url("/fonts/Bit5x3.woff") format("woff");
font-weight: normal;
font-style: normal;
font-display: swap;
}
.container {
height: 100%;
@@ -78,8 +68,8 @@
.button-in {
background-color: #8c0000;
border-color: black;
border-width: 4px;
border-color: #071013;
border-width: 2px;
color: white;
font-family: "Bit5x3";
font-size: x-large;
@@ -88,8 +78,8 @@
.button-out {
background-color: #008c8c;
border-color: black;
border-width: 4px;
border-color: #071013;
border-width: 2px;
color: white;
font-family: "Bit5x3";
font-size: x-large;

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

@@ -3,7 +3,6 @@
import { onMount, onDestroy } from "svelte";
import { fade, fly } from 'svelte/transition';
import Header from '../../pieces/Header.svelte';
import { fetchUser, fetchAllUsers, fetchAvatar } from "../../pieces/utils";
import * as pong from "./client/pong";
@@ -24,7 +23,6 @@
//boolean for html page
let hiddenGame = true;
let optionsAreNotSet = true;
let showGameOptions = true;
let showInvitations = false;
let showError = false;
@@ -36,14 +34,15 @@
const watchGameStateIntervalRate = 142;
let watchMatchStartInterval;
const watchMatchStartIntervalRate = 111;
let timeoutArr = [];
onMount( async() => {
user = await fetchUser();
allUsers = await fetchAllUsers();
if (!user) {
showError = true;
errorMessage = "User load failed";
showError = true;
return;
}
@@ -58,12 +57,14 @@
onDestroy( async() => {
clearInterval(watchMatchStartInterval);
clearInterval(watchGameStateInterval);
timeoutArr.forEach((value) => {
clearTimeout(value);
});
pong.destroy();
})
function resetPage() {
hiddenGame = true;
optionsAreNotSet = true;
setHiddenGame(true);
showGameOptions = true;
showInvitations = false;
showError = false;
@@ -74,11 +75,10 @@
const initGame = async() =>
{
optionsAreNotSet = false;
showWaitPage = true;
const matchOptions = pong.computeMatchOptions(options);
try {
const response = await fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/game/ticket`, {
fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/game/ticket`, {
method : "POST",
headers : {'Content-Type': 'application/json'},
body : JSON.stringify({
@@ -87,39 +87,47 @@
gameOptions : matchOptions,
isGameIsWithInvitation : options.isSomeoneIsInvited
})
});
console.log("status : " + response.status);
const responseBody = await response.json();
const token : string = responseBody.token;
showWaitPage = false;
if (response.ok && token)
{
watchMatchStartInterval = setInterval(watchMatchStart, watchMatchStartIntervalRate);
watchGameStateInterval = setInterval(watchGameState, watchGameStateIntervalRate);
pong.init(matchOptions, options, gameAreaId, token);
hiddenGame = false;
})
.then((response) => {
if (!response.ok) {
throw new Error(`HTTP ${response.status}`);
}
else
return response.json();
})
.then((body) => {
if (body.token)
{
console.log(responseBody);
console.log("On refuse le ticket");
errorMessage = responseBody.message;
showError = true;
options.reset(user.username);
setTimeout(() => {
optionsAreNotSet = true;
showError = false;
errorMessage = "";
}, 5000);
if (options.isSomeoneIsInvited) {
options.reset(user.username);
fetchInvitations();
}
else {
watchMatchStartInterval = setInterval(watchMatchStart, watchMatchStartIntervalRate);
watchGameStateInterval = setInterval(watchGameState, watchGameStateIntervalRate);
pong.init(matchOptions, options, gameAreaId, body.token);
setHiddenGame(false);
}
}
} catch (e) {
console.log(e);
}
else {
throw new Error(`body.token undefined`);
}
})
.catch((error) => {
console.log("catch initGame: ", error);
errorMessage = "Get ticket error";
showError = true;
options.reset(user.username);
const timeout = setTimeout(() => {
showError = false;
}, 5000);
timeoutArr = timeoutArr.concat([timeout]);
});
showWaitPage = false;
}
const initGameForInvitedPlayer = async(invitation : any) =>
const initInvitationGame = async(invitation : any) =>
{
optionsAreNotSet = false;
showWaitPage = true;
console.log("invitation : ");
console.log(invitation);
@@ -130,10 +138,12 @@
options.playerOneUsername = invitation.playerOneUsername;
options.playerTwoUsername = invitation.playerTwoUsername;
options.isSomeoneIsInvited = true;
options.isInvitedPerson = true;
if (user.username === invitation.playerTwoUsername) {
options.isInvitedPerson = true;
}
pong.init(invitation.gameOptions, options, gameAreaId, invitation.token);
showWaitPage = false;
hiddenGame = false;
setHiddenGame(false);
}
}
@@ -156,10 +166,11 @@
gameState.matchEnded = gameState.matchEnded; // trigger Svelte reactivity
gameState.matchAborted = gameState.matchAborted; // trigger Svelte reactivity
console.log("watchGameState, end");
setTimeout(() => {
const timeout = setTimeout(() => {
resetPage();
console.log("watchGameState : setTimeout");
}, 5000);
timeoutArr = timeoutArr.concat([timeout]);
}
}
@@ -169,38 +180,63 @@
}
const fetchInvitations = async() => {
console.log("fetchInvitations");
invitations = await fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/game/invitations`)
.then((response) => {
if (!response.ok) {
throw new Error("HTTP " + response.status);
}
return response.json();
})
.catch((error) => {
console.log("catch fetchInvitations: ", error);
return [];
});
showGameOptions = false;
showInvitations = true;
invitations = await fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/game/invitations`)
.then(x => x.json());
}
const rejectInvitation = async(invitation) => {
await fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/game/decline`, {
const rejectInvitation = async(invitation) =>
{
fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/game/decline`, {
method: "POST",
headers: { 'Content-Type': 'application/json'},
body: JSON.stringify({
token : invitation.token
})
})
.then(x => x.json())
.catch(error => console.log(error));
.then((response) => {
if (!response.ok) {
throw new Error("HTTP " + response.status);
}
})
.catch((error) => {
console.log("catch rejectInvitation: ", error);
});
fetchInvitations();
}
const acceptInvitation = async(invitation : any) =>
{
const res = await fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/game/accept`, {
fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/game/accept`, {
method: "POST",
headers: { 'Content-Type': 'application/json'},
body: JSON.stringify({
token : invitation.token
})
}).catch(error => console.log(error));
if (res && res.ok) {
initGameForInvitedPlayer(invitation);
}
})
.then((response) => {
if (!response.ok) {
throw new Error("HTTP " + response.status);
}
initInvitationGame(invitation);
})
.catch((error) => {
console.log("catch rejectInvitation: ", error);
fetchInvitations();
});
}
function leaveMatch() {
@@ -209,12 +245,23 @@
resetPage();
};
let game_page_class = "";
function setHiddenGame(value: boolean)
{
if (value) {
game_page_class = "";
}
else {
game_page_class = "dim_background";
}
hiddenGame = value;
}
</script>
<Header />
<!-- <div id="game_page"> Replacement for <body>.
Might become useless after CSS rework. -->
<div id="game_page">
<div id="game_page" class={game_page_class}>
{#if showError}
<div class="div_game" in:fly="{{ y: 10, duration: 1000 }}">
@@ -273,58 +320,56 @@
<!-- -->
{#if optionsAreNotSet}
{#if hiddenGame}
{#if showGameOptions}
<div id="game_option">
<div class="div_game">
<button class="pong_button" on:click={fetchInvitations}>Show invitations</button>
<fieldset in:fly="{{ y: 10, duration: 1000 }}">
<legend>game options</legend>
<div class="div_game" id="game_options">
<button class="pong_button" on:click={fetchInvitations}>Show invitations</button>
<fieldset in:fly="{{ y: 10, duration: 1000 }}">
<legend>game options</legend>
<label for="multi_balls">
<input type="checkbox" id="multi_balls" name="multi_balls" bind:checked={options.multi_balls}>
Multiples balls
<label for="multi_balls">
<input type="checkbox" id="multi_balls" name="multi_balls" bind:checked={options.multi_balls}>
Multiples balls
</label>
<label for="moving_walls">
<input type="checkbox" id="moving_walls" name="moving_walls" bind:checked={options.moving_walls}>
Moving walls
</label>
<div>
sound :
<label for="sound_on">
<input type="radio" id="sound_on" name="sound_selector" bind:group={options.sound} value="on">
on
</label>
<label for="moving_walls">
<input type="checkbox" id="moving_walls" name="moving_walls" bind:checked={options.moving_walls}>
Moving walls
<label for="sound_off">
<input type="radio" id="sound_off" name="sound_selector" bind:group={options.sound} value="off">
off
</label>
</div>
<div>
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 player
</label>
<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 invitedUser }
<option value={invitedUser.username}>{invitedUser.username}</option>
{/each}
</select>
{/if}
<div>
<button class="pong_button" on:click={initGame}>PLAY</button>
</div>
</fieldset>
</div>
{#if options.isSomeoneIsInvited}
<select bind:value={options.playerTwoUsername}>
{#each allUsers as invitedUser }
<option value={invitedUser.username}>{invitedUser.username}</option>
{/each}
</select>
{/if}
<div>
<button class="pong_button" on:click={initGame}>PLAY</button>
</div>
</fieldset>
</div>
{/if}
{#if showInvitations}
<div class="div_game">
<div class="div_game" id="game_invitations">
<button class="pong_button" on:click={switchToGameOptions}>Play a Game</button>
<fieldset in:fly="{{ y: 10, duration: 1000 }}">
<legend>invitations</legend>
@@ -332,7 +377,7 @@
{#if invitations.length !== 0}
{#each invitations as invitation}
<div>
{invitation.playerOneUsername} has invited you to play a pong !
{invitation.playerOneUsername} VS {invitation.playerTwoUsername}
<button class="pong_button" on:click={() => acceptInvitation(invitation)}>V</button>
<button class="pong_button" on:click={() => rejectInvitation(invitation)}>X</button>
</div>
@@ -348,19 +393,13 @@
</div> <!-- div "game_page" -->
<style>
@font-face {
font-family: "Bit5x3";
src:
url("/fonts/Bit5x3.woff2") format("woff2"),
local("Bit5x3"),
url("/fonts/Bit5x3.woff") format("woff");
font-weight: normal;
font-style: normal;
font-display: swap;
.dim_background {
background-color: #222;
}
#game_page {
margin: 0;
background-color: #222425;
position: relative;
width: 100%;
height: auto;
@@ -368,9 +407,11 @@
flex-direction: column;
flex-grow: 1;
}
#game_option {
#game_options, #game_invitations {
margin-top: 20px;
}
#canvas_container {
margin-top: 20px;
text-align: center;
@@ -380,7 +421,7 @@
}
canvas {
/* background-color: #ff0000; */
background-color: #333333;
background-color: #333;
max-width: 75vw;
/* max-height: 100vh; */
width: 80%;

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

@@ -3,7 +3,6 @@
import { onMount, onDestroy } from "svelte";
import { fade, fly } from 'svelte/transition';
import Header from '../../pieces/Header.svelte';
import MatchListElem from "../../pieces/MatchListElem.svelte";
import type { Match } from "../../pieces/Match";
import { fetchUser, fetchAllUsers, fetchAvatar } from "../../pieces/utils";
@@ -24,6 +23,7 @@
let matchList: Match[] = [];
let watchGameStateInterval;
const watchGameStateIntervalRate = 142;
let timeoutArr = [];
onMount( async() => {
matchList = await fetchMatchList();
@@ -31,6 +31,9 @@
onDestroy( async() => {
clearInterval(watchGameStateInterval);
timeoutArr.forEach((value) => {
clearTimeout(value);
});
pongSpectator.destroy();
})
@@ -45,7 +48,7 @@
playerOneAvatar = await fetchAvatar(gameState.playerOneUsername);
playerTwoAvatar = await fetchAvatar(gameState.playerTwoUsername);
hiddenGame = false;
setHiddenGame(false);
};
const watchGameState = () => {
@@ -57,10 +60,11 @@
gameState.matchAborted = gameState.matchAborted; // trigger Svelte reactivity
clearInterval(watchGameStateInterval);
console.log("watchGameState, end")
setTimeout(() => {
const timeout = setTimeout(() => {
resetPage();
console.log("watchGameState : setTimeout")
}, 5000);
timeoutArr = timeoutArr.concat([timeout]);
}
}
@@ -70,7 +74,7 @@
};
async function resetPage() {
hiddenGame = true;
setHiddenGame(true);
pongSpectator.destroy();
matchList = await fetchMatchList();
};
@@ -93,13 +97,24 @@
});
};
let game_page_class = "";
function setHiddenGame(value: boolean)
{
if (value) {
game_page_class = "";
}
else {
game_page_class = "dim_background";
}
hiddenGame = value;
}
</script>
<!-- -->
<Header />
<!-- <div id="game_page"> Replacement for <body>.
Might become useless after CSS rework. -->
<div id="game_page">
<div id="game_page" class={game_page_class}>
{#if !hiddenGame}
{#if gameState.matchEnded}
@@ -164,21 +179,14 @@
<!-- -->
<style>
@font-face {
font-family: "Bit5x3";
src:
url("/fonts/Bit5x3.woff2") format("woff2"),
local("Bit5x3"),
url("/fonts/Bit5x3.woff") format("woff");
font-weight: normal;
font-style: normal;
font-display: swap;
.dim_background {
background-color: #222;
}
#game_page {
margin: 0;
padding: 20px;
background-color: #222425;
position: relative;
width: 100%;
height: 100%;

20
srcs/requirements/svelte/api_front/src/pages/game/Ranking.svelte
View File

@@ -1,7 +1,6 @@
<script lang="ts">
import { onMount, onDestroy } from "svelte";
import Header from "../../pieces/Header.svelte";
//user's stuff
@@ -26,9 +25,9 @@
.then( x => allUsers = x );
}
</script>
<Header />
<br />
<br />
<div class="background-pages">
<div class="principal-div">
<table class="stats-table">
<thead>
@@ -46,9 +45,9 @@
<tr>
<th>{i + 1}</th>
{#if user.username === currentUser.username}
<td><b>You ({user.username})</b></td>
<td><b>{user.username} [You]</b></td>
{:else}
<td>{user.username}</td>
<td>{user.username}</td>
{/if}
<td>{user.stats.winGame}</td>
<td>{user.stats.loseGame}</td>
@@ -59,10 +58,11 @@
</tbody>
</table>
</div>
</div>
<style>
.principal-div {
.principal-div {
display: flex;
justify-content: center;
align-items: center;
@@ -71,7 +71,6 @@
margin-left: auto;
margin-right: auto;
font-size: 0.9em;
font-family: sans-serif;
min-width: 400px;
}
@@ -90,15 +89,10 @@
}
.stats-table tbody tr:nth-of-type(even) {
background-color: #f3f3f3;
background-color: #555;
}
.stats-table tbody tr:last-of-type {
border-bottom: 2px solid #618174;
}
.stats-table tbody tr.active-row {
font-weight: bold;
color: #618174;
}
</style>

22
srcs/requirements/svelte/api_front/src/pages/profile/ProfileDisplay.svelte
View File

@@ -15,22 +15,24 @@
</script>
<div class="outer">
{#if user !== undefined}
<GenerateUserDisplay user={user}/>
<button on:click={() => (push('/profile/settings'))}>Profile Settings</button>
{:else}
<h2>Sorry</h2>
<div>Failed to load current</div>
{/if}
<div class="background-pages">
<div class="outer">
{#if user !== undefined}
<GenerateUserDisplay user={user}/>
<button on:click={() => (push('/profile/settings'))}>Profile Settings</button>
{:else}
<h2>Sorry</h2>
<div>Failed to load current</div>
{/if}
</div>
</div>
<style>
div.outer{
max-width: 960px;
margin: 40px auto;
max-width: 100%;
text-align: center;
padding-bottom: 10px;
}
</style>

28
srcs/requirements/svelte/api_front/src/pages/profile/ProfileFriends.svelte
View File

@@ -24,22 +24,10 @@
onMount( async() => {
// DO I ACTUALLY NEED TO ON MOUNT ALL THIS STUFF?
// ALSO I COULD JUST USE THE FUNCITONS I MADE...
// yea no idea what
// i mean do i fetch user? i will for now
user = await fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/user`)
.then( (x) => x.json() );
fetchAll();
// ok this shit works!
// const interval = setInterval(() => {
// fetchAll();
// }, 1000);
// return () => clearInterval(interval);
});
const fetchAll = async() => {
@@ -234,6 +222,7 @@
</script>
<div class="background-pages">
<!-- svelte-ignore a11y-click-events-have-key-events -->
<div class="top-grid">
@@ -353,7 +342,7 @@
</div>
</div>
</div>
<style>
/* ok so i want a 12 column grid with a sidebar */
@@ -368,7 +357,14 @@
div.sidebar-list{
grid-column: 1 / span 2;
background: white;
background: #FB8B24;
padding: 1vw;
max-width: 100%;
max-height: 100%;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
border-right: 4px solid #071013;
}
div.sidebar-item{
@@ -393,7 +389,7 @@
}
div.placeholder{
color: darkgray;
color: white;
text-align: center;
}
@@ -402,7 +398,7 @@
}
div.tip{
color: darkgray;
color: white;
font-size: 0.8em;
font-weight: bold;
}

2
srcs/requirements/svelte/api_front/src/pages/profile/ProfilePage.svelte
View File

@@ -1,11 +1,9 @@
<script lang="ts">
import Header from "../../pieces/Header.svelte";
import Router from "svelte-spa-router";
import { profileRoutes, prefix } from "../../routes/profileRoutes.js";
</script>
<Header />
<div>
<Router routes={profileRoutes} {prefix} />

8
srcs/requirements/svelte/api_front/src/pages/profile/ProfileSettings.svelte
View File

@@ -106,6 +106,7 @@
<main>
<div class="background-pages">
<h2>Look! You can change stuff</h2>
<div class="cards">
<Card>
@@ -114,7 +115,7 @@
<div class="label">New Username</div>
<!-- it really hates {user.username} and ${user.username} -->
<!-- <input type="text" placeholder="current username: ${user.username}" bind:value={set.username}> -->
<input type="text" placeholder="current username: {nameTmp}" bind:value={set.username}>
<input type="text" placeholder="{nameTmp}" bind:value={set.username}>
<div class="success">{success.username}</div>
<div class="error">{errors.username}</div>
</div>
@@ -144,7 +145,7 @@
</form>
</Card>
</div>
</div>
</main>
@@ -158,6 +159,8 @@
grid-gap: 20px; */
}
div.cards{
display: grid;
grid-template-columns: 1fr 1fr;
@@ -190,6 +193,7 @@
.inline-check{
display: inline;
color: #333;
}

134
srcs/requirements/svelte/api_front/src/pieces/Header.svelte
View File

@@ -21,101 +21,73 @@
<!-- svelte-ignore a11y-click-events-have-key-events -->
<header>
<img src="/img/potato_logo.png" alt="Potato Pong Logo" on:click={() => (push('/'))}>
<h1>Potato Pong</h1>
<nav>
<button class:selected="{current === '/game'}" on:click={() => (push('/game'))}>Play</button>
<button class:selected="{current === '/spectator'}" on:click={() => (push('/spectator'))}>Spectate</button>
<button class:selected="{current === '/ranking'}" on:click={() => (push('/ranking'))}>Ranking</button>
<button class:selected="{current === '/profile'}" on:click={() => (push('/profile'))}>My Profile</button>
<!-- <button class:selected="{current === '/profile/settings'}" on:click={() => (push('/profile/settings'))}>Settings</button> -->
<button class:selected="{current === '/profile/friends'}" on:click={() => (push('/profile/friends'))}>Friends</button>
<button on:click={handleClickLogout}>Log Out</button>
</nav>
</header>
<div class="header">
<img src="/img/logo_potato.png" alt="Potato Pong Logo" on:click={() => (push('/'))}>
<div class="center">
<button class:selected="{current === '/game'}" on:click={() => (push('/game'))}>Play</button>
<button class:selected="{current === '/spectator'}" on:click={() => (push('/spectator'))}>Spectate</button>
<button class:selected="{current === '/ranking'}" on:click={() => (push('/ranking'))}>Ranking</button>
<button class:selected="{current === '/profile'}" on:click={() => (push('/profile'))}>My Profile</button>
<button class:selected="{current === '/profile/friends'}" on:click={() => (push('/profile/friends'))}>Friends</button>
</div>
<button class="logout" on:click={handleClickLogout}>Log Out</button>
</div>
<style>
/* See "possible_fonts.css" for more font options... */
@font-face {
font-family: 'Bondi';
src:url('/fonts/Bondi.ttf.woff') format('woff'),
url('/fonts/Bondi.ttf.svg#Bondi') format('svg'),
url('/fonts/Bondi.ttf.eot'),
url('/fonts/Bondi.ttf.eot?#iefix') format('embedded-opentype');
font-weight: normal;
font-style: normal;
}
.selected {
background-color: chocolate;
.header div.center button.selected {
text-decoration: underline;
/* TMP so it's obvious but we need to pick good colors */
background-color: #8c0000;
}
.header div.center button {
background-color: #444;
border-color: #071013;
color: white;
font-family: "Bit5x3";
border-width: 2px;
font-size: 2vw;
}
/* There is a bunch of unncessary shit in here... why so many flex grids, why is everything the same class? just seemed easier but... */
header{
/* background: #f7f7f7; */
background: #618174;
/* padding: 20px; */
margin: 0;
/* does nothing so far... */
/* display: flex; */
.header button.logout {
background-color: #008c8c;
border-color: #071013;
color: white;
font-family: "Bit5x3";
border-width: 2px;
font-size: 2vw;
}
header{
/* for some reason this doesn't do shit! */
position: sticky;
/* position: absolute; */
display: grid;
grid-template-columns: 1fr 1fr 1fr;
.header {
resize: vertical;
overflow: hidden;
background: #FB8B24;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
border-bottom: 4px solid #071013;
position: relative;
display: block;
padding: 10px;
}
/* Headers */
h1{
font-family: 'Bondi';
}
h1{
margin: 0;
text-align: left;
/* max-width: 40px; */
/* this helped with the weird extra space under the image... */
display: flex;
.header div.center {
width: fit-content;
justify-self: center;
align-self: center;
position: absolute;
left: 50%;
display: inline-block;
-ms-transform: translateX(-50%);
transform: translateX(-50%);
}
/* Images */
.header button.logout {
float: right;
}
img{
.header img{
cursor: pointer;
max-width: 40px;
padding: 7px 20px;
justify-self: left;
max-width: 10%;
float: left;
}
nav{
display: flex;
justify-content: right;
}
nav button{
margin: 7px 20px;
/* padding: 5px; */
border-radius: 4px;
}
/* .none{
} */
</style>

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

@@ -4,7 +4,7 @@ export async function fetchAvatar(username: string)
return fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/user/avatar?username=${username}`)
.then((response) => {
if (!response.ok) {
throw new Error("Avatar not retrieved");
throw new Error("HTTP " + response.status);
}
return response.blob();
})
@@ -22,7 +22,7 @@ export async function fetchUser()
return fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/user`)
.then((response) => {
if (!response.ok) {
throw new Error("User not retrieved");
throw new Error("HTTP " + response.status);
}
return response.json();
})
@@ -40,7 +40,7 @@ export async function fetchAllUsers()
return fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/user/all`)
.then((response) => {
if (!response.ok) {
throw new Error("All Users not retrieved");
throw new Error("HTTP " + response.status);
}
return response.json();
})