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

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

Browse Source
This commit is contained in:
Me
2023-01-09 21:17:01 +01:00
parent 9b8e0e8890 ac20571ad4
commit 9eececb045
56 changed files with 25882 additions and 641 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -13,26 +13,22 @@
let allUsers;
//Game's stuff
let optionsAreNotSet = true;
const options = new pong.InitOptions();
//Game's stuff client side only
const gameAreaId = "game_area";
//html boolean for pages
let showWaitPage = false;
let showInvitations = false;
let showGameOption = true;
let showError = false;
//boolean for html page
let hiddenGame = true;
let showMatchEnded = false;
let optionsAreNotSet = true;
let showGameOptions = true;
let showInvitations = false;
let showError = false;
let errorMessage = "";
let showWaitPage = false;
let isThereAnyInvitation = false;
let invitations = [];
let waitingMessage = "Please wait..."
let errorMessageWhenAttemptingToGetATicket = "";
let idOfIntevalCheckTerminationOfTheMatch;
let watchGameStateInterval;
const watchGameStateIntervalRate = 142;
onMount( async() => {
user = await fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/user`)
@@ -43,108 +39,112 @@
})
onDestroy( async() => {
clearInterval(idOfIntevalCheckTerminationOfTheMatch);
clearInterval(watchGameStateInterval);
pong.destroy();
})
function resetPage() {
hiddenGame = true;
optionsAreNotSet = true;
showGameOptions = true;
showInvitations = false;
showError = false;
showWaitPage = false;
options.reset(user.username);
pong.destroy();
};
const initGame = async() =>
{
optionsAreNotSet = false;
showWaitPage = true;
const matchOptions = pong.computeMatchOptions(options);
const responseWhenGrantToken = fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/game/ticket`, {
method : "POST",
headers : {'Content-Type': 'application/json'},
body : JSON.stringify({
playerOneUsername : options.playerOneUsername,
playerTwoUsername : options.playerTwoUsername,
gameOptions : matchOptions,
isGameIsWithInvitation : options.isSomeoneIsInvited
})
})
const responseFromServer = await responseWhenGrantToken;
const responseInjson = await responseFromServer.json();
const token : string = responseInjson.token;
showWaitPage = false;
console.log("status : " + responseFromServer.status)
if (responseFromServer.status != 200)
{
console.log(responseInjson)
console.log("On refuse le ticket");
errorMessageWhenAttemptingToGetATicket = responseInjson.message;
showError = true;
options.reset();
options.playerOneUsername = user.username;
setTimeout(() => {
optionsAreNotSet = true
showError = false;
// showWaitPage = false // ???
}, 5000);
try {
const response = await fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/game/ticket`, {
method : "POST",
headers : {'Content-Type': 'application/json'},
body : JSON.stringify({
playerOneUsername : options.playerOneUsername,
playerTwoUsername : options.playerTwoUsername,
gameOptions : matchOptions,
isGameIsWithInvitation : options.isSomeoneIsInvited
})
});
console.log("status : " + response.status);
const responseBody = await response.json();
const token : string = responseBody.token;
showWaitPage = false;
if (response.ok && token)
{
watchGameStateInterval = setInterval(watchGameState, watchGameStateIntervalRate);
pong.init(matchOptions, options, gameAreaId, token);
hiddenGame = false;
}
else
{
console.log(responseBody);
console.log("On refuse le ticket");
errorMessage = responseBody.message;
showError = true;
options.reset(user.username);
setTimeout(() => {
optionsAreNotSet = true;
showError = false;
errorMessage = "";
}, 5000);
}
} catch (e) {
console.log(e);
}
else if (token)
{
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 ?
// Si on ne rentre pas dans le else if, du coup il ne se passe rien.
}
const initGameForInvitedPlayer = async(invitation : any) =>
{
optionsAreNotSet = false
showWaitPage = true
console.log("invitation : ")
console.log(invitation)
optionsAreNotSet = false;
showWaitPage = true;
console.log("invitation : ");
console.log(invitation);
if (invitation.token)
{
idOfIntevalCheckTerminationOfTheMatch = setInterval(matchTermitation, 1000);
watchGameStateInterval = setInterval(watchGameState, watchGameStateIntervalRate);
options.playerOneUsername = invitation.playerOneUsername;
options.playerTwoUsername = invitation.playerTwoUsername;
options.isSomeoneIsInvited = true;
options.isInvitedPerson = true
pong.init(options, gameAreaId, invitation.token);
showWaitPage = false
options.isInvitedPerson = true;
pong.init(invitation.gameOptions, options, gameAreaId, invitation.token);
showWaitPage = false;
hiddenGame = false;
}
}
const matchTermitation = () => {
console.log("Ping matchTermitation")
if (gameState.matchAbort || gameState.matchEnded)
const watchGameState = () => {
console.log("watchGameState");
if (gameState) { // trigger Svelte reactivity
gameState.matchStarted = gameState.matchStarted;
gameState.matchEnded = gameState.matchEnded;
gameState.matchAborted = gameState.matchAborted;
}
if (gameState.matchAborted || gameState.matchEnded)
{
clearInterval(idOfIntevalCheckTerminationOfTheMatch);
console.log("matchTermitation was called")
showWaitPage = false
gameState.matchAbort ?
errorMessageWhenAttemptingToGetATicket = "The match has been aborted"
: errorMessageWhenAttemptingToGetATicket = "The match is finished !"
gameState.matchAbort ? showError = true : showMatchEnded = true;
clearInterval(watchGameStateInterval);
console.log("watchGameState, end");
setTimeout(() => {
resetPage();
errorMessageWhenAttemptingToGetATicket = "";
isThereAnyInvitation = false;
invitations = []; // ???
console.log("matchTermitation : setTimeout")
console.log("watchGameState : setTimeout");
}, 5000);
}
}
const showOptions = () => {
showGameOption = true
showInvitations = false
const switchToGameOptions = () => {
showGameOptions = true;
showInvitations = false;
}
const showInvitation = async() => {
showGameOption = false;
const fetchInvitations = async() => {
showGameOptions = false;
showInvitations = true;
invitations = await fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/game/invitations`)
.then(x => x.json())
invitations.length !== 0 ? isThereAnyInvitation = true : isThereAnyInvitation = false
.then(x => x.json());
}
const rejectInvitation = async(invitation) => {
@@ -156,46 +156,30 @@
})
})
.then(x => x.json())
.catch(error => console.log(error))
showInvitation()
.catch(error => console.log(error));
fetchInvitations();
}
const acceptInvitation = async(invitation : any) => {
const res = await fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/game/accept`, {
const acceptInvitation = async(invitation : any) =>
{
const res = await fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/game/accept`, {
method: "POST",
headers: { 'Content-Type': 'application/json'},
body: JSON.stringify({
token : invitation.token
})
})
.then(x => x.json())
.catch(error => {
console.log(error)
})
if (res.status === 200)
{
showInvitation()
initGameForInvitedPlayer(invitation)
}
//Au final c'est utile !
}).catch(error => console.log(error));
initGameForInvitedPlayer(invitation) // Luke: normal de initGameForInvitedPlayer() sur un "res.status" different de 200 ?
if (res && res.ok) {
initGameForInvitedPlayer(invitation);
}
}
function leaveMatch() {
clearInterval(watchGameStateInterval);
resetPage();
};
function resetPage() {
hiddenGame = true;
optionsAreNotSet = true
showError = false;
showMatchEnded = false;
options.reset();
options.playerOneUsername = user.username;
pong.destroy();
};
</script>
<Header />
@@ -203,47 +187,61 @@
Might become useless after CSS rework. -->
<div id="game_page">
{#if showMatchEnded === true}
<div id="div_game" in:fly="{{ y: 10, duration: 1000 }}">
<p>{errorMessageWhenAttemptingToGetATicket}</p>
</div>
{/if}
{#if showError === true}
<div id="div_game" in:fly="{{ y: 10, duration: 1000 }}">
{#if showError}
<div class="div_game" in:fly="{{ y: 10, duration: 1000 }}">
<fieldset>
<legend>Error</legend>
<p>{errorMessageWhenAttemptingToGetATicket}</p>
<p>{errorMessage}</p>
</fieldset>
</div>
{/if}
{#if !hiddenGame}
{#if gameState.matchEnded}
<div class="div_game" in:fly="{{ y: 10, duration: 1000 }}">
<p>The match is finished !</p>
</div>
{:else if gameState.matchAborted}
<div class="div_game" in:fly="{{ y: 10, duration: 1000 }}">
<p>The match has been aborted</p>
</div>
{/if}
{/if}
<div id="canvas_container" hidden={hiddenGame}>
<canvas id={gameAreaId}/>
</div>
{#if !hiddenGame}
<div id="div_game">
<button id="pong_button" on:click={leaveMatch}>forfeit</button>
</div>
{#if gameState.matchStarted && !gameState.matchEnded}
<div class="div_game">
<button class="pong_button" on:click={leaveMatch}>forfeit</button>
</div>
{:else if !gameState.matchStarted}
<div class="div_game">
<button class="pong_button" on:click={leaveMatch}>leave matchmaking</button>
</div>
{/if}
{/if}
{#if showWaitPage === true}
<div id="div_game" in:fly="{{ y: 10, duration: 1000 }}">
{#if showWaitPage}
<div class="div_game" in:fly="{{ y: 10, duration: 1000 }}">
<fieldset>
<legend>Connecting to the game...</legend>
<p>{waitingMessage}</p>
<p>Please wait...</p>
</fieldset>
</div>
{/if}
<!-- -->
{#if optionsAreNotSet}
{#if showGameOption === true}
{#if showGameOptions}
<div id="game_option">
<div id="div_game">
<button id="pong_button" on:click={showInvitation}>Show invitations</button>
<fieldset>
<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>
<input type="checkbox" id="multi_balls" name="multi_balls" bind:checked={options.multi_balls}>
@@ -264,7 +262,7 @@
<input type="checkbox" id="isSomeoneIsInvited" bind:checked={options.isSomeoneIsInvited}>
<label for="moving_walls">Invite a friend</label>
</div>
{#if options.isSomeoneIsInvited === true}
{#if options.isSomeoneIsInvited}
<select bind:value={options.playerTwoUsername}>
{#each allUsers as user }
<option value={user.username}>{user.username}</option>
@@ -272,7 +270,7 @@
</select>
{/if}
<div>
<button id="pong_button" on:click={initGame}>PLAY</button>
<button class="pong_button" on:click={initGame}>PLAY</button>
</div>
</fieldset>
</div>
@@ -280,26 +278,23 @@
{/if}
{#if showInvitations}
<div id="invitations_options" in:fly="{{ y: 10, duration: 1000 }}">
<div id="div_game">
<button id="pong_button" on:click={showOptions}>Play a Game</button>
<fieldset>
<legend>Current invitation(s)</legend>
{#if isThereAnyInvitation}
{#each invitations as invitation }
<div>
{invitation.playerOneUsername} has invited you to play a pong !
<button id="pong_button" on:click={() => acceptInvitation(invitation)}>V</button>
<button id="pong_button" on:click={() => rejectInvitation(invitation)}>X</button>
</div>
{/each}
{/if}
{#if isThereAnyInvitation === false}
<p>Currently, no one asked to play with you.</p>
<button id="pong_button" on:click={showInvitation}>Reload</button>
{/if}
</fieldset>
</div>
<div class="div_game">
<button class="pong_button" on:click={switchToGameOptions}>Play a Game</button>
<fieldset in:fly="{{ y: 10, duration: 1000 }}">
<legend>invitations</legend>
<button class="pong_button" on:click={fetchInvitations}>Reload</button>
{#if invitations.length !== 0}
{#each invitations as invitation}
<div>
{invitation.playerOneUsername} has invited you to play a pong !
<button class="pong_button" on:click={() => acceptInvitation(invitation)}>V</button>
<button class="pong_button" on:click={() => rejectInvitation(invitation)}>X</button>
</div>
{/each}
{:else}
<p>Currently, no one asked to play with you.</p>
{/if}
</fieldset>
</div>
{/if}
{/if}
@@ -319,6 +314,7 @@
}
#game_page {
margin: 0;
padding: 20px;
background-color: #222425;
position: relative;
width: 100%;
@@ -339,22 +335,21 @@ canvas {
width: 80%;
}
#div_game {
margin-top: 20px;
.div_game {
text-align: center;
font-family: "Bit5x3";
color: rgb(245, 245, 245);
font-size: x-large;
}
#div_game fieldset {
.div_game fieldset {
max-width: 50vw;
width: auto;
margin: 0 auto;
}
#div_game fieldset div {
.div_game fieldset div {
padding: 10px;
}
#pong_button {
.pong_button {
font-family: "Bit5x3";
color: rgb(245, 245, 245);
background-color: #333333;
@@ -362,18 +357,4 @@ canvas {
padding: 10px;
}
#users_name { /* UNUSED */
text-align: center;
font-family: "Bit5x3";
color: rgb(245, 245, 245);
font-size: x-large;
}
#error_notification { /* UNUSED */
text-align: center;
display: block;
font-family: "Bit5x3";
color: rgb(143, 19, 19);
font-size: x-large;
}
</style>

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

@@ -8,7 +8,6 @@
import * as pongSpectator from "./client/pongSpectator";
import { gameState } from "./client/ws";
import { gameSessionIdPLACEHOLDER } from "./shared_js/constants";
//user's stuff
let user;
@@ -17,79 +16,71 @@
//Game's stuff client side only
const gameAreaId = "game_area";
let sound = "off";
// const dummyMatchList = [
// {
// 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,
// playerOneUsername: "bertand",
// playerTwoUsername: "cassandre",
// },
// {
// gameSessionId: "id3452",
// matchOptions: pongSpectator.MatchOptions.multiBalls,
// playerOneUsername: "madeleine",
// playerTwoUsername: "jack",
// },
// ];
let matchList = [];
//html boolean for pages
let hiddenGame = true;
let hiddenMatchList = false;
let watchGameStateInterval;
const watchGameStateIntervalRate = 142;
onMount( async() => {
user = await fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/user`)
.then( x => x.json() );
allUsers = await fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/user/all`)
.then( x => x.json() );
// WIP: fetch for match list here
const responseForMatchList = await fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/game/match/all`)
const jsonForMatchList = await responseForMatchList.json();
matchList = jsonForMatchList;
console.log("matchList");
if (matchList.length <= 0)
hiddenMatchList = true;
console.log(matchList);
})
onDestroy( async() => {
clearInterval(watchGameStateInterval);
pongSpectator.destroy();
})
async function initGameSpectator(gameSessionId: string, matchOptions: pongSpectator.MatchOptions) {
async function initGameSpectator(gameSessionId: string, matchOptions: pongSpectator.MatchOptions)
{
watchGameStateInterval = setInterval(watchGameState, watchGameStateIntervalRate);
pongSpectator.init(matchOptions, sound, gameAreaId, gameSessionId);
hiddenGame = false;
};
const watchGameState = () => {
console.log("watchGameState")
if (gameState) { // trigger Svelte reactivity
gameState.matchStarted = gameState.matchStarted;
gameState.matchEnded = gameState.matchEnded;
gameState.matchAborted = gameState.matchAborted;
}
if (gameState.matchAborted || gameState.matchEnded)
{
clearInterval(watchGameStateInterval);
console.log("watchGameState, end")
setTimeout(() => {
resetPage();
console.log("watchGameState : setTimeout")
}, 5000);
}
}
function leaveMatch() {
clearInterval(watchGameStateInterval);
resetPage();
};
async function resetPage() {
hiddenGame = true;
pongSpectator.destroy();
// WIP: fetch for match list here
fetchMatchList();
};
async function fetchMatchList() {
matchList = await fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/game/match/all`)
.then( x => x.json() );
console.log("matchList");
if (matchList.length <= 0)
hiddenMatchList = true;
console.log(matchList);
};
</script>
<!-- -->
@@ -98,38 +89,50 @@
Might become useless after CSS rework. -->
<div id="game_page">
{#if !hiddenGame}
{#if gameState.matchEnded}
<div class="div_game" in:fly="{{ y: 10, duration: 1000 }}">
<p>The match is finished !</p>
</div>
{/if}
{/if}
<div id="canvas_container" hidden={hiddenGame}>
<canvas id={gameAreaId}/>
</div>
{#if hiddenGame}
<div id="div_game">
<div id="game_options">
<fieldset>
{#if hiddenMatchList}
<legend>no match available</legend>
{:else}
<legend>options</legend>
<div>
<p>sound :</p>
<input type="radio" id="sound_on" name="sound_selector" bind:group={sound} value="on">
<label for="sound_on">on</label>
<input type="radio" id="sound_off" name="sound_selector" bind:group={sound} value="off">
<label for="sound_off">off</label>
</div>
<menu id="match_list">
{#each matchList as match}
<MatchListElem match={match} on:click={(e) => initGameSpectator(match.gameServerIdOfTheMatch, match.gameOptions)} />
{/each}
</menu>
{/if}
</fieldset>
{#if !hiddenGame}
{#if !gameState.matchEnded}
<div class="div_game">
<button class="pong_button" on:click={leaveMatch}>leave</button>
</div>
{/if}
{/if}
</div>
{:else}
<div id="div_game">
<button id="pong_button" on:click={leaveMatch}>leave match</button>
<!-- -->
{#if hiddenGame}
<div class="div_game" in:fly="{{ y: 10, duration: 1000 }}">
<fieldset>
<legend>options</legend>
<button class="pong_button" on:click={fetchMatchList}>Reload</button>
<div>
<p>sound :</p>
<input type="radio" id="sound_on" name="sound_selector" bind:group={sound} value="on">
<label for="sound_on">on</label>
<input type="radio" id="sound_off" name="sound_selector" bind:group={sound} value="off">
<label for="sound_off">off</label>
</div>
</fieldset>
{#if matchList.length !== 0}
<menu id="match_list">
{#each matchList as match}
<MatchListElem match={match} on:click={(e) => initGameSpectator(match.gameServerIdOfTheMatch, match.gameOptions)} />
{/each}
</menu>
{:else}
<p>no match ongoing</p>
{/if}
</div>
{/if}
@@ -147,8 +150,10 @@
font-style: normal;
font-display: swap;
}
#game_page {
margin: 0;
padding: 20px;
background-color: #222425;
position: relative;
width: 100%;
@@ -157,37 +162,43 @@
#canvas_container {
margin-top: 20px;
text-align: center;
/* border: dashed rgb(245, 245, 245) 5px; */
/* max-height: 80vh; */
/* overflow: hidden; */
}
canvas {
/* background-color: #ff0000; */
background-color: #333333;
max-width: 75vw;
/* max-height: 100vh; */
width: 80%;
}
#div_game {
margin-top: 20px;
.div_game {
text-align: center;
font-family: "Bit5x3";
color: rgb(245, 245, 245);
font-size: x-large;
}
#div_game fieldset {
.div_game fieldset {
max-width: 50vw;
width: auto;
margin: 0 auto;
}
#div_game fieldset div {
.div_game fieldset div {
padding: 10px;
}
#match_list {
font-family: 'Courier New', Courier, monospace;
font-size: large;
}
#pong_button {
.pong_button {
font-family: "Bit5x3";
color: rgb(245, 245, 245);
background-color: #333333;
font-size: x-large;
padding: 10px;
}
#match_list {
font-family: 'Courier New', Courier, monospace;
font-size: large;
}
</style>

108
srcs/requirements/svelte/api_front/src/pages/game/Ranking.svelte
View File

@@ -27,48 +27,78 @@
}
</script>
<Header />
<br />
<div class="container">
<div class="row">
<div class="col-12">
<h1>Ranking</h1>
</div>
</div>
<div class="row">
<div class="col-12">
<table class="table table-striped">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Username</th>
<th scope="col">Win</th>
<th scope="col">Lose</th>
<th scope="col">Draw</th>
<th scope="col">Games Played</th>
</tr>
</thead>
<tbody>
{#each allUsers as user, i}
<tr>
<th scope="row">{i + 1}</th>
{#if user.username === currentUser.username}
<td><b>You ({user.username})</b></td>
{:else}
<td>{user.username}</td>
{/if}
<td>{user.stats.winGame}</td>
<td>{user.stats.loseGame}</td>
<td>{user.stats.drawGame}</td>
<td>{user.stats.totalGame}</td>
</tr>
{/each}
</tbody>
</table>
</div>
</div>
<div class="principal-div">
<table class="stats-table">
<thead>
<tr>
<th>#</th>
<th>Username</th>
<th>Win</th>
<th>Lose</th>
<th>Draw</th>
<th>Games Played</th>
</tr>
</thead>
<tbody>
{#each allUsers as user, i}
<tr>
<th>{i + 1}</th>
{#if user.username === currentUser.username}
<td><b>You ({user.username})</b></td>
{:else}
<td>{user.username}</td>
{/if}
<td>{user.stats.winGame}</td>
<td>{user.stats.loseGame}</td>
<td>{user.stats.drawGame}</td>
<td>{user.stats.totalGame}</td>
</tr>
{/each}
</tbody>
</table>
</div>
<style>
.principal-div {
display: flex;
justify-content: center;
align-items: center;
}
.stats-table {
margin-left: auto;
margin-right: auto;
font-size: 0.9em;
font-family: sans-serif;
min-width: 400px;
}
.stats-table thead tr {
background-color: #618174;
color: #ffffff;
}
.stats-table th,
.stats-table td {
padding: 12px 15px;
}
.stats-table tbody tr {
border-bottom: 1px solid #dddddd;
}
.stats-table tbody tr:nth-of-type(even) {
background-color: #f3f3f3;
}
.stats-table tbody tr:last-of-type {
border-bottom: 2px solid #618174;
}
.stats-table tbody tr.active-row {
font-weight: bold;
color: #618174;
}
</style>

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

@@ -2,26 +2,37 @@
import * as c from "./constants.js"
// export const soundPongArr: HTMLAudioElement[] = [];
export const soundPongArr: HTMLAudioElement[] = [
new Audio("http://" + process.env.WEBSITE_HOST + ":" + process.env.WEBSITE_PORT + "/sound/pong/"+1+".ogg"),
new Audio("http://" + process.env.WEBSITE_HOST + ":" + process.env.WEBSITE_PORT + "/sound/pong/"+2+".ogg")
];
export const soundRoblox = new Audio("http://" + process.env.WEBSITE_HOST + ":" + process.env.WEBSITE_PORT + "/sound/roblox-oof.ogg");
export let muteFlag: boolean;
export const soundPongArr: HTMLAudioElement[] = [];
export let soundRoblox: HTMLAudioElement;
export function initAudio(sound: string)
{
let muteFlag: boolean;
soundPongArr.length = 0;
soundRoblox = null;
if (sound === "on") {
muteFlag = false;
}
else {
muteFlag = true;
return; // Could be changed
/*
Stop initAudio() here because in the current state of the game
there no way to change muteFlag after game start.
If it becomes an option,
we should continue initAudio() regardless of the muteFlag.
*/
}
soundPongArr.push(new Audio("http://" + process.env.WEBSITE_HOST + ":" + process.env.WEBSITE_PORT + "/sound/pong/"+1+".ogg"));
soundPongArr.push(new Audio("http://" + process.env.WEBSITE_HOST + ":" + process.env.WEBSITE_PORT + "/sound/pong/"+2+".ogg"));
soundPongArr.forEach((value) => {
value.volume = c.soundRobloxVolume;
value.muted = muteFlag;
});
soundRoblox = new Audio("http://" + process.env.WEBSITE_HOST + ":" + process.env.WEBSITE_PORT + "/sound/roblox-oof.ogg");
soundRoblox.volume = c.soundRobloxVolume;
soundRoblox.muted = muteFlag;
}

1
srcs/requirements/svelte/api_front/src/pages/game/client/class/GameArea.ts
View File

@@ -6,6 +6,7 @@ export class GameArea {
handleInputInterval: number = 0;
gameLoopInterval: number = 0;
drawLoopInterval: number = 0;
timeoutArr: number[] = [];
canvas: HTMLCanvasElement;
ctx: CanvasRenderingContext2D;
constructor(canvas_id: string) {

4
srcs/requirements/svelte/api_front/src/pages/game/client/class/InitOptions.ts
View File

@@ -7,13 +7,13 @@ export class InitOptions {
isInvitedPerson = false;
playerOneUsername = "";
playerTwoUsername = "";
reset() {
reset(playerOneUsername: string) {
this.sound = "off";
this.multi_balls = false;
this.moving_walls = false;
this.isSomeoneIsInvited = false;
this.isInvitedPerson = false;
this.playerOneUsername = "";
this.playerOneUsername = playerOneUsername;
this.playerTwoUsername = "";
}
}

14
srcs/requirements/svelte/api_front/src/pages/game/client/class/RectangleClient.ts
View File

@@ -2,7 +2,7 @@
import { Vector, VectorInteger } from "../../shared_js/class/Vector.js";
import type { GraphicComponent } from "../../shared_js/class/interface.js";
import { Rectangle, MovingRectangle, Racket, Ball } from "../../shared_js/class/Rectangle.js";
import { soundPongArr } from "../audio.js"
import { muteFlag, soundPongArr } from "../audio.js"
import { random } from "../utils.js";
function updateRectangle(this: RectangleClient) {
@@ -70,6 +70,7 @@ export class BallClient extends Ball implements GraphicComponent {
color: string;
update: () => void;
clear: (pos?: VectorInteger) => void;
soundSwitch = false;
constructor(pos: VectorInteger, size: number, baseSpeed: number, speedIncrease: number,
ctx: CanvasRenderingContext2D, color: string)
{
@@ -81,9 +82,14 @@ export class BallClient extends Ball implements GraphicComponent {
}
bounce(collider?: Rectangle) {
this._bounceAlgo(collider);
let i = Math.floor(random(0, soundPongArr.length));
soundPongArr[ i ].play();
console.log(`sound_i=${i}`); // debug log
if (!muteFlag)
{
this.soundSwitch = !this.soundSwitch;
soundPongArr[this.soundSwitch ? 1 : 0].play();
// let i = Math.floor(random(0, soundPongArr.length));
// soundPongArr[ i ].play();
// console.log(`sound_i=${i}`); // debug log
}
}
}

29
srcs/requirements/svelte/api_front/src/pages/game/client/init.ts
View File

@@ -34,15 +34,28 @@ export function initBase(matchOptions: en.MatchOptions, sound: string, gameAreaI
export function destroyBase()
{
if (pong)
{
clearInterval(pong.handleInputInterval);
clearInterval(pong.gameLoopInterval);
clearInterval(pong.drawLoopInterval);
setPong(null);
}
if (socket && socket.OPEN) {
if (socket && (socket.OPEN || socket.CONNECTING)) {
socket.close();
}
if (pong)
{
pong.timeoutArr.forEach((value) => {
clearTimeout(value);
});
pong.timeoutArr = [];
clearInterval(pong.handleInputInterval);
pong.handleInputInterval = null;
clearInterval(pong.gameLoopInterval);
pong.gameLoopInterval = null;
clearInterval(pong.drawLoopInterval);
pong.drawLoopInterval = null;
setPong(null);
}
setGc(null);
setMatchOptions(null);
resetGameState();
}

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

@@ -1,25 +1,24 @@
import * as c from "./constants.js"
import type * as en from "../shared_js/enums.js"
import { handleInput } from "./handleInput.js";
import { gameLoop } from "./gameLoop.js"
import { drawLoop } from "./draw.js";
import { countdown } from "./utils.js";
import { initWebSocket } from "./ws.js";
import { gameState, initWebSocket } from "./ws.js";
import type { InitOptions } from "./class/InitOptions.js";
export { InitOptions } from "./class/InitOptions.js";
import { initBase, destroyBase, computeMatchOptions } from "./init.js";
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 { setStartFunction } from "./global.js"
let abortControllerKeydown: AbortController;
let abortControllerKeyup: AbortController;
export function init(options: InitOptions, gameAreaId: string, token: string)
export function init(matchOptions: en.MatchOptions, options: InitOptions, gameAreaId: string, token: string)
{
const matchOptions = computeMatchOptions(options);
initBase(matchOptions, options.sound, gameAreaId);
setStartFunction(start);
@@ -47,11 +46,12 @@ export function destroy()
function start()
{
gc.text1.pos.assign(c.w*0.5, c.h*0.75);
countdown(c.matchStartDelay/1000, (count: number) => {
const countdownArr = countdown(c.matchStartDelay, 1000, (count: number) => {
gc.text1.clear();
gc.text1.text = `${count}`;
gc.text1.text = `${count/1000}`;
gc.text1.update();
}, start_after_countdown);
pong.timeoutArr = pong.timeoutArr.concat(countdownArr);
}
function start_after_countdown()
@@ -66,7 +66,7 @@ function start_after_countdown()
abortControllerKeyup = new AbortController();
window.addEventListener(
'keyup',
(e) => { pong.deleteKey(e.key);},
(e) => { pong.deleteKey(e.key); },
{signal: abortControllerKeyup.signal}
);

27
srcs/requirements/svelte/api_front/src/pages/game/client/utils.ts
View File

@@ -1,16 +1,25 @@
export * from "../shared_js/utils.js"
export function countdown(count: number, callback?: (count: number) => void, endCallback?: () => void)
export function countdown(count: number, step: number, callback: (count: number) => void, endCallback?: () => void) : number[]
{
console.log("countdown ", count);
if (count > 0) {
if (callback) {
const timeoutArr: number[] = [];
if (endCallback) {
timeoutArr.push( window.setTimeout(endCallback, count) );
}
let reverseCount = 0;
while (count > 0)
{
timeoutArr.push( window.setTimeout((count: number) => {
console.log("countdown ", count);
callback(count);
}
setTimeout(countdown, 1000, --count, callback, endCallback);
}
else if (endCallback) {
endCallback();
}, reverseCount, count)
);
count -= step;
reverseCount += step;
}
return timeoutArr;
}

32
srcs/requirements/svelte/api_front/src/pages/game/client/ws.ts
View File

@@ -6,18 +6,20 @@ import * as en from "../shared_js/enums.js"
import * as msg from "./message.js";
import type { RacketClient } from "./class/RectangleClient.js";
import { repeatInput } from "./handleInput.js";
import { soundRoblox } from "./audio.js"
import { muteFlag, soundRoblox } from "./audio.js"
import { sleep } from "./utils.js";
import { Vector, VectorInteger } from "../shared_js/class/Vector.js";
export const gameState = {
matchStarted: false,
matchEnded: false,
matchAbort: false
matchAborted: false
}
export function resetGameState() {
gameState.matchStarted = false;
gameState.matchEnded = false;
gameState.matchAbort = false;
gameState.matchAborted = false;
}
class ClientInfo {
@@ -36,7 +38,7 @@ class ClientInfoSpectator {
}
const wsUrl = "ws://" + process.env.WEBSITE_HOST + ":" + process.env.WEBSITE_PORT + "/pong";
export let socket: WebSocket; /* TODO: A way to still use "const" not "let" ? */
export let socket: WebSocket;
export const clientInfo = new ClientInfo();
export const clientInfoSpectator = new ClientInfoSpectator(); // WIP, could refactor this
@@ -99,12 +101,13 @@ function preMatchListener(this: WebSocket, event: MessageEvent)
msg.matchmakingComplete();
break;
case en.EventTypes.matchStart:
gameState.matchStarted = true;
socket.removeEventListener("message", preMatchListener);
socket.addEventListener("message", inGameListener);
startFunction();
break;
case en.EventTypes.matchAbort:
gameState.matchAbort = true;
gameState.matchAborted = true;
socket.removeEventListener("message", preMatchListener);
msg.matchAbort();
break;
@@ -195,11 +198,14 @@ function gameUpdate(data: ev.EventGameUpdate)
function scoreUpdate(data: ev.EventScoreUpdate)
{
// console.log("scoreUpdate");
if (clientInfo.side === en.PlayerSide.left && data.scoreRight > gc.scoreRight.value) {
soundRoblox.play();
}
else if (clientInfo.side === en.PlayerSide.right && data.scoreLeft > gc.scoreLeft.value) {
soundRoblox.play();
if (!muteFlag)
{
if (clientInfo.side === en.PlayerSide.left && data.scoreRight > gc.scoreRight.value) {
soundRoblox.play();
}
else if (clientInfo.side === en.PlayerSide.right && data.scoreLeft > gc.scoreLeft.value) {
soundRoblox.play();
}
}
gc.scoreLeft.value = data.scoreLeft;
gc.scoreRight.value = data.scoreRight;
@@ -242,6 +248,7 @@ export function preMatchListenerSpectator(this: WebSocket, event: MessageEvent)
const data: ev.ServerEvent = JSON.parse(event.data);
if (data.type === en.EventTypes.matchStart)
{
gameState.matchStarted = true;
socket.removeEventListener("message", preMatchListenerSpectator);
socket.addEventListener("message", inGameListenerSpectator);
socket.send(JSON.stringify( new ev.ClientEvent(en.EventTypes.clientSpectatorReady) ));
@@ -322,10 +329,5 @@ function matchEndSpectator(data: ev.EventMatchEnd)
console.log("matchEndSpectator");
gameState.matchEnded = true;
socket.close();
// WIP
/* msg.win();
if (data.forfeit) {
msg.forfeit(clientInfo.side);
} */
}

1
srcs/requirements/svelte/api_front/src/pages/game/shared_js/enums.ts
View File

@@ -31,6 +31,7 @@ export enum InputEnum {
}
export enum PlayerSide {
noSide = 0,
left = 1,
right
}

49
srcs/requirements/svelte/api_front/src/pieces/chat/Chat.svelte
View File

@@ -1,54 +1,11 @@
<script lang="ts">
import Layouts from './Chat_layouts.svelte';
import { init_socket } from './Socket_init';
export let color = "transparent";
/* web sockets with socket.io
*/
import { onMount } from 'svelte';
import io from 'socket.io-client';
const socket = io(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}`, {
path: '/chat'
});
onMount(async => {
socket.on('connect', function(){
console.log("socket.io connected");
});
socket.on('disconnect', function(){
console.log("socket.io disconnected");
});
socket.on('connect_error', function(){
console.log("socket.io connect_error");
});
socket.on('connect_timeout', function(){
console.log("socket.io connect_timeout");
});
socket.on('error', function(){
console.log("socket.io error");
});
socket.on('reconnect', function(){
console.log("socket.io reconnect");
});
socket.on('reconnect_attempt', function(){
console.log("socket.io reconnect_attempt");
});
socket.on('reconnecting', function(){
console.log("socket.io reconnecting");
});
socket.on('reconnect_error', function(){
console.log("socket.io reconnect_error");
});
socket.on('reconnect_failed', function(){
console.log("socket.io reconnect_failed");
});
socket.on('ping', function(){
console.log("socket.io ping");
});
socket.on('pong', function(){
console.log("socket.io pong");
});
});
init_socket();
</script>

6
srcs/requirements/svelte/api_front/src/pieces/chat/Chat_box_css.svelte
View File

@@ -1,12 +1,12 @@
<script lang="ts">
import { layout } from './Store_chat';
export let color;
export let layout;
</script>
<div class="{layout} chat_box" style="background-color: {color};">
<div class="{$layout} chat_box" style="background-color: {color};">
<slot></slot>
</div>

71
srcs/requirements/svelte/api_front/src/pieces/chat/Chat_layouts.svelte
View File

@@ -1,6 +1,8 @@
<script lang="ts">
import Debug from './tmp_debug.svelte';
import { layout } from './Store_chat';
import ChatBox from './Chat_box_css.svelte';
import CloseLayout from './Layout_close.svelte';
@@ -14,68 +16,75 @@
import MuteLayout from './Layout_mute.svelte';
import UserLayout from './Layout_user.svelte';
import Button from './Chat_button.svelte';
import Button from './Element_button.svelte';
/* global variables
*/
export let color;
let room = "";
let admin = false;
let layout = "close";
let layouts = ["home", "home"];
/* hold previous version of layout, to go back
*/
function set_layouts(layout)
function set_layouts($layout)
{
if (layout === "close")
console.log("layouts:", layouts);
console.log("layout:", $layout);
if ($layout.length === 0)
layout.set(layouts[0]);
else if ($layout === "close")
return;
if (layout === layouts[0])
else if ($layout === layouts[0])
return;
if (layout === layouts[1])
layouts = [layout, "home"];
else if ($layout === layouts[1])
layouts = [$layout, "home"];
else
layouts = [layout, layouts[0]];
layouts = [$layout, layouts[0]];
console.log("- layouts:", layouts);
}
$: set_layouts(layout);
$: set_layouts($layout);
</script>
<ChatBox layout={layout} color={color}>
<ChatBox color={color}>
{#if layout === "home"}
<HomeLayout bind:layout />
{#if $layout === "home"}
<HomeLayout />
{:else if layout === "close"}
<CloseLayout bind:layout />
{:else if $layout === "close"}
<CloseLayout back={layouts[0]} />
{:else if layout === "room"}
<RoomLayout bind:layout back={layouts[1]} />
{:else if $layout === "room"}
<RoomLayout back={layouts[1]} />
{:else if layout === "new"}
<NewLayout bind:layout back={layouts[1]} />
{:else if $layout === "new"}
<NewLayout back={layouts[1]} />
{:else if layout === "settings"}
<SettingsLayout bind:layout back={layouts[1]} />
{:else if $layout === "settings"}
<SettingsLayout back={layouts[1]} />
{:else if layout === "room_set"}
<RoomsetLayout bind:layout back={layouts[1]} />
{:else if $layout === "room_set"}
<RoomsetLayout back={layouts[1]} />
{:else if layout === "protected"}
<ProtectedLayout bind:layout back={layouts[1]} />
{:else if $layout === "protected"}
<ProtectedLayout back={layouts[1]} />
{:else if layout === "create"}
<CreateLayout bind:layout back={layouts[1]} />
{:else if $layout === "create"}
<CreateLayout back={layouts[1]} />
{:else if layout === "mute"}
<MuteLayout bind:layout back={layouts[1]} />
{:else if $layout === "mute"}
<MuteLayout back={layouts[1]} />
{:else if layout === "user"}
<UserLayout bind:layout back={layouts[1]} />
{:else if $layout === "user"}
<UserLayout back={layouts[1]} />
{/if}
</ChatBox>
<!-- TMP DEBUG -->
<Debug bind:layouts />
<style></style>

55
srcs/requirements/svelte/api_front/src/pieces/chat/Chat_button.svelte → srcs/requirements/svelte/api_front/src/pieces/chat/Element_button.svelte
View File

@@ -1,4 +1,3 @@
<!--
<Button
bind:layout
@@ -13,14 +12,15 @@
<script lang="ts">
import { layout } from './Store_chat';
export let my_class = "";
export let my_title = "";
export let layout = "";
export let new_layout = "";
export let on_click = "";
function update_layout() {
layout = new_layout;
layout.set(new_layout);
}
</script>
@@ -67,7 +67,7 @@
}
/* for btn list
/* .list
*/
.list:not(:hover) {
background-color: rgb(240, 240, 240);
@@ -77,14 +77,14 @@
}
/* for transparent btn
/* .transparent
*/
.transparent:not(:hover) {
background-color: transparent;
}
/* for deactivated btn
/* .deactivated
*/
.deactivate {
background-color: transparent;
@@ -92,7 +92,40 @@
}
/* for icon
/* .border
*/
.border {
border: 1px solid rgb(150, 150, 150);
}
/* .light
*/
.light {
background-color: rgb(233, 233, 233);
}
.light.border {
border: 1px solid rgb(204, 204, 204);
}
.light:hover {
background-color: rgb(220, 220, 220);
}
.light.border:hover {
border-color: rgb(200, 200, 200);
}
.light:active {
background-color: rgb(210, 210, 210);
}
/* .thin
*/
.thin p {
padding: 5px;
}
/* .icon
*/
.icon p {
display: none;
@@ -107,7 +140,7 @@
}
/* for 3 dots btn
/* .dots
*/
.dots::after {
content: '\2807';
@@ -123,7 +156,7 @@
}
/* for close btn
/* .close
*/
.close::before {
content: "";
@@ -136,7 +169,7 @@
}
/* for back btn
/* .back
*/
.back::before {
content: "";
@@ -151,7 +184,7 @@
}
/* for blocked user
/* .blocked
https://www.fileformat.info/info/unicode/category/So/list.htm
U+1F512 LOCK 🔒
U+1F513 OPEN LOCK 🔓

0
srcs/requirements/svelte/api_front/src/pieces/chat/Chat_msg.svelte → srcs/requirements/svelte/api_front/src/pieces/chat/Element_msg.svelte
View File

11
srcs/requirements/svelte/api_front/src/pieces/chat/Element_warning.svelte Normal file
View File

@@ -0,0 +1,11 @@
<script>
export let content = "warning";
export let bg_color = "rgb(201, 87, 34)";
export let color = "rgb(240, 240, 240)";
</script>
<p style="background-color: {bg_color}; color: {color};">
{content}
</p>

9
srcs/requirements/svelte/api_front/src/pieces/chat/Layout_close.svelte
View File

@@ -1,13 +1,14 @@
<script lang="ts">
<script>
import { layout } from './Store_chat';
import Button from './Element_button.svelte';
import Button from './Chat_button.svelte';
export let layout;
export let back = "";
</script>
<div class="grid_box">
<Button bind:layout new_layout="home" my_class="chat">
<Button new_layout={back} my_class="chat">
chat
</Button>
</div>

111
srcs/requirements/svelte/api_front/src/pieces/chat/Layout_create.svelte
View File

@@ -1,16 +1,41 @@
<script lang="ts">
<script>
import { msgs, layout } from './Store_chat';
import { change_room, create_room } from './Request_rooms';
import Button from './Element_button.svelte';
import Warning from './Element_warning.svelte';
import Button from './Chat_button.svelte';
export let layout = "";
export let back = "";
let room_name: string;
let room_type: string;
let room_password: string;
let response = {
status: 0,
message: "",
}
async function handleSubmit(evt)
{
let formIsValid = evt.target.checkValidity();
if (!formIsValid)
return;
// send the new room
response = await create_room(room_name, room_type);
// go to room
if (response.status === 200)
await change_room(room_name);
}
</script>
<div class="grid_box">
<!-- back -->
<Button bind:layout new_layout={back} my_class="back icon" my_title="go back {back}">
<Button new_layout={back} my_class="back icon" my_title="go back {back}">
back
</Button>
@@ -20,37 +45,45 @@
</Button>
<!-- close -->
<Button bind:layout new_layout="close" my_class="close icon">
<Button new_layout="close" my_class="close icon">
close
</Button>
<!-- panel_create -->
<div class="panel panel_create">
<form>
<div class="panel panel_create __border_top">
<form on:submit|preventDefault={handleSubmit}>
{#if response.status >= 300}
<Warning content={response.message}/>
{/if}
<!-- name: -->
<label for="chat_name"><p>new room name :</p></label>
<input id="chat_name" required>
<input id="chat_name" bind:value={room_name} name="room_name" required>
<!-- [ ] pubic -->
<input id="chat_public" type="radio" name="chat_create_type" checked>
<label for="chat_public" class="_radio"><p>public</p></label>
<label for="chat_public" class="_radio">
<p>public</p>
<input id="chat_public" bind:group={room_type} type="radio" name="room_type" value="public" required>
</label>
<!-- [ ] private -->
<input id="chat_private" type="radio" name="chat_create_type">
<label for="chat_private" class="_radio"><p>private</p></label>
<label for="chat_private" class="_radio hide">
<p>private</p>
<input id="chat_private" bind:group={room_type} type="radio" name="room_type" value="private" required>
</label>
<!-- [ ] protected -->
<input id="chat_protected" class="__check_change_next" type="radio" name="chat_create_type">
<label for="chat_protected" class="_radio"><p>protected</p></label>
<label for="chat_protected" class="_radio hide">
<p>protected</p>
<input id="chat_protected" bind:group={room_type} type="radio" name="room_type" value="protected" required>
</label>
<!-- [x] protected -->
<div class="__to_show">
<label for="chat_pswd"><p>choose a password :</p></label>
<input id="chat_pswd" type="password" placeholder="minimum 8 characters" minlength="8">
<p>confirm password :</p>
<input type="password">
</div>
{#if room_type === 'protected'}
<div>
<label for="chat_pswd"><p>choose a password :</p></label>
<input id="chat_pswd" bind:value={room_password} type="password" placeholder="minimum 8 characters" minlength="8" name="password" required>
</div>
{/if}
<input type="submit" value="&#x2BA1">
</form>
</div>
</div>
<style>
@@ -68,42 +101,32 @@
/ auto 1fr auto ;
}
/* temp
*/
.hide {
display: none !important;
}
/* radio elements style check
*/
form input[type=radio] {
display: none;
}
form label._radio {
margin: 0px 20px 0px auto;
.panel label._radio {
display: inline;
margin: 10px 0px 0px auto;
padding-right: 10px;
cursor: pointer;
}
form label._radio p {
.panel label._radio * {
display: inline;
}
.panel label._radio p {
margin-top: 0px;
margin-bottom: 0px;
}
form label._radio::after {
content: "";
position: absolute;
top: calc(50% - 6px);
right: 0px;
width: 12px;
height: 12px;
border-radius: 6px;
border: 2px solid rgb(150, 150, 150);
box-sizing: border-box;
cursor: pointer;
}
form input[type=radio]:checked
+ label._radio::after {
background-color: rgb(200, 200, 200);
}
/* submit
*/
form input[type=submit] {
.panel input[type=submit] {
margin-top: 20px;
}

45
srcs/requirements/svelte/api_front/src/pieces/chat/Layout_home.svelte
View File

@@ -1,25 +1,36 @@
<script>
import Button from './Chat_button.svelte';
export let layout;
import { layout, msgs, user } from './Store_chat';
import { change_room, get_room_messages, get_all_rooms } from './Request_rooms';
import { onMount } from 'svelte';
import Button from './Element_button.svelte';
let rooms = get_all_rooms();
// go to clicked room
async function go_to_room(evt)
{
console.log("inside go_to_room");
await change_room(evt.target.innerText);
await get_room_messages();
}
</script>
<div class="grid_box">
<!-- settings -->
<Button bind:layout new_layout="settings" my_class="settings dots icon">
<Button new_layout="settings" my_class="settings dots icon">
settings
</Button>
<!-- new -->
<Button bind:layout new_layout="new" my_class="new transparent">
<Button new_layout="new" my_class="new transparent">
new
</Button>
<!-- close -->
<Button bind:layout new_layout="close" my_class="close icon">
<Button new_layout="close" my_class="close icon">
close
</Button>
@@ -30,18 +41,16 @@
<div class="__show_if_only_child">
<p class="__center">/ you have no chat room yet /</p>
</div>
<!-- placeholders
<Button bind:layout new_layout="room" my_class="list">
a room
</Button>
<Button bind:layout new_layout="room" my_class="list">
another room
</Button>
<Button bind:layout new_layout="room" my_class="list">
placeholder
</Button>
------------- -->
<!-- END placeholders -->
{#await rooms}
<!-- promise is pending -->
<p>rooms are loaded...</p>
{:then rooms}
{#each rooms as room}
<Button my_class="list" on_click={go_to_room}>
{room.name}
</Button>
{/each}
{/await}
</div>
</div>

10
srcs/requirements/svelte/api_front/src/pieces/chat/Layout_mute.svelte
View File

@@ -1,8 +1,8 @@
<script>
import Button from './Chat_button.svelte';
export let layout = "";
import { layout } from './Store_chat';
import Button from './Element_button.svelte';
export let back = "";
</script>
@@ -10,7 +10,7 @@
<div class="grid_box">
<!-- back -->
<Button bind:layout new_layout={back} my_class="back icon" my_title="go back {back}">
<Button new_layout={back} my_class="back icon" my_title="go back {back}">
back
</Button>
@@ -20,7 +20,7 @@
</Button>
<!-- close -->
<Button bind:layout new_layout="close" my_class="close icon">
<Button new_layout="close" my_class="close icon">
close
</Button>

76
srcs/requirements/svelte/api_front/src/pieces/chat/Layout_new.svelte
View File

@@ -1,16 +1,40 @@
<script>
import Button from './Chat_button.svelte';
export let layout = "";
import { layout, msgs, user, socket } from './Store_chat';
import { join_room, change_room, get_room_messages } from './Request_rooms';
import Button from './Element_button.svelte';
export let back = "";
let rooms = [];
// ask api for the rooms
const get_rooms = fetch('/api/v2/chat/allrooms')
.then(resp => resp.json())
.then(data =>
{
console.log("data.rooms:", data.rooms);
for (let room of data.rooms)
console.log(room.name);
rooms = data.rooms;
});
// join the room
async function join_rooms(evt)
{
console.log("inside join_room");
let room_name = evt.target.innerText;
await join_room(room_name);
await change_room(room_name);
}
</script>
<div class="grid_box">
<!-- back -->
<Button bind:layout new_layout={back} my_class="back icon" my_title="go back {back}">
<Button new_layout={back} my_class="back icon" my_title="go back {back}">
back
</Button>
@@ -20,13 +44,13 @@
</Button>
<!-- close -->
<Button bind:layout new_layout="close" my_class="close icon">
<Button new_layout="close" my_class="close icon">
close
</Button>
<!-- panel_new -->
<div class="panel panel_new __border_top">
<Button bind:layout new_layout="create" my_class="create">
<Button new_layout="create" my_class="create">
create
</Button>
<p>join room :</p>
@@ -34,36 +58,16 @@
<div class="__show_if_only_child">
<p class="__center">/ there are no public rooms yet /</p>
</div>
<!-- placeholders
<Button bind:layout new_layout="room" my_class="list">
placeholder
</Button>
<Button bind:layout new_layout="room" my_class="list">
join room
</Button>
<Button bind:layout new_layout="room" my_class="list">
one room
</Button>
<Button bind:layout new_layout="room" my_class="list">
another room
</Button>
<Button bind:layout new_layout="room" my_class="list">
one room
</Button>
<Button bind:layout new_layout="room" my_class="list">
another room
</Button>
<Button bind:layout new_layout="room" my_class="list">
one room
</Button>
<Button bind:layout new_layout="room" my_class="list">
another room
</Button>
<Button bind:layout new_layout="room" my_class="list">
one more room
</Button>
------------- -->
<!-- END placeholders -->
{#await get_rooms}
<!-- promise is pending -->
<p>rooms are loaded...</p>
{:then}
{#each rooms as room}
<Button my_class="list" on_click={join_rooms}>
{room.name}
</Button>
{/each}
{/await}
</div>
</div>

10
srcs/requirements/svelte/api_front/src/pieces/chat/Layout_protected.svelte
View File

@@ -1,8 +1,8 @@
<script>
import Button from './Chat_button.svelte';
export let layout = "";
import { layout } from './Store_chat';
import Button from './Element_button.svelte';
export let back = "";
</script>
@@ -10,7 +10,7 @@
<div class="grid_box">
<!-- back -->
<Button bind:layout new_layout={back} my_class="back icon" my_title="go back {back}">
<Button new_layout={back} my_class="back icon" my_title="go back {back}">
back
</Button>
@@ -20,7 +20,7 @@
</Button>
<!-- close -->
<Button bind:layout new_layout="close" my_class="close icon">
<Button new_layout="close" my_class="close icon">
close
</Button>

34
srcs/requirements/svelte/api_front/src/pieces/chat/Layout_room.svelte
View File

@@ -1,36 +1,28 @@
<script>
import Button from './Chat_button.svelte';
import Msg from './Chat_msg.svelte';
import io from 'socket.io-client';
import { layout, socket, msgs, add_msg, room_name } from './Store_chat';
import Button from './Element_button.svelte';
import Msg from './Element_msg.svelte';
export let layout = "";
export let back = "";
let msg = "";
let text_area;
let msgs = [];
function add_msg(from, the_msg)
{
msgs = [...msgs, { content: the_msg, name: from }];
}
function send_msg()
{
msg = msg.trim();
if (msg.length > 0) {
//socket.emit('sendmsg', msg);
socket.emit('message', msg);
add_msg("me", msg);
console.log(msgs);
}
msg = "";
text_area.focus();
}
function send_msg_if(evt)
function enter_send_msg(evt)
{
if (evt.shiftKey && evt.key === "Enter")
{
@@ -44,25 +36,25 @@
<div class="grid_box">
<!-- back -->
<Button bind:layout new_layout={back} my_class="back icon" my_title="go back {back}">
<Button new_layout={back} my_class="back icon" my_title="go back {back}">
back
</Button>
<!-- room_name -->
<Button bind:layout new_layout="room_set" my_class="room_name transparent">
&lt;room_name&gt;
<Button new_layout="room_set" my_class="room_name transparent">
{$room_name}
</Button>
<!-- close -->
<Button bind:layout new_layout="close" my_class="close icon">
<Button new_layout="close" my_class="close icon">
close
</Button>
<!-- msg -->
<div class="panel panel_msg">
<div class="msg_thread">
{#each msgs as msg}
<Msg name={msg.name}>{@html msg.content}</Msg>
{#each $msgs as msg}
<Msg name={msg.name}>{@html msg.message}</Msg>
{/each}
</div>
</div>
@@ -73,7 +65,7 @@
class="text_area"
bind:innerHTML={msg}
bind:this={text_area}
on:keypress={send_msg_if}
on:keypress={enter_send_msg}
contenteditable="true"
></div>
</div>

20
srcs/requirements/svelte/api_front/src/pieces/chat/Layout_room_set.svelte
View File

@@ -1,8 +1,8 @@
<script>
import Button from './Chat_button.svelte';
export let layout = "";
import { layout } from './Store_chat';
import Button from './Element_button.svelte';
export let back = "";
</script>
@@ -10,7 +10,7 @@
<div class="grid_box">
<!-- back -->
<Button bind:layout new_layout={back} my_class="back icon" my_title="go back {back}">
<Button new_layout={back} my_class="back icon" my_title="go back {back}">
back
</Button>
@@ -20,13 +20,13 @@
</Button>
<!-- close -->
<Button bind:layout new_layout="close" my_class="close icon">
<Button new_layout="close" my_class="close icon">
close
</Button>
<!-- panel_room_set -->
<div class="panel panel_room_set __border_top">
<Button bind:layout new_layout="create" my_class="create">
<Button new_layout="create" my_class="create">
leave
</Button>
<p>room users :</p>
@@ -36,16 +36,16 @@
</div>
<!-- placeholders
------------- -->
<Button bind:layout new_layout="user" my_class="list">
<Button new_layout="user" my_class="list">
user 1
</Button>
<Button bind:layout new_layout="user" my_class="list blocked">
<Button new_layout="user" my_class="list blocked">
user 2
</Button>
<Button bind:layout new_layout="user" my_class="list">
<Button new_layout="user" my_class="list">
user 3
</Button>
<Button bind:layout new_layout="user" my_class="list">
<Button new_layout="user" my_class="list">
user 4
</Button>
<!-- END placeholders -->

10
srcs/requirements/svelte/api_front/src/pieces/chat/Layout_settings.svelte
View File

@@ -1,8 +1,8 @@
<script>
import Button from './Chat_button.svelte';
export let layout = "";
import { layout } from './Store_chat';
import Button from './Element_button.svelte';
export let back = "";
</script>
@@ -10,7 +10,7 @@
<div class="grid_box">
<!-- back -->
<Button bind:layout new_layout={back} my_class="back icon" my_title="go back {back}">
<Button new_layout={back} my_class="back icon" my_title="go back {back}">
back
</Button>
@@ -20,7 +20,7 @@
</Button>
<!-- close -->
<Button bind:layout new_layout="close" my_class="close icon">
<Button new_layout="close" my_class="close icon">
close
</Button>

10
srcs/requirements/svelte/api_front/src/pieces/chat/Layout_user.svelte
View File

@@ -1,8 +1,8 @@
<script>
import Button from './Chat_button.svelte';
export let layout = "";
import { layout } from './Store_chat';
import Button from './Element_button.svelte';
export let back = "";
let mute = "mute";
@@ -14,7 +14,7 @@
<div class="grid_box">
<!-- back -->
<Button bind:layout new_layout={back} my_class="back icon" my_title="go back {back}">
<Button new_layout={back} my_class="back icon" my_title="go back {back}">
back
</Button>
@@ -24,7 +24,7 @@
</Button>
<!-- close -->
<Button bind:layout new_layout="close" my_class="close icon">
<Button new_layout="close" my_class="close icon">
close
</Button>

103
srcs/requirements/svelte/api_front/src/pieces/chat/Request_rooms.ts Normal file
View File

@@ -0,0 +1,103 @@
import { msgs, user, layout, socket, room_name } from './Store_chat';
export async function get_room_messages()
{
console.log("in get_room_messages");
const response = await fetch('/api/v2/chat/messages');
const data = await response.json();
const messages = data.messages;
messages.forEach(function(item) {
if (item.name === user.username) {
item.name = "me";
}
});
msgs.set(messages);
}
export async function create_room(room_name, room_type)
{
console.log("in create_room");
let form_data = {
room_name: room_name,
room_type: room_type,
};
// send the new room
const response = await fetch('/api/v2/chat/create', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(form_data),
});
// get response status and message
let response_status = response.status;
let data = await response.json();
let response_message = "";
if (data.message)
response_message = data.message;
return {
status: response_status,
message: response_message
};
}
export async function join_room(room_name)
{
console.log("in join_room");
let name = {
room_name: room_name,
}
const response = await fetch('/api/v2/chat/join', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(name),
});
let data = await response.json();
console.log(data.message);
socket.emit('join', room_name);
}
export async function change_room(name)
{
console.log("in change_room");
let r_name = {
room_name: name,
}
const response = await fetch('/api/v2/chat/change', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(r_name),
});
let data = await response.json();
console.log(data.message);
await get_room_messages();
socket.emit('join', name);
room_name.set(name);
layout.set("room");
}
export async function get_all_rooms()
{
console.log("in get_all_rooms");
// ask api for the rooms
const response = await fetch('/api/v2/chat/myrooms');
const data = await response.json();
console.log("data.rooms:", data.rooms);
for (let room of data.rooms)
console.log(room.name);
let rooms = data.rooms;
return rooms;
}

12
srcs/requirements/svelte/api_front/src/pieces/chat/Socket_events.ts Normal file
View File

@@ -0,0 +1,12 @@
import { user, msgs } from './Store_chat';
export function socket_events(socket)
{
socket.on('message', function(from, message)
{
console.log("received msg:", message, from);
if (from === user.username)
from = "me";
msgs.update(msgs => [...msgs, { name: from, message: message }]);
});
}

39
srcs/requirements/svelte/api_front/src/pieces/chat/Socket_init.ts Normal file
View File

@@ -0,0 +1,39 @@
import io from 'socket.io-client';
import { set_socket, set_user } from './Store_chat';
import { socket_events } from './Socket_events';
const address = `http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}`;
export async function init_socket()
{
const response = await fetch(`${address}/api/v2/user`);
const response_data = await response.json();
set_user(response_data);
let socket = await io(address,
{
path: '/chat',
query:
{
username: response_data.username,
},
});
set_socket(socket);
socket.on('connect', function(){ console.log("socket.io connected"); });
socket.on('disconnect', function(){ console.log("socket.io disconnected"); });
socket.on('connect_error', function(){ console.log("socket.io connect_error"); });
socket.on('connect_timeout', function(){ console.log("socket.io connect_timeout"); });
socket.on('error', function(){ console.log("socket.io error"); });
socket.on('reconnect', function(){ console.log("socket.io reconnect"); });
socket.on('reconnect_attempt', function(){ console.log("socket.io reconnect_attempt"); });
socket.on('reconnecting', function(){ console.log("socket.io reconnecting"); });
socket.on('reconnect_error', function(){ console.log("socket.io reconnect_error"); });
socket.on('reconnect_failed', function(){ console.log("socket.io reconnect_failed"); });
socket.on('ping', function(){ console.log("socket.io ping"); });
socket.on('pong', function(){ console.log("socket.io pong"); });
socket_events(socket);
}

16
srcs/requirements/svelte/api_front/src/pieces/chat/Store_chat.ts Normal file
View File

@@ -0,0 +1,16 @@
import { writable } from 'svelte/store';
export let msgs = writable([]);
export let layout = writable("close");
export let room_name = writable("");
export let user;
export let socket;
export function set_user(new_user) { user = new_user; }
export function set_socket(new_socket) { socket = new_socket; }
export function add_msg(name: string, message: string)
{
msgs.update(msgs => [...msgs, { name: "me", message: message }]);
}

27
srcs/requirements/svelte/api_front/src/pieces/chat/tmp_debug.svelte Normal file
View File

@@ -0,0 +1,27 @@
<script>
export let layout = "";
export let layouts = [];
</script>
<div style="display: flex; flex-direction: column; font-size: 12px; position: fixed; top: 20px; left: 20px; background-color: white;">
<p>temp, for testing :</p>
<button on:click={function(){layout = "close" }}>close</button>
<button on:click={function(){layout = "home" }}>home</button>
<button on:click={function(){layout = "room" }}>room</button>
<button on:click={function(){layout = "new" }}>new</button>
<button on:click={function(){layout = "settings" }}>settings</button>
<button on:click={function(){layout = "room_set" }}>room_set</button>
<button on:click={function(){layout = "protected"}}>protected</button>
<button on:click={function(){layout = "create" }}>create</button>
<button on:click={function(){layout = "mute" }}>mute</button>
<button on:click={function(){
layouts = ["settings", "settings"];
layout = "user";
}}>user from settings</button>
<button on:click={function(){
layouts = ["room_set", "room_set"];
layout = "user";
}}>user from room_set</button>
</div>