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

buttons and grid are working in chat with svelte method

Browse Source
This commit is contained in:
simplonco
2022-12-24 19:23:26 +01:00
parent bcea4a181d
commit aea7d5a4fc
13 changed files with 574 additions and 235 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,10 +1,11 @@
header.svelte-7t4byu.svelte-7t4byu{overflow-y:hidden}.grid-container.svelte-7t4byu.svelte-7t4byu{position:absolute;left:0;top:0;box-sizing:border-box;width:100%;height:100%;white-space:nowrap;margin-bottom:0px;overflow:hidden;padding:20px 40px;margin:0px;display:grid;grid-template-columns:repeat(12, 1fr);grid-template-rows:1fr 1fr 1fr 1fr 1fr;align-items:center}header.svelte-7t4byu h1.svelte-7t4byu{grid-column:1 / 7;grid-row:1;padding:20px;border:1px solid bisque}header.svelte-7t4byu nav.svelte-7t4byu{grid-column:7 / 13;grid-row:1;justify-self:end;padding:20px;border:1px solid bisque}header.svelte-7t4byu h2.svelte-7t4byu{grid-row:3;grid-column:5 / span 4;justify-self:center;border:1px solid black;z-index:3}header.svelte-7t4byu h2 div.svelte-7t4byu{font-size:2em}nav.svelte-7t4byu div.svelte-7t4byu{display:inline;color:bisque;font-weight:bold}nav.svelte-7t4byu>div.svelte-7t4byu{padding-left:1em}nav.svelte-7t4byu div.svelte-7t4byu:hover{text-decoration:underline;cursor:pointer}main.svelte-1cznfcz.svelte-1cznfcz{text-align:center;padding-top:40px;padding-bottom:40px}form.svelte-1cznfcz.svelte-1cznfcz{padding-top:15px}form.svelte-1cznfcz input.svelte-1cznfcz{max-width:330px}.error.svelte-1cznfcz.svelte-1cznfcz{font-weight:bold;font-size:0.8em;color:red}div.wrapper.svelte-1q8uute{display:flexbox;align-items:center}div.wrapper.svelte-1q8uute{display:flexbox;align-items:center}@font-face{font-family:'Bondi';src:url('/fonts/Bondi.ttf.woff') format('woff'), header.svelte-7t4byu.svelte-7t4byu{overflow-y:hidden}.grid-container.svelte-7t4byu.svelte-7t4byu{position:absolute;left:0;top:0;box-sizing:border-box;width:100%;height:100%;white-space:nowrap;margin-bottom:0px;overflow:hidden;padding:20px 40px;margin:0px;display:grid;grid-template-columns:repeat(12, 1fr);grid-template-rows:1fr 1fr 1fr 1fr 1fr;align-items:center}header.svelte-7t4byu h1.svelte-7t4byu{grid-column:1 / 7;grid-row:1;padding:20px;border:1px solid bisque}header.svelte-7t4byu nav.svelte-7t4byu{grid-column:7 / 13;grid-row:1;justify-self:end;padding:20px;border:1px solid bisque}header.svelte-7t4byu h2.svelte-7t4byu{grid-row:3;grid-column:5 / span 4;justify-self:center;border:1px solid black;z-index:3}header.svelte-7t4byu h2 div.svelte-7t4byu{font-size:2em}nav.svelte-7t4byu div.svelte-7t4byu{display:inline;color:bisque;font-weight:bold}nav.svelte-7t4byu>div.svelte-7t4byu{padding-left:1em}nav.svelte-7t4byu div.svelte-7t4byu:hover{text-decoration:underline;cursor:pointer}main.svelte-1cznfcz.svelte-1cznfcz{text-align:center;padding-top:40px;padding-bottom:40px}form.svelte-1cznfcz.svelte-1cznfcz{padding-top:15px}form.svelte-1cznfcz input.svelte-1cznfcz{max-width:330px}.error.svelte-1cznfcz.svelte-1cznfcz{font-weight:bold;font-size:0.8em;color:red}div.wrapper.svelte-1q8uute{display:flexbox;align-items:center}div.wrapper.svelte-1q8uute{display:flexbox;align-items:center}canvas.svelte-1bstsd0{width:100%;height:100%;background-color:#666}@font-face{font-family:'Bondi';src:url('/fonts/Bondi.ttf.woff') format('woff'),
url('/fonts/Bondi.ttf.svg#Bondi') format('svg'), url('/fonts/Bondi.ttf.svg#Bondi') format('svg'),
url('/fonts/Bondi.ttf.eot'), url('/fonts/Bondi.ttf.eot'),
url('/fonts/Bondi.ttf.eot?#iefix') format('embedded-opentype');font-weight:normal;font-style:normal}header.svelte-1gjmpio.svelte-1gjmpio{background:#618174;margin:0}header.svelte-1gjmpio.svelte-1gjmpio{position:sticky;display:grid;grid-template-columns:1fr 1fr 1fr}h1.svelte-1gjmpio.svelte-1gjmpio{font-family:'Bondi'}h1.svelte-1gjmpio.svelte-1gjmpio{margin:0;text-align:left;display:flex;justify-self:center;align-self:center}img.svelte-1gjmpio.svelte-1gjmpio{cursor:pointer;max-width:40px;padding:7px 20px;justify-self:left}nav.svelte-1gjmpio.svelte-1gjmpio{display:flex;justify-content:right}nav.svelte-1gjmpio button.svelte-1gjmpio{margin:7px 20px;border-radius:4px}canvas.svelte-1bstsd0{width:100%;height:100%;background-color:#666}div.top-grid.svelte-55f7si{display:grid;grid-template-columns:repeat(12, 1fr);height:85vh}div.all-users-sidebar.svelte-55f7si{grid-column:1 / span 2;background:white}div.a-user.svelte-55f7si{display:inline-block}div.status.svelte-55f7si{font-size:0.6em;font-weight:bold}div[class^="a-user"].svelte-55f7si:hover{text-decoration:underline;font-weight:bold;cursor:pointer}div.main-display.svelte-55f7si{grid-column:3 / span 10}.error.svelte-55f7si{font-size:0.8em;font-weight:bold;color:red}main.svelte-qtbld7{text-align:center}div.cards.svelte-qtbld7{display:grid;grid-template-columns:1fr 1fr;grid-gap:20px}img.svelte-qtbld7{width:60px}form.svelte-qtbld7{text-align:center}.form-field.svelte-qtbld7{padding:10px}.label.svelte-qtbld7{font-weight:bold}.inline-check.svelte-qtbld7{display:inline}.error.svelte-qtbld7{font-size:0.8em;font-weight:bold;color:red}.success.svelte-qtbld7{font-size:0.8em;font-weight:bold;color:green}div.outer.svelte-16aefqu{max-width:960px;margin:40px auto}:root{--purple:rgb(123, 31, 162);--violet:rgb(103, 58, 183);--pink:rgb(244, 143, 177)}@keyframes svelte-16aefqu-background-pan{from{background-position:0% center}to{background-position:-200% center}}@keyframes svelte-16aefqu-scale{from,to{transform:scale(0)}50%{transform:scale(1)}}@keyframes svelte-16aefqu-rotate{from{transform:rotate(0deg)}to{transform:rotate(180deg)}}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}div.outer.svelte-16aefqu.svelte-16aefqu.svelte-16aefqu.svelte-16aefqu.svelte-16aefqu{max-width:960px;margin:40px auto}main.svelte-16aefqu.svelte-16aefqu.svelte-16aefqu.svelte-16aefqu.svelte-16aefqu{max-width:960px;margin:40px auto;text-align:center}.avatar.svelte-16aefqu.svelte-16aefqu.svelte-16aefqu.svelte-16aefqu.svelte-16aefqu{max-width:150px}section.main-stats.svelte-16aefqu.svelte-16aefqu.svelte-16aefqu.svelte-16aefqu.svelte-16aefqu{max-width:600px;margin:40px auto;text-align:center;display:grid;grid-template-columns:repeat(3, 1fr);grid-template-rows:repeat(3, 1fr)}section.main-stats.svelte-16aefqu h4.svelte-16aefqu.svelte-16aefqu.svelte-16aefqu.svelte-16aefqu{grid-column:1 / span 3}div.username.svelte-16aefqu.svelte-16aefqu.svelte-16aefqu.svelte-16aefqu.svelte-16aefqu{font-size:1.5em;font-weight:bold;padding-bottom:5px}div.rank.svelte-16aefqu.svelte-16aefqu.svelte-16aefqu.svelte-16aefqu.svelte-16aefqu{font-size:1.2em;font-weight:bold}:root{--purple:rgb(123, 31, 162);--violet:rgb(103, 58, 183);--pink:rgb(244, 143, 177)}@keyframes svelte-16aefqu-background-pan{from{background-position:0% center}to{background-position:-200% center}}@keyframes svelte-16aefqu-scale{from,to{transform:scale(0)}50%{transform:scale(1)}}@keyframes svelte-16aefqu-rotate{from{transform:rotate(0deg)}to{transform:rotate(180deg)}}div.svelte-16aefqu>.glitter.svelte-16aefqu.svelte-16aefqu.svelte-16aefqu.svelte-16aefqu{display:inline-block;position:relative}div.svelte-16aefqu>.glitter.svelte-16aefqu>.glitter-star.svelte-16aefqu.svelte-16aefqu.svelte-16aefqu{--size:clamp(20px, 1.5vw, 30px);animation:svelte-16aefqu-scale 700ms ease forwards;display:block;height:var(--size);left:var(--star-left);position:absolute;top:var(--star-top);width:var(--size)}div.svelte-16aefqu>.glitter.svelte-16aefqu>.glitter-star.svelte-16aefqu>svg.svelte-16aefqu.svelte-16aefqu{animation:svelte-16aefqu-rotate 1000ms linear infinite;display:block;opacity:0.7}div.svelte-16aefqu>.glitter.svelte-16aefqu>.glitter-star.svelte-16aefqu>svg.svelte-16aefqu>path.svelte-16aefqu{fill:var(--violet)}div.svelte-16aefqu>.glitter.svelte-16aefqu>.glitter-text.svelte-16aefqu.svelte-16aefqu.svelte-16aefqu{animation:svelte-16aefqu-background-pan 3s linear infinite;background:linear-gradient( url('/fonts/Bondi.ttf.eot?#iefix') format('embedded-opentype');font-weight:normal;font-style:normal}header.svelte-1gjmpio.svelte-1gjmpio{background:#618174;margin:0}header.svelte-1gjmpio.svelte-1gjmpio{position:sticky;display:grid;grid-template-columns:1fr 1fr 1fr}h1.svelte-1gjmpio.svelte-1gjmpio{font-family:'Bondi'}h1.svelte-1gjmpio.svelte-1gjmpio{margin:0;text-align:left;display:flex;justify-self:center;align-self:center}img.svelte-1gjmpio.svelte-1gjmpio{cursor:pointer;max-width:40px;padding:7px 20px;justify-self:left}nav.svelte-1gjmpio.svelte-1gjmpio{display:flex;justify-content:right}nav.svelte-1gjmpio button.svelte-1gjmpio{margin:7px 20px;border-radius:4px}div.outer.svelte-16aefqu{max-width:960px;margin:40px auto}:root{--purple:rgb(123, 31, 162);--violet:rgb(103, 58, 183);--pink:rgb(244, 143, 177)}@keyframes svelte-16aefqu-background-pan{from{background-position:0% center}to{background-position:-200% center}}@keyframes svelte-16aefqu-scale{from,to{transform:scale(0)}50%{transform:scale(1)}}@keyframes svelte-16aefqu-rotate{from{transform:rotate(0deg)}to{transform:rotate(180deg)}}main.svelte-qtbld7{text-align:center}div.cards.svelte-qtbld7{display:grid;grid-template-columns:1fr 1fr;grid-gap:20px}img.svelte-qtbld7{width:60px}form.svelte-qtbld7{text-align:center}.form-field.svelte-qtbld7{padding:10px}.label.svelte-qtbld7{font-weight:bold}.inline-check.svelte-qtbld7{display:inline}.error.svelte-qtbld7{font-size:0.8em;font-weight:bold;color:red}.success.svelte-qtbld7{font-size:0.8em;font-weight:bold;color:green}div.top-grid.svelte-55f7si{display:grid;grid-template-columns:repeat(12, 1fr);height:85vh}div.all-users-sidebar.svelte-55f7si{grid-column:1 / span 2;background:white}div.a-user.svelte-55f7si{display:inline-block}div.status.svelte-55f7si{font-size:0.6em;font-weight:bold}div[class^="a-user"].svelte-55f7si:hover{text-decoration:underline;font-weight:bold;cursor:pointer}div.main-display.svelte-55f7si{grid-column:3 / span 10}.error.svelte-55f7si{font-size:0.8em;font-weight:bold;color:red}div.outer.svelte-16aefqu.svelte-16aefqu.svelte-16aefqu.svelte-16aefqu.svelte-16aefqu{max-width:960px;margin:40px auto}main.svelte-16aefqu.svelte-16aefqu.svelte-16aefqu.svelte-16aefqu.svelte-16aefqu{max-width:960px;margin:40px auto;text-align:center}.avatar.svelte-16aefqu.svelte-16aefqu.svelte-16aefqu.svelte-16aefqu.svelte-16aefqu{max-width:150px}section.main-stats.svelte-16aefqu.svelte-16aefqu.svelte-16aefqu.svelte-16aefqu.svelte-16aefqu{max-width:600px;margin:40px auto;text-align:center;display:grid;grid-template-columns:repeat(3, 1fr);grid-template-rows:repeat(3, 1fr)}section.main-stats.svelte-16aefqu h4.svelte-16aefqu.svelte-16aefqu.svelte-16aefqu.svelte-16aefqu{grid-column:1 / span 3}div.username.svelte-16aefqu.svelte-16aefqu.svelte-16aefqu.svelte-16aefqu.svelte-16aefqu{font-size:1.5em;font-weight:bold;padding-bottom:5px}div.rank.svelte-16aefqu.svelte-16aefqu.svelte-16aefqu.svelte-16aefqu.svelte-16aefqu{font-size:1.2em;font-weight:bold}:root{--purple:rgb(123, 31, 162);--violet:rgb(103, 58, 183);--pink:rgb(244, 143, 177)}@keyframes svelte-16aefqu-background-pan{from{background-position:0% center}to{background-position:-200% center}}@keyframes svelte-16aefqu-scale{from,to{transform:scale(0)}50%{transform:scale(1)}}@keyframes svelte-16aefqu-rotate{from{transform:rotate(0deg)}to{transform:rotate(180deg)}}div.svelte-16aefqu>.glitter.svelte-16aefqu.svelte-16aefqu.svelte-16aefqu.svelte-16aefqu{display:inline-block;position:relative}div.svelte-16aefqu>.glitter.svelte-16aefqu>.glitter-star.svelte-16aefqu.svelte-16aefqu.svelte-16aefqu{--size:clamp(20px, 1.5vw, 30px);animation:svelte-16aefqu-scale 700ms ease forwards;display:block;height:var(--size);left:var(--star-left);position:absolute;top:var(--star-top);width:var(--size)}div.svelte-16aefqu>.glitter.svelte-16aefqu>.glitter-star.svelte-16aefqu>svg.svelte-16aefqu.svelte-16aefqu{animation:svelte-16aefqu-rotate 1000ms linear infinite;display:block;opacity:0.7}div.svelte-16aefqu>.glitter.svelte-16aefqu>.glitter-star.svelte-16aefqu>svg.svelte-16aefqu>path.svelte-16aefqu{fill:var(--violet)}div.svelte-16aefqu>.glitter.svelte-16aefqu>.glitter-text.svelte-16aefqu.svelte-16aefqu.svelte-16aefqu{animation:svelte-16aefqu-background-pan 3s linear infinite;background:linear-gradient(
to right, to right,
var(--purple), var(--purple),
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)} );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-ajhpyu{display:grid;position:fixed;bottom:20px;right:20px;gap:5px;padding:5px;width:300px;height:400px;border:1px solid black}#chat_box.close.svelte-ajhpyu{gap:0px;padding:0px;width:auto;height:auto;grid:' chat ' auto
/ auto }#chat_box *{display:flex;flex-direction:column;position:relative;box-sizing:border-box;padding:0px;margin:auto}#chat_box .chat_item{display:flex;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 p{padding:10px;font-size:15px}button.svelte-1ktx2vi{border-radius:10px}button.svelte-pm9a8r.svelte-pm9a8r{display:flex;width:auto;cursor:pointer;outline:none;border:none;background-color:rgb(220, 220, 220)}button.svelte-pm9a8r p.svelte-pm9a8r{width:100%;text-align:center}button.svelte-pm9a8r.svelte-pm9a8r:hover{background-color:rgb(200, 200, 200)}button.svelte-pm9a8r.svelte-pm9a8r:active{background-color:rgb(190, 190, 190)}

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

@@ -967,7 +967,7 @@ var app = (function () {
/* node_modules/svelte-spa-router/Router.svelte generated by Svelte v3.53.1 */ /* node_modules/svelte-spa-router/Router.svelte generated by Svelte v3.53.1 */
const { Error: Error_1, Object: Object_1, console: console_1$6 } = globals; const { Error: Error_1, Object: Object_1, console: console_1$7 } = globals;
// (267:0) {:else} // (267:0) {:else}
function create_else_block$5(ctx) { function create_else_block$5(ctx) {
@@ -1156,7 +1156,7 @@ var app = (function () {
return block; return block;
} }
function create_fragment$i(ctx) { function create_fragment$j(ctx) {
let current_block_type_index; let current_block_type_index;
let if_block; let if_block;
let if_block_anchor; let if_block_anchor;
@@ -1229,7 +1229,7 @@ var app = (function () {
dispatch_dev("SvelteRegisterBlock", { dispatch_dev("SvelteRegisterBlock", {
block, block,
id: create_fragment$i.name, id: create_fragment$j.name,
type: "component", type: "component",
source: "", source: "",
ctx ctx
@@ -1430,7 +1430,7 @@ var app = (function () {
window.location.hash = href; window.location.hash = href;
} }
function instance$i($$self, $$props, $$invalidate) { function instance$j($$self, $$props, $$invalidate) {
let { $$slots: slots = {}, $$scope } = $$props; let { $$slots: slots = {}, $$scope } = $$props;
validate_slots('Router', slots, []); validate_slots('Router', slots, []);
let { routes = {} } = $$props; let { routes = {} } = $$props;
@@ -1747,7 +1747,7 @@ var app = (function () {
const writable_props = ['routes', 'prefix', 'restoreScrollState']; const writable_props = ['routes', 'prefix', 'restoreScrollState'];
Object_1.keys($$props).forEach(key => { Object_1.keys($$props).forEach(key => {
if (!~writable_props.indexOf(key) && key.slice(0, 2) !== '$$' && key !== 'slot') console_1$6.warn(`<Router> was created with unknown prop '${key}'`); if (!~writable_props.indexOf(key) && key.slice(0, 2) !== '$$' && key !== 'slot') console_1$7.warn(`<Router> was created with unknown prop '${key}'`);
}); });
function routeEvent_handler(event) { function routeEvent_handler(event) {
@@ -1845,7 +1845,7 @@ var app = (function () {
constructor(options) { constructor(options) {
super(options); super(options);
init(this, options, instance$i, create_fragment$i, safe_not_equal, { init(this, options, instance$j, create_fragment$j, safe_not_equal, {
routes: 3, routes: 3,
prefix: 4, prefix: 4,
restoreScrollState: 5 restoreScrollState: 5
@@ -1855,7 +1855,7 @@ var app = (function () {
component: this, component: this,
tagName: "Router", tagName: "Router",
options, options,
id: create_fragment$i.name id: create_fragment$j.name
}); });
} }
@@ -1887,7 +1887,7 @@ var app = (function () {
/* src/pages/NotFound.svelte generated by Svelte v3.53.1 */ /* src/pages/NotFound.svelte generated by Svelte v3.53.1 */
const file$g = "src/pages/NotFound.svelte"; const file$g = "src/pages/NotFound.svelte";
function create_fragment$h(ctx) { function create_fragment$i(ctx) {
let h1; let h1;
let t1; let t1;
let p0; let p0;
@@ -1956,7 +1956,7 @@ var app = (function () {
dispatch_dev("SvelteRegisterBlock", { dispatch_dev("SvelteRegisterBlock", {
block, block,
id: create_fragment$h.name, id: create_fragment$i.name,
type: "component", type: "component",
source: "", source: "",
ctx ctx
@@ -1965,7 +1965,7 @@ var app = (function () {
return block; return block;
} }
function instance$h($$self, $$props, $$invalidate) { function instance$i($$self, $$props, $$invalidate) {
let { $$slots: slots = {}, $$scope } = $$props; let { $$slots: slots = {}, $$scope } = $$props;
validate_slots('NotFound', slots, []); validate_slots('NotFound', slots, []);
const writable_props = []; const writable_props = [];
@@ -1981,13 +1981,13 @@ var app = (function () {
class NotFound extends SvelteComponentDev { class NotFound extends SvelteComponentDev {
constructor(options) { constructor(options) {
super(options); super(options);
init(this, options, instance$h, create_fragment$h, safe_not_equal, {}); init(this, options, instance$i, create_fragment$i, safe_not_equal, {});
dispatch_dev("SvelteRegisterComponent", { dispatch_dev("SvelteRegisterComponent", {
component: this, component: this,
tagName: "NotFound", tagName: "NotFound",
options, options,
id: create_fragment$h.name id: create_fragment$i.name
}); });
} }
} }
@@ -2031,7 +2031,7 @@ var app = (function () {
/* src/pieces/Header.svelte generated by Svelte v3.53.1 */ /* src/pieces/Header.svelte generated by Svelte v3.53.1 */
const { console: console_1$5 } = globals; const { console: console_1$6 } = globals;
const file$f = "src/pieces/Header.svelte"; const file$f = "src/pieces/Header.svelte";
// (24:39) // (24:39)
@@ -2114,7 +2114,7 @@ var app = (function () {
return block; return block;
} }
function create_fragment$g(ctx) { function create_fragment$h(ctx) {
let header; let header;
let img; let img;
let img_src_value; let img_src_value;
@@ -2233,7 +2233,7 @@ var app = (function () {
dispatch_dev("SvelteRegisterBlock", { dispatch_dev("SvelteRegisterBlock", {
block, block,
id: create_fragment$g.name, id: create_fragment$h.name,
type: "component", type: "component",
source: "", source: "",
ctx ctx
@@ -2242,7 +2242,7 @@ var app = (function () {
return block; return block;
} }
function instance$g($$self, $$props, $$invalidate) { function instance$h($$self, $$props, $$invalidate) {
let $location; let $location;
validate_store(location$1, 'location'); validate_store(location$1, 'location');
component_subscribe($$self, location$1, $$value => $$invalidate(0, $location = $$value)); component_subscribe($$self, location$1, $$value => $$invalidate(0, $location = $$value));
@@ -2260,7 +2260,7 @@ var app = (function () {
const writable_props = []; const writable_props = [];
Object.keys($$props).forEach(key => { Object.keys($$props).forEach(key => {
if (!~writable_props.indexOf(key) && key.slice(0, 2) !== '$$' && key !== 'slot') console_1$5.warn(`<Header> was created with unknown prop '${key}'`); if (!~writable_props.indexOf(key) && key.slice(0, 2) !== '$$' && key !== 'slot') console_1$6.warn(`<Header> was created with unknown prop '${key}'`);
}); });
const click_handler = () => push('/'); const click_handler = () => push('/');
@@ -2298,13 +2298,13 @@ var app = (function () {
class Header extends SvelteComponentDev { class Header extends SvelteComponentDev {
constructor(options) { constructor(options) {
super(options); super(options);
init(this, options, instance$g, create_fragment$g, safe_not_equal, {}); init(this, options, instance$h, create_fragment$h, safe_not_equal, {});
dispatch_dev("SvelteRegisterComponent", { dispatch_dev("SvelteRegisterComponent", {
component: this, component: this,
tagName: "Header", tagName: "Header",
options, options,
id: create_fragment$g.name id: create_fragment$h.name
}); });
} }
} }
@@ -2533,7 +2533,7 @@ var app = (function () {
return block; return block;
} }
function create_fragment$f(ctx) { function create_fragment$g(ctx) {
let div; let div;
let if_block = /*user*/ ctx[0] !== undefined && create_if_block$7(ctx); let if_block = /*user*/ ctx[0] !== undefined && create_if_block$7(ctx);
@@ -2575,7 +2575,7 @@ var app = (function () {
dispatch_dev("SvelteRegisterBlock", { dispatch_dev("SvelteRegisterBlock", {
block, block,
id: create_fragment$f.name, id: create_fragment$g.name,
type: "component", type: "component",
source: "", source: "",
ctx ctx
@@ -2584,7 +2584,7 @@ var app = (function () {
return block; return block;
} }
function instance$f($$self, $$props, $$invalidate) { function instance$g($$self, $$props, $$invalidate) {
let { $$slots: slots = {}, $$scope } = $$props; let { $$slots: slots = {}, $$scope } = $$props;
validate_slots('GenerateUserDisplay', slots, []); validate_slots('GenerateUserDisplay', slots, []);
let { user } = $$props; let { user } = $$props;
@@ -2731,13 +2731,13 @@ var app = (function () {
class GenerateUserDisplay extends SvelteComponentDev { class GenerateUserDisplay extends SvelteComponentDev {
constructor(options) { constructor(options) {
super(options); super(options);
init(this, options, instance$f, create_fragment$f, safe_not_equal, { user: 0, primary: 4 }); init(this, options, instance$g, create_fragment$g, safe_not_equal, { user: 0, primary: 4 });
dispatch_dev("SvelteRegisterComponent", { dispatch_dev("SvelteRegisterComponent", {
component: this, component: this,
tagName: "GenerateUserDisplay", tagName: "GenerateUserDisplay",
options, options,
id: create_fragment$f.name id: create_fragment$g.name
}); });
} }
@@ -2758,42 +2758,296 @@ var app = (function () {
} }
} }
/* src/pieces/chat/Layout_home.svelte generated by Svelte v3.53.1 */ /* src/pieces/chat/Buttons.svelte generated by Svelte v3.53.1 */
const file$d = "src/pieces/chat/Layout_home.svelte"; const { console: console_1$5 } = globals;
const file$d = "src/pieces/chat/Buttons.svelte";
function create_fragment$e(ctx) { function create_fragment$f(ctx) {
let button; let button;
let p;
let button_class_value;
let current;
let mounted; let mounted;
let dispose; let dispose;
const default_slot_template = /*#slots*/ ctx[6].default;
const default_slot = create_slot(default_slot_template, ctx, /*$$scope*/ ctx[5], null);
const block = { const block = {
c: function create() { c: function create() {
button = element("button"); button = element("button");
button.textContent = "home"; p = element("p");
add_location(button, file$d, 8, 0, 105); if (default_slot) default_slot.c();
attr_dev(p, "class", "svelte-pm9a8r");
add_location(p, file$d, 18, 1, 367);
attr_dev(button, "class", button_class_value = "" + (null_to_empty(/*my_class*/ ctx[1]) + " svelte-pm9a8r"));
attr_dev(button, "id", /*my_id*/ ctx[0]);
add_location(button, file$d, 17, 0, 304);
}, },
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");
}, },
m: function mount(target, anchor) { m: function mount(target, anchor) {
insert_dev(target, button, anchor); insert_dev(target, button, anchor);
append_dev(button, p);
if (default_slot) {
default_slot.m(p, null);
}
current = true;
if (!mounted) { if (!mounted) {
dispose = listen_dev(button, "click", /*click_handler*/ ctx[2], false, false, false); dispose = listen_dev(button, "click", /*update_layout*/ ctx[2], false, false, false);
mounted = true; mounted = true;
} }
}, },
p: noop, p: function update(ctx, [dirty]) {
i: noop, if (default_slot) {
o: noop, if (default_slot.p && (!current || dirty & /*$$scope*/ 32)) {
update_slot_base(
default_slot,
default_slot_template,
ctx,
/*$$scope*/ ctx[5],
!current
? get_all_dirty_from_scope(/*$$scope*/ ctx[5])
: get_slot_changes(default_slot_template, /*$$scope*/ ctx[5], dirty, null),
null
);
}
}
if (!current || dirty & /*my_class*/ 2 && button_class_value !== (button_class_value = "" + (null_to_empty(/*my_class*/ ctx[1]) + " svelte-pm9a8r"))) {
attr_dev(button, "class", button_class_value);
}
if (!current || dirty & /*my_id*/ 1) {
attr_dev(button, "id", /*my_id*/ ctx[0]);
}
},
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) { d: function destroy(detaching) {
if (detaching) detach_dev(button); if (detaching) detach_dev(button);
if (default_slot) default_slot.d(detaching);
mounted = false; mounted = false;
dispose(); dispose();
} }
}; };
dispatch_dev("SvelteRegisterBlock", {
block,
id: create_fragment$f.name,
type: "component",
source: "",
ctx
});
return block;
}
function instance$f($$self, $$props, $$invalidate) {
let { $$slots: slots = {}, $$scope } = $$props;
validate_slots('Buttons', slots, ['default']);
let { my_id = "" } = $$props;
let { my_class = "" } = $$props;
let { layout = "" } = $$props;
let { new_layout = "" } = $$props;
function update_layout() {
$$invalidate(3, layout = new_layout);
console.log(layout);
}
const writable_props = ['my_id', 'my_class', 'layout', 'new_layout'];
Object.keys($$props).forEach(key => {
if (!~writable_props.indexOf(key) && key.slice(0, 2) !== '$$' && key !== 'slot') console_1$5.warn(`<Buttons> was created with unknown prop '${key}'`);
});
$$self.$$set = $$props => {
if ('my_id' in $$props) $$invalidate(0, my_id = $$props.my_id);
if ('my_class' in $$props) $$invalidate(1, my_class = $$props.my_class);
if ('layout' in $$props) $$invalidate(3, layout = $$props.layout);
if ('new_layout' in $$props) $$invalidate(4, new_layout = $$props.new_layout);
if ('$$scope' in $$props) $$invalidate(5, $$scope = $$props.$$scope);
};
$$self.$capture_state = () => ({
my_id,
my_class,
layout,
new_layout,
update_layout
});
$$self.$inject_state = $$props => {
if ('my_id' in $$props) $$invalidate(0, my_id = $$props.my_id);
if ('my_class' in $$props) $$invalidate(1, my_class = $$props.my_class);
if ('layout' in $$props) $$invalidate(3, layout = $$props.layout);
if ('new_layout' in $$props) $$invalidate(4, new_layout = $$props.new_layout);
};
if ($$props && "$$inject" in $$props) {
$$self.$inject_state($$props.$$inject);
}
return [my_id, my_class, update_layout, layout, new_layout, $$scope, slots];
}
class Buttons extends SvelteComponentDev {
constructor(options) {
super(options);
init(this, options, instance$f, create_fragment$f, safe_not_equal, {
my_id: 0,
my_class: 1,
layout: 3,
new_layout: 4
});
dispatch_dev("SvelteRegisterComponent", {
component: this,
tagName: "Buttons",
options,
id: create_fragment$f.name
});
}
get my_id() {
throw new Error("<Buttons>: Props cannot be read directly from the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
}
set my_id(value) {
throw new Error("<Buttons>: Props cannot be set directly on the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
}
get my_class() {
throw new Error("<Buttons>: Props cannot be read directly from the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
}
set my_class(value) {
throw new Error("<Buttons>: Props cannot be set directly on the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
}
get layout() {
throw new Error("<Buttons>: Props cannot be read directly from the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
}
set layout(value) {
throw new Error("<Buttons>: Props cannot be set directly on the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
}
get new_layout() {
throw new Error("<Buttons>: Props cannot be read directly from the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
}
set new_layout(value) {
throw new Error("<Buttons>: Props cannot be set directly on the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
}
}
/* src/pieces/chat/Layout_home.svelte generated by Svelte v3.53.1 */
// (7:0) <Button bind:layout new_layout="close" my_class="chat_item" my_id="#chat_close">
function create_default_slot$3(ctx) {
let t;
const block = {
c: function create() {
t = text("home");
},
m: function mount(target, anchor) {
insert_dev(target, t, anchor);
},
d: function destroy(detaching) {
if (detaching) detach_dev(t);
}
};
dispatch_dev("SvelteRegisterBlock", {
block,
id: create_default_slot$3.name,
type: "slot",
source: "(7:0) <Button bind:layout new_layout=\\\"close\\\" my_class=\\\"chat_item\\\" my_id=\\\"#chat_close\\\">",
ctx
});
return block;
}
function create_fragment$e(ctx) {
let button;
let updating_layout;
let current;
function button_layout_binding(value) {
/*button_layout_binding*/ ctx[1](value);
}
let button_props = {
new_layout: "close",
my_class: "chat_item",
my_id: "#chat_close",
$$slots: { default: [create_default_slot$3] },
$$scope: { ctx }
};
if (/*layout*/ ctx[0] !== void 0) {
button_props.layout = /*layout*/ ctx[0];
}
button = new Buttons({ props: button_props, $$inline: true });
binding_callbacks.push(() => bind(button, 'layout', button_layout_binding));
const block = {
c: function create() {
create_component(button.$$.fragment);
},
l: function claim(nodes) {
throw new Error("options.hydrate only works if the component was compiled with the `hydratable: true` option");
},
m: function mount(target, anchor) {
mount_component(button, target, anchor);
current = true;
},
p: function update(ctx, [dirty]) {
const button_changes = {};
if (dirty & /*$$scope*/ 4) {
button_changes.$$scope = { dirty, ctx };
}
if (!updating_layout && dirty & /*layout*/ 1) {
updating_layout = true;
button_changes.layout = /*layout*/ ctx[0];
add_flush_callback(() => updating_layout = false);
}
button.$set(button_changes);
},
i: function intro(local) {
if (current) return;
transition_in(button.$$.fragment, local);
current = true;
},
o: function outro(local) {
transition_out(button.$$.fragment, local);
current = false;
},
d: function destroy(detaching) {
destroy_component(button, detaching);
}
};
dispatch_dev("SvelteRegisterBlock", { dispatch_dev("SvelteRegisterBlock", {
block, block,
id: create_fragment$e.name, id: create_fragment$e.name,
@@ -2810,10 +3064,6 @@ var app = (function () {
validate_slots('Layout_home', slots, []); validate_slots('Layout_home', slots, []);
let { layout } = $$props; let { layout } = $$props;
function update_layout(new_layout) {
$$invalidate(1, layout = new_layout);
}
$$self.$$.on_mount.push(function () { $$self.$$.on_mount.push(function () {
if (layout === undefined && !('layout' in $$props || $$self.$$.bound[$$self.$$.props['layout']])) { if (layout === undefined && !('layout' in $$props || $$self.$$.bound[$$self.$$.props['layout']])) {
console.warn("<Layout_home> was created without expected prop 'layout'"); console.warn("<Layout_home> was created without expected prop 'layout'");
@@ -2826,31 +3076,32 @@ var app = (function () {
if (!~writable_props.indexOf(key) && key.slice(0, 2) !== '$$' && key !== 'slot') console.warn(`<Layout_home> was created with unknown prop '${key}'`); if (!~writable_props.indexOf(key) && key.slice(0, 2) !== '$$' && key !== 'slot') console.warn(`<Layout_home> was created with unknown prop '${key}'`);
}); });
const click_handler = function () { function button_layout_binding(value) {
update_layout('close'); layout = value;
}; $$invalidate(0, layout);
}
$$self.$$set = $$props => { $$self.$$set = $$props => {
if ('layout' in $$props) $$invalidate(1, layout = $$props.layout); if ('layout' in $$props) $$invalidate(0, layout = $$props.layout);
}; };
$$self.$capture_state = () => ({ layout, update_layout }); $$self.$capture_state = () => ({ Button: Buttons, layout });
$$self.$inject_state = $$props => { $$self.$inject_state = $$props => {
if ('layout' in $$props) $$invalidate(1, layout = $$props.layout); if ('layout' in $$props) $$invalidate(0, layout = $$props.layout);
}; };
if ($$props && "$$inject" in $$props) { if ($$props && "$$inject" in $$props) {
$$self.$inject_state($$props.$$inject); $$self.$inject_state($$props.$$inject);
} }
return [update_layout, layout, click_handler]; return [layout, button_layout_binding];
} }
class Layout_home extends SvelteComponentDev { class Layout_home extends SvelteComponentDev {
constructor(options) { constructor(options) {
super(options); super(options);
init(this, options, instance$e, create_fragment$e, safe_not_equal, { layout: 1 }); init(this, options, instance$e, create_fragment$e, safe_not_equal, { layout: 0 });
dispatch_dev("SvelteRegisterComponent", { dispatch_dev("SvelteRegisterComponent", {
component: this, component: this,
@@ -2872,33 +3123,65 @@ var app = (function () {
/* src/pieces/chat/Chat.svelte generated by Svelte v3.53.1 */ /* src/pieces/chat/Chat.svelte generated by Svelte v3.53.1 */
const file$c = "src/pieces/chat/Chat.svelte"; const file$c = "src/pieces/chat/Chat.svelte";
// (19:1) {:else} // (30:1) {:else}
function create_else_block$4(ctx) { function create_else_block$4(ctx) {
let button; let button;
let mounted; let updating_layout;
let dispose; let current;
function button_layout_binding(value) {
/*button_layout_binding*/ ctx[2](value);
}
let button_props = {
new_layout: "home",
my_class: "chat_item",
my_id: "#chat_chat",
$$slots: { default: [create_default_slot$2] },
$$scope: { ctx }
};
if (/*layout*/ ctx[0] !== void 0) {
button_props.layout = /*layout*/ ctx[0];
}
button = new Buttons({ props: button_props, $$inline: true });
binding_callbacks.push(() => bind(button, 'layout', button_layout_binding));
const block = { const block = {
c: function create() { c: function create() {
button = element("button"); create_component(button.$$.fragment);
button.textContent = "chat";
add_location(button, file$c, 20, 2, 409);
}, },
m: function mount(target, anchor) { m: function mount(target, anchor) {
insert_dev(target, button, anchor); mount_component(button, target, anchor);
current = true;
if (!mounted) { },
dispose = listen_dev(button, "click", /*click_handler*/ ctx[3], false, false, false); p: function update(ctx, dirty) {
mounted = true; const button_changes = {};
}
if (dirty & /*$$scope*/ 64) {
button_changes.$$scope = { dirty, ctx };
}
if (!updating_layout && dirty & /*layout*/ 1) {
updating_layout = true;
button_changes.layout = /*layout*/ ctx[0];
add_flush_callback(() => updating_layout = false);
}
button.$set(button_changes);
},
i: function intro(local) {
if (current) return;
transition_in(button.$$.fragment, local);
current = true;
},
o: function outro(local) {
transition_out(button.$$.fragment, local);
current = false;
}, },
p: noop,
i: noop,
o: noop,
d: function destroy(detaching) { d: function destroy(detaching) {
if (detaching) detach_dev(button); destroy_component(button, detaching);
mounted = false;
dispose();
} }
}; };
@@ -2906,27 +3189,27 @@ var app = (function () {
block, block,
id: create_else_block$4.name, id: create_else_block$4.name,
type: "else", type: "else",
source: "(19:1) {:else}", source: "(30:1) {:else}",
ctx ctx
}); });
return block; return block;
} }
// (17:1) {#if active_layout === "home"} // (28:1) {#if layout === "home"}
function create_if_block$6(ctx) { function create_if_block$6(ctx) {
let homelayout; let homelayout;
let updating_layout; let updating_layout;
let current; let current;
function homelayout_layout_binding(value) { function homelayout_layout_binding(value) {
/*homelayout_layout_binding*/ ctx[2](value); /*homelayout_layout_binding*/ ctx[1](value);
} }
let homelayout_props = {}; let homelayout_props = {};
if (/*active_layout*/ ctx[0] !== void 0) { if (/*layout*/ ctx[0] !== void 0) {
homelayout_props.layout = /*active_layout*/ ctx[0]; homelayout_props.layout = /*layout*/ ctx[0];
} }
homelayout = new Layout_home({ props: homelayout_props, $$inline: true }); homelayout = new Layout_home({ props: homelayout_props, $$inline: true });
@@ -2943,9 +3226,9 @@ var app = (function () {
p: function update(ctx, dirty) { p: function update(ctx, dirty) {
const homelayout_changes = {}; const homelayout_changes = {};
if (!updating_layout && dirty & /*active_layout*/ 1) { if (!updating_layout && dirty & /*layout*/ 1) {
updating_layout = true; updating_layout = true;
homelayout_changes.layout = /*active_layout*/ ctx[0]; homelayout_changes.layout = /*layout*/ ctx[0];
add_flush_callback(() => updating_layout = false); add_flush_callback(() => updating_layout = false);
} }
@@ -2969,7 +3252,34 @@ var app = (function () {
block, block,
id: create_if_block$6.name, id: create_if_block$6.name,
type: "if", type: "if",
source: "(17:1) {#if active_layout === \\\"home\\\"}", source: "(28:1) {#if layout === \\\"home\\\"}",
ctx
});
return block;
}
// (31:2) <Button bind:layout new_layout="home" my_class="chat_item" my_id="#chat_chat">
function create_default_slot$2(ctx) {
let t;
const block = {
c: function create() {
t = text("chat");
},
m: function mount(target, anchor) {
insert_dev(target, t, anchor);
},
d: function destroy(detaching) {
if (detaching) detach_dev(t);
}
};
dispatch_dev("SvelteRegisterBlock", {
block,
id: create_default_slot$2.name,
type: "slot",
source: "(31:2) <Button bind:layout new_layout=\\\"home\\\" my_class=\\\"chat_item\\\" my_id=\\\"#chat_chat\\\">",
ctx ctx
}); });
@@ -2986,7 +3296,7 @@ var app = (function () {
const if_blocks = []; const if_blocks = [];
function select_block_type(ctx, dirty) { function select_block_type(ctx, dirty) {
if (/*active_layout*/ ctx[0] === "home") return 0; if (/*layout*/ ctx[0] === "home") return 0;
return 1; return 1;
} }
@@ -2997,9 +3307,9 @@ 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(/*active_layout*/ ctx[0]) + " svelte-ptu7yj")); attr_dev(div, "class", div_class_value = "" + (null_to_empty(/*layout*/ ctx[0]) + " svelte-ajhpyu"));
attr_dev(div, "id", "chat_box"); attr_dev(div, "id", "chat_box");
add_location(div, file$c, 15, 0, 179); add_location(div, file$c, 26, 0, 496);
}, },
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");
@@ -3036,7 +3346,7 @@ var app = (function () {
if_block.m(div, null); if_block.m(div, null);
} }
if (!current || dirty & /*active_layout*/ 1 && div_class_value !== (div_class_value = "" + (null_to_empty(/*active_layout*/ ctx[0]) + " svelte-ptu7yj"))) { if (!current || dirty & /*layout*/ 1 && div_class_value !== (div_class_value = "" + (null_to_empty(/*layout*/ ctx[0]) + " svelte-ajhpyu"))) {
attr_dev(div, "class", div_class_value); attr_dev(div, "class", div_class_value);
} }
}, },
@@ -3069,12 +3379,10 @@ 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 active_layout = "home"; let room = "";
let admin = false;
function update_layout(new_layout) { let last_layout = "";
$$invalidate(0, active_layout = new_layout); let layout = "close";
}
const writable_props = []; const writable_props = [];
Object.keys($$props).forEach(key => { Object.keys($$props).forEach(key => {
@@ -3082,25 +3390,36 @@ var app = (function () {
}); });
function homelayout_layout_binding(value) { function homelayout_layout_binding(value) {
active_layout = value; layout = value;
$$invalidate(0, active_layout); $$invalidate(0, layout);
} }
const click_handler = function () { function button_layout_binding(value) {
update_layout('home'); layout = value;
}; $$invalidate(0, layout);
}
$$self.$capture_state = () => ({ HomeLayout: Layout_home, active_layout, update_layout }); $$self.$capture_state = () => ({
HomeLayout: Layout_home,
Button: Buttons,
room,
admin,
last_layout,
layout
});
$$self.$inject_state = $$props => { $$self.$inject_state = $$props => {
if ('active_layout' in $$props) $$invalidate(0, active_layout = $$props.active_layout); if ('room' in $$props) room = $$props.room;
if ('admin' in $$props) admin = $$props.admin;
if ('last_layout' in $$props) last_layout = $$props.last_layout;
if ('layout' in $$props) $$invalidate(0, layout = $$props.layout);
}; };
if ($$props && "$$inject" in $$props) { if ($$props && "$$inject" in $$props) {
$$self.$inject_state($$props.$$inject); $$self.$inject_state($$props.$$inject);
} }
return [active_layout, update_layout, homelayout_layout_binding, click_handler]; return [layout, homelayout_layout_binding, button_layout_binding];
} }
class Chat extends SvelteComponentDev { class Chat extends SvelteComponentDev {

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

File diff suppressed because one or more lines are too long

1
srcs/requirements/svelte/api_front/public/index.html
View File

@@ -7,7 +7,6 @@
<title>Svelte app</title> <title>Svelte app</title>
<link rel='icon' type='image/png' href='/favicon.png'> <link rel='icon' type='image/png' href='/favicon.png'>
<link rel='stylesheet' href='/build/extra.css'>
<link rel='stylesheet' href='/global.css'> <link rel='stylesheet' href='/global.css'>
<link rel='stylesheet' href='/build/bundle.css'> <link rel='stylesheet' href='/build/bundle.css'>

2
srcs/requirements/svelte/api_front/rollup.config.js
View File

@@ -48,7 +48,7 @@ export default {
}), }),
// we'll extract any component CSS out into // we'll extract any component CSS out into
// a separate file - better for performance // a separate file - better for performance
css({ output: 'extra.css' }), css({ output: 'bundle.css' }),
// If you have external dependencies installed from // If you have external dependencies installed from
// npm, you'll most likely need these plugins. In // npm, you'll most likely need these plugins. In

56
srcs/requirements/svelte/api_front/src/pieces/chat/Buttons.svelte Normal file
View File

@@ -0,0 +1,56 @@
<!--
<Button bind:layout={layout} new_layout="" my_class="" my_id"">
value
</Button>
-->
<script lang="ts">
export let my_id = "";
export let my_class = "";
export let layout = "";
export let new_layout = "";
function update_layout() {
layout = new_layout;
console.log(layout);
}
</script>
<button class={my_class} id={my_id} on:click={update_layout}>
<p><slot></slot></p>
</button>
<style>
button {
display: flex;
width: auto;
cursor: pointer;
outline: none;
border: none;
background-color: rgb(220, 220, 220);
}
button p {
width: 100%;
text-align: center;
}
button:hover {
background-color: rgb(200, 200, 200);
}
button:active {
background-color: rgb(190, 190, 190);
}
/* for btn list
add or remove '.btn' to toggle the hover effect
.list_btn button {
margin: 0px;
background-color: transparent;
}
.list_btn {
background-color: rgb(240, 240, 240);
}
*/
</style>

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

@@ -1,35 +1,124 @@
<script> <script lang="ts">
import HomeLayout from './Layout_home.svelte'; import HomeLayout from './Layout_home.svelte';
import Button from './Buttons.svelte';
let active_layout = "home"; let room = "";
let admin = false;
let last_layout = "";
let layout = "close";
/*
function update_layout(new_layout) { function update_layout(new_layout) {
last_layout = active_layout;
active_layout = new_layout; active_layout = new_layout;
} }
/* layout close
layout home
layout room
layout new
layout settings
layout room_set
layout protected
layout create
layout mute
layout user
*/ */
</script> </script>
<div class={active_layout} id="chat_box"> <div class={layout} id="chat_box">
{#if active_layout === "home"} {#if layout === "home"}
<HomeLayout bind:layout={active_layout} /> <HomeLayout bind:layout={layout} />
{:else} {:else}
<!-- https://stackoverflow.com/questions/58262380/how-to-pass-parameters-to-onclick-in-svelte --> <Button bind:layout new_layout="home" my_class="chat_item" my_id="#chat_chat">
<button on:click={function(){update_layout('home')}}>chat</button> chat
</Button>
{/if} {/if}
</div> </div>
<style> <style>
/* chat_box default style
*/
#chat_box { #chat_box {
display: grid;
position: fixed; position: fixed;
bottom: 20px; bottom: 20px;
right: 20px; right: 20px;
height: 50px;
width: 50px; gap: 5px;
border: 1px solid blue; padding: 5px;
width: 300px;
height: 400px;
border: 1px solid black;
} }
/* style if chat_box is closed
*/
#chat_box.close {
gap: 0px;
padding: 0px;
width: auto;
height: auto;
grid:
' chat ' auto
/ auto ;
}
/* * * * * * * * *
GLOBAL STYLES
* * * * * * * * */
/* for all childrens of chat_box
*/
:global(#chat_box *) {
display: flex;
flex-direction: column;
position: relative;
box-sizing: border-box;
padding: 0px;
margin: auto;
}
:global(#chat_box .chat_item) {
display: flex;
width: 100%;
height: 100%;
}
/* all grid elements names
*/
:global(#chat_box .chat_item#chat_chat ){grid-area: chat;}
:global(#chat_box .chat_item#chat_close ){grid-area: close;}
:global(#chat_box .chat_item#chat_new ){grid-area: new;}
:global(#chat_box .chat_item#chat_settings ){grid-area: settings;}
:global(#chat_box .chat_item#chat_room_name ){grid-area: room_name;}
:global(#chat_box .chat_item#chat_send ){grid-area: send;}
:global(#chat_box .chat_item#chat_create ){grid-area: create;}
:global(#chat_box .chat_item#chat_user ){grid-area: user;}
:global(#chat_box .chat_item#chat_back ){grid-area: back;}
:global(#chat_box .chat_item#chat_panel_home ){grid-area: panel_home;}
:global(#chat_box .chat_item#chat_panel_new ){grid-area: panel_new;}
:global(#chat_box .chat_item#chat_panel_msg ){grid-area: panel_msg;}
:global(#chat_box .chat_item#chat_panel_write ){grid-area: panel_write;}
:global(#chat_box .chat_item#chat_panel_settings ){grid-area: panel_settings;}
:global(#chat_box .chat_item#chat_panel_room_set ){grid-area: panel_room_set;}
:global(#chat_box .chat_item#chat_panel_protected ){grid-area: panel_protected;}
:global(#chat_box .chat_item#chat_panel_create ){grid-area: panel_create;}
:global(#chat_box .chat_item#chat_panel_user ){grid-area: panel_user;}
:global(#chat_box .chat_item#chat_panel_mute ){grid-area: panel_mute;}
/* all p
*/
:global(#chat_box p) {
padding: 10px;
font-size: 15px;
}
</style> </style>

12
srcs/requirements/svelte/api_front/src/pieces/chat/Layout_home.svelte
View File

@@ -1,17 +1,13 @@
<script> <script>
import Button from './Buttons.svelte';
export let layout; export let layout;
function update_layout(new_layout) {
layout = new_layout;
}
</script> </script>
<button on:click={function(){update_layout('close')}}>home</button> <Button bind:layout new_layout="close" my_class="chat_item" my_id="#chat_close">
home
</Button>
<style> <style>
#chat_box.home {
height: 500px;
width: 500px;
}
</style> </style>

79
srcs/requirements/svelte/api_front/src/styles/chat/chat.css
View File

@@ -1,79 +0,0 @@
@import 'chat__global.css';
@import 'layout_close.css';
@import 'layout_home.css';
@import 'layout_room.css';
@import 'layout_new.css';
@import 'layout_settings.css';
@import 'layout_room_set.css';
@import 'layout_protected.css';
@import 'layout_create.css';
@import 'layout_user.css';
@import 'layout_mute.css';
@import 'chat_panels.css';
@import 'chat_buttons.css';
@import 'chat_back.css';
@import 'chat_close.css';
@import 'chat_write.css';
@import 'chat_msg.css';
@import 'chat_blocked.css';
@import 'chat_form.css';
/*
GRID
*/
#chat_box * {
display: flex;
flex-direction: column;
position: relative;
box-sizing: border-box;
padding: 0px;
margin: auto;
}
#chat_box .chat_item {
display: none;
/*
border: 1px solid black;
*/
width: 100%;
height: 100%;
}
.chat_item#chat_chat { grid-area: chat;}
.chat_item#chat_close { grid-area: close;}
.chat_item#chat_new { grid-area: new;}
.chat_item#chat_settings { grid-area: settings;}
.chat_item#chat_room_name { grid-area: room_name;}
.chat_item#chat_send { grid-area: send;}
.chat_item#chat_create { grid-area: create;}
.chat_item#chat_user { grid-area: user;}
.chat_item#chat_back { grid-area: back;}
.chat_item#chat_panel_home { grid-area: panel_home;}
.chat_item#chat_panel_new { grid-area: panel_new;}
.chat_item#chat_panel_msg { grid-area: panel_msg;}
.chat_item#chat_panel_write { grid-area: panel_write;}
.chat_item#chat_panel_settings { grid-area: panel_settings;}
.chat_item#chat_panel_room_set { grid-area: panel_room_set;}
.chat_item#chat_panel_protected { grid-area: panel_protected;}
.chat_item#chat_panel_create { grid-area: panel_create;}
.chat_item#chat_panel_user { grid-area: panel_user;}
.chat_item#chat_panel_mute { grid-area: panel_mute;}
#chat_box {
display: grid;
position: fixed;
bottom: 20px;
right: 20px;
gap: 5px;
padding: 5px;
width: 300px;
height: 400px;
border: 1px solid black;
}

9
srcs/requirements/svelte/api_front/src/styles/chat/chat__global.css
View File

@@ -11,15 +11,6 @@
} }
/* p in chat_box
*/
#chat_box p {
padding: 10px;
font-size: 15px;
font-family: Cantarell;
}
/* show child only if it's alone /* show child only if it's alone
*/ */
#chat_box .__show_if_only_child { #chat_box .__show_if_only_child {

1
srcs/requirements/svelte/api_front/src/styles/chat/chat_back.css
View File

@@ -1 +0,0 @@

31
srcs/requirements/svelte/api_front/src/styles/chat/chat_buttons.css
View File

@@ -1,36 +1,5 @@
#chat_box button {
display: flex;
width: auto;
cursor: pointer;
outline: none;
border: none;
background-color: rgb(220, 220, 220);
}
#chat_box button p {
width: 100%;
text-align: center;
}
#chat_box button.chat_item:hover,
#chat_box .chat_item button:hover {
background-color: rgb(200, 200, 200);
}
#chat_box button.chat_item:active,
#chat_box .chat_item button:active {
background-color: rgb(190, 190, 190);
}
/* BTN LIST
add or remove '.btn' to toggle the hover effect
*/
#chat_box .list_btn button {
margin: 0px;
background-color: transparent;
}
#chat_box .list_btn {
background-color: rgb(240, 240, 240);
}
/* BACK /* BACK

1
tests_hugo/chat_node/chat_client/style/chat_back.css
View File

@@ -1 +0,0 @@