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

chat msg display inline for newlines

Browse Source
This commit is contained in:
simplonco
2022-12-27 18:04:28 +01:00
parent ed28b051e2
commit afcac5fc3c
5 changed files with 300 additions and 112 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -28,4 +28,4 @@ header.svelte-7t4byu.svelte-7t4byu{overflow-y:hidden}.grid-container.svelte-7t4b
/ auto 1fr auto }form.svelte-yo0any input[type=checkbox].svelte-yo0any.svelte-yo0any{display:none}form.svelte-yo0any label._checkbox.svelte-yo0any.svelte-yo0any{margin:0px auto 0px 10px;padding-left:10px;cursor:pointer}form.svelte-yo0any label._checkbox.svelte-yo0any.svelte-yo0any::after{content:"";position:absolute;top:calc(50% - 6px);left:0px;width:12px;height:12px;border:2px solid rgb(150, 150, 150);box-sizing:border-box;cursor:pointer}form.svelte-yo0any input[type=checkbox].svelte-yo0any:checked+label._checkbox.svelte-yo0any::after{background-color:rgb(200, 200, 200)}form.svelte-yo0any label._select.svelte-yo0any.svelte-yo0any{flex-direction:row}form.svelte-yo0any label._select p.svelte-yo0any.svelte-yo0any{margin:0px}form.svelte-yo0any select.svelte-yo0any.svelte-yo0any{margin:auto auto auto 10px;background-color:rgb(220, 220, 220);border:none;padding:5px;cursor:pointer}form.svelte-yo0any select.svelte-yo0any.svelte-yo0any:hover{background-color:rgb(200, 200, 200)}form.svelte-yo0any input[type=submit].svelte-yo0any.svelte-yo0any{margin-top:20px}.grid_box.svelte-1fj8iha .back {grid-area:back}.grid_box.svelte-1fj8iha .user {grid-area:user}.grid_box.svelte-1fj8iha .close {grid-area:close}.grid_box.svelte-1fj8iha .room_name {grid-area:room_name}.grid_box.svelte-1fj8iha .panel_user{grid-area:panel_user}.grid_box.svelte-1fj8iha{grid:' back user close ' auto
' room_name room_name room_name ' auto
' panel_user panel_user panel_user ' 1fr
/ auto 1fr auto }.panel_user.svelte-1fj8iha{margin-top:-5px}.chat_msg.svelte-jmr7oa.svelte-jmr7oa{white-space:pre-wrap;margin:5px auto;padding:5px;border-radius:5px}.msg_thread .chat_msg.svelte-jmr7oa.svelte-jmr7oa{margin-left:0px;background-color:rgb(210, 210, 210);max-width:80%}.chat_msg.svelte-jmr7oa p.svelte-jmr7oa{padding:0px}.chat_msg.svelte-jmr7oa p.name.svelte-jmr7oa{margin:0px;font-size:12px;color:rgb(100, 100, 100)}.chat_msg.svelte-jmr7oa p.msg.svelte-jmr7oa{margin:5px 0px}.chat_msg.me.svelte-jmr7oa.svelte-jmr7oa{margin-right:0px;margin-left:auto;background-color:rgb(210, 110, 10)}.chat_msg.me.svelte-jmr7oa p.name.svelte-jmr7oa{display:none}.chat_msg.SERVER.svelte-jmr7oa.svelte-jmr7oa{margin-left:auto;background-color:transparent}.chat_msg.SERVER.svelte-jmr7oa p.name.svelte-jmr7oa{display:none}.chat_msg.SERVER.svelte-jmr7oa p.msg.svelte-jmr7oa{margin:0px auto;font-size:12px;color:rgb(100, 100, 100)}
/ auto 1fr auto }.panel_user.svelte-1fj8iha{margin-top:-5px}.chat_msg.svelte-14xxpbz.svelte-14xxpbz{margin:5px auto;padding:5px;border-radius:5px}.chat_msg.svelte-14xxpbz.svelte-14xxpbz{margin-left:0px;background-color:rgb(210, 210, 210);max-width:80%}.chat_msg.svelte-14xxpbz p.svelte-14xxpbz{padding:0px}.chat_msg.svelte-14xxpbz p.name.svelte-14xxpbz{margin:0px;font-size:12px;color:rgb(100, 100, 100)}.chat_msg.svelte-14xxpbz p.msg.svelte-14xxpbz{margin:5px 0px}.chat_msg.svelte-14xxpbz p.msg.svelte-14xxpbz *{display:inline}.chat_msg.me.svelte-14xxpbz.svelte-14xxpbz{margin-right:0px;margin-left:auto;background-color:rgb(210, 110, 10)}.chat_msg.me.svelte-14xxpbz p.name.svelte-14xxpbz{display:none}.chat_msg.SERVER.svelte-14xxpbz.svelte-14xxpbz{margin-left:auto;background-color:transparent}.chat_msg.SERVER.svelte-14xxpbz p.name.svelte-14xxpbz{display:none}.chat_msg.SERVER.svelte-14xxpbz p.msg.svelte-14xxpbz{margin:0px auto;font-size:12px;color:rgb(100, 100, 100)}

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

@@ -182,6 +182,44 @@ var app = (function () {
e.initCustomEvent(type, bubbles, cancelable, detail);
return e;
}
class HtmlTag {
constructor(is_svg = false) {
this.is_svg = false;
this.is_svg = is_svg;
this.e = this.n = null;
}
c(html) {
this.h(html);
}
m(html, target, anchor = null) {
if (!this.e) {
if (this.is_svg)
this.e = svg_element(target.nodeName);
else
this.e = element(target.nodeName);
this.t = target;
this.c(html);
}
this.i(anchor);
}
h(html) {
this.e.innerHTML = html;
this.n = Array.from(this.e.childNodes);
}
i(anchor) {
for (let i = 0; i < this.n.length; i += 1) {
insert(this.t, this.n[i], anchor);
}
}
p(html) {
this.d();
this.h(html);
this.i(this.a);
}
d() {
this.n.forEach(detach);
}
}
let current_component;
function set_current_component(component) {
@@ -478,6 +516,96 @@ var app = (function () {
: typeof globalThis !== 'undefined'
? globalThis
: global);
function outro_and_destroy_block(block, lookup) {
transition_out(block, 1, 1, () => {
lookup.delete(block.key);
});
}
function update_keyed_each(old_blocks, dirty, get_key, dynamic, ctx, list, lookup, node, destroy, create_each_block, next, get_context) {
let o = old_blocks.length;
let n = list.length;
let i = o;
const old_indexes = {};
while (i--)
old_indexes[old_blocks[i].key] = i;
const new_blocks = [];
const new_lookup = new Map();
const deltas = new Map();
i = n;
while (i--) {
const child_ctx = get_context(ctx, list, i);
const key = get_key(child_ctx);
let block = lookup.get(key);
if (!block) {
block = create_each_block(key, child_ctx);
block.c();
}
else if (dynamic) {
block.p(child_ctx, dirty);
}
new_lookup.set(key, new_blocks[i] = block);
if (key in old_indexes)
deltas.set(key, Math.abs(i - old_indexes[key]));
}
const will_move = new Set();
const did_move = new Set();
function insert(block) {
transition_in(block, 1);
block.m(node, next);
lookup.set(block.key, block);
next = block.first;
n--;
}
while (o && n) {
const new_block = new_blocks[n - 1];
const old_block = old_blocks[o - 1];
const new_key = new_block.key;
const old_key = old_block.key;
if (new_block === old_block) {
// do nothing
next = new_block.first;
o--;
n--;
}
else if (!new_lookup.has(old_key)) {
// remove old block
destroy(old_block, lookup);
o--;
}
else if (!lookup.has(new_key) || will_move.has(new_key)) {
insert(new_block);
}
else if (did_move.has(old_key)) {
o--;
}
else if (deltas.get(new_key) > deltas.get(old_key)) {
did_move.add(new_key);
insert(new_block);
}
else {
will_move.add(old_key);
o--;
}
}
while (o--) {
const old_block = old_blocks[o];
if (!new_lookup.has(old_block.key))
destroy(old_block, lookup);
}
while (n)
insert(new_blocks[n - 1]);
return new_blocks;
}
function validate_each_keys(ctx, list, get_context, get_key) {
const keys = new Set();
for (let i = 0; i < list.length; i++) {
const key = get_key(get_context(ctx, list, i));
if (keys.has(key)) {
throw new Error('Cannot have duplicate keys in a keyed each');
}
keys.add(key);
}
}
function get_spread_update(levels, updates) {
const update = {};
@@ -975,7 +1103,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$8 } = globals;
const { Error: Error_1, Object: Object_1, console: console_1$9 } = globals;
// (267:0) {:else}
function create_else_block$5(ctx) {
@@ -1755,7 +1883,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$8.warn(`<Router> was created with unknown prop '${key}'`);
if (!~writable_props.indexOf(key) && key.slice(0, 2) !== '$$' && key !== 'slot') console_1$9.warn(`<Router> was created with unknown prop '${key}'`);
});
function routeEvent_handler(event) {
@@ -2039,7 +2167,7 @@ var app = (function () {
/* src/pieces/Header.svelte generated by Svelte v3.53.1 */
const { console: console_1$7 } = globals;
const { console: console_1$8 } = globals;
const file$p = "src/pieces/Header.svelte";
// (24:39)
@@ -2268,7 +2396,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$7.warn(`<Header> was created with unknown prop '${key}'`);
if (!~writable_props.indexOf(key) && key.slice(0, 2) !== '$$' && key !== 'slot') console_1$8.warn(`<Header> was created with unknown prop '${key}'`);
});
const click_handler = () => push('/');
@@ -2768,7 +2896,7 @@ var app = (function () {
/* src/pieces/chat/Chat_button.svelte generated by Svelte v3.53.1 */
const { console: console_1$6 } = globals;
const { console: console_1$7 } = globals;
const file$n = "src/pieces/chat/Chat_button.svelte";
function create_fragment$o(ctx) {
@@ -2894,7 +3022,7 @@ var app = (function () {
const writable_props = ['my_class', 'my_title', 'layout', 'new_layout', 'on_click'];
Object.keys($$props).forEach(key => {
if (!~writable_props.indexOf(key) && key.slice(0, 2) !== '$$' && key !== 'slot') console_1$6.warn(`<Chat_button> was created with unknown prop '${key}'`);
if (!~writable_props.indexOf(key) && key.slice(0, 2) !== '$$' && key !== 'slot') console_1$7.warn(`<Chat_button> was created with unknown prop '${key}'`);
});
$$self.$$set = $$props => {
@@ -3360,23 +3488,25 @@ var app = (function () {
let t0;
let t1;
let p1;
let t2;
let div_class_value;
let current;
const default_slot_template = /*#slots*/ ctx[2].default;
const default_slot = create_slot(default_slot_template, ctx, /*$$scope*/ ctx[1], null);
const block = {
c: function create() {
div = element("div");
p0 = element("p");
t0 = text(/*name*/ ctx[1]);
t0 = text(/*name*/ ctx[0]);
t1 = space();
p1 = element("p");
t2 = text(/*content*/ ctx[0]);
attr_dev(p0, "class", "name svelte-jmr7oa");
add_location(p0, file$l, 8, 1, 92);
attr_dev(p1, "class", "msg svelte-jmr7oa");
add_location(p1, file$l, 9, 1, 120);
attr_dev(div, "class", div_class_value = "chat_msg " + /*name*/ ctx[1] + " svelte-jmr7oa");
add_location(div, file$l, 7, 0, 61);
if (default_slot) default_slot.c();
attr_dev(p0, "class", "name svelte-14xxpbz");
add_location(p0, file$l, 7, 1, 71);
attr_dev(p1, "class", "msg svelte-14xxpbz");
add_location(p1, file$l, 8, 1, 99);
attr_dev(div, "class", div_class_value = "chat_msg " + /*name*/ ctx[0] + " svelte-14xxpbz");
add_location(div, file$l, 6, 0, 40);
},
l: function claim(nodes) {
throw new Error("options.hydrate only works if the component was compiled with the `hydratable: true` option");
@@ -3387,20 +3517,47 @@ var app = (function () {
append_dev(p0, t0);
append_dev(div, t1);
append_dev(div, p1);
append_dev(p1, t2);
if (default_slot) {
default_slot.m(p1, null);
}
current = true;
},
p: function update(ctx, [dirty]) {
if (dirty & /*name*/ 2) set_data_dev(t0, /*name*/ ctx[1]);
if (dirty & /*content*/ 1) set_data_dev(t2, /*content*/ ctx[0]);
if (!current || dirty & /*name*/ 1) set_data_dev(t0, /*name*/ ctx[0]);
if (dirty & /*name*/ 2 && div_class_value !== (div_class_value = "chat_msg " + /*name*/ ctx[1] + " svelte-jmr7oa")) {
if (default_slot) {
if (default_slot.p && (!current || dirty & /*$$scope*/ 2)) {
update_slot_base(
default_slot,
default_slot_template,
ctx,
/*$$scope*/ ctx[1],
!current
? get_all_dirty_from_scope(/*$$scope*/ ctx[1])
: get_slot_changes(default_slot_template, /*$$scope*/ ctx[1], dirty, null),
null
);
}
}
if (!current || dirty & /*name*/ 1 && div_class_value !== (div_class_value = "chat_msg " + /*name*/ ctx[0] + " svelte-14xxpbz")) {
attr_dev(div, "class", div_class_value);
}
},
i: noop,
o: noop,
i: function intro(local) {
if (current) return;
transition_in(default_slot, local);
current = true;
},
o: function outro(local) {
transition_out(default_slot, local);
current = false;
},
d: function destroy(detaching) {
if (detaching) detach_dev(div);
if (default_slot) default_slot.d(detaching);
}
};
@@ -3417,49 +3574,43 @@ var app = (function () {
function instance$m($$self, $$props, $$invalidate) {
let { $$slots: slots = {}, $$scope } = $$props;
validate_slots('Chat_msg', slots, []);
let { content } = $$props;
validate_slots('Chat_msg', slots, ['default']);
let { name } = $$props;
$$self.$$.on_mount.push(function () {
if (content === undefined && !('content' in $$props || $$self.$$.bound[$$self.$$.props['content']])) {
console.warn("<Chat_msg> was created without expected prop 'content'");
}
if (name === undefined && !('name' in $$props || $$self.$$.bound[$$self.$$.props['name']])) {
console.warn("<Chat_msg> was created without expected prop 'name'");
}
});
const writable_props = ['content', 'name'];
const writable_props = ['name'];
Object.keys($$props).forEach(key => {
if (!~writable_props.indexOf(key) && key.slice(0, 2) !== '$$' && key !== 'slot') console.warn(`<Chat_msg> was created with unknown prop '${key}'`);
});
$$self.$$set = $$props => {
if ('content' in $$props) $$invalidate(0, content = $$props.content);
if ('name' in $$props) $$invalidate(1, name = $$props.name);
if ('name' in $$props) $$invalidate(0, name = $$props.name);
if ('$$scope' in $$props) $$invalidate(1, $$scope = $$props.$$scope);
};
$$self.$capture_state = () => ({ content, name });
$$self.$capture_state = () => ({ name });
$$self.$inject_state = $$props => {
if ('content' in $$props) $$invalidate(0, content = $$props.content);
if ('name' in $$props) $$invalidate(1, name = $$props.name);
if ('name' in $$props) $$invalidate(0, name = $$props.name);
};
if ($$props && "$$inject" in $$props) {
$$self.$inject_state($$props.$$inject);
}
return [content, name];
return [name, $$scope, slots];
}
class Chat_msg extends SvelteComponentDev {
constructor(options) {
super(options);
init(this, options, instance$m, create_fragment$m, safe_not_equal, { content: 0, name: 1 });
init(this, options, instance$m, create_fragment$m, safe_not_equal, { name: 0 });
dispatch_dev("SvelteRegisterComponent", {
component: this,
@@ -3469,14 +3620,6 @@ var app = (function () {
});
}
get content() {
throw new Error("<Chat_msg>: Props cannot be read directly from the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
}
set content(value) {
throw new Error("<Chat_msg>: Props cannot be set directly on the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
}
get name() {
throw new Error("<Chat_msg>: Props cannot be read directly from the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
}
@@ -3487,6 +3630,8 @@ var app = (function () {
}
/* src/pieces/chat/Layout_room.svelte generated by Svelte v3.53.1 */
const { console: console_1$6 } = globals;
const file$k = "src/pieces/chat/Layout_room.svelte";
function get_each_context$1(ctx, list, i) {
@@ -3495,8 +3640,8 @@ var app = (function () {
return child_ctx;
}
// (48:1) <Button bind:layout new_layout={back} my_class="back icon" my_title="go back {back}">
function create_default_slot_3$4(ctx) {
// (49: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;
const block = {
@@ -3513,17 +3658,17 @@ var app = (function () {
dispatch_dev("SvelteRegisterBlock", {
block,
id: create_default_slot_3$4.name,
id: create_default_slot_4$2.name,
type: "slot",
source: "(48:1) <Button bind:layout new_layout={back} my_class=\\\"back icon\\\" my_title=\\\"go back {back}\\\">",
source: "(49:1) <Button bind:layout new_layout={back} my_class=\\\"back icon\\\" my_title=\\\"go back {back}\\\">",
ctx
});
return block;
}
// (53:1) <Button bind:layout new_layout="room_set" my_class="room_name transparent">
function create_default_slot_2$8(ctx) {
// (54:1) <Button bind:layout new_layout="room_set" my_class="room_name transparent">
function create_default_slot_3$4(ctx) {
let t;
const block = {
@@ -3540,17 +3685,17 @@ var app = (function () {
dispatch_dev("SvelteRegisterBlock", {
block,
id: create_default_slot_2$8.name,
id: create_default_slot_3$4.name,
type: "slot",
source: "(53:1) <Button bind:layout new_layout=\\\"room_set\\\" my_class=\\\"room_name transparent\\\">",
source: "(54:1) <Button bind:layout new_layout=\\\"room_set\\\" my_class=\\\"room_name transparent\\\">",
ctx
});
return block;
}
// (58:1) <Button bind:layout new_layout="close" my_class="close icon">
function create_default_slot_1$8(ctx) {
// (59:1) <Button bind:layout new_layout="close" my_class="close icon">
function create_default_slot_2$8(ctx) {
let t;
const block = {
@@ -3567,40 +3712,88 @@ var app = (function () {
dispatch_dev("SvelteRegisterBlock", {
block,
id: create_default_slot_1$8.name,
id: create_default_slot_2$8.name,
type: "slot",
source: "(58:1) <Button bind:layout new_layout=\\\"close\\\" my_class=\\\"close icon\\\">",
source: "(59:1) <Button bind:layout new_layout=\\\"close\\\" my_class=\\\"close icon\\\">",
ctx
});
return block;
}
// (65:3) {#each msgs as msg}
function create_each_block$1(ctx) {
// (67:4) <Msg name={msg.name}>
function create_default_slot_1$8(ctx) {
let html_tag;
let raw_value = /*msg*/ ctx[4].content + "";
let html_anchor;
const block = {
c: function create() {
html_tag = new HtmlTag(false);
html_anchor = empty();
html_tag.a = html_anchor;
},
m: function mount(target, anchor) {
html_tag.m(raw_value, target, anchor);
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);
},
d: function destroy(detaching) {
if (detaching) detach_dev(html_anchor);
if (detaching) html_tag.d();
}
};
dispatch_dev("SvelteRegisterBlock", {
block,
id: create_default_slot_1$8.name,
type: "slot",
source: "(67:4) <Msg name={msg.name}>",
ctx
});
return block;
}
// (66:3) {#each msgs as msg (msg.id)}
function create_each_block$1(key_1, ctx) {
let first;
let msg_1;
let current;
msg_1 = new Chat_msg({
props: {
name: /*msg*/ ctx[4].name,
content: /*msg*/ ctx[4].content
$$slots: { default: [create_default_slot_1$8] },
$$scope: { ctx }
},
$$inline: true
});
const block = {
key: key_1,
first: null,
c: function create() {
first = empty();
create_component(msg_1.$$.fragment);
this.first = first;
},
m: function mount(target, anchor) {
insert_dev(target, first, anchor);
mount_component(msg_1, target, anchor);
current = true;
},
p: function update(ctx, dirty) {
p: function update(new_ctx, dirty) {
ctx = new_ctx;
const msg_1_changes = {};
if (dirty & /*msgs*/ 8) msg_1_changes.name = /*msg*/ ctx[4].name;
if (dirty & /*msgs*/ 8) msg_1_changes.content = /*msg*/ ctx[4].content;
if (dirty & /*$$scope, msgs*/ 65544) {
msg_1_changes.$$scope = { dirty, ctx };
}
msg_1.$set(msg_1_changes);
},
i: function intro(local) {
@@ -3613,6 +3806,7 @@ var app = (function () {
current = false;
},
d: function destroy(detaching) {
if (detaching) detach_dev(first);
destroy_component(msg_1, detaching);
}
};
@@ -3621,14 +3815,14 @@ var app = (function () {
block,
id: create_each_block$1.name,
type: "each",
source: "(65:3) {#each msgs as msg}",
source: "(66:3) {#each msgs as msg (msg.id)}",
ctx
});
return block;
}
// (84:1) <Button my_class="send" on_click={send_msg}>
// (88:1) <Button my_class="send" on_click={send_msg}>
function create_default_slot$a(ctx) {
let t;
@@ -3648,7 +3842,7 @@ var app = (function () {
block,
id: create_default_slot$a.name,
type: "slot",
source: "(84:1) <Button my_class=\\\"send\\\" on_click={send_msg}>",
source: "(88:1) <Button my_class=\\\"send\\\" on_click={send_msg}>",
ctx
});
@@ -3668,6 +3862,8 @@ var app = (function () {
let t2;
let div1;
let div0;
let each_blocks = [];
let each_1_lookup = new Map();
let t3;
let div3;
let div2;
@@ -3685,7 +3881,7 @@ var app = (function () {
new_layout: /*back*/ ctx[1],
my_class: "back icon",
my_title: "go back " + /*back*/ ctx[1],
$$slots: { default: [create_default_slot_3$4] },
$$slots: { default: [create_default_slot_4$2] },
$$scope: { ctx }
};
@@ -3703,7 +3899,7 @@ var app = (function () {
let button1_props = {
new_layout: "room_set",
my_class: "room_name transparent",
$$slots: { default: [create_default_slot_2$8] },
$$slots: { default: [create_default_slot_3$4] },
$$scope: { ctx }
};
@@ -3721,7 +3917,7 @@ var app = (function () {
let button2_props = {
new_layout: "close",
my_class: "close icon",
$$slots: { default: [create_default_slot_1$8] },
$$slots: { default: [create_default_slot_2$8] },
$$scope: { ctx }
};
@@ -3733,16 +3929,15 @@ var app = (function () {
binding_callbacks.push(() => bind(button2, 'layout', button2_layout_binding));
let each_value = /*msgs*/ ctx[3];
validate_each_argument(each_value);
let each_blocks = [];
const get_key = ctx => /*msg*/ ctx[4].id;
validate_each_keys(ctx, each_value, get_each_context$1, get_key);
for (let i = 0; i < each_value.length; i += 1) {
each_blocks[i] = create_each_block$1(get_each_context$1(ctx, each_value, i));
let child_ctx = get_each_context$1(ctx, each_value, i);
let key = get_key(child_ctx);
each_1_lookup.set(key, each_blocks[i] = create_each_block$1(key, child_ctx));
}
const out = i => transition_out(each_blocks[i], 1, 1, () => {
each_blocks[i] = null;
});
button3 = new Chat_button({
props: {
my_class: "send",
@@ -3775,17 +3970,17 @@ var app = (function () {
t4 = space();
create_component(button3.$$.fragment);
attr_dev(div0, "class", "msg_thread svelte-rmdfjs");
add_location(div0, file$k, 63, 2, 1047);
add_location(div0, file$k, 64, 2, 1067);
attr_dev(div1, "class", "panel panel_msg svelte-rmdfjs");
add_location(div1, file$k, 62, 1, 1015);
add_location(div1, file$k, 63, 1, 1035);
attr_dev(div2, "class", "text_area svelte-rmdfjs");
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$k, 72, 2, 1219);
add_location(div2, file$k, 76, 2, 1288);
attr_dev(div3, "class", "panel_write svelte-rmdfjs");
add_location(div3, file$k, 71, 1, 1191);
add_location(div3, file$k, 72, 1, 1221);
attr_dev(div4, "class", "grid_box svelte-rmdfjs");
add_location(div4, file$k, 44, 0, 627);
add_location(div4, file$k, 45, 0, 647);
},
l: function claim(nodes) {
throw new Error("options.hydrate only works if the component was compiled with the `hydratable: true` option");
@@ -3873,28 +4068,9 @@ var app = (function () {
if (dirty & /*msgs*/ 8) {
each_value = /*msgs*/ ctx[3];
validate_each_argument(each_value);
let i;
for (i = 0; i < each_value.length; i += 1) {
const child_ctx = get_each_context$1(ctx, each_value, i);
if (each_blocks[i]) {
each_blocks[i].p(child_ctx, dirty);
transition_in(each_blocks[i], 1);
} else {
each_blocks[i] = create_each_block$1(child_ctx);
each_blocks[i].c();
transition_in(each_blocks[i], 1);
each_blocks[i].m(div0, null);
}
}
group_outros();
for (i = each_value.length; i < each_blocks.length; i += 1) {
out(i);
}
validate_each_keys(ctx, each_value, get_each_context$1, get_key);
each_blocks = update_keyed_each(each_blocks, dirty, get_key, 1, ctx, each_value, each_1_lookup, div0, outro_and_destroy_block, create_each_block$1, null, get_each_context$1);
check_outros();
}
@@ -3927,7 +4103,6 @@ var app = (function () {
transition_out(button0.$$.fragment, local);
transition_out(button1.$$.fragment, local);
transition_out(button2.$$.fragment, local);
each_blocks = each_blocks.filter(Boolean);
for (let i = 0; i < each_blocks.length; i += 1) {
transition_out(each_blocks[i]);
@@ -3941,7 +4116,11 @@ var app = (function () {
destroy_component(button0);
destroy_component(button1);
destroy_component(button2);
destroy_each(each_blocks, detaching);
for (let i = 0; i < each_blocks.length; i += 1) {
each_blocks[i].d();
}
/*div2_binding*/ ctx[11](null);
destroy_component(button3);
mounted = false;
@@ -3967,8 +4146,8 @@ var app = (function () {
let { back = "" } = $$props;
let msg = "";
let text_area;
let index = 0;
let msgs = [];
let index = 0;
function add_msg(from, the_msg) {
$$invalidate(3, msgs = [...msgs, { id: index, content: the_msg, name: from }]);
@@ -3977,6 +4156,7 @@ var app = (function () {
function send_msg() {
$$invalidate(4, msg = msg.trim());
console.log(msg);
if (msg.length > 0) {
//socket.emit('sendmsg', msg);
@@ -3997,7 +4177,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.warn(`<Layout_room> was created with unknown prop '${key}'`);
if (!~writable_props.indexOf(key) && key.slice(0, 2) !== '$$' && key !== 'slot') console_1$6.warn(`<Layout_room> was created with unknown prop '${key}'`);
});
function button0_layout_binding(value) {
@@ -4039,8 +4219,8 @@ var app = (function () {
back,
msg,
text_area,
index,
msgs,
index,
add_msg,
send_msg,
send_msg_if
@@ -4051,8 +4231,8 @@ 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 ('index' in $$props) index = $$props.index;
if ('msgs' in $$props) $$invalidate(3, msgs = $$props.msgs);
if ('index' in $$props) index = $$props.index;
};
if ($$props && "$$inject" in $$props) {

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

File diff suppressed because one or more lines are too long

10
srcs/requirements/svelte/api_front/src/pieces/chat/Chat_msg.svelte
View File

@@ -1,25 +1,26 @@
<script>
export let content;
export let name;
</script>
<div class="chat_msg {name}">
<p class="name">{name}</p>
<p class="msg">{content}</p>
<p class="msg"><slot></slot></p>
</div>
<style>
.chat_msg {
/*
white-space: pre-wrap;
*/
margin: 5px auto;
padding: 5px;
border-radius: 5px;
}
/* all msg
*/
:global(.msg_thread) .chat_msg {
.chat_msg {
margin-left: 0px;
background-color: rgb(210, 210, 210);
max-width: 80%;
@@ -35,6 +36,9 @@
.chat_msg p.msg {
margin: 5px 0px;
}
.chat_msg p.msg :global(*) {
display: inline;
}
/* msg perso
*/
.chat_msg.me {

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

@@ -9,8 +9,8 @@
let msg = "";
let text_area;
let index = 0;
let msgs = [];
let index = 0;
function add_msg(from, the_msg)
{
@@ -21,6 +21,7 @@
function send_msg()
{
msg = msg.trim();
console.log(msg);
if (msg.length > 0) {
//socket.emit('sendmsg', msg);
@@ -62,14 +63,17 @@
<!-- msg -->
<div class="panel panel_msg">
<div class="msg_thread">
{#each msgs as msg}
<Msg name={msg.name} content={msg.content} />
{#each msgs as msg (msg.id)}
<Msg name={msg.name}>{@html msg.content}</Msg>
{/each}
</div>
</div>
<!-- write -->
<div class="panel_write">
<!--
bind:textContent={msg}
-->
<div
class="text_area"
bind:innerHTML={msg}