42/42_INT_14_transcendence
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

msgs are in a store

Browse Source
This commit is contained in:
simplonco
2023-01-05 09:21:06 +01:00
parent a4a2b4bf76
commit e16dc56314
5 changed files with 154 additions and 144 deletions
Download Patch File Download Diff File Expand all files Collapse all files

190
srcs/requirements/svelte/api_front/public/build/bundle.js
View File

@@ -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$b } = globals;
const { Error: Error_1, Object: Object_1, console: console_1$a } = 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$b.warn(`<Router> was created with unknown prop '${key}'`);
if (!~writable_props.indexOf(key) && key.slice(0, 2) !== '$$' && key !== 'slot') console_1$a.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$a } = globals;
const { console: console_1$9 } = globals;
const file$u = "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$a.warn(`<Header> was created with unknown prop '${key}'`);
if (!~writable_props.indexOf(key) && key.slice(0, 2) !== '$$' && key !== 'slot') console_1$9.warn(`<Header> was created with unknown prop '${key}'`);
});
const click_handler = () => push('/');
@@ -7868,9 +7868,9 @@ var app = (function () {
});
});
/* src/pieces/chat/Layout_room.svelte generated by Svelte v3.53.1 */
let msgs = writable([]);
const { console: console_1$9 } = globals;
/* src/pieces/chat/Layout_room.svelte generated by Svelte v3.53.1 */
const file$m = "src/pieces/chat/Layout_room.svelte";
function get_each_context$4(ctx, list, i) {
@@ -7879,7 +7879,7 @@ var app = (function () {
return child_ctx;
}
// (54:1) <Button bind:layout new_layout={back} my_class="back icon" my_title="go back {back}">
// (50:1) <Button bind:layout new_layout={back} my_class="back icon" my_title="go back {back}">
function create_default_slot_4$2(ctx) {
let t;
@@ -7899,14 +7899,14 @@ var app = (function () {
block,
id: create_default_slot_4$2.name,
type: "slot",
source: "(54:1) <Button bind:layout new_layout={back} my_class=\\\"back icon\\\" my_title=\\\"go back {back}\\\">",
source: "(50:1) <Button bind:layout new_layout={back} my_class=\\\"back icon\\\" my_title=\\\"go back {back}\\\">",
ctx
});
return block;
}
// (59:1) <Button bind:layout new_layout="room_set" my_class="room_name transparent">
// (55:1) <Button bind:layout new_layout="room_set" my_class="room_name transparent">
function create_default_slot_3$4(ctx) {
let t;
@@ -7926,14 +7926,14 @@ var app = (function () {
block,
id: create_default_slot_3$4.name,
type: "slot",
source: "(59:1) <Button bind:layout new_layout=\\\"room_set\\\" my_class=\\\"room_name transparent\\\">",
source: "(55:1) <Button bind:layout new_layout=\\\"room_set\\\" my_class=\\\"room_name transparent\\\">",
ctx
});
return block;
}
// (64:1) <Button bind:layout new_layout="close" my_class="close icon">
// (60:1) <Button bind:layout new_layout="close" my_class="close icon">
function create_default_slot_2$8(ctx) {
let t;
@@ -7953,14 +7953,14 @@ var app = (function () {
block,
id: create_default_slot_2$8.name,
type: "slot",
source: "(64:1) <Button bind:layout new_layout=\\\"close\\\" my_class=\\\"close icon\\\">",
source: "(60:1) <Button bind:layout new_layout=\\\"close\\\" my_class=\\\"close icon\\\">",
ctx
});
return block;
}
// (72:4) <Msg name={msg.name}>
// (68:4) <Msg name={msg.name}>
function create_default_slot_1$8(ctx) {
let html_tag;
let raw_value = /*msg*/ ctx[4].content + "";
@@ -7977,7 +7977,7 @@ var app = (function () {
insert_dev(target, html_anchor, anchor);
},
p: function update(ctx, dirty) {
if (dirty & /*msgs*/ 8 && raw_value !== (raw_value = /*msg*/ ctx[4].content + "")) html_tag.p(raw_value);
if (dirty & /*$msgs*/ 8 && raw_value !== (raw_value = /*msg*/ ctx[4].content + "")) html_tag.p(raw_value);
},
d: function destroy(detaching) {
if (detaching) detach_dev(html_anchor);
@@ -7989,14 +7989,14 @@ var app = (function () {
block,
id: create_default_slot_1$8.name,
type: "slot",
source: "(72:4) <Msg name={msg.name}>",
source: "(68:4) <Msg name={msg.name}>",
ctx
});
return block;
}
// (71:3) {#each msgs as msg}
// (67:3) {#each $msgs as msg}
function create_each_block$4(ctx) {
let msg_1;
let current;
@@ -8020,9 +8020,9 @@ var app = (function () {
},
p: function update(ctx, dirty) {
const msg_1_changes = {};
if (dirty & /*msgs*/ 8) msg_1_changes.name = /*msg*/ ctx[4].name;
if (dirty & /*$msgs*/ 8) msg_1_changes.name = /*msg*/ ctx[4].name;
if (dirty & /*$$scope, msgs*/ 32776) {
if (dirty & /*$$scope, $msgs*/ 32776) {
msg_1_changes.$$scope = { dirty, ctx };
}
@@ -8046,14 +8046,14 @@ var app = (function () {
block,
id: create_each_block$4.name,
type: "each",
source: "(71:3) {#each msgs as msg}",
source: "(67:3) {#each $msgs as msg}",
ctx
});
return block;
}
// (89:1) <Button my_class="send" on_click={send_msg}>
// (85:1) <Button my_class="send" on_click={send_msg}>
function create_default_slot$a(ctx) {
let t;
@@ -8073,7 +8073,7 @@ var app = (function () {
block,
id: create_default_slot$a.name,
type: "slot",
source: "(89:1) <Button my_class=\\\"send\\\" on_click={send_msg}>",
source: "(85:1) <Button my_class=\\\"send\\\" on_click={send_msg}>",
ctx
});
@@ -8156,7 +8156,7 @@ var app = (function () {
button2 = new Chat_button({ props: button2_props, $$inline: true });
binding_callbacks.push(() => bind(button2, 'layout', button2_layout_binding));
let each_value = /*msgs*/ ctx[3];
let each_value = /*$msgs*/ ctx[3];
validate_each_argument(each_value);
let each_blocks = [];
@@ -8200,17 +8200,17 @@ var app = (function () {
t4 = space();
create_component(button3.$$.fragment);
attr_dev(div0, "class", "msg_thread svelte-1quyp80");
add_location(div0, file$m, 69, 2, 1224);
add_location(div0, file$m, 65, 2, 1218);
attr_dev(div1, "class", "panel panel_msg svelte-1quyp80");
add_location(div1, file$m, 68, 1, 1192);
add_location(div1, file$m, 64, 1, 1186);
attr_dev(div2, "class", "text_area svelte-1quyp80");
attr_dev(div2, "contenteditable", "true");
if (/*msg*/ ctx[4] === void 0) add_render_callback(() => /*div2_input_handler*/ ctx[10].call(div2));
add_location(div2, file$m, 78, 2, 1397);
add_location(div2, file$m, 74, 2, 1392);
attr_dev(div3, "class", "panel_write svelte-1quyp80");
add_location(div3, file$m, 77, 1, 1369);
add_location(div3, file$m, 73, 1, 1364);
attr_dev(div4, "class", "grid_box svelte-1quyp80");
add_location(div4, file$m, 50, 0, 804);
add_location(div4, file$m, 46, 0, 798);
},
l: function claim(nodes) {
throw new Error("options.hydrate only works if the component was compiled with the `hydratable: true` option");
@@ -8295,8 +8295,8 @@ var app = (function () {
button2.$set(button2_changes);
if (dirty & /*msgs*/ 8) {
each_value = /*msgs*/ ctx[3];
if (dirty & /*$msgs*/ 8) {
each_value = /*$msgs*/ ctx[3];
validate_each_argument(each_value);
let i;
@@ -8386,24 +8386,22 @@ var app = (function () {
}
function instance$p($$self, $$props, $$invalidate) {
let $msgs;
validate_store(msgs, 'msgs');
component_subscribe($$self, msgs, $$value => $$invalidate(3, $msgs = $$value));
let { $$slots: slots = {}, $$scope } = $$props;
validate_slots('Layout_room', slots, []);
socket$1.on('message', (name, message) => {
console.log(name);
console.log(message);
add_msg(name, message);
});
let { layout = "" } = $$props;
let { back = "" } = $$props;
let msg = "";
let text_area;
let msgs = [];
//let msgs = [];
function add_msg(from, message) {
if (from === user.username) from = "me";
$$invalidate(3, msgs = [...msgs, { content: message, name: from }]);
//msgs = [...msgs, { content: message, name: from }];
msgs.update(msgs => [...msgs, { content: message, name: from }]);
}
function send_msg() {
@@ -8428,7 +8426,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$9.warn(`<Layout_room> was created with unknown prop '${key}'`);
if (!~writable_props.indexOf(key) && key.slice(0, 2) !== '$$' && key !== 'slot') console.warn(`<Layout_room> was created with unknown prop '${key}'`);
});
function button0_layout_binding(value) {
@@ -8468,14 +8466,15 @@ var app = (function () {
Msg: Chat_msg,
socket: socket$1,
user,
msgs,
layout,
back,
msg,
text_area,
msgs,
add_msg,
send_msg,
send_msg_if
send_msg_if,
$msgs
});
$$self.$inject_state = $$props => {
@@ -8483,7 +8482,6 @@ var app = (function () {
if ('back' in $$props) $$invalidate(1, back = $$props.back);
if ('msg' in $$props) $$invalidate(4, msg = $$props.msg);
if ('text_area' in $$props) $$invalidate(2, text_area = $$props.text_area);
if ('msgs' in $$props) $$invalidate(3, msgs = $$props.msgs);
};
if ($$props && "$$inject" in $$props) {
@@ -8494,7 +8492,7 @@ var app = (function () {
layout,
back,
text_area,
msgs,
$msgs,
msg,
send_msg,
send_msg_if,
@@ -13991,58 +13989,62 @@ var app = (function () {
validate_slots('Chat', slots, []);
let { color = "transparent" } = $$props;
onMount(async () => {
await socket$1;
socket$1.on('connect', function () {
console.log("socket.io connected");
});
socket$1.on('disconnect', function () {
console.log("socket.io disconnected");
});
socket$1.on('connect_error', function () {
console.log("socket.io connect_error");
});
socket$1.on('connect_timeout', function () {
console.log("socket.io connect_timeout");
});
socket$1.on('error', function () {
console.log("socket.io error");
});
socket$1.on('reconnect', function () {
console.log("socket.io reconnect");
});
socket$1.on('reconnect_attempt', function () {
console.log("socket.io reconnect_attempt");
});
socket$1.on('reconnecting', function () {
console.log("socket.io reconnecting");
});
socket$1.on('reconnect_error', function () {
console.log("socket.io reconnect_error");
});
socket$1.on('reconnect_failed', function () {
console.log("socket.io reconnect_failed");
});
socket$1.on('ping', function () {
console.log("socket.io ping");
});
socket$1.on('pong', function () {
console.log("socket.io pong");
});
// pbm: sometimes socket is still undefined here
socket$1.on('connect', function () {
console.log("socket.io connected");
});
socket$1.on('disconnect', function () {
console.log("socket.io disconnected");
});
socket$1.on('connect_error', function () {
console.log("socket.io connect_error");
});
socket$1.on('connect_timeout', function () {
console.log("socket.io connect_timeout");
});
socket$1.on('error', function () {
console.log("socket.io error");
});
socket$1.on('reconnect', function () {
console.log("socket.io reconnect");
});
socket$1.on('reconnect_attempt', function () {
console.log("socket.io reconnect_attempt");
});
socket$1.on('reconnecting', function () {
console.log("socket.io reconnecting");
});
socket$1.on('reconnect_error', function () {
console.log("socket.io reconnect_error");
});
socket$1.on('reconnect_failed', function () {
console.log("socket.io reconnect_failed");
});
socket$1.on('ping', function () {
console.log("socket.io ping");
});
socket$1.on('pong', function () {
console.log("socket.io pong");
});
socket$1.on('message', (from, message) => {
if (from === user.username) from = "me";
//msgs = [...msgs, { content: message, name: from }];
msgs.update(msgs => [...msgs, { content: message, name: from }]);
}); //add_msg(name, message);
const writable_props = ['color'];
Object.keys($$props).forEach(key => {
@@ -14053,7 +14055,7 @@ var app = (function () {
if ('color' in $$props) $$invalidate(0, color = $$props.color);
};
$$self.$capture_state = () => ({ Layouts: Chat_layouts, color, onMount, socket: socket$1 });
$$self.$capture_state = () => ({ Layouts: Chat_layouts, color, socket: socket$1, user, msgs });
$$self.$inject_state = $$props => {
if ('color' in $$props) $$invalidate(0, color = $$props.color);

2
srcs/requirements/svelte/api_front/public/build/bundle.js.map
View File

File diff suppressed because one or more lines are too long

87
srcs/requirements/svelte/api_front/src/pieces/chat/Chat.svelte
View File

@@ -3,50 +3,57 @@
import Layouts from './Chat_layouts.svelte';
export let color = "transparent";
import { onMount } from 'svelte';
/* web sockets with socket.io
*/
import { socket } from './Chat_socket.svelte';
import { socket, user } from './Chat_socket.svelte';
import { msgs } from './Store_msg.js';
onMount(async() => {
await socket;
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");
});
// pbm: sometimes socket is still undefined here
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");
});
socket.on('message', (from, message) => {
if (from === user.username)
from = "me";
//msgs = [...msgs, { content: message, name: from }];
msgs.update(msgs => [...msgs, { content: message, name: from }]);
//add_msg(name, message);
});
</script>

14
srcs/requirements/svelte/api_front/src/pieces/chat/Layout_room.svelte
View File

@@ -4,25 +4,21 @@
import Button from './Chat_button.svelte';
import Msg from './Chat_msg.svelte';
import { socket, user } from './Chat_socket.svelte';
socket.on('message', (name, message) => {
console.log(name)
console.log(message)
add_msg(name, message);
});
import { msgs } from './Store_msg.js';
export let layout = "";
export let back = "";
let msg = "";
let text_area;
let msgs = [];
//let msgs = [];
function add_msg(from, message)
{
if (from === user.username)
from = "me";
msgs = [...msgs, { content: message, name: from }];
//msgs = [...msgs, { content: message, name: from }];
msgs.update(msgs => [...msgs, { content: message, name: from }]);
}
function send_msg()
@@ -68,7 +64,7 @@
<!-- msg -->
<div class="panel panel_msg">
<div class="msg_thread">
{#each msgs as msg}
{#each $msgs as msg}
<Msg name={msg.name}>{@html msg.content}</Msg>
{/each}
</div>

5
srcs/requirements/svelte/api_front/src/pieces/chat/Store_msg.js Normal file
View File

@@ -0,0 +1,5 @@
import { writable } from 'svelte/store';
export let msgs = writable([]);