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

GameSpectator nearly done (missing fetch matchlist from Nest)

Browse Source 
+ matchEnded/matchAbort proper reset (replace setTimeout)
+ abort window.addEventListener('keydown/keyup', ...)
+ refactoring Game.svelte and others
+ fix $POSTGRES_PASSWORD in make_env.sh
+ Wip bug audio
This commit is contained in:
LuckyLaszlo
2023-01-01 22:13:22 +01:00
parent 941b0ea7ea
commit eae5b70194
21 changed files with 233 additions and 186 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -5,9 +5,7 @@
import { fade, fly } from 'svelte/transition';
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;
@@ -44,28 +42,14 @@
})
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://transcendance:8080/api/v2/game/ticket", {
@@ -87,39 +71,35 @@
{
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 ?
}
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;
@@ -132,32 +112,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);
}
@@ -213,7 +181,16 @@
}
function leaveMatch() {
resetPage();
};
function resetPage() {
hiddenGame = true;
optionsAreNotSet = true
showError = false;
showMatchEnded = false;
options.reset();
options.playerOneUsername = user.username;
pong.destroy();
};
@@ -262,44 +239,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}

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

@@ -6,9 +6,8 @@
import { fade, fly } from 'svelte/transition';
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;
@@ -19,11 +18,17 @@
let sound = "off";
const dummyMatchList = [
{
gameSessionId: "id2445",
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,
@@ -55,14 +60,20 @@
pongSpectator.destroy();
})
const initGameSpectator = async(gameSessionId: string, matchOptions: pongSpectator.MatchOptions) => {
async function initGameSpectator(gameSessionId: string, matchOptions: pongSpectator.MatchOptions) {
pongSpectator.init(matchOptions, sound, gameAreaId, gameSessionId);
hiddenGame = false;
};
function leaveMatch() {
resetPage();
};
function resetPage() {
hiddenGame = true;
pongSpectator.destroy();
// WIP: fetch for match list here
matchList = dummyMatchList;
};
</script>

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);
}

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

@@ -10,14 +10,14 @@ 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);
}
@@ -36,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,
}