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;
|
gc.scoreRight = 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
await fetch(c.addressBackEnd + "/game/gameserver/updategame",
|
|
||||||
|
fetch(`${c.addressBackEnd}/game/gameserver/updategame`,
|
||||||
{
|
{
|
||||||
method: "POST",
|
method: "POST",
|
||||||
headers: {
|
headers: {
|
||||||
@@ -290,6 +291,14 @@ export class GameSession {
|
|||||||
playerOneUsernameResult: gc.scoreLeft,
|
playerOneUsernameResult: gc.scoreLeft,
|
||||||
playerTwoUsernameResult: gc.scoreRight,
|
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);
|
setTimeout(this.destroy, 15000, this);
|
||||||
|
|||||||
@@ -89,7 +89,8 @@ async function clientAnnounceListener(this: WebSocket, data: string)
|
|||||||
if (announce.privateMatch) {
|
if (announce.privateMatch) {
|
||||||
body.playerTwoUsername = announce.playerTwoUsername;
|
body.playerTwoUsername = announce.playerTwoUsername;
|
||||||
}
|
}
|
||||||
const response = await fetch(c.addressBackEnd + "/game/gameserver/validate",
|
|
||||||
|
fetch(`${c.addressBackEnd}/game/gameserver/validate`,
|
||||||
{
|
{
|
||||||
method: "POST",
|
method: "POST",
|
||||||
headers: {
|
headers: {
|
||||||
@@ -97,17 +98,18 @@ async function clientAnnounceListener(this: WebSocket, data: string)
|
|||||||
},
|
},
|
||||||
body: JSON.stringify(body)
|
body: JSON.stringify(body)
|
||||||
})
|
})
|
||||||
.catch(error => console.log("ERROR : " + error));
|
.then((response) => {
|
||||||
if (!response || !response.ok)
|
if (!response.ok) {
|
||||||
{
|
throw new Error("HTTP " + response.status);
|
||||||
let errMessage = "validate token error";
|
|
||||||
if (response) {
|
|
||||||
errMessage = (await response.json()).message;
|
|
||||||
}
|
}
|
||||||
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));
|
clientTerminate(clientsMap.get(this.id));
|
||||||
return;
|
return;
|
||||||
}
|
});
|
||||||
|
|
||||||
player.matchOptions = announce.matchOptions;
|
player.matchOptions = announce.matchOptions;
|
||||||
player.token = announce.token;
|
player.token = announce.token;
|
||||||
player.username = announce.username;
|
player.username = announce.username;
|
||||||
@@ -232,14 +234,26 @@ function privateMatchmaking(player: ClientPlayer)
|
|||||||
if (player.socket.OPEN) {
|
if (player.socket.OPEN) {
|
||||||
player.socket.send(JSON.stringify( new ev.EventMatchAbort() ));
|
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",
|
method: "POST",
|
||||||
headers : {"Content-Type": "application/json"},
|
headers: {
|
||||||
|
"Content-Type": "application/json",
|
||||||
|
},
|
||||||
body: JSON.stringify({
|
body: JSON.stringify({
|
||||||
token : player.token
|
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);
|
clientTerminate(player);
|
||||||
}
|
}
|
||||||
}, 60000);
|
}, 60000);
|
||||||
@@ -315,16 +329,22 @@ async function playerReadyConfirmationListener(this: WebSocket, data: string)
|
|||||||
playerOneUsernameResult : 0,
|
playerOneUsernameResult : 0,
|
||||||
playerTwoUsernameResult : 0
|
playerTwoUsernameResult : 0
|
||||||
};
|
};
|
||||||
const response = await fetch(c.addressBackEnd + "/game/gameserver/creategame",
|
|
||||||
|
fetch(`${c.addressBackEnd}/game/gameserver/creategame`,
|
||||||
{
|
{
|
||||||
method: "POST",
|
method: "POST",
|
||||||
headers: {
|
headers: {
|
||||||
"Content-Type": "application/json",
|
"Content-Type": "application/json",
|
||||||
},
|
},
|
||||||
body: JSON.stringify(body)
|
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);
|
gameSessionsMap.delete(gameSession.id);
|
||||||
gameSession.playersMap.forEach((client) => {
|
gameSession.playersMap.forEach((client) => {
|
||||||
client.socket.send(JSON.stringify( new ev.EventMatchAbort() ));
|
client.socket.send(JSON.stringify( new ev.EventMatchAbort() ));
|
||||||
@@ -332,7 +352,7 @@ async function playerReadyConfirmationListener(this: WebSocket, data: string)
|
|||||||
clientTerminate(client);
|
clientTerminate(client);
|
||||||
});
|
});
|
||||||
return;
|
return;
|
||||||
}
|
});
|
||||||
|
|
||||||
gameSession.playersMap.forEach( (client) => {
|
gameSession.playersMap.forEach( (client) => {
|
||||||
client.socket.send(JSON.stringify( new ev.ServerEvent(en.EventTypes.matchStart) ));
|
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)
|
if (client.role === en.ClientRole.player)
|
||||||
{
|
{
|
||||||
const player = client as ClientPlayer;
|
const player = client as ClientPlayer;
|
||||||
console.log("/resetuserstatus " + player.username);
|
fetch(`${c.addressBackEnd}/game/gameserver/resetuserstatus`,
|
||||||
const response = await fetch(c.addressBackEnd + "/game/gameserver/resetuserstatus",
|
|
||||||
{
|
{
|
||||||
method: "POST",
|
method: "POST",
|
||||||
headers: {
|
headers: {
|
||||||
"Content-Type": "application/json",
|
"Content-Type": "application/json",
|
||||||
},
|
},
|
||||||
body: JSON.stringify({username: player.username})
|
body: JSON.stringify({username: player.username})
|
||||||
});
|
})
|
||||||
|
.then((response) => {
|
||||||
if (!response.ok) {
|
if (!response.ok) {
|
||||||
console.log("/resetuserstatus " + player.username + " failed");
|
throw new Error("HTTP " + response.status);
|
||||||
}
|
}
|
||||||
|
})
|
||||||
|
.catch((error) => {
|
||||||
|
console.log("catch /game/gameserver/resetuserstatus: ", error);
|
||||||
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -15,8 +15,6 @@ export class TokenGame {
|
|||||||
isGameIsWithInvitation : boolean
|
isGameIsWithInvitation : boolean
|
||||||
@Column({default: 0, nullable: true})
|
@Column({default: 0, nullable: true})
|
||||||
numberOfRegisteredUser : number
|
numberOfRegisteredUser : number
|
||||||
@Column({default : false})
|
|
||||||
isSecondUserAcceptedRequest : boolean
|
|
||||||
@Column()
|
@Column()
|
||||||
token : string
|
token : string
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -72,10 +72,11 @@ export class GameService {
|
|||||||
return encryptedTextToReturn
|
return encryptedTextToReturn
|
||||||
}
|
}
|
||||||
|
|
||||||
async deleteToken(user : User){
|
async deletePublicTokens(user : User){
|
||||||
const tokenGame = await this.tokenGameRepository.createQueryBuilder('tokengame')
|
const tokenGame = await this.tokenGameRepository.createQueryBuilder('tokengame')
|
||||||
.where('tokengame.playerTwoUsername = :playerTwoUsername', {playerTwoUsername : user.username})
|
.where('tokengame.playerTwoUsername = :playerTwoUsername', {playerTwoUsername : user.username})
|
||||||
.orWhere('tokengame.playerOneUsername = :playerOneUsername', {playerOneUsername : user.username})
|
.orWhere('tokengame.playerOneUsername = :playerOneUsername', {playerOneUsername : user.username})
|
||||||
|
.where('tokengame.isGameIsWithInvitation = :isGameIsWithInvitation', {isGameIsWithInvitation : false})
|
||||||
.getMany();
|
.getMany();
|
||||||
if (tokenGame)
|
if (tokenGame)
|
||||||
return this.tokenGameRepository.remove(tokenGame);
|
return this.tokenGameRepository.remove(tokenGame);
|
||||||
@@ -86,7 +87,7 @@ export class GameService {
|
|||||||
console.log(user.status);
|
console.log(user.status);
|
||||||
if (user.status === STATUS.IN_POOL || user.status === STATUS.IN_GAME)
|
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) {
|
if (user.status === STATUS.IN_POOL) {
|
||||||
user.status = STATUS.CONNECTED;
|
user.status = STATUS.CONNECTED;
|
||||||
}
|
}
|
||||||
@@ -106,7 +107,6 @@ export class GameService {
|
|||||||
const encryptedTextToReturn = await this.encryptToken(user.username + '_' + secondUser.username + '_'
|
const encryptedTextToReturn = await this.encryptToken(user.username + '_' + secondUser.username + '_'
|
||||||
+ grantTicketDto.gameOptions + '_' + grantTicketDto.isGameIsWithInvitation + '_' + new Date())
|
+ grantTicketDto.gameOptions + '_' + grantTicketDto.isGameIsWithInvitation + '_' + new Date())
|
||||||
const tok = this.tokenGameRepository.create(grantTicketDto);
|
const tok = this.tokenGameRepository.create(grantTicketDto);
|
||||||
tok.isSecondUserAcceptedRequest = false;
|
|
||||||
tok.numberOfRegisteredUser = 0;
|
tok.numberOfRegisteredUser = 0;
|
||||||
tok.token = encryptedTextToReturn;
|
tok.token = encryptedTextToReturn;
|
||||||
this.tokenGameRepository.save(tok);
|
this.tokenGameRepository.save(tok);
|
||||||
@@ -130,34 +130,30 @@ export class GameService {
|
|||||||
async validateToken(validateTicketDto : ValidateTicketDto) {
|
async validateToken(validateTicketDto : ValidateTicketDto) {
|
||||||
if (validateTicketDto.isGameIsWithInvitation === true)
|
if (validateTicketDto.isGameIsWithInvitation === true)
|
||||||
{
|
{
|
||||||
|
console.log("validateToken() PRIVATE");
|
||||||
const tokenGame : TokenGame = await this.tokenGameRepository.createQueryBuilder('tokengame')
|
const tokenGame : TokenGame = await this.tokenGameRepository.createQueryBuilder('tokengame')
|
||||||
.where('tokengame.playerOneUsername = :playerOneUsername', {playerOneUsername : validateTicketDto.playerOneUsername})
|
.where('tokengame.playerOneUsername = :playerOneUsername', {playerOneUsername : validateTicketDto.playerOneUsername})
|
||||||
.andWhere('tokengame.playerTwoUsername = :playerTwoUsername', {playerTwoUsername : validateTicketDto.playerTwoUsername})
|
.andWhere('tokengame.playerTwoUsername = :playerTwoUsername', {playerTwoUsername : validateTicketDto.playerTwoUsername})
|
||||||
.andWhere('tokengame.gameOptions = :gameOption', {gameOption : validateTicketDto.gameOptions})
|
.andWhere('tokengame.gameOptions = :gameOption', {gameOption : validateTicketDto.gameOptions})
|
||||||
.andWhere('tokengame.isGameIsWithInvitation = :isGameIsWithInvitation', {isGameIsWithInvitation: true})
|
.andWhere('tokengame.isGameIsWithInvitation = :isGameIsWithInvitation', {isGameIsWithInvitation: true})
|
||||||
.andWhere('tokengame.isSecondUserAcceptedRequest = :choice', {choice : true})
|
|
||||||
.andWhere('tokengame.token = :token', {token : validateTicketDto.token})
|
.andWhere('tokengame.token = :token', {token : validateTicketDto.token})
|
||||||
.getOne();
|
.getOne();
|
||||||
if (tokenGame)
|
if (tokenGame)
|
||||||
{
|
{
|
||||||
|
console.log("playerOneUsername: " + tokenGame.playerOneUsername + "| playerTwoUsername: " + tokenGame.playerTwoUsername);
|
||||||
|
|
||||||
tokenGame.numberOfRegisteredUser++;
|
tokenGame.numberOfRegisteredUser++;
|
||||||
|
this.tokenGameRepository.save(tokenGame);
|
||||||
if (tokenGame.numberOfRegisteredUser === 2)
|
if (tokenGame.numberOfRegisteredUser === 2)
|
||||||
{
|
{
|
||||||
this.tokenGameRepository.remove(tokenGame)
|
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;
|
return true;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
else if (validateTicketDto.isGameIsWithInvitation === false)
|
else if (validateTicketDto.isGameIsWithInvitation === false)
|
||||||
{
|
{
|
||||||
|
console.log("validateToken() PUBLIC");
|
||||||
const tokenGame : TokenGame = await this.tokenGameRepository.createQueryBuilder('tokengame')
|
const tokenGame : TokenGame = await this.tokenGameRepository.createQueryBuilder('tokengame')
|
||||||
.where('tokengame.playerOneUsername = :playerOneUsername', {playerOneUsername : validateTicketDto.playerOneUsername})
|
.where('tokengame.playerOneUsername = :playerOneUsername', {playerOneUsername : validateTicketDto.playerOneUsername})
|
||||||
.andWhere('tokengame.gameOptions = :gameOption', {gameOption : validateTicketDto.gameOptions})
|
.andWhere('tokengame.gameOptions = :gameOption', {gameOption : validateTicketDto.gameOptions})
|
||||||
@@ -168,10 +164,6 @@ export class GameService {
|
|||||||
{
|
{
|
||||||
this.tokenGameRepository.remove(tokenGame)
|
this.tokenGameRepository.remove(tokenGame)
|
||||||
console.log("USERNAME : " + tokenGame.playerOneUsername)
|
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;
|
return true;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -181,8 +173,8 @@ export class GameService {
|
|||||||
async findInvitations(user : User, @Res() res : Response) {
|
async findInvitations(user : User, @Res() res : Response) {
|
||||||
const game = await this.tokenGameRepository.createQueryBuilder('tokengame')
|
const game = await this.tokenGameRepository.createQueryBuilder('tokengame')
|
||||||
.where('tokengame.playerTwoUsername = :playerTwoUsername', {playerTwoUsername : user.username})
|
.where('tokengame.playerTwoUsername = :playerTwoUsername', {playerTwoUsername : user.username})
|
||||||
|
.orWhere('tokengame.playerOneUsername = :playerOneUsername', {playerOneUsername : user.username})
|
||||||
.andWhere('tokengame.isGameIsWithInvitation = :invit', {invit : true})
|
.andWhere('tokengame.isGameIsWithInvitation = :invit', {invit : true})
|
||||||
.andWhere('tokengame.isSecondUserAcceptedRequest = :choice', {choice : false})
|
|
||||||
.getMany();
|
.getMany();
|
||||||
if (!game)
|
if (!game)
|
||||||
return res.status(HttpStatus.NOT_FOUND).send({message : "No invitation found"});
|
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)
|
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")
|
console.log("On décline l'invitation")
|
||||||
const tokenGame = await this.tokenGameRepository.createQueryBuilder('tokengame')
|
const tokenGame = await this.tokenGameRepository.createQueryBuilder('tokengame')
|
||||||
.andWhere('tokengame.playerTwoUsername = :playerTwoUsername', {playerTwoUsername : user.username})
|
.where('tokengame.token = :token', {token : token})
|
||||||
.andWhere('tokengame.token = :token', {token : token})
|
|
||||||
.getOne();
|
.getOne();
|
||||||
if (tokenGame)
|
if (tokenGame)
|
||||||
{
|
{
|
||||||
@@ -238,17 +225,11 @@ export class GameService {
|
|||||||
|
|
||||||
async acceptInvitation(user : User, token : string, @Res() res : Response)
|
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')
|
const tokenGame = await this.tokenGameRepository.createQueryBuilder('tokenGame')
|
||||||
.andWhere('tokenGame.playerTwoUsername = :playerTwoUsername', {playerTwoUsername : user.username})
|
.where('tokenGame.token = :token', {token : token})
|
||||||
.andWhere('tokenGame.token = :token', {token : token})
|
|
||||||
.getOne();
|
.getOne();
|
||||||
if (tokenGame)
|
if (tokenGame)
|
||||||
{
|
{
|
||||||
tokenGame.isSecondUserAcceptedRequest = true;
|
|
||||||
this.tokenGameRepository.save(tokenGame)
|
this.tokenGameRepository.save(tokenGame)
|
||||||
return res.status(HttpStatus.OK).json({message : "Invitation accepted."});
|
return res.status(HttpStatus.OK).json({message : "Invitation accepted."});
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,4 +1,7 @@
|
|||||||
|
|
||||||
|
.dim_background {
|
||||||
|
background-color: #222;
|
||||||
|
}
|
||||||
|
|
||||||
html, body {
|
html, body {
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|||||||
@@ -42,16 +42,6 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<style>
|
<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 {
|
.container {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
|||||||
@@ -24,7 +24,6 @@
|
|||||||
|
|
||||||
//boolean for html page
|
//boolean for html page
|
||||||
let hiddenGame = true;
|
let hiddenGame = true;
|
||||||
let optionsAreNotSet = true;
|
|
||||||
let showGameOptions = true;
|
let showGameOptions = true;
|
||||||
let showInvitations = false;
|
let showInvitations = false;
|
||||||
let showError = false;
|
let showError = false;
|
||||||
@@ -62,8 +61,7 @@
|
|||||||
})
|
})
|
||||||
|
|
||||||
function resetPage() {
|
function resetPage() {
|
||||||
hiddenGame = true;
|
setHiddenGame(true);
|
||||||
optionsAreNotSet = true;
|
|
||||||
showGameOptions = true;
|
showGameOptions = true;
|
||||||
showInvitations = false;
|
showInvitations = false;
|
||||||
showError = false;
|
showError = false;
|
||||||
@@ -74,7 +72,6 @@
|
|||||||
|
|
||||||
const initGame = async() =>
|
const initGame = async() =>
|
||||||
{
|
{
|
||||||
optionsAreNotSet = false;
|
|
||||||
showWaitPage = true;
|
showWaitPage = true;
|
||||||
const matchOptions = pong.computeMatchOptions(options);
|
const matchOptions = pong.computeMatchOptions(options);
|
||||||
try {
|
try {
|
||||||
@@ -91,13 +88,18 @@
|
|||||||
console.log("status : " + response.status);
|
console.log("status : " + response.status);
|
||||||
const responseBody = await response.json();
|
const responseBody = await response.json();
|
||||||
const token : string = responseBody.token;
|
const token : string = responseBody.token;
|
||||||
showWaitPage = false;
|
|
||||||
if (response.ok && token)
|
if (response.ok && token)
|
||||||
{
|
{
|
||||||
|
if (options.isSomeoneIsInvited) {
|
||||||
|
options.reset(user.username);
|
||||||
|
fetchInvitations();
|
||||||
|
}
|
||||||
|
else {
|
||||||
watchMatchStartInterval = setInterval(watchMatchStart, watchMatchStartIntervalRate);
|
watchMatchStartInterval = setInterval(watchMatchStart, watchMatchStartIntervalRate);
|
||||||
watchGameStateInterval = setInterval(watchGameState, watchGameStateIntervalRate);
|
watchGameStateInterval = setInterval(watchGameState, watchGameStateIntervalRate);
|
||||||
pong.init(matchOptions, options, gameAreaId, token);
|
pong.init(matchOptions, options, gameAreaId, token);
|
||||||
hiddenGame = false;
|
setHiddenGame(false);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
else
|
else
|
||||||
{
|
{
|
||||||
@@ -107,7 +109,6 @@
|
|||||||
showError = true;
|
showError = true;
|
||||||
options.reset(user.username);
|
options.reset(user.username);
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
optionsAreNotSet = true;
|
|
||||||
showError = false;
|
showError = false;
|
||||||
errorMessage = "";
|
errorMessage = "";
|
||||||
}, 5000);
|
}, 5000);
|
||||||
@@ -115,11 +116,11 @@
|
|||||||
} catch (e) {
|
} catch (e) {
|
||||||
console.log(e);
|
console.log(e);
|
||||||
}
|
}
|
||||||
|
showWaitPage = false;
|
||||||
}
|
}
|
||||||
|
|
||||||
const initGameForInvitedPlayer = async(invitation : any) =>
|
const initInvitationGame = async(invitation : any) =>
|
||||||
{
|
{
|
||||||
optionsAreNotSet = false;
|
|
||||||
showWaitPage = true;
|
showWaitPage = true;
|
||||||
console.log("invitation : ");
|
console.log("invitation : ");
|
||||||
console.log(invitation);
|
console.log(invitation);
|
||||||
@@ -130,10 +131,12 @@
|
|||||||
options.playerOneUsername = invitation.playerOneUsername;
|
options.playerOneUsername = invitation.playerOneUsername;
|
||||||
options.playerTwoUsername = invitation.playerTwoUsername;
|
options.playerTwoUsername = invitation.playerTwoUsername;
|
||||||
options.isSomeoneIsInvited = true;
|
options.isSomeoneIsInvited = true;
|
||||||
|
if (user.username === invitation.playerTwoUsername) {
|
||||||
options.isInvitedPerson = true;
|
options.isInvitedPerson = true;
|
||||||
|
}
|
||||||
pong.init(invitation.gameOptions, options, gameAreaId, invitation.token);
|
pong.init(invitation.gameOptions, options, gameAreaId, invitation.token);
|
||||||
showWaitPage = false;
|
showWaitPage = false;
|
||||||
hiddenGame = false;
|
setHiddenGame(false);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -169,10 +172,11 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
const fetchInvitations = async() => {
|
const fetchInvitations = async() => {
|
||||||
showGameOptions = false;
|
console.log("fetchInvitations");
|
||||||
showInvitations = true;
|
|
||||||
invitations = await fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/game/invitations`)
|
invitations = await fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/game/invitations`)
|
||||||
.then(x => x.json());
|
.then(x => x.json());
|
||||||
|
showGameOptions = false;
|
||||||
|
showInvitations = true;
|
||||||
}
|
}
|
||||||
|
|
||||||
const rejectInvitation = async(invitation) => {
|
const rejectInvitation = async(invitation) => {
|
||||||
@@ -199,7 +203,7 @@
|
|||||||
}).catch(error => console.log(error));
|
}).catch(error => console.log(error));
|
||||||
|
|
||||||
if (res && res.ok) {
|
if (res && res.ok) {
|
||||||
initGameForInvitedPlayer(invitation);
|
initInvitationGame(invitation);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -209,6 +213,16 @@
|
|||||||
resetPage();
|
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>
|
</script>
|
||||||
|
|
||||||
<Header />
|
<Header />
|
||||||
@@ -273,10 +287,9 @@
|
|||||||
|
|
||||||
<!-- -->
|
<!-- -->
|
||||||
|
|
||||||
{#if optionsAreNotSet}
|
{#if hiddenGame}
|
||||||
{#if showGameOptions}
|
{#if showGameOptions}
|
||||||
<div id="game_option">
|
<div class="div_game" id="game_options">
|
||||||
<div class="div_game">
|
|
||||||
<button class="pong_button" on:click={fetchInvitations}>Show invitations</button>
|
<button class="pong_button" on:click={fetchInvitations}>Show invitations</button>
|
||||||
<fieldset in:fly="{{ y: 10, duration: 1000 }}">
|
<fieldset in:fly="{{ y: 10, duration: 1000 }}">
|
||||||
<legend>game options</legend>
|
<legend>game options</legend>
|
||||||
@@ -320,11 +333,10 @@
|
|||||||
</div>
|
</div>
|
||||||
</fieldset>
|
</fieldset>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
{#if showInvitations}
|
{#if showInvitations}
|
||||||
<div class="div_game">
|
<div class="div_game" id="game_invitations">
|
||||||
<button class="pong_button" on:click={switchToGameOptions}>Play a Game</button>
|
<button class="pong_button" on:click={switchToGameOptions}>Play a Game</button>
|
||||||
<fieldset in:fly="{{ y: 10, duration: 1000 }}">
|
<fieldset in:fly="{{ y: 10, duration: 1000 }}">
|
||||||
<legend>invitations</legend>
|
<legend>invitations</legend>
|
||||||
@@ -332,7 +344,7 @@
|
|||||||
{#if invitations.length !== 0}
|
{#if invitations.length !== 0}
|
||||||
{#each invitations as invitation}
|
{#each invitations as invitation}
|
||||||
<div>
|
<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={() => acceptInvitation(invitation)}>V</button>
|
||||||
<button class="pong_button" on:click={() => rejectInvitation(invitation)}>X</button>
|
<button class="pong_button" on:click={() => rejectInvitation(invitation)}>X</button>
|
||||||
</div>
|
</div>
|
||||||
@@ -348,19 +360,9 @@
|
|||||||
</div> <!-- div "game_page" -->
|
</div> <!-- div "game_page" -->
|
||||||
|
|
||||||
<style>
|
<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 {
|
#game_page {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
background-color: #222425;
|
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: auto;
|
height: auto;
|
||||||
@@ -368,9 +370,11 @@
|
|||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
}
|
}
|
||||||
#game_option {
|
|
||||||
|
#game_options, #game_invitations {
|
||||||
margin-top: 20px;
|
margin-top: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#canvas_container {
|
#canvas_container {
|
||||||
margin-top: 20px;
|
margin-top: 20px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
@@ -380,7 +384,7 @@
|
|||||||
}
|
}
|
||||||
canvas {
|
canvas {
|
||||||
/* background-color: #ff0000; */
|
/* background-color: #ff0000; */
|
||||||
background-color: #333333;
|
background-color: #333;
|
||||||
max-width: 75vw;
|
max-width: 75vw;
|
||||||
/* max-height: 100vh; */
|
/* max-height: 100vh; */
|
||||||
width: 80%;
|
width: 80%;
|
||||||
|
|||||||
@@ -45,7 +45,7 @@
|
|||||||
playerOneAvatar = await fetchAvatar(gameState.playerOneUsername);
|
playerOneAvatar = await fetchAvatar(gameState.playerOneUsername);
|
||||||
playerTwoAvatar = await fetchAvatar(gameState.playerTwoUsername);
|
playerTwoAvatar = await fetchAvatar(gameState.playerTwoUsername);
|
||||||
|
|
||||||
hiddenGame = false;
|
setHiddenGame(false);
|
||||||
};
|
};
|
||||||
|
|
||||||
const watchGameState = () => {
|
const watchGameState = () => {
|
||||||
@@ -70,7 +70,7 @@
|
|||||||
};
|
};
|
||||||
|
|
||||||
async function resetPage() {
|
async function resetPage() {
|
||||||
hiddenGame = true;
|
setHiddenGame(true);
|
||||||
pongSpectator.destroy();
|
pongSpectator.destroy();
|
||||||
matchList = await fetchMatchList();
|
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>
|
</script>
|
||||||
<!-- -->
|
<!-- -->
|
||||||
|
|
||||||
@@ -164,21 +174,10 @@
|
|||||||
|
|
||||||
<!-- -->
|
<!-- -->
|
||||||
<style>
|
<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 {
|
#game_page {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
background-color: #222425;
|
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
|||||||
@@ -46,7 +46,7 @@
|
|||||||
<tr>
|
<tr>
|
||||||
<th>{i + 1}</th>
|
<th>{i + 1}</th>
|
||||||
{#if user.username === currentUser.username}
|
{#if user.username === currentUser.username}
|
||||||
<td><b>You ({user.username})</b></td>
|
<td><b>{user.username} [You]</b></td>
|
||||||
{:else}
|
{:else}
|
||||||
<td>{user.username}</td>
|
<td>{user.username}</td>
|
||||||
{/if}
|
{/if}
|
||||||
@@ -90,15 +90,10 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.stats-table tbody tr:nth-of-type(even) {
|
.stats-table tbody tr:nth-of-type(even) {
|
||||||
background-color: #f3f3f3;
|
background-color: #555;
|
||||||
}
|
}
|
||||||
|
|
||||||
.stats-table tbody tr:last-of-type {
|
.stats-table tbody tr:last-of-type {
|
||||||
border-bottom: 2px solid #618174;
|
border-bottom: 2px solid #618174;
|
||||||
}
|
}
|
||||||
|
|
||||||
.stats-table tbody tr.active-row {
|
|
||||||
font-weight: bold;
|
|
||||||
color: #618174;
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -34,24 +34,13 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<style>
|
<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 {
|
.header div.center button.selected {
|
||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
background-color: #2B3A67;
|
background-color: #8c0000;
|
||||||
}
|
}
|
||||||
|
|
||||||
.header div.center button {
|
.header div.center button {
|
||||||
background-color: #8c0000;
|
background-color: #444;
|
||||||
border-color: #071013;
|
border-color: #071013;
|
||||||
color: white;
|
color: white;
|
||||||
font-family: "Bit5x3";
|
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}`)
|
return fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/user/avatar?username=${username}`)
|
||||||
.then((response) => {
|
.then((response) => {
|
||||||
if (!response.ok) {
|
if (!response.ok) {
|
||||||
throw new Error("Avatar not retrieved");
|
throw new Error("HTTP " + response.status);
|
||||||
}
|
}
|
||||||
return response.blob();
|
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`)
|
return fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/user`)
|
||||||
.then((response) => {
|
.then((response) => {
|
||||||
if (!response.ok) {
|
if (!response.ok) {
|
||||||
throw new Error("User not retrieved");
|
throw new Error("HTTP " + response.status);
|
||||||
}
|
}
|
||||||
return response.json();
|
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`)
|
return fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/user/all`)
|
||||||
.then((response) => {
|
.then((response) => {
|
||||||
if (!response.ok) {
|
if (!response.ok) {
|
||||||
throw new Error("All Users not retrieved");
|
throw new Error("HTTP " + response.status);
|
||||||
}
|
}
|
||||||
return response.json();
|
return response.json();
|
||||||
})
|
})
|
||||||
|
|||||||
Reference in New Issue
Block a user