chat svelte now have a global variable socket

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

@@ -3,14 +3,12 @@
 
 	import Layouts from './Chat_layouts.svelte';
 	export let color = "transparent";
+	import { onMount } from 'svelte';
 
 	/* web sockets with socket.io
 	*/
-	import { onMount } from 'svelte';
-	import io from 'socket.io-client';
-	const socket = io(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}`, {
-		path: '/chat'
-	});
+	import { socket } from './Chat_socket.svelte';
+
 	onMount(async => {
 		socket.on('connect', function(){
 			console.log("socket.io connected");

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

@@ -67,7 +67,7 @@
 	}
 
 
-	/* for btn list
+	/* .list
 	*/
 	.list:not(:hover) {
 		background-color: rgb(240, 240, 240);
@@ -77,14 +77,14 @@
 	}
 
 
-	/* for transparent btn
+	/* .transparent
 	*/
 	.transparent:not(:hover) {
 		background-color: transparent;
 	}
 
 
-	/* for deactivated btn
+	/* .deactivated
 	*/
 	.deactivate {
 		background-color: transparent;
@@ -92,7 +92,40 @@
 	}
 
 
-	/* for icon
+	/* .border
+	*/
+	.border {
+		border: 1px solid rgb(150, 150, 150);
+	}
+
+
+	/* .light
+	*/
+	.light {
+		background-color: rgb(233, 233, 233);
+	}
+	.light.border {
+		border: 1px solid rgb(204, 204, 204);
+	}
+	.light:hover {
+		background-color: rgb(220, 220, 220);
+	}
+	.light.border:hover {
+		border-color: rgb(200, 200, 200);
+	}
+	.light:active {
+		background-color: rgb(210, 210, 210);
+	}
+
+
+	/* .thin
+	*/
+	.thin p {
+		padding: 5px;
+	}
+
+
+	/* .icon
 	*/
 	.icon p {
 		display: none;
@@ -107,7 +140,7 @@
 	}
 
 
-	/* for 3 dots btn
+	/* .dots
 	*/
 	.dots::after {
 		content: '\2807';
@@ -123,7 +156,7 @@
 	}
 
 
-	/* for close btn
+	/* .close
 	*/
 	.close::before {
 		content: "";
@@ -136,7 +169,7 @@
 	}
 
 
-	/* for back btn
+	/* .back
 	*/
 	.back::before {
 		content: "";
@@ -151,7 +184,7 @@
 	}
 
 
-	/* for blocked user
+	/* .blocked
 			https://www.fileformat.info/info/unicode/category/So/list.htm
 			U+1F512 	LOCK 				🔒
 			U+1F513		OPEN LOCK 	🔓

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

@@ -0,0 +1,17 @@
+<script context="module">
+
+	import io from 'socket.io-client';
+
+	const address = `http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}`;
+
+	export const socket = io(address, {
+		path: '/chat'
+	});
+
+	const userPomise = fetch(`${address}/api/v2/user`).then((x) => x.json());
+	export let user
+	userPomise.then((data) => {
+		user = data;
+	});
+
+</script>

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

@@ -5,6 +5,20 @@
 	export let layout = "";
 	export let back = "";
 
+	function handleSubmit(evt)
+	{
+		let formIsValid = evt.target.checkValidity();
+		console.log("----- formIsValid:");
+		console.log(formIsValid);
+		if (formIsValid)
+		{
+			fetch('/api/v2/chat/create', {
+				method: 'POST',
+				body: evt.target,
+			})
+		}
+	}
+
 </script>
 
 <div class="grid_box">
@@ -25,8 +39,17 @@
 	</Button>
 
 	<!-- panel_create -->
-	<div class="panel panel_create">
-		<form>
+	<div class="panel panel_create __border_top">
+		<!--
+		<form action="/api/v2/chat/create" method="post" onsubmit="return submit();">
+		<Button on_click={submit} my_class="border light thin">&#x2BA1</Button>
+		<form bind:this={form} onsubmit="return my_submit();">
+		<form action="/api/v2/chat/create" method="post" on:submit|stopPropagation>
+		<form action="/api/v2/chat/create" method="post">
+		<form action="/api/v2/chat/create" method="post" on:submit|preventDefault>
+		<form bind:this={form} on:submit|preventDefault={handleSubmit}>
+		-->
+		<form on:submit|preventDefault={handleSubmit}>
 			<!-- name: -->
 			<label for="chat_name"><p>new room name :</p></label>
 			<input  id="chat_name" required>
@@ -43,14 +66,11 @@
 			<div class="__to_show">
 				<label for="chat_pswd"><p>choose a password :</p></label>
 				<input  id="chat_pswd" type="password" placeholder="minimum 8 characters" minlength="8">
-				<p>confirm password :</p>
-				<input type="password">
 			</div>
 			<input type="submit" value="&#x2BA1">
 		</form>
 	</div>
 
-
 </div>
 
 <style>
@@ -71,19 +91,19 @@
 
 	/* radio elements style check
 	*/
-	form input[type=radio] {
+	.panel input[type=radio] {
 		display: none;
 	}
-	form label._radio {
+	.panel label._radio {
 		margin: 0px 20px 0px auto;
 		padding-right: 10px;
 		cursor: pointer;
 	}
-	form label._radio p {
+	.panel label._radio p {
 		margin-top: 0px;
 		margin-bottom: 0px;
 	}
-	form label._radio::after {
+	.panel label._radio::after {
 		content: "";
 		position: absolute;
 		top: calc(50% - 6px);
@@ -95,7 +115,7 @@
 		box-sizing: border-box;
 		cursor: pointer;
 	}
-	form input[type=radio]:checked
+	.panel input[type=radio]:checked
 	+ label._radio::after {
 		background-color: rgb(200, 200, 200);
 	}
@@ -103,7 +123,7 @@
 
 	/* submit
 	*/
-	form input[type=submit] {
+	.panel input[type=submit] {
 		margin-top: 20px;
 	}
 

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

@@ -39,7 +39,7 @@
 				placeholder
 			</Button>
 			<Button bind:layout new_layout="room" my_class="list">
-				join room
+				room
 			</Button>
 			<Button bind:layout new_layout="room" my_class="list">
 				one room

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

@@ -3,7 +3,13 @@
 
 	import Button from './Chat_button.svelte';
 	import Msg from './Chat_msg.svelte';
-	import io from 'socket.io-client';
+	import { socket, user } from './Chat_socket.svelte';
+
+	socket.on('message', (data) => {
+		console.log("received msg :");
+		console.log(data);
+		add_msg("other", data);
+	});
 
 	export let layout = "";
 	export let back = "";
@@ -19,10 +25,13 @@
 
 	function send_msg()
 	{
-		msg = msg.trim();
+		console.log("user:");
+		console.log(user);
+		console.log(user.username);
 
+		msg = msg.trim();
 		if (msg.length > 0) {
-			//socket.emit('sendmsg', msg);
+			socket.emit('message', msg);
 			add_msg("me", msg);
 		}