Merge remote-tracking branch 'origin/master' into eric_front_and_back
This commit is contained in:
@@ -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);
|
||||
|
||||
@@ -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");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -15,8 +15,6 @@ export class TokenGame {
|
||||
isGameIsWithInvitation : boolean
|
||||
@Column({default: 0, nullable: true})
|
||||
numberOfRegisteredUser : number
|
||||
@Column({default : false})
|
||||
isSecondUserAcceptedRequest : boolean
|
||||
@Column()
|
||||
token : string
|
||||
}
|
||||
|
||||
@@ -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."});
|
||||
}
|
||||
|
||||
@@ -1,4 +1,7 @@
|
||||
|
||||
.dim_background {
|
||||
background-color: #222;
|
||||
}
|
||||
|
||||
html, body {
|
||||
position: relative;
|
||||
|
||||
@@ -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%;
|
||||
|
||||
@@ -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%;
|
||||
|
||||
@@ -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%;
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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";
|
||||
|
||||
@@ -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();
|
||||
})
|
||||
|
||||
Reference in New Issue
Block a user