wip divide chat.svelte into pieces
This commit is contained in:
simplonco
@@ -1,6 +1,8 @@
|
||||
|
||||
<script lang="ts">
|
||||
|
||||
import Debug from './tmp_debug.svelte';
|
||||
|
||||
import Button from './Chat_button.svelte';
|
||||
|
||||
import HomeLayout from './Layout_home.svelte';
|
||||
@@ -17,12 +19,45 @@
|
||||
*/
|
||||
import { onMount } from 'svelte';
|
||||
import io from 'socket.io-client';
|
||||
const socket = io('http://transcendance:8080/chat', {
|
||||
path: '/chat/socket.io'
|
||||
const socket = io('http://transcendance:8080', {
|
||||
path: '/chat'
|
||||
});
|
||||
onMount(async => {
|
||||
socket.on('connect', () => {
|
||||
console.log("client connection");
|
||||
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");
|
||||
});
|
||||
});
|
||||
|
||||
@@ -89,31 +124,10 @@
|
||||
|
||||
{/if}
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<!-- TEMP for test -->
|
||||
<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>
|
||||
<!-- END TEMP for test -->
|
||||
<!-- TMP DEBUG -->
|
||||
<Debug bind:layout />
|
||||
|
||||
<style>
|
||||
|
||||
|
||||
@@ -0,0 +1,267 @@
|
||||
|
||||
<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';
|
||||
|
||||
/* 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");
|
||||
});
|
||||
});
|
||||
|
||||
/* 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};">
|
||||
|
||||
{#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>
|
||||
|
||||
@@ -0,0 +1,24 @@
|
||||
<script>
|
||||
export let layout;
|
||||
</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>
|
||||
Reference in New Issue
Block a user