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

merged

Browse Source
This commit is contained in:
Me
2023-01-15 20:28:26 +01:00
parent 4a8b64f74f fa8e3d7473
commit 99cc341286
59 changed files with 1948 additions and 706 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
srcs/requirements/svelte/api_front/public/global.css
View File

@@ -1,4 +1,5 @@
html, body {
position: relative;
width: 100%;
@@ -12,14 +13,23 @@ body {
box-sizing: border-box;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
/* tmp? */
background: bisque;
/* overflow-x: hidden; */
/* This seems to have fixed my pages that are too long */
/* but now i can't scroll anywhere ... */
/* overflow-y: hidden; */
background-color: #333;
display: flex;
flex-direction: column;
}
@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;
}
a {
color: rgb(0,100,200);
text-decoration: none;
@@ -33,6 +43,13 @@ a:visited {
color: rgb(0,80,160);
}
.background-pages {
background-color: #333;
font-family: "Bit5x3";
font-size: 2vw;
color: white;
}
label {
display: block;
}

BIN
srcs/requirements/svelte/api_front/public/img/BACKGROUND.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 169 KiB

BIN
srcs/requirements/svelte/api_front/public/img/SPLASH_PAGE_BACKGROUND.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 407 KiB

BIN
srcs/requirements/svelte/api_front/public/img/cartoon_potato1.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 675 KiB

BIN
srcs/requirements/svelte/api_front/public/img/cartoon_potato2.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 20 KiB

BIN
srcs/requirements/svelte/api_front/public/img/default.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

BIN
srcs/requirements/svelte/api_front/public/img/default_user_icon.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 69 KiB

BIN
srcs/requirements/svelte/api_front/public/img/logo_potato.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 51 KiB

BIN
srcs/requirements/svelte/api_front/public/img/potato_only.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 181 KiB

BIN
srcs/requirements/svelte/api_front/public/img/tmp_mario_banner.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 430 KiB

1
srcs/requirements/svelte/api_front/public/img/wave-haikei.svg
View File

@@ -1 +0,0 @@
<svg id="visual" viewBox="0 0 900 150" width="900" height="150" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"><path d="M0 36L21.5 33.7C43 31.3 86 26.7 128.8 32.5C171.7 38.3 214.3 54.7 257.2 63.5C300 72.3 343 73.7 385.8 65.7C428.7 57.7 471.3 40.3 514.2 30.5C557 20.7 600 18.3 642.8 25.8C685.7 33.3 728.3 50.7 771.2 59.5C814 68.3 857 68.7 878.5 68.8L900 69L900 0L878.5 0C857 0 814 0 771.2 0C728.3 0 685.7 0 642.8 0C600 0 557 0 514.2 0C471.3 0 428.7 0 385.8 0C343 0 300 0 257.2 0C214.3 0 171.7 0 128.8 0C86 0 43 0 21.5 0L0 0Z" fill="#618174" stroke-linecap="round" stroke-linejoin="miter"></path></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 645 B

28
srcs/requirements/svelte/api_front/src/pages/NotFound.svelte
View File

@@ -1,10 +1,26 @@
<script>
import { link } from "svelte-spa-router";
import Header from '../pieces/Header.svelte';
</script>
<h1>We are sorry!</h1>
<p>This isn't a url that we use.</p>
<p>Go home you're drunk.</p>
<a href="/" use:link>
<h2>Take me home →</h2>
</a>
<div class="background-pages">
<div class="content">
<h1>We are sorry!</h1>
<p>This isn't a url that we use.</p>
<p>Go home you're drunk.</p>
</div>
</div>
<style>
.content {
left: 50%;
position: absolute;
-ms-transform: translateX(-50%);
transform: translateX(-50%);
}
</style>

169
srcs/requirements/svelte/api_front/src/pages/SplashPage.svelte
View File

@@ -9,22 +9,8 @@
user = await fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/user`)
.then((resp) => resp.json())
// i mean i could do a failed to load user or some shit, maybe with a .catch or something? but atm why bother
console.log('User var');
console.log(user);
// if (user && user.statusCode && user.statusCode === 403) {
// console.log('user not logged in')
// }
// if (user && user.username) {
// console.log('we have a user');
// }
// user === undefined doesn't work cuz we declared user in the scope of onMount
// if (user === undefined) {
if (user && user.statusCode && user.statusCode === 403) {
console.log('on mount no user, returned status code 403 so logging out of userStore')
// userLogout(); // which i think should delete any previous local storage
}
});
@@ -34,8 +20,6 @@
console.log('you are now logged in');
}
// i could prolly put this in it's own compoent, i seem to use it in several places... or maybe just some JS? like no need for html
// we could .then( () => replace('/') ) need the func so TS compatible...
const logout = async() => {
await fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/auth/logout`, {
method: 'POST',
@@ -46,108 +30,71 @@
</script>
<!-- svelte-ignore a11y-click-events-have-key-events -->
<header class="grid-container">
<h1>Potato Pong</h1>
<nav>
<!-- {#if user !== undefined} -->
{#if user && user.username}
<div on:click={ () => (push('/profile')) }>Profile</div>
<div on:click={logout}>Logout</div>
{:else}
<div on:click={login}>Login</div>
{/if}
</nav>
<h2>
<div>Welcome to</div>
<div>Potato Pong</div>
</h2>
</header>
<Canvas/>
<!-- doesn't work :( -->
<!-- <svelte:body style="overflow-y: hidden"/> -->
<div class="container">
<div class="splash-page">
{#if user && user.username}
<button class="button-in" on:click={ () => (push('/profile')) }>Profile</button>
<button class="button-out" on:click={logout}>Logout</button>
{:else}
<button class="button-in" on:click={login}>Login</button>
{/if}
</div>
</div>
<style>
@font-face {
font-family: "Bit5x3";
src:
url("/fonts/Bit5x3.woff2") format("woff2"),
local("Bit5x3"),
url("/fonts/Bit5x3.woff") format("woff");
font-weight: normal;
font-style: normal;
font-display: swap;
}
/* :global(body) {
overflow-y: hidden;
} */
header {
/* didn't work... */
overflow-y: hidden;
}
.container {
height: 100%;
width: 100%;
position: relative;
background-image: url('/img/SPLASH_PAGE_BACKGROUND.png');
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
/* The actually important stuff */
.splash-page {
margin: 0;
position: absolute;
top: 80%;
-ms-transform: translateY(-80%);
transform: translateY(-80%);
left: 50%;
-ms-transform: translateX(-50%);
transform: translateX(-50%);
}
.grid-container{
position: absolute;
left: 0;
top: 0;
.button-in {
background-color: #8c0000;
border-color: #071013;
border-width: 2px;
color: white;
font-family: "Bit5x3";
font-size: x-large;
padding: 10px;
}
box-sizing: border-box;
width: 100%;
height: 100%;
/* max-height: 100%; */
white-space: nowrap;
/* padding-bottom: 0; */
margin-bottom: 0px;
overflow: hidden;
padding: 20px 40px;
margin: 0px;
.button-out {
background-color: #008c8c;
border-color: #071013;
border-width: 2px;
color: white;
font-family: "Bit5x3";
font-size: x-large;
padding: 10px;
}
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
align-items: center;
}
header h1{
grid-column: 1 / 7;
grid-row: 1;
/* grid-column: span 6; */
/* tmp? */
padding: 20px;
border: 1px solid bisque;
}
header nav{
/* make it a flexbox? */
grid-column: 7 / 13;
grid-row: 1;
justify-self: end;
/* tmp? */
padding: 20px;
border: 1px solid bisque;
}
header h2{
grid-row: 3;
grid-column: 5 / span 4;
justify-self: center;
/* tmp */
border: 1px solid black;
z-index: 3;
}
header h2 div{
font-size: 2em;
/* color: red; */
}
nav div {
display: inline;
color: bisque;
font-weight: bold;
}
nav > div {
padding-left: 1em;
/* didn't quite work, applies to both for some reason */
/* nav:first-child doesn't work either*/
}
nav div:hover{
text-decoration: underline;
cursor: pointer;
}
</style>

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

@@ -4,11 +4,13 @@
import { fade, fly } from 'svelte/transition';
import Header from '../../pieces/Header.svelte';
import { fetchAvatar } from "../../pieces/utils";
import { fetchUser, fetchAllUsers, fetchAvatar } from "../../pieces/utils";
import * as pong from "./client/pong";
import { gameState } from "./client/ws";
import { invited_username } from '../../pieces/store_invitation';
//user's stuff
let user;
let allUsers;
@@ -36,11 +38,21 @@
const watchMatchStartIntervalRate = 111;
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() );
user = await fetchUser();
allUsers = await fetchAllUsers();
if (!user) {
showError = true;
errorMessage = "User load failed";
return;
}
options.playerOneUsername = user.username;
if ($invited_username) {
options.isSomeoneIsInvited = true;
options.playerTwoUsername = $invited_username;
invited_username.set("");
}
})
onDestroy( async() => {
@@ -268,29 +280,38 @@
<button class="pong_button" on:click={fetchInvitations}>Show invitations</button>
<fieldset in:fly="{{ y: 10, duration: 1000 }}">
<legend>game options</legend>
<div>
<label for="multi_balls">
<input type="checkbox" id="multi_balls" name="multi_balls" bind:checked={options.multi_balls}>
<label for="multi_balls">Multiples balls</label>
</div>
<div>
Multiples balls
</label>
<label for="moving_walls">
<input type="checkbox" id="moving_walls" name="moving_walls" bind:checked={options.moving_walls}>
<label for="moving_walls">Moving walls</label>
</div>
Moving walls
</label>
<div>
<p>sound :</p>
<input type="radio" id="sound_on" name="sound_selector" bind:group={options.sound} value="on">
<label for="sound_on">on</label>
<input type="radio" id="sound_off" name="sound_selector" bind:group={options.sound} value="off">
<label for="sound_off">off</label>
</div>
<div>
<input type="checkbox" id="isSomeoneIsInvited" bind:checked={options.isSomeoneIsInvited}>
<label for="moving_walls">Invite a friend</label>
sound :
<label for="sound_on">
<input type="radio" id="sound_on" name="sound_selector" bind:group={options.sound} value="on">
on
</label>
<label for="sound_off">
<input type="radio" id="sound_off" name="sound_selector" bind:group={options.sound} value="off">
off
</label>
</div>
<label for="invitation_checkbox">
<input type="checkbox" id="invitation_checkbox" bind:checked={options.isSomeoneIsInvited}>
Invite a friend
</label>
{#if options.isSomeoneIsInvited}
<select bind:value={options.playerTwoUsername}>
{#each allUsers as user }
<option value={user.username}>{user.username}</option>
{#each allUsers as invitedUser }
<option value={invitedUser.username}>{invitedUser.username}</option>
{/each}
</select>
{/if}
@@ -339,11 +360,16 @@
}
#game_page {
margin: 0;
padding: 20px;
background-color: #222425;
position: relative;
width: 100%;
height: 100%;
height: auto;
display: flex;
flex-direction: column;
flex-grow: 1;
}
#game_option {
margin-top: 20px;
}
#canvas_container {
margin-top: 20px;

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

@@ -6,15 +6,11 @@
import Header from '../../pieces/Header.svelte';
import MatchListElem from "../../pieces/MatchListElem.svelte";
import type { Match } from "../../pieces/Match";
import { fetchAvatar } from "../../pieces/utils";
import { fetchUser, fetchAllUsers, fetchAvatar } from "../../pieces/utils";
import * as pongSpectator from "./client/pongSpectator";
import { gameState } from "./client/ws";
//user's stuff
let user;
let allUsers;
let playerOneAvatar;
let playerTwoAvatar;
@@ -30,13 +26,7 @@
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() );
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;
matchList = await fetchMatchList();
})
onDestroy( async() => {
@@ -82,12 +72,25 @@
async function resetPage() {
hiddenGame = true;
pongSpectator.destroy();
fetchMatchList();
matchList = await 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() );
async function fetchMatchList()
{
return fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/game/match/all`)
.then((response) => {
if (!response.ok) {
throw new Error("All matchs not retrieved");
}
return response.json();
})
.then((body) => {
return body;
})
.catch((error) => {
console.log("catch fetchMatchList: ", error);
return [];
});
};
</script>
@@ -131,13 +134,19 @@
<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>
sound :
<label for="sound_on">
<input type="radio" id="sound_on" name="sound_selector" bind:group={sound} value="on">
on
</label>
<label for="sound_off">
<input type="radio" id="sound_off" name="sound_selector" bind:group={sound} value="off">
off
</label>
</div>
</fieldset>
{#if matchList.length !== 0}
<menu id="match_list">

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

@@ -28,7 +28,7 @@
</script>
<Header />
<br />
<div class="background-pages">
<div class="principal-div">
<table class="stats-table">
<thead>
@@ -59,6 +59,7 @@
</tbody>
</table>
</div>
</div>
<style>
@@ -71,7 +72,6 @@
margin-left: auto;
margin-right: auto;
font-size: 0.9em;
font-family: sans-serif;
min-width: 400px;
}

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

@@ -59,14 +59,20 @@ function start_after_countdown()
abortControllerKeydown = new AbortController();
window.addEventListener(
'keydown',
(e) => { pong.addKey(e.key); },
(e) => {
e.preventDefault();
pong.addKey(e.key);
},
{signal: abortControllerKeydown.signal}
);
abortControllerKeyup = new AbortController();
window.addEventListener(
'keyup',
(e) => { pong.deleteKey(e.key); },
(e) => {
e.preventDefault();
pong.deleteKey(e.key);
},
{signal: abortControllerKeyup.signal}
);

7
srcs/requirements/svelte/api_front/src/pages/profile/ProfileDisplay.svelte
View File

@@ -19,6 +19,7 @@
<Chat color="bisque"/>
<div class="background-pages">
<div class="outer">
{#if user !== undefined}
<GenerateUserDisplay user={user}/>
@@ -28,13 +29,13 @@
<div>Failed to load current</div>
{/if}
</div>
</div>
<style>
div.outer{
max-width: 960px;
margin: 40px auto;
max-width: 100%;
text-align: center;
padding-bottom: 10px;
}
</style>

28
srcs/requirements/svelte/api_front/src/pages/profile/ProfileFriends.svelte
View File

@@ -24,22 +24,10 @@
onMount( async() => {
// DO I ACTUALLY NEED TO ON MOUNT ALL THIS STUFF?
// ALSO I COULD JUST USE THE FUNCITONS I MADE...
// yea no idea what
// i mean do i fetch user? i will for now
user = await fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/user`)
.then( (x) => x.json() );
fetchAll();
// ok this shit works!
// const interval = setInterval(() => {
// fetchAll();
// }, 1000);
// return () => clearInterval(interval);
});
const fetchAll = async() => {
@@ -234,6 +222,7 @@
</script>
<div class="background-pages">
<!-- svelte-ignore a11y-click-events-have-key-events -->
<div class="top-grid">
@@ -353,7 +342,7 @@
</div>
</div>
</div>
<style>
/* ok so i want a 12 column grid with a sidebar */
@@ -368,7 +357,14 @@
div.sidebar-list{
grid-column: 1 / span 2;
background: white;
background: #FB8B24;
padding: 1vw;
max-width: 100%;
max-height: 100%;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
border-right: 4px solid #071013;
}
div.sidebar-item{
@@ -393,7 +389,7 @@
}
div.placeholder{
color: darkgray;
color: white;
text-align: center;
}
@@ -402,7 +398,7 @@
}
div.tip{
color: darkgray;
color: white;
font-size: 0.8em;
font-weight: bold;
}

8
srcs/requirements/svelte/api_front/src/pages/profile/ProfileSettings.svelte
View File

@@ -106,6 +106,7 @@
<main>
<div class="background-pages">
<h2>Look! You can change stuff</h2>
<div class="cards">
<Card>
@@ -114,7 +115,7 @@
<div class="label">New Username</div>
<!-- it really hates {user.username} and ${user.username} -->
<!-- <input type="text" placeholder="current username: ${user.username}" bind:value={set.username}> -->
<input type="text" placeholder="current username: {nameTmp}" bind:value={set.username}>
<input type="text" placeholder="{nameTmp}" bind:value={set.username}>
<div class="success">{success.username}</div>
<div class="error">{errors.username}</div>
</div>
@@ -144,7 +145,7 @@
</form>
</Card>
</div>
</div>
</main>
@@ -158,6 +159,8 @@
grid-gap: 20px; */
}
div.cards{
display: grid;
grid-template-columns: 1fr 1fr;
@@ -190,6 +193,7 @@
.inline-check{
display: inline;
color: #333;
}

158
srcs/requirements/svelte/api_front/src/pieces/Header.svelte
View File

@@ -21,126 +21,84 @@
<!-- svelte-ignore a11y-click-events-have-key-events -->
<header>
<div>
<img src="/img/potato_logo.png" alt="Potato Pong Logo" on:click={() => (push('/'))}>
<h1>Potato Pong</h1>
</div>
<nav>
<button class:selected="{current === '/game'}" on:click={() => (push('/game'))}>Play</button>
<button class:selected="{current === '/spectator'}" on:click={() => (push('/spectator'))}>Spectate</button>
<button class:selected="{current === '/ranking'}" on:click={() => (push('/ranking'))}>Ranking</button>
<div class="header">
<img src="/img/logo_potato.png" alt="Potato Pong Logo" on:click={() => (push('/'))}>
<div class="center">
<button class:selected="{current === '/game'}" on:click={() => (push('/game'))}>Play</button>
<button class:selected="{current === '/spectator'}" on:click={() => (push('/spectator'))}>Spectate</button>
<button class:selected="{current === '/ranking'}" on:click={() => (push('/ranking'))}>Ranking</button>
<button class:selected="{current === '/profile'}" on:click={() => (push('/profile'))}>My Profile</button>
<button class:selected="{current === '/profile/friends'}" on:click={() => (push('/profile/friends'))}>Friends</button>
<button on:click={handleClickLogout}>Log Out</button>
</nav>
</header>
<button class:selected="{current === '/profile/friends'}" on:click={() => (push('/profile/friends'))}>Friends</button>
</div>
<button class="logout" on:click={handleClickLogout}>Log Out</button>
</div>
<style>
/* See "possible_fonts.css" for more font options... */
@font-face {
font-family: 'Bondi';
src:url('/fonts/Bondi.ttf.woff') format('woff'),
url('/fonts/Bondi.ttf.svg#Bondi') format('svg'),
url('/fonts/Bondi.ttf.eot'),
url('/fonts/Bondi.ttf.eot?#iefix') format('embedded-opentype');
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;
}
.selected {
background-color: chocolate;
.header div.center button.selected {
text-decoration: underline;
/* TMP so it's obvious but we need to pick good colors */
background-color: #2B3A67;
}
.header div.center button {
background-color: #8c0000;
border-color: #071013;
color: white;
font-family: "Bit5x3";
border-width: 2px;
font-size: 2vw;
}
/* There is a bunch of unncessary shit in here... why so many flex grids, why is everything the same class? just seemed easier but... */
header{
/* background: #f7f7f7; */
background: #618174;
/* padding: 20px; */
margin: 0;
/* does nothing so far... */
/* display: flex; */
.header button.logout {
background-color: #008c8c;
border-color: #071013;
color: white;
font-family: "Bit5x3";
border-width: 2px;
font-size: 2vw;
}
header{
/* for some reason this doesn't do shit! */
position: sticky;
/* position: absolute; */
display: flex;
justify-content: space-between;
flex-wrap: wrap;
/* display: grid; */
/* grid-template-columns: 1fr 1fr 1fr; */
.header {
resize: vertical;
overflow: hidden;
background: #FB8B24;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
border-bottom: 4px solid #071013;
position: relative;
display: block;
padding: 10px;
}
/* Headers */
h1{
font-family: 'Bondi';
}
h1{
margin: 0;
text-align: left;
/* max-width: 40px; */
/* this helped with the weird extra space under the image... */
display: flex;
.header div.center {
width: fit-content;
justify-self: center;
align-self: center;
position: absolute;
left: 50%;
display: inline-block;
-ms-transform: translateX(-50%);
transform: translateX(-50%);
}
/* Images */
.header button.logout {
float: right;
}
img{
.header img{
cursor: pointer;
max-width: 40px;
padding: 7px 20px;
justify-self: left;
max-width: 10%;
float: left;
}
header div {
display: flex;
justify-self: center;
align-self: center;
}
nav{
display: flex;
/* justify-content: flex-end; */
justify-content: space-evenly;
flex-wrap: wrap;
}
nav button{
margin: 7px 20px;
/* margin: 7px auto; */
/* padding: 5px; */
border-radius: 4px;
}
@media screen and (max-width: 350px) {
nav button{
width: 100%;
}
header div{
flex-wrap: wrap;
display: flex;
justify-content: center;
}
}
</style>

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

@@ -1,7 +1,7 @@
<script lang="ts">
import Layouts from './Chat_layouts.svelte';
import { init_socket } from './Socket_init';
import { init_socket } from './Socket_chat';
export let color = "transparent";

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

@@ -1,7 +1,5 @@
<script lang="ts">
import Debug from './tmp_debug.svelte';
import { layout } from './Store_chat';
import ChatBox from './Chat_box_css.svelte';
@@ -11,10 +9,11 @@
import NewLayout from './Layout_new.svelte';
import SettingsLayout from './Layout_settings.svelte';
import RoomsetLayout from './Layout_room_set.svelte';
import ProtectedLayout from './Layout_protected.svelte';
import PasswordLayout from './Layout_password.svelte';
import CreateLayout from './Layout_create.svelte';
import MuteLayout from './Layout_mute.svelte';
import UserLayout from './Layout_user.svelte';
import InviteLayout from './Layout_invite.svelte';
import Button from './Element_button.svelte';
@@ -29,8 +28,8 @@
*/
function set_layouts($layout)
{
console.log("layouts:", layouts);
console.log("layout:", $layout);
//console.log("layouts:", layouts);
//console.log("layout:", $layout);
if ($layout.length === 0)
layout.set(layouts[0]);
else if ($layout === "close")
@@ -41,7 +40,7 @@
layouts = [$layout, "home"];
else
layouts = [$layout, layouts[0]];
console.log("- layouts:", layouts);
//console.log("- layouts:", layouts);
}
$: set_layouts($layout);
@@ -67,8 +66,17 @@
{:else if $layout === "room_set"}
<RoomsetLayout back={layouts[1]} />
{:else if $layout === "protected"}
<ProtectedLayout back={layouts[1]} />
{:else if $layout === "password"}
<PasswordLayout back={layouts[1]} />
{:else if $layout === "add_password"}
<PasswordLayout back={layouts[1]} mode="add" />
{:else if $layout === "change_password"}
<PasswordLayout back={layouts[1]} mode="change" />
{:else if $layout === "remove_password"}
<PasswordLayout back={layouts[1]} mode="remove" />
{:else if $layout === "create"}
<CreateLayout back={layouts[1]} />
@@ -79,12 +87,12 @@
{:else if $layout === "user"}
<UserLayout back={layouts[1]} />
{:else if $layout === "invite"}
<InviteLayout back={layouts[1]} />
{/if}
</ChatBox>
<!-- TMP DEBUG -->
<!-- <Debug bind:layouts /> -->
<style></style>

4
srcs/requirements/svelte/api_front/src/pieces/chat/Element_button.svelte
View File

@@ -2,7 +2,6 @@
<Button
bind:layout
new_layout=""
on_click={}
my_class=""
my_title=""
>
@@ -17,7 +16,6 @@
export let my_class = "";
export let my_title = "";
export let new_layout = "";
export let on_click = "";
function update_layout() {
layout.set(new_layout);
@@ -25,7 +23,7 @@
</script>
<button on:click={update_layout} on:click={on_click} title={my_title} class={my_class}>
<button on:click={update_layout} on:click title={my_title} class={my_class}>
<p><slot></slot></p>
</button>

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

@@ -1,6 +0,0 @@
export interface Room
{
name: string;
type: "public" | "protected" | "private" | "direct" | "user";
users?: string[];
}

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

@@ -3,6 +3,7 @@
import { msgs, layout, allowed_chars } from './Store_chat';
import { change_room, create_room } from './Request_rooms';
import { onMount } from 'svelte';
import { FetchResponse } from './Types_chat';
import Button from './Element_button.svelte';
import Warning from './Element_warning.svelte';
@@ -13,18 +14,16 @@
onMount(async() => {
let response = await fetch('/api/v2/chat/allowedchars');
let data = await response.json();
console.log("data:", data);
allowed_chars = data.chars;
//regex = new RegExp(`^[a-zA-Z0-9\\s${allowed_chars}]+$`);
});
let room_name: string;
let room_type: string;
let is_protected = false;
let room_password: string;
let response = {
status: 0,
message: "",
}
let response: FetchResponse;
let show_error = false;
async function handleSubmit(evt)
{
@@ -36,12 +35,18 @@
let room = {
name: room_name,
type: room_type,
protection: is_protected,
};
if (is_protected === true)
room.password = room_password;
// send the new room
response = await create_room(room);
// go to room
if (response.status === 200)
if (response.status >= 300 || response.error)
show_error = response.error;
else
await change_room(response.room);
}
@@ -67,7 +72,7 @@
<!-- panel_create -->
<div class="panel panel_create __border_top">
<form on:submit|preventDefault={handleSubmit}>
{#if response.status >= 300}
{#if show_error}
<Warning content={response.message}/>
{/if}
<!-- name: -->
@@ -82,21 +87,19 @@
<input id="chat_public" bind:group={room_type} type="radio" name="room_type" value="public" required>
</label>
<!-- [ ] private -->
<label for="chat_private" class="_radio hide">
<label for="chat_private" class="_radio">
<p>private</p>
<input id="chat_private" bind:group={room_type} type="radio" name="room_type" value="private" required>
</label>
<!-- [ ] protected -->
<label for="chat_protected" class="_radio hide">
<label for="chat_protected" class="_checkbox">
<p>protected</p>
<input id="chat_protected" bind:group={room_type} type="radio" name="room_type" value="protected" required>
<input id="chat_protected" bind:checked={is_protected} type="checkbox" name="room_type" value="protected">
</label>
<!-- [x] protected -->
{#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 is_protected === true}
<label for="chat_pswd">choose a password :</label>
<input id="chat_pswd" bind:value={room_password} type="password" placeholder="minimum 8 characters" minlength="8" name="password" required>
{/if}
<input type="submit" value="&#x2BA1">
</form>
@@ -119,24 +122,25 @@
/ auto 1fr auto ;
}
/* temp
*/
.hide {
display: none !important;
}
/* radio elements style check
*/
.panel label._radio {
.panel label {
display: inline;
margin: 10px 0px 0px auto;
padding-right: 10px;
cursor: pointer;
padding-right: 10px;
margin: 10px 0px 10px auto;
}
.panel label._radio * {
.panel label._radio {
margin-bottom: 0px;
}
.panel label._checkbox {
margin-top: 20px;
}
.panel label * {
display: inline;
}
.panel label._radio p {
.panel label p {
margin-top: 0px;
margin-bottom: 0px;
}

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

@@ -1,6 +1,6 @@
<script>
import { layout, msgs, user } from './Store_chat';
import { layout, msgs, user, current_room } from './Store_chat';
import { change_room, get_room_messages, get_my_rooms } from './Request_rooms';
import { onMount } from 'svelte';
import Button from './Element_button.svelte';
@@ -13,8 +13,16 @@
console.log("inside go_to_room");
console.log("room:", room);
await change_room(room);
await get_room_messages();
if (room.protection && !room.allowed)
{
await current_room.set(room);
layout.set("password");
}
else
{
await change_room(room);
await get_room_messages();
}
}
</script>
@@ -47,8 +55,8 @@
<p>rooms are loading...</p>
{:then rooms}
{#each rooms as room}
<Button my_class="list" on_click={function() {go_to_room(room)}}>
{room.name}
<Button my_class="list" on:click={function() {go_to_room(room)}}>
{room.client_name}
</Button>
{/each}
{/await}

84
srcs/requirements/svelte/api_front/src/pieces/chat/Layout_invite.svelte Normal file
View File

@@ -0,0 +1,84 @@
<script lang="ts">
import { layout, user, current_room } from './Store_chat';
import { get_all_users, invite_user } from './Request_rooms';
import Button from './Element_button.svelte';
export let back = "";
let users = get_all_users();
// invite user in this room
async function invite_this_user(username: string)
{
console.log("inside invite_this_user");
invite_user(username);
layout.set("room");
}
</script>
<div class="grid_box">
<!-- back -->
<Button new_layout={back} my_class="back icon" my_title="go back {back}">
back
</Button>
<!-- new -->
<Button my_class="invite deactivate">
invite
</Button>
<!-- close -->
<Button new_layout="close" my_class="close icon">
close
</Button>
<!-- room_name -->
<Button my_class="room_name deactivate __border_top">
{$current_room.name}
</Button>
<!-- panel_new -->
<div class="panel panel_invite __border_top">
<p>invite someone in this room :</p>
<div>
<div class="__show_if_only_child">
<p class="__center">/ there is no one to invite yet /</p>
</div>
{#await users}
<p>users are loading...</p>
{:then users}
{#each users as user}
<Button my_class="list" on:click={function() {invite_this_user(user.username)}}>
{user.username}
</Button>
{/each}
{/await}
</div>
</div>
</div>
<style>
/* grid layout "new"
*/
.grid_box :global(.back ) {grid-area: back;}
.grid_box :global(.invite ) {grid-area: invite;}
.grid_box :global(.close ) {grid-area: close;}
.grid_box :global(.room_name ) {grid-area: room_name;}
.grid_box :global(.panel_invite) {grid-area: panel_invite;}
.grid_box {
grid:
' back invite close ' auto
' room_name room_name room_name ' auto
' panel_invite panel_invite panel_invite ' 1fr
/ auto 1fr auto ;
}
</style>

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

@@ -1,6 +1,6 @@
<script lang="ts">
import { layout, msgs, user, socket } from './Store_chat';
import { layout, msgs, user, socket, current_room } from './Store_chat';
import { join_room, change_room, get_room_messages, get_all_rooms } from './Request_rooms';
import Button from './Element_button.svelte';
@@ -13,10 +13,14 @@
{
console.log("inside join_room");
console.log("room:", room);
const updated_room = await join_room(room);
console.log("updated room:", updated_room);
await change_room(updated_room);
if (updated_room.protection)
{
current_room.set(updated_room);
layout.set("password");
}
else
await change_room(updated_room);
}
</script>
@@ -52,7 +56,7 @@
<p>rooms are loading...</p>
{:then rooms}
{#each rooms as room}
<Button my_class="list" on_click={function() {join_rooms(room)}}>
<Button my_class="list" on:click={function() {join_rooms(room)}}>
{room.name}
</Button>
{/each}

121
srcs/requirements/svelte/api_front/src/pieces/chat/Layout_password.svelte Normal file
View File

@@ -0,0 +1,121 @@
<script lang="ts">
import { layout, current_room } from './Store_chat';
import { change_room, validate_password, change_password, add_password, remove_password } from './Request_rooms';
import { FetchResponse } from './Types_chat';
import Button from './Element_button.svelte';
import Warning from './Element_warning.svelte';
export let back = "";
export let mode = "validate";
let password_state = "";
if (mode === 'change')
password_state = "new";
if (mode === 'remove')
password_state = "current";
let room_password: string;
let room_old_password: string;
let response: FetchResponse;
let show_error = false;
async function handleSubmit(evt)
{
console.log("in handleSubmit");
let formIsValid = evt.target.checkValidity();
if (!formIsValid)
return;
let room = {
name: $current_room.name,
type: $current_room.type,
password: room_password,
};
room.protection = true;
if (mode === 'remove')
room.protection = false;
// send password
if (mode === 'validate')
response = await validate_password(room);
if (mode === 'add')
response = await add_password(room);
if (mode === 'change')
response = await change_password(room, room_old_password);
if (mode === 'remove')
response = await remove_password(room);
// go to room
if (response.status >= 300 || response.error)
show_error = response.error;
else
await change_room(response.room);
}
</script>
<div class="grid_box">
<!-- back -->
<Button new_layout={back} my_class="back icon" my_title="go back {back}">
back
</Button>
<!-- room_name -->
<Button my_class="room_name deactivate">
{$current_room.name}
</Button>
<!-- close -->
<Button new_layout="close" my_class="close icon">
close
</Button>
<!-- panel_password -->
<div class="panel panel_password __border_top">
<p class="title __center">this room is protected</p>
<form on:submit|preventDefault={handleSubmit}>
{#if show_error}
<Warning content={response.message}/>
{/if}
{#if mode === 'change'}
<label for="chat_old_pswd"><p>enter old password :</p></label>
<input id="chat_old_pswd" bind:value={room_old_password} type="password" placeholder="minimum 8 characters" minlength="8" name="old_password" required>
{/if}
<label for="chat_pswd"><p>enter {password_state} password :</p></label>
<input id="chat_pswd" bind:value={room_password} type="password" placeholder="minimum 8 characters" minlength="8" name="password" required>
<input type="submit" value="&#x2BA1">
</form>
</div>
</div>
<style>
/* grid layout "password"
*/
.grid_box :global(.back ) {grid-area: back;}
.grid_box :global(.room_name ) {grid-area: room_name;}
.grid_box :global(.close ) {grid-area: close;}
.grid_box :global(.panel_password) {grid-area: panel_password;}
.grid_box {
grid:
' back room_name close ' auto
' panel_password panel_password panel_password ' 1fr
/ auto 1fr auto ;
}
/* submit
*/
form input[type=submit] {
margin-top: 20px;
}
</style>

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

@@ -1,65 +0,0 @@
<script>
import { layout } from './Store_chat';
import Button from './Element_button.svelte';
export let back = "";
</script>
<div class="grid_box">
<!-- back -->
<Button new_layout={back} my_class="back icon" my_title="go back {back}">
back
</Button>
<!-- room_name -->
<Button my_class="room_name deactivate">
&lt;room_name&gt;
</Button>
<!-- close -->
<Button new_layout="close" my_class="close icon">
close
</Button>
<!-- panel_protected -->
<div class="panel panel_protected __border_top">
<p class="title __center">this room is protected</p>
<form>
<label for="chat_pswd"><p>password :</p></label>
<input id="chat_pswd" type="password" required>
<input type="submit" value="&#x2BA1">
</form>
</div>
</div>
<style>
/* grid layout "protected"
*/
.grid_box :global(.back ) {grid-area: back;}
.grid_box :global(.room_name ) {grid-area: room_name;}
.grid_box :global(.close ) {grid-area: close;}
.grid_box :global(.panel_protected) {grid-area: panel_protected;}
.grid_box {
grid:
' back room_name close ' auto
' panel_protected panel_protected panel_protected ' 1fr
/ auto 1fr auto ;
}
/* submit
*/
form input[type=submit] {
margin-top: 20px;
}
</style>

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

@@ -1,6 +1,6 @@
<script>
import { layout, socket, msgs, add_msg, current_room_name } from './Store_chat';
import { layout, socket, msgs, add_msg, current_room } from './Store_chat';
import Button from './Element_button.svelte';
import Msg from './Element_msg.svelte';
@@ -42,7 +42,7 @@
<!-- room_name -->
<Button new_layout="room_set" my_class="room_name transparent">
{$current_room_name}
{$current_room.name}
</Button>
<!-- close -->
@@ -71,7 +71,7 @@
</div>
<!-- send -->
<Button my_class="send" on_click={send_msg}>
<Button my_class="send" on:click={send_msg}>
send
</Button>

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

@@ -1,22 +1,24 @@
<script>
import { layout, current_room_name } from './Store_chat';
import { get_room_users, user_leave_room } from './Request_rooms';
import { layout, current_room } from './Store_chat';
import { get_room_users, leave_room } from './Request_rooms';
import Button from './Element_button.svelte';
export let back = "";
let users = get_room_users();
console.log("current_room:", $current_room);
function user_profile()
{
console/log("in user_profile");
console.log("in user_profile");
}
function leave_room()
function user_leave_room()
{
console.log("in leave_room");
user_leave_room();
leave_room();
layout.set("home");
}
@@ -31,7 +33,7 @@
<!-- room_name -->
<Button my_class="room_name deactivate">
{$current_room_name}
{$current_room.name}
</Button>
<!-- close -->
@@ -41,9 +43,27 @@
<!-- panel_room_set -->
<div class="panel panel_room_set __border_top">
<Button on_click={leave_room}>
leave
</Button>
{#if $current_room.type !== "direct"}
<Button on:click={user_leave_room}>
leave
</Button>
<Button new_layout="invite">
invite someone
</Button>
{/if}
{#if $current_room.protection }
<p class="__center">this room is password protected</p>
<Button new_layout="change_password">
change password
</Button>
<Button new_layout="remove_password">
remove password
</Button>
{:else}
<Button new_layout="add_password">
add password
</Button>
{/if}
<p>room users :</p>
<div class="room_users">
<div class="__show_if_only_child">
@@ -53,7 +73,7 @@
<p>list of users is loading...</p>
{:then users}
{#each users as user}
<Button new_layout="user" my_class="list" on_click={user_profile}>
<Button new_layout="user" my_class="list" on:click={user_profile}>
{user}
</Button>
{/each}

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

@@ -8,6 +8,14 @@
let mute = "mute";
let block = "block";
import { push } from "svelte-spa-router";
import { invited_username } from '../store_invitation';
function game_invitation()
{
const usernamePLACEHOLDER = "hulamy";
invited_username.set(usernamePLACEHOLDER);
push("/game");
}
</script>
@@ -41,7 +49,7 @@
<Button>
view profile
</Button>
<Button>
<Button on_click={() => game_invitation()}>
game invitation
</Button>
<Button>

157
srcs/requirements/svelte/api_front/src/pieces/chat/Request_rooms.ts
View File

@@ -1,12 +1,14 @@
import { msgs, user, layout, socket, current_room_name } from './Store_chat';
import type { Room } from './Interface_chat';
import { msgs, user, layout, socket, current_room } from './Store_chat';
import { Room, FetchResponse, FetchMethod } from './Types_chat';
import { fetch_chat_request, set_client_name_on_room, fill_fetch_response } from './Request_utils';
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;
let response: FetchResponse = await fetch_chat_request('messages', FetchMethod.GET);
const messages = response.messages;
if (messages === null)
return;
@@ -24,102 +26,141 @@ export async function create_room(room: Room)
{
console.log("in create_room");
// send the new room
const response = await fetch('/api/v2/chat/create', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(room),
});
console.log("room sent to create:", room);
let response: FetchResponse = await fetch_chat_request('create', FetchMethod.POST, room);
console.log("room returned from create:", response.room);
// get response status and message
let response_status = response.status;
let data = await response.json();
let response_message = "";
return {
status: response_status,
message: data.message,
room: data.room,
};
return response;
}
export async function join_room(room: Room)
{
console.log("in join_room");
const response = await fetch('/api/v2/chat/join', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(room),
});
let data = await response.json();
console.log("room sent to join:", room);
let response: FetchResponse = await fetch_chat_request('join', FetchMethod.POST, room);
console.log("room returned from join:", response.room);
return data.room;
return response.room;
}
export async function change_room(room: Room)
{
console.log("in change_room");
console.log("room:", room);
const response = await fetch('/api/v2/chat/change', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(room),
});
let data = await response.json();
console.log("room sent to change:", room);
let response: FetchResponse = await fetch_chat_request('change', FetchMethod.POST, room);
console.log("room returned from change:", response.room);
await get_room_messages();
let room_name = data.room.name;
if (room.type === 'direct')
{
room_name === room.users[0];
if (room_name === user.username)
room_name === room.users[1];
}
current_room_name.set(room_name);
set_client_name_on_room(room);
current_room.set(room);
layout.set("room");
}
export async function validate_password(room: Room)
{
console.log("in validate_password");
console.log("room sent to validate password:", room);
let response: FetchResponse = await fetch_chat_request('passwordauth', FetchMethod.POST, room);
console.log("room returned from validate password:", response.room);
return response;
}
export async function add_password(room: Room)
{
console.log("in add_password");
console.log("room sent to add password:", room);
let response: FetchResponse = await fetch_chat_request('addpassword', FetchMethod.POST, room);
console.log("room returned from add password:", response.room);
return response;
}
export async function change_password(room: Room, old_password: string)
{
console.log("in send_password");
let request_body =
{
room: room,
old_password: old_password,
}
console.log("room sent to change password:", room);
let response: FetchResponse = await fetch_chat_request('changepassword', FetchMethod.POST, request_body);
console.log("room returned from change password:", response.room);
return response;
}
export async function remove_password(room: Room)
{
console.log("in send_password");
console.log("room sent to remove password:", room);
let response: FetchResponse = await fetch_chat_request('removepassword', FetchMethod.DELETE, room);
console.log("room returned from remove password:", response.room);
return response;
}
export async function invite_user(user_name: string)
{
console.log("in invite_user");
let response: FetchResponse = await fetch_chat_request('invite', FetchMethod.POST, {username: user_name});
await get_room_messages();
}
export async function get_my_rooms()
{
console.log("in get_my_rooms");
const response = await fetch('/api/v2/chat/myrooms');
const data = await response.json();
console.log("data.rooms:", data.rooms);
let response: FetchResponse = await fetch_chat_request('myrooms', FetchMethod.GET);
return data.rooms;
let rooms = response.rooms.map(room => set_client_name_on_room(room));
return rooms;
}
export async function get_all_rooms()
{
console.log("in get_all_rooms");
const response = await fetch('/api/v2/chat/allrooms');
const data = await response.json();
let response: FetchResponse = await fetch_chat_request('allrooms', FetchMethod.GET);
return data.rooms;
return response.rooms;
}
export async function get_room_users()
{
console.log("in get_room_users");
const response = await fetch('/api/v2/chat/roomusers');
const data = await response.json();
let response: FetchResponse = await fetch_chat_request('roomusers', FetchMethod.GET);
return data.users;
return response.users;
}
export async function user_leave_room()
export async function get_all_users()
{
console.log("in get_all_users");
let response: FetchResponse = await fetch_chat_request('users', FetchMethod.GET);
return response.users;
}
export async function leave_room()
{
console.log("in leave_room");
const response = await fetch('/api/v2/chat/removeuser', {
method: 'DELETE',
});
let response: FetchResponse = await fetch_chat_request('leave', FetchMethod.DELETE);
}

59
srcs/requirements/svelte/api_front/src/pieces/chat/Request_utils.ts Normal file
View File

@@ -0,0 +1,59 @@
import { user } from './Store_chat';
import { Room, FetchResponse, FetchInit, FetchMethod } from './Types_chat';
export async function fetch_chat_request(route: string, fetchMethod: FetchMethod, param?: any)
{
console.log("in fetch_chat_request");
let response: FetchResponse = { status: 0 };
let fetch_params: FetchInit = {
method: fetchMethod,
headers: { 'Content-Type': 'application/json' },
}
if (param)
fetch_params.body = JSON.stringify(param);
try
{
const resp = await fetch(`/api/v2/chat/${route}`, fetch_params);
response.status = resp.status;
let data = await resp.json();
fill_fetch_response(response, data);
if (!resp.ok)
throw new Error(data.message);
}
catch (error)
{
console.error(error.message);
}
return response;
}
export function set_client_name_on_room(room: Room)
{
console.log("in set_client_name_on_room");
if (room.type === 'direct')
{
room.client_name = room.users[0];
if (room.client_name === user.username)
room.client_name = room.users[1];
}
else
room.client_name = room.name;
return room;
}
export function fill_fetch_response(response: FetchResponse, data: any)
{
console.log("in fill_fetch_response");
Object.keys(data).forEach(key =>
{
response[key] = data[key];
});
}

21
srcs/requirements/svelte/api_front/src/pieces/chat/Socket_init.ts → srcs/requirements/svelte/api_front/src/pieces/chat/Socket_chat.ts
View File

@@ -1,6 +1,6 @@
import io from 'socket.io-client';
import { set_socket, set_user } from './Store_chat';
import { socket_events } from './Socket_events';
import { user, msgs } from './Store_chat';
const address = `http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}`;
@@ -21,6 +21,23 @@ export async function init_socket()
});
set_socket(socket);
socket_states(socket);
socket_events(socket);
}
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 }]);
});
}
function socket_states(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"); });
@@ -33,7 +50,5 @@ export async function init_socket()
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);
}

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

@@ -1,12 +0,0 @@
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 }]);
});
}

7
srcs/requirements/svelte/api_front/src/pieces/chat/Store_chat.ts
View File

@@ -1,8 +1,13 @@
import { writable } from 'svelte/store';
import { Room } from './Types_chat';
export let msgs = writable([]);
export let layout = writable("close");
export let current_room_name = writable("");
export let current_room: Room = writable({
name: "",
type: "",
protection: false,
});
export let user;
export let socket;

33
srcs/requirements/svelte/api_front/src/pieces/chat/Types_chat.ts Normal file
View File

@@ -0,0 +1,33 @@
export interface Room
{
name: string;
type: "public" | "private" | "direct" | "user";
users?: string[];
client_name?: string;
protection: boolean;
allowed?: boolean;
}
export interface FetchResponse
{
status: number;
error?: boolean;
code?: string;
message?: string;
room?: Room;
}
export interface FetchInit
{
method: string;
headers: any;
body?: string;
}
export enum FetchMethod
{
POST = 'POST',
GET = 'GET',
DELETE = 'DELETE',
}

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

@@ -1,27 +0,0 @@
<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>

4
srcs/requirements/svelte/api_front/src/pieces/store_invitation.ts Normal file
View File

@@ -0,0 +1,4 @@
import { writable } from 'svelte/store';
export const invited_username = writable("");

37
srcs/requirements/svelte/api_front/src/pieces/utils.ts
View File

@@ -13,5 +13,42 @@ export async function fetchAvatar(username: string)
})
.catch((error) => {
console.log("catch fetchAvatar: ", error);
return `http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/img/default.png`;
});
}
export async function fetchUser()
{
return fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/user`)
.then((response) => {
if (!response.ok) {
throw new Error("User not retrieved");
}
return response.json();
})
.then((body) => {
return body;
})
.catch((error) => {
console.log("catch fetchUser: ", error);
return null;
});
}
export async function fetchAllUsers()
{
return fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/user/all`)
.then((response) => {
if (!response.ok) {
throw new Error("All Users not retrieved");
}
return response.json();
})
.then((body) => {
return body;
})
.catch((error) => {
console.log("catch fetchAllUsers: ", error);
return [];
});
}