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

refactoring Game.svelte (INVITATION NOT TESTED !)

Browse Source
This commit is contained in:
LuckyLaszlo
2022-12-22 05:15:32 +01:00
parent 84062d5a89
commit 7de9f3a9f1
3 changed files with 80 additions and 113 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,41 +1,23 @@
<script lang="ts">
/* TODO Luke: refactoring */
import * as enumeration from './shared_js/enums';
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 { onMount, onDestroy } from "svelte";
import Header from '../../pieces/Header.svelte';
import { fade, fly } from 'svelte/transition';
import * as enumeration from './shared_js/enums';
import * as pong from "./client/pong"
import * as pongSpectator from "./client/pongSpectator" // TODO init spectator
//user's stuff
let user;
let allUsers;
//Game's stuff nest side
//Game's stuff
let optionsAreNotSet = true;
let isSomeoneIsInvited = false;
let playerTwoUsername = "";
const options = new pong.InitOptions();
//Game's stuff client side only
let sound = "on";
let gameAreaId = "game_area";
//Game's stuff gameserver side
let multi_balls = false;
let moving_walls = false;
let matchOption : enumeration.MatchOptions = enumeration.MatchOptions.noOption;
const gameAreaId = "game_area";
//html boolean for pages
let showWaitPage = false;
@@ -47,37 +29,44 @@
let isThereAnyInvitation = false;
let invitations = [];
let waitingMessage = "Please wait..."
let errorMessageWhenAttemptingToGetATicket = "";
onMount( async() => {
user = await fetch('http://transcendance:8080/api/v2/user')
.then( x => x.json() );
allUsers = await fetch('http://transcendance:8080/api/v2/user/all')
.then( x => x.json() );
options.playerOneUsername = user.username;
})
onDestroy( async() => {
// TODO: destroy() in pong
pong.destroy();
})
const initGame = async() => {
optionsAreNotSet = false
showWaitPage = true
if (multi_balls === true)
matchOption |= enumeration.MatchOptions.multiBalls
if (moving_walls === true )
matchOption |= enumeration.MatchOptions.movingWalls
const initGame = async() =>
{
optionsAreNotSet = false;
showWaitPage = true;
let matchOptions = enumeration.MatchOptions.noOption;
if (options.multi_balls === true) {
matchOptions |= enumeration.MatchOptions.multiBalls
}
if (options.moving_walls === true) {
matchOptions |= 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 : isSomeoneIsInvited
playerOneUsername : options.playerOneUsername,
playerTwoUsername : options.playerTwoUsername,
gameOptions : matchOptions,
isGameIsWithInvitation : options.isSomeoneIsInvited
})
})
const responseFromServer = await responseWhenGrantToken;
@@ -92,65 +81,34 @@
showError = false;
showWaitPage = false
optionsAreNotSet = true
playerTwoUsername = "";
matchOption = 0;
options.playerTwoUsername = "";
matchOptions = enumeration.MatchOptions.noOption;
}, 5000)
}
else if (token)
{
(sound === "off") ? initAudio(true) : initAudio(false);
initMatchOptions(matchOption)
initPong(new GameArea(gameAreaId))
initGc(new GameComponentsClient(matchOption, pong.ctx))
initStartFunction(start)
pong.init(options, gameAreaId, token);
hiddenGame = false;
isSomeoneIsInvited ?
initWebSocket(matchOption, token, user.username, true, playerTwoUsername) :
initWebSocket(matchOption, token, user.username)
}
}
const initGameForPrivateParty = async(invitation : any) => {
// Pour Cherif: renommer en un truc du genre "initGameForInvitedPlayer" ?
const initGameForPrivateParty = async(invitation : any) =>
{
optionsAreNotSet = false
showWaitPage = true
console.log("invitation : ")
console.log(invitation)
if (invitation.token)
{
initMatchOptions(matchOption)
initPong(new GameArea(gameAreaId))
initGc(new GameComponentsClient(matchOption, pong.ctx))
initStartFunction(start)
options.playerOneUsername = invitation.playerOneUsername;
options.playerTwoUsername = user.username;
pong.init(options, gameAreaId, invitation.token);
showWaitPage = false
hiddenGame = 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
@@ -234,26 +192,26 @@
<fieldset>
<legend>game options</legend>
<div>
<input type="checkbox" id="multi_balls" name="multi_balls" bind:checked={multi_balls}>
<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={moving_walls}>
<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={sound} value="on">
<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={sound} value="off">
<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={isSomeoneIsInvited}>
<input type="checkbox" id="isSomeoneIsInvited" bind:checked={options.isSomeoneIsInvited}>
<label for="moving_walls">Invite a friend</label>
</div>
{#if isSomeoneIsInvited === true}
<select bind:value={playerTwoUsername}>
{#if options.isSomeoneIsInvited === true}
<select bind:value={options.playerTwoUsername}>
{#each allUsers as user }
<option value={user.username}>{user.username}</option>
{/each}
@@ -293,7 +251,8 @@
</div>
{/if}
{/if}
</div>
</div> <!-- div "game_page" -->
<style>
@font-face {

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

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

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

@@ -1,9 +1,4 @@
initDom();
function initDom() {
document.getElementById("play_pong_button").addEventListener("click", init);
}
import * as c from "./constants.js"
import * as en from "../shared_js/enums.js"
import { GameArea } from "./class/GameArea.js";
@@ -21,35 +16,43 @@ import { initAudio } from "./audio.js";
import { pong, gc } from "./global.js"
import { initPong, initGc, initMatchOptions, initStartFunction } from "./global.js"
export class InitOptions {
sound = "off";
multi_balls = false;
moving_walls = false;
isSomeoneIsInvited = false;
playerOneUsername = "";
playerTwoUsername = "";
}
function init()
export function init(options: InitOptions, gameAreaId: string, token: string)
{
console.log("multi_balls:"+(<HTMLInputElement>document.getElementById("multi_balls")).checked);
console.log("moving_walls:"+(<HTMLInputElement>document.getElementById("moving_walls")).checked);
console.log("sound_on:"+(<HTMLInputElement>document.getElementById("sound_on")).checked);
let matchOptions = en.MatchOptions.noOption;
if (options.multi_balls === true) {
matchOptions |= en.MatchOptions.multiBalls
}
if (options.moving_walls === true) {
matchOptions |= en.MatchOptions.movingWalls
}
let soundMutedFlag = false;
if ( (<HTMLInputElement>document.getElementById("sound_off")).checked ) {
soundMutedFlag = true;
}
initAudio(soundMutedFlag);
let matchOptions: en.MatchOptions = en.MatchOptions.noOption;
if ( (<HTMLInputElement>document.getElementById("multi_balls")).checked ) {
matchOptions |= en.MatchOptions.multiBalls;
}
if ( (<HTMLInputElement>document.getElementById("moving_walls")).checked ) {
matchOptions |= en.MatchOptions.movingWalls;
}
initMatchOptions(matchOptions);
initAudio(options.sound);
document.getElementById("div_game_options").remove();
document.getElementById("div_game_instructions").remove();
initPong(new GameArea());
initPong(new GameArea(gameAreaId));
initGc(new GameComponentsClient(matchOptions, pong.ctx));
initStartFunction(start);
initWebSocket(matchOptions);
if (options.isSomeoneIsInvited) {
initWebSocket(matchOptions, token, options.playerOneUsername, true, options.playerTwoUsername);
}
else {
initWebSocket(matchOptions, token, options.playerOneUsername);
}
}
export function destroy()
{
// TODO
}
function start()