close and back is ok

srcs/requirements/svelte/api_front/public/build/bundle.js

@@ -1228,7 +1228,7 @@ var app = (function () {
 
     /* node_modules/svelte-spa-router/Router.svelte generated by Svelte v3.53.1 */
 
-    const { Error: Error_1, Object: Object_1, console: console_1$a } = globals;
+    const { Error: Error_1, Object: Object_1, console: console_1$b } = globals;
 
     // (267:0) {:else}
     function create_else_block$6(ctx) {
@@ -2008,7 +2008,7 @@ var app = (function () {
     	const writable_props = ['routes', 'prefix', 'restoreScrollState'];
 
     	Object_1.keys($$props).forEach(key => {
-    		if (!~writable_props.indexOf(key) && key.slice(0, 2) !== '$$' && key !== 'slot') console_1$a.warn(`<Router> was created with unknown prop '${key}'`);
+    		if (!~writable_props.indexOf(key) && key.slice(0, 2) !== '$$' && key !== 'slot') console_1$b.warn(`<Router> was created with unknown prop '${key}'`);
     	});
 
     	function routeEvent_handler(event) {
@@ -2292,7 +2292,7 @@ var app = (function () {
 
     /* src/pieces/Header.svelte generated by Svelte v3.53.1 */
 
-    const { console: console_1$9 } = globals;
+    const { console: console_1$a } = globals;
     const file$v = "src/pieces/Header.svelte";
 
     // (27:39) 
@@ -2551,7 +2551,7 @@ var app = (function () {
     	const writable_props = [];
 
     	Object.keys($$props).forEach(key => {
-    		if (!~writable_props.indexOf(key) && key.slice(0, 2) !== '$$' && key !== 'slot') console_1$9.warn(`<Header> was created with unknown prop '${key}'`);
+    		if (!~writable_props.indexOf(key) && key.slice(0, 2) !== '$$' && key !== 'slot') console_1$a.warn(`<Header> was created with unknown prop '${key}'`);
     	});
 
     	const click_handler = () => push('/');
@@ -3722,7 +3722,7 @@ var app = (function () {
     /* src/pieces/chat/Layout_close.svelte generated by Svelte v3.53.1 */
     const file$q = "src/pieces/chat/Layout_close.svelte";
 
-    // (9:1) <Button bind:layout new_layout="home" my_class="chat">
+    // (7:1) <Button bind:layout new_layout={back} my_class="chat">
     function create_default_slot$c(ctx) {
     	let t;
 
@@ -3742,7 +3742,7 @@ var app = (function () {
     		block,
     		id: create_default_slot$c.name,
     		type: "slot",
-    		source: "(9:1) <Button bind:layout new_layout=\\\"home\\\" my_class=\\\"chat\\\">",
+    		source: "(7:1) <Button bind:layout new_layout={back} my_class=\\\"chat\\\">",
     		ctx
     	});
 
@@ -3756,11 +3756,11 @@ var app = (function () {
     	let current;
 
     	function button_layout_binding(value) {
-    		/*button_layout_binding*/ ctx[1](value);
+    		/*button_layout_binding*/ ctx[2](value);
     	}
 
     	let button_props = {
-    		new_layout: "home",
+    		new_layout: /*back*/ ctx[1],
     		my_class: "chat",
     		$$slots: { default: [create_default_slot$c] },
     		$$scope: { ctx }
@@ -3778,7 +3778,7 @@ var app = (function () {
     			div = element("div");
     			create_component(button.$$.fragment);
     			attr_dev(div, "class", "grid_box svelte-fc4a40");
-    			add_location(div, file$q, 7, 0, 89);
+    			add_location(div, file$q, 5, 0, 121);
     		},
     		l: function claim(nodes) {
     			throw new Error("options.hydrate only works if the component was compiled with the `hydratable: true` option");
@@ -3790,8 +3790,9 @@ var app = (function () {
     		},
     		p: function update(ctx, [dirty]) {
     			const button_changes = {};
+    			if (dirty & /*back*/ 2) button_changes.new_layout = /*back*/ ctx[1];
 
-    			if (dirty & /*$$scope*/ 4) {
+    			if (dirty & /*$$scope*/ 8) {
     				button_changes.$$scope = { dirty, ctx };
     			}
 
@@ -3832,15 +3833,9 @@ var app = (function () {
     function instance$t($$self, $$props, $$invalidate) {
     	let { $$slots: slots = {}, $$scope } = $$props;
     	validate_slots('Layout_close', slots, []);
-    	let { layout } = $$props;
+    	let { layout = "" } = $$props;
-
+    	let { back = "" } = $$props;
-    	$$self.$$.on_mount.push(function () {
+    	const writable_props = ['layout', 'back'];
-    		if (layout === undefined && !('layout' in $$props || $$self.$$.bound[$$self.$$.props['layout']])) {
-    			console.warn("<Layout_close> was created without expected prop 'layout'");
-    		}
-    	});
-
-    	const writable_props = ['layout'];
 
     	Object.keys($$props).forEach(key => {
     		if (!~writable_props.indexOf(key) && key.slice(0, 2) !== '$$' && key !== 'slot') console.warn(`<Layout_close> was created with unknown prop '${key}'`);
@@ -3853,25 +3848,27 @@ var app = (function () {
 
     	$$self.$$set = $$props => {
     		if ('layout' in $$props) $$invalidate(0, layout = $$props.layout);
+    		if ('back' in $$props) $$invalidate(1, back = $$props.back);
     	};
 
-    	$$self.$capture_state = () => ({ Button: Element_button, layout });
+    	$$self.$capture_state = () => ({ Button: Element_button, layout, back });
 
     	$$self.$inject_state = $$props => {
     		if ('layout' in $$props) $$invalidate(0, layout = $$props.layout);
+    		if ('back' in $$props) $$invalidate(1, back = $$props.back);
     	};
 
     	if ($$props && "$$inject" in $$props) {
     		$$self.$inject_state($$props.$$inject);
     	}
 
-    	return [layout, button_layout_binding];
+    	return [layout, back, button_layout_binding];
     }
 
     class Layout_close extends SvelteComponentDev {
     	constructor(options) {
     		super(options);
-    		init$2(this, options, instance$t, create_fragment$t, safe_not_equal, { layout: 0 });
+    		init$2(this, options, instance$t, create_fragment$t, safe_not_equal, { layout: 0, back: 1 });
 
     		dispatch_dev("SvelteRegisterComponent", {
     			component: this,
@@ -3888,19 +3885,27 @@ var app = (function () {
     	set layout(value) {
     		throw new Error("<Layout_close>: Props cannot be set directly on the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
     	}
+
+    	get back() {
+    		throw new Error("<Layout_close>: Props cannot be read directly from the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
+    	}
+
+    	set back(value) {
+    		throw new Error("<Layout_close>: Props cannot be set directly on the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
+    	}
     }
 
-    let msgs$1 = writable([]);
+    let msgs = writable([]);
 
-    let user$1;
+    let user;
     let socket$1;
 
-    function set_user(new_user)     { user$1 = new_user; }
+    function set_user(new_user)     { user = new_user; }
     function set_socket(new_socket) { socket$1 = new_socket; }
 
     /* src/pieces/chat/Layout_home.svelte generated by Svelte v3.53.1 */
 
-    const { console: console_1$8 } = globals;
+    const { console: console_1$9 } = globals;
     const file$p = "src/pieces/chat/Layout_home.svelte";
 
     function get_each_context$5(ctx, list, i) {
@@ -4485,12 +4490,12 @@ var app = (function () {
     			console.log(data.messages);
 
     			data.messages.forEach(function (item) {
-    				if (item.name === user$1.username) {
+    				if (item.name === user.username) {
     					item.name = "me";
     				}
     			});
 
-    			msgs$1.update(msgs => msgs.concat(data.messages));
+    			msgs.update(msgs => msgs.concat(data.messages));
     		});
 
     		$$invalidate(0, layout = "room");
@@ -4498,14 +4503,14 @@ var app = (function () {
 
     	$$self.$$.on_mount.push(function () {
     		if (layout === undefined && !('layout' in $$props || $$self.$$.bound[$$self.$$.props['layout']])) {
-    			console_1$8.warn("<Layout_home> was created without expected prop 'layout'");
+    			console_1$9.warn("<Layout_home> was created without expected prop 'layout'");
     		}
     	});
 
     	const writable_props = ['layout'];
 
     	Object.keys($$props).forEach(key => {
-    		if (!~writable_props.indexOf(key) && key.slice(0, 2) !== '$$' && key !== 'slot') console_1$8.warn(`<Layout_home> was created with unknown prop '${key}'`);
+    		if (!~writable_props.indexOf(key) && key.slice(0, 2) !== '$$' && key !== 'slot') console_1$9.warn(`<Layout_home> was created with unknown prop '${key}'`);
     	});
 
     	function button0_layout_binding(value) {
@@ -4530,8 +4535,8 @@ var app = (function () {
     	$$self.$capture_state = () => ({
     		onMount,
     		Button: Element_button,
-    		msgs: msgs$1,
+    		msgs,
-    		user: user$1,
+    		user,
     		layout,
     		rooms,
     		get_rooms,
@@ -5248,8 +5253,8 @@ var app = (function () {
 
     function instance$q($$self, $$props, $$invalidate) {
     	let $msgs;
-    	validate_store(msgs$1, 'msgs');
+    	validate_store(msgs, 'msgs');
-    	component_subscribe($$self, msgs$1, $$value => $$invalidate(3, $msgs = $$value));
+    	component_subscribe($$self, msgs, $$value => $$invalidate(3, $msgs = $$value));
     	let { $$slots: slots = {}, $$scope } = $$props;
     	validate_slots('Layout_room', slots, []);
     	let { layout = "" } = $$props;
@@ -5258,7 +5263,7 @@ var app = (function () {
     	let text_area;
 
     	function add_local_msg(message) {
-    		msgs$1.update(msgs => [...msgs, { name: "me", message }]);
+    		msgs.update(msgs => [...msgs, { name: "me", message }]);
     	}
 
     	function send_msg() {
@@ -5322,7 +5327,7 @@ var app = (function () {
     		Button: Element_button,
     		Msg: Element_msg,
     		socket: socket$1,
-    		msgs: msgs$1,
+    		msgs,
     		layout,
     		back,
     		msg,
@@ -7329,7 +7334,7 @@ var app = (function () {
 
     /* src/pieces/chat/Layout_create.svelte generated by Svelte v3.53.1 */
 
-    const { console: console_1$7 } = globals;
+    const { console: console_1$8 } = globals;
     const file$h = "src/pieces/chat/Layout_create.svelte";
 
     // (42:1) <Button bind:layout new_layout={back} my_class="back icon" my_title="go back {back}">
@@ -7946,7 +7951,7 @@ var app = (function () {
     	const writable_props = ['layout', 'back'];
 
     	Object.keys($$props).forEach(key => {
-    		if (!~writable_props.indexOf(key) && key.slice(0, 2) !== '$$' && key !== 'slot') console_1$7.warn(`<Layout_create> was created with unknown prop '${key}'`);
+    		if (!~writable_props.indexOf(key) && key.slice(0, 2) !== '$$' && key !== 'slot') console_1$8.warn(`<Layout_create> was created with unknown prop '${key}'`);
     	});
 
     	const $$binding_groups = [[]];
@@ -10122,7 +10127,9 @@ var app = (function () {
 
     /* src/pieces/chat/Chat_layouts.svelte generated by Svelte v3.53.1 */
 
-    // (65:29) 
+    const { console: console_1$7 } = globals;
+
+    // (67:29) 
     function create_if_block_9$1(ctx) {
     	let userlayout;
     	let updating_layout;
@@ -10179,14 +10186,14 @@ var app = (function () {
     		block,
     		id: create_if_block_9$1.name,
     		type: "if",
-    		source: "(65:29) ",
+    		source: "(67:29) ",
     		ctx
     	});
 
     	return block;
     }
 
-    // (62:29) 
+    // (64:29) 
     function create_if_block_8$1(ctx) {
     	let mutelayout;
     	let updating_layout;
@@ -10243,14 +10250,14 @@ var app = (function () {
     		block,
     		id: create_if_block_8$1.name,
     		type: "if",
-    		source: "(62:29) ",
+    		source: "(64:29) ",
     		ctx
     	});
 
     	return block;
     }
 
-    // (59:31) 
+    // (61:31) 
     function create_if_block_7$1(ctx) {
     	let createlayout;
     	let updating_layout;
@@ -10311,14 +10318,14 @@ var app = (function () {
     		block,
     		id: create_if_block_7$1.name,
     		type: "if",
-    		source: "(59:31) ",
+    		source: "(61:31) ",
     		ctx
     	});
 
     	return block;
     }
 
-    // (56:34) 
+    // (58:34) 
     function create_if_block_6$1(ctx) {
     	let protectedlayout;
     	let updating_layout;
@@ -10379,14 +10386,14 @@ var app = (function () {
     		block,
     		id: create_if_block_6$1.name,
     		type: "if",
-    		source: "(56:34) ",
+    		source: "(58:34) ",
     		ctx
     	});
 
     	return block;
     }
 
-    // (53:33) 
+    // (55:33) 
     function create_if_block_5$1(ctx) {
     	let roomsetlayout;
     	let updating_layout;
@@ -10447,14 +10454,14 @@ var app = (function () {
     		block,
     		id: create_if_block_5$1.name,
     		type: "if",
-    		source: "(53:33) ",
+    		source: "(55:33) ",
     		ctx
     	});
 
     	return block;
     }
 
-    // (50:33) 
+    // (52:33) 
     function create_if_block_4$1(ctx) {
     	let settingslayout;
     	let updating_layout;
@@ -10515,14 +10522,14 @@ var app = (function () {
     		block,
     		id: create_if_block_4$1.name,
     		type: "if",
-    		source: "(50:33) ",
+    		source: "(52:33) ",
     		ctx
     	});
 
     	return block;
     }
 
-    // (47:28) 
+    // (49:28) 
     function create_if_block_3$1(ctx) {
     	let newlayout;
     	let updating_layout;
@@ -10579,14 +10586,14 @@ var app = (function () {
     		block,
     		id: create_if_block_3$1.name,
     		type: "if",
-    		source: "(47:28) ",
+    		source: "(49:28) ",
     		ctx
     	});
 
     	return block;
     }
 
-    // (44:29) 
+    // (46:29) 
     function create_if_block_2$1(ctx) {
     	let roomlayout;
     	let updating_layout;
@@ -10643,14 +10650,14 @@ var app = (function () {
     		block,
     		id: create_if_block_2$1.name,
     		type: "if",
-    		source: "(44:29) ",
+    		source: "(46:29) ",
     		ctx
     	});
 
     	return block;
     }
 
-    // (41:30) 
+    // (43:30) 
     function create_if_block_1$3(ctx) {
     	let closelayout;
     	let updating_layout;
@@ -10660,7 +10667,7 @@ var app = (function () {
     		/*closelayout_layout_binding*/ ctx[4](value);
     	}
 
-    	let closelayout_props = {};
+    	let closelayout_props = { back: /*layouts*/ ctx[2][0] };
 
     	if (/*layout*/ ctx[1] !== void 0) {
     		closelayout_props.layout = /*layout*/ ctx[1];
@@ -10679,6 +10686,7 @@ var app = (function () {
     		},
     		p: function update(ctx, dirty) {
     			const closelayout_changes = {};
+    			if (dirty & /*layouts*/ 4) closelayout_changes.back = /*layouts*/ ctx[2][0];
 
     			if (!updating_layout && dirty & /*layout*/ 2) {
     				updating_layout = true;
@@ -10706,14 +10714,14 @@ var app = (function () {
     		block,
     		id: create_if_block_1$3.name,
     		type: "if",
-    		source: "(41:30) ",
+    		source: "(43:30) ",
     		ctx
     	});
 
     	return block;
     }
 
-    // (38:1) {#if layout === "home"}
+    // (40:1) {#if layout === "home"}
     function create_if_block$9(ctx) {
     	let homelayout;
     	let updating_layout;
@@ -10769,14 +10777,14 @@ var app = (function () {
     		block,
     		id: create_if_block$9.name,
     		type: "if",
-    		source: "(38:1) {#if layout === \\\"home\\\"}",
+    		source: "(40:1) {#if layout === \\\"home\\\"}",
     		ctx
     	});
 
     	return block;
     }
 
-    // (36:0) <ChatBox layout={layout} color={color}>
+    // (38:0) <ChatBox layout={layout} color={color}>
     function create_default_slot$2(ctx) {
     	let current_block_type_index;
     	let if_block;
@@ -10887,7 +10895,7 @@ var app = (function () {
     		block,
     		id: create_default_slot$2.name,
     		type: "slot",
-    		source: "(36:0) <ChatBox layout={layout} color={color}>",
+    		source: "(38:0) <ChatBox layout={layout} color={color}>",
     		ctx
     	});
 
@@ -11016,21 +11024,23 @@ var app = (function () {
     	/* hold previous version of layout, to go back
     */
     	function set_layouts(layout) {
+    		console.log("layouts:", layouts);
     		if (layout === "close") return;
     		if (layout === layouts[0]) return;
     		if (layout === layouts[1]) $$invalidate(2, layouts = [layout, "home"]); else $$invalidate(2, layouts = [layout, layouts[0]]);
+    		console.log("- layouts:", layouts);
     	}
 
     	$$self.$$.on_mount.push(function () {
     		if (color === undefined && !('color' in $$props || $$self.$$.bound[$$self.$$.props['color']])) {
-    			console.warn("<Chat_layouts> was created without expected prop 'color'");
+    			console_1$7.warn("<Chat_layouts> was created without expected prop 'color'");
     		}
     	});
 
     	const writable_props = ['color'];
 
     	Object.keys($$props).forEach(key => {
-    		if (!~writable_props.indexOf(key) && key.slice(0, 2) !== '$$' && key !== 'slot') console.warn(`<Chat_layouts> was created with unknown prop '${key}'`);
+    		if (!~writable_props.indexOf(key) && key.slice(0, 2) !== '$$' && key !== 'slot') console_1$7.warn(`<Chat_layouts> was created with unknown prop '${key}'`);
     	});
 
     	function homelayout_layout_binding(value) {
@@ -14646,7 +14656,7 @@ var app = (function () {
     		console.log("received msg:", message, from);
     		if (from === user.username)
     			from = "me";
-    		msgs.update(msgs => [...msgs, { content: message, name: from }]);
+    		msgs.update(msgs => [...msgs, { name: from, message: message }]);
     	});
     }
 

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

@@ -29,6 +29,7 @@
 	*/
 	function set_layouts(layout)
 	{
+		console.log("layouts:", layouts);
 		if (layout === "close")
 			return;
 		if (layout === layouts[0])
@@ -37,6 +38,7 @@
 			layouts = [layout, "home"];
 		else
 			layouts = [layout, layouts[0]];
+		console.log("- layouts:", layouts);
 	}
 	$: set_layouts(layout);
 
@@ -48,7 +50,7 @@
 		<HomeLayout bind:layout />
 
 	{:else if layout === "close"}
-		<CloseLayout bind:layout />
+		<CloseLayout bind:layout back={layouts[0]} />
 
 	{:else if layout === "room"}
 		<RoomLayout bind:layout back={layouts[1]} />

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

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

srcs/requirements/svelte/api_front/src/pieces/chat/Socket_events.ts

@@ -1,3 +1,5 @@
+import { user, msgs } from './Store_chat';
+
 export function socket_events(socket)
 {
 	socket.on('message', function(from, message)
@@ -5,6 +7,6 @@ export function socket_events(socket)
 		console.log("received msg:", message, from);
 		if (from === user.username)
 			from = "me";
-		msgs.update(msgs => [...msgs, { content: message, name: from }]);
+		msgs.update(msgs => [...msgs, { name: from, message: message }]);
 	});
 }