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

Merge branch 'cherif_back_and_game' into luke

Browse Source
This commit is contained in:
LuckyLaszlo
2022-12-22 17:43:13 +01:00
parent 43f2dd85c4 a0a1239c9d
commit e80215204f
8 changed files with 79 additions and 404 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
srcs/requirements/game_server/game_back/src/server/class/GameSession.ts
View File

@@ -233,7 +233,7 @@ export class GameSession {
}); });
const gc = this.components; const gc = this.components;
await fetch(c.addressBackEnd + "/game/matchEnd", await fetch(c.addressBackEnd + "/game/gameserver/updategame",
{ {
method: "POST", method: "POST",
headers: { headers: {

2
srcs/requirements/nestjs/api_back/src/auth/42/strategy/42strategy.ts
View File

@@ -18,7 +18,7 @@ import { CreateUsersDto } from "src/users/dto/create-users.dto";
async validate(accessToken: string, refreshToken: string, profile: Profile, callbackURL: string) { async validate(accessToken: string, refreshToken: string, profile: Profile, callbackURL: string) {
console.log("Validate inside strategy.ts"); console.log("Validate inside strategy.ts");
console.log(profile.id, profile.username, profile.phoneNumbers[0].value, profile.emails[0].value, profile.photos[0].value); console.log(profile.id, profile.username, profile.phoneNumbers[0].value, profile.emails[0].value, profile.photos[0].value);
const userDTO: CreateUsersDto = { fortyTwoId: profile.id, username: profile.username, email: profile.emails[0].value, image_url: 'default.png', isEnabledTwoFactorAuth: false , status: "connected" }; const userDTO: CreateUsersDto = { fortyTwoId: profile.id, username: profile.username, email: profile.emails[0].value, image_url: 'default.png', isEnabledTwoFactorAuth: false , status: "Connected" };
const user = await this.authenticationService.validateUser(userDTO); const user = await this.authenticationService.validateUser(userDTO);
if (!user) if (!user)
throw new UnauthorizedException(); throw new UnauthorizedException();

61
srcs/requirements/nestjs/api_back/src/game/game.service.ts
View File

@@ -1,4 +1,4 @@
import { HttpException, HttpStatus, Injectable } from '@nestjs/common'; import { ConsoleLogger, HttpException, HttpStatus, Injectable } from '@nestjs/common';
import { InjectRepository } from '@nestjs/typeorm'; import { InjectRepository } from '@nestjs/typeorm';
import { createCipheriv, randomBytes, scrypt } from 'crypto'; import { createCipheriv, randomBytes, scrypt } from 'crypto';
import { User } from 'src/users/entities/user.entity'; import { User } from 'src/users/entities/user.entity';
@@ -31,14 +31,13 @@ export class GameService {
.leftJoinAndSelect("user.stats", "stats") .leftJoinAndSelect("user.stats", "stats")
.orderBy('stats.winGame', "DESC") .orderBy('stats.winGame', "DESC")
.getMany(); .getMany();
if (!users)
return new HttpException("No ranking for now.", HttpStatus.NOT_FOUND)
const partialUser : Partial<User>[] = [] const partialUser : Partial<User>[] = []
for (const user of users) for (const user of users)
{ {
if (await this.friendShipService.findIfUserIsBlockedOrHasBlocked(currentUser.id.toString(), user.id.toString()) === false) if (await this.friendShipService.findIfUserIsBlockedOrHasBlocked(currentUser.id.toString(), user.id.toString()) === false)
partialUser.push({username : user.username, stats : user.stats }) partialUser.push({username : user.username, stats : user.stats })
} }
console.log(...partialUser)
return partialUser; return partialUser;
} }
@@ -58,9 +57,9 @@ export class GameService {
async generateToken(user : User, grantTicketDto : GrantTicketDto) async generateToken(user : User, grantTicketDto : GrantTicketDto)
{ {
// if (user.status === "In Game") console.log(user.status);
// return new HttpException("You can't play two games", HttpStatus.FORBIDDEN); if (user.status === "In Game" || user.status === "In Pool")
// else return new HttpException("You can't play two games", HttpStatus.FORBIDDEN);
if (grantTicketDto.isGameIsWithInvitation === true) if (grantTicketDto.isGameIsWithInvitation === true)
{ {
const secondUser : Partial<User> = await this.userService.findOneByUsername(user.id.toString(), grantTicketDto.playerTwoUsername) const secondUser : Partial<User> = await this.userService.findOneByUsername(user.id.toString(), grantTicketDto.playerTwoUsername)
@@ -73,6 +72,7 @@ export class GameService {
tok.numberOfRegisteredUser = 0; tok.numberOfRegisteredUser = 0;
tok.token = encryptedTextToReturn; tok.token = encryptedTextToReturn;
this.tokenGameRepository.save(tok); this.tokenGameRepository.save(tok);
this.userService.updateStatus(user.id, "In Pool")
return { token : encryptedTextToReturn }; return { token : encryptedTextToReturn };
} }
else if (grantTicketDto.isGameIsWithInvitation === false) { else if (grantTicketDto.isGameIsWithInvitation === false) {
@@ -82,14 +82,13 @@ export class GameService {
tok.numberOfRegisteredUser = 0; tok.numberOfRegisteredUser = 0;
tok.token = encryptedTextToReturn; tok.token = encryptedTextToReturn;
this.tokenGameRepository.save(tok); this.tokenGameRepository.save(tok);
this.userService.updateStatus(user.id, "In Pool")
return { token : encryptedTextToReturn }; return { token : encryptedTextToReturn };
} }
return new HttpException("Something went wrong !", HttpStatus.INTERNAL_SERVER_ERROR) return new HttpException("Something went wrong !", HttpStatus.INTERNAL_SERVER_ERROR)
} }
async validateToken(validateTicketDto : ValidateTicketDto) { async validateToken(validateTicketDto : ValidateTicketDto) {
console.log("On valide le token pour : ")
console.log(validateTicketDto)
if (validateTicketDto.isGameIsWithInvitation === true) if (validateTicketDto.isGameIsWithInvitation === true)
{ {
const tokenGame : TokenGame = await this.tokenGameRepository.createQueryBuilder('tokengame') const tokenGame : TokenGame = await this.tokenGameRepository.createQueryBuilder('tokengame')
@@ -109,13 +108,11 @@ export class GameService {
const userOne : User = await this.userRepository.createQueryBuilder('user') const userOne : User = await this.userRepository.createQueryBuilder('user')
.where("user.username = :username", {username : tokenGame.playerOneUsername}) .where("user.username = :username", {username : tokenGame.playerOneUsername})
.getOne(); .getOne();
userOne.status = "In Game"; this.userService.updateStatus(userOne.id, "In Game")
this.userRepository.save(userOne);
const userTwo : User = await this.userRepository.createQueryBuilder('user') const userTwo : User = await this.userRepository.createQueryBuilder('user')
.where("user.username = :username", {username : tokenGame.playerTwoUsername}) .where("user.username = :username", {username : tokenGame.playerTwoUsername})
.getOne(); .getOne();
userTwo.status = "In Game"; this.userService.updateStatus(userTwo.id, "In Game")
this.userRepository.save(userTwo);
} }
return true; return true;
} }
@@ -135,8 +132,7 @@ export class GameService {
const user : User = await this.userRepository.createQueryBuilder('user') const user : User = await this.userRepository.createQueryBuilder('user')
.where("user.username = :username", {username : tokenGame.playerOneUsername}) .where("user.username = :username", {username : tokenGame.playerOneUsername})
.getOne(); .getOne();
user.status = "In Game"; this.userService.updateStatus(user.id, "In Game")
this.userRepository.save(user);
return true; return true;
} }
} }
@@ -160,13 +156,12 @@ export class GameService {
token : gameToken.token, token : gameToken.token,
}); });
} }
console.log("Il y a des invitations !")
return partialGame; return partialGame;
} }
async declineInvitation(user : User, token : string) async declineInvitation(user : User, token : string)
{ {
if (user.status === "In Game") if (user.status !== "Connected")
return new HttpException("You must finish your game before decline.", HttpStatus.FORBIDDEN) return new HttpException("You must finish your game before decline.", HttpStatus.FORBIDDEN)
console.log("On décline l'invitation") console.log("On décline l'invitation")
const tokenGame = await this.tokenGameRepository.createQueryBuilder('tokengame') const tokenGame = await this.tokenGameRepository.createQueryBuilder('tokengame')
@@ -188,10 +183,10 @@ export class GameService {
{ {
const playerOne = await this.userRepository.findOneBy({username : tokenGame.playerOneUsername}) const playerOne = await this.userRepository.findOneBy({username : tokenGame.playerOneUsername})
const playerTwo = await this.userRepository.findOneBy({username : tokenGame.playerTwoUsername}) const playerTwo = await this.userRepository.findOneBy({username : tokenGame.playerTwoUsername})
playerOne.status = "Connected" if (playerOne.status !== "Disconnected")
playerTwo.status = "Connected" this.userService.updateStatus(playerOne.id, "Connected")
this.userRepository.save(playerOne) if (playerTwo.status !== "Disconnected")
this.userRepository.save(playerTwo) this.userService.updateStatus(playerTwo.id, "Connected")
return this.tokenGameRepository.remove(tokenGame); return this.tokenGameRepository.remove(tokenGame);
} }
return new HttpException("Token not found !", HttpStatus.NOT_FOUND) return new HttpException("Token not found !", HttpStatus.NOT_FOUND)
@@ -199,6 +194,8 @@ export class GameService {
async acceptInvitation(user : User, token : string) async acceptInvitation(user : User, token : string)
{ {
if (user.status !== "Connected")
return new HttpException("You must finish your game before accept.", HttpStatus.FORBIDDEN)
const tokenGame = await this.tokenGameRepository.createQueryBuilder('tokenGame') const tokenGame = await this.tokenGameRepository.createQueryBuilder('tokenGame')
.andWhere('tokenGame.playerTwoUsername = :playerTwoUsername', {playerTwoUsername : user.username}) .andWhere('tokenGame.playerTwoUsername = :playerTwoUsername', {playerTwoUsername : user.username})
.andWhere('tokenGame.token = :token', {token : token}) .andWhere('tokenGame.token = :token', {token : token})
@@ -213,7 +210,7 @@ export class GameService {
} }
async requestIfAnotherUserHasRespondToquestForGame(user : User, token : string) { async requestIfAnotherUserHasRespondToquestForGame(user : User, token : string) {
if (user.status === "In Game") if (user.status !== "Connected")
return new HttpException("You can't do that.", HttpStatus.BAD_REQUEST) return new HttpException("You can't do that.", HttpStatus.BAD_REQUEST)
const tokenGame = await this.tokenGameRepository.createQueryBuilder('tokenGame') const tokenGame = await this.tokenGameRepository.createQueryBuilder('tokenGame')
.where('tokenGame.token = :token', {token : token}) .where('tokenGame.token = :token', {token : token})
@@ -239,23 +236,19 @@ export class GameService {
if (!game) if (!game)
return HttpStatus.INTERNAL_SERVER_ERROR return HttpStatus.INTERNAL_SERVER_ERROR
console.log("200 retourné pour la création de partie") console.log("200 retourné pour la création de partie")
const playerOne = await this.userRepository.findOneBy({username : game.playerOneUsername})
const playerTwo = await this.userRepository.findOneBy({username : game.playerTwoUsername})
playerOne.status = "In Game"
playerTwo.status = "In Game"
this.userRepository.save(playerOne)
this.userRepository.save(playerTwo)
return HttpStatus.OK return HttpStatus.OK
} }
async updateGame(updateGameDto : UpdateGameDto) { async updateGame(updateGameDto : UpdateGameDto) {
const game = await this.gameRepository.preload( console.log("Updata game" + updateGameDto)
{gameServerIdOfTheMatch : updateGameDto.gameServerIdOfTheMatch, const game = await this.gameRepository.createQueryBuilder('game')
...updateGameDto} .where("game.gameServerIdOfTheMatch = :gameServerIdOfTheMatch", {gameServerIdOfTheMatch : updateGameDto.gameServerIdOfTheMatch})
) .getOne();
if (!game) if (!game)
throw new HttpException(`The game could not be updated.`,HttpStatus.NOT_FOUND); throw new HttpException(`The game could not be updated.`,HttpStatus.NOT_FOUND);
game.isMatchIsFinished = true; game.isMatchIsFinished = true;
game.playerOneUsernameResult = updateGameDto.playerOneUsernameResult
game.playerTwoUsernameResult = updateGameDto.playerTwoUsernameResult
this.userRepository.save(game); this.userRepository.save(game);
const playerOne = await this.userRepository.findOneBy({username : game.playerOneUsername}) const playerOne = await this.userRepository.findOneBy({username : game.playerOneUsername})
const playerTwo = await this.userRepository.findOneBy({username : game.playerTwoUsername}) const playerTwo = await this.userRepository.findOneBy({username : game.playerTwoUsername})
@@ -276,10 +269,8 @@ export class GameService {
this.userService.incrementVictories(playerOne.id) this.userService.incrementVictories(playerOne.id)
this.userService.incrementDefeats(playerTwo.id) this.userService.incrementDefeats(playerTwo.id)
} }
playerOne.status = "Connected" this.userService.updateStatus(playerOne.id, "Connected")
playerTwo.status = "Connected" this.userService.updateStatus(playerTwo.id, "Connected")
this.userRepository.save(playerOne)
this.userRepository.save(playerTwo)
return HttpStatus.OK return HttpStatus.OK
} }
} }

2
srcs/requirements/nestjs/api_back/src/users/entities/user.entity.ts
View File

@@ -28,7 +28,7 @@ export class User {
@Column({ nullable: true }) @Column({ nullable: true })
phone: string; phone: string;
@Column({ default: 'disconnected' }) @Column({ default: 'Disconnected' })
status: string; status: string;
// @Column() // @Column()

5
srcs/requirements/nestjs/api_back/src/users/users.controller.ts
View File

@@ -49,11 +49,9 @@ export class UsersController {
@Get() @Get()
findOne(@Query('username') username: string, @Req() req) { findOne(@Query('username') username: string, @Req() req) {
if (username === undefined) { if (username === undefined) {
console.log("Backend Getting current user");
return this.usersService.findOne(req.user.id); return this.usersService.findOne(req.user.id);
} else { } else {
const user : User = req.user; const user : User = req.user;
console.log('we have a query: ' + username)
return this.usersService.findOneByUsername(user.id.toString(),username); return this.usersService.findOneByUsername(user.id.toString(),username);
} }
} }
@@ -64,7 +62,6 @@ export class UsersController {
@Get('search') @Get('search')
findOneByUsername(@Query('username') username: string, @Req() req) { findOneByUsername(@Query('username') username: string, @Req() req) {
const user : User = req.user; const user : User = req.user;
console.log('searching for user' + user.username);
return this.usersService.findOneByUsername(user.id.toString(),username); return this.usersService.findOneByUsername(user.id.toString(),username);
} }
@@ -81,11 +78,9 @@ export class UsersController {
@UseGuards(TwoFactorGuard) @UseGuards(TwoFactorGuard)
@Patch() @Patch()
async update(@Req() req, @Body(new ValidationPipe()) usersUpdateDto: UpdateUsersDto, @Res() response : Response) { async update(@Req() req, @Body(new ValidationPipe()) usersUpdateDto: UpdateUsersDto, @Res() response : Response) {
console.log("DANS PATCH USERS");
const user = await this.usersService.update(req.user.id, usersUpdateDto); const user = await this.usersService.update(req.user.id, usersUpdateDto);
if (user.isEnabledTwoFactorAuth === false && user.isTwoFactorAuthenticated === true) if (user.isEnabledTwoFactorAuth === false && user.isTwoFactorAuthenticated === true)
this.usersService.setIsTwoFactorAuthenticatedWhenLogout(user.id); this.usersService.setIsTwoFactorAuthenticatedWhenLogout(user.id);
console.log ("Enable 2FA " + user.isEnabledTwoFactorAuth + " Is authenticated " + user.isTwoFactorAuthenticated);
if (user.isEnabledTwoFactorAuth === true && user.isTwoFactorAuthenticated === false) if (user.isEnabledTwoFactorAuth === true && user.isTwoFactorAuthenticated === false)
{ {
response.status(201).send('2FA redirect') response.status(201).send('2FA redirect')

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

@@ -1,368 +1,74 @@
<script lang="ts"> <script lang="ts">
import { onMount, onDestroy } from "svelte"; import { onMount, onDestroy } from "svelte";
import * as enumeration from './shared_js/enums' import Header from "../../pieces/Header.svelte";
import * as constants from './client/constants'
import { initPong, initGc, initMatchOptions, initStartFunction } from './client/global'
import { GameArea } from './client/class/GameArea';
import { GameComponentsClient } from './client/class/GameComponentsClient';
import { handleInput } from './client/handleInput';
import { gameLoop } from './client/gameLoop'
import { drawLoop } from './client/draw';
import { countdown } from './client/utils'
import { initWebSocket } from './client/ws';
import { initAudio } from './client/audio';
import { pong, gc} from './client/global'
import Header from '../../pieces/Header.svelte';
import { fade, fly } from 'svelte/transition'
//user's stuff //user's stuff
let user; let currentUser;
let allUsers; let allUsers = [];
let idInterval;
//Game's stuff nest side
let optionsAreNotSet = true;
let isSomeoneIsIvited = false;
let playerTwoUsername = "";
//Game's stuff gameserver side
let sound = "on";
let multi_balls = false;
let moving_walls = false;
let matchOption : enumeration.MatchOptions = enumeration.MatchOptions.noOption;
//html boolean for pages
let showWaitPage = false;
let showInvitations = false;
let showGameOption = true;
let showError = false;
let isThereAnyInvitation = false;
let invitations = [];
let waitingMessage = "Please wait..."
let errorMessageWhenAttemptingToGetATicket = "";
onMount( async() => { onMount( async() => {
user = await fetch('http://transcendance:8080/api/v2/user') currentUser = await fetch('http://transcendance:8080/api/v2/user')
.then( x => x.json() ); .then( x => x.json() );
allUsers = await fetch('http://transcendance:8080/api/v2/user/all') allUsers = await fetch('http://transcendance:8080/api/v2/game/ranking')
.then( x => x.json() ); .then( x => x.json() );
idInterval = setInterval(fetchScores, 10000);
}) })
onDestroy( async() => { onDestroy( async() => {
clearInterval(idInterval);
}) })
const initGame = async() => { function fetchScores() {
optionsAreNotSet = false fetch('http://transcendance:8080/api/v2/game/ranking')
showWaitPage = true
if (multi_balls === true)
matchOption |= enumeration.MatchOptions.multiBalls
if (moving_walls === true )
matchOption |= enumeration.MatchOptions.movingWalls
const responseWhenGrantToken = fetch("http://transcendance:8080/api/v2/game/ticket", {
method : "POST",
headers : {'Content-Type': 'application/json'},
body : JSON.stringify({
playerOneUsername : user.username,
playerTwoUsername : playerTwoUsername,
gameOptions : matchOption,
isGameIsWithInvitation : isSomeoneIsIvited
})
})
const responseFromServer = await responseWhenGrantToken;
const responseInjson = await responseFromServer.json();
const token : string = responseInjson.token;
showWaitPage = false
if (!responseFromServer.ok)
{
errorMessageWhenAttemptingToGetATicket = responseInjson.message;
showError = true;
setTimeout(() => {
showError = false;
showWaitPage = false
optionsAreNotSet = true
playerTwoUsername = "";
matchOption = 0;
}, 5000)
}
else if (token)
{
(sound === "off") ? initAudio(true) : initAudio(false);
initMatchOptions(matchOption)
initPong(new GameArea())
initGc(new GameComponentsClient(matchOption, pong.ctx))
initStartFunction(start)
isSomeoneIsIvited ?
initWebSocket(matchOption, token, user.username, true, playerTwoUsername) :
initWebSocket(matchOption, token, user.username)
}
}
const initGameForPrivateParty = async(invitation : any) => {
optionsAreNotSet = false
showWaitPage = true
console.log("invitation : ")
console.log(invitation)
if (invitation.token)
{
initMatchOptions(matchOption)
initPong(new GameArea())
initGc(new GameComponentsClient(matchOption, pong.ctx))
initStartFunction(start)
showWaitPage = false
initWebSocket(matchOption, invitation.token, invitation.playerOneUsername, true, user.username)
}
}
function start() : void {
gc.text1.pos.assign(constants.w*0.5, constants.h*0.75);
countdown(constants.matchStartDelay/1000, (count: number) => {
gc.text1.clear();
gc.text1.text = `${count}`;
gc.text1.update();
}, responseWhenGrantTokenume);
}
function responseWhenGrantTokenume(): void {
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, constants.handleInputIntervalMS);
pong.gameLoopInterval = window.setInterval(gameLoop, constants.gameLoopIntervalMS);
pong.drawLoopInterval = window.setInterval(drawLoop, constants.drawLoopIntervalMS);
}
const showOptions = () => {
showGameOption = true
showInvitations = false
}
const showInvitation = async() => {
showGameOption = false;
showInvitations = true;
invitations = await fetch("http://transcendance:8080/api/v2/game/invitations")
.then( x => x.json() ) .then( x => x.json() )
invitations.length !== 0 ? isThereAnyInvitation = true : isThereAnyInvitation = false .then( x => allUsers = x );
}
const rejectInvitation = async(invitation) => {
await fetch("http://transcendance:8080/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))
showInvitation()
}
const acceptInvitation = async(invitation : any) => {
await fetch("http://transcendance:8080/api/v2/game/accept",{
method: "POST",
headers: { 'Content-Type': 'application/json'},
body: JSON.stringify({
token : invitation.token
})
})
.then(x => x.json())
.catch(error => {
console.log(error)
})
showInvitation()
initGameForPrivateParty(invitation)
} }
</script> </script>
<Header /> <Header />
<body> <div class="container">
<div id="preload_font">.</div> <div class="row">
<div class="col-12">
{#if showError === true} <h1>Ranking</h1>
<div id="div_game" in:fly="{{ y: 10, duration: 1000 }}">
<fieldset>
<legend>Error</legend>
<p>{errorMessageWhenAttemptingToGetATicket}</p>
<button id="pong_button">Retry</button>
</fieldset>
</div> </div>
</div>
<div class="row">
<div class="col-12">
<table class="table table-striped">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Username</th>
<th scope="col">Win</th>
<th scope="col">Lose</th>
<th scope="col">Draw</th>
<th scope="col">Games Played</th>
</tr>
</thead>
<tbody>
{#each allUsers as user, i}
<tr>
<th scope="row">{i + 1}</th>
{#if user.username === currentUser.username}
<td><b>You ({user.username})</b></td>
{:else}
<td>{user.username}</td>
{/if} {/if}
<td>{user.stats.winGame}</td>
{#if showWaitPage === true} <td>{user.stats.loseGame}</td>
<div id="div_game" in:fly="{{ y: 10, duration: 1000 }}"> <td>{user.stats.drawGame}</td>
<fieldset> <td>{user.stats.totalGame}</td>
<legend>Connecting to the game...</legend> </tr>
<p>{waitingMessage}</p>
</fieldset>
</div>
{/if}
{#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={multi_balls}>
<label for="multi_balls">Multiples balls</label>
</div>
<div>
<input type="checkbox" id="moving_walls" name="moving_walls" bind:checked={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={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>
<div>
<input type="checkbox" id="isSomeoneIsIvited" bind:checked={isSomeoneIsIvited}>
<label for="moving_walls">Invite a friend</label>
</div>
{#if isSomeoneIsIvited === true}
<select bind:value={playerTwoUsername}>
{#each allUsers as user }
<option value={user.username}>{user.username}</option>
{/each} {/each}
</select> </tbody>
{/if} </table>
<div>
<button id="pong_button" >PLAY</button>
</div>
</fieldset>
</div>
</form>
</div>
{/if}
{#if showInvitations}
<div id="invitations_options" in:fly="{{ y: 10, duration: 1000 }}">
<div id="div_game">
<button id="pong_button" on:click={showOptions}>Play a Game</button>
<fieldset>
<legend>Current invitation(s)</legend>
{#if isThereAnyInvitation}
{#each invitations as invitation }
<div>
{invitation.playerOneUsername} has invited you to play a pong !
<button id="pong_button" on:click={() => acceptInvitation(invitation)}>V</button>
<button id="pong_button" on:click={() => rejectInvitation(invitation)}>X</button>
</div>
{/each}
{/if}
{#if isThereAnyInvitation === false}
<p>Currently, no one asked to play with you.</p>
<button id="pong_button" on:click={showInvitation}>Reload</button>
{/if}
</fieldset>
</div> </div>
</div> </div>
{/if}
{/if}
<div id="canvas_container">
<!-- <p> =) </p> -->
</div> </div>
</body>
<style> <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;
}
#preload_font {
font-family: "Bit5x3";
opacity:0;523LsTrY7n5EwR0s+Om0pdBPFFF5DrShb/x30XuICASgpri15boksH8kWLezj/5syRHPugI0HTGU6/TQgkUx2t7yEWCFGiEDrb/Mv6NKXirVW/W4
height:0;
width:0;
display:inline-block;
}
body {
margin: 0;
background-color: #222425;
}
#canvas_container {
text-align: center;
/* border: dashed rgb(245, 245, 245) 5px; */
/* max-height: 80vh; */
/* overflow: hidden; */
}
#users_name {
text-align: center;
font-family: "Bit5x3";
color: rgb(245, 245, 245);
font-size: x-large;
}
#div_game {
text-align: center;
font-family: "Bit5x3";
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;
margin: 0 auto;
}
#div_game fieldset div {
padding: 10px;
}
#pong_button {
font-family: "Bit5x3";
color: rgb(245, 245, 245);
background-color: #333333;
font-size: x-large;
padding: 10px;
}
canvas {
background-color: #ff0000;
max-width: 75vw;
/* max-height: 100vh; */
width: 80%;
}
</style> </style>

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

@@ -26,6 +26,7 @@
<nav> <nav>
<button on:click={() => (push('/game'))}>Game</button> <button on:click={() => (push('/game'))}>Game</button>
<button on:click={() => (push('/matchlist'))}>Match List</button> <button on:click={() => (push('/matchlist'))}>Match List</button>
<button on:click={() => (push('/ranking'))}>Ranking</button>
{#if $location !== '/profile'} {#if $location !== '/profile'}
<button on:click={() => (push('/profile'))}>My Profile</button> <button on:click={() => (push('/profile'))}>My Profile</button>
{:else if $location === '/profile'} {:else if $location === '/profile'}

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

@@ -6,6 +6,7 @@ import UnauthorizedAccessPage from '../pages/UnauthorizedAccessPage.svelte';
import { wrap } from 'svelte-spa-router/wrap' import { wrap } from 'svelte-spa-router/wrap'
import TestPage from '../pages/TmpTestPage.svelte'; import TestPage from '../pages/TmpTestPage.svelte';
import Game from '../pages/game/Game.svelte'; import Game from '../pages/game/Game.svelte';
import Ranking from '../pages/game/Ranking.svelte';
import SpectatorMatchList from '../pages/SpectatorMatchList.svelte'; import SpectatorMatchList from '../pages/SpectatorMatchList.svelte';
@@ -15,26 +16,7 @@ export const primaryRoutes = {
'/2fa': TwoFactorAuthentication, '/2fa': TwoFactorAuthentication,
'/game': Game, '/game': Game,
'/matchlist': SpectatorMatchList, '/matchlist': SpectatorMatchList,
'/test': wrap({ '/ranking' : Ranking,
component: TestPage,
conditions: [
async(detail) => {
// THIS SHIT TOTALLY WORKS
// Yea in the end this might be the best thing, like also from a Security point of view
const user = await fetch('http://transcendance:8080/api/v2/user')
.then((resp) => resp.json())
console.log('in /test what is in user')
console.log(user)
if (user && user.username)
return true;
else
return false;
}
],
}),
'/profile': wrap({ '/profile': wrap({
component: ProfilePage, component: ProfilePage,
conditions: [ conditions: [