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

changed layout for a store variable

Browse Source
This commit is contained in:
hugogogo
2023-01-09 14:44:01 +01:00
parent 45edd2f25f
commit 94ec37b847
22 changed files with 1160 additions and 2157 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2967
srcs/requirements/svelte/api_front/public/build/bundle.js
View File

File diff suppressed because it is too large Load Diff

2
srcs/requirements/svelte/api_front/public/build/bundle.js.map
View File

File diff suppressed because one or more lines are too long

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

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

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

@@ -2,6 +2,7 @@
import Debug from './tmp_debug.svelte';
import { layout } from './Store_chat';
import ChatBox from './Chat_box_css.svelte';
import CloseLayout from './Layout_close.svelte';
@@ -22,66 +23,68 @@
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)
{
console.log("layouts:", layouts);
if (layout === "close")
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 back={layouts[0]} />
{: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:layout bind:layouts />
<Debug bind:layouts />
<style></style>

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

@@ -12,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>

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

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

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

@@ -1,9 +1,10 @@
<script lang="ts">
import { socket } from './Store_chat';
import { msgs, layout } from './Store_chat';
import { change_room } from './Rooms';
import Button from './Element_button.svelte';
import Warning from './Element_warning.svelte';
export let layout = "";
export let back = "";
let room_name: string;
@@ -38,14 +39,12 @@
response_data = await response.json();
if (response_data.message)
response_message = response_data.message;
console.log("response:", response_data, "status:", response_status, "message:", response_message);
// join socket room
socket.emit('join', room_name);
// go to room
if (response_status === 200 && response_message === "successfull room creation")
layout = "room";
{
await change_room(room_name);
}
}
</script>
@@ -53,7 +52,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>
@@ -63,7 +62,7 @@
</Button>
<!-- close -->
<Button bind:layout new_layout="close" my_class="close icon">
<Button new_layout="close" my_class="close icon">
close
</Button>

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

@@ -1,16 +1,11 @@
<script>
import { layout, msgs, user } from './Store_chat';
import { join_room, change_room, get_room_messages } from './Rooms';
import { onMount } from 'svelte';
import Button from './Element_button.svelte';
import { msgs, user } from './Store_chat';
export let layout;
let rooms = [
{room_name: 'my room'},
{room_name: 'better room'},
{room_name: 'best room'},
{room_name: 'ho room'},
];
let rooms = [];
// ask api for the rooms
const get_rooms = fetch('/api/v2/chat/myrooms')
@@ -23,26 +18,14 @@
rooms = data.rooms;
});
// get room messages
function get_room_messages()
// go to clicked room
async function go_to_room(evt)
{
console.log("in get_room_messages");
const messages = fetch('/api/v2/chat/messages')
.then(resp => resp.json())
.then(data =>
{
console.log(data.messages);
data.messages.forEach(function(item) {
if (item.name === user.username) {
item.name = "me";
}
});
//msgs.update(msgs => msgs.concat(data.messages));
msgs.update(msgs => msgs = data.messages);
});
// go to room
layout = "room";
console.log("inside go_to_room");
let room_name = {
room_name: evt.target.innerText,
}
await change_room(room_name);
}
</script>
@@ -50,17 +33,17 @@
<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>
@@ -76,7 +59,7 @@
<p>rooms are loaded...</p>
{:then}
{#each rooms as room}
<Button my_class="list" on_click={get_room_messages}>
<Button my_class="list" on_click={go_to_room}>
{room.name}
</Button>
{/each}

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

@@ -1,7 +1,8 @@
<script>
import { layout } from './Store_chat';
import Button from './Element_button.svelte';
export let layout = "";
export let back = "";
</script>
@@ -9,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>
@@ -19,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>

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

@@ -1,8 +1,9 @@
<script>
import { layout, msgs, user, socket } from './Store_chat';
import { join_room, change_room, get_room_messages } from './Rooms';
import Button from './Element_button.svelte';
import { msgs, user, socket } from './Store_chat';
export let layout = "";
export let back = "";
let rooms = [];
@@ -19,45 +20,16 @@
});
// join the room
function join_rooms(evt)
async function join_rooms(evt)
{
console.log("inside join_rooms");
console.log("inside join_room");
let room_name = {
room_name: evt.target.innerText,
}
// join room
fetch('/api/v2/chat/join',
{
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(room_name),
})
.then(resp => resp.json())
.then(data =>
{
console.log(data);
});
// join socket room
socket.emit('join', room_name);
// get messages from room
const messages = fetch('/api/v2/chat/messages')
.then(resp => resp.json())
.then(data =>
{
console.log(data.messages);
data.messages.forEach(function(item) {
if (item.name === user.username) {
item.name = "me";
}
});
msgs.update(msgs => msgs = data.messages);
});
// go to room
layout = "room";
await join_room(room_name);
await get_room_messages();
await change_room(room_name);
}
</script>
@@ -65,7 +37,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>
@@ -75,13 +47,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>

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

@@ -1,7 +1,8 @@
<script>
import { layout } from './Store_chat';
import Button from './Element_button.svelte';
export let layout = "";
export let back = "";
</script>
@@ -9,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>
@@ -19,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>

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

@@ -1,26 +1,21 @@
<script>
import { layout, socket, msgs, add_msg } from './Store_chat';
import Button from './Element_button.svelte';
import Msg from './Element_msg.svelte';
import { socket, msgs } from './Store_chat';
export let layout = "";
export let back = "";
let msg = "";
let text_area;
function add_local_msg(message)
{
msgs.update(msgs => [...msgs, { name: "me", message: message }]);
}
function send_msg()
{
msg = msg.trim();
if (msg.length > 0) {
socket.emit('message', msg);
add_local_msg(msg);
add_msg("me", msg);
console.log(msgs);
}
msg = "";
@@ -41,17 +36,17 @@
<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">
<Button new_layout="room_set" my_class="room_name transparent">
&lt;room_name&gt;
</Button>
<!-- close -->
<Button bind:layout new_layout="close" my_class="close icon">
<Button new_layout="close" my_class="close icon">
close
</Button>

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

@@ -1,7 +1,8 @@
<script>
import { layout } from './Store_chat';
import Button from './Element_button.svelte';
export let layout = "";
export let back = "";
</script>
@@ -9,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>
@@ -19,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>
@@ -35,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 -->

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

@@ -1,7 +1,8 @@
<script>
import { layout } from './Store_chat';
import Button from './Element_button.svelte';
export let layout = "";
export let back = "";
</script>
@@ -9,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>
@@ -19,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>

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

@@ -1,7 +1,8 @@
<script>
import { layout } from './Store_chat';
import Button from './Element_button.svelte';
export let layout = "";
export let back = "";
let mute = "mute";
@@ -13,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>
@@ -23,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>

44
srcs/requirements/svelte/api_front/src/pieces/chat/Rooms.ts Normal file
View File

@@ -0,0 +1,44 @@
import { msgs, layout } from './Store_chat';
export async function get_room_messages()
{
console.log("in get_room_messages");
const response = await fetch('/api/v2/chat/messages');
const messages = await response.json();
console.log(messages);
messages.forEach(function(item) {
if (item.name === user.username) {
item.name = "me";
}
});
msgs.set(messages);
}
export async function join_room(room_name)
{
console.log("in change_room");
console.log(room_name);
const response = await fetch('/api/v2/chat/join', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(room_name),
});
console.log(await response.json().message);
}
export async function change_room(room_name)
{
console.log("in change_room");
console.log(room_name);
const response = await fetch('/api/v2/chat/change', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(room_name),
});
console.log(await response.json().message);
layout.set("room");
}

15
srcs/requirements/svelte/api_front/src/pieces/chat/Socket_init.ts
View File

@@ -1,7 +1,6 @@
import io from 'socket.io-client';
import { set_socket, set_user } from './Store_chat';
import { socket_events } from './Socket_events';
import { connection_states } from './Socket_states';
const address = `http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}`;
@@ -22,7 +21,19 @@ export async function init_socket()
});
set_socket(socket);
connection_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"); });
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/Socket_states.ts
View File

@@ -1,16 +0,0 @@
export function connection_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"); });
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"); });
}

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

@@ -1,6 +1,7 @@
import { writable } from 'svelte/store';
export let msgs = writable([]);
export let layout = writable("close");
export let user;
export let socket;
@@ -8,3 +9,7 @@ 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 }]);
}