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

Merge branch 'master' into luke

Browse Source
This commit is contained in:
LuckyLaszlo
2023-01-11 13:14:25 +01:00
parent de26c3c89c 9e53ed140a
commit 7c038f90d2
48 changed files with 25430 additions and 435 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
srcs/requirements/svelte/api_front/.env Normal file
View File

@@ -0,0 +1,2 @@
WEBSITE_HOST=localhost
WEBSITE_PORT=8080

24290
srcs/requirements/svelte/api_front/public/build/bundle.js Normal file
View File

File diff suppressed because it is too large Load Diff

1
srcs/requirements/svelte/api_front/public/build/bundle.js.map Normal file
View File

File diff suppressed because one or more lines are too long

6
srcs/requirements/svelte/api_front/src/App.svelte
View File

@@ -1,9 +1,6 @@
<script lang="ts">
// routing
// may not need {link} here
import Router, { link, replace } from "svelte-spa-router";
import Router, { replace } from "svelte-spa-router";
import { primaryRoutes } from "./routes/primaryRoutes.js";
// import primaryRoutes from "./routes/primaryRoutes.svelte";
const conditionsFailed = (event) => {
console.error('conditionsFailed event', event.detail);
@@ -15,6 +12,5 @@
</script>
<!-- <h1>Testing</h1> -->
<Router routes={primaryRoutes} on:conditionsFailed={conditionsFailed}/>

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

@@ -4,14 +4,7 @@
<h1>We are sorry!</h1>
<p>This isn't a url that we use.</p>
<!-- <img src="https://picsum.photos/id/685/800/400" alt="img"> -->
<p>Go home you're drunk.</p>
<a href="/" use:link>
<h2>Take me home →</h2>
</a>
<style>
/* img {
width: 100%;
} */
</style>
</a>

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

@@ -74,7 +74,6 @@
overflow-y: hidden;
} */
header {
/* didn't work... */
overflow-y: hidden;

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

@@ -2,7 +2,7 @@
import { onMount } from 'svelte';
import GenerateUserDisplay from '../../pieces/GenerateUserDisplay.svelte';
import { push } from 'svelte-spa-router';
import Chat from '../../pieces/chat/Chat.svelte';
@@ -19,13 +19,11 @@
<Chat color="bisque"/>
<!-- is this if excessive? -->
<div class="outer">
<!-- OHHHH i could use #await instead of if and have an nice loading page! -->
{#if user !== undefined}
<GenerateUserDisplay user={user} primary={true}/>
<button on:click={() => (push('/profile/settings'))}>Profile Settings</button>
{:else}
<!-- might be unnecessary since you can't access the page without fetching the user -->
<h2>Sorry</h2>
<div>Failed to load current</div>
{/if}
@@ -36,140 +34,7 @@
div.outer{
max-width: 960px;
margin: 40px auto;
}
/* The main part */
main{
max-width: 960px;
margin: 40px auto;
text-align: center;
}
/* Normal CSS stuff */
.avatar{
max-width: 150px;
/* padding: 5px; */
}
/* The variable rich section */
section.main-stats{
max-width: 600px;
margin: 40px auto;
text-align: center;
/* i think i want to use a grid? */
display: grid;
grid-template-columns: repeat(3, 1fr);
/* not sure about this, maybe top should be larger? */
grid-template-rows: repeat(3, 1fr);
}
/* the stuff in the grid*/
section.main-stats h4{
grid-column: 1 / span 3;
}
div.username{
font-size: 1.5em;
font-weight: bold;
padding-bottom: 5px;
}
div.rank {
/* color: black; */
font-size: 1.2em;
font-weight: bold;
}
/* Glittery Star Stuff */
:root {
--purple: rgb(123, 31, 162);
--violet: rgb(103, 58, 183);
--pink: rgb(244, 143, 177);
/* make shit gold? */
}
@keyframes background-pan {
from {
background-position: 0% center;
}
to {
background-position: -200% center;
}
}
@keyframes scale {
from, to {
transform: scale(0);
}
50% {
transform: scale(1);
}
}
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(180deg);
}
}
div > .glitter {
display: inline-block;
position: relative;
}
div > .glitter > .glitter-star {
--size: clamp(20px, 1.5vw, 30px);
animation: scale 700ms ease forwards;
display: block;
height: var(--size);
left: var(--star-left);
position: absolute;
top: var(--star-top);
width: var(--size);
}
div > .glitter > .glitter-star > svg {
animation: rotate 1000ms linear infinite;
display: block;
opacity: 0.7;
}
div > .glitter > .glitter-star > svg > path {
fill: var(--violet);
}
div > .glitter > .glitter-text {
animation: background-pan 3s linear infinite;
/* background-image: linear-gradient( */
background: linear-gradient(
to right,
var(--purple),
var(--violet),
var(--pink),
var(--purple)
);
background-size: 200%;
/* Keep these for Safari and chrome */
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
/* These are for Firefox */
background-clip: text;
color: transparent;
white-space: nowrap;
}
</style>

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

@@ -177,7 +177,7 @@
console.log('Block a non friend user, their username')
console.log(aUsername)
sentFriendRequest = await fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/network/relations`, {
let sentFriendRequest = await fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/network/relations`, {
method : "POST",
headers: { 'Content-Type': 'application/json'},
body: JSON.stringify({

1
srcs/requirements/svelte/api_front/src/pages/profile/ProfilePage.svelte
View File

@@ -1,5 +1,4 @@
<script lang="ts">
import Header from "../../pieces/Header.svelte";
import Router from "svelte-spa-router";
import { profileRoutes, prefix } from "../../routes/profileRoutes.js";

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

@@ -3,9 +3,11 @@
import { location } from 'svelte-spa-router';
// no need, it's just for links
import active from 'svelte-spa-router/active'
// or i could leave them all and not display if they're active?
$: current = $location;
let handleClickLogout = async () => {
await fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/auth/logout`, {
@@ -23,16 +25,13 @@
<img src="/img/potato_logo.png" alt="Potato Pong Logo" on:click={() => (push('/'))}>
<h1>Potato Pong</h1>
<nav>
<button on:click={() => (push('/game'))}>Play</button>
<button on:click={() => (push('/spectator'))}>Spectate</button>
<button on:click={() => (push('/ranking'))}>Ranking</button>
{#if $location !== '/profile'}
<button on:click={() => (push('/profile'))}>My Profile</button>
{:else if $location === '/profile'}
<button on:click={() => (push('/profile/settings'))}>Settings</button>
{/if}
<button on:click={() => (push('/profile/friends'))}>Friends</button>
<button on:click={handleClickLogout}>Log Out</button>
<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/settings'}" on:click={() => (push('/profile/settings'))}>Settings</button> -->
<button class:selected="{current === '/profile/friends'}" on:click={() => (push('/profile/friends'))}>Friends</button>
<button on:click={handleClickLogout}>Log Out</button>
</nav>
</header>
@@ -54,6 +53,13 @@
}
.selected {
background-color: chocolate;
text-decoration: underline;
/* TMP so it's obvious but we need to pick good colors */
}
/* There is a bunch of unncessary shit in here... why so many flex grids, why is everything the same class? just seemed easier but... */

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>

1
srcs/requirements/svelte/api_front/src/routes/primaryRoutes.js
View File

@@ -9,7 +9,6 @@ import Ranking from '../pages/game/Ranking.svelte';
import GameSpectator from '../pages/game/GameSpectator.svelte';
export const primaryRoutes = {
'/': SplashPage,
'/2fa': TwoFactorAuthentication,