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

avatar display on game pages

Browse Source 
+ multiples user.status bug unresolved, temp rollback in generateToken()
+ STATUS enum fix game.service.ts
+ multiples smalls refactoring
This commit is contained in:
LuckyLaszlo
2023-01-11 12:00:03 +01:00
parent 0f60b83121
commit de26c3c89c
10 changed files with 191 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -12,6 +12,9 @@
let user;
let allUsers;
let playerOneAvatar;
let playerTwoAvatar;
//Game's stuff
const options = new pong.InitOptions();
const gameAreaId = "game_area";
@@ -26,9 +29,10 @@
let showWaitPage = false;
let invitations = [];
let watchGameStateInterval;
const watchGameStateIntervalRate = 142;
let watchMatchStartInterval;
const watchMatchStartIntervalRate = 111;
onMount( async() => {
user = await fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/user`)
@@ -39,6 +43,7 @@
})
onDestroy( async() => {
clearInterval(watchMatchStartInterval);
clearInterval(watchGameStateInterval);
pong.destroy();
})
@@ -76,6 +81,7 @@
showWaitPage = false;
if (response.ok && token)
{
watchMatchStartInterval = setInterval(watchMatchStart, watchMatchStartIntervalRate);
watchGameStateInterval = setInterval(watchGameState, watchGameStateIntervalRate);
pong.init(matchOptions, options, gameAreaId, token);
hiddenGame = false;
@@ -106,6 +112,7 @@
console.log(invitation);
if (invitation.token)
{
watchMatchStartInterval = setInterval(watchMatchStart, watchMatchStartIntervalRate);
watchGameStateInterval = setInterval(watchGameState, watchGameStateIntervalRate);
options.playerOneUsername = invitation.playerOneUsername;
options.playerTwoUsername = invitation.playerTwoUsername;
@@ -117,16 +124,24 @@
}
}
async function watchMatchStart()
{
if (gameState.matchStarted)
{
clearInterval(watchMatchStartInterval);
playerOneAvatar = await fetchAvatar(gameState.playerOneUsername);
playerTwoAvatar = await fetchAvatar(gameState.playerTwoUsername);
gameState.matchStarted = gameState.matchStarted; // trigger Svelte reactivity
}
}
const watchGameState = () => {
console.log("watchGameState");
if (gameState) { // trigger Svelte reactivity
gameState.matchStarted = gameState.matchStarted;
gameState.matchEnded = gameState.matchEnded;
gameState.matchAborted = gameState.matchAborted;
}
if (gameState.matchAborted || gameState.matchEnded)
{
clearInterval(watchGameStateInterval);
gameState.matchEnded = gameState.matchEnded; // trigger Svelte reactivity
gameState.matchAborted = gameState.matchAborted; // trigger Svelte reactivity
console.log("watchGameState, end");
setTimeout(() => {
resetPage();
@@ -176,10 +191,28 @@
}
function leaveMatch() {
clearInterval(watchMatchStartInterval);
clearInterval(watchGameStateInterval);
resetPage();
};
async function fetchAvatar(username: string) // TODO: Could be shared with others components
{
return fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/user/avatar?username=${username}`)
.then((response) => {
if (!response.ok) {
throw new Error("Avatar not retrieved");
}
return response.blob();
})
.then((blob) => {
return URL.createObjectURL(blob);
})
.catch((error) => {
console.log("catch fetchAvatar: ", error);
});
}
</script>
<Header />
@@ -213,6 +246,14 @@
</div>
{#if !hiddenGame}
{#if gameState.matchStarted}
<div class="div_game">
<img class="avatar" src="{playerOneAvatar}" alt="player one avatar">
'{gameState.playerOneUsername}' VS '{gameState.playerTwoUsername}'
<img class="avatar" src="{playerTwoAvatar}" alt="player two avatar">
</div>
{/if}
{#if gameState.matchStarted && !gameState.matchEnded}
<div class="div_game">
<button class="pong_button" on:click={leaveMatch}>forfeit</button>
@@ -356,5 +397,11 @@ canvas {
font-size: x-large;
padding: 10px;
}
.avatar {
min-height: 100px;
min-width: 100px;
max-width: 100px;
max-height: 100px;
}
</style>

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

@@ -1,10 +1,11 @@
<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 Header from '../../pieces/Header.svelte';
import MatchListElem from "../../pieces/MatchListElem.svelte";
import type { Match } from "../../pieces/Match";
import * as pongSpectator from "./client/pongSpectator";
import { gameState } from "./client/ws";
@@ -13,14 +14,17 @@
let user;
let allUsers;
//Game's stuff client side only
let playerOneAvatar;
let playerTwoAvatar;
//Game's stuff
const gameAreaId = "game_area";
let sound = "off";
let matchList = [];
//html boolean for pages
let hiddenGame = true;
let matchList: Match[] = [];
let watchGameStateInterval;
const watchGameStateIntervalRate = 142;
@@ -39,22 +43,27 @@
pongSpectator.destroy();
})
async function initGameSpectator(gameSessionId: string, matchOptions: pongSpectator.MatchOptions)
async function initGameSpectator(match: Match)
{
watchGameStateInterval = setInterval(watchGameState, watchGameStateIntervalRate);
pongSpectator.init(matchOptions, sound, gameAreaId, gameSessionId);
pongSpectator.init(match.gameOptions, sound, gameAreaId, match.gameServerIdOfTheMatch);
// Users avatar
gameState.playerOneUsername = match.playerOneUsername;
gameState.playerTwoUsername = match.playerTwoUsername;
playerOneAvatar = await fetchAvatar(gameState.playerOneUsername);
playerTwoAvatar = await fetchAvatar(gameState.playerTwoUsername);
hiddenGame = false;
};
const watchGameState = () => {
console.log("watchGameState")
if (gameState) { // trigger Svelte reactivity
gameState.matchStarted = gameState.matchStarted;
gameState.matchEnded = gameState.matchEnded;
gameState.matchAborted = gameState.matchAborted;
}
// gameState.matchStarted = gameState.matchStarted; // trigger Svelte reactivity
if (gameState.matchAborted || gameState.matchEnded)
{
gameState.matchEnded = gameState.matchEnded; // trigger Svelte reactivity
gameState.matchAborted = gameState.matchAborted; // trigger Svelte reactivity
clearInterval(watchGameStateInterval);
console.log("watchGameState, end")
setTimeout(() => {
@@ -80,6 +89,22 @@
.then( x => x.json() );
};
async function fetchAvatar(username: string) // TODO: Could be shared with others components
{
return fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/user/avatar?username=${username}`)
.then((response) => {
if (!response.ok) {
throw new Error("Avatar not retrieved");
}
return response.blob();
})
.then((blob) => {
return URL.createObjectURL(blob);
})
.catch((error) => {
console.log("catch fetchAvatar: ", error);
});
}
</script>
<!-- -->
@@ -102,6 +127,12 @@
</div>
{#if !hiddenGame}
<div class="div_game">
<img class="avatar" src="{playerOneAvatar}" alt="player one avatar">
'{gameState.playerOneUsername}' VS '{gameState.playerTwoUsername}'
<img class="avatar" src="{playerTwoAvatar}" alt="player two avatar">
</div>
{#if !gameState.matchEnded}
<div class="div_game">
<button class="pong_button" on:click={leaveMatch}>leave</button>
@@ -127,7 +158,7 @@
{#if matchList.length !== 0}
<menu id="match_list">
{#each matchList as match}
<MatchListElem match={match} on:click={(e) => initGameSpectator(match.gameServerIdOfTheMatch, match.gameOptions)} />
<MatchListElem match={match} on:click={(e) => initGameSpectator(match)} />
{/each}
</menu>
{:else}
@@ -195,10 +226,15 @@ canvas {
font-size: x-large;
padding: 10px;
}
#match_list {
font-family: 'Courier New', Courier, monospace;
font-size: large;
}
.avatar {
min-height: 100px;
min-width: 100px;
max-width: 100px;
max-height: 100px;
}
</style>

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

@@ -3,7 +3,7 @@ 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, resetGameState } from "./ws.js";
import { socket, gameState } from "./ws.js";
import { initAudio } from "./audio.js";
import type { InitOptions } from "./class/InitOptions.js";
@@ -57,5 +57,5 @@ export function destroyBase()
}
setGc(null);
setMatchOptions(null);
resetGameState();
gameState.resetGameState();
}

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

@@ -10,16 +10,22 @@ import { muteFlag, soundRoblox } from "./audio.js"
import { sleep } from "./utils.js";
import { Vector, VectorInteger } from "../shared_js/class/Vector.js";
export const gameState = {
matchStarted: false,
matchEnded: false,
matchAborted: false
}
export function resetGameState() {
gameState.matchStarted = false;
gameState.matchEnded = false;
gameState.matchAborted = false;
class GameState {
matchStarted: boolean;
matchEnded: boolean;
matchAborted: boolean;
playerOneUsername: string;
playerTwoUsername: string;
constructor() {
this.resetGameState();
}
resetGameState() {
this.matchStarted = false;
this.matchEnded = false;
this.matchAborted = false;
this.playerOneUsername = "";
this.playerTwoUsername = "";
}
}
class ClientInfo {
@@ -39,6 +45,7 @@ class ClientInfoSpectator {
const wsUrl = "ws://" + process.env.WEBSITE_HOST + ":" + process.env.WEBSITE_PORT + "/pong";
export let socket: WebSocket;
export const gameState = new GameState();
export const clientInfo = new ClientInfo();
export const clientInfoSpectator = new ClientInfoSpectator(); // WIP, could refactor this
@@ -85,6 +92,8 @@ function preMatchListener(this: WebSocket, event: MessageEvent)
break;
case en.EventTypes.matchmakingComplete:
clientInfo.side = (<ev.EventMatchmakingComplete>data).side;
gameState.playerOneUsername = (<ev.EventMatchmakingComplete>data).playerOneUsername;
gameState.playerTwoUsername = (<ev.EventMatchmakingComplete>data).playerTwoUsername;
if (clientInfo.side === en.PlayerSide.left)
{
clientInfo.racket = gc.playerLeft;

9
srcs/requirements/svelte/api_front/src/pages/game/shared_js/class/Event.ts
View File

@@ -18,10 +18,13 @@ export class EventAssignId extends ServerEvent {
}
export class EventMatchmakingComplete extends ServerEvent {
side: en.PlayerSide;
constructor(side: en.PlayerSide) {
side: en.PlayerSide = en.PlayerSide.noSide;
playerOneUsername: string;
playerTwoUsername: string;
constructor(playerOneUsername: string, playerTwoUsername: string) {
super(en.EventTypes.matchmakingComplete);
this.side = side;
this.playerOneUsername = playerOneUsername;
this.playerTwoUsername = playerTwoUsername;
}
}

10
srcs/requirements/svelte/api_front/src/pieces/Match.ts Normal file
View File

@@ -0,0 +1,10 @@
import type { MatchOptions } from "../pages/game/client/pongSpectator";
export { MatchOptions } from "../pages/game/client/pongSpectator";
export class Match {
gameServerIdOfTheMatch: string;
gameOptions: MatchOptions;
playerOneUsername: string;
playerTwoUsername: string;
}

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

@@ -1,14 +1,9 @@
<script lang="ts">
import { onMount, onDestroy } from "svelte";
import { MatchOptions } from "../pages/game/client/pongSpectator";
import { Match, MatchOptions} from "./Match";
export let match: {
gameServerIdOfTheMatch: string,
gameOptions: MatchOptions,
playerOneUsername: string,
playerTwoUsername: string
};
export let match: Match;
let matchOptionsString = "";
@@ -32,7 +27,7 @@
<li>
<button on:click>
"{match.playerOneUsername}" VS "{match.playerTwoUsername}"
'{match.playerOneUsername}' VS '{match.playerTwoUsername}'
<br/> [{matchOptionsString}]
</button>
</li>