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

chat background color is declared with component

Browse Source
This commit is contained in:
simplonco
2022-12-24 20:55:20 +01:00
parent 2b0939ec05
commit 05d5f2a3ec
5 changed files with 97 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -7,7 +7,7 @@ header.svelte-7t4byu.svelte-7t4byu{overflow-y:hidden}.grid-container.svelte-7t4b
var(--violet), var(--violet),
var(--pink), var(--pink),
var(--purple) var(--purple)
);background-size:200%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;color:transparent;white-space:nowrap}.card.svelte-8smyff{background:white;padding:20px;border-radius:6px;box-shadow:0px 2px 4px rgba(0,0,0,0.1)}button.svelte-1u0z9cq{border:0;cursor:pointer;border-radius:6px;padding:8px 12px;font-weight:bold;box-shadow:1px 2px 3px rgba(0,0,0,0.2)}.primary.svelte-1u0z9cq{background:#d91b42;color:white}.secondary.svelte-1u0z9cq{background:#45c496;color:white}.flat.svelte-1u0z9cq{box-shadow:none}.primary.inverse.svelte-1u0z9cq{color:#d91b42;background:white;border:2px solid #d91b42}.secondary.inverse.svelte-1u0z9cq{color:#45c496;background:white;border:2px solid #45c496}#chat_box.svelte-z8twj9.svelte-z8twj9{display:flex;position:fixed;bottom:20px;right:20px;padding:5px;width:300px;height:400px;border:1px solid black;background-color:bisque}#chat_box.close.svelte-z8twj9 .grid_box.svelte-z8twj9{gap:0px;grid:' chat ' auto );background-size:200%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;color:transparent;white-space:nowrap}.card.svelte-8smyff{background:white;padding:20px;border-radius:6px;box-shadow:0px 2px 4px rgba(0,0,0,0.1)}button.svelte-1u0z9cq{border:0;cursor:pointer;border-radius:6px;padding:8px 12px;font-weight:bold;box-shadow:1px 2px 3px rgba(0,0,0,0.2)}.primary.svelte-1u0z9cq{background:#d91b42;color:white}.secondary.svelte-1u0z9cq{background:#45c496;color:white}.flat.svelte-1u0z9cq{box-shadow:none}.primary.inverse.svelte-1u0z9cq{color:#d91b42;background:white;border:2px solid #d91b42}.secondary.inverse.svelte-1u0z9cq{color:#45c496;background:white;border:2px solid #45c496}#chat_box.svelte-u17qy1.svelte-u17qy1{display:flex;position:fixed;bottom:20px;right:20px;padding:5px;width:300px;height:400px;border:1px solid black}#chat_box.close.svelte-u17qy1 .grid_box.svelte-u17qy1{gap:0px;grid:' chat ' auto
/ auto }#chat_box.close.svelte-z8twj9.svelte-z8twj9{padding:0px;width:auto;height:auto}#chat_box .grid_box{display:grid;margin:0px;gap:5px;width:100%;height:100%}#chat_box .grid_box *{display:flex;flex-direction:column;position:relative;box-sizing:border-box;padding:0px;margin:auto}#chat_box .grid_box .chat_item{width:100%;height:100%}#chat_box .chat_item#chat_chat {grid-area:chat}#chat_box .chat_item#chat_close {grid-area:close}#chat_box .chat_item#chat_new {grid-area:new}#chat_box .chat_item#chat_settings {grid-area:settings}#chat_box .chat_item#chat_room_name {grid-area:room_name}#chat_box .chat_item#chat_send {grid-area:send}#chat_box .chat_item#chat_create {grid-area:create}#chat_box .chat_item#chat_user {grid-area:user}#chat_box .chat_item#chat_back {grid-area:back}#chat_box .chat_item#chat_panel_home {grid-area:panel_home}#chat_box .chat_item#chat_panel_new {grid-area:panel_new}#chat_box .chat_item#chat_panel_msg {grid-area:panel_msg}#chat_box .chat_item#chat_panel_write {grid-area:panel_write}#chat_box .chat_item#chat_panel_settings {grid-area:panel_settings}#chat_box .chat_item#chat_panel_room_set {grid-area:panel_room_set}#chat_box .chat_item#chat_panel_protected {grid-area:panel_protected}#chat_box .chat_item#chat_panel_create {grid-area:panel_create}#chat_box .chat_item#chat_panel_user {grid-area:panel_user}#chat_box .chat_item#chat_panel_mute {grid-area:panel_mute}#chat_box .grid_box p{padding:10px;font-size:15px}.grid_box.svelte-1tjf2m9{grid:' settings new close ' auto / auto }#chat_box.close.svelte-u17qy1.svelte-u17qy1{padding:0px;width:auto;height:auto}#chat_box .grid_box{display:grid;margin:0px;gap:5px;width:100%;height:100%}#chat_box .grid_box *{display:flex;flex-direction:column;position:relative;box-sizing:border-box;padding:0px;margin:auto}#chat_box .grid_box .chat_item{width:100%;height:100%}#chat_box .chat_item#chat_chat {grid-area:chat}#chat_box .chat_item#chat_close {grid-area:close}#chat_box .chat_item#chat_new {grid-area:new}#chat_box .chat_item#chat_settings {grid-area:settings}#chat_box .chat_item#chat_room_name {grid-area:room_name}#chat_box .chat_item#chat_send {grid-area:send}#chat_box .chat_item#chat_create {grid-area:create}#chat_box .chat_item#chat_user {grid-area:user}#chat_box .chat_item#chat_back {grid-area:back}#chat_box .chat_item#chat_panel_home {grid-area:panel_home}#chat_box .chat_item#chat_panel_new {grid-area:panel_new}#chat_box .chat_item#chat_panel_msg {grid-area:panel_msg}#chat_box .chat_item#chat_panel_write {grid-area:panel_write}#chat_box .chat_item#chat_panel_settings {grid-area:panel_settings}#chat_box .chat_item#chat_panel_room_set {grid-area:panel_room_set}#chat_box .chat_item#chat_panel_protected {grid-area:panel_protected}#chat_box .chat_item#chat_panel_create {grid-area:panel_create}#chat_box .chat_item#chat_panel_user {grid-area:panel_user}#chat_box .chat_item#chat_panel_mute {grid-area:panel_mute}#chat_box .grid_box p{padding:10px;font-size:15px}.grid_box.svelte-1tjf2m9{grid:' settings new close ' auto
' panel_home panel_home panel_home ' 1fr ' panel_home panel_home panel_home ' 1fr
/ auto 1fr auto }button.svelte-nupzli.svelte-nupzli{display:flex;width:auto;cursor:pointer;outline:none;border:none;background-color:rgb(220, 220, 220)}button.svelte-nupzli p.svelte-nupzli{width:100%;text-align:center}button.svelte-nupzli.svelte-nupzli:hover{background-color:rgb(200, 200, 200)}button.svelte-nupzli.svelte-nupzli:active{background-color:rgb(190, 190, 190)} / auto 1fr auto }button.svelte-nupzli.svelte-nupzli{display:flex;width:auto;cursor:pointer;outline:none;border:none;background-color:rgb(220, 220, 220)}button.svelte-nupzli p.svelte-nupzli{width:100%;text-align:center}button.svelte-nupzli.svelte-nupzli:hover{background-color:rgb(200, 200, 200)}button.svelte-nupzli.svelte-nupzli:active{background-color:rgb(190, 190, 190)}

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

@@ -166,6 +166,14 @@ var app = (function () {
function set_input_value(input, value) { function set_input_value(input, value) {
input.value = value == null ? '' : value; input.value = value == null ? '' : value;
} }
function set_style(node, key, value, important) {
if (value === null) {
node.style.removeProperty(key);
}
else {
node.style.setProperty(key, value, important ? 'important' : '');
}
}
function toggle_class(element, name, toggle) { function toggle_class(element, name, toggle) {
element.classList[toggle ? 'add' : 'remove'](name); element.classList[toggle ? 'add' : 'remove'](name);
} }
@@ -3366,7 +3374,7 @@ var app = (function () {
let current; let current;
function button_layout_binding(value) { function button_layout_binding(value) {
/*button_layout_binding*/ ctx[2](value); /*button_layout_binding*/ ctx[3](value);
} }
let button_props = { let button_props = {
@@ -3377,8 +3385,8 @@ var app = (function () {
$$scope: { ctx } $$scope: { ctx }
}; };
if (/*layout*/ ctx[0] !== void 0) { if (/*layout*/ ctx[1] !== void 0) {
button_props.layout = /*layout*/ ctx[0]; button_props.layout = /*layout*/ ctx[1];
} }
button = new Buttons({ props: button_props, $$inline: true }); button = new Buttons({ props: button_props, $$inline: true });
@@ -3388,8 +3396,8 @@ var app = (function () {
c: function create() { c: function create() {
div = element("div"); div = element("div");
create_component(button.$$.fragment); create_component(button.$$.fragment);
attr_dev(div, "class", "grid_box svelte-z8twj9"); attr_dev(div, "class", "grid_box svelte-u17qy1");
add_location(div, file$c, 33, 2, 646); add_location(div, file$c, 33, 2, 676);
}, },
m: function mount(target, anchor) { m: function mount(target, anchor) {
insert_dev(target, div, anchor); insert_dev(target, div, anchor);
@@ -3399,13 +3407,13 @@ var app = (function () {
p: function update(ctx, dirty) { p: function update(ctx, dirty) {
const button_changes = {}; const button_changes = {};
if (dirty & /*$$scope*/ 64) { if (dirty & /*$$scope*/ 128) {
button_changes.$$scope = { dirty, ctx }; button_changes.$$scope = { dirty, ctx };
} }
if (!updating_layout && dirty & /*layout*/ 1) { if (!updating_layout && dirty & /*layout*/ 2) {
updating_layout = true; updating_layout = true;
button_changes.layout = /*layout*/ ctx[0]; button_changes.layout = /*layout*/ ctx[1];
add_flush_callback(() => updating_layout = false); add_flush_callback(() => updating_layout = false);
} }
@@ -3444,13 +3452,13 @@ var app = (function () {
let current; let current;
function homelayout_layout_binding(value) { function homelayout_layout_binding(value) {
/*homelayout_layout_binding*/ ctx[1](value); /*homelayout_layout_binding*/ ctx[2](value);
} }
let homelayout_props = {}; let homelayout_props = {};
if (/*layout*/ ctx[0] !== void 0) { if (/*layout*/ ctx[1] !== void 0) {
homelayout_props.layout = /*layout*/ ctx[0]; homelayout_props.layout = /*layout*/ ctx[1];
} }
homelayout = new Layout_home({ props: homelayout_props, $$inline: true }); homelayout = new Layout_home({ props: homelayout_props, $$inline: true });
@@ -3467,9 +3475,9 @@ var app = (function () {
p: function update(ctx, dirty) { p: function update(ctx, dirty) {
const homelayout_changes = {}; const homelayout_changes = {};
if (!updating_layout && dirty & /*layout*/ 1) { if (!updating_layout && dirty & /*layout*/ 2) {
updating_layout = true; updating_layout = true;
homelayout_changes.layout = /*layout*/ ctx[0]; homelayout_changes.layout = /*layout*/ ctx[1];
add_flush_callback(() => updating_layout = false); add_flush_callback(() => updating_layout = false);
} }
@@ -3537,7 +3545,7 @@ var app = (function () {
const if_blocks = []; const if_blocks = [];
function select_block_type(ctx, dirty) { function select_block_type(ctx, dirty) {
if (/*layout*/ ctx[0] === "home") return 0; if (/*layout*/ ctx[1] === "home") return 0;
return 1; return 1;
} }
@@ -3548,9 +3556,10 @@ var app = (function () {
c: function create() { c: function create() {
div = element("div"); div = element("div");
if_block.c(); if_block.c();
attr_dev(div, "class", div_class_value = "" + (null_to_empty(/*layout*/ ctx[0]) + " svelte-z8twj9")); attr_dev(div, "class", div_class_value = "" + (null_to_empty(/*layout*/ ctx[1]) + " svelte-u17qy1"));
attr_dev(div, "id", "chat_box"); attr_dev(div, "id", "chat_box");
add_location(div, file$c, 27, 0, 535); set_style(div, "background-color", /*color*/ ctx[0]);
add_location(div, file$c, 27, 0, 530);
}, },
l: function claim(nodes) { l: function claim(nodes) {
throw new Error("options.hydrate only works if the component was compiled with the `hydratable: true` option"); throw new Error("options.hydrate only works if the component was compiled with the `hydratable: true` option");
@@ -3587,9 +3596,13 @@ var app = (function () {
if_block.m(div, null); if_block.m(div, null);
} }
if (!current || dirty & /*layout*/ 1 && div_class_value !== (div_class_value = "" + (null_to_empty(/*layout*/ ctx[0]) + " svelte-z8twj9"))) { if (!current || dirty & /*layout*/ 2 && div_class_value !== (div_class_value = "" + (null_to_empty(/*layout*/ ctx[1]) + " svelte-u17qy1"))) {
attr_dev(div, "class", div_class_value); attr_dev(div, "class", div_class_value);
} }
if (!current || dirty & /*color*/ 1) {
set_style(div, "background-color", /*color*/ ctx[0]);
}
}, },
i: function intro(local) { i: function intro(local) {
if (current) return; if (current) return;
@@ -3620,11 +3633,12 @@ var app = (function () {
function instance$d($$self, $$props, $$invalidate) { function instance$d($$self, $$props, $$invalidate) {
let { $$slots: slots = {}, $$scope } = $$props; let { $$slots: slots = {}, $$scope } = $$props;
validate_slots('Chat', slots, []); validate_slots('Chat', slots, []);
let { color = "transparent" } = $$props;
let room = ""; let room = "";
let admin = false; let admin = false;
let last_layout = ""; let last_layout = "";
let layout = "close"; let layout = "close";
const writable_props = []; const writable_props = ['color'];
Object.keys($$props).forEach(key => { Object.keys($$props).forEach(key => {
if (!~writable_props.indexOf(key) && key.slice(0, 2) !== '$$' && key !== 'slot') console.warn(`<Chat> was created with unknown prop '${key}'`); if (!~writable_props.indexOf(key) && key.slice(0, 2) !== '$$' && key !== 'slot') console.warn(`<Chat> was created with unknown prop '${key}'`);
@@ -3632,17 +3646,22 @@ var app = (function () {
function homelayout_layout_binding(value) { function homelayout_layout_binding(value) {
layout = value; layout = value;
$$invalidate(0, layout); $$invalidate(1, layout);
} }
function button_layout_binding(value) { function button_layout_binding(value) {
layout = value; layout = value;
$$invalidate(0, layout); $$invalidate(1, layout);
} }
$$self.$$set = $$props => {
if ('color' in $$props) $$invalidate(0, color = $$props.color);
};
$$self.$capture_state = () => ({ $$self.$capture_state = () => ({
HomeLayout: Layout_home, HomeLayout: Layout_home,
Button: Buttons, Button: Buttons,
color,
room, room,
admin, admin,
last_layout, last_layout,
@@ -3650,23 +3669,24 @@ var app = (function () {
}); });
$$self.$inject_state = $$props => { $$self.$inject_state = $$props => {
if ('color' in $$props) $$invalidate(0, color = $$props.color);
if ('room' in $$props) room = $$props.room; if ('room' in $$props) room = $$props.room;
if ('admin' in $$props) admin = $$props.admin; if ('admin' in $$props) admin = $$props.admin;
if ('last_layout' in $$props) last_layout = $$props.last_layout; if ('last_layout' in $$props) last_layout = $$props.last_layout;
if ('layout' in $$props) $$invalidate(0, layout = $$props.layout); if ('layout' in $$props) $$invalidate(1, layout = $$props.layout);
}; };
if ($$props && "$$inject" in $$props) { if ($$props && "$$inject" in $$props) {
$$self.$inject_state($$props.$$inject); $$self.$inject_state($$props.$$inject);
} }
return [layout, homelayout_layout_binding, button_layout_binding]; return [color, layout, homelayout_layout_binding, button_layout_binding];
} }
class Chat extends SvelteComponentDev { class Chat extends SvelteComponentDev {
constructor(options) { constructor(options) {
super(options); super(options);
init(this, options, instance$d, create_fragment$d, safe_not_equal, {}); init(this, options, instance$d, create_fragment$d, safe_not_equal, { color: 0 });
dispatch_dev("SvelteRegisterComponent", { dispatch_dev("SvelteRegisterComponent", {
component: this, component: this,
@@ -3675,6 +3695,14 @@ var app = (function () {
id: create_fragment$d.name id: create_fragment$d.name
}); });
} }
get color() {
throw new Error("<Chat>: Props cannot be read directly from the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
}
set color(value) {
throw new Error("<Chat>: Props cannot be set directly on the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
}
} }
/* src/pages/profile/ProfileDisplay.svelte generated by Svelte v3.53.1 */ /* src/pages/profile/ProfileDisplay.svelte generated by Svelte v3.53.1 */
@@ -3693,8 +3721,8 @@ var app = (function () {
t1 = space(); t1 = space();
div = element("div"); div = element("div");
div.textContent = "Failed to load current"; div.textContent = "Failed to load current";
add_location(h2, file$b, 20, 4, 691); add_location(h2, file$b, 20, 4, 705);
add_location(div, file$b, 21, 4, 710); add_location(div, file$b, 21, 4, 724);
}, },
m: function mount(target, anchor) { m: function mount(target, anchor) {
insert_dev(target, h2, anchor); insert_dev(target, h2, anchor);
@@ -3837,7 +3865,12 @@ var app = (function () {
let t59; let t59;
let div30; let div30;
let current; let current;
chat = new Chat({ $$inline: true });
chat = new Chat({
props: { color: "bisque" },
$$inline: true
});
const if_block_creators = [create_if_block$5, create_else_block$3]; const if_block_creators = [create_if_block$5, create_else_block$3];
const if_blocks = []; const if_blocks = [];
@@ -3946,37 +3979,37 @@ var app = (function () {
div30 = element("div"); div30 = element("div");
div30.textContent = "testing when there's tons of stuff"; div30.textContent = "testing when there's tons of stuff";
attr_dev(div0, "class", "outer svelte-16aefqu"); attr_dev(div0, "class", "outer svelte-16aefqu");
add_location(div0, file$b, 14, 0, 408); add_location(div0, file$b, 14, 0, 422);
add_location(div1, file$b, 25, 0, 760); add_location(div1, file$b, 25, 0, 774);
add_location(div2, file$b, 26, 0, 806); add_location(div2, file$b, 26, 0, 820);
add_location(div3, file$b, 27, 0, 852); add_location(div3, file$b, 27, 0, 866);
add_location(div4, file$b, 28, 0, 898); add_location(div4, file$b, 28, 0, 912);
add_location(div5, file$b, 29, 0, 944); add_location(div5, file$b, 29, 0, 958);
add_location(div6, file$b, 30, 0, 990); add_location(div6, file$b, 30, 0, 1004);
add_location(div7, file$b, 31, 0, 1036); add_location(div7, file$b, 31, 0, 1050);
add_location(div8, file$b, 32, 0, 1082); add_location(div8, file$b, 32, 0, 1096);
add_location(div9, file$b, 33, 0, 1128); add_location(div9, file$b, 33, 0, 1142);
add_location(div10, file$b, 34, 0, 1174); add_location(div10, file$b, 34, 0, 1188);
add_location(div11, file$b, 35, 0, 1220); add_location(div11, file$b, 35, 0, 1234);
add_location(div12, file$b, 36, 0, 1266); add_location(div12, file$b, 36, 0, 1280);
add_location(div13, file$b, 37, 0, 1312); add_location(div13, file$b, 37, 0, 1326);
add_location(div14, file$b, 38, 0, 1358); add_location(div14, file$b, 38, 0, 1372);
add_location(div15, file$b, 39, 0, 1404); add_location(div15, file$b, 39, 0, 1418);
add_location(div16, file$b, 40, 0, 1450); add_location(div16, file$b, 40, 0, 1464);
add_location(div17, file$b, 41, 0, 1496); add_location(div17, file$b, 41, 0, 1510);
add_location(div18, file$b, 42, 0, 1542); add_location(div18, file$b, 42, 0, 1556);
add_location(div19, file$b, 43, 0, 1588); add_location(div19, file$b, 43, 0, 1602);
add_location(div20, file$b, 44, 0, 1634); add_location(div20, file$b, 44, 0, 1648);
add_location(div21, file$b, 45, 0, 1680); add_location(div21, file$b, 45, 0, 1694);
add_location(div22, file$b, 46, 0, 1726); add_location(div22, file$b, 46, 0, 1740);
add_location(div23, file$b, 47, 0, 1772); add_location(div23, file$b, 47, 0, 1786);
add_location(div24, file$b, 48, 0, 1818); add_location(div24, file$b, 48, 0, 1832);
add_location(div25, file$b, 49, 0, 1864); add_location(div25, file$b, 49, 0, 1878);
add_location(div26, file$b, 50, 0, 1910); add_location(div26, file$b, 50, 0, 1924);
add_location(div27, file$b, 51, 0, 1956); add_location(div27, file$b, 51, 0, 1970);
add_location(div28, file$b, 52, 0, 2002); add_location(div28, file$b, 52, 0, 2016);
add_location(div29, file$b, 53, 0, 2048); add_location(div29, file$b, 53, 0, 2062);
add_location(div30, file$b, 54, 0, 2094); add_location(div30, file$b, 54, 0, 2108);
}, },
l: function claim(nodes) { l: function claim(nodes) {
throw new Error("options.hydrate only works if the component was compiled with the `hydratable: true` option"); throw new Error("options.hydrate only works if the component was compiled with the `hydratable: true` option");

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

File diff suppressed because one or more lines are too long

2
srcs/requirements/svelte/api_front/src/pages/profile/ProfileDisplay.svelte
View File

@@ -16,7 +16,7 @@
</script> </script>
<Chat /> <Chat color="bisque"/>
<!-- is this if excessive? --> <!-- is this if excessive? -->
<div class="outer"> <div class="outer">

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

@@ -3,7 +3,7 @@
import HomeLayout from './Layout_home.svelte'; import HomeLayout from './Layout_home.svelte';
import Button from './Buttons.svelte'; import Button from './Buttons.svelte';
//export let bg_color = "transparent"; export let color = "transparent";
let room = ""; let room = "";
let admin = false; let admin = false;
@@ -30,7 +30,7 @@
</script> </script>
<div class={layout} id="chat_box"> <div class={layout} id="chat_box" style="background-color: {color};">
{#if layout === "home"} {#if layout === "home"}
<HomeLayout bind:layout={layout} /> <HomeLayout bind:layout={layout} />
@@ -61,8 +61,8 @@
border: 1px solid black; border: 1px solid black;
/* /*
background-color: {bg_color}; background-color: {bg_color};
*/
background-color: bisque; background-color: bisque;
*/
} }
/* style if chat_box is closed /* style if chat_box is closed