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

small changes in make_env

Browse Source
This commit is contained in:
simplonco
2023-01-03 11:41:34 +01:00
parent 1676de3a49 0be5b2c525
commit 13ace6bc6a
56 changed files with 2296 additions and 1678 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
srcs/requirements/svelte/api_front/src/Constantes.svelte
View File

@@ -1,5 +0,0 @@
<script context="module">
export const Domain = "transcendance";
export const Port = "8080";
export const PortIo = "8080";
</script>

5
srcs/requirements/svelte/api_front/src/main.js
View File

@@ -1,4 +1,7 @@
import App from './App.svelte';
import dotenv from 'dotenv';
dotenv.config();
const app = new App({
target: document.body,
props: {
@@ -6,4 +9,4 @@ const app = new App({
}
});
export default app;
//# sourceMappingURL=main.js.map
//# sourceMappingURL=main.js.map

2
srcs/requirements/svelte/api_front/src/main.ts
View File

@@ -7,4 +7,4 @@ const app = new App({
}
});
export default app;
export default app;

35
srcs/requirements/svelte/api_front/src/pages/SpectatorMatchList.svelte
View File

@@ -1,35 +0,0 @@
<script lang="ts">
import Header from '../pieces/Header.svelte';
import MatchListElem from "../pieces/MatchListElem.svelte";
let arr = [
{
id: "match-01",
playerOneUsername: "toto",
playerTwoUsername: "bruno",
},
{
id: "match-02",
playerOneUsername: "bertand",
playerTwoUsername: "cassandre",
},
{
id: "match-03",
playerOneUsername: "madeleine",
playerTwoUsername: "jack",
},
];
</script>
<!-- -->
<Header/>
<menu>
{#each arr as match}
<MatchListElem match={match}/>
{/each}
</menu>
<!-- -->
<style>
</style>

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

@@ -2,14 +2,12 @@
import Canvas from "../pieces/Canvas.svelte";
import { push } from "svelte-spa-router";
import { onMount } from 'svelte';
import { get } from "svelte/store";
import { Domain, Port } from "../Constantes.svelte";
let user;
onMount(async () => {
user = await fetch(`http://${Domain}:${Port}/api/v2/user`)
user = await fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/user`)
.then((resp) => resp.json())
// i mean i could do a failed to load user or some shit, maybe with a .catch or something? but atm why bother
@@ -33,14 +31,14 @@
});
const login = async() => {
window.location.href = `http://${Domain}:${Port}/api/v2/auth`;
window.location.href = `http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/auth`;
console.log('you are now logged in');
}
// i could prolly put this in it's own compoent, i seem to use it in several places... or maybe just some JS? like no need for html
// we could .then( () => replace('/') ) need the func so TS compatible...
const logout = async() => {
await fetch(`http://${Domain}:${Port}/api/v2/auth/logout`, {
await fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/auth/logout`, {
method: 'POST',
});
user = undefined;

16
srcs/requirements/svelte/api_front/src/pages/TwoFactorAuthentication.svelte
View File

@@ -1,26 +1,14 @@
<script lang="ts">
import { onMount } from "svelte";
import { push } from "svelte-spa-router";
import { Domain, Port } from "../Constantes.svelte";
// onMount( async() => {
// await fetch(`http://${Domain}:${Port}/api/v2/auth/2fa/generate`,
// {
// method: 'POST',
// })
// .then(response => {return response.blob()})
// .then(blob => {
// const url = URL.createObjectURL(blob);
// qrCodeImg = url;
// });
// });
let qrCodeImg;
let qrCode = "";
let wrongCode = "";
const fetchQrCodeImg = (async() => {
await fetch(`http://${Domain}:${Port}/api/v2/auth/2fa/generate`,
await fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/auth/2fa/generate`,
{
method: 'POST',
})
@@ -32,7 +20,7 @@
})()
const submitCode = async() => {
const response = await fetch(`http://${Domain}:${Port}/api/v2/auth/2fa/check`,
const response = await fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/auth/2fa/check`,
{
method : 'POST',
headers : {

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

@@ -3,12 +3,10 @@
import { onMount, onDestroy } from "svelte";
import Header from '../../pieces/Header.svelte';
import { fade, fly } from 'svelte/transition';
import { Domain, Port } from "../../Constantes.svelte";
import * as pong from "./client/pong";
// Pour Chérif: variables indiquant l'état du match
import { matchEnded, matchAbort } from "./client/ws";
import { gameState } from "./client/ws";
//user's stuff
let user;
@@ -37,39 +35,25 @@
let idOfIntevalCheckTerminationOfTheMatch;
onMount( async() => {
user = await fetch(`http://${Domain}:${Port}/api/v2/user`)
user = await fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/user`)
.then( x => x.json() );
allUsers = await fetch(`http://${Domain}:${Port}/api/v2/user/all`)
allUsers = await fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/user/all`)
.then( x => x.json() );
options.playerOneUsername = user.username;
})
onDestroy( async() => {
options.playerOneUsername = user.username;
showError = false;
showMatchEnded = false;
optionsAreNotSet = true
options.playerTwoUsername = "";
options.isSomeoneIsInvited = false;
options.isInvitedPerson = false;
options.moving_walls = false;
options.multi_balls = false;
errorMessageWhenAttemptingToGetATicket = "";
hiddenGame = true;
isThereAnyInvitation = false;
invitations = [];
pong.destroy();
clearInterval(idOfIntevalCheckTerminationOfTheMatch);
pong.destroy();
})
const initGame = async() =>
{
optionsAreNotSet = false;
showWaitPage = true;
idOfIntevalCheckTerminationOfTheMatch = setInterval(matchTermitation, 1000);
const matchOptions = pong.computeMatchOptions(options);
const responseWhenGrantToken = fetch(`http://${Domain}:${Port}/api/v2/game/ticket`, {
const responseWhenGrantToken = fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/game/ticket`, {
method : "POST",
headers : {'Content-Type': 'application/json'},
body : JSON.stringify({
@@ -88,40 +72,36 @@
{
console.log(responseInjson)
console.log("On refuse le ticket");
clearInterval(idOfIntevalCheckTerminationOfTheMatch);
errorMessageWhenAttemptingToGetATicket = responseInjson.message;
showError = true;
options.playerTwoUsername = "";
options.reset();
options.playerOneUsername = user.username;
options.isSomeoneIsInvited = false;
options.isInvitedPerson = false;
options.moving_walls = false;
options.multi_balls = false;
setTimeout(() => {
showError = false;
showWaitPage = false
optionsAreNotSet = true
showError = false;
// showWaitPage = false // ???
}, 5000);
}
else if (token)
{
options.isInvitedPerson = false
idOfIntevalCheckTerminationOfTheMatch = setInterval(matchTermitation, 1000);
// options.isInvitedPerson = false // ???
pong.init(options, gameAreaId, token);
hiddenGame = false;
}
// TODO: Un "else" peut-être ? Si pas de token on fait un truc ?
// Si on ne rentre pas dans le else if, du coup il ne se passe rien.
}
// Pour Cherif: renommer en un truc du genre "initGameForInvitedPlayer" ?
const initGameForPrivateParty = async(invitation : any) =>
const initGameForInvitedPlayer = async(invitation : any) =>
{
idOfIntevalCheckTerminationOfTheMatch = setInterval(matchTermitation, 1000);
optionsAreNotSet = false
showWaitPage = true
console.log("invitation : ")
console.log(invitation)
if (invitation.token)
{
idOfIntevalCheckTerminationOfTheMatch = setInterval(matchTermitation, 1000);
options.playerOneUsername = invitation.playerOneUsername;
options.playerTwoUsername = invitation.playerTwoUsername;
options.isSomeoneIsInvited = true;
@@ -134,32 +114,20 @@
const matchTermitation = () => {
console.log("Ping matchTermitation")
if (matchAbort || matchEnded)
if (gameState.matchAbort || gameState.matchEnded)
{
clearInterval(idOfIntevalCheckTerminationOfTheMatch);
console.log("matchTermitation was called")
showWaitPage = false
matchAbort ?
gameState.matchAbort ?
errorMessageWhenAttemptingToGetATicket = "The match has been aborted"
: errorMessageWhenAttemptingToGetATicket = "The match is finished !"
matchAbort ? showError = true : showMatchEnded = true;
gameState.matchAbort ? showError = true : showMatchEnded = true;
setTimeout(() => {
hiddenGame = true;
showError = false;
showMatchEnded = false;
optionsAreNotSet = true
options.playerTwoUsername = "";
options.playerOneUsername = user.username;
options.isSomeoneIsInvited = false;
options.isInvitedPerson = false;
options.moving_walls = false;
options.multi_balls = false;
resetPage();
errorMessageWhenAttemptingToGetATicket = "";
options.playerTwoUsername = "";
hiddenGame = true;
isThereAnyInvitation = false;
invitations = [];
pong.destroy();
invitations = []; // ???
console.log("matchTermitation : setTimeout")
}, 5000);
}
@@ -174,13 +142,13 @@
const showInvitation = async() => {
showGameOption = false;
showInvitations = true;
invitations = await fetch(`http://${Domain}:${Port}/api/v2/game/invitations`)
invitations = await fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/game/invitations`)
.then(x => x.json())
invitations.length !== 0 ? isThereAnyInvitation = true : isThereAnyInvitation = false
}
const rejectInvitation = async(invitation) => {
await fetch(`http://${Domain}:${Port}/api/v2/game/decline`, {
await fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/game/decline`, {
method: "POST",
headers: { 'Content-Type': 'application/json'},
body: JSON.stringify({
@@ -193,7 +161,7 @@
}
const acceptInvitation = async(invitation : any) => {
const res = await fetch(`http://${Domain}:${Port}/api/v2/game/accept`, {
const res = await fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/game/accept`, {
method: "POST",
headers: { 'Content-Type': 'application/json'},
body: JSON.stringify({
@@ -207,12 +175,27 @@
if (res.status === 200)
{
showInvitation()
initGameForPrivateParty(invitation)
initGameForInvitedPlayer(invitation)
}
//Au final c'est utile !
initGameForPrivateParty(invitation)
initGameForInvitedPlayer(invitation) // Luke: normal de initGameForInvitedPlayer() sur un "res.status" different de 200 ?
}
function leaveMatch() {
resetPage();
};
function resetPage() {
hiddenGame = true;
optionsAreNotSet = true
showError = false;
showMatchEnded = false;
options.reset();
options.playerOneUsername = user.username;
pong.destroy();
};
</script>
<Header />
@@ -233,9 +216,16 @@
</fieldset>
</div>
{/if}
<div id="canvas_container" hidden={hiddenGame}>
<canvas id={gameAreaId}/>
</div>
{#if !hiddenGame}
<div id="div_game">
<button id="pong_button" on:click={leaveMatch}>forfeit</button>
</div>
{/if}
{#if showWaitPage === true}
<div id="div_game" in:fly="{{ y: 10, duration: 1000 }}">
@@ -251,44 +241,41 @@
{#if optionsAreNotSet}
{#if showGameOption === true}
<div id="game_option">
<form on:submit|preventDefault={() => initGame()}>
<div id="div_game">
<button id="pong_button" on:click={showInvitation}>Show invitations</button>
<fieldset>
<legend>game options</legend>
<div>
<input type="checkbox" id="multi_balls" name="multi_balls" bind:checked={options.multi_balls}>
<label for="multi_balls">Multiples balls</label>
</div>
<div>
<input type="checkbox" id="moving_walls" name="moving_walls" bind:checked={options.moving_walls}>
<label for="moving_walls">Moving walls</label>
</div>
<div>
<p>sound :</p>
<input type="radio" id="sound_on" name="sound_selector" bind:group={options.sound} value="on">
<label for="sound_on">on</label>
<input type="radio" id="sound_off" name="sound_selector" bind:group={options.sound} value="off">
<label for="sound_off">off</label>
</div>
<div>
<input type="checkbox" id="isSomeoneIsInvited" bind:checked={options.isSomeoneIsInvited}>
<label for="moving_walls">Invite a friend</label>
</div>
{#if options.isSomeoneIsInvited === true}
<select bind:value={options.playerTwoUsername}>
{#each allUsers as user }
<option value={user.username}>{user.username}</option>
{/each}
</select>
{/if}
<div>
<button id="pong_button" >PLAY</button>
</div>
</fieldset>
</div>
</form>
<div id="div_game">
<button id="pong_button" on:click={showInvitation}>Show invitations</button>
<fieldset>
<legend>game options</legend>
<div>
<input type="checkbox" id="multi_balls" name="multi_balls" bind:checked={options.multi_balls}>
<label for="multi_balls">Multiples balls</label>
</div>
<div>
<input type="checkbox" id="moving_walls" name="moving_walls" bind:checked={options.moving_walls}>
<label for="moving_walls">Moving walls</label>
</div>
<div>
<p>sound :</p>
<input type="radio" id="sound_on" name="sound_selector" bind:group={options.sound} value="on">
<label for="sound_on">on</label>
<input type="radio" id="sound_off" name="sound_selector" bind:group={options.sound} value="off">
<label for="sound_off">off</label>
</div>
<div>
<input type="checkbox" id="isSomeoneIsInvited" bind:checked={options.isSomeoneIsInvited}>
<label for="moving_walls">Invite a friend</label>
</div>
{#if options.isSomeoneIsInvited === true}
<select bind:value={options.playerTwoUsername}>
{#each allUsers as user }
<option value={user.username}>{user.username}</option>
{/each}
</select>
{/if}
<div>
<button id="pong_button" on:click={initGame}>PLAY</button>
</div>
</fieldset>
</div>
</div>
{/if}
@@ -344,12 +331,12 @@
/* max-height: 80vh; */
/* overflow: hidden; */
}
#users_name {
text-align: center;
font-family: "Bit5x3";
color: rgb(245, 245, 245);
font-size: x-large;
canvas {
/* background-color: #ff0000; */
background-color: #333333;
max-width: 75vw;
/* max-height: 100vh; */
width: 80%;
}
#div_game {
@@ -359,15 +346,6 @@
color: rgb(245, 245, 245);
font-size: x-large;
}
#error_notification {
text-align: center;
display: block;
font-family: "Bit5x3";
color: rgb(143, 19, 19);
font-size: x-large;
}
#div_game fieldset {
max-width: 50vw;
width: auto;
@@ -383,12 +361,19 @@
font-size: x-large;
padding: 10px;
}
canvas {
/* background-color: #ff0000; */
background-color: #333333;
max-width: 75vw;
/* max-height: 100vh; */
width: 80%;
#users_name { /* UNUSED */
text-align: center;
font-family: "Bit5x3";
color: rgb(245, 245, 245);
font-size: x-large;
}
#error_notification { /* UNUSED */
text-align: center;
display: block;
font-family: "Bit5x3";
color: rgb(143, 19, 19);
font-size: x-large;
}
</style>

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

@@ -2,13 +2,13 @@
<script lang="ts">
import { onMount, onDestroy } from "svelte";
import Header from '../../pieces/Header.svelte';
import MatchListElem from "../../pieces/MatchListElem.svelte";
import { fade, fly } from 'svelte/transition';
import { Domain, Port } from "../../Constantes.svelte";
import * as pongSpectator from "./client/pongSpectator";
// Pour Chérif: variables indiquant l'état du match
import { matchEnded, matchAbort } from "./client/ws";
import { gameState } from "./client/ws";
import { gameSessionIdPLACEHOLDER } from "./shared_js/constants";
//user's stuff
let user;
@@ -16,30 +16,82 @@
//Game's stuff client side only
const gameAreaId = "game_area";
let sound = "off";
// const dummyMatchList = [
// {
// gameSessionId: gameSessionIdPLACEHOLDER,
// matchOptions: pongSpectator.MatchOptions.noOption,
// playerOneUsername: "toto",
// playerTwoUsername: "bruno",
// },
// {
// gameSessionId: gameSessionIdPLACEHOLDER,
// matchOptions: pongSpectator.MatchOptions.multiBalls,
// playerOneUsername: "pl1",
// playerTwoUsername: "pl2",
// },
// {
// gameSessionId: "id6543",
// matchOptions: pongSpectator.MatchOptions.movingWalls | pongSpectator.MatchOptions.multiBalls,
// playerOneUsername: "bertand",
// playerTwoUsername: "cassandre",
// },
// {
// gameSessionId: "id3452",
// matchOptions: pongSpectator.MatchOptions.multiBalls,
// playerOneUsername: "madeleine",
// playerTwoUsername: "jack",
// },
// ];
let matchList = [];
//html boolean for pages
let hiddenGame = true;
let hiddenMatchList = false;
onMount( async() => {
user = await fetch(`http://${Domain}:${Port}/api/v2/user`)
user = await fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/user`)
.then( x => x.json() );
allUsers = await fetch(`http://${Domain}:${Port}/api/v2/user/all`)
allUsers = await fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/user/all`)
.then( x => x.json() );
// WIP: fetch for match list here
const responseForMatchList = await fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/game/match/all`)
const jsonForMatchList = await responseForMatchList.json();
matchList = jsonForMatchList;
console.log("matchList");
if (matchList.length <= 0)
hiddenMatchList = true;
console.log(matchList);
})
onDestroy( async() => {
pongSpectator.destroy();
})
const initGameSpectator = async() => {
let gameSessionId = "ID_PLACEHOLDER"; // PLACEHOLDER
let matchOptions = 0; // PLACEHOLDER
let sound = "off"; // PLACEHOLDER
async function initGameSpectator(gameSessionId: string, matchOptions: pongSpectator.MatchOptions) {
pongSpectator.init(matchOptions, sound, gameAreaId, gameSessionId);
hiddenGame = false;
};
function leaveMatch() {
resetPage();
};
async function resetPage() {
hiddenGame = true;
pongSpectator.destroy();
// WIP: fetch for match list here
matchList = await fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/game/match/all`)
.then( x => x.json() );
console.log("matchList");
if (matchList.length <= 0)
hiddenMatchList = true;
console.log(matchList);
};
</script>
<!-- -->
<Header />
<!-- <div id="game_page"> Replacement for <body>.
@@ -50,7 +102,92 @@
<canvas id={gameAreaId}/>
</div>
{#if hiddenGame}
<div id="div_game">
<div id="game_options">
<fieldset>
{#if hiddenMatchList}
<legend>no match available</legend>
{:else}
<legend>options</legend>
<div>
<p>sound :</p>
<input type="radio" id="sound_on" name="sound_selector" bind:group={sound} value="on">
<label for="sound_on">on</label>
<input type="radio" id="sound_off" name="sound_selector" bind:group={sound} value="off">
<label for="sound_off">off</label>
</div>
<menu id="match_list">
{#each matchList as match}
<MatchListElem match={match} on:click={(e) => initGameSpectator(match.gameServerIdOfTheMatch, match.gameOptions)} />
{/each}
</menu>
{/if}
</fieldset>
</div>
</div>
{:else}
<div id="div_game">
<button id="pong_button" on:click={leaveMatch}>leave match</button>
</div>
{/if}
</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;
}
#game_page {
margin: 0;
background-color: #222425;
position: relative;
width: 100%;
height: 100%;
}
#canvas_container {
margin-top: 20px;
text-align: center;
}
canvas {
background-color: #333333;
max-width: 75vw;
width: 80%;
}
#div_game {
margin-top: 20px;
text-align: center;
font-family: "Bit5x3";
color: rgb(245, 245, 245);
font-size: x-large;
}
#div_game fieldset {
max-width: 50vw;
width: auto;
margin: 0 auto;
}
#div_game fieldset div {
padding: 10px;
}
#match_list {
font-family: 'Courier New', Courier, monospace;
font-size: large;
}
#pong_button {
font-family: "Bit5x3";
color: rgb(245, 245, 245);
background-color: #333333;
font-size: x-large;
padding: 10px;
}
</style>

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

@@ -2,16 +2,16 @@
<script lang="ts">
import { onMount, onDestroy } from "svelte";
import Header from "../../pieces/Header.svelte";
import { Domain, Port } from "../../Constantes.svelte";
//user's stuff
let currentUser;
let allUsers = [];
let idInterval;
onMount( async() => {
currentUser = await fetch(`http://${Domain}:${Port}/api/v2/user`)
currentUser = await fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/user`)
.then( x => x.json() );
allUsers = await fetch(`http://${Domain}:${Port}/api/v2/game/ranking`)
allUsers = await fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/game/ranking`)
.then( x => x.json() );
idInterval = setInterval(fetchScores, 10000);
})
@@ -21,7 +21,7 @@
})
function fetchScores() {
fetch(`http://${Domain}:${Port}/api/v2/game/ranking`)
fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/game/ranking`)
.then( x => x.json() )
.then( x => allUsers = x );
}

19
srcs/requirements/svelte/api_front/src/pages/game/client/audio.ts
View File

@@ -1,21 +1,32 @@
import * as c from "./constants.js"
export const soundPongArr: HTMLAudioElement[] = [];
// export const soundPongArr: HTMLAudioElement[] = [];
export const soundPongArr: HTMLAudioElement[] = [
new Audio("http://transcendance:8080/sound/pong/"+1+".ogg"),
new Audio("http://transcendance:8080/sound/pong/"+2+".ogg")
];
export const soundRoblox = new Audio("http://transcendance:8080/sound/roblox-oof.ogg");
export function initAudio(sound: string)
{
let muteFlag = true;
let muteFlag: boolean;
if (sound === "on") {
muteFlag = false;
}
else {
muteFlag = true;
}
for (let i = 0; i <= 32; i++) {
/* for (let i = 0; i <= 32; i++) {
soundPongArr.push(new Audio("http://transcendance:8080/sound/pong/"+i+".ogg"));
soundPongArr[i].volume = c.soundPongVolume;
soundPongArr[i].muted = muteFlag;
}
} */
soundPongArr.forEach((value) => {
value.volume = c.soundRobloxVolume;
value.muted = muteFlag;
});
soundRoblox.volume = c.soundRobloxVolume;
soundRoblox.muted = muteFlag;
}

9
srcs/requirements/svelte/api_front/src/pages/game/client/class/InitOptions.ts
View File

@@ -7,4 +7,13 @@ export class InitOptions {
isInvitedPerson = false;
playerOneUsername = "";
playerTwoUsername = "";
reset() {
this.sound = "off";
this.multi_balls = false;
this.moving_walls = false;
this.isSomeoneIsInvited = false;
this.isInvitedPerson = false;
this.playerOneUsername = "";
this.playerTwoUsername = "";
}
}

3
srcs/requirements/svelte/api_front/src/pages/game/client/gameLoop.ts
View File

@@ -1,7 +1,8 @@
import * as c from "./constants.js";
import * as en from "../shared_js/enums.js"
import { gc, matchOptions, clientInfo, clientInfoSpectator} from "./global.js";
import { gc, matchOptions } from "./global.js";
import { clientInfo, clientInfoSpectator} from "./ws.js";
import { wallsMovements } from "../shared_js/wallsMovement.js";
import type { RacketClient } from "./class/RectangleClient.js";
import type { VectorInteger } from "../shared_js/class/Vector.js";

11
srcs/requirements/svelte/api_front/src/pages/game/client/global.ts
View File

@@ -3,27 +3,24 @@ import * as en from "../shared_js/enums.js";
import type { GameArea } from "./class/GameArea.js";
import type { GameComponentsClient } from "./class/GameComponentsClient.js";
// export {pong, gc, matchOptions} from "./pong.js"
export {socket, clientInfo, clientInfoSpectator} from "./ws.js"
export let pong: GameArea;
export let gc: GameComponentsClient;
export let matchOptions: en.MatchOptions = en.MatchOptions.noOption;
export function initPong(value: GameArea) {
export function setPong(value: GameArea) {
pong = value;
}
export function initGc(value: GameComponentsClient) {
export function setGc(value: GameComponentsClient) {
gc = value;
}
export function initMatchOptions(value: en.MatchOptions) {
export function setMatchOptions(value: en.MatchOptions) {
matchOptions = value;
}
export let startFunction: () => void;
export function initStartFunction(value: () => void) {
export function setStartFunction(value: () => void) {
startFunction = value;
}

6
srcs/requirements/svelte/api_front/src/pages/game/client/handleInput.ts
View File

@@ -1,10 +1,10 @@
import { pong, gc, socket, clientInfo } from "./global.js"
import { pong, gc } from "./global.js"
import { socket, clientInfo, gameState } from "./ws.js"
import * as ev from "../shared_js/class/Event.js"
import * as en from "../shared_js/enums.js"
import { InputHistory } from "./class/InputHistory.js"
import * as c from "./constants.js";
import { matchEnded } from "./ws.js";
export let gridDisplay = false;
@@ -44,7 +44,7 @@ export function handleInput()
playerMovements(delta_time, keys);
}
if (!matchEnded) {
if (!gameState.matchEnded) {
socket.send(JSON.stringify(inputState));
}
// setTimeout(testInputDelay, 100);

13
srcs/requirements/svelte/api_front/src/pages/game/client/init.ts
View File

@@ -3,12 +3,12 @@ import * as c from "./constants.js"
import * as en from "../shared_js/enums.js"
import { GameArea } from "./class/GameArea.js";
import { GameComponentsClient } from "./class/GameComponentsClient.js";
import { socket } from "./ws.js";
import { socket, resetGameState } from "./ws.js";
import { initAudio } from "./audio.js";
import type { InitOptions } from "./class/InitOptions.js";
import { pong } from "./global.js"
import { initPong, initGc, initMatchOptions } from "./global.js"
import { setPong, setGc, setMatchOptions } from "./global.js"
export function computeMatchOptions(options: InitOptions)
{
@@ -26,10 +26,10 @@ export function computeMatchOptions(options: InitOptions)
export function initBase(matchOptions: en.MatchOptions, sound: string, gameAreaId: string)
{
initMatchOptions(matchOptions);
initAudio(sound);
initPong(new GameArea(gameAreaId));
initGc(new GameComponentsClient(matchOptions, pong.ctx));
setMatchOptions(matchOptions);
setPong(new GameArea(gameAreaId));
setGc(new GameComponentsClient(matchOptions, pong.ctx));
}
export function destroyBase()
@@ -39,9 +39,10 @@ export function destroyBase()
clearInterval(pong.handleInputInterval);
clearInterval(pong.gameLoopInterval);
clearInterval(pong.drawLoopInterval);
initPong(null);
setPong(null);
}
if (socket && socket.OPEN) {
socket.close();
}
resetGameState();
}

48
srcs/requirements/svelte/api_front/src/pages/game/client/pong.ts
View File

@@ -12,15 +12,17 @@ export { computeMatchOptions } from "./init.js";
/* TODO: A way to delay the init of variables, but still use "const" not "let" ? */
import { pong, gc } from "./global.js"
import { initStartFunction } from "./global.js"
import { setStartFunction } from "./global.js"
let abortControllerKeydown: AbortController;
let abortControllerKeyup: AbortController;
export function init(options: InitOptions, gameAreaId: string, token: string)
{
const matchOptions = computeMatchOptions(options);
initBase(matchOptions, options.sound, gameAreaId);
initStartFunction(start);
setStartFunction(start);
if (options.isSomeoneIsInvited) {
initWebSocket(matchOptions, token, options.playerOneUsername, true, options.playerTwoUsername, options.isInvitedPerson);
}
@@ -32,6 +34,14 @@ export function init(options: InitOptions, gameAreaId: string, token: string)
export function destroy()
{
destroyBase();
if (abortControllerKeydown) {
abortControllerKeydown.abort();
abortControllerKeydown = null;
}
if (abortControllerKeyup) {
abortControllerKeyup.abort();
abortControllerKeyup = null;
}
}
function start()
@@ -41,20 +51,40 @@ function start()
gc.text1.clear();
gc.text1.text = `${count}`;
gc.text1.update();
}, resume);
}, start_after_countdown);
}
function start_after_countdown()
{
abortControllerKeydown = new AbortController();
window.addEventListener(
'keydown',
(e) => { pong.addKey(e.key); },
{signal: abortControllerKeydown.signal}
);
abortControllerKeyup = new AbortController();
window.addEventListener(
'keyup',
(e) => { pong.deleteKey(e.key);},
{signal: abortControllerKeyup.signal}
);
resume();
}
function resume()
{
gc.text1.text = "";
window.addEventListener('keydown', function (e) {
pong.addKey(e.key);
});
window.addEventListener('keyup', function (e) {
pong.deleteKey(e.key);
});
pong.handleInputInterval = window.setInterval(handleInput, c.handleInputIntervalMS);
// pong.handleInputInterval = window.setInterval(sendLoop, c.sendLoopIntervalMS);
pong.gameLoopInterval = window.setInterval(gameLoop, c.gameLoopIntervalMS);
pong.drawLoopInterval = window.setInterval(drawLoop, c.drawLoopIntervalMS);
}
function pause() // unused
{
clearInterval(pong.handleInputInterval);
clearInterval(pong.gameLoopInterval);
clearInterval(pong.drawLoopInterval);
}

11
srcs/requirements/svelte/api_front/src/pages/game/client/pongSpectator.ts
View File

@@ -6,17 +6,18 @@ import { drawLoop } from "./draw.js";
import { initWebSocketSpectator } from "./ws.js";
import { initBase, destroyBase, computeMatchOptions } from "./init.js";
export { computeMatchOptions } from "./init.js";
export { MatchOptions } from "../shared_js/enums.js"
/* TODO: A way to delay the init of variables, but still use "const" not "let" ? */
import { pong, gc } from "./global.js"
import { initStartFunction } from "./global.js"
import { setStartFunction } from "./global.js"
export function init(matchOptions: en.MatchOptions, sound: string, gameAreaId: string, gameSessionId: string)
{
initBase(matchOptions, sound, gameAreaId);
initStartFunction(start);
setStartFunction(start);
initWebSocketSpectator(gameSessionId);
}
@@ -35,3 +36,9 @@ function resume()
pong.gameLoopInterval = window.setInterval(gameLoopSpectator, c.gameLoopIntervalMS);
pong.drawLoopInterval = window.setInterval(drawLoop, c.drawLoopIntervalMS);
}
function pause() // unused
{
clearInterval(pong.gameLoopInterval);
clearInterval(pong.drawLoopInterval);
}

26
srcs/requirements/svelte/api_front/src/pages/game/client/ws.ts
View File

@@ -10,8 +10,15 @@ import { soundRoblox } from "./audio.js"
import { sleep } from "./utils.js";
import { Vector, VectorInteger } from "../shared_js/class/Vector.js";
export let matchEnded = false;
export let matchAbort = false;
export const gameState = {
matchEnded: false,
matchAbort: false
}
export function resetGameState() {
gameState.matchEnded = false;
gameState.matchAbort = false;
}
class ClientInfo {
id = "";
@@ -57,7 +64,6 @@ function logListener(this: WebSocket, event: MessageEvent) {
}
function errorListener(this: WebSocket, event: MessageEvent) {
console.log("errorListener");
const data: ev.ServerEvent = JSON.parse(event.data);
if (data.type === en.EventTypes.error) {
console.log("actual Error");
@@ -98,12 +104,9 @@ function preMatchListener(this: WebSocket, event: MessageEvent)
startFunction();
break;
case en.EventTypes.matchAbort:
matchAbort = true;
gameState.matchAbort = true;
socket.removeEventListener("message", preMatchListener);
msg.matchAbort();
setTimeout(() => {
matchAbort = false;
}, 1000);
break;
}
}
@@ -204,7 +207,7 @@ function scoreUpdate(data: ev.EventScoreUpdate)
function matchEnd(data: ev.EventMatchEnd)
{
matchEnded = true;
gameState.matchEnded = true;
socket.close();
if (data.winner === clientInfo.side) {
msg.win();
@@ -215,9 +218,6 @@ function matchEnd(data: ev.EventMatchEnd)
else {
msg.lose();
}
setTimeout(() => {
matchEnded = false;
}, 1000);
}
/* Spectator */
@@ -229,6 +229,7 @@ export function initWebSocketSpectator(gameSessionId: string)
socket.send(JSON.stringify( new ev.ClientAnnounceSpectator(gameSessionId) ));
});
// socket.addEventListener("message", logListener); // for testing purpose
socket.addEventListener("message", errorListener);
socket.addEventListener("message", preMatchListenerSpectator);
clientInfoSpectator.playerLeftNextPos = new VectorInteger(gc.playerLeft.pos.x, gc.playerLeft.pos.y);
@@ -243,6 +244,7 @@ export function preMatchListenerSpectator(this: WebSocket, event: MessageEvent)
{
socket.removeEventListener("message", preMatchListenerSpectator);
socket.addEventListener("message", inGameListenerSpectator);
socket.send(JSON.stringify( new ev.ClientEvent(en.EventTypes.clientSpectatorReady) ));
startFunction();
}
}
@@ -318,7 +320,7 @@ function scoreUpdateSpectator(data: ev.EventScoreUpdate)
function matchEndSpectator(data: ev.EventMatchEnd)
{
console.log("matchEndSpectator");
matchEnded = true;
gameState.matchEnded = true;
socket.close();
// WIP
/* msg.win();

4
srcs/requirements/svelte/api_front/src/pages/game/shared_js/constants.ts
View File

@@ -26,5 +26,5 @@ export const movingWallPosMax = Math.floor(w*0.12);
export const movingWallSpeed = Math.floor(w*0.08);
export const gameSessionIdPLACEHOLDER = "42"; // TESTING SPECTATOR PLACEHOLDER
// for testing, force gameSession.id in wsServer.ts->matchmaking()
export const gameSessionIdPLACEHOLDER = "match-id-test-42"; // TESTING SPECTATOR PLACEHOLDER
// for testing, force gameSession.id in wsServer.ts->createGameSession()

1
srcs/requirements/svelte/api_front/src/pages/game/shared_js/enums.ts
View File

@@ -19,6 +19,7 @@ export enum EventTypes {
// Client
clientAnnounce,
clientPlayerReady,
clientSpectatorReady,
clientInput,
}

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

@@ -2,7 +2,7 @@
import { onMount } from 'svelte';
import GenerateUserDisplay from '../../pieces/GenerateUserDisplay.svelte';
import { Domain, Port } from "../../Constantes.svelte";
import Chat from '../../pieces/chat/Chat.svelte';
@@ -10,7 +10,7 @@
onMount( async() => {
// console.log('mounting profile display')
user = await fetch(`http://${Domain}:${Port}/api/v2/user`)
user = await fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/user`)
.then( (x) => x.json() );
})

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

@@ -2,7 +2,7 @@
import { onMount } from "svelte";
import { binding_callbacks } from "svelte/internal";
import { Domain, Port } from "../../Constantes.svelte";
import Button from "../../pieces/Button.svelte";
import DisplayAUser from "../../pieces/DisplayAUser.svelte";
@@ -39,7 +39,7 @@ could be a list of friends and if they're active but i can't see that yet
onMount( async() => {
// yea no idea what
// i mean do i fetch user? i will for now
user = await fetch(`http://${Domain}:${Port}/api/v2/user`)
user = await fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/user`)
.then( (x) => x.json() );
// userBeingViewed = user;
@@ -47,26 +47,26 @@ could be a list of friends and if they're active but i can't see that yet
// console.log(user)
// console.log(user.username)
myFriends = await fetch(`http://${Domain}:${Port}/api/v2/network/myfriends`)
myFriends = await fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/network/myfriends`)
.then( (x) => x.json() );
// console.log('my friends')
// console.log(myFriends)
requestsMade = await fetch(`http://${Domain}:${Port}/api/v2/network/pending`)
requestsMade = await fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/network/pending`)
.then( x => x.json() );
// console.log('Requests pending ');
// console.log(requestsMade);
requestsRecieved = await fetch(`http://${Domain}:${Port}/api/v2/network/received`)
requestsRecieved = await fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/network/received`)
.then( x => x.json() );
// console.log('Requests received ');
// console.log(requestsRecieved);
allUsers = await fetch(`http://${Domain}:${Port}/api/v2/user/all`)
allUsers = await fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/user/all`)
.then( x => x.json() );
// console.log('got all users ' + allUsers)
@@ -75,20 +75,20 @@ could be a list of friends and if they're active but i can't see that yet
const displayAllUsers = async() => {
allUsers = await fetch(`http://${Domain}:${Port}/api/v2/user/all`)
allUsers = await fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/user/all`)
.then( x => x.json() );
// console.log('got all users ' + allUsers)
};
const displayAllFriends = async() => {
myFriends = await fetch(`http://${Domain}:${Port}/api/v2/network/myfriends`)
myFriends = await fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/network/myfriends`)
.then( x => x.json() );
// console.log('got all friends ' + allFriends)
};
const displayRequestsMade = async() => {
requestsMade = await fetch(`http://${Domain}:${Port}/api/v2/network/pending`)
requestsMade = await fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/network/pending`)
.then( x => x.json() );
// console.log('got requests made ' + requestsMade)
};
@@ -107,7 +107,7 @@ could be a list of friends and if they're active but i can't see that yet
}
if (valid) {
sentFriendRequest = await fetch(`http://${Domain}:${Port}/api/v2/network/myfriends`, {
sentFriendRequest = await fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/network/myfriends`, {
method : "POST",
headers: { 'Content-Type': 'application/json'},
body: JSON.stringify({
@@ -125,7 +125,7 @@ could be a list of friends and if they're active but i can't see that yet
// sendUsername = userBeingViewed.username;
// prolly like fetch if you're friends or not?
// GET `http://${Domain}:${Port}/api/v2/networks/myfriends?username=aUser` but i need to make that as long as Cherif
// GET `http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/networks/myfriends?username=aUser` but i need to make that as long as Cherif
// doesn't have a better option
// like i want this thing to return the Friendship ID ideally
};

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

@@ -3,7 +3,7 @@
import Card from '../../pieces/Card.svelte';
import {onMount} from 'svelte';
import { push } from 'svelte-spa-router';
import { Domain, Port } from "../../Constantes.svelte";
import Button from '../../pieces/Button.svelte';
let user;
@@ -17,7 +17,7 @@
let success = {username: '', avatar: '' };
onMount( async() => {
user = await fetch(`http://${Domain}:${Port}/api/v2/user`)
user = await fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/user`)
.then( (x) => x.json() );
// do a .catch?
@@ -34,7 +34,7 @@
// console.log('this is what is in the avatar before fetch')
// console.log(avatar)
await fetch(`http://${Domain}:${Port}/api/v2/user/avatar`, {method: "GET"})
await fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/user/avatar`, {method: "GET"})
.then(response => {return response.blob()})
.then(data => {
const url = URL.createObjectURL(data);
@@ -64,7 +64,7 @@
else {
errors.username = '';
}
await fetch(`http://${Domain}:${Port}/api/v2/user`, {
await fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/user`, {
method: 'PATCH',
headers: {
'Content-Type': 'application/json'
@@ -101,15 +101,21 @@
// tmp
console.log(data);
await fetch(`http://${Domain}:${Port}/api/v2/user/avatar`,
const responseWhenChangeAvatar = fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/user/avatar`,
{
method : 'POST',
body : data,
})
.then(() => uploadAvatarSuccess = true ) // for some reason it needs to be a function, i think a TS thing, not a promis otherwise
.then(() => success.avatar = 'Your changes have been saved')
.catch(() => errors.avatar = 'Sorry failed to upload your new Avatar' );
await fetch(`http://${Domain}:${Port}/api/v2/user/avatar`, {method: "GET"})
const responseFromServer = await responseWhenChangeAvatar;
if (responseFromServer.ok === true) {
uploadAvatarSuccess = true;
success.avatar = 'Your avatar has been updated';
}
else {
errors.avatar = responseFromServer.statusText;
}
await fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/user/avatar`, {method: "GET"})
.then(response => {return response.blob()})
.then(data => {
const url = URL.createObjectURL(data);

14
srcs/requirements/svelte/api_front/src/pieces/DisplayAUser.svelte
View File

@@ -2,7 +2,7 @@
import { onMount } from 'svelte';
import GenerateUserDisplay from './GenerateUserDisplay.svelte';
import { Domain, Port } from "../Constantes.svelte";
// import {updateGeneratedUser} from './GenerateUserDisplay.svelte';
export let aUsername;
@@ -10,8 +10,8 @@
onMount( async() => {
console.log('Display aUser username: '+ aUsername)
//`http://${Domain}:${Port}/api/v2/user?username=NomDuUserATrouve`
user = await fetch(`http://${Domain}:${Port}/api/v2/user?username=${aUsername}`)
//`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/user?username=NomDuUserATrouve`
user = await fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/user?username=${aUsername}`)
.then( (x) => x.json() );
// console.log('Display a user: ')
@@ -27,15 +27,15 @@
const updateUser = async(updatedUser) => {
console.log('Display Update aUser username: '+ updateUser)
//`http://${Domain}:${Port}/api/v2/user?username=NomDuUserATrouve`
user = await fetch(`http://${Domain}:${Port}/api/v2/user?username=${updateUser}`)
//`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/user?username=NomDuUserATrouve`
user = await fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/user?username=${updateUser}`)
.then( (x) => x.json() );
};
// export const updateUser = async(updatedUser) => {
// console.log('Display Update aUser username: '+ updateUser)
// //`http://${Domain}:${Port}/api/v2/user?username=NomDuUserATrouve`
// user = await fetch(`http://${Domain}:${Port}/api/v2/user?username=${updateUser}`)
// //`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/user?username=NomDuUserATrouve`
// user = await fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/user?username=${updateUser}`)
// .then( (x) => x.json() );
// updateGeneratedUser(updateUser);

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

@@ -1,7 +1,7 @@
<script lang="ts">
import { onMount } from 'svelte';
import { Domain, Port } from "../Constantes.svelte";
export let user;
export let primary;
@@ -12,7 +12,7 @@
onMount( async() => {
// using this for now cuz for some reason there is yet to be a way to fet another person's avatar
if (primary) {
await fetch(`http://${Domain}:${Port}/api/v2/user/avatar`, {method: "GET"})
await fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/user/avatar`, {method: "GET"})
.then(response => {return response.blob()})
.then(data => {
const url = URL.createObjectURL(data);
@@ -43,7 +43,7 @@
let index = 0, interval = 1000;
const rand = (min, max) =>
const rand = (min, max) =>
Math.floor(Math.random() * (max - min + 1)) + min;
// it's unhappy that "star" isn't typeset, no idea what to do about it...
@@ -65,7 +65,7 @@
for (let i = 0; i < 3; i++) {
setTimeout(() => {
animate(stars[i]);
setInterval(() => animate(stars[i]), 1000);
}, index++ * (interval / 3))
}
@@ -80,7 +80,7 @@
<!-- <img class="icon" src="{user.image_url}" alt="default user icon"> -->
<img class="avatar" src="{avatar}" alt="default user icon">
<div class="username">{user.username}</div>
<div class="rank">Rank:
<div class="rank">Rank:
<span class="glitter">
<span bind:this={stars[0]} class="glitter-star">
<svg viewBox="0 0 512 512">
@@ -166,7 +166,7 @@
/* Glittery Star Stuff */
:root {
:root {
--purple: rgb(123, 31, 162);
--violet: rgb(103, 58, 183);
--pink: rgb(244, 143, 177);
@@ -177,7 +177,7 @@
from {
background-position: 0% center;
}
to {
background-position: -200% center;
}
@@ -187,7 +187,7 @@
from, to {
transform: scale(0);
}
50% {
transform: scale(1);
}
@@ -197,7 +197,7 @@
from {
transform: rotate(0deg);
}
to {
transform: rotate(180deg);
}
@@ -242,7 +242,7 @@
var(--purple)
);
background-size: 200%;
/* Keep these for Safari and chrome */
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;

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

@@ -1,14 +1,14 @@
<script lang="ts">
import { push } from "svelte-spa-router";
import { location } from 'svelte-spa-router';
import { Domain, Port } from "../Constantes.svelte";
import active from 'svelte-spa-router/active'
// or i could leave them all and not display if they're active?
let handleClickLogout = async () => {
await fetch(`http://${Domain}:${Port}/api/v2/auth/logout`, {
await fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/auth/logout`, {
method: 'POST',
})
// .then(resp => resp.json)
@@ -25,8 +25,8 @@
<img src="/img/potato_logo.png" alt="Potato Pong Logo" on:click={() => (push('/'))}>
<h1>Potato Pong</h1>
<nav>
<button on:click={() => (push('/game'))}>Game</button>
<button on:click={() => (push('/matchlist'))}>Match List</button>
<button on:click={() => (push('/game'))}>Play</button>
<button on:click={() => (push('/spectator'))}>Spectate</button>
<button on:click={() => (push('/ranking'))}>Ranking</button>
{#if $location !== '/profile'}
<button on:click={() => (push('/profile'))}>My Profile</button>

29
srcs/requirements/svelte/api_front/src/pieces/MatchListElem.svelte
View File

@@ -1,15 +1,40 @@
<script lang="ts">
import { onMount, onDestroy } from "svelte";
import { MatchOptions } from "../pages/game/client/pongSpectator";
export let match: {
id: string,
gameServerIdOfTheMatch: string,
gameOptions: MatchOptions,
playerOneUsername: string,
playerTwoUsername: string
};
let matchOptionsString = "";
onMount( async() => {
if (match.gameOptions === MatchOptions.noOption) {
matchOptionsString = "standard";
}
else {
if (match.gameOptions & MatchOptions.multiBalls) {
matchOptionsString += "multi balls";
}
if (match.gameOptions & MatchOptions.movingWalls) {
if (matchOptionsString) { matchOptionsString += ", "; }
matchOptionsString += "moving walls";
}
}
})
</script>
<!-- -->
<li>
{match.id} "{match.playerOneUsername}" VS "{match.playerTwoUsername}"
<button on:click>
"{match.playerOneUsername}" VS "{match.playerTwoUsername}"
<br/> [{matchOptionsString}]
</button>
</li>

3
srcs/requirements/svelte/api_front/src/pieces/chat/Chat.svelte
View File

@@ -2,14 +2,13 @@
<script lang="ts">
import Layouts from './Chat_layouts.svelte';
import { Domain, PortIo } from "../../Constantes.svelte";
export let color = "transparent";
/* web sockets with socket.io
*/
import { onMount } from 'svelte';
import io from 'socket.io-client';
const socket = io(`http://${Domain}:${PortIo}`, {
const socket = io(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}`, {
path: '/chat'
});
onMount(async => {

4
srcs/requirements/svelte/api_front/src/routes/primaryRoutes.js
View File

@@ -7,7 +7,7 @@ import { wrap } from 'svelte-spa-router/wrap'
import TestPage from '../pages/TmpTestPage.svelte';
import Game from '../pages/game/Game.svelte';
import Ranking from '../pages/game/Ranking.svelte';
import SpectatorMatchList from '../pages/SpectatorMatchList.svelte';
import GameSpectator from '../pages/game/GameSpectator.svelte';
@@ -15,7 +15,7 @@ export const primaryRoutes = {
'/': SplashPage,
'/2fa': TwoFactorAuthentication,
'/game': Game,
'/matchlist': SpectatorMatchList,
'/spectator': GameSpectator,
'/ranking' : Ranking,
'/profile': wrap({
component: ProfilePage,