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

changements pour l'env (encore) + corrections de quelques bugs dans game_server

Browse Source
This commit is contained in:
batche
2023-01-02 19:20:24 +01:00
parent 095108d35e
commit 8586e15cef
28 changed files with 182 additions and 163 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
make_env.sh
View File

@@ -17,20 +17,21 @@
# This script is used to create a new environment for the project. # This script is used to create a new environment for the project.
# #
ENV_FILE_DOCKER=./srcs/.env ENV_FILE_DOCKER=./srcs/.env
ENV_FILE_NESTJS=./srcs/requirements/nestjs/api_back/.env ENV_FILE_SVELTE=./srcs/requirements/svelte/api_front/.env
# Check for existing .env # Check for existing .env
if [ -f "$ENV_FILE_DOCKER" ] && [ -f "$ENV_FILE_NESTJS" ]; then if [ -f "$ENV_FILE_DOCKER" ]; then
echo "The file $ENV_FILE_DOCKER and $ENV_FILE_NESTJS already exists. Do you want to overwrite them ? (y/n)" echo "The file $ENV_FILE_DOCKER already exists. Do you want to overwrite it ? (y/n)"
OVERWRITE="" OVERWRITE=""
# Ask to overwrite the .env files # Ask to overwrite the .env files
while [ "$OVERWRITE" != "y" ] && [ "$OVERWRITE" != "n" ]; do while [ "$OVERWRITE" != "y" ] && [ "$OVERWRITE" != "n" ]; do
read -p "Enter your choice : " OVERWRITE read -p "Enter your choice : " OVERWRITE
done done
if [ "$OVERWRITE" = "y" ]; then if [ "$OVERWRITE" = "y" ]; then
rm "$ENV_FILE_DOCKER" && rm "$ENV_FILE_NESTJS" rm "$ENV_FILE_DOCKER" && rm "$ENV_FILE_SVELTE"
docker rmi -f postgres docker rmi -f postgres
else else
echo "The file $ENV_FILE_DOCKER and $ENV_FILE_NESTJS will not be overwritten. The script will exit." cp "$ENV_FILE_DOCKER" "$ENV_FILE_SVELTE"
echo "The file $ENV_FILE_DOCKER and $ENV_FILE_SVELTE will not be overwritten. The script will exit."
exit 0 exit 0
fi fi
fi fi
@@ -63,33 +64,19 @@
echo "REDIS_HOST=redis" >> "$ENV_FILE_DOCKER" echo "REDIS_HOST=redis" >> "$ENV_FILE_DOCKER"
echo "REDIS_PORT=6379" >> "$ENV_FILE_DOCKER" echo "REDIS_PORT=6379" >> "$ENV_FILE_DOCKER"
echo "REDIS_PASSWORD=$(generate_password)" >> "$ENV_FILE_DOCKER" echo "REDIS_PASSWORD=$(generate_password)" >> "$ENV_FILE_DOCKER"
# Create a new environment for nestjs
#
echo "Creating a new environment for nestjs"
echo "NODE_ENV=\$NODE_ENV" > "$ENV_FILE_NESTJS"
echo "WEBSITE_HOST=\$WEBSITE_HOST" >> "$ENV_FILE_NESTJS"
echo "WEBSITE_PORT=\$WEBSITE_PORT" >> "$ENV_FILE_NESTJS"
echo "POSTGRES_USER=\$POSTGRES_USER" >> "$ENV_FILE_NESTJS"
echo "POSTGRES_PASSWORD=\$POSTGRES_PASSWORD" >> "$ENV_FILE_NESTJS"
echo "POSTGRES_DB=\$POSTGRES_DB" >> "$ENV_FILE_NESTJS"
echo "POSTGRES_HOST=\$POSTGRES_HOST" >> "$ENV_FILE_NESTJS"
echo "POSTGRES_PORT=\$POSTGRES_PORT" >> "$ENV_FILE_NESTJS"
# Connection to 42 # Connection to 42
echo "In the next steps, we'll need to enter the client secret and client id of the 42 api" echo "In the next steps, we'll need to enter the client secret and client id of the 42 api"
read -p "Enter the client id of the 42 api : " CLIENT_ID read -p "Enter the client id of the 42 api : " CLIENT_ID
echo "FORTYTWO_CLIENT_ID=$CLIENT_ID" >> "$ENV_FILE_NESTJS" echo "FORTYTWO_CLIENT_ID=$CLIENT_ID" >> "$ENV_FILE_DOCKER"
read -p "Enter the client secret of the 42 api : " CLIENT_SECRET read -p "Enter the client secret of the 42 api : " CLIENT_SECRET
echo "FORTYTWO_CLIENT_SECRET=$CLIENT_SECRET" >> "$ENV_FILE_NESTJS" echo "FORTYTWO_CLIENT_SECRET=$CLIENT_SECRET" >> "$ENV_FILE_DOCKER"
FT_CALLBACK="http://\$WEBSITE_HOST:\$WEBSITE_PORT/api/v2/auth/redirect" FT_CALLBACK="http://\$WEBSITE_HOST:\$WEBSITE_PORT/api/v2/auth/redirect"
echo "FORTYTWO_CALLBACK_URL=$FT_CALLBACK" >> "$ENV_FILE_NESTJS" echo "FORTYTWO_CALLBACK_URL=$FT_CALLBACK" >> "$ENV_FILE_DOCKER"
# Other configs # Other configs
echo "COOKIE_SECRET=$(generate_password)" >> "$ENV_FILE_NESTJS" echo "COOKIE_SECRET=$(generate_password)" >> "$ENV_FILE_DOCKER"
echo "PORT=3000" >> "$ENV_FILE_NESTJS" echo "PORT=3000" >> "$ENV_FILE_DOCKER"
echo "TWO_FACTOR_AUTHENTICATION_APP_NAME=Transcendance" >> "$ENV_FILE_NESTJS" echo "TWO_FACTOR_AUTHENTICATION_APP_NAME=Transcendance" >> "$ENV_FILE_DOCKER"
echo "TICKET_FOR_PLAYING_GAME_SECRET=$(generate_password)" >> "$ENV_FILE_NESTJS" echo "TICKET_FOR_PLAYING_GAME_SECRET=$(generate_password)" >> "$ENV_FILE_DOCKER"
# it's finished ! # it's finished !

36
srcs/docker-compose.yml
View File

@@ -6,23 +6,27 @@ services:
target: development target: development
dockerfile: Dockerfile dockerfile: Dockerfile
no_cache: true no_cache: true
args: environment:
- NODE_ENV=${NODE_ENV} POSTGRES_USER: "${POSTGRES_USER}"
- WEBSITE_HOST=${WEBSITE_HOST} POSTGRES_PASSWORD: "${POSTGRES_PASSWORD}"
- WEBSITE_PORT=${WEBSITE_PORT} POSTGRES_DB: "${POSTGRES_DB}"
- POSTGRES_USER=${POSTGRES_USER} POSTGRES_HOST: "${POSTGRES_HOST}"
- POSTGRES_PASSWORD=${POSTGRES_PASSWORD} POSTGRES_PORT: "${POSTGRES_PORT}"
- POSTGRES_DB=${POSTGRES_DB} NODE_ENV: "${NODE_ENV}"
- POSTGRES_HOST=${POSTGRES_HOST} WEBSITE_HOST: "${WEBSITE_HOST}"
- POSTGRES_PORT=${POSTGRES_PORT} WEBSITE_PORT: "${WEBSITE_PORT}"
REDIS_HOST: "${REDIS_HOST}"
REDIS_PORT: "${REDIS_PORT}"
FORTYTWO_CLIENT_ID: "${FORTYTWO_CLIENT_ID}"
FORTYTWO_CLIENT_SECRET : "${FORTYTWO_CLIENT_SECRET}"
FORTYTWO_CALLBACK_URL: "${FORTYTWO_CALLBACK_URL}"
COOKIE_SECRET: "${COOKIE_SECRET}"
TWO_FACTOR_AUTHENTICATION_APP_NAME : "${TWO_FACTOR_AUTHENTICATION_APP_NAME}"
TICKET_FOR_PLAYING_GAME_SECRET : "${TICKET_FOR_PLAYING_GAME_SECRET}"
volumes: volumes:
- ./requirements/nestjs/api_back/src:/usr/app/src - ./requirements/nestjs/api_back/src:/usr/app/src
- ./requirements/nestjs/api_back/test:/usr/app/test/ - ./requirements/nestjs/api_back/test:/usr/app/test/
- nestjs_photos_volume:/usr/app/src/uploads/avatars - nestjs_photos_volume:/usr/app/src/uploads/avatars
env_file:
- .env
environment:
NODE_ENV: "${NODE_ENV}"
restart: unless-stopped restart: unless-stopped
depends_on: depends_on:
- postgresql - postgresql
@@ -35,6 +39,8 @@ services:
dockerfile: Dockerfile dockerfile: Dockerfile
environment: environment:
NODE_ENV: "${NODE_ENV}" NODE_ENV: "${NODE_ENV}"
WEBSITE_HOST: "${WEBSITE_HOST}"
WEBSITE_PORT: "${WEBSITE_PORT}"
restart: unless-stopped restart: unless-stopped
ports: ports:
- "8042:8042" - "8042:8042"
@@ -52,9 +58,9 @@ services:
- ./requirements/svelte/api_front/public:/usr/app/public/ - ./requirements/svelte/api_front/public:/usr/app/public/
ports: ports:
- "35729:35729" - "35729:35729"
env_file:
- .env
environment: environment:
WEBSITE_HOST: "${WEBSITE_HOST}"
WEBSITE_PORT: "${WEBSITE_PORT}"
NODE_ENV: "${NODE_ENV}" NODE_ENV: "${NODE_ENV}"
restart: unless-stopped restart: unless-stopped
depends_on: depends_on:

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

@@ -249,6 +249,7 @@ export class GameSession {
this._matchEnd(en.PlayerSide.right, true); this._matchEnd(en.PlayerSide.right, true);
} }
} }
private async _matchEnd(winner: en.PlayerSide, forfeit_flag: boolean = false) private async _matchEnd(winner: en.PlayerSide, forfeit_flag: boolean = false)
{ {
this.matchEnded = true; this.matchEnded = true;
@@ -262,6 +263,19 @@ export class GameSession {
// TODO: mettre à jour la route pour gerer les forfaits (actuellement le plus haut score gagne par defaut) // TODO: mettre à jour la route pour gerer les forfaits (actuellement le plus haut score gagne par defaut)
const gc = this.components; const gc = this.components;
console.log("================================= MATCH ENDED");
if (forfeit_flag) {
if (winner === en.PlayerSide.left)
{
gc.scoreLeft = 3
gc.scoreRight = 0
}
else
{
gc.scoreLeft = 0
gc.scoreRight = 3
}
}
await fetch(c.addressBackEnd + "/game/gameserver/updategame", await fetch(c.addressBackEnd + "/game/gameserver/updategame",
{ {
method: "POST", method: "POST",

1
srcs/requirements/game_server/game_back/src/server/wsServer.ts
View File

@@ -397,6 +397,7 @@ export function clientTerminate(client: Client)
if (client.gameSession) if (client.gameSession)
{ {
client.gameSession.playersMap.delete(client.id); client.gameSession.playersMap.delete(client.id);
client.gameSession.spectatorsMap.delete(client.id);
if (client.gameSession.playersMap.size === 0) if (client.gameSession.playersMap.size === 0)
{ {
client.gameSession.destroy(); client.gameSession.destroy();

38
srcs/requirements/nestjs/Dockerfile
View File

@@ -2,46 +2,8 @@ FROM node:alpine AS development
WORKDIR /usr/app WORKDIR /usr/app
ARG NODE_ENV
ARG WEBSITE_HOST
ARG WEBSITE_PORT
ARG POSTGRES_USER
ARG POSTGRES_PASSWORD
ARG POSTGRES_DB
ARG POSTGRES_HOST
ARG POSTGRES_PORT
COPY ./api_back ./ COPY ./api_back ./
COPY ./api_back/src/uploads/avatars/default.png ./uploads/avatars/default.png COPY ./api_back/src/uploads/avatars/default.png ./uploads/avatars/default.png
COPY ./api_back/.env ./.env
#RUN sed -i "s/\$NODE_ENV/${NODE_ENV}/g" ./.env && \
# sed -i "s/\$WEBSITE_HOST/${WEBSITE_HOST}/g" ./.env && \
# sed -i "s/\$WEBSITE_PORT/${WEBSITE_PORT}/g" ./.env && \
# sed -i "s/\$POSTGRES_USER/${POSTGRES_USER}/g" ./.env && \
# sed -i "s/\$POSTGRES_PASSWORD/${POSTGRES_PASSWORD}/g" ./.env && \
# sed -i "s/\$POSTGRES_DB/${POSTGRES_DB}/g" ./.env && \
# sed -i "s/\$POSTGRES_HOST/${POSTGRES_HOST}/g" ./.env && \
# sed -i "s/\$POSTGRES_PORT/${POSTGRES_PORT}/g" ./.env
RUN sed -i "s/\$NODE_ENV/${NODE_ENV}/g" ./.env
RUN sed -i "s/\$WEBSITE_HOST/${WEBSITE_HOST}/g" ./.env
RUN sed -i "s/\$WEBSITE_PORT/${WEBSITE_PORT}/g" ./.env
RUN sed -i "s/\$POSTGRES_USER/${POSTGRES_USER}/g" ./.env
RUN echo ["$POSTGRESS_PASSWORD"] && \
echo ["$POSTGRESS_PASSWORD"] && \
echo ["$POSTGRESS_PASSWORD"] && \
echo ["$POSTGRESS_PASSWORD"] && \
echo ["$POSTGRESS_PASSWORD"] && \
echo ["$POSTGRESS_PASSWORD"] && \
echo ["$POSTGRESS_PASSWORD"] && \
sed -i "s/\$POSTGRES_PASSWORD/'${POSTGRESS_PASSWORD}'/g" ./.env
RUN sed -i "s/\$POSTGRES_DB/${POSTGRES_DB}/g" ./.env
RUN sed -i "s/\$POSTGRES_HOST/${POSTGRES_HOST}/g" ./.env
RUN sed -i "s/\$POSTGRES_PORT/${POSTGRES_PORT}/g" ./.env
RUN npm install
RUN npm ci RUN npm ci
CMD [ "npm", "run", "start:dev" ] CMD [ "npm", "run", "start:dev" ]

3
srcs/requirements/nestjs/api_back/src/game/entity/game.entity.ts
View File

@@ -17,6 +17,9 @@ export class Game {
@Column({default : 0, nullable : true}) @Column({default : 0, nullable : true})
playerTwoUsernameResult : number playerTwoUsernameResult : number
@Column({default : 0})
gameOptions: number
@Column({unique : true}) @Column({unique : true})
gameServerIdOfTheMatch: string gameServerIdOfTheMatch: string

8
srcs/requirements/nestjs/api_back/src/game/game.controller.ts
View File

@@ -13,6 +13,14 @@ export class GameController {
constructor (private readonly gameService : GameService) { } constructor (private readonly gameService : GameService) { }
@Get('match/all')
@UseGuards(AuthenticateGuard)
@UseGuards(TwoFactorGuard)
async getMatchesForSpectator()
{
return this.gameService.getMatchesForSpectator();
}
@Get('ranking') @Get('ranking')
@UseGuards(AuthenticateGuard) @UseGuards(AuthenticateGuard)
@UseGuards(TwoFactorGuard) @UseGuards(TwoFactorGuard)

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

@@ -28,6 +28,21 @@ export class GameService {
private readonly friendShipService : FriendshipService private readonly friendShipService : FriendshipService
) { } ) { }
async getMatchesForSpectator() {
const games = await this.gameRepository.createQueryBuilder("game")
.where('game.isMatchIsFinished = :isMatchIsFinished', {isMatchIsFinished : false})
.getMany();
const gamesToReturn : Partial<Game>[] = []
for (const game of games)
{
gamesToReturn.push({gameServerIdOfTheMatch : game.gameServerIdOfTheMatch,
gameOptions : game.gameOptions, playerOneUsername : game.playerOneUsername,
playerTwoUsername : game.playerTwoUsername})
console.log("Is match is finished : " + game.isMatchIsFinished)
}
return gamesToReturn;
}
async getRankingForAllUsers(currentUser : User) { async getRankingForAllUsers(currentUser : User) {
const users = await this.userRepository.createQueryBuilder("user") const users = await this.userRepository.createQueryBuilder("user")
.leftJoinAndSelect("user.stats", "stats") .leftJoinAndSelect("user.stats", "stats")
@@ -255,6 +270,8 @@ export class GameService {
game.playerOneUsernameResult = updateGameDto.playerOneUsernameResult game.playerOneUsernameResult = updateGameDto.playerOneUsernameResult
game.playerTwoUsernameResult = updateGameDto.playerTwoUsernameResult game.playerTwoUsernameResult = updateGameDto.playerTwoUsernameResult
this.gameRepository.save(game); this.gameRepository.save(game);
console.log("On a sauvegardé la partie. Game :")
console.log(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})
if (!playerOne || !playerTwo) if (!playerOne || !playerTwo)

16
srcs/requirements/svelte/api_front/package-lock.json generated
View File

@@ -8,6 +8,7 @@
"name": "svelte-app", "name": "svelte-app",
"version": "1.0.0", "version": "1.0.0",
"dependencies": { "dependencies": {
"dotenv": "^16.0.3",
"sirv-cli": "^2.0.0", "sirv-cli": "^2.0.0",
"socket.io-client": "^4.5.4", "socket.io-client": "^4.5.4",
"svelte-spa-router": "^3.3.0" "svelte-spa-router": "^3.3.0"
@@ -17,6 +18,7 @@
"@rollup/plugin-node-resolve": "^11.0.0", "@rollup/plugin-node-resolve": "^11.0.0",
"@rollup/plugin-typescript": "^8.0.0", "@rollup/plugin-typescript": "^8.0.0",
"@tsconfig/svelte": "^2.0.0", "@tsconfig/svelte": "^2.0.0",
"@types/node": "^18.11.18",
"rollup": "^2.3.4", "rollup": "^2.3.4",
"rollup-plugin-css-only": "^3.1.0", "rollup-plugin-css-only": "^3.1.0",
"rollup-plugin-livereload": "^2.0.0", "rollup-plugin-livereload": "^2.0.0",
@@ -267,9 +269,9 @@
"dev": true "dev": true
}, },
"node_modules/@types/node": { "node_modules/@types/node": {
"version": "18.11.9", "version": "18.11.18",
"resolved": "https://registry.npmjs.org/@types/node/-/node-18.11.9.tgz", "resolved": "https://registry.npmjs.org/@types/node/-/node-18.11.18.tgz",
"integrity": "sha512-CRpX21/kGdzjOpFsZSkcrXMGIBWMGNIHXXBVFSH+ggkftxg+XYP20TESbh+zFvFj3EQOl5byk0HTRn1IL6hbqg==", "integrity": "sha512-DHQpWGjyQKSHj3ebjFI/wRKcqQcdR+MoFBygntYOZytCqNfkd2ZC4ARDJ2DQqhjH5p85Nnd3jhUJIXrszFX/JA==",
"dev": true "dev": true
}, },
"node_modules/@types/pug": { "node_modules/@types/pug": {
@@ -522,6 +524,14 @@
"node": ">=8" "node": ">=8"
} }
}, },
"node_modules/dotenv": {
"version": "16.0.3",
"resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.0.3.tgz",
"integrity": "sha512-7GO6HghkA5fYG9TYnNxi14/7K9f5occMlp3zXAuSxn7CKCxt9xbNWG7yF8hTCSUchlfWSe3uLmlPfigevRItzQ==",
"engines": {
"node": ">=12"
}
},
"node_modules/engine.io-client": { "node_modules/engine.io-client": {
"version": "6.2.3", "version": "6.2.3",
"resolved": "https://registry.npmjs.org/engine.io-client/-/engine.io-client-6.2.3.tgz", "resolved": "https://registry.npmjs.org/engine.io-client/-/engine.io-client-6.2.3.tgz",

2
srcs/requirements/svelte/api_front/package.json
View File

@@ -13,6 +13,7 @@
"@rollup/plugin-node-resolve": "^11.0.0", "@rollup/plugin-node-resolve": "^11.0.0",
"@rollup/plugin-typescript": "^8.0.0", "@rollup/plugin-typescript": "^8.0.0",
"@tsconfig/svelte": "^2.0.0", "@tsconfig/svelte": "^2.0.0",
"@types/node": "^18.11.18",
"rollup": "^2.3.4", "rollup": "^2.3.4",
"rollup-plugin-css-only": "^3.1.0", "rollup-plugin-css-only": "^3.1.0",
"rollup-plugin-livereload": "^2.0.0", "rollup-plugin-livereload": "^2.0.0",
@@ -25,6 +26,7 @@
"typescript": "^4.0.0" "typescript": "^4.0.0"
}, },
"dependencies": { "dependencies": {
"dotenv": "^16.0.3",
"sirv-cli": "^2.0.0", "sirv-cli": "^2.0.0",
"socket.io-client": "^4.5.4", "socket.io-client": "^4.5.4",
"svelte-spa-router": "^3.3.0" "svelte-spa-router": "^3.3.0"

1
srcs/requirements/svelte/api_front/rollup.config.js
View File

@@ -30,6 +30,7 @@ function serve() {
}; };
} }
export default { export default {
input: 'src/main.ts', input: 'src/main.ts',
output: { output: {

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>

3
srcs/requirements/svelte/api_front/src/Constantes.ts Normal file
View File

@@ -0,0 +1,3 @@
export const Domain = "transcendance";
export const Port = "8080";
export const PortIo = Port;

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

@@ -1,4 +1,7 @@
import App from './App.svelte'; import App from './App.svelte';
import dotenv from 'dotenv';
dotenv.config();
const app = new App({ const app = new App({
target: document.body, target: document.body,
props: { props: {
@@ -6,4 +9,4 @@ const app = new App({
} }
}); });
export default 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;

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

@@ -3,13 +3,13 @@
import { push } from "svelte-spa-router"; import { push } from "svelte-spa-router";
import { onMount } from 'svelte'; import { onMount } from 'svelte';
import { get } from "svelte/store"; import { get } from "svelte/store";
import { Domain, Port } from "../Constantes.svelte"; import { Domain, Port } from "../Constantes";
let user; let user;
onMount(async () => { onMount(async () => {
user = await fetch(`http://${Domain}:${Port}/api/v2/user`) user = await fetch(`http://${process.env.WEBSITE_HOST}:${Port}/api/v2/user`)
.then((resp) => resp.json()) .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 // i mean i could do a failed to load user or some shit, maybe with a .catch or something? but atm why bother

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

@@ -1,19 +1,7 @@
<script lang="ts"> <script lang="ts">
import { onMount } from "svelte"; import { onMount } from "svelte";
import { push } from "svelte-spa-router"; import { push } from "svelte-spa-router";
import { Domain, Port } from "../Constantes.svelte"; import { Domain, Port } from "../Constantes";
// 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 qrCodeImg;

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

@@ -3,7 +3,7 @@
import { onMount, onDestroy } from "svelte"; import { onMount, onDestroy } from "svelte";
import Header from '../../pieces/Header.svelte'; import Header from '../../pieces/Header.svelte';
import { fade, fly } from 'svelte/transition'; import { fade, fly } from 'svelte/transition';
import { Domain, Port } from "../../Constantes.svelte"; import { Domain, Port } from "../../Constantes";
import * as pong from "./client/pong"; import * as pong from "./client/pong";
import { gameState } from "./client/ws"; import { gameState } from "./client/ws";
@@ -90,6 +90,7 @@
hiddenGame = false; hiddenGame = false;
} }
// TODO: Un "else" peut-être ? Si pas de token on fait un truc ? // 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.
} }
const initGameForInvitedPlayer = async(invitation : any) => const initGameForInvitedPlayer = async(invitation : any) =>

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

@@ -4,7 +4,7 @@
import Header from '../../pieces/Header.svelte'; import Header from '../../pieces/Header.svelte';
import MatchListElem from "../../pieces/MatchListElem.svelte"; import MatchListElem from "../../pieces/MatchListElem.svelte";
import { fade, fly } from 'svelte/transition'; import { fade, fly } from 'svelte/transition';
import { Domain, Port } from "../../Constantes.svelte"; import { Domain, Port } from "../../Constantes";
import * as pongSpectator from "./client/pongSpectator"; import * as pongSpectator from "./client/pongSpectator";
import { gameState } from "./client/ws"; import { gameState } from "./client/ws";
@@ -17,36 +17,38 @@
//Game's stuff client side only //Game's stuff client side only
const gameAreaId = "game_area"; const gameAreaId = "game_area";
let sound = "off"; let sound = "off";
const dummyMatchList = [ // const dummyMatchList = [
{ // {
gameSessionId: gameSessionIdPLACEHOLDER, // gameSessionId: gameSessionIdPLACEHOLDER,
matchOptions: pongSpectator.MatchOptions.noOption, // matchOptions: pongSpectator.MatchOptions.noOption,
playerOneUsername: "toto", // playerOneUsername: "toto",
playerTwoUsername: "bruno", // playerTwoUsername: "bruno",
}, // },
{ // {
gameSessionId: gameSessionIdPLACEHOLDER, // gameSessionId: gameSessionIdPLACEHOLDER,
matchOptions: pongSpectator.MatchOptions.multiBalls, // matchOptions: pongSpectator.MatchOptions.multiBalls,
playerOneUsername: "pl1", // playerOneUsername: "pl1",
playerTwoUsername: "pl2", // playerTwoUsername: "pl2",
}, // },
{ // {
gameSessionId: "id6543", // gameSessionId: "id6543",
matchOptions: pongSpectator.MatchOptions.movingWalls | pongSpectator.MatchOptions.multiBalls, // matchOptions: pongSpectator.MatchOptions.movingWalls | pongSpectator.MatchOptions.multiBalls,
playerOneUsername: "bertand", // playerOneUsername: "bertand",
playerTwoUsername: "cassandre", // playerTwoUsername: "cassandre",
}, // },
{ // {
gameSessionId: "id3452", // gameSessionId: "id3452",
matchOptions: pongSpectator.MatchOptions.multiBalls, // matchOptions: pongSpectator.MatchOptions.multiBalls,
playerOneUsername: "madeleine", // playerOneUsername: "madeleine",
playerTwoUsername: "jack", // playerTwoUsername: "jack",
}, // },
]; // ];
let matchList = dummyMatchList; let matchList = [];
//html boolean for pages //html boolean for pages
let hiddenGame = true; let hiddenGame = true;
let hiddenMatchList = false;
onMount( async() => { onMount( async() => {
user = await fetch(`http://${Domain}:${Port}/api/v2/user`) user = await fetch(`http://${Domain}:${Port}/api/v2/user`)
@@ -54,7 +56,13 @@
allUsers = await fetch(`http://${Domain}:${Port}/api/v2/user/all`) allUsers = await fetch(`http://${Domain}:${Port}/api/v2/user/all`)
.then( x => x.json() ); .then( x => x.json() );
// WIP: fetch for match list here // WIP: fetch for match list here
matchList = dummyMatchList; const responseForMatchList = await fetch(`http://${Domain}:${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() => { onDestroy( async() => {
@@ -70,11 +78,16 @@
resetPage(); resetPage();
}; };
function resetPage() { async function resetPage() {
hiddenGame = true; hiddenGame = true;
pongSpectator.destroy(); pongSpectator.destroy();
// WIP: fetch for match list here // WIP: fetch for match list here
matchList = dummyMatchList; matchList = await fetch(`http://${Domain}:${Port}/api/v2/game/match/all`)
.then( x => x.json() );
console.log("matchList");
if (matchList.length <= 0)
hiddenMatchList = true;
console.log(matchList);
}; };
</script> </script>
@@ -93,7 +106,10 @@
<div id="div_game"> <div id="div_game">
<div id="game_options"> <div id="game_options">
<fieldset> <fieldset>
<legend>options</legend> {#if hiddenMatchList}
<legend>no match available</legend>
{:else}
<legend>options</legend>
<div> <div>
<p>sound :</p> <p>sound :</p>
<input type="radio" id="sound_on" name="sound_selector" bind:group={sound} value="on"> <input type="radio" id="sound_on" name="sound_selector" bind:group={sound} value="on">
@@ -101,13 +117,15 @@
<input type="radio" id="sound_off" name="sound_selector" bind:group={sound} value="off"> <input type="radio" id="sound_off" name="sound_selector" bind:group={sound} value="off">
<label for="sound_off">off</label> <label for="sound_off">off</label>
</div> </div>
<menu id="match_list">
{#each matchList as match}
<MatchListElem match={match} on:click={(e) => initGameSpectator(match.gameServerIdOfTheMatch, match.gameOptions)} />
{/each}
</menu>
{/if}
</fieldset> </fieldset>
</div> </div>
<menu id="match_list">
{#each matchList as match}
<MatchListElem match={match} on:click={(e) => initGameSpectator(match.gameSessionId, match.matchOptions)} />
{/each}
</menu>
</div> </div>
{:else} {:else}
<div id="div_game"> <div id="div_game">

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

@@ -2,7 +2,7 @@
<script lang="ts"> <script lang="ts">
import { onMount, onDestroy } from "svelte"; import { onMount, onDestroy } from "svelte";
import Header from "../../pieces/Header.svelte"; import Header from "../../pieces/Header.svelte";
import { Domain, Port } from "../../Constantes.svelte"; import { Domain, Port } from "../../Constantes";
//user's stuff //user's stuff
let currentUser; let currentUser;

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

@@ -2,7 +2,7 @@
import { onMount } from 'svelte'; import { onMount } from 'svelte';
import GenerateUserDisplay from '../../pieces/GenerateUserDisplay.svelte'; import GenerateUserDisplay from '../../pieces/GenerateUserDisplay.svelte';
import { Domain, Port } from "../../Constantes.svelte"; import { Domain, Port } from "../../Constantes";
import Chat from '../../pieces/chat/Chat.svelte'; import Chat from '../../pieces/chat/Chat.svelte';

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

@@ -2,7 +2,7 @@
import { onMount } from "svelte"; import { onMount } from "svelte";
import { binding_callbacks } from "svelte/internal"; import { binding_callbacks } from "svelte/internal";
import { Domain, Port } from "../../Constantes.svelte"; import { Domain, Port } from "../../Constantes";
import Button from "../../pieces/Button.svelte"; import Button from "../../pieces/Button.svelte";
import DisplayAUser from "../../pieces/DisplayAUser.svelte"; import DisplayAUser from "../../pieces/DisplayAUser.svelte";

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

@@ -3,7 +3,7 @@
import Card from '../../pieces/Card.svelte'; import Card from '../../pieces/Card.svelte';
import {onMount} from 'svelte'; import {onMount} from 'svelte';
import { push } from 'svelte-spa-router'; import { push } from 'svelte-spa-router';
import { Domain, Port } from "../../Constantes.svelte"; import { Domain, Port } from "../../Constantes";
import Button from '../../pieces/Button.svelte'; import Button from '../../pieces/Button.svelte';
let user; let user;

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

@@ -2,7 +2,7 @@
import { onMount } from 'svelte'; import { onMount } from 'svelte';
import GenerateUserDisplay from './GenerateUserDisplay.svelte'; import GenerateUserDisplay from './GenerateUserDisplay.svelte';
import { Domain, Port } from "../Constantes.svelte"; import { Domain, Port } from "../Constantes";
// import {updateGeneratedUser} from './GenerateUserDisplay.svelte'; // import {updateGeneratedUser} from './GenerateUserDisplay.svelte';
export let aUsername; export let aUsername;

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

@@ -1,7 +1,7 @@
<script lang="ts"> <script lang="ts">
import { onMount } from 'svelte'; import { onMount } from 'svelte';
import { Domain, Port } from "../Constantes.svelte"; import { Domain, Port } from "../Constantes";
export let user; export let user;
export let primary; export let primary;
@@ -43,7 +43,7 @@
let index = 0, interval = 1000; let index = 0, interval = 1000;
const rand = (min, max) => const rand = (min, max) =>
Math.floor(Math.random() * (max - min + 1)) + min; Math.floor(Math.random() * (max - min + 1)) + min;
// it's unhappy that "star" isn't typeset, no idea what to do about it... // 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++) { for (let i = 0; i < 3; i++) {
setTimeout(() => { setTimeout(() => {
animate(stars[i]); animate(stars[i]);
setInterval(() => animate(stars[i]), 1000); setInterval(() => animate(stars[i]), 1000);
}, index++ * (interval / 3)) }, index++ * (interval / 3))
} }
@@ -80,7 +80,7 @@
<!-- <img class="icon" src="{user.image_url}" alt="default user icon"> --> <!-- <img class="icon" src="{user.image_url}" alt="default user icon"> -->
<img class="avatar" src="{avatar}" alt="default user icon"> <img class="avatar" src="{avatar}" alt="default user icon">
<div class="username">{user.username}</div> <div class="username">{user.username}</div>
<div class="rank">Rank: <div class="rank">Rank:
<span class="glitter"> <span class="glitter">
<span bind:this={stars[0]} class="glitter-star"> <span bind:this={stars[0]} class="glitter-star">
<svg viewBox="0 0 512 512"> <svg viewBox="0 0 512 512">
@@ -166,7 +166,7 @@
/* Glittery Star Stuff */ /* Glittery Star Stuff */
:root { :root {
--purple: rgb(123, 31, 162); --purple: rgb(123, 31, 162);
--violet: rgb(103, 58, 183); --violet: rgb(103, 58, 183);
--pink: rgb(244, 143, 177); --pink: rgb(244, 143, 177);
@@ -177,7 +177,7 @@
from { from {
background-position: 0% center; background-position: 0% center;
} }
to { to {
background-position: -200% center; background-position: -200% center;
} }
@@ -187,7 +187,7 @@
from, to { from, to {
transform: scale(0); transform: scale(0);
} }
50% { 50% {
transform: scale(1); transform: scale(1);
} }
@@ -197,7 +197,7 @@
from { from {
transform: rotate(0deg); transform: rotate(0deg);
} }
to { to {
transform: rotate(180deg); transform: rotate(180deg);
} }
@@ -242,7 +242,7 @@
var(--purple) var(--purple)
); );
background-size: 200%; background-size: 200%;
/* Keep these for Safari and chrome */ /* Keep these for Safari and chrome */
-webkit-background-clip: text; -webkit-background-clip: text;
-webkit-text-fill-color: transparent; -webkit-text-fill-color: transparent;

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

@@ -1,7 +1,7 @@
<script lang="ts"> <script lang="ts">
import { push } from "svelte-spa-router"; import { push } from "svelte-spa-router";
import { location } from 'svelte-spa-router'; import { location } from 'svelte-spa-router';
import { Domain, Port } from "../Constantes.svelte"; import { Domain, Port } from "../Constantes";
import active from 'svelte-spa-router/active' import active from 'svelte-spa-router/active'
// or i could leave them all and not display if they're active? // or i could leave them all and not display if they're active?

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

@@ -4,8 +4,8 @@
import { MatchOptions } from "../pages/game/client/pongSpectator"; import { MatchOptions } from "../pages/game/client/pongSpectator";
export let match: { export let match: {
gameSessionId: string, gameServerIdOfTheMatch: string,
matchOptions: MatchOptions, gameOptions: MatchOptions,
playerOneUsername: string, playerOneUsername: string,
playerTwoUsername: string playerTwoUsername: string
}; };
@@ -13,14 +13,14 @@
let matchOptionsString = ""; let matchOptionsString = "";
onMount( async() => { onMount( async() => {
if (match.matchOptions === MatchOptions.noOption) { if (match.gameOptions === MatchOptions.noOption) {
matchOptionsString = "standard"; matchOptionsString = "standard";
} }
else { else {
if (match.matchOptions & MatchOptions.multiBalls) { if (match.gameOptions & MatchOptions.multiBalls) {
matchOptionsString += "multi balls"; matchOptionsString += "multi balls";
} }
if (match.matchOptions & MatchOptions.movingWalls) { if (match.gameOptions & MatchOptions.movingWalls) {
if (matchOptionsString) { matchOptionsString += ", "; } if (matchOptionsString) { matchOptionsString += ", "; }
matchOptionsString += "moving walls"; matchOptionsString += "moving walls";
} }

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

@@ -2,7 +2,7 @@
<script lang="ts"> <script lang="ts">
import Layouts from './Chat_layouts.svelte'; import Layouts from './Chat_layouts.svelte';
import { Domain, PortIo } from "../../Constantes.svelte"; import { Domain, PortIo } from "../../Constantes";
export let color = "transparent"; export let color = "transparent";
/* web sockets with socket.io /* web sockets with socket.io