svelte architecture separation of global css and layouts and websockets init
This commit is contained in:
simplonco
@@ -1,19 +1,8 @@
|
||||
|
||||
<script lang="ts">
|
||||
|
||||
import Debug from './tmp_debug.svelte';
|
||||
|
||||
import Button from './Chat_button.svelte';
|
||||
|
||||
import HomeLayout from './Layout_home.svelte';
|
||||
import RoomLayout from './Layout_room.svelte';
|
||||
import NewLayout from './Layout_new.svelte';
|
||||
import SettingsLayout from './Layout_settings.svelte';
|
||||
import RoomsetLayout from './Layout_room_set.svelte';
|
||||
import ProtectedLayout from './Layout_protected.svelte';
|
||||
import CreateLayout from './Layout_create.svelte';
|
||||
import MuteLayout from './Layout_mute.svelte';
|
||||
import UserLayout from './Layout_user.svelte';
|
||||
import Layouts from './Chat_layouts.svelte';
|
||||
export let color = "transparent";
|
||||
|
||||
/* web sockets with socket.io
|
||||
*/
|
||||
@@ -61,207 +50,9 @@
|
||||
});
|
||||
});
|
||||
|
||||
/* global variables
|
||||
*/
|
||||
export let color = "transparent";
|
||||
let room = "";
|
||||
let admin = false;
|
||||
let layout = "close";
|
||||
let layouts = ["home", "home"];
|
||||
|
||||
/* hold previous version of layout, to go back
|
||||
*/
|
||||
function set_layouts(layout)
|
||||
{
|
||||
if (layout === "close")
|
||||
return;
|
||||
if (layout === layouts[0])
|
||||
return;
|
||||
if (layout === layouts[1])
|
||||
layouts = [layout, "home"];
|
||||
else
|
||||
layouts = [layout, layouts[0]];
|
||||
}
|
||||
$: set_layouts(layout);
|
||||
|
||||
</script>
|
||||
|
||||
<div class="{layout} chat_box" style="background-color: {color};">
|
||||
<Layouts color={color} />
|
||||
|
||||
{#if layout === "home"}
|
||||
<HomeLayout bind:layout />
|
||||
|
||||
{:else if layout === "room"}
|
||||
<RoomLayout bind:layout back={layouts[1]} />
|
||||
|
||||
{:else if layout === "new"}
|
||||
<NewLayout bind:layout back={layouts[1]} />
|
||||
|
||||
{:else if layout === "settings"}
|
||||
<SettingsLayout bind:layout back={layouts[1]} />
|
||||
|
||||
{:else if layout === "room_set"}
|
||||
<RoomsetLayout bind:layout back={layouts[1]} />
|
||||
|
||||
{:else if layout === "protected"}
|
||||
<ProtectedLayout bind:layout back={layouts[1]} />
|
||||
|
||||
{:else if layout === "create"}
|
||||
<CreateLayout bind:layout back={layouts[1]} />
|
||||
|
||||
{:else if layout === "mute"}
|
||||
<MuteLayout bind:layout back={layouts[1]} />
|
||||
|
||||
{:else if layout === "user"}
|
||||
<UserLayout bind:layout back={layouts[1]} />
|
||||
|
||||
{:else}
|
||||
<div class="grid_box">
|
||||
<Button bind:layout new_layout={layouts[0]} my_class="chat">
|
||||
chat
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/if}
|
||||
|
||||
</div>
|
||||
|
||||
<!-- TMP DEBUG -->
|
||||
<Debug bind:layout />
|
||||
|
||||
<style>
|
||||
|
||||
/* chat_box and default style
|
||||
*/
|
||||
.chat_box {
|
||||
display: flex;
|
||||
position: fixed;
|
||||
bottom: 20px;
|
||||
right: 20px;
|
||||
padding: 5px;
|
||||
width: 300px;
|
||||
height: 400px;
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
|
||||
/* style if chat_box is closed
|
||||
*/
|
||||
.chat {grid-area: chat;}
|
||||
.chat_box.close .grid_box {
|
||||
gap: 0px;
|
||||
grid:
|
||||
' chat ' auto
|
||||
/ auto ;
|
||||
}
|
||||
.chat_box.close {
|
||||
padding: 0px;
|
||||
width: auto;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
/* * * * * * * * * * * * * * * * * * * * *
|
||||
GLOBAL STYLES
|
||||
*/
|
||||
|
||||
|
||||
/* Hide scrollbar
|
||||
*/
|
||||
.chat_box :global(*) {
|
||||
-ms-overflow-style: none; /* IE and Edge */
|
||||
scrollbar-width: none; /* Firefox */
|
||||
}
|
||||
.chat_box :global(*::-webkit-scrollbar) {
|
||||
display: none; /* Chrome, Safari and Opera */
|
||||
}
|
||||
|
||||
|
||||
/* for grid_box and all childrens
|
||||
*/
|
||||
.chat_box :global(.grid_box) {
|
||||
display: grid;
|
||||
margin: 0px;
|
||||
gap: 5px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.chat_box :global(.grid_box *) {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
|
||||
/* all p
|
||||
*/
|
||||
.chat_box :global(.grid_box p) {
|
||||
padding: 10px;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
|
||||
/* all panel
|
||||
*/
|
||||
.chat_box :global(.panel) {
|
||||
overflow-y: scroll;
|
||||
}
|
||||
.chat_box :global(.panel > *) {
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
/* * * * * * * * * * * * * * * * * * * * *
|
||||
GLOBAL UTILITIES
|
||||
*/
|
||||
|
||||
|
||||
/* __show_if_only_child
|
||||
*/
|
||||
.chat_box :global(.__show_if_only_child) {
|
||||
display: none;
|
||||
}
|
||||
.chat_box :global(.__show_if_only_child:only-child) {
|
||||
display: flex;
|
||||
color: rgb(100, 100, 100);
|
||||
}
|
||||
|
||||
|
||||
/* __center
|
||||
*/
|
||||
.chat_box :global(.__center) {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
|
||||
/* __border_top
|
||||
*/
|
||||
.chat_box :global(.__border_top) {
|
||||
border-top: 1px solid black;
|
||||
}
|
||||
|
||||
|
||||
/* __check_change_next
|
||||
*/
|
||||
.chat_box :global(.__check_change_next:checked ~ .__to_show) {
|
||||
display: flex;
|
||||
}
|
||||
.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);
|
||||
}
|
||||
.chat_box :global(.__to_show) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
<style></style>
|
||||
|
||||
|
||||
@@ -0,0 +1,132 @@
|
||||
|
||||
<script lang="ts">
|
||||
|
||||
export let color;
|
||||
export let layout;
|
||||
|
||||
</script>
|
||||
|
||||
<div class="{layout} chat_box" style="background-color: {color};">
|
||||
<slot></slot>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
|
||||
/* chat_box and default style
|
||||
*/
|
||||
.chat_box {
|
||||
display: flex;
|
||||
position: fixed;
|
||||
bottom: 20px;
|
||||
right: 20px;
|
||||
padding: 0px;
|
||||
width: auto;
|
||||
height: auto;
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
/* * * * * * * * * * * * * * * * * * * * *
|
||||
GLOBAL STYLES
|
||||
*/
|
||||
|
||||
|
||||
/* Hide scrollbar
|
||||
*/
|
||||
.chat_box :global(*) {
|
||||
-ms-overflow-style: none; /* IE and Edge */
|
||||
scrollbar-width: none; /* Firefox */
|
||||
}
|
||||
.chat_box :global(*::-webkit-scrollbar) {
|
||||
display: none; /* Chrome, Safari and Opera */
|
||||
}
|
||||
|
||||
|
||||
/* for grid_box and all childrens
|
||||
*/
|
||||
.chat_box :global(.grid_box) {
|
||||
display: grid;
|
||||
margin: 5px;
|
||||
gap: 5px;
|
||||
width: 300px;
|
||||
height: 400px;
|
||||
}
|
||||
.chat_box :global(.grid_box *) {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
|
||||
/* all p
|
||||
*/
|
||||
.chat_box :global(.grid_box p) {
|
||||
padding: 10px;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
|
||||
/* all panel
|
||||
*/
|
||||
.chat_box :global(.panel) {
|
||||
overflow-y: scroll;
|
||||
}
|
||||
.chat_box :global(.panel > *) {
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
/* * * * * * * * * * * * * * * * * * * * *
|
||||
GLOBAL UTILITIES
|
||||
*/
|
||||
|
||||
|
||||
/* __show_if_only_child
|
||||
*/
|
||||
.chat_box :global(.__show_if_only_child) {
|
||||
display: none;
|
||||
}
|
||||
.chat_box :global(.__show_if_only_child:only-child) {
|
||||
display: flex;
|
||||
color: rgb(100, 100, 100);
|
||||
}
|
||||
|
||||
|
||||
/* __center
|
||||
*/
|
||||
.chat_box :global(.__center) {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
|
||||
/* __border_top
|
||||
*/
|
||||
.chat_box :global(.__border_top) {
|
||||
border-top: 1px solid black;
|
||||
}
|
||||
|
||||
|
||||
/* __check_change_next
|
||||
*/
|
||||
.chat_box :global(.__check_change_next:checked ~ .__to_show) {
|
||||
display: flex;
|
||||
}
|
||||
.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);
|
||||
}
|
||||
.chat_box :global(.__to_show) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
|
||||
@@ -3,8 +3,9 @@
|
||||
|
||||
import Debug from './tmp_debug.svelte';
|
||||
|
||||
import Button from './Chat_button.svelte';
|
||||
import ChatBox from './Chat_box_css.svelte';
|
||||
|
||||
import CloseLayout from './Layout_close.svelte';
|
||||
import HomeLayout from './Layout_home.svelte';
|
||||
import RoomLayout from './Layout_room.svelte';
|
||||
import NewLayout from './Layout_new.svelte';
|
||||
@@ -15,55 +16,11 @@
|
||||
import MuteLayout from './Layout_mute.svelte';
|
||||
import UserLayout from './Layout_user.svelte';
|
||||
|
||||
/* web sockets with socket.io
|
||||
*/
|
||||
import { onMount } from 'svelte';
|
||||
import io from 'socket.io-client';
|
||||
const socket = io('http://transcendance:8080', {
|
||||
path: '/chat/socket.io'
|
||||
});
|
||||
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");
|
||||
});
|
||||
});
|
||||
import Button from './Chat_button.svelte';
|
||||
|
||||
/* global variables
|
||||
*/
|
||||
export let color = "transparent";
|
||||
export let color;
|
||||
let room = "";
|
||||
let admin = false;
|
||||
let layout = "close";
|
||||
@@ -86,11 +43,14 @@
|
||||
|
||||
</script>
|
||||
|
||||
<div class="{layout} chat_box" style="background-color: {color};">
|
||||
<ChatBox layout={layout} color={color}>
|
||||
|
||||
{#if layout === "home"}
|
||||
<HomeLayout bind:layout />
|
||||
|
||||
{:else if layout === "close"}
|
||||
<CloseLayout bind:layout />
|
||||
|
||||
{:else if layout === "room"}
|
||||
<RoomLayout bind:layout back={layouts[1]} />
|
||||
|
||||
@@ -115,153 +75,12 @@
|
||||
{:else if layout === "user"}
|
||||
<UserLayout bind:layout back={layouts[1]} />
|
||||
|
||||
{:else}
|
||||
<div class="grid_box">
|
||||
<Button bind:layout new_layout={layouts[0]} my_class="chat">
|
||||
chat
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/if}
|
||||
|
||||
</div>
|
||||
</ChatBox>
|
||||
|
||||
<!-- TMP DEBUG -->
|
||||
<Debug bind:layout />
|
||||
<Debug bind:layout bind:layouts />
|
||||
|
||||
<style>
|
||||
|
||||
/* chat_box and default style
|
||||
*/
|
||||
.chat_box {
|
||||
display: flex;
|
||||
position: fixed;
|
||||
bottom: 20px;
|
||||
right: 20px;
|
||||
padding: 5px;
|
||||
width: 300px;
|
||||
height: 400px;
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
|
||||
/* style if chat_box is closed
|
||||
*/
|
||||
.chat {grid-area: chat;}
|
||||
.chat_box.close .grid_box {
|
||||
gap: 0px;
|
||||
grid:
|
||||
' chat ' auto
|
||||
/ auto ;
|
||||
}
|
||||
.chat_box.close {
|
||||
padding: 0px;
|
||||
width: auto;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
/* * * * * * * * * * * * * * * * * * * * *
|
||||
GLOBAL STYLES
|
||||
*/
|
||||
|
||||
|
||||
/* Hide scrollbar
|
||||
*/
|
||||
.chat_box :global(*) {
|
||||
-ms-overflow-style: none; /* IE and Edge */
|
||||
scrollbar-width: none; /* Firefox */
|
||||
}
|
||||
.chat_box :global(*::-webkit-scrollbar) {
|
||||
display: none; /* Chrome, Safari and Opera */
|
||||
}
|
||||
|
||||
|
||||
/* for grid_box and all childrens
|
||||
*/
|
||||
.chat_box :global(.grid_box) {
|
||||
display: grid;
|
||||
margin: 0px;
|
||||
gap: 5px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.chat_box :global(.grid_box *) {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
|
||||
/* all p
|
||||
*/
|
||||
.chat_box :global(.grid_box p) {
|
||||
padding: 10px;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
|
||||
/* all panel
|
||||
*/
|
||||
.chat_box :global(.panel) {
|
||||
overflow-y: scroll;
|
||||
}
|
||||
.chat_box :global(.panel > *) {
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
/* * * * * * * * * * * * * * * * * * * * *
|
||||
GLOBAL UTILITIES
|
||||
*/
|
||||
|
||||
|
||||
/* __show_if_only_child
|
||||
*/
|
||||
.chat_box :global(.__show_if_only_child) {
|
||||
display: none;
|
||||
}
|
||||
.chat_box :global(.__show_if_only_child:only-child) {
|
||||
display: flex;
|
||||
color: rgb(100, 100, 100);
|
||||
}
|
||||
|
||||
|
||||
/* __center
|
||||
*/
|
||||
.chat_box :global(.__center) {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
|
||||
/* __border_top
|
||||
*/
|
||||
.chat_box :global(.__border_top) {
|
||||
border-top: 1px solid black;
|
||||
}
|
||||
|
||||
|
||||
/* __check_change_next
|
||||
*/
|
||||
.chat_box :global(.__check_change_next:checked ~ .__to_show) {
|
||||
display: flex;
|
||||
}
|
||||
.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);
|
||||
}
|
||||
.chat_box :global(.__to_show) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
<style></style>
|
||||
|
||||
|
||||
@@ -0,0 +1,137 @@
|
||||
|
||||
<script>
|
||||
|
||||
import Button from './Chat_button.svelte';
|
||||
export let layout;
|
||||
|
||||
</script>
|
||||
|
||||
<div class="grid_box">
|
||||
<Button bind:layout new_layout="home" my_class="chat">
|
||||
chat
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
|
||||
/* layout "close"
|
||||
*/
|
||||
.grid_box :global(.chat) {grid-area: chat;}
|
||||
.grid_box {
|
||||
gap: 0px;
|
||||
grid:
|
||||
' chat ' auto
|
||||
/ auto ;
|
||||
}
|
||||
:global(.chat_box.close) .grid_box {
|
||||
margin: 0px;
|
||||
width: auto;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
/* * * * * * * * * * * * * * * * * * * * *
|
||||
GLOBAL STYLES
|
||||
*/
|
||||
|
||||
|
||||
/* Hide scrollbar
|
||||
*/
|
||||
.chat_box :global(*) {
|
||||
-ms-overflow-style: none; /* IE and Edge */
|
||||
scrollbar-width: none; /* Firefox */
|
||||
}
|
||||
.chat_box :global(*::-webkit-scrollbar) {
|
||||
display: none; /* Chrome, Safari and Opera */
|
||||
}
|
||||
|
||||
|
||||
/* for grid_box and all childrens
|
||||
*/
|
||||
.chat_box :global(.grid_box) {
|
||||
display: grid;
|
||||
margin: 0px;
|
||||
gap: 5px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.chat_box :global(.grid_box *) {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
|
||||
/* all p
|
||||
*/
|
||||
.chat_box :global(.grid_box p) {
|
||||
padding: 10px;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
|
||||
/* all panel
|
||||
*/
|
||||
.chat_box :global(.panel) {
|
||||
overflow-y: scroll;
|
||||
}
|
||||
.chat_box :global(.panel > *) {
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
/* * * * * * * * * * * * * * * * * * * * *
|
||||
GLOBAL UTILITIES
|
||||
*/
|
||||
|
||||
|
||||
/* __show_if_only_child
|
||||
*/
|
||||
.chat_box :global(.__show_if_only_child) {
|
||||
display: none;
|
||||
}
|
||||
.chat_box :global(.__show_if_only_child:only-child) {
|
||||
display: flex;
|
||||
color: rgb(100, 100, 100);
|
||||
}
|
||||
|
||||
|
||||
/* __center
|
||||
*/
|
||||
.chat_box :global(.__center) {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
|
||||
/* __border_top
|
||||
*/
|
||||
.chat_box :global(.__border_top) {
|
||||
border-top: 1px solid black;
|
||||
}
|
||||
|
||||
|
||||
/* __check_change_next
|
||||
*/
|
||||
.chat_box :global(.__check_change_next:checked ~ .__to_show) {
|
||||
display: flex;
|
||||
}
|
||||
.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);
|
||||
}
|
||||
.chat_box :global(.__to_show) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
|
||||
|
||||
@@ -1,5 +1,8 @@
|
||||
<script>
|
||||
export let layout;
|
||||
|
||||
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;">
|
||||
|
||||
Reference in New Issue
Block a user