Merge remote-tracking branch 'origin/master' into eric_front_and_back

This commit is contained in:
Me
2023-01-15 22:07:48 +01:00
11 changed files with 169 additions and 177 deletions

View File

@@ -279,7 +279,8 @@ export class GameSession {
gc.scoreRight = 0;
}
}
await fetch(c.addressBackEnd + "/game/gameserver/updategame",
fetch(`${c.addressBackEnd}/game/gameserver/updategame`,
{
method: "POST",
headers: {
@@ -290,6 +291,14 @@ export class GameSession {
playerOneUsernameResult: gc.scoreLeft,
playerTwoUsernameResult: gc.scoreRight,
})
})
.then((response) => {
if (!response.ok) {
throw new Error("HTTP " + response.status);
}
})
.catch((error) => {
console.log("catch /game/gameserver/updategame: ", error);
});
setTimeout(this.destroy, 15000, this);

View File

@@ -89,7 +89,8 @@ async function clientAnnounceListener(this: WebSocket, data: string)
if (announce.privateMatch) {
body.playerTwoUsername = announce.playerTwoUsername;
}
const response = await fetch(c.addressBackEnd + "/game/gameserver/validate",
fetch(`${c.addressBackEnd}/game/gameserver/validate`,
{
method: "POST",
headers: {
@@ -97,17 +98,18 @@ async function clientAnnounceListener(this: WebSocket, data: string)
},
body: JSON.stringify(body)
})
.catch(error => console.log("ERROR : " + error));
if (!response || !response.ok)
{
let errMessage = "validate token error";
if (response) {
errMessage = (await response.json()).message;
.then((response) => {
if (!response.ok) {
throw new Error("HTTP " + response.status);
}
this.send(JSON.stringify( new ev.EventError(errMessage) ));
})
.catch((error) => {
console.log("catch /game/gameserver/validate: ", error);
this.send(JSON.stringify( new ev.EventError("validate token error") ));
clientTerminate(clientsMap.get(this.id));
return;
}
});
player.matchOptions = announce.matchOptions;
player.token = announce.token;
player.username = announce.username;
@@ -232,14 +234,26 @@ function privateMatchmaking(player: ClientPlayer)
if (player.socket.OPEN) {
player.socket.send(JSON.stringify( new ev.EventMatchAbort() ));
}
const response = await fetch(c.addressBackEnd + "/game/gameserver/destroysession",{
fetch(`${c.addressBackEnd}/game/gameserver/destroysession`,
{
method: "POST",
headers : {"Content-Type": "application/json"},
body : JSON.stringify({
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
token : player.token
})
})
.catch(error => console.log("ERROR : " + error));
.then((response) => {
if (!response.ok) {
throw new Error("HTTP " + response.status);
}
})
.catch((error) => {
console.log("catch /game/gameserver/destroysession: ", error);
});
clientTerminate(player);
}
}, 60000);
@@ -315,16 +329,22 @@ async function playerReadyConfirmationListener(this: WebSocket, data: string)
playerOneUsernameResult : 0,
playerTwoUsernameResult : 0
};
const response = await fetch(c.addressBackEnd + "/game/gameserver/creategame",
fetch(`${c.addressBackEnd}/game/gameserver/creategame`,
{
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(body)
});
if (!response.ok)
{
})
.then((response) => {
if (!response.ok) {
throw new Error("HTTP " + response.status);
}
})
.catch((error) => {
console.log("catch /game/gameserver/creategame: ", error);
gameSessionsMap.delete(gameSession.id);
gameSession.playersMap.forEach((client) => {
client.socket.send(JSON.stringify( new ev.EventMatchAbort() ));
@@ -332,7 +352,7 @@ async function playerReadyConfirmationListener(this: WebSocket, data: string)
clientTerminate(client);
});
return;
}
});
gameSession.playersMap.forEach( (client) => {
client.socket.send(JSON.stringify( new ev.ServerEvent(en.EventTypes.matchStart) ));
@@ -445,18 +465,22 @@ export async function clientTerminate(client: Client)
if (client.role === en.ClientRole.player)
{
const player = client as ClientPlayer;
console.log("/resetuserstatus " + player.username);
const response = await fetch(c.addressBackEnd + "/game/gameserver/resetuserstatus",
fetch(`${c.addressBackEnd}/game/gameserver/resetuserstatus`,
{
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({username: player.username})
})
.then((response) => {
if (!response.ok) {
throw new Error("HTTP " + response.status);
}
})
.catch((error) => {
console.log("catch /game/gameserver/resetuserstatus: ", error);
});
if (!response.ok) {
console.log("/resetuserstatus " + player.username + " failed");
}
}
}

View File

@@ -15,8 +15,6 @@ export class TokenGame {
isGameIsWithInvitation : boolean
@Column({default: 0, nullable: true})
numberOfRegisteredUser : number
@Column({default : false})
isSecondUserAcceptedRequest : boolean
@Column()
token : string
}

View File

@@ -72,10 +72,11 @@ export class GameService {
return encryptedTextToReturn
}
async deleteToken(user : User){
async deletePublicTokens(user : User){
const tokenGame = await this.tokenGameRepository.createQueryBuilder('tokengame')
.where('tokengame.playerTwoUsername = :playerTwoUsername', {playerTwoUsername : user.username})
.orWhere('tokengame.playerOneUsername = :playerOneUsername', {playerOneUsername : user.username})
.where('tokengame.isGameIsWithInvitation = :isGameIsWithInvitation', {isGameIsWithInvitation : false})
.getMany();
if (tokenGame)
return this.tokenGameRepository.remove(tokenGame);
@@ -86,7 +87,7 @@ export class GameService {
console.log(user.status);
if (user.status === STATUS.IN_POOL || user.status === STATUS.IN_GAME)
{
await this.deleteToken(user);
await this.deletePublicTokens(user);
if (user.status === STATUS.IN_POOL) {
user.status = STATUS.CONNECTED;
}
@@ -106,7 +107,6 @@ export class GameService {
const encryptedTextToReturn = await this.encryptToken(user.username + '_' + secondUser.username + '_'
+ grantTicketDto.gameOptions + '_' + grantTicketDto.isGameIsWithInvitation + '_' + new Date())
const tok = this.tokenGameRepository.create(grantTicketDto);
tok.isSecondUserAcceptedRequest = false;
tok.numberOfRegisteredUser = 0;
tok.token = encryptedTextToReturn;
this.tokenGameRepository.save(tok);
@@ -130,34 +130,30 @@ export class GameService {
async validateToken(validateTicketDto : ValidateTicketDto) {
if (validateTicketDto.isGameIsWithInvitation === true)
{
console.log("validateToken() PRIVATE");
const tokenGame : TokenGame = await this.tokenGameRepository.createQueryBuilder('tokengame')
.where('tokengame.playerOneUsername = :playerOneUsername', {playerOneUsername : validateTicketDto.playerOneUsername})
.andWhere('tokengame.playerTwoUsername = :playerTwoUsername', {playerTwoUsername : validateTicketDto.playerTwoUsername})
.andWhere('tokengame.gameOptions = :gameOption', {gameOption : validateTicketDto.gameOptions})
.andWhere('tokengame.isGameIsWithInvitation = :isGameIsWithInvitation', {isGameIsWithInvitation: true})
.andWhere('tokengame.isSecondUserAcceptedRequest = :choice', {choice : true})
.andWhere('tokengame.token = :token', {token : validateTicketDto.token})
.getOne();
if (tokenGame)
{
console.log("playerOneUsername: " + tokenGame.playerOneUsername + "| playerTwoUsername: " + tokenGame.playerTwoUsername);
tokenGame.numberOfRegisteredUser++;
this.tokenGameRepository.save(tokenGame);
if (tokenGame.numberOfRegisteredUser === 2)
{
this.tokenGameRepository.remove(tokenGame)
const userOne : User = await this.userRepository.createQueryBuilder('user')
.where("user.username = :username", {username : tokenGame.playerOneUsername})
.getOne();
const userTwo : User = await this.userRepository.createQueryBuilder('user')
.where("user.username = :username", {username : tokenGame.playerTwoUsername})
.getOne();
this.deleteToken(userOne)
this.deleteToken(userTwo)
}
return true;
}
}
else if (validateTicketDto.isGameIsWithInvitation === false)
{
console.log("validateToken() PUBLIC");
const tokenGame : TokenGame = await this.tokenGameRepository.createQueryBuilder('tokengame')
.where('tokengame.playerOneUsername = :playerOneUsername', {playerOneUsername : validateTicketDto.playerOneUsername})
.andWhere('tokengame.gameOptions = :gameOption', {gameOption : validateTicketDto.gameOptions})
@@ -168,10 +164,6 @@ export class GameService {
{
this.tokenGameRepository.remove(tokenGame)
console.log("USERNAME : " + tokenGame.playerOneUsername)
const user : User = await this.userRepository.createQueryBuilder('user')
.where("user.username = :username", {username : tokenGame.playerOneUsername})
.getOne();
this.deleteToken(user)
return true;
}
}
@@ -181,8 +173,8 @@ export class GameService {
async findInvitations(user : User, @Res() res : Response) {
const game = await this.tokenGameRepository.createQueryBuilder('tokengame')
.where('tokengame.playerTwoUsername = :playerTwoUsername', {playerTwoUsername : user.username})
.orWhere('tokengame.playerOneUsername = :playerOneUsername', {playerOneUsername : user.username})
.andWhere('tokengame.isGameIsWithInvitation = :invit', {invit : true})
.andWhere('tokengame.isSecondUserAcceptedRequest = :choice', {choice : false})
.getMany();
if (!game)
return res.status(HttpStatus.NOT_FOUND).send({message : "No invitation found"});
@@ -200,14 +192,9 @@ export class GameService {
async declineInvitation(user : User, token : string, @Res() res : Response)
{
/* Luke: le check de user.status n'est pas fonctionnel avec l'implémentation des invitations dans le front.
Ça me semble dispensable, je désactive donc pour le moment plutôt que de refaire l'implémentation front. */
// if (user.status !== STATUS.CONNECTED)
// return res.status(HttpStatus.FORBIDDEN).json({message : "You must not be in game to decline an invitation"});
console.log("On décline l'invitation")
const tokenGame = await this.tokenGameRepository.createQueryBuilder('tokengame')
.andWhere('tokengame.playerTwoUsername = :playerTwoUsername', {playerTwoUsername : user.username})
.andWhere('tokengame.token = :token', {token : token})
.where('tokengame.token = :token', {token : token})
.getOne();
if (tokenGame)
{
@@ -238,17 +225,11 @@ export class GameService {
async acceptInvitation(user : User, token : string, @Res() res : Response)
{
/* Luke: le check de user.status n'est pas fonctionnel avec l'implémentation des invitations dans le front.
Ça me semble dispensable, je désactive donc pour le moment plutôt que de refaire l'implémentation front. */
// if (user.status !== STATUS.CONNECTED)
// return res.status(HttpStatus.FORBIDDEN).send("")
const tokenGame = await this.tokenGameRepository.createQueryBuilder('tokenGame')
.andWhere('tokenGame.playerTwoUsername = :playerTwoUsername', {playerTwoUsername : user.username})
.andWhere('tokenGame.token = :token', {token : token})
.where('tokenGame.token = :token', {token : token})
.getOne();
if (tokenGame)
{
tokenGame.isSecondUserAcceptedRequest = true;
this.tokenGameRepository.save(tokenGame)
return res.status(HttpStatus.OK).json({message : "Invitation accepted."});
}

View File

@@ -1,4 +1,7 @@
.dim_background {
background-color: #222;
}
html, body {
position: relative;

View File

@@ -42,16 +42,6 @@
</div>
<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;
}
.container {
height: 100%;

View File

@@ -24,7 +24,6 @@
//boolean for html page
let hiddenGame = true;
let optionsAreNotSet = true;
let showGameOptions = true;
let showInvitations = false;
let showError = false;
@@ -62,8 +61,7 @@
})
function resetPage() {
hiddenGame = true;
optionsAreNotSet = true;
setHiddenGame(true);
showGameOptions = true;
showInvitations = false;
showError = false;
@@ -74,7 +72,6 @@
const initGame = async() =>
{
optionsAreNotSet = false;
showWaitPage = true;
const matchOptions = pong.computeMatchOptions(options);
try {
@@ -91,13 +88,18 @@
console.log("status : " + response.status);
const responseBody = await response.json();
const token : string = responseBody.token;
showWaitPage = false;
if (response.ok && token)
{
watchMatchStartInterval = setInterval(watchMatchStart, watchMatchStartIntervalRate);
watchGameStateInterval = setInterval(watchGameState, watchGameStateIntervalRate);
pong.init(matchOptions, options, gameAreaId, token);
hiddenGame = false;
if (options.isSomeoneIsInvited) {
options.reset(user.username);
fetchInvitations();
}
else {
watchMatchStartInterval = setInterval(watchMatchStart, watchMatchStartIntervalRate);
watchGameStateInterval = setInterval(watchGameState, watchGameStateIntervalRate);
pong.init(matchOptions, options, gameAreaId, token);
setHiddenGame(false);
}
}
else
{
@@ -107,7 +109,6 @@
showError = true;
options.reset(user.username);
setTimeout(() => {
optionsAreNotSet = true;
showError = false;
errorMessage = "";
}, 5000);
@@ -115,11 +116,11 @@
} catch (e) {
console.log(e);
}
showWaitPage = false;
}
const initGameForInvitedPlayer = async(invitation : any) =>
const initInvitationGame = async(invitation : any) =>
{
optionsAreNotSet = false;
showWaitPage = true;
console.log("invitation : ");
console.log(invitation);
@@ -130,10 +131,12 @@
options.playerOneUsername = invitation.playerOneUsername;
options.playerTwoUsername = invitation.playerTwoUsername;
options.isSomeoneIsInvited = true;
options.isInvitedPerson = true;
if (user.username === invitation.playerTwoUsername) {
options.isInvitedPerson = true;
}
pong.init(invitation.gameOptions, options, gameAreaId, invitation.token);
showWaitPage = false;
hiddenGame = false;
setHiddenGame(false);
}
}
@@ -169,10 +172,11 @@
}
const fetchInvitations = async() => {
showGameOptions = false;
showInvitations = true;
console.log("fetchInvitations");
invitations = await fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/game/invitations`)
.then(x => x.json());
showGameOptions = false;
showInvitations = true;
}
const rejectInvitation = async(invitation) => {
@@ -199,7 +203,7 @@
}).catch(error => console.log(error));
if (res && res.ok) {
initGameForInvitedPlayer(invitation);
initInvitationGame(invitation);
}
}
@@ -209,6 +213,16 @@
resetPage();
};
function setHiddenGame(value: boolean) {
if (value) {
document.getElementById("game_page").classList.remove("dim_background");
}
else {
document.getElementById("game_page").classList.add("dim_background");
}
hiddenGame = value;
}
</script>
<Header />
@@ -273,58 +287,56 @@
<!-- -->
{#if optionsAreNotSet}
{#if hiddenGame}
{#if showGameOptions}
<div id="game_option">
<div class="div_game">
<button class="pong_button" on:click={fetchInvitations}>Show invitations</button>
<fieldset in:fly="{{ y: 10, duration: 1000 }}">
<legend>game options</legend>
<div class="div_game" id="game_options">
<button class="pong_button" on:click={fetchInvitations}>Show invitations</button>
<fieldset in:fly="{{ y: 10, duration: 1000 }}">
<legend>game options</legend>
<label for="multi_balls">
<input type="checkbox" id="multi_balls" name="multi_balls" bind:checked={options.multi_balls}>
Multiples balls
<label for="multi_balls">
<input type="checkbox" id="multi_balls" name="multi_balls" bind:checked={options.multi_balls}>
Multiples balls
</label>
<label for="moving_walls">
<input type="checkbox" id="moving_walls" name="moving_walls" bind:checked={options.moving_walls}>
Moving walls
</label>
<div>
sound :
<label for="sound_on">
<input type="radio" id="sound_on" name="sound_selector" bind:group={options.sound} value="on">
on
</label>
<label for="moving_walls">
<input type="checkbox" id="moving_walls" name="moving_walls" bind:checked={options.moving_walls}>
Moving walls
<label for="sound_off">
<input type="radio" id="sound_off" name="sound_selector" bind:group={options.sound} value="off">
off
</label>
</div>
<div>
sound :
<label for="sound_on">
<input type="radio" id="sound_on" name="sound_selector" bind:group={options.sound} value="on">
on
</label>
<label for="sound_off">
<input type="radio" id="sound_off" name="sound_selector" bind:group={options.sound} value="off">
off
</label>
</div>
<label for="invitation_checkbox">
<input type="checkbox" id="invitation_checkbox" bind:checked={options.isSomeoneIsInvited}>
Invite a friend
</label>
<label for="invitation_checkbox">
<input type="checkbox" id="invitation_checkbox" bind:checked={options.isSomeoneIsInvited}>
Invite a friend
</label>
{#if options.isSomeoneIsInvited}
<select bind:value={options.playerTwoUsername}>
{#each allUsers as invitedUser }
<option value={invitedUser.username}>{invitedUser.username}</option>
{/each}
</select>
{/if}
<div>
<button class="pong_button" on:click={initGame}>PLAY</button>
</div>
</fieldset>
</div>
{#if options.isSomeoneIsInvited}
<select bind:value={options.playerTwoUsername}>
{#each allUsers as invitedUser }
<option value={invitedUser.username}>{invitedUser.username}</option>
{/each}
</select>
{/if}
<div>
<button class="pong_button" on:click={initGame}>PLAY</button>
</div>
</fieldset>
</div>
{/if}
{#if showInvitations}
<div class="div_game">
<div class="div_game" id="game_invitations">
<button class="pong_button" on:click={switchToGameOptions}>Play a Game</button>
<fieldset in:fly="{{ y: 10, duration: 1000 }}">
<legend>invitations</legend>
@@ -332,7 +344,7 @@
{#if invitations.length !== 0}
{#each invitations as invitation}
<div>
{invitation.playerOneUsername} has invited you to play a pong !
{invitation.playerOneUsername} VS {invitation.playerTwoUsername}
<button class="pong_button" on:click={() => acceptInvitation(invitation)}>V</button>
<button class="pong_button" on:click={() => rejectInvitation(invitation)}>X</button>
</div>
@@ -348,19 +360,9 @@
</div> <!-- div "game_page" -->
<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;
}
#game_page {
margin: 0;
background-color: #222425;
position: relative;
width: 100%;
height: auto;
@@ -368,9 +370,11 @@
flex-direction: column;
flex-grow: 1;
}
#game_option {
#game_options, #game_invitations {
margin-top: 20px;
}
#canvas_container {
margin-top: 20px;
text-align: center;
@@ -380,7 +384,7 @@
}
canvas {
/* background-color: #ff0000; */
background-color: #333333;
background-color: #333;
max-width: 75vw;
/* max-height: 100vh; */
width: 80%;

View File

@@ -45,7 +45,7 @@
playerOneAvatar = await fetchAvatar(gameState.playerOneUsername);
playerTwoAvatar = await fetchAvatar(gameState.playerTwoUsername);
hiddenGame = false;
setHiddenGame(false);
};
const watchGameState = () => {
@@ -70,7 +70,7 @@
};
async function resetPage() {
hiddenGame = true;
setHiddenGame(true);
pongSpectator.destroy();
matchList = await fetchMatchList();
};
@@ -93,6 +93,16 @@
});
};
function setHiddenGame(value: boolean) {
if (value) {
document.getElementById("game_page").classList.remove("dim_background");
}
else {
document.getElementById("game_page").classList.add("dim_background");
}
hiddenGame = value;
}
</script>
<!-- -->
@@ -164,21 +174,10 @@
<!-- -->
<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;
}
#game_page {
margin: 0;
padding: 20px;
background-color: #222425;
position: relative;
width: 100%;
height: 100%;

View File

@@ -46,9 +46,9 @@
<tr>
<th>{i + 1}</th>
{#if user.username === currentUser.username}
<td><b>You ({user.username})</b></td>
<td><b>{user.username} [You]</b></td>
{:else}
<td>{user.username}</td>
<td>{user.username}</td>
{/if}
<td>{user.stats.winGame}</td>
<td>{user.stats.loseGame}</td>
@@ -63,7 +63,7 @@
<style>
.principal-div {
.principal-div {
display: flex;
justify-content: center;
align-items: center;
@@ -90,15 +90,10 @@
}
.stats-table tbody tr:nth-of-type(even) {
background-color: #f3f3f3;
background-color: #555;
}
.stats-table tbody tr:last-of-type {
border-bottom: 2px solid #618174;
}
.stats-table tbody tr.active-row {
font-weight: bold;
color: #618174;
}
</style>

View File

@@ -34,24 +34,13 @@
</div>
<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;
}
.header div.center button.selected {
text-decoration: underline;
background-color: #2B3A67;
background-color: #8c0000;
}
.header div.center button {
background-color: #8c0000;
background-color: #444;
border-color: #071013;
color: white;
font-family: "Bit5x3";

View File

@@ -4,7 +4,7 @@ export async function fetchAvatar(username: string)
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");
throw new Error("HTTP " + response.status);
}
return response.blob();
})
@@ -22,7 +22,7 @@ export async function fetchUser()
return fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/user`)
.then((response) => {
if (!response.ok) {
throw new Error("User not retrieved");
throw new Error("HTTP " + response.status);
}
return response.json();
})
@@ -40,7 +40,7 @@ export async function fetchAllUsers()
return fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/user/all`)
.then((response) => {
if (!response.ok) {
throw new Error("All Users not retrieved");
throw new Error("HTTP " + response.status);
}
return response.json();
})