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-16 18:53:00 +01:00
parent dfd34c590b 8b365968ac
commit 3588a8c12d
38 changed files with 1289 additions and 377 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -2,6 +2,7 @@
import Router, { replace } from "svelte-spa-router";
import { primaryRoutes } from "./routes/primaryRoutes.js";
import { location } from 'svelte-spa-router';
import Chat from './pieces/chat/Chat.svelte';
import Header from './pieces/Header.svelte';
const conditionsFailed = (event) => {
@@ -17,6 +18,7 @@
{#if ($location !== '/')}
<Header/>
{/if}
<Chat />
<Router routes={primaryRoutes} on:conditionsFailed={conditionsFailed}/>

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

@@ -190,6 +190,7 @@
position: relative;
width: 100%;
height: 100%;
box-sizing: border-box;
}
#canvas_container {
margin-top: 20px;

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

@@ -15,19 +15,18 @@
</script>
<Chat color="bisque"/>
<div class="background-pages">
<div class="outer">
{#if user}
<GenerateUserDisplay user={user}/>
<button on:click={() => (push('/profile/settings'))}>Profile Settings</button>
{:else}
<h2>Sorry</h2>
<div>Failed to load current</div>
{/if}
</div>
<div class="outer">
{#if user !== undefined}
<GenerateUserDisplay user={user}/>
<button on:click={() => (push('/profile/settings'))}>Profile Settings</button>
{:else}
<h2>Sorry</h2>
<div>Failed to load current</div>
{/if}
</div>
</div>
<style>
div.outer{

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

@@ -70,7 +70,6 @@
}
.header {
resize: vertical;
overflow: hidden;
background: #FB8B24;
box-sizing: border-box;

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

@@ -2,14 +2,114 @@
import Layouts from './Chat_layouts.svelte';
import { init_socket } from './Socket_chat';
import { location } from 'svelte-spa-router';
export let color = "transparent";
let style_light =
{
lines_width: "1px",
lines_color: "rgb(30, 30, 30)",
lines_light_color: "rgb(70, 70, 70)",
bg_color: "rgb(251, 139, 36)",
bg_light_color: "rgb(251, 156, 81)",
init_socket();
btn_color: "rgb(220, 220, 220)",
btn_color_hover: "rgb(200, 200, 200)",
btn_color_active: "rgb(190, 190, 190)",
btn_color_border: "rgb(150, 150, 150)",
btn_light_color: "rgb(235, 235, 235)",
btn_light_color_hover: "rgb(220, 220, 220)",
btn_light_color_active: "rgb(210, 210, 210)",
btn_color_border: "rgb(200, 200, 200)",
chat_me_color: "rgb(250, 230, 220)",
chat_me_bg_color: "rgb(210, 105, 30)",
chat_name_color: "rgb(230, 230, 230)",
chat_other_color: "rgb(250, 250, 250)",
chat_other_bg_color: "rgb(190, 130, 70)",
chat_serveur_color: "rgb(110, 110, 110)",
chat_msg_bg_color: "rgb(251, 163, 80)",
chat_conv_bg_color: "rgb(251, 163, 80)",
}
let style_dark =
{
lines_width: "2px",
lines_color: "rgb(200, 200, 200)",
lines_light_color: "rgb(100, 100, 100)",
bg_color: "rgb( 50, 50, 50)",
bg_light_color: "rgb( 35, 35, 35)",
btn_color: "rgb(220, 220, 220)",
btn_color_hover: "rgb(100, 100, 100)",
btn_color_active: "rgb( 90, 90, 90)",
btn_color_border: "rgb(150, 150, 150)",
btn_light_color: "rgb(235, 235, 235)",
btn_light_color_hover: "rgb(220, 220, 220)",
btn_light_color_active: "rgb(210, 210, 210)",
btn_color_border: "rgb(200, 200, 200)",
chat_me_color: "rgb(230, 230, 230)",
chat_me_bg_color: "rgb(110, 110, 110)",
chat_name_color: "rgb(110, 110, 110)",
chat_other_color: "rgb( 90, 90, 90)",
chat_other_bg_color: "rgb(210, 210, 210)",
chat_serveur_color: "rgb(190, 190, 190)",
chat_msg_bg_color: "rgb( 82, 82, 82)",
chat_conv_bg_color: "rgb( 82, 82, 82)",
}
let style = style_light;
console.log("location:",$location);
if ($location !== '/')
init_socket();
function change_style(loc)
{
console.log("change color, location:", loc);
if (loc.startsWith("/game"))
style = style_dark;
if (loc.startsWith("/spectator"))
style = style_dark;
if (loc.startsWith("/ranking"))
style = style_light;
if (loc.startsWith("/profile"))
style = style_light;
}
$: change_style($location);
</script>
<Layouts color={color} />
{#if $location !== '/' && $location !== '/game'}
<Layouts
--lines_width={style.lines_width}
--lines_color={style.lines_color}
--lines_light_color={style.lines_light_color}
--bg_color={style.bg_color}
--bg_light_color={style.bg_light_color}
--btn_color={style.btn_color}
--btn_color_hover={style.btn_color_hover}
--btn_color_active={style.btn_color_active}
--btn_color_border={style.btn_color_border}
--btn_light_color={style.btn_light_color}
--btn_light_color_hover={style.btn_light_color_hover}
--btn_light_color_active={style.btn_light_color_active}
--btn_light_color_border={style.btn_color_border}
--chat_me_color={style.chat_me_color}
--chat_me_bg_color={style.chat_me_bg_color}
--chat_name_color={style.chat_name_color}
--chat_other_color={style.chat_other_color}
--chat_other_bg_color={style.chat_other_bg_color}
--chat_serveur_color={style.chat_serveur_color}
--chat_msg_bg_color={style.chat_msg_bg_color}
--chat_conv_bg_color={style.chat_conv_bg_color}
/>
{/if}
<style></style>

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

@@ -6,7 +6,10 @@
</script>
<!--
<div class="{$layout} chat_box" style="background-color: {color};">
-->
<div class="{$layout} chat_box">
<slot></slot>
</div>
@@ -22,7 +25,8 @@
padding: 0px;
width: auto;
height: auto;
border: 1px solid black;
border: var(--lines_width) solid var(--lines_color);
background-color: var(--bg_color);
z-index: 1;
}
@@ -34,6 +38,10 @@
*/
/* gobal variables styles
*/
/* Hide scrollbar
*/
.chat_box :global(*) {
@@ -67,6 +75,7 @@
.chat_box :global(.grid_box p) {
padding: 10px;
font-size: 15px;
color: var(--lines_color);
}
@@ -95,7 +104,7 @@
}
.chat_box :global(.__show_if_only_child:only-child) {
display: flex;
color: rgb(100, 100, 100);
color: var(--lines_light_color);
}
@@ -110,7 +119,7 @@
/* __border_top
*/
.chat_box :global(.__border_top) {
border-top: 1px solid black;
border-top: var(--lines_width) solid var(--lines_color);
}
@@ -122,7 +131,7 @@
.chat_box :global(.__check_change_next:checked ~ .__to_block),
.chat_box :global(.__check_change_next:checked ~ .__to_block *) {
pointer-events: none;
color: rgb(100, 100, 100);
color: var(--lines_light_color);
}
.chat_box :global(.__to_show) {
display: none;

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

@@ -19,7 +19,6 @@
/* global variables
*/
export let color;
let room = "";
let admin = false;
let layouts = ["home", "home"];
@@ -28,8 +27,6 @@
*/
function set_layouts($layout)
{
//console.log("layouts:", layouts);
//console.log("layout:", $layout);
if ($layout.length === 0)
layout.set(layouts[0]);
else if ($layout === "close")
@@ -40,13 +37,12 @@
layouts = [$layout, "home"];
else
layouts = [$layout, layouts[0]];
//console.log("- layouts:", layouts);
}
$: set_layouts($layout);
</script>
<ChatBox color={color}>
<ChatBox>
{#if $layout === "home"}
<HomeLayout />

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

@@ -29,17 +29,6 @@
<style>
/*
- default config
- for btn list
- for transparent btn
- for deactivated btn
- for icon
- for 3 dots btn
- for close btn
- for back btn
*/
/* default config
*/
@@ -50,25 +39,29 @@
cursor: pointer;
outline: none;
border: none;
background-color: rgb(220, 220, 220);
border-radius: 0px;
background-color: var(--btn_color);
}
button p {
width: 100%;
margin: auto;
text-align: center;
}
:global(.chat_box) button p {
color: var(--lines_light_color);
}
button:hover {
background-color: rgb(200, 200, 200);
background-color: var(--btn_color_hover);
}
button:active {
background-color: rgb(190, 190, 190);
background-color: var(--btn_color_active);
}
/* .list
*/
.list:not(:hover) {
background-color: rgb(240, 240, 240);
background-color: var(--btn_light_color);
}
.list p {
text-align: left;
@@ -80,6 +73,9 @@
.transparent:not(:hover) {
background-color: transparent;
}
:global(.chat_box) button.transparent p {
color: var(--lines_color);
}
/* .deactivated
@@ -88,6 +84,9 @@
background-color: transparent;
pointer-events: none;
}
:global(.chat_box) button.deactivate p {
color: var(--lines_color);
}
/* .border
@@ -100,19 +99,19 @@
/* .light
*/
.light {
background-color: rgb(233, 233, 233);
background-color: var(--btn_light_color);
}
.light.border {
border: 1px solid rgb(204, 204, 204);
border: var(--lines_width) solid var(--btn_light_color_border);
}
.light:hover {
background-color: rgb(220, 220, 220);
background-color: var(--btn_light_color_hover);
}
.light.border:hover {
border-color: rgb(200, 200, 200);
border-color: var(--btn_light_color_border);
}
.light:active {
background-color: rgb(210, 210, 210);
background-color: var(--btn_light_color_active);
}
@@ -151,6 +150,7 @@
text-align: center;
transform: translateY(-50%);
cursor: pointer;
color: var(--lines_color);
}
@@ -159,11 +159,11 @@
.close::before {
content: "";
position: absolute;
top: calc(50% - 1px);
top: calc(50% - var(--lines_width) / 2);
left: 5px;
width: 20px;
height: 2px;
background-color: black;
height: var(--lines_width);
background-color: var(--lines_color);
}
@@ -176,8 +176,8 @@
left: 6px;
width: 14px;
height: 14px;
border-left: 1px solid black;
border-bottom: 1px solid black;
border-left: var(--lines_width) solid var(--lines_color);
border-bottom: var(--lines_width) solid var(--lines_color);
transform: rotate(45deg);
}
@@ -199,7 +199,7 @@
width: 13px;
height: 10px;
border-radius: 2px;
background-color: rgb(110, 110, 110);
background-color: var(--lines_color);
}
.blocked::after {
content: "";
@@ -211,7 +211,18 @@
height: 13px;
border-radius: 5px;
box-sizing: border-box;
border: 3px solid rgb(110, 110, 110);
border: 3px solid var(--lines_color);
}
/* .admin
*/
.admin p {
flex-direction: row;
}
.admin :global(span) {
margin-left: auto;
color: var(--lines_light_color);
}

23
srcs/requirements/svelte/api_front/src/pieces/chat/Element_msg.svelte
View File

@@ -10,6 +10,15 @@
</div>
<style>
/*
var(--chat_me_color)
var(--chat_me_bg_color)
var(--chat_other_color)
var(--chat_other_bg_color)
var(--chat_name_color)
var(--chat_input_color)
var(--chat_input_bg_color)
*/
.chat_msg {
/*
white-space: pre-wrap;
@@ -22,7 +31,7 @@
*/
.chat_msg {
margin-left: 0px;
background-color: rgb(210, 210, 210);
background-color: var(--chat_other_bg_color);
max-width: 80%;
}
.chat_msg p {
@@ -31,24 +40,28 @@
.chat_msg p.name {
margin: 0px;
font-size: 12px;
color: rgb(100, 100, 100);
color: var(--chat_name_color);
}
.chat_msg p.msg {
margin: 5px 0px;
color: var(--chat_other_color);
}
.chat_msg p.msg :global(*) {
display: inline;
}
/* msg perso
/* me msg
*/
.chat_msg.me {
margin-right: 0px;
margin-left: auto;
background-color: rgb(210, 110, 10);
background-color: var(--chat_me_bg_color);
}
.chat_msg.me p.name {
display: none;
}
.chat_msg.me p.msg {
color: var(--chat_me_color);
}
/* msg server
*/
.chat_msg.SERVER {
@@ -61,7 +74,7 @@
.chat_msg.SERVER p.msg {
margin: 0px auto;
font-size: 12px;
color: rgb(100, 100, 100);
color: var(--chat_serveur_color);
}
</style>

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

@@ -3,7 +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 type { FetchResponse } from './Types_chat';
import Button from './Element_button.svelte';
import Warning from './Element_warning.svelte';

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

@@ -2,6 +2,7 @@
import { layout, msgs, user, current_room } from './Store_chat';
import { change_room, get_room_messages, get_my_rooms } from './Request_rooms';
import { to_print } from './Utils_chat';
import { onMount } from 'svelte';
import Button from './Element_button.svelte';
@@ -10,9 +11,9 @@
// go to clicked room
async function go_to_room(room)
{
console.log("inside go_to_room");
to_print("inside go_to_room");
console.log("room:", room);
to_print("room:", room);
if (room.protection && !room.allowed)
{
await current_room.set(room);
@@ -55,7 +56,7 @@
<p>rooms are loading...</p>
{:then rooms}
{#each rooms as room}
<Button my_class="list" on:click={function() {go_to_room(room)}}>
<Button my_class="list" on:click={function(){go_to_room(room)}}>
{room.client_name}
</Button>
{/each}

3
srcs/requirements/svelte/api_front/src/pieces/chat/Layout_invite.svelte
View File

@@ -2,6 +2,7 @@
import { layout, user, current_room } from './Store_chat';
import { get_all_users, invite_user } from './Request_rooms';
import { to_print } from './Utils_chat';
import Button from './Element_button.svelte';
export let back = "";
@@ -11,7 +12,7 @@
// invite user in this room
async function invite_this_user(username: string)
{
console.log("inside invite_this_user");
to_print("inside invite_this_user");
invite_user(username);
layout.set("room");

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

@@ -1,10 +1,80 @@
<script>
<script lang="ts">
import { layout } from './Store_chat';
import { layout, settings_user } from './Store_chat';
import { set_mute, get_is_mute, get_unmute } from './Request_rooms';
import Button from './Element_button.svelte';
import Warning from './Element_warning.svelte';
export let back = "";
let response: FetchResponse;
let show_error = false;
let is_mute = false;
let mute_date: date;
let date_string: string;
get_is_mute($settings_user).then(response =>
{
if (response && response.name)
is_mute = true;
if (response && response.date)
mute_date = response.date;
if (mute_date)
date_string = stringify_date(new Date(mute_date));
else
date_string = "eternity";
});
let is_forever;
let minutes: number = 0;
let hours: number = 0;
let days: number = 0;
function stringify_date(str_date: Date)
{
return `${str_date.getFullYear()}/${str_date.getMonth() + 1}/${str_date.getDate()} at ${str_date.getHours()}:${str_date.getMinutes()}`;
}
async function handleSubmit(evt)
{
let formIsValid = evt.target.checkValidity();
if (!formIsValid)
return;
console.log("is_forever:", is_forever);
console.log("minutes:", minutes);
console.log("hours:", hours);
console.log("days:", days);
let date_limit: Date;
let time: string;
if (is_forever)
time = "eternity";
else
{
let duration = minutes * (1000 * 60) + hours * (1000 * 60 * 60) + days * (1000 * 60 * 60 * 24);
console.log("duration:", duration);
let date_start = new Date();
date_limit = new Date(date_start.getTime() + duration);
time = stringify_date(date_limit);
console.log("time:", time);
}
response = await set_mute(date_limit, $settings_user, time);
// print error
if (response.status >= 300 || response.error)
show_error = response.error;
layout.set("room");
}
async function unmute()
{
get_unmute($settings_user);
layout.set("room");
}
</script>
<div class="grid_box">
@@ -16,7 +86,7 @@
<!-- user -->
<Button my_class="user deactivate">
&lt;user&gt;
{$settings_user}
</Button>
<!-- close -->
@@ -25,160 +95,168 @@
</Button>
<!-- panel_mute -->
<!-- MUTE -->
<div class="panel panel_mute __border_top">
<p class="__center">mute this user for a time :</p>
<form>
<!-- forever -->
<input id="chat_mute_forever" class="__check_change_next" type="checkbox">
<label for="chat_mute_forever" class="_checkbox"><p>forever</p></label>
<div class="__to_block">
<!-- minutes -->
<label for="chat_mute_minutes" class="_select">
<p>minutes :</p>
<select id="chat_mute_minutes">
<option value="01">00</option>
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">05</option>
<option value="06">06</option>
<option value="07">07</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="30">30</option>
<option value="31">31</option>
<option value="32">32</option>
<option value="33">33</option>
<option value="34">34</option>
<option value="35">35</option>
<option value="36">36</option>
<option value="37">37</option>
<option value="40">40</option>
<option value="41">41</option>
<option value="42">42</option>
<option value="43">43</option>
<option value="44">44</option>
<option value="45">45</option>
<option value="46">46</option>
<option value="47">47</option>
<option value="50">50</option>
<option value="51">51</option>
<option value="52">52</option>
<option value="53">53</option>
<option value="54">54</option>
<option value="55">55</option>
<option value="56">56</option>
<option value="57">57</option>
<option value="60">60</option>
</select>
</label>
<!-- hours -->
<label for="chat_mute_hours" class="_select">
<p>hours :</p>
<select id="chat_mute_hours">
<option value="01">00</option>
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">05</option>
<option value="06">06</option>
<option value="07">07</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="30">30</option>
<option value="31">31</option>
<option value="32">32</option>
<option value="33">33</option>
<option value="34">34</option>
<option value="35">35</option>
<option value="36">36</option>
<option value="37">37</option>
<option value="40">40</option>
<option value="41">41</option>
<option value="42">42</option>
<option value="43">43</option>
<option value="44">44</option>
<option value="45">45</option>
<option value="46">46</option>
<option value="47">47</option>
<option value="50">50</option>
<option value="51">51</option>
<option value="52">52</option>
<option value="53">53</option>
<option value="54">54</option>
<option value="55">55</option>
<option value="56">56</option>
<option value="57">57</option>
<option value="60">60</option>
</select>
</label>
<!-- days -->
<label for="chat_mute_days" class="_select">
<p>days :</p>
<select id="chat_mute_days">
<option value="00">00</option>
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">05</option>
<option value="06">06</option>
<option value="07">07</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
</label>
</div>
<input type="submit" value="&#x2BA1">
</form>
{#if show_error}
<Warning content={response.message}/>
{/if}
{#if is_mute === true }
<p class="__center">this user is mute untill {date_string}</p>
<Button on:click={unmute}>
un-mute
</Button>
{:else}
<form on:submit|preventDefault={handleSubmit}>
<p class="__center">mute this user for a time :</p>
<!-- forever -->
<input id="chat_mute_forever" bind:checked={is_forever} class="__check_change_next" type="checkbox">
<label for="chat_mute_forever" class="_checkbox"><p>forever</p></label>
<div class="__to_block">
<!-- minutes -->
<label for="chat_mute_minutes" class="_select">
<p>minutes :</p>
<select id="chat_mute_minutes" bind:value={minutes}>
<option>00</option>
<option>01</option>
<option>02</option>
<option>03</option>
<option>04</option>
<option>05</option>
<option>06</option>
<option>07</option>
<option>10</option>
<option>11</option>
<option>12</option>
<option>13</option>
<option>14</option>
<option>15</option>
<option>16</option>
<option>17</option>
<option>20</option>
<option>21</option>
<option>22</option>
<option>23</option>
<option>24</option>
<option>25</option>
<option>26</option>
<option>27</option>
<option>30</option>
<option>31</option>
<option>32</option>
<option>33</option>
<option>34</option>
<option>35</option>
<option>36</option>
<option>37</option>
<option>40</option>
<option>41</option>
<option>42</option>
<option>43</option>
<option>44</option>
<option>45</option>
<option>46</option>
<option>47</option>
<option>50</option>
<option>51</option>
<option>52</option>
<option>53</option>
<option>54</option>
<option>55</option>
<option>56</option>
<option>57</option>
<option>60</option>
</select>
</label>
<!-- hours -->
<label for="chat_mute_hours" class="_select">
<p>hours :</p>
<select id="chat_mute_hours">
<option>00</option>
<option>01</option>
<option>02</option>
<option>03</option>
<option>04</option>
<option>05</option>
<option>06</option>
<option>07</option>
<option>10</option>
<option>11</option>
<option>12</option>
<option>13</option>
<option>14</option>
<option>15</option>
<option>16</option>
<option>17</option>
<option>20</option>
<option>21</option>
<option>22</option>
<option>23</option>
<option>24</option>
<option>25</option>
<option>26</option>
<option>27</option>
<option>30</option>
<option>31</option>
<option>32</option>
<option>33</option>
<option>34</option>
<option>35</option>
<option>36</option>
<option>37</option>
<option>40</option>
<option>41</option>
<option>42</option>
<option>43</option>
<option>44</option>
<option>45</option>
<option>46</option>
<option>47</option>
<option>50</option>
<option>51</option>
<option>52</option>
<option>53</option>
<option>54</option>
<option>55</option>
<option>56</option>
<option>57</option>
<option>60</option>
</select>
</label>
<!-- days -->
<label for="chat_mute_days" class="_select">
<p>days :</p>
<select id="chat_mute_days">
<option>00</option>
<option>01</option>
<option>02</option>
<option>03</option>
<option>04</option>
<option>05</option>
<option>06</option>
<option>07</option>
<option>10</option>
<option>11</option>
<option>12</option>
<option>13</option>
<option>14</option>
<option>15</option>
<option>16</option>
<option>17</option>
<option>20</option>
<option>21</option>
<option>22</option>
<option>23</option>
<option>24</option>
<option>25</option>
<option>26</option>
<option>27</option>
<option>30</option>
<option>31</option>
</select>
</label>
</div>
<input type="submit" value="&#x2BA1">
</form>
{/if}
</div>

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

@@ -2,6 +2,7 @@
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 { to_print } from './Utils_chat';
import Button from './Element_button.svelte';
export let back = "";
@@ -11,7 +12,7 @@
// join the room
async function join_rooms(room)
{
console.log("inside join_room");
to_print("inside join_room");
const updated_room = await join_room(room);
if (updated_room.protection)

5
srcs/requirements/svelte/api_front/src/pieces/chat/Layout_password.svelte
View File

@@ -2,7 +2,8 @@
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 type { FetchResponse } from './Types_chat';
import { to_print } from './Utils_chat';
import Button from './Element_button.svelte';
import Warning from './Element_warning.svelte';
@@ -22,7 +23,7 @@
async function handleSubmit(evt)
{
console.log("in handleSubmit");
to_print("in handleSubmit");
let formIsValid = evt.target.checkValidity();

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

@@ -15,7 +15,6 @@
if (msg.length > 0) {
socket.emit('message', msg);
add_msg("me", msg);
console.log(msgs);
}
msg = "";
@@ -42,7 +41,7 @@
<!-- room_name -->
<Button new_layout="room_set" my_class="room_name transparent">
{$current_room.name}
{$current_room.client_name}
</Button>
<!-- close -->
@@ -112,8 +111,11 @@
overflow-x: hidden;
overflow-y: scroll;
background-color: white;
border: 1px solid black;
background-color: var(--chat_msg_bg_color);
border: var(--lines_width) solid var(--lines_color);
}
.grid_box .text_area {
color: var(--lines_color);
}
.grid_box .text_area:focus {
height: auto;
@@ -129,7 +131,8 @@
*/
.grid_box .panel_msg {
flex-direction: column-reverse;
border: 1px solid black;
border: var(--lines_width) solid var(--lines_color);
background-color: var(--chat_conv_bg_color);
}
.grid_box .msg_thread {
width: 100%;

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

@@ -1,23 +1,30 @@
<script>
<script lang="ts">
import { layout, current_room } from './Store_chat';
import { get_room_users, leave_room } from './Request_rooms';
import { layout, current_room, settings_user } from './Store_chat';
import { get_room_users, leave_room, get_is_admin } from './Request_rooms';
import { User } from './Types_chat';
import { to_print } from './Utils_chat';
import Button from './Element_button.svelte';
export let back = "";
let users = get_room_users();
let users: User[] = get_room_users();
console.log("current_room:", $current_room);
let is_admin = false;
get_is_admin().then(response => is_admin = response);
function user_profile()
to_print("current_room:", $current_room);
function user_profile(room_user: string)
{
console.log("in user_profile");
to_print("in user_profile");
settings_user.set(room_user);
layout.set("user");
}
function user_leave_room()
{
console.log("in leave_room");
to_print("in leave_room");
leave_room();
layout.set("home");
}
@@ -33,7 +40,7 @@
<!-- room_name -->
<Button my_class="room_name deactivate">
{$current_room.name}
{$current_room.client_name}
</Button>
<!-- close -->
@@ -51,18 +58,21 @@
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 is_admin === true }
<p class="__center">you are admin in this room</p>
{#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}
{/if}
<p>room users :</p>
<div class="room_users">
@@ -73,8 +83,11 @@
<p>list of users is loading...</p>
{:then users}
{#each users as user}
<Button new_layout="user" my_class="list" on:click={user_profile}>
{user}
<Button my_class="list admin {user.isblocked ? 'blocked' : ''}" on:click={function(){user_profile(user)}}>
{user.name}
{#if user.isadmin }
<span>admin</span>
{/if}
</Button>
{/each}
{/await}

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

@@ -1,10 +1,22 @@
<script>
<script lang="ts">
import { layout } from './Store_chat';
import { layout, settings_user } from './Store_chat';
import { list_block_user } from './Request_rooms';
import { User } from './Types_chat';
import { to_print } from './Utils_chat';
import Button from './Element_button.svelte';
export let back = "";
let users: User[] = list_block_user();
async function user_profile(room_user: string)
{
to_print("in user_profile");
await settings_user.set(room_user);
layout.set("user");
}
</script>
<div class="grid_box">
@@ -31,21 +43,15 @@
<div class="__show_if_only_child">
<p class="__center">/ you have blocked no one /</p>
</div>
<!-- placeholders
<Button bind:layout new_layout="user" my_class="list blocked">
user 1
</Button>
<Button bind:layout new_layout="user" my_class="list blocked">
user 2
</Button>
<Button bind:layout new_layout="user" my_class="list blocked">
user 3
</Button>
<Button bind:layout new_layout="user" my_class="list blocked">
user 4
</Button>
------------- -->
<!-- END placeholders -->
{#await users}
<p>list of users is loading...</p>
{:then users}
{#each users as user}
<Button my_class="list blocked" on:click={function(){user_profile(user)}}>
{user.name}
</Button>
{/each}
{/await}
</div>
</div>

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

@@ -1,21 +1,60 @@
<script>
<script lang="ts">
import { layout } from './Store_chat';
import { layout, current_room, settings_user } from './Store_chat';
import { get_is_admin, make_admin, set_block_user, remove_block_user } from './Request_rooms';
import type { FetchResponse } from './Types_chat';
import { to_print } from './Utils_chat';
import Button from './Element_button.svelte';
import { push } from "svelte-spa-router";
import { invited_username } from '../store_invitation';
import Warning from './Element_warning.svelte';
export let back = "";
let mute = "mute";
let block = "block";
let is_admin = false;
get_is_admin().then(response => is_admin = response);
let response: FetchResponse;
let show_error = false;
import { push } from "svelte-spa-router";
import { invited_username } from '../store_invitation';
function game_invitation()
{
const usernamePLACEHOLDER = "hulamy";
invited_username.set(usernamePLACEHOLDER);
to_print("in game_invitation");
const username = $settings_user.name;
invited_username.set(username);
push("/game");
}
function view_profile()
{
to_print("in view_profile");
push(`/profile/users/${$settings_user.name}`);
}
async function block_user()
{
to_print("in block_user");
await set_block_user($settings_user.name);
layout.set("room");
}
async function unblock_user()
{
to_print("in unblock_user");
await remove_block_user($settings_user.name);
layout.set("room");
}
async function get_list_block_user()
{
to_print("in get_list_block_user");
await list_block_user();
}
async function make_user_admin()
{
to_print("in make_user_admin");
response = await make_admin($settings_user.name);
//show errors
if (response.status >= 300 || response.error)
show_error = response.error;
layout.set("room");
}
</script>
@@ -28,7 +67,7 @@
<!-- user -->
<Button my_class="user deactivate">
&lt;user&gt;
{$settings_user.name}
</Button>
<!-- close -->
@@ -39,29 +78,38 @@
<!-- room_name -->
{#if back === "room_set"}
<Button my_class="room_name deactivate __border_top">
&lt;room_name&gt;
{$current_room.client_name}
</Button>
{/if}
<!-- panel_user -->
<div class="panel panel_user __border_top">
{#if show_error}
<Warning content={response.message}/>
{/if}
<p class="__center">user options :</p>
<Button>
<Button on:click={view_profile}>
view profile
</Button>
<Button on_click={() => game_invitation()}>
<Button on:click={game_invitation}>
game invitation
</Button>
<Button>
{block}
</Button>
{#if $settings_user.isblocked}
<Button on:click={unblock_user}>
unblock
</Button>
{:else}
<Button on:click={block_user}>
block
</Button>
{/if}
{#if back === "room_set"}
<Button>
{#if is_admin && back === "room_set" && $current_room.type !== "direct"}
<Button on:click={make_user_admin}>
make admin
</Button>
<Button>
{mute}
<Button new_layout="mute">
mute
</Button>
{/if}

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

@@ -1,15 +1,16 @@
import { msgs, user, layout, socket, current_room } from './Store_chat';
import { Room, FetchResponse, FetchMethod } from './Types_chat';
import type { Room, FetchResponse } from './Types_chat';
import { FetchMethod, Mute, User } from './Types_chat';
import { to_print } from './Utils_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");
to_print("in get_room_messages");
let response: FetchResponse = await fetch_chat_request('messages', FetchMethod.GET);
const messages = response.messages;
if (messages === null)
return;
@@ -24,33 +25,33 @@ export async function get_room_messages()
export async function create_room(room: Room)
{
console.log("in create_room");
to_print("in create_room");
console.log("room sent to create:", room);
to_print("room sent to create:", room);
let response: FetchResponse = await fetch_chat_request('create', FetchMethod.POST, room);
console.log("room returned from create:", response.room);
to_print("room returned from create:", response.room);
return response;
}
export async function join_room(room: Room)
{
console.log("in join_room");
to_print("in join_room");
console.log("room sent to join:", room);
to_print("room sent to join:", room);
let response: FetchResponse = await fetch_chat_request('join', FetchMethod.POST, room);
console.log("room returned from join:", response.room);
to_print("room returned from join:", response.room);
return response.room;
}
export async function change_room(room: Room)
{
console.log("in change_room");
to_print("in change_room");
console.log("room sent to change:", room);
to_print("room sent to change:", room);
let response: FetchResponse = await fetch_chat_request('change', FetchMethod.POST, room);
console.log("room returned from change:", response.room);
to_print("room returned from change:", response.room);
await get_room_messages();
@@ -62,29 +63,29 @@ console.log("room returned from change:", response.room);
export async function validate_password(room: Room)
{
console.log("in validate_password");
to_print("in validate_password");
console.log("room sent to validate password:", room);
to_print("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);
to_print("room returned from validate password:", response.room);
return response;
}
export async function add_password(room: Room)
{
console.log("in add_password");
to_print("in add_password");
console.log("room sent to add password:", room);
to_print("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);
to_print("room returned from add password:", response.room);
return response;
}
export async function change_password(room: Room, old_password: string)
{
console.log("in send_password");
to_print("in send_password");
let request_body =
{
@@ -92,27 +93,27 @@ export async function change_password(room: Room, old_password: string)
old_password: old_password,
}
console.log("room sent to change password:", room);
to_print("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);
to_print("room returned from change password:", response.room);
return response;
}
export async function remove_password(room: Room)
{
console.log("in send_password");
to_print("in send_password");
console.log("room sent to remove password:", room);
to_print("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);
to_print("room returned from remove password:", response.room);
return response;
}
export async function invite_user(user_name: string)
{
console.log("in invite_user");
to_print("in invite_user");
let response: FetchResponse = await fetch_chat_request('invite', FetchMethod.POST, {username: user_name});
@@ -121,7 +122,7 @@ export async function invite_user(user_name: string)
export async function get_my_rooms()
{
console.log("in get_my_rooms");
to_print("in get_my_rooms");
let response: FetchResponse = await fetch_chat_request('myrooms', FetchMethod.GET);
@@ -132,35 +133,119 @@ export async function get_my_rooms()
export async function get_all_rooms()
{
console.log("in get_all_rooms");
to_print("in get_all_rooms");
let response: FetchResponse = await fetch_chat_request('allrooms', FetchMethod.GET);
return response.rooms;
}
export async function get_room_users()
export async function get_room_users(): Promise<User[]>
{
console.log("in get_room_users");
to_print("in get_room_users");
let response: FetchResponse = await fetch_chat_request('roomusers', FetchMethod.GET);
to_print("response from get_room_users:", response);
return response.users;
}
export async function get_all_users()
{
console.log("in get_all_users");
to_print("in get_all_users");
let response: FetchResponse = await fetch_chat_request('users', FetchMethod.GET);
return response.users;
}
export async function leave_room()
export async function leave_room(): Promise<void>
{
console.log("in leave_room");
to_print("in leave_room");
let response: FetchResponse = await fetch_chat_request('leave', FetchMethod.DELETE);
}
export async function make_admin(username): Promise<FetchResponse>
{
to_print("in is_admin");
to_print("username sent to setadmin:", username);
let response: FetchResponse = await fetch_chat_request('setadmin', FetchMethod.POST, {username: username} );
to_print("response from setadmin:", response);
return response;
}
export async function get_is_admin(): Promise<boolean>
{
to_print("in is_admin");
let response: FetchResponse = await fetch_chat_request('isadmin', FetchMethod.GET);
to_print("is_admin return:", response.condition);
return response.condition;
}
export async function set_mute(date_limit: Date, username: string, time: string): Promise<FetchResponse>
{
to_print("in set_mute");
let body =
{
mute:
{
name: username,
date: date_limit,
},
time: time,
}
to_print("setmute send body:", body);
let response: FetchResponse = await fetch_chat_request('setmute', FetchMethod.POST, body );
to_print("setmute return:", response);
return response;
}
export async function get_is_mute(username: string): Promise<Mute>
{
to_print("in get_is_mute");
let response: FetchResponse = await fetch_chat_request('ismute', FetchMethod.POST, {username: username} );
to_print("ismute return:", response);
return response.mute;
}
export async function get_unmute(username: string): Promise<void>
{
to_print("in get_unmute");
await fetch_chat_request('unmute', FetchMethod.POST, {username: username} );
}
export async function set_block_user(username: string): Promise<void>
{
to_print("in set_block_user");
await fetch_chat_request('block', FetchMethod.POST, {username: username} );
}
export async function remove_block_user(username: string): Promise<void>
{
to_print("in set_block_user");
await fetch_chat_request('unblock', FetchMethod.POST, {username: username} );
}
export async function list_block_user(username: string): Promise<string[]>
{
to_print("in list_block_user");
let response = await fetch_chat_request('listblock', FetchMethod.GET);
to_print("response.users:", response.users);
return response.users;
}

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

@@ -1,9 +1,10 @@
import { user } from './Store_chat';
import { Room, FetchResponse, FetchInit, FetchMethod } from './Types_chat';
import type { Room, FetchResponse, FetchInit, FetchMethod } from './Types_chat';
import { to_print } from './Utils_chat';
export async function fetch_chat_request(route: string, fetchMethod: FetchMethod, param?: any)
{
console.log("in fetch_chat_request");
to_print("in fetch_chat_request");
let response: FetchResponse = { status: 0 };
@@ -35,7 +36,7 @@ export async function fetch_chat_request(route: string, fetchMethod: FetchMethod
export function set_client_name_on_room(room: Room)
{
console.log("in set_client_name_on_room");
to_print("in set_client_name_on_room");
if (room.type === 'direct')
{
@@ -50,7 +51,7 @@ export function set_client_name_on_room(room: Room)
export function fill_fetch_response(response: FetchResponse, data: any)
{
console.log("in fill_fetch_response");
to_print("in fill_fetch_response");
Object.keys(data).forEach(key =>
{

16
srcs/requirements/svelte/api_front/src/pieces/chat/Socket_chat.ts
View File

@@ -1,13 +1,16 @@
import io from 'socket.io-client';
import { set_socket, set_user } from './Store_chat';
import { user, msgs } from './Store_chat';
import { user, msgs, layout, set_socket, set_user } from './Store_chat';
import { to_print } from './Utils_chat';
const address = `http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}`;
export async function init_socket()
{
to_print("in init_socket");
console.log("here");
const response = await fetch(`${address}/api/v2/user`);
const response_data = await response.json();
to_print("-- response_data:", response_data);
set_user(response_data);
@@ -19,6 +22,7 @@ export async function init_socket()
username: response_data.username,
},
});
console.log("horo");
set_socket(socket);
socket_states(socket);
@@ -29,11 +33,17 @@ function socket_events(socket)
{
socket.on('message', function(from, message)
{
console.log("received msg:", message, from);
to_print("received msg:", message, from);
if (from === user.username)
from = "me";
msgs.update(msgs => [...msgs, { name: from, message: message }]);
});
socket.on('new_password', function()
{
to_print("notification new password");
layout.set("password");
});
}
function socket_states(socket)

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

@@ -1,13 +1,12 @@
import { writable } from 'svelte/store';
import { Room } from './Types_chat';
import type { Room, Message, User } from './Types_chat';
export let msgs = writable([]);
export let msgs = writable<Message[]>();
export let my_rooms = writable<Room[]>();
export let all_rooms = writable<Room[]>();
export let current_room = writable<Room>();
export let settings_user = writable<User>();
export let layout = writable("close");
export let current_room: Room = writable({
name: "",
type: "",
protection: false,
});
export let user;
export let socket;

24
srcs/requirements/svelte/api_front/src/pieces/chat/Types_chat.ts
View File

@@ -8,13 +8,37 @@ export interface Room
allowed?: boolean;
}
export interface Mute
{
name: string;
date: Date;
}
export interface Message
{
name: string;
message: string;
}
export interface User
{
name: string;
isadmin: boolean;
isblocked: boolean;
}
export interface FetchResponse
{
status: number;
error?: boolean;
code?: string;
message?: string;
messages?: Message[];
users?: User[];
room?: Room;
rooms?: Room[];
condition?: boolean;
mute?: Mute;
}
export interface FetchInit

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

@@ -0,0 +1,4 @@
export function to_print(...args)
{
console.log(...args);
}