wip chat test bind child component

srcs/requirements/svelte/api_front/src/chat/Chat2.css

@@ -1,12 +0,0 @@
-#chat_box.close {
-	gap: 0px;
-	padding: 0px;
-	width: auto;
-	height: auto;
-	grid:
-		' chat ' auto
-		/ auto ;
-}
-#chat_box.close .chat_item#chat_chat {
-	display: flex;
-}

srcs/requirements/svelte/api_front/src/chat/Chat2.svelte

@@ -1,42 +0,0 @@
-
-<script>
-</script>
-
-<div class="close" id="chat_box">
-	<button class="chat_item chat_chat btn" id="chat_chat"><p>chat</p></button>
-</div>
-
-<style src="./Chat2.css">
-
-	#chat_box * {
-		display: flex;
-		flex-direction: column;
-		position: relative;
-		box-sizing: border-box;
-		padding: 0px;
-		margin: auto;
-	}
-	#chat_box .chat_item {
-		display: none;
-		width: 100%;
-		height: 100%;
-	}
-	.chat_item#chat_chat {
-		grid-area: chat;
-	}
-	#chat_box {
-		display: grid;
-		position: fixed;
-		bottom: 20px;
-		right: 20px;
-
-		gap: 5px;
-		padding: 5px;
-		width: 300px;
-		height: 400px;
-
-		border: 1px solid black;
-	}
-
-</style>
-

srcs/requirements/svelte/api_front/src/pages/profile/ProfileDisplay.svelte

@@ -3,7 +3,7 @@
   import { onMount } from 'svelte';
 	import GenerateUserDisplay from '../../pieces/GenerateUserDisplay.svelte';
 
-  import Chat from "../../chat/Chat2.svelte";
+	import Chat from '../../pieces/chat/Chat.svelte';
 
   let user;
 

srcs/requirements/svelte/api_front/src/pieces/chat/Chat.html

@@ -1,8 +1,3 @@
-<script lang="ts">
-	function chat_layout(layout_class) {
-		document.getElementById('chat_box').className = layout_class;
-	};
-</script>
 
 <div class="close" id="chat_box">
 	<!--

srcs/requirements/svelte/api_front/src/pieces/chat/Chat.svelte

@@ -0,0 +1,35 @@
+
+<script>
+	import HomeLayout from './Layout_home.svelte';
+
+	let active_layout = "home";
+
+	function update_layout(new_layout) {
+		active_layout = new_layout;
+	}
+
+/*
+*/
+
+</script>
+
+<div class={active_layout} id="chat_box">
+	{#if active_layout === "home"}
+		<HomeLayout bind:layout={active_layout} />
+	{:else}
+		<!-- https://stackoverflow.com/questions/58262380/how-to-pass-parameters-to-onclick-in-svelte -->
+		<button on:click={function(){update_layout('home')}}>chat</button>
+	{/if}
+</div>
+
+<style>
+	#chat_box {
+		position: fixed;
+		bottom: 20px;
+		right: 20px;
+		height: 50px;
+		width: 50px;
+		border: 1px solid blue;
+	}
+</style>
+

srcs/requirements/svelte/api_front/src/pieces/chat/Layout_home.svelte

@@ -0,0 +1,17 @@
+
+<script>
+	export let layout;
+	function update_layout(new_layout) {
+		layout = new_layout;
+	}
+</script>
+
+<button on:click={function(){update_layout('close')}}>home</button>
+
+<style>
+	#chat_box.home {
+		height: 500px;
+		width: 500px;
+	}
+</style>
+

srcs/requirements/svelte/api_front/src/styles/chat/chat.css

@@ -0,0 +1,79 @@
+
+@import 'chat__global.css';
+
+@import 'layout_close.css';
+@import 'layout_home.css';
+@import 'layout_room.css';
+@import 'layout_new.css';
+@import 'layout_settings.css';
+@import 'layout_room_set.css';
+@import 'layout_protected.css';
+@import 'layout_create.css';
+@import 'layout_user.css';
+@import 'layout_mute.css';
+
+@import 'chat_panels.css';
+@import 'chat_buttons.css';
+@import 'chat_back.css';
+@import 'chat_close.css';
+@import 'chat_write.css';
+@import 'chat_msg.css';
+@import 'chat_blocked.css';
+@import 'chat_form.css';
+
+
+/*
+	 GRID
+ */
+
+#chat_box * {
+	display: flex;
+	flex-direction: column;
+	position: relative;
+	box-sizing: border-box;
+	padding: 0px;
+	margin: auto;
+}
+#chat_box .chat_item {
+	display: none;
+	/*
+	border: 1px solid black;
+	*/
+	width: 100%;
+	height: 100%;
+}
+
+.chat_item#chat_chat            { grid-area: chat;}
+.chat_item#chat_close           { grid-area: close;}
+.chat_item#chat_new             { grid-area: new;}
+.chat_item#chat_settings        { grid-area: settings;}
+.chat_item#chat_room_name       { grid-area: room_name;}
+.chat_item#chat_send            { grid-area: send;}
+.chat_item#chat_create          { grid-area: create;}
+.chat_item#chat_user            { grid-area: user;}
+.chat_item#chat_back            { grid-area: back;}
+.chat_item#chat_panel_home      { grid-area: panel_home;}
+.chat_item#chat_panel_new       { grid-area: panel_new;}
+.chat_item#chat_panel_msg       { grid-area: panel_msg;}
+.chat_item#chat_panel_write     { grid-area: panel_write;}
+.chat_item#chat_panel_settings  { grid-area: panel_settings;}
+.chat_item#chat_panel_room_set  { grid-area: panel_room_set;}
+.chat_item#chat_panel_protected { grid-area: panel_protected;}
+.chat_item#chat_panel_create    { grid-area: panel_create;}
+.chat_item#chat_panel_user      { grid-area: panel_user;}
+.chat_item#chat_panel_mute      { grid-area: panel_mute;}
+
+#chat_box {
+	display: grid;
+	position: fixed;
+	bottom: 20px;
+	right: 20px;
+
+	gap: 5px;
+	padding: 5px;
+	width: 300px;
+	height: 400px;
+
+	border: 1px solid black;
+}
+