
(function(l, r) { if (!l || l.getElementById('livereloadscript')) return; r = l.createElement('script'); r.async = 1; r.src = '//' + (self.location.host || 'localhost').split(':')[0] + ':35729/livereload.js?snipver=1'; r.id = 'livereloadscript'; l.getElementsByTagName('head')[0].appendChild(r) })(self.document);
var app = (function () {
    'use strict';

    function noop() { }
    function assign(tar, src) {
        // @ts-ignore
        for (const k in src)
            tar[k] = src[k];
        return tar;
    }
    function is_promise(value) {
        return value && typeof value === 'object' && typeof value.then === 'function';
    }
    function add_location(element, file, line, column, char) {
        element.__svelte_meta = {
            loc: { file, line, column, char }
        };
    }
    function run(fn) {
        return fn();
    }
    function blank_object() {
        return Object.create(null);
    }
    function run_all(fns) {
        fns.forEach(run);
    }
    function is_function(thing) {
        return typeof thing === 'function';
    }
    function safe_not_equal(a, b) {
        return a != a ? b == b : a !== b || ((a && typeof a === 'object') || typeof a === 'function');
    }
    let src_url_equal_anchor;
    function src_url_equal(element_src, url) {
        if (!src_url_equal_anchor) {
            src_url_equal_anchor = document.createElement('a');
        }
        src_url_equal_anchor.href = url;
        return element_src === src_url_equal_anchor.href;
    }
    function is_empty(obj) {
        return Object.keys(obj).length === 0;
    }
    function validate_store(store, name) {
        if (store != null && typeof store.subscribe !== 'function') {
            throw new Error(`'${name}' is not a store with a 'subscribe' method`);
        }
    }
    function subscribe(store, ...callbacks) {
        if (store == null) {
            return noop;
        }
        const unsub = store.subscribe(...callbacks);
        return unsub.unsubscribe ? () => unsub.unsubscribe() : unsub;
    }
    function component_subscribe(component, store, callback) {
        component.$$.on_destroy.push(subscribe(store, callback));
    }
    function create_slot(definition, ctx, $$scope, fn) {
        if (definition) {
            const slot_ctx = get_slot_context(definition, ctx, $$scope, fn);
            return definition[0](slot_ctx);
        }
    }
    function get_slot_context(definition, ctx, $$scope, fn) {
        return definition[1] && fn
            ? assign($$scope.ctx.slice(), definition[1](fn(ctx)))
            : $$scope.ctx;
    }
    function get_slot_changes(definition, $$scope, dirty, fn) {
        if (definition[2] && fn) {
            const lets = definition[2](fn(dirty));
            if ($$scope.dirty === undefined) {
                return lets;
            }
            if (typeof lets === 'object') {
                const merged = [];
                const len = Math.max($$scope.dirty.length, lets.length);
                for (let i = 0; i < len; i += 1) {
                    merged[i] = $$scope.dirty[i] | lets[i];
                }
                return merged;
            }
            return $$scope.dirty | lets;
        }
        return $$scope.dirty;
    }
    function update_slot_base(slot, slot_definition, ctx, $$scope, slot_changes, get_slot_context_fn) {
        if (slot_changes) {
            const slot_context = get_slot_context(slot_definition, ctx, $$scope, get_slot_context_fn);
            slot.p(slot_context, slot_changes);
        }
    }
    function get_all_dirty_from_scope($$scope) {
        if ($$scope.ctx.length > 32) {
            const dirty = [];
            const length = $$scope.ctx.length / 32;
            for (let i = 0; i < length; i++) {
                dirty[i] = -1;
            }
            return dirty;
        }
        return -1;
    }
    function null_to_empty(value) {
        return value == null ? '' : value;
    }
    function action_destroyer(action_result) {
        return action_result && is_function(action_result.destroy) ? action_result.destroy : noop;
    }
    function append(target, node) {
        target.appendChild(node);
    }
    function insert(target, node, anchor) {
        target.insertBefore(node, anchor || null);
    }
    function detach(node) {
        if (node.parentNode) {
            node.parentNode.removeChild(node);
        }
    }
    function destroy_each(iterations, detaching) {
        for (let i = 0; i < iterations.length; i += 1) {
            if (iterations[i])
                iterations[i].d(detaching);
        }
    }
    function element(name) {
        return document.createElement(name);
    }
    function svg_element(name) {
        return document.createElementNS('http://www.w3.org/2000/svg', name);
    }
    function text(data) {
        return document.createTextNode(data);
    }
    function space() {
        return text(' ');
    }
    function empty() {
        return text('');
    }
    function listen(node, event, handler, options) {
        node.addEventListener(event, handler, options);
        return () => node.removeEventListener(event, handler, options);
    }
    function prevent_default(fn) {
        return function (event) {
            event.preventDefault();
            // @ts-ignore
            return fn.call(this, event);
        };
    }
    function attr(node, attribute, value) {
        if (value == null)
            node.removeAttribute(attribute);
        else if (node.getAttribute(attribute) !== value)
            node.setAttribute(attribute, value);
    }
    function children(element) {
        return Array.from(element.childNodes);
    }
    function set_input_value(input, 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) {
        element.classList[toggle ? 'add' : 'remove'](name);
    }
    function custom_event(type, detail, { bubbles = false, cancelable = false } = {}) {
        const e = document.createEvent('CustomEvent');
        e.initCustomEvent(type, bubbles, cancelable, detail);
        return e;
    }

    let current_component;
    function set_current_component(component) {
        current_component = component;
    }
    function get_current_component() {
        if (!current_component)
            throw new Error('Function called outside component initialization');
        return current_component;
    }
    /**
     * The `onMount` function schedules a callback to run as soon as the component has been mounted to the DOM.
     * It must be called during the component's initialisation (but doesn't need to live *inside* the component;
     * it can be called from an external module).
     *
     * `onMount` does not run inside a [server-side component](/docs#run-time-server-side-component-api).
     *
     * https://svelte.dev/docs#run-time-svelte-onmount
     */
    function onMount(fn) {
        get_current_component().$$.on_mount.push(fn);
    }
    /**
     * Schedules a callback to run immediately after the component has been updated.
     *
     * The first time the callback runs will be after the initial `onMount`
     */
    function afterUpdate(fn) {
        get_current_component().$$.after_update.push(fn);
    }
    /**
     * Schedules a callback to run immediately before the component is unmounted.
     *
     * Out of `onMount`, `beforeUpdate`, `afterUpdate` and `onDestroy`, this is the
     * only one that runs inside a server-side component.
     *
     * https://svelte.dev/docs#run-time-svelte-ondestroy
     */
    function onDestroy(fn) {
        get_current_component().$$.on_destroy.push(fn);
    }
    /**
     * Creates an event dispatcher that can be used to dispatch [component events](/docs#template-syntax-component-directives-on-eventname).
     * Event dispatchers are functions that can take two arguments: `name` and `detail`.
     *
     * Component events created with `createEventDispatcher` create a
     * [CustomEvent](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent).
     * These events do not [bubble](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#Event_bubbling_and_capture).
     * The `detail` argument corresponds to the [CustomEvent.detail](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/detail)
     * property and can contain any type of data.
     *
     * https://svelte.dev/docs#run-time-svelte-createeventdispatcher
     */
    function createEventDispatcher() {
        const component = get_current_component();
        return (type, detail, { cancelable = false } = {}) => {
            const callbacks = component.$$.callbacks[type];
            if (callbacks) {
                // TODO are there situations where events could be dispatched
                // in a server (non-DOM) environment?
                const event = custom_event(type, detail, { cancelable });
                callbacks.slice().forEach(fn => {
                    fn.call(component, event);
                });
                return !event.defaultPrevented;
            }
            return true;
        };
    }
    // TODO figure out if we still want to support
    // shorthand events, or if we want to implement
    // a real bubbling mechanism
    function bubble(component, event) {
        const callbacks = component.$$.callbacks[event.type];
        if (callbacks) {
            // @ts-ignore
            callbacks.slice().forEach(fn => fn.call(this, event));
        }
    }

    const dirty_components = [];
    const binding_callbacks = [];
    const render_callbacks = [];
    const flush_callbacks = [];
    const resolved_promise = Promise.resolve();
    let update_scheduled = false;
    function schedule_update() {
        if (!update_scheduled) {
            update_scheduled = true;
            resolved_promise.then(flush);
        }
    }
    function tick() {
        schedule_update();
        return resolved_promise;
    }
    function add_render_callback(fn) {
        render_callbacks.push(fn);
    }
    function add_flush_callback(fn) {
        flush_callbacks.push(fn);
    }
    // flush() calls callbacks in this order:
    // 1. All beforeUpdate callbacks, in order: parents before children
    // 2. All bind:this callbacks, in reverse order: children before parents.
    // 3. All afterUpdate callbacks, in order: parents before children. EXCEPT
    //    for afterUpdates called during the initial onMount, which are called in
    //    reverse order: children before parents.
    // Since callbacks might update component values, which could trigger another
    // call to flush(), the following steps guard against this:
    // 1. During beforeUpdate, any updated components will be added to the
    //    dirty_components array and will cause a reentrant call to flush(). Because
    //    the flush index is kept outside the function, the reentrant call will pick
    //    up where the earlier call left off and go through all dirty components. The
    //    current_component value is saved and restored so that the reentrant call will
    //    not interfere with the "parent" flush() call.
    // 2. bind:this callbacks cannot trigger new flush() calls.
    // 3. During afterUpdate, any updated components will NOT have their afterUpdate
    //    callback called a second time; the seen_callbacks set, outside the flush()
    //    function, guarantees this behavior.
    const seen_callbacks = new Set();
    let flushidx = 0; // Do *not* move this inside the flush() function
    function flush() {
        const saved_component = current_component;
        do {
            // first, call beforeUpdate functions
            // and update components
            while (flushidx < dirty_components.length) {
                const component = dirty_components[flushidx];
                flushidx++;
                set_current_component(component);
                update(component.$$);
            }
            set_current_component(null);
            dirty_components.length = 0;
            flushidx = 0;
            while (binding_callbacks.length)
                binding_callbacks.pop()();
            // then, once components are updated, call
            // afterUpdate functions. This may cause
            // subsequent updates...
            for (let i = 0; i < render_callbacks.length; i += 1) {
                const callback = render_callbacks[i];
                if (!seen_callbacks.has(callback)) {
                    // ...so guard against infinite loops
                    seen_callbacks.add(callback);
                    callback();
                }
            }
            render_callbacks.length = 0;
        } while (dirty_components.length);
        while (flush_callbacks.length) {
            flush_callbacks.pop()();
        }
        update_scheduled = false;
        seen_callbacks.clear();
        set_current_component(saved_component);
    }
    function update($$) {
        if ($$.fragment !== null) {
            $$.update();
            run_all($$.before_update);
            const dirty = $$.dirty;
            $$.dirty = [-1];
            $$.fragment && $$.fragment.p($$.ctx, dirty);
            $$.after_update.forEach(add_render_callback);
        }
    }
    const outroing = new Set();
    let outros;
    function group_outros() {
        outros = {
            r: 0,
            c: [],
            p: outros // parent group
        };
    }
    function check_outros() {
        if (!outros.r) {
            run_all(outros.c);
        }
        outros = outros.p;
    }
    function transition_in(block, local) {
        if (block && block.i) {
            outroing.delete(block);
            block.i(local);
        }
    }
    function transition_out(block, local, detach, callback) {
        if (block && block.o) {
            if (outroing.has(block))
                return;
            outroing.add(block);
            outros.c.push(() => {
                outroing.delete(block);
                if (callback) {
                    if (detach)
                        block.d(1);
                    callback();
                }
            });
            block.o(local);
        }
        else if (callback) {
            callback();
        }
    }

    function handle_promise(promise, info) {
        const token = info.token = {};
        function update(type, index, key, value) {
            if (info.token !== token)
                return;
            info.resolved = value;
            let child_ctx = info.ctx;
            if (key !== undefined) {
                child_ctx = child_ctx.slice();
                child_ctx[key] = value;
            }
            const block = type && (info.current = type)(child_ctx);
            let needs_flush = false;
            if (info.block) {
                if (info.blocks) {
                    info.blocks.forEach((block, i) => {
                        if (i !== index && block) {
                            group_outros();
                            transition_out(block, 1, 1, () => {
                                if (info.blocks[i] === block) {
                                    info.blocks[i] = null;
                                }
                            });
                            check_outros();
                        }
                    });
                }
                else {
                    info.block.d(1);
                }
                block.c();
                transition_in(block, 1);
                block.m(info.mount(), info.anchor);
                needs_flush = true;
            }
            info.block = block;
            if (info.blocks)
                info.blocks[index] = block;
            if (needs_flush) {
                flush();
            }
        }
        if (is_promise(promise)) {
            const current_component = get_current_component();
            promise.then(value => {
                set_current_component(current_component);
                update(info.then, 1, info.value, value);
                set_current_component(null);
            }, error => {
                set_current_component(current_component);
                update(info.catch, 2, info.error, error);
                set_current_component(null);
                if (!info.hasCatch) {
                    throw error;
                }
            });
            // if we previously had a then/catch block, destroy it
            if (info.current !== info.pending) {
                update(info.pending, 0);
                return true;
            }
        }
        else {
            if (info.current !== info.then) {
                update(info.then, 1, info.value, promise);
                return true;
            }
            info.resolved = promise;
        }
    }
    function update_await_block_branch(info, ctx, dirty) {
        const child_ctx = ctx.slice();
        const { resolved } = info;
        if (info.current === info.then) {
            child_ctx[info.value] = resolved;
        }
        if (info.current === info.catch) {
            child_ctx[info.error] = resolved;
        }
        info.block.p(child_ctx, dirty);
    }

    const globals = (typeof window !== 'undefined'
        ? window
        : typeof globalThis !== 'undefined'
            ? globalThis
            : global);

    function get_spread_update(levels, updates) {
        const update = {};
        const to_null_out = {};
        const accounted_for = { $$scope: 1 };
        let i = levels.length;
        while (i--) {
            const o = levels[i];
            const n = updates[i];
            if (n) {
                for (const key in o) {
                    if (!(key in n))
                        to_null_out[key] = 1;
                }
                for (const key in n) {
                    if (!accounted_for[key]) {
                        update[key] = n[key];
                        accounted_for[key] = 1;
                    }
                }
                levels[i] = n;
            }
            else {
                for (const key in o) {
                    accounted_for[key] = 1;
                }
            }
        }
        for (const key in to_null_out) {
            if (!(key in update))
                update[key] = undefined;
        }
        return update;
    }
    function get_spread_object(spread_props) {
        return typeof spread_props === 'object' && spread_props !== null ? spread_props : {};
    }

    function bind(component, name, callback) {
        const index = component.$$.props[name];
        if (index !== undefined) {
            component.$$.bound[index] = callback;
            callback(component.$$.ctx[index]);
        }
    }
    function create_component(block) {
        block && block.c();
    }
    function mount_component(component, target, anchor, customElement) {
        const { fragment, after_update } = component.$$;
        fragment && fragment.m(target, anchor);
        if (!customElement) {
            // onMount happens before the initial afterUpdate
            add_render_callback(() => {
                const new_on_destroy = component.$$.on_mount.map(run).filter(is_function);
                // if the component was destroyed immediately
                // it will update the `$$.on_destroy` reference to `null`.
                // the destructured on_destroy may still reference to the old array
                if (component.$$.on_destroy) {
                    component.$$.on_destroy.push(...new_on_destroy);
                }
                else {
                    // Edge case - component was destroyed immediately,
                    // most likely as a result of a binding initialising
                    run_all(new_on_destroy);
                }
                component.$$.on_mount = [];
            });
        }
        after_update.forEach(add_render_callback);
    }
    function destroy_component(component, detaching) {
        const $$ = component.$$;
        if ($$.fragment !== null) {
            run_all($$.on_destroy);
            $$.fragment && $$.fragment.d(detaching);
            // TODO null out other refs, including component.$$ (but need to
            // preserve final state?)
            $$.on_destroy = $$.fragment = null;
            $$.ctx = [];
        }
    }
    function make_dirty(component, i) {
        if (component.$$.dirty[0] === -1) {
            dirty_components.push(component);
            schedule_update();
            component.$$.dirty.fill(0);
        }
        component.$$.dirty[(i / 31) | 0] |= (1 << (i % 31));
    }
    function init(component, options, instance, create_fragment, not_equal, props, append_styles, dirty = [-1]) {
        const parent_component = current_component;
        set_current_component(component);
        const $$ = component.$$ = {
            fragment: null,
            ctx: [],
            // state
            props,
            update: noop,
            not_equal,
            bound: blank_object(),
            // lifecycle
            on_mount: [],
            on_destroy: [],
            on_disconnect: [],
            before_update: [],
            after_update: [],
            context: new Map(options.context || (parent_component ? parent_component.$$.context : [])),
            // everything else
            callbacks: blank_object(),
            dirty,
            skip_bound: false,
            root: options.target || parent_component.$$.root
        };
        append_styles && append_styles($$.root);
        let ready = false;
        $$.ctx = instance
            ? instance(component, options.props || {}, (i, ret, ...rest) => {
                const value = rest.length ? rest[0] : ret;
                if ($$.ctx && not_equal($$.ctx[i], $$.ctx[i] = value)) {
                    if (!$$.skip_bound && $$.bound[i])
                        $$.bound[i](value);
                    if (ready)
                        make_dirty(component, i);
                }
                return ret;
            })
            : [];
        $$.update();
        ready = true;
        run_all($$.before_update);
        // `false` as a special case of no DOM component
        $$.fragment = create_fragment ? create_fragment($$.ctx) : false;
        if (options.target) {
            if (options.hydrate) {
                const nodes = children(options.target);
                // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
                $$.fragment && $$.fragment.l(nodes);
                nodes.forEach(detach);
            }
            else {
                // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
                $$.fragment && $$.fragment.c();
            }
            if (options.intro)
                transition_in(component.$$.fragment);
            mount_component(component, options.target, options.anchor, options.customElement);
            flush();
        }
        set_current_component(parent_component);
    }
    /**
     * Base class for Svelte components. Used when dev=false.
     */
    class SvelteComponent {
        $destroy() {
            destroy_component(this, 1);
            this.$destroy = noop;
        }
        $on(type, callback) {
            if (!is_function(callback)) {
                return noop;
            }
            const callbacks = (this.$$.callbacks[type] || (this.$$.callbacks[type] = []));
            callbacks.push(callback);
            return () => {
                const index = callbacks.indexOf(callback);
                if (index !== -1)
                    callbacks.splice(index, 1);
            };
        }
        $set($$props) {
            if (this.$$set && !is_empty($$props)) {
                this.$$.skip_bound = true;
                this.$$set($$props);
                this.$$.skip_bound = false;
            }
        }
    }

    function dispatch_dev(type, detail) {
        document.dispatchEvent(custom_event(type, Object.assign({ version: '3.53.1' }, detail), { bubbles: true }));
    }
    function append_dev(target, node) {
        dispatch_dev('SvelteDOMInsert', { target, node });
        append(target, node);
    }
    function insert_dev(target, node, anchor) {
        dispatch_dev('SvelteDOMInsert', { target, node, anchor });
        insert(target, node, anchor);
    }
    function detach_dev(node) {
        dispatch_dev('SvelteDOMRemove', { node });
        detach(node);
    }
    function listen_dev(node, event, handler, options, has_prevent_default, has_stop_propagation) {
        const modifiers = options === true ? ['capture'] : options ? Array.from(Object.keys(options)) : [];
        if (has_prevent_default)
            modifiers.push('preventDefault');
        if (has_stop_propagation)
            modifiers.push('stopPropagation');
        dispatch_dev('SvelteDOMAddEventListener', { node, event, handler, modifiers });
        const dispose = listen(node, event, handler, options);
        return () => {
            dispatch_dev('SvelteDOMRemoveEventListener', { node, event, handler, modifiers });
            dispose();
        };
    }
    function attr_dev(node, attribute, value) {
        attr(node, attribute, value);
        if (value == null)
            dispatch_dev('SvelteDOMRemoveAttribute', { node, attribute });
        else
            dispatch_dev('SvelteDOMSetAttribute', { node, attribute, value });
    }
    function set_data_dev(text, data) {
        data = '' + data;
        if (text.wholeText === data)
            return;
        dispatch_dev('SvelteDOMSetData', { node: text, data });
        text.data = data;
    }
    function validate_each_argument(arg) {
        if (typeof arg !== 'string' && !(arg && typeof arg === 'object' && 'length' in arg)) {
            let msg = '{#each} only iterates over array-like objects.';
            if (typeof Symbol === 'function' && arg && Symbol.iterator in arg) {
                msg += ' You can use a spread to convert this iterable into an array.';
            }
            throw new Error(msg);
        }
    }
    function validate_slots(name, slot, keys) {
        for (const slot_key of Object.keys(slot)) {
            if (!~keys.indexOf(slot_key)) {
                console.warn(`<${name}> received an unexpected slot "${slot_key}".`);
            }
        }
    }
    function construct_svelte_component_dev(component, props) {
        const error_message = 'this={...} of <svelte:component> should specify a Svelte component.';
        try {
            const instance = new component(props);
            if (!instance.$$ || !instance.$set || !instance.$on || !instance.$destroy) {
                throw new Error(error_message);
            }
            return instance;
        }
        catch (err) {
            const { message } = err;
            if (typeof message === 'string' && message.indexOf('is not a constructor') !== -1) {
                throw new Error(error_message);
            }
            else {
                throw err;
            }
        }
    }
    /**
     * Base class for Svelte components with some minor dev-enhancements. Used when dev=true.
     */
    class SvelteComponentDev extends SvelteComponent {
        constructor(options) {
            if (!options || (!options.target && !options.$$inline)) {
                throw new Error("'target' is a required option");
            }
            super();
        }
        $destroy() {
            super.$destroy();
            this.$destroy = () => {
                console.warn('Component was already destroyed'); // eslint-disable-line no-console
            };
        }
        $capture_state() { }
        $inject_state() { }
    }

    /**
     * @typedef {Object} WrappedComponent Object returned by the `wrap` method
     * @property {SvelteComponent} component - Component to load (this is always asynchronous)
     * @property {RoutePrecondition[]} [conditions] - Route pre-conditions to validate
     * @property {Object} [props] - Optional dictionary of static props
     * @property {Object} [userData] - Optional user data dictionary
     * @property {bool} _sveltesparouter - Internal flag; always set to true
     */

    /**
     * @callback AsyncSvelteComponent
     * @returns {Promise<SvelteComponent>} Returns a Promise that resolves with a Svelte component
     */

    /**
     * @callback RoutePrecondition
     * @param {RouteDetail} detail - Route detail object
     * @returns {boolean|Promise<boolean>} If the callback returns a false-y value, it's interpreted as the precondition failed, so it aborts loading the component (and won't process other pre-condition callbacks)
     */

    /**
     * @typedef {Object} WrapOptions Options object for the call to `wrap`
     * @property {SvelteComponent} [component] - Svelte component to load (this is incompatible with `asyncComponent`)
     * @property {AsyncSvelteComponent} [asyncComponent] - Function that returns a Promise that fulfills with a Svelte component (e.g. `{asyncComponent: () => import('Foo.svelte')}`)
     * @property {SvelteComponent} [loadingComponent] - Svelte component to be displayed while the async route is loading (as a placeholder); when unset or false-y, no component is shown while component
     * @property {object} [loadingParams] - Optional dictionary passed to the `loadingComponent` component as params (for an exported prop called `params`)
     * @property {object} [userData] - Optional object that will be passed to events such as `routeLoading`, `routeLoaded`, `conditionsFailed`
     * @property {object} [props] - Optional key-value dictionary of static props that will be passed to the component. The props are expanded with {...props}, so the key in the dictionary becomes the name of the prop.
     * @property {RoutePrecondition[]|RoutePrecondition} [conditions] - Route pre-conditions to add, which will be executed in order
     */

    /**
     * Wraps a component to enable multiple capabilities:
     * 1. Using dynamically-imported component, with (e.g. `{asyncComponent: () => import('Foo.svelte')}`), which also allows bundlers to do code-splitting.
     * 2. Adding route pre-conditions (e.g. `{conditions: [...]}`)
     * 3. Adding static props that are passed to the component
     * 4. Adding custom userData, which is passed to route events (e.g. route loaded events) or to route pre-conditions (e.g. `{userData: {foo: 'bar}}`)
     * 
     * @param {WrapOptions} args - Arguments object
     * @returns {WrappedComponent} Wrapped component
     */
    function wrap$1(args) {
        if (!args) {
            throw Error('Parameter args is required')
        }

        // We need to have one and only one of component and asyncComponent
        // This does a "XNOR"
        if (!args.component == !args.asyncComponent) {
            throw Error('One and only one of component and asyncComponent is required')
        }

        // If the component is not async, wrap it into a function returning a Promise
        if (args.component) {
            args.asyncComponent = () => Promise.resolve(args.component);
        }

        // Parameter asyncComponent and each item of conditions must be functions
        if (typeof args.asyncComponent != 'function') {
            throw Error('Parameter asyncComponent must be a function')
        }
        if (args.conditions) {
            // Ensure it's an array
            if (!Array.isArray(args.conditions)) {
                args.conditions = [args.conditions];
            }
            for (let i = 0; i < args.conditions.length; i++) {
                if (!args.conditions[i] || typeof args.conditions[i] != 'function') {
                    throw Error('Invalid parameter conditions[' + i + ']')
                }
            }
        }

        // Check if we have a placeholder component
        if (args.loadingComponent) {
            args.asyncComponent.loading = args.loadingComponent;
            args.asyncComponent.loadingParams = args.loadingParams || undefined;
        }

        // Returns an object that contains all the functions to execute too
        // The _sveltesparouter flag is to confirm the object was created by this router
        const obj = {
            component: args.asyncComponent,
            userData: args.userData,
            conditions: (args.conditions && args.conditions.length) ? args.conditions : undefined,
            props: (args.props && Object.keys(args.props).length) ? args.props : {},
            _sveltesparouter: true
        };

        return obj
    }

    const subscriber_queue = [];
    /**
     * Creates a `Readable` store that allows reading by subscription.
     * @param value initial value
     * @param {StartStopNotifier}start start and stop notifications for subscriptions
     */
    function readable(value, start) {
        return {
            subscribe: writable(value, start).subscribe
        };
    }
    /**
     * Create a `Writable` store that allows both updating and reading by subscription.
     * @param {*=}value initial value
     * @param {StartStopNotifier=}start start and stop notifications for subscriptions
     */
    function writable(value, start = noop) {
        let stop;
        const subscribers = new Set();
        function set(new_value) {
            if (safe_not_equal(value, new_value)) {
                value = new_value;
                if (stop) { // store is ready
                    const run_queue = !subscriber_queue.length;
                    for (const subscriber of subscribers) {
                        subscriber[1]();
                        subscriber_queue.push(subscriber, value);
                    }
                    if (run_queue) {
                        for (let i = 0; i < subscriber_queue.length; i += 2) {
                            subscriber_queue[i][0](subscriber_queue[i + 1]);
                        }
                        subscriber_queue.length = 0;
                    }
                }
            }
        }
        function update(fn) {
            set(fn(value));
        }
        function subscribe(run, invalidate = noop) {
            const subscriber = [run, invalidate];
            subscribers.add(subscriber);
            if (subscribers.size === 1) {
                stop = start(set) || noop;
            }
            run(value);
            return () => {
                subscribers.delete(subscriber);
                if (subscribers.size === 0) {
                    stop();
                    stop = null;
                }
            };
        }
        return { set, update, subscribe };
    }
    function derived(stores, fn, initial_value) {
        const single = !Array.isArray(stores);
        const stores_array = single
            ? [stores]
            : stores;
        const auto = fn.length < 2;
        return readable(initial_value, (set) => {
            let inited = false;
            const values = [];
            let pending = 0;
            let cleanup = noop;
            const sync = () => {
                if (pending) {
                    return;
                }
                cleanup();
                const result = fn(single ? values[0] : values, set);
                if (auto) {
                    set(result);
                }
                else {
                    cleanup = is_function(result) ? result : noop;
                }
            };
            const unsubscribers = stores_array.map((store, i) => subscribe(store, (value) => {
                values[i] = value;
                pending &= ~(1 << i);
                if (inited) {
                    sync();
                }
            }, () => {
                pending |= (1 << i);
            }));
            inited = true;
            sync();
            return function stop() {
                run_all(unsubscribers);
                cleanup();
            };
        });
    }

    function parse(str, loose) {
    	if (str instanceof RegExp) return { keys:false, pattern:str };
    	var c, o, tmp, ext, keys=[], pattern='', arr = str.split('/');
    	arr[0] || arr.shift();

    	while (tmp = arr.shift()) {
    		c = tmp[0];
    		if (c === '*') {
    			keys.push('wild');
    			pattern += '/(.*)';
    		} else if (c === ':') {
    			o = tmp.indexOf('?', 1);
    			ext = tmp.indexOf('.', 1);
    			keys.push( tmp.substring(1, !!~o ? o : !!~ext ? ext : tmp.length) );
    			pattern += !!~o && !~ext ? '(?:/([^/]+?))?' : '/([^/]+?)';
    			if (!!~ext) pattern += (!!~o ? '?' : '') + '\\' + tmp.substring(ext);
    		} else {
    			pattern += '/' + tmp;
    		}
    	}

    	return {
    		keys: keys,
    		pattern: new RegExp('^' + pattern + (loose ? '(?=$|\/)' : '\/?$'), 'i')
    	};
    }

    /* 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;

    // (267:0) {:else}
    function create_else_block$5(ctx) {
    	let switch_instance;
    	let switch_instance_anchor;
    	let current;
    	const switch_instance_spread_levels = [/*props*/ ctx[2]];
    	var switch_value = /*component*/ ctx[0];

    	function switch_props(ctx) {
    		let switch_instance_props = {};

    		for (let i = 0; i < switch_instance_spread_levels.length; i += 1) {
    			switch_instance_props = assign(switch_instance_props, switch_instance_spread_levels[i]);
    		}

    		return {
    			props: switch_instance_props,
    			$$inline: true
    		};
    	}

    	if (switch_value) {
    		switch_instance = construct_svelte_component_dev(switch_value, switch_props());
    		switch_instance.$on("routeEvent", /*routeEvent_handler_1*/ ctx[7]);
    	}

    	const block = {
    		c: function create() {
    			if (switch_instance) create_component(switch_instance.$$.fragment);
    			switch_instance_anchor = empty();
    		},
    		m: function mount(target, anchor) {
    			if (switch_instance) mount_component(switch_instance, target, anchor);
    			insert_dev(target, switch_instance_anchor, anchor);
    			current = true;
    		},
    		p: function update(ctx, dirty) {
    			const switch_instance_changes = (dirty & /*props*/ 4)
    			? get_spread_update(switch_instance_spread_levels, [get_spread_object(/*props*/ ctx[2])])
    			: {};

    			if (switch_value !== (switch_value = /*component*/ ctx[0])) {
    				if (switch_instance) {
    					group_outros();
    					const old_component = switch_instance;

    					transition_out(old_component.$$.fragment, 1, 0, () => {
    						destroy_component(old_component, 1);
    					});

    					check_outros();
    				}

    				if (switch_value) {
    					switch_instance = construct_svelte_component_dev(switch_value, switch_props());
    					switch_instance.$on("routeEvent", /*routeEvent_handler_1*/ ctx[7]);
    					create_component(switch_instance.$$.fragment);
    					transition_in(switch_instance.$$.fragment, 1);
    					mount_component(switch_instance, switch_instance_anchor.parentNode, switch_instance_anchor);
    				} else {
    					switch_instance = null;
    				}
    			} else if (switch_value) {
    				switch_instance.$set(switch_instance_changes);
    			}
    		},
    		i: function intro(local) {
    			if (current) return;
    			if (switch_instance) transition_in(switch_instance.$$.fragment, local);
    			current = true;
    		},
    		o: function outro(local) {
    			if (switch_instance) transition_out(switch_instance.$$.fragment, local);
    			current = false;
    		},
    		d: function destroy(detaching) {
    			if (detaching) detach_dev(switch_instance_anchor);
    			if (switch_instance) destroy_component(switch_instance, detaching);
    		}
    	};

    	dispatch_dev("SvelteRegisterBlock", {
    		block,
    		id: create_else_block$5.name,
    		type: "else",
    		source: "(267:0) {:else}",
    		ctx
    	});

    	return block;
    }

    // (260:0) {#if componentParams}
    function create_if_block$9(ctx) {
    	let switch_instance;
    	let switch_instance_anchor;
    	let current;
    	const switch_instance_spread_levels = [{ params: /*componentParams*/ ctx[1] }, /*props*/ ctx[2]];
    	var switch_value = /*component*/ ctx[0];

    	function switch_props(ctx) {
    		let switch_instance_props = {};

    		for (let i = 0; i < switch_instance_spread_levels.length; i += 1) {
    			switch_instance_props = assign(switch_instance_props, switch_instance_spread_levels[i]);
    		}

    		return {
    			props: switch_instance_props,
    			$$inline: true
    		};
    	}

    	if (switch_value) {
    		switch_instance = construct_svelte_component_dev(switch_value, switch_props());
    		switch_instance.$on("routeEvent", /*routeEvent_handler*/ ctx[6]);
    	}

    	const block = {
    		c: function create() {
    			if (switch_instance) create_component(switch_instance.$$.fragment);
    			switch_instance_anchor = empty();
    		},
    		m: function mount(target, anchor) {
    			if (switch_instance) mount_component(switch_instance, target, anchor);
    			insert_dev(target, switch_instance_anchor, anchor);
    			current = true;
    		},
    		p: function update(ctx, dirty) {
    			const switch_instance_changes = (dirty & /*componentParams, props*/ 6)
    			? get_spread_update(switch_instance_spread_levels, [
    					dirty & /*componentParams*/ 2 && { params: /*componentParams*/ ctx[1] },
    					dirty & /*props*/ 4 && get_spread_object(/*props*/ ctx[2])
    				])
    			: {};

    			if (switch_value !== (switch_value = /*component*/ ctx[0])) {
    				if (switch_instance) {
    					group_outros();
    					const old_component = switch_instance;

    					transition_out(old_component.$$.fragment, 1, 0, () => {
    						destroy_component(old_component, 1);
    					});

    					check_outros();
    				}

    				if (switch_value) {
    					switch_instance = construct_svelte_component_dev(switch_value, switch_props());
    					switch_instance.$on("routeEvent", /*routeEvent_handler*/ ctx[6]);
    					create_component(switch_instance.$$.fragment);
    					transition_in(switch_instance.$$.fragment, 1);
    					mount_component(switch_instance, switch_instance_anchor.parentNode, switch_instance_anchor);
    				} else {
    					switch_instance = null;
    				}
    			} else if (switch_value) {
    				switch_instance.$set(switch_instance_changes);
    			}
    		},
    		i: function intro(local) {
    			if (current) return;
    			if (switch_instance) transition_in(switch_instance.$$.fragment, local);
    			current = true;
    		},
    		o: function outro(local) {
    			if (switch_instance) transition_out(switch_instance.$$.fragment, local);
    			current = false;
    		},
    		d: function destroy(detaching) {
    			if (detaching) detach_dev(switch_instance_anchor);
    			if (switch_instance) destroy_component(switch_instance, detaching);
    		}
    	};

    	dispatch_dev("SvelteRegisterBlock", {
    		block,
    		id: create_if_block$9.name,
    		type: "if",
    		source: "(260:0) {#if componentParams}",
    		ctx
    	});

    	return block;
    }

    function create_fragment$o(ctx) {
    	let current_block_type_index;
    	let if_block;
    	let if_block_anchor;
    	let current;
    	const if_block_creators = [create_if_block$9, create_else_block$5];
    	const if_blocks = [];

    	function select_block_type(ctx, dirty) {
    		if (/*componentParams*/ ctx[1]) return 0;
    		return 1;
    	}

    	current_block_type_index = select_block_type(ctx);
    	if_block = if_blocks[current_block_type_index] = if_block_creators[current_block_type_index](ctx);

    	const block = {
    		c: function create() {
    			if_block.c();
    			if_block_anchor = empty();
    		},
    		l: function claim(nodes) {
    			throw new Error_1("options.hydrate only works if the component was compiled with the `hydratable: true` option");
    		},
    		m: function mount(target, anchor) {
    			if_blocks[current_block_type_index].m(target, anchor);
    			insert_dev(target, if_block_anchor, anchor);
    			current = true;
    		},
    		p: function update(ctx, [dirty]) {
    			let previous_block_index = current_block_type_index;
    			current_block_type_index = select_block_type(ctx);

    			if (current_block_type_index === previous_block_index) {
    				if_blocks[current_block_type_index].p(ctx, dirty);
    			} else {
    				group_outros();

    				transition_out(if_blocks[previous_block_index], 1, 1, () => {
    					if_blocks[previous_block_index] = null;
    				});

    				check_outros();
    				if_block = if_blocks[current_block_type_index];

    				if (!if_block) {
    					if_block = if_blocks[current_block_type_index] = if_block_creators[current_block_type_index](ctx);
    					if_block.c();
    				} else {
    					if_block.p(ctx, dirty);
    				}

    				transition_in(if_block, 1);
    				if_block.m(if_block_anchor.parentNode, if_block_anchor);
    			}
    		},
    		i: function intro(local) {
    			if (current) return;
    			transition_in(if_block);
    			current = true;
    		},
    		o: function outro(local) {
    			transition_out(if_block);
    			current = false;
    		},
    		d: function destroy(detaching) {
    			if_blocks[current_block_type_index].d(detaching);
    			if (detaching) detach_dev(if_block_anchor);
    		}
    	};

    	dispatch_dev("SvelteRegisterBlock", {
    		block,
    		id: create_fragment$o.name,
    		type: "component",
    		source: "",
    		ctx
    	});

    	return block;
    }

    function wrap(component, userData, ...conditions) {
    	// Use the new wrap method and show a deprecation warning
    	// eslint-disable-next-line no-console
    	console.warn('Method `wrap` from `svelte-spa-router` is deprecated and will be removed in a future version. Please use `svelte-spa-router/wrap` instead. See http://bit.ly/svelte-spa-router-upgrading');

    	return wrap$1({ component, userData, conditions });
    }

    /**
     * @typedef {Object} Location
     * @property {string} location - Location (page/view), for example `/book`
     * @property {string} [querystring] - Querystring from the hash, as a string not parsed
     */
    /**
     * Returns the current location from the hash.
     *
     * @returns {Location} Location object
     * @private
     */
    function getLocation() {
    	const hashPosition = window.location.href.indexOf('#/');

    	let location = hashPosition > -1
    	? window.location.href.substr(hashPosition + 1)
    	: '/';

    	// Check if there's a querystring
    	const qsPosition = location.indexOf('?');

    	let querystring = '';

    	if (qsPosition > -1) {
    		querystring = location.substr(qsPosition + 1);
    		location = location.substr(0, qsPosition);
    	}

    	return { location, querystring };
    }

    const loc = readable(null, // eslint-disable-next-line prefer-arrow-callback
    function start(set) {
    	set(getLocation());

    	const update = () => {
    		set(getLocation());
    	};

    	window.addEventListener('hashchange', update, false);

    	return function stop() {
    		window.removeEventListener('hashchange', update, false);
    	};
    });

    const location$1 = derived(loc, $loc => $loc.location);
    const querystring = derived(loc, $loc => $loc.querystring);
    const params = writable(undefined);

    async function push(location) {
    	if (!location || location.length < 1 || location.charAt(0) != '/' && location.indexOf('#/') !== 0) {
    		throw Error('Invalid parameter location');
    	}

    	// Execute this code when the current call stack is complete
    	await tick();

    	// Note: this will include scroll state in history even when restoreScrollState is false
    	history.replaceState(
    		{
    			...history.state,
    			__svelte_spa_router_scrollX: window.scrollX,
    			__svelte_spa_router_scrollY: window.scrollY
    		},
    		undefined
    	);

    	window.location.hash = (location.charAt(0) == '#' ? '' : '#') + location;
    }

    async function pop() {
    	// Execute this code when the current call stack is complete
    	await tick();

    	window.history.back();
    }

    async function replace(location) {
    	if (!location || location.length < 1 || location.charAt(0) != '/' && location.indexOf('#/') !== 0) {
    		throw Error('Invalid parameter location');
    	}

    	// Execute this code when the current call stack is complete
    	await tick();

    	const dest = (location.charAt(0) == '#' ? '' : '#') + location;

    	try {
    		const newState = { ...history.state };
    		delete newState['__svelte_spa_router_scrollX'];
    		delete newState['__svelte_spa_router_scrollY'];
    		window.history.replaceState(newState, undefined, dest);
    	} catch(e) {
    		// eslint-disable-next-line no-console
    		console.warn('Caught exception while replacing the current page. If you\'re running this in the Svelte REPL, please note that the `replace` method might not work in this environment.');
    	}

    	// The method above doesn't trigger the hashchange event, so let's do that manually
    	window.dispatchEvent(new Event('hashchange'));
    }

    function link(node, opts) {
    	opts = linkOpts(opts);

    	// Only apply to <a> tags
    	if (!node || !node.tagName || node.tagName.toLowerCase() != 'a') {
    		throw Error('Action "link" can only be used with <a> tags');
    	}

    	updateLink(node, opts);

    	return {
    		update(updated) {
    			updated = linkOpts(updated);
    			updateLink(node, updated);
    		}
    	};
    }

    function restoreScroll(state) {
    	// If this exists, then this is a back navigation: restore the scroll position
    	if (state) {
    		window.scrollTo(state.__svelte_spa_router_scrollX, state.__svelte_spa_router_scrollY);
    	} else {
    		// Otherwise this is a forward navigation: scroll to top
    		window.scrollTo(0, 0);
    	}
    }

    // Internal function used by the link function
    function updateLink(node, opts) {
    	let href = opts.href || node.getAttribute('href');

    	// Destination must start with '/' or '#/'
    	if (href && href.charAt(0) == '/') {
    		// Add # to the href attribute
    		href = '#' + href;
    	} else if (!href || href.length < 2 || href.slice(0, 2) != '#/') {
    		throw Error('Invalid value for "href" attribute: ' + href);
    	}

    	node.setAttribute('href', href);

    	node.addEventListener('click', event => {
    		// Prevent default anchor onclick behaviour
    		event.preventDefault();

    		if (!opts.disabled) {
    			scrollstateHistoryHandler(event.currentTarget.getAttribute('href'));
    		}
    	});
    }

    // Internal function that ensures the argument of the link action is always an object
    function linkOpts(val) {
    	if (val && typeof val == 'string') {
    		return { href: val };
    	} else {
    		return val || {};
    	}
    }

    /**
     * The handler attached to an anchor tag responsible for updating the
     * current history state with the current scroll state
     *
     * @param {string} href - Destination
     */
    function scrollstateHistoryHandler(href) {
    	// Setting the url (3rd arg) to href will break clicking for reasons, so don't try to do that
    	history.replaceState(
    		{
    			...history.state,
    			__svelte_spa_router_scrollX: window.scrollX,
    			__svelte_spa_router_scrollY: window.scrollY
    		},
    		undefined
    	);

    	// This will force an update as desired, but this time our scroll state will be attached
    	window.location.hash = href;
    }

    function instance$o($$self, $$props, $$invalidate) {
    	let { $$slots: slots = {}, $$scope } = $$props;
    	validate_slots('Router', slots, []);
    	let { routes = {} } = $$props;
    	let { prefix = '' } = $$props;
    	let { restoreScrollState = false } = $$props;

    	/**
     * Container for a route: path, component
     */
    	class RouteItem {
    		/**
     * Initializes the object and creates a regular expression from the path, using regexparam.
     *
     * @param {string} path - Path to the route (must start with '/' or '*')
     * @param {SvelteComponent|WrappedComponent} component - Svelte component for the route, optionally wrapped
     */
    		constructor(path, component) {
    			if (!component || typeof component != 'function' && (typeof component != 'object' || component._sveltesparouter !== true)) {
    				throw Error('Invalid component object');
    			}

    			// Path must be a regular or expression, or a string starting with '/' or '*'
    			if (!path || typeof path == 'string' && (path.length < 1 || path.charAt(0) != '/' && path.charAt(0) != '*') || typeof path == 'object' && !(path instanceof RegExp)) {
    				throw Error('Invalid value for "path" argument - strings must start with / or *');
    			}

    			const { pattern, keys } = parse(path);
    			this.path = path;

    			// Check if the component is wrapped and we have conditions
    			if (typeof component == 'object' && component._sveltesparouter === true) {
    				this.component = component.component;
    				this.conditions = component.conditions || [];
    				this.userData = component.userData;
    				this.props = component.props || {};
    			} else {
    				// Convert the component to a function that returns a Promise, to normalize it
    				this.component = () => Promise.resolve(component);

    				this.conditions = [];
    				this.props = {};
    			}

    			this._pattern = pattern;
    			this._keys = keys;
    		}

    		/**
     * Checks if `path` matches the current route.
     * If there's a match, will return the list of parameters from the URL (if any).
     * In case of no match, the method will return `null`.
     *
     * @param {string} path - Path to test
     * @returns {null|Object.<string, string>} List of paramters from the URL if there's a match, or `null` otherwise.
     */
    		match(path) {
    			// If there's a prefix, check if it matches the start of the path.
    			// If not, bail early, else remove it before we run the matching.
    			if (prefix) {
    				if (typeof prefix == 'string') {
    					if (path.startsWith(prefix)) {
    						path = path.substr(prefix.length) || '/';
    					} else {
    						return null;
    					}
    				} else if (prefix instanceof RegExp) {
    					const match = path.match(prefix);

    					if (match && match[0]) {
    						path = path.substr(match[0].length) || '/';
    					} else {
    						return null;
    					}
    				}
    			}

    			// Check if the pattern matches
    			const matches = this._pattern.exec(path);

    			if (matches === null) {
    				return null;
    			}

    			// If the input was a regular expression, this._keys would be false, so return matches as is
    			if (this._keys === false) {
    				return matches;
    			}

    			const out = {};
    			let i = 0;

    			while (i < this._keys.length) {
    				// In the match parameters, URL-decode all values
    				try {
    					out[this._keys[i]] = decodeURIComponent(matches[i + 1] || '') || null;
    				} catch(e) {
    					out[this._keys[i]] = null;
    				}

    				i++;
    			}

    			return out;
    		}

    		/**
     * Dictionary with route details passed to the pre-conditions functions, as well as the `routeLoading`, `routeLoaded` and `conditionsFailed` events
     * @typedef {Object} RouteDetail
     * @property {string|RegExp} route - Route matched as defined in the route definition (could be a string or a reguar expression object)
     * @property {string} location - Location path
     * @property {string} querystring - Querystring from the hash
     * @property {object} [userData] - Custom data passed by the user
     * @property {SvelteComponent} [component] - Svelte component (only in `routeLoaded` events)
     * @property {string} [name] - Name of the Svelte component (only in `routeLoaded` events)
     */
    		/**
     * Executes all conditions (if any) to control whether the route can be shown. Conditions are executed in the order they are defined, and if a condition fails, the following ones aren't executed.
     * 
     * @param {RouteDetail} detail - Route detail
     * @returns {boolean} Returns true if all the conditions succeeded
     */
    		async checkConditions(detail) {
    			for (let i = 0; i < this.conditions.length; i++) {
    				if (!await this.conditions[i](detail)) {
    					return false;
    				}
    			}

    			return true;
    		}
    	}

    	// Set up all routes
    	const routesList = [];

    	if (routes instanceof Map) {
    		// If it's a map, iterate on it right away
    		routes.forEach((route, path) => {
    			routesList.push(new RouteItem(path, route));
    		});
    	} else {
    		// We have an object, so iterate on its own properties
    		Object.keys(routes).forEach(path => {
    			routesList.push(new RouteItem(path, routes[path]));
    		});
    	}

    	// Props for the component to render
    	let component = null;

    	let componentParams = null;
    	let props = {};

    	// Event dispatcher from Svelte
    	const dispatch = createEventDispatcher();

    	// Just like dispatch, but executes on the next iteration of the event loop
    	async function dispatchNextTick(name, detail) {
    		// Execute this code when the current call stack is complete
    		await tick();

    		dispatch(name, detail);
    	}

    	// If this is set, then that means we have popped into this var the state of our last scroll position
    	let previousScrollState = null;

    	let popStateChanged = null;

    	if (restoreScrollState) {
    		popStateChanged = event => {
    			// If this event was from our history.replaceState, event.state will contain
    			// our scroll history. Otherwise, event.state will be null (like on forward
    			// navigation)
    			if (event.state && (event.state.__svelte_spa_router_scrollY || event.state.__svelte_spa_router_scrollX)) {
    				previousScrollState = event.state;
    			} else {
    				previousScrollState = null;
    			}
    		};

    		// This is removed in the destroy() invocation below
    		window.addEventListener('popstate', popStateChanged);

    		afterUpdate(() => {
    			restoreScroll(previousScrollState);
    		});
    	}

    	// Always have the latest value of loc
    	let lastLoc = null;

    	// Current object of the component loaded
    	let componentObj = null;

    	// Handle hash change events
    	// Listen to changes in the $loc store and update the page
    	// Do not use the $: syntax because it gets triggered by too many things
    	const unsubscribeLoc = loc.subscribe(async newLoc => {
    		lastLoc = newLoc;

    		// Find a route matching the location
    		let i = 0;

    		while (i < routesList.length) {
    			const match = routesList[i].match(newLoc.location);

    			if (!match) {
    				i++;
    				continue;
    			}

    			const detail = {
    				route: routesList[i].path,
    				location: newLoc.location,
    				querystring: newLoc.querystring,
    				userData: routesList[i].userData,
    				params: match && typeof match == 'object' && Object.keys(match).length
    				? match
    				: null
    			};

    			// Check if the route can be loaded - if all conditions succeed
    			if (!await routesList[i].checkConditions(detail)) {
    				// Don't display anything
    				$$invalidate(0, component = null);

    				componentObj = null;

    				// Trigger an event to notify the user, then exit
    				dispatchNextTick('conditionsFailed', detail);

    				return;
    			}

    			// Trigger an event to alert that we're loading the route
    			// We need to clone the object on every event invocation so we don't risk the object to be modified in the next tick
    			dispatchNextTick('routeLoading', Object.assign({}, detail));

    			// If there's a component to show while we're loading the route, display it
    			const obj = routesList[i].component;

    			// Do not replace the component if we're loading the same one as before, to avoid the route being unmounted and re-mounted
    			if (componentObj != obj) {
    				if (obj.loading) {
    					$$invalidate(0, component = obj.loading);
    					componentObj = obj;
    					$$invalidate(1, componentParams = obj.loadingParams);
    					$$invalidate(2, props = {});

    					// Trigger the routeLoaded event for the loading component
    					// Create a copy of detail so we don't modify the object for the dynamic route (and the dynamic route doesn't modify our object too)
    					dispatchNextTick('routeLoaded', Object.assign({}, detail, {
    						component,
    						name: component.name,
    						params: componentParams
    					}));
    				} else {
    					$$invalidate(0, component = null);
    					componentObj = null;
    				}

    				// Invoke the Promise
    				const loaded = await obj();

    				// Now that we're here, after the promise resolved, check if we still want this component, as the user might have navigated to another page in the meanwhile
    				if (newLoc != lastLoc) {
    					// Don't update the component, just exit
    					return;
    				}

    				// If there is a "default" property, which is used by async routes, then pick that
    				$$invalidate(0, component = loaded && loaded.default || loaded);

    				componentObj = obj;
    			}

    			// Set componentParams only if we have a match, to avoid a warning similar to `<Component> was created with unknown prop 'params'`
    			// Of course, this assumes that developers always add a "params" prop when they are expecting parameters
    			if (match && typeof match == 'object' && Object.keys(match).length) {
    				$$invalidate(1, componentParams = match);
    			} else {
    				$$invalidate(1, componentParams = null);
    			}

    			// Set static props, if any
    			$$invalidate(2, props = routesList[i].props);

    			// Dispatch the routeLoaded event then exit
    			// We need to clone the object on every event invocation so we don't risk the object to be modified in the next tick
    			dispatchNextTick('routeLoaded', Object.assign({}, detail, {
    				component,
    				name: component.name,
    				params: componentParams
    			})).then(() => {
    				params.set(componentParams);
    			});

    			return;
    		}

    		// If we're still here, there was no match, so show the empty component
    		$$invalidate(0, component = null);

    		componentObj = null;
    		params.set(undefined);
    	});

    	onDestroy(() => {
    		unsubscribeLoc();
    		popStateChanged && window.removeEventListener('popstate', popStateChanged);
    	});

    	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}'`);
    	});

    	function routeEvent_handler(event) {
    		bubble.call(this, $$self, event);
    	}

    	function routeEvent_handler_1(event) {
    		bubble.call(this, $$self, event);
    	}

    	$$self.$$set = $$props => {
    		if ('routes' in $$props) $$invalidate(3, routes = $$props.routes);
    		if ('prefix' in $$props) $$invalidate(4, prefix = $$props.prefix);
    		if ('restoreScrollState' in $$props) $$invalidate(5, restoreScrollState = $$props.restoreScrollState);
    	};

    	$$self.$capture_state = () => ({
    		readable,
    		writable,
    		derived,
    		tick,
    		_wrap: wrap$1,
    		wrap,
    		getLocation,
    		loc,
    		location: location$1,
    		querystring,
    		params,
    		push,
    		pop,
    		replace,
    		link,
    		restoreScroll,
    		updateLink,
    		linkOpts,
    		scrollstateHistoryHandler,
    		onDestroy,
    		createEventDispatcher,
    		afterUpdate,
    		parse,
    		routes,
    		prefix,
    		restoreScrollState,
    		RouteItem,
    		routesList,
    		component,
    		componentParams,
    		props,
    		dispatch,
    		dispatchNextTick,
    		previousScrollState,
    		popStateChanged,
    		lastLoc,
    		componentObj,
    		unsubscribeLoc
    	});

    	$$self.$inject_state = $$props => {
    		if ('routes' in $$props) $$invalidate(3, routes = $$props.routes);
    		if ('prefix' in $$props) $$invalidate(4, prefix = $$props.prefix);
    		if ('restoreScrollState' in $$props) $$invalidate(5, restoreScrollState = $$props.restoreScrollState);
    		if ('component' in $$props) $$invalidate(0, component = $$props.component);
    		if ('componentParams' in $$props) $$invalidate(1, componentParams = $$props.componentParams);
    		if ('props' in $$props) $$invalidate(2, props = $$props.props);
    		if ('previousScrollState' in $$props) previousScrollState = $$props.previousScrollState;
    		if ('popStateChanged' in $$props) popStateChanged = $$props.popStateChanged;
    		if ('lastLoc' in $$props) lastLoc = $$props.lastLoc;
    		if ('componentObj' in $$props) componentObj = $$props.componentObj;
    	};

    	if ($$props && "$$inject" in $$props) {
    		$$self.$inject_state($$props.$$inject);
    	}

    	$$self.$$.update = () => {
    		if ($$self.$$.dirty & /*restoreScrollState*/ 32) {
    			// Update history.scrollRestoration depending on restoreScrollState
    			history.scrollRestoration = restoreScrollState ? 'manual' : 'auto';
    		}
    	};

    	return [
    		component,
    		componentParams,
    		props,
    		routes,
    		prefix,
    		restoreScrollState,
    		routeEvent_handler,
    		routeEvent_handler_1
    	];
    }

    class Router extends SvelteComponentDev {
    	constructor(options) {
    		super(options);

    		init(this, options, instance$o, create_fragment$o, safe_not_equal, {
    			routes: 3,
    			prefix: 4,
    			restoreScrollState: 5
    		});

    		dispatch_dev("SvelteRegisterComponent", {
    			component: this,
    			tagName: "Router",
    			options,
    			id: create_fragment$o.name
    		});
    	}

    	get routes() {
    		throw new Error_1("<Router>: Props cannot be read directly from the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
    	}

    	set routes(value) {
    		throw new Error_1("<Router>: Props cannot be set directly on the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
    	}

    	get prefix() {
    		throw new Error_1("<Router>: Props cannot be read directly from the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
    	}

    	set prefix(value) {
    		throw new Error_1("<Router>: Props cannot be set directly on the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
    	}

    	get restoreScrollState() {
    		throw new Error_1("<Router>: Props cannot be read directly from the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
    	}

    	set restoreScrollState(value) {
    		throw new Error_1("<Router>: Props cannot be set directly on the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
    	}
    }

    /* src/pages/NotFound.svelte generated by Svelte v3.53.1 */
    const file$m = "src/pages/NotFound.svelte";

    function create_fragment$n(ctx) {
    	let h1;
    	let t1;
    	let p0;
    	let t3;
    	let p1;
    	let t5;
    	let a;
    	let h2;
    	let mounted;
    	let dispose;

    	const block = {
    		c: function create() {
    			h1 = element("h1");
    			h1.textContent = "We are sorry!";
    			t1 = space();
    			p0 = element("p");
    			p0.textContent = "This isn't a url that we use.";
    			t3 = space();
    			p1 = element("p");
    			p1.textContent = "Go home you're drunk.";
    			t5 = space();
    			a = element("a");
    			h2 = element("h2");
    			h2.textContent = "Take me home →";
    			add_location(h1, file$m, 4, 0, 64);
    			add_location(p0, file$m, 5, 0, 87);
    			add_location(p1, file$m, 7, 0, 192);
    			add_location(h2, file$m, 9, 4, 247);
    			attr_dev(a, "href", "/");
    			add_location(a, file$m, 8, 0, 221);
    		},
    		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) {
    			insert_dev(target, h1, anchor);
    			insert_dev(target, t1, anchor);
    			insert_dev(target, p0, anchor);
    			insert_dev(target, t3, anchor);
    			insert_dev(target, p1, anchor);
    			insert_dev(target, t5, anchor);
    			insert_dev(target, a, anchor);
    			append_dev(a, h2);

    			if (!mounted) {
    				dispose = action_destroyer(link.call(null, a));
    				mounted = true;
    			}
    		},
    		p: noop,
    		i: noop,
    		o: noop,
    		d: function destroy(detaching) {
    			if (detaching) detach_dev(h1);
    			if (detaching) detach_dev(t1);
    			if (detaching) detach_dev(p0);
    			if (detaching) detach_dev(t3);
    			if (detaching) detach_dev(p1);
    			if (detaching) detach_dev(t5);
    			if (detaching) detach_dev(a);
    			mounted = false;
    			dispose();
    		}
    	};

    	dispatch_dev("SvelteRegisterBlock", {
    		block,
    		id: create_fragment$n.name,
    		type: "component",
    		source: "",
    		ctx
    	});

    	return block;
    }

    function instance$n($$self, $$props, $$invalidate) {
    	let { $$slots: slots = {}, $$scope } = $$props;
    	validate_slots('NotFound', slots, []);
    	const writable_props = [];

    	Object.keys($$props).forEach(key => {
    		if (!~writable_props.indexOf(key) && key.slice(0, 2) !== '$$' && key !== 'slot') console.warn(`<NotFound> was created with unknown prop '${key}'`);
    	});

    	$$self.$capture_state = () => ({ link });
    	return [];
    }

    class NotFound extends SvelteComponentDev {
    	constructor(options) {
    		super(options);
    		init(this, options, instance$n, create_fragment$n, safe_not_equal, {});

    		dispatch_dev("SvelteRegisterComponent", {
    			component: this,
    			tagName: "NotFound",
    			options,
    			id: create_fragment$n.name
    		});
    	}
    }

    // List of nodes to update
    const nodes = [];

    // Current location
    let location;

    // Function that updates all nodes marking the active ones
    function checkActive(el) {
        const matchesLocation = el.pattern.test(location);
        toggleClasses(el, el.className, matchesLocation);
        toggleClasses(el, el.inactiveClassName, !matchesLocation);
    }

    function toggleClasses(el, className, shouldAdd) {
        (className || '').split(' ').forEach((cls) => {
            if (!cls) {
                return
            }
            // Remove the class firsts
            el.node.classList.remove(cls);

            // If the pattern doesn't match, then set the class
            if (shouldAdd) {
                el.node.classList.add(cls);
            }
        });
    }

    // Listen to changes in the location
    loc.subscribe((value) => {
        // Update the location
        location = value.location + (value.querystring ? '?' + value.querystring : '');

        // Update all nodes
        nodes.map(checkActive);
    });

    /* src/pieces/Header.svelte generated by Svelte v3.53.1 */

    const { console: console_1$7 } = globals;
    const file$l = "src/pieces/Header.svelte";

    // (24:39) 
    function create_if_block_1$2(ctx) {
    	let button;
    	let mounted;
    	let dispose;

    	const block = {
    		c: function create() {
    			button = element("button");
    			button.textContent = "Settings";
    			attr_dev(button, "class", "svelte-1gjmpio");
    			add_location(button, file$l, 24, 6, 927);
    		},
    		m: function mount(target, anchor) {
    			insert_dev(target, button, anchor);

    			if (!mounted) {
    				dispose = listen_dev(button, "click", /*click_handler_2*/ ctx[4], false, false, false);
    				mounted = true;
    			}
    		},
    		p: noop,
    		d: function destroy(detaching) {
    			if (detaching) detach_dev(button);
    			mounted = false;
    			dispose();
    		}
    	};

    	dispatch_dev("SvelteRegisterBlock", {
    		block,
    		id: create_if_block_1$2.name,
    		type: "if",
    		source: "(24:39) ",
    		ctx
    	});

    	return block;
    }

    // (22:4) {#if $location !== '/profile'}
    function create_if_block$8(ctx) {
    	let button;
    	let mounted;
    	let dispose;

    	const block = {
    		c: function create() {
    			button = element("button");
    			button.textContent = "My Profile";
    			attr_dev(button, "class", "svelte-1gjmpio");
    			add_location(button, file$l, 22, 6, 817);
    		},
    		m: function mount(target, anchor) {
    			insert_dev(target, button, anchor);

    			if (!mounted) {
    				dispose = listen_dev(button, "click", /*click_handler_1*/ ctx[3], false, false, false);
    				mounted = true;
    			}
    		},
    		p: noop,
    		d: function destroy(detaching) {
    			if (detaching) detach_dev(button);
    			mounted = false;
    			dispose();
    		}
    	};

    	dispatch_dev("SvelteRegisterBlock", {
    		block,
    		id: create_if_block$8.name,
    		type: "if",
    		source: "(22:4) {#if $location !== '/profile'}",
    		ctx
    	});

    	return block;
    }

    function create_fragment$m(ctx) {
    	let header;
    	let img;
    	let img_src_value;
    	let t0;
    	let h1;
    	let t2;
    	let nav;
    	let t3;
    	let button0;
    	let t5;
    	let button1;
    	let t7;
    	let button2;
    	let mounted;
    	let dispose;

    	function select_block_type(ctx, dirty) {
    		if (/*$location*/ ctx[0] !== '/profile') return create_if_block$8;
    		if (/*$location*/ ctx[0] === '/profile') return create_if_block_1$2;
    	}

    	let current_block_type = select_block_type(ctx);
    	let if_block = current_block_type && current_block_type(ctx);

    	const block = {
    		c: function create() {
    			header = element("header");
    			img = element("img");
    			t0 = space();
    			h1 = element("h1");
    			h1.textContent = "Potato Pong";
    			t2 = space();
    			nav = element("nav");
    			if (if_block) if_block.c();
    			t3 = space();
    			button0 = element("button");
    			button0.textContent = "Friends";
    			t5 = space();
    			button1 = element("button");
    			button1.textContent = "test";
    			t7 = space();
    			button2 = element("button");
    			button2.textContent = "Log Out";
    			if (!src_url_equal(img.src, img_src_value = "/img/potato_logo.png")) attr_dev(img, "src", img_src_value);
    			attr_dev(img, "alt", "Potato Pong Logo");
    			attr_dev(img, "class", "svelte-1gjmpio");
    			add_location(img, file$l, 18, 2, 660);
    			attr_dev(h1, "class", "svelte-1gjmpio");
    			add_location(h1, file$l, 19, 2, 747);
    			attr_dev(button0, "class", "svelte-1gjmpio");
    			add_location(button0, file$l, 31, 4, 1171);
    			attr_dev(button1, "class", "svelte-1gjmpio");
    			add_location(button1, file$l, 32, 4, 1244);
    			attr_dev(button2, "class", "svelte-1gjmpio");
    			add_location(button2, file$l, 33, 4, 1303);
    			attr_dev(nav, "class", "svelte-1gjmpio");
    			add_location(nav, file$l, 20, 2, 770);
    			attr_dev(header, "class", "svelte-1gjmpio");
    			add_location(header, file$l, 17, 0, 649);
    		},
    		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) {
    			insert_dev(target, header, anchor);
    			append_dev(header, img);
    			append_dev(header, t0);
    			append_dev(header, h1);
    			append_dev(header, t2);
    			append_dev(header, nav);
    			if (if_block) if_block.m(nav, null);
    			append_dev(nav, t3);
    			append_dev(nav, button0);
    			append_dev(nav, t5);
    			append_dev(nav, button1);
    			append_dev(nav, t7);
    			append_dev(nav, button2);

    			if (!mounted) {
    				dispose = [
    					listen_dev(img, "click", /*click_handler*/ ctx[2], false, false, false),
    					listen_dev(button0, "click", /*click_handler_3*/ ctx[5], false, false, false),
    					listen_dev(button1, "click", /*click_handler_4*/ ctx[6], false, false, false),
    					listen_dev(button2, "click", /*handleClickLogout*/ ctx[1], false, false, false)
    				];

    				mounted = true;
    			}
    		},
    		p: function update(ctx, [dirty]) {
    			if (current_block_type === (current_block_type = select_block_type(ctx)) && if_block) {
    				if_block.p(ctx, dirty);
    			} else {
    				if (if_block) if_block.d(1);
    				if_block = current_block_type && current_block_type(ctx);

    				if (if_block) {
    					if_block.c();
    					if_block.m(nav, t3);
    				}
    			}
    		},
    		i: noop,
    		o: noop,
    		d: function destroy(detaching) {
    			if (detaching) detach_dev(header);

    			if (if_block) {
    				if_block.d();
    			}

    			mounted = false;
    			run_all(dispose);
    		}
    	};

    	dispatch_dev("SvelteRegisterBlock", {
    		block,
    		id: create_fragment$m.name,
    		type: "component",
    		source: "",
    		ctx
    	});

    	return block;
    }

    function instance$m($$self, $$props, $$invalidate) {
    	let $location;
    	validate_store(location$1, 'location');
    	component_subscribe($$self, location$1, $$value => $$invalidate(0, $location = $$value));
    	let { $$slots: slots = {}, $$scope } = $$props;
    	validate_slots('Header', slots, []);

    	let handleClickLogout = async () => {
    		await fetch('http://transcendance:8080/api/v2/auth/logout', { method: 'POST' }).// .then(resp => resp.json)
    		// .then((resp) => console.log(resp))
    		then(() => push('/')); // i think for TS reasons it has to be a func not direclty push('/') or whatever

    		console.log('clicked logout header');
    	};

    	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}'`);
    	});

    	const click_handler = () => push('/');
    	const click_handler_1 = () => push('/profile');
    	const click_handler_2 = () => push('/profile/settings');
    	const click_handler_3 = () => push('/profile/friends');
    	const click_handler_4 = () => push('/test');

    	$$self.$capture_state = () => ({
    		push,
    		location: location$1,
    		handleClickLogout,
    		$location
    	});

    	$$self.$inject_state = $$props => {
    		if ('handleClickLogout' in $$props) $$invalidate(1, handleClickLogout = $$props.handleClickLogout);
    	};

    	if ($$props && "$$inject" in $$props) {
    		$$self.$inject_state($$props.$$inject);
    	}

    	return [
    		$location,
    		handleClickLogout,
    		click_handler,
    		click_handler_1,
    		click_handler_2,
    		click_handler_3,
    		click_handler_4
    	];
    }

    class Header extends SvelteComponentDev {
    	constructor(options) {
    		super(options);
    		init(this, options, instance$m, create_fragment$m, safe_not_equal, {});

    		dispatch_dev("SvelteRegisterComponent", {
    			component: this,
    			tagName: "Header",
    			options,
    			id: create_fragment$m.name
    		});
    	}
    }

    /* src/pieces/GenerateUserDisplay.svelte generated by Svelte v3.53.1 */
    const file$k = "src/pieces/GenerateUserDisplay.svelte";

    // (58:2) {#if user !== undefined}
    function create_if_block$7(ctx) {
    	let main;
    	let img;
    	let img_src_value;
    	let t0;
    	let div0;
    	let t1_value = /*user*/ ctx[0].username + "";
    	let t1;
    	let t2;
    	let div1;
    	let t3;
    	let span4;
    	let span0;
    	let svg0;
    	let path0;
    	let t4;
    	let span1;
    	let svg1;
    	let path1;
    	let t5;
    	let span2;
    	let svg2;
    	let path2;
    	let t6;
    	let span3;
    	let t7;
    	let t8;
    	let section;
    	let h4;
    	let t10;
    	let p0;
    	let t11;
    	let t12_value = /*user*/ ctx[0].stats.totalGame + "";
    	let t12;
    	let t13;
    	let p1;
    	let t14;
    	let t15_value = /*user*/ ctx[0].stats.winGame + "";
    	let t15;
    	let t16;
    	let p2;
    	let t17;
    	let t18_value = /*user*/ ctx[0].stats.loseGame + "";
    	let t18;
    	let t19;
    	let p3;
    	let t20;
    	let t21_value = /*user*/ ctx[0].stats.drawGame + "";
    	let t21;

    	const block = {
    		c: function create() {
    			main = element("main");
    			img = element("img");
    			t0 = space();
    			div0 = element("div");
    			t1 = text(t1_value);
    			t2 = space();
    			div1 = element("div");
    			t3 = text("Rank: \n      ");
    			span4 = element("span");
    			span0 = element("span");
    			svg0 = svg_element("svg");
    			path0 = svg_element("path");
    			t4 = space();
    			span1 = element("span");
    			svg1 = svg_element("svg");
    			path1 = svg_element("path");
    			t5 = space();
    			span2 = element("span");
    			svg2 = svg_element("svg");
    			path2 = svg_element("path");
    			t6 = space();
    			span3 = element("span");
    			t7 = text(/*rank*/ ctx[1]);
    			t8 = space();
    			section = element("section");
    			h4 = element("h4");
    			h4.textContent = "Match Statistics";
    			t10 = space();
    			p0 = element("p");
    			t11 = text("Total: ");
    			t12 = text(t12_value);
    			t13 = space();
    			p1 = element("p");
    			t14 = text("Victories: ");
    			t15 = text(t15_value);
    			t16 = space();
    			p2 = element("p");
    			t17 = text("Losses: ");
    			t18 = text(t18_value);
    			t19 = space();
    			p3 = element("p");
    			t20 = text("Draws: ");
    			t21 = text(t21_value);
    			attr_dev(img, "class", "avatar svelte-16aefqu");
    			if (!src_url_equal(img.src, img_src_value = /*avatar*/ ctx[2])) attr_dev(img, "src", img_src_value);
    			attr_dev(img, "alt", "default user icon");
    			add_location(img, file$k, 61, 4, 1964);
    			attr_dev(div0, "class", "username svelte-16aefqu");
    			add_location(div0, file$k, 62, 4, 2028);
    			attr_dev(path0, "d", "M512 255.1c0 11.34-7.406 20.86-18.44 23.64l-171.3 42.78l-42.78 171.1C276.7 504.6 267.2 512 255.9 512s-20.84-7.406-23.62-18.44l-42.66-171.2L18.47 279.6C7.406 276.8 0 267.3 0 255.1c0-11.34 7.406-20.83 18.44-23.61l171.2-42.78l42.78-171.1C235.2 7.406 244.7 0 256 0s20.84 7.406 23.62 18.44l42.78 171.2l171.2 42.78C504.6 235.2 512 244.6 512 255.1z");
    			attr_dev(path0, "class", "svelte-16aefqu");
    			add_location(path0, file$k, 67, 10, 2235);
    			attr_dev(svg0, "viewBox", "0 0 512 512");
    			attr_dev(svg0, "class", "svelte-16aefqu");
    			add_location(svg0, file$k, 66, 10, 2197);
    			attr_dev(span0, "class", "glitter-star svelte-16aefqu");
    			add_location(span0, file$k, 65, 8, 2138);
    			attr_dev(path1, "d", "M512 255.1c0 11.34-7.406 20.86-18.44 23.64l-171.3 42.78l-42.78 171.1C276.7 504.6 267.2 512 255.9 512s-20.84-7.406-23.62-18.44l-42.66-171.2L18.47 279.6C7.406 276.8 0 267.3 0 255.1c0-11.34 7.406-20.83 18.44-23.61l171.2-42.78l42.78-171.1C235.2 7.406 244.7 0 256 0s20.84 7.406 23.62 18.44l42.78 171.2l171.2 42.78C504.6 235.2 512 244.6 512 255.1z");
    			attr_dev(path1, "class", "svelte-16aefqu");
    			add_location(path1, file$k, 72, 10, 2728);
    			attr_dev(svg1, "viewBox", "0 0 512 512");
    			attr_dev(svg1, "class", "svelte-16aefqu");
    			add_location(svg1, file$k, 71, 10, 2690);
    			attr_dev(span1, "class", "glitter-star svelte-16aefqu");
    			add_location(span1, file$k, 70, 8, 2631);
    			attr_dev(path2, "d", "M512 255.1c0 11.34-7.406 20.86-18.44 23.64l-171.3 42.78l-42.78 171.1C276.7 504.6 267.2 512 255.9 512s-20.84-7.406-23.62-18.44l-42.66-171.2L18.47 279.6C7.406 276.8 0 267.3 0 255.1c0-11.34 7.406-20.83 18.44-23.61l171.2-42.78l42.78-171.1C235.2 7.406 244.7 0 256 0s20.84 7.406 23.62 18.44l42.78 171.2l171.2 42.78C504.6 235.2 512 244.6 512 255.1z");
    			attr_dev(path2, "class", "svelte-16aefqu");
    			add_location(path2, file$k, 77, 10, 3221);
    			attr_dev(svg2, "viewBox", "0 0 512 512");
    			attr_dev(svg2, "class", "svelte-16aefqu");
    			add_location(svg2, file$k, 76, 10, 3183);
    			attr_dev(span2, "class", "glitter-star svelte-16aefqu");
    			add_location(span2, file$k, 75, 8, 3124);
    			attr_dev(span3, "class", "glitter-text svelte-16aefqu");
    			add_location(span3, file$k, 80, 8, 3617);
    			attr_dev(span4, "class", "glitter svelte-16aefqu");
    			add_location(span4, file$k, 64, 6, 2107);
    			attr_dev(div1, "class", "rank svelte-16aefqu");
    			add_location(div1, file$k, 63, 4, 2076);
    			attr_dev(h4, "class", "svelte-16aefqu");
    			add_location(h4, file$k, 84, 6, 3722);
    			add_location(p0, file$k, 85, 6, 3754);
    			add_location(p1, file$k, 86, 6, 3797);
    			add_location(p2, file$k, 87, 6, 3842);
    			add_location(p3, file$k, 88, 6, 3885);
    			attr_dev(section, "class", "main-stats svelte-16aefqu");
    			add_location(section, file$k, 83, 4, 3687);
    			attr_dev(main, "class", "svelte-16aefqu");
    			add_location(main, file$k, 58, 2, 1786);
    		},
    		m: function mount(target, anchor) {
    			insert_dev(target, main, anchor);
    			append_dev(main, img);
    			append_dev(main, t0);
    			append_dev(main, div0);
    			append_dev(div0, t1);
    			append_dev(main, t2);
    			append_dev(main, div1);
    			append_dev(div1, t3);
    			append_dev(div1, span4);
    			append_dev(span4, span0);
    			append_dev(span0, svg0);
    			append_dev(svg0, path0);
    			/*span0_binding*/ ctx[5](span0);
    			append_dev(span4, t4);
    			append_dev(span4, span1);
    			append_dev(span1, svg1);
    			append_dev(svg1, path1);
    			/*span1_binding*/ ctx[6](span1);
    			append_dev(span4, t5);
    			append_dev(span4, span2);
    			append_dev(span2, svg2);
    			append_dev(svg2, path2);
    			/*span2_binding*/ ctx[7](span2);
    			append_dev(span4, t6);
    			append_dev(span4, span3);
    			append_dev(span3, t7);
    			append_dev(main, t8);
    			append_dev(main, section);
    			append_dev(section, h4);
    			append_dev(section, t10);
    			append_dev(section, p0);
    			append_dev(p0, t11);
    			append_dev(p0, t12);
    			append_dev(section, t13);
    			append_dev(section, p1);
    			append_dev(p1, t14);
    			append_dev(p1, t15);
    			append_dev(section, t16);
    			append_dev(section, p2);
    			append_dev(p2, t17);
    			append_dev(p2, t18);
    			append_dev(section, t19);
    			append_dev(section, p3);
    			append_dev(p3, t20);
    			append_dev(p3, t21);
    		},
    		p: function update(ctx, dirty) {
    			if (dirty & /*avatar*/ 4 && !src_url_equal(img.src, img_src_value = /*avatar*/ ctx[2])) {
    				attr_dev(img, "src", img_src_value);
    			}

    			if (dirty & /*user*/ 1 && t1_value !== (t1_value = /*user*/ ctx[0].username + "")) set_data_dev(t1, t1_value);
    			if (dirty & /*rank*/ 2) set_data_dev(t7, /*rank*/ ctx[1]);
    			if (dirty & /*user*/ 1 && t12_value !== (t12_value = /*user*/ ctx[0].stats.totalGame + "")) set_data_dev(t12, t12_value);
    			if (dirty & /*user*/ 1 && t15_value !== (t15_value = /*user*/ ctx[0].stats.winGame + "")) set_data_dev(t15, t15_value);
    			if (dirty & /*user*/ 1 && t18_value !== (t18_value = /*user*/ ctx[0].stats.loseGame + "")) set_data_dev(t18, t18_value);
    			if (dirty & /*user*/ 1 && t21_value !== (t21_value = /*user*/ ctx[0].stats.drawGame + "")) set_data_dev(t21, t21_value);
    		},
    		d: function destroy(detaching) {
    			if (detaching) detach_dev(main);
    			/*span0_binding*/ ctx[5](null);
    			/*span1_binding*/ ctx[6](null);
    			/*span2_binding*/ ctx[7](null);
    		}
    	};

    	dispatch_dev("SvelteRegisterBlock", {
    		block,
    		id: create_if_block$7.name,
    		type: "if",
    		source: "(58:2) {#if user !== undefined}",
    		ctx
    	});

    	return block;
    }

    function create_fragment$l(ctx) {
    	let div;
    	let if_block = /*user*/ ctx[0] !== undefined && create_if_block$7(ctx);

    	const block = {
    		c: function create() {
    			div = element("div");
    			if (if_block) if_block.c();
    			attr_dev(div, "class", "outer svelte-16aefqu");
    			add_location(div, file$k, 56, 0, 1737);
    		},
    		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) {
    			insert_dev(target, div, anchor);
    			if (if_block) if_block.m(div, null);
    		},
    		p: function update(ctx, [dirty]) {
    			if (/*user*/ ctx[0] !== undefined) {
    				if (if_block) {
    					if_block.p(ctx, dirty);
    				} else {
    					if_block = create_if_block$7(ctx);
    					if_block.c();
    					if_block.m(div, null);
    				}
    			} else if (if_block) {
    				if_block.d(1);
    				if_block = null;
    			}
    		},
    		i: noop,
    		o: noop,
    		d: function destroy(detaching) {
    			if (detaching) detach_dev(div);
    			if (if_block) if_block.d();
    		}
    	};

    	dispatch_dev("SvelteRegisterBlock", {
    		block,
    		id: create_fragment$l.name,
    		type: "component",
    		source: "",
    		ctx
    	});

    	return block;
    }

    function instance$l($$self, $$props, $$invalidate) {
    	let { $$slots: slots = {}, $$scope } = $$props;
    	validate_slots('GenerateUserDisplay', slots, []);
    	let { user } = $$props;
    	let { primary } = $$props;
    	let rank = '';
    	let avatar;

    	onMount(async () => {
    		// using this for now cuz for some reason there is yet to be a way to fet another person's avatar
    		if (primary) {
    			await fetch("http://transcendance:8080/api/v2/user/avatar", { method: "GET" }).then(response => {
    				return response.blob();
    			}).then(data => {
    				const url = URL.createObjectURL(data);
    				$$invalidate(2, avatar = url);
    			});
    		}
    	}); // tmp
    	// console.log('mounted Profile Display')
    	// console.log(user);

    	// export function updateGeneratedUser(updatedUser) {
    	//   user = updatedUser;
    	// };
    	if (user.loseGame > user.winGame) {
    		rank = 'Bitch Ass Loser!';
    	} else if (user.loseGame === user.winGame) {
    		rank = 'Fine i guess...';
    	} else {
    		rank = 'Yea you da Boss!';
    	}

    	// Glittery Stars and such for Rank
    	let index = 0, interval = 1000;

    	const rand = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min;

    	// it's unhappy that "star" isn't typeset, no idea what to do about it...
    	const animate = star => {
    		// the if seems to have fixed the type issue
    		if (star) {
    			star.style.setProperty("--star-left", `${rand(-10, 100)}%`);
    			star.style.setProperty("--star-top", `${rand(-40, 80)}%`);
    			star.style.animation = "none";
    			star.offsetHeight;
    			star.style.animation = "";
    		}
    	};

    	// This is the part i invented, it was kinda a fucking nightmare...
    	let stars = [];

    	for (let i = 0; i < 3; i++) {
    		setTimeout(
    			() => {
    				animate(stars[i]);
    				setInterval(() => animate(stars[i]), 1000);
    			},
    			index++ * (interval / 3)
    		);
    	}

    	$$self.$$.on_mount.push(function () {
    		if (user === undefined && !('user' in $$props || $$self.$$.bound[$$self.$$.props['user']])) {
    			console.warn("<GenerateUserDisplay> was created without expected prop 'user'");
    		}

    		if (primary === undefined && !('primary' in $$props || $$self.$$.bound[$$self.$$.props['primary']])) {
    			console.warn("<GenerateUserDisplay> was created without expected prop 'primary'");
    		}
    	});

    	const writable_props = ['user', 'primary'];

    	Object.keys($$props).forEach(key => {
    		if (!~writable_props.indexOf(key) && key.slice(0, 2) !== '$$' && key !== 'slot') console.warn(`<GenerateUserDisplay> was created with unknown prop '${key}'`);
    	});

    	function span0_binding($$value) {
    		binding_callbacks[$$value ? 'unshift' : 'push'](() => {
    			stars[0] = $$value;
    			$$invalidate(3, stars);
    		});
    	}

    	function span1_binding($$value) {
    		binding_callbacks[$$value ? 'unshift' : 'push'](() => {
    			stars[1] = $$value;
    			$$invalidate(3, stars);
    		});
    	}

    	function span2_binding($$value) {
    		binding_callbacks[$$value ? 'unshift' : 'push'](() => {
    			stars[2] = $$value;
    			$$invalidate(3, stars);
    		});
    	}

    	$$self.$$set = $$props => {
    		if ('user' in $$props) $$invalidate(0, user = $$props.user);
    		if ('primary' in $$props) $$invalidate(4, primary = $$props.primary);
    	};

    	$$self.$capture_state = () => ({
    		onMount,
    		user,
    		primary,
    		rank,
    		avatar,
    		index,
    		interval,
    		rand,
    		animate,
    		stars
    	});

    	$$self.$inject_state = $$props => {
    		if ('user' in $$props) $$invalidate(0, user = $$props.user);
    		if ('primary' in $$props) $$invalidate(4, primary = $$props.primary);
    		if ('rank' in $$props) $$invalidate(1, rank = $$props.rank);
    		if ('avatar' in $$props) $$invalidate(2, avatar = $$props.avatar);
    		if ('index' in $$props) index = $$props.index;
    		if ('interval' in $$props) interval = $$props.interval;
    		if ('stars' in $$props) $$invalidate(3, stars = $$props.stars);
    	};

    	if ($$props && "$$inject" in $$props) {
    		$$self.$inject_state($$props.$$inject);
    	}

    	return [
    		user,
    		rank,
    		avatar,
    		stars,
    		primary,
    		span0_binding,
    		span1_binding,
    		span2_binding
    	];
    }

    class GenerateUserDisplay extends SvelteComponentDev {
    	constructor(options) {
    		super(options);
    		init(this, options, instance$l, create_fragment$l, safe_not_equal, { user: 0, primary: 4 });

    		dispatch_dev("SvelteRegisterComponent", {
    			component: this,
    			tagName: "GenerateUserDisplay",
    			options,
    			id: create_fragment$l.name
    		});
    	}

    	get user() {
    		throw new Error("<GenerateUserDisplay>: Props cannot be read directly from the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
    	}

    	set user(value) {
    		throw new Error("<GenerateUserDisplay>: Props cannot be set directly on the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
    	}

    	get primary() {
    		throw new Error("<GenerateUserDisplay>: Props cannot be read directly from the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
    	}

    	set primary(value) {
    		throw new Error("<GenerateUserDisplay>: Props cannot be set directly on the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
    	}
    }

    /* src/pieces/chat/Chat_button.svelte generated by Svelte v3.53.1 */

    const { console: console_1$6 } = globals;
    const file$j = "src/pieces/chat/Chat_button.svelte";

    function create_fragment$k(ctx) {
    	let button;
    	let p;
    	let button_class_value;
    	let current;
    	let mounted;
    	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 = {
    		c: function create() {
    			button = element("button");
    			p = element("p");
    			if (default_slot) default_slot.c();
    			attr_dev(p, "class", "svelte-otw4o4");
    			add_location(p, file$j, 18, 1, 368);
    			attr_dev(button, "class", button_class_value = "" + (null_to_empty(/*my_class*/ ctx[0]) + " svelte-otw4o4"));
    			attr_dev(button, "title", /*my_title*/ ctx[1]);
    			add_location(button, file$j, 17, 0, 299);
    		},
    		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) {
    			insert_dev(target, button, anchor);
    			append_dev(button, p);

    			if (default_slot) {
    				default_slot.m(p, null);
    			}

    			current = true;

    			if (!mounted) {
    				dispose = listen_dev(button, "click", /*update_layout*/ ctx[2], false, false, false);
    				mounted = true;
    			}
    		},
    		p: function update(ctx, [dirty]) {
    			if (default_slot) {
    				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*/ 1 && button_class_value !== (button_class_value = "" + (null_to_empty(/*my_class*/ ctx[0]) + " svelte-otw4o4"))) {
    				attr_dev(button, "class", button_class_value);
    			}

    			if (!current || dirty & /*my_title*/ 2) {
    				attr_dev(button, "title", /*my_title*/ ctx[1]);
    			}
    		},
    		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(button);
    			if (default_slot) default_slot.d(detaching);
    			mounted = false;
    			dispose();
    		}
    	};

    	dispatch_dev("SvelteRegisterBlock", {
    		block,
    		id: create_fragment$k.name,
    		type: "component",
    		source: "",
    		ctx
    	});

    	return block;
    }

    function instance$k($$self, $$props, $$invalidate) {
    	let { $$slots: slots = {}, $$scope } = $$props;
    	validate_slots('Chat_button', slots, ['default']);
    	let { my_class = "" } = $$props;
    	let { my_title = "" } = $$props;
    	let { layout = "" } = $$props;
    	let { new_layout = "" } = $$props;

    	function update_layout() {
    		$$invalidate(3, layout = new_layout);
    		console.log(layout);
    	}

    	const writable_props = ['my_class', 'my_title', 'layout', 'new_layout'];

    	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}'`);
    	});

    	$$self.$$set = $$props => {
    		if ('my_class' in $$props) $$invalidate(0, my_class = $$props.my_class);
    		if ('my_title' in $$props) $$invalidate(1, my_title = $$props.my_title);
    		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_class,
    		my_title,
    		layout,
    		new_layout,
    		update_layout
    	});

    	$$self.$inject_state = $$props => {
    		if ('my_class' in $$props) $$invalidate(0, my_class = $$props.my_class);
    		if ('my_title' in $$props) $$invalidate(1, my_title = $$props.my_title);
    		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_class, my_title, update_layout, layout, new_layout, $$scope, slots];
    }

    class Chat_button extends SvelteComponentDev {
    	constructor(options) {
    		super(options);

    		init(this, options, instance$k, create_fragment$k, safe_not_equal, {
    			my_class: 0,
    			my_title: 1,
    			layout: 3,
    			new_layout: 4
    		});

    		dispatch_dev("SvelteRegisterComponent", {
    			component: this,
    			tagName: "Chat_button",
    			options,
    			id: create_fragment$k.name
    		});
    	}

    	get my_class() {
    		throw new Error("<Chat_button>: 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("<Chat_button>: Props cannot be set directly on the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
    	}

    	get my_title() {
    		throw new Error("<Chat_button>: Props cannot be read directly from the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
    	}

    	set my_title(value) {
    		throw new Error("<Chat_button>: Props cannot be set directly on the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
    	}

    	get layout() {
    		throw new Error("<Chat_button>: Props cannot be read directly from the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
    	}

    	set layout(value) {
    		throw new Error("<Chat_button>: Props cannot be set directly on the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
    	}

    	get new_layout() {
    		throw new Error("<Chat_button>: 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("<Chat_button>: 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 */
    const file$i = "src/pieces/chat/Layout_home.svelte";

    // (12:1) <Button bind:layout new_layout="settings" my_class="settings dots icon">
    function create_default_slot_2$6(ctx) {
    	let t;

    	const block = {
    		c: function create() {
    			t = text("settings");
    		},
    		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$6.name,
    		type: "slot",
    		source: "(12:1) <Button bind:layout new_layout=\\\"settings\\\" my_class=\\\"settings dots icon\\\">",
    		ctx
    	});

    	return block;
    }

    // (17:1) <Button bind:layout new_layout="new" my_class="new transparent">
    function create_default_slot_1$6(ctx) {
    	let t;

    	const block = {
    		c: function create() {
    			t = text("new");
    		},
    		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_1$6.name,
    		type: "slot",
    		source: "(17:1) <Button bind:layout new_layout=\\\"new\\\" my_class=\\\"new transparent\\\">",
    		ctx
    	});

    	return block;
    }

    // (22:1) <Button bind:layout new_layout="close" my_class="close icon">
    function create_default_slot$8(ctx) {
    	let t;

    	const block = {
    		c: function create() {
    			t = text("close");
    		},
    		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$8.name,
    		type: "slot",
    		source: "(22:1) <Button bind:layout new_layout=\\\"close\\\" my_class=\\\"close icon\\\">",
    		ctx
    	});

    	return block;
    }

    function create_fragment$j(ctx) {
    	let div3;
    	let button0;
    	let updating_layout;
    	let t0;
    	let button1;
    	let updating_layout_1;
    	let t1;
    	let button2;
    	let updating_layout_2;
    	let t2;
    	let div2;
    	let p0;
    	let t4;
    	let div1;
    	let div0;
    	let p1;
    	let current;

    	function button0_layout_binding(value) {
    		/*button0_layout_binding*/ ctx[1](value);
    	}

    	let button0_props = {
    		new_layout: "settings",
    		my_class: "settings dots icon",
    		$$slots: { default: [create_default_slot_2$6] },
    		$$scope: { ctx }
    	};

    	if (/*layout*/ ctx[0] !== void 0) {
    		button0_props.layout = /*layout*/ ctx[0];
    	}

    	button0 = new Chat_button({ props: button0_props, $$inline: true });
    	binding_callbacks.push(() => bind(button0, 'layout', button0_layout_binding));

    	function button1_layout_binding(value) {
    		/*button1_layout_binding*/ ctx[2](value);
    	}

    	let button1_props = {
    		new_layout: "new",
    		my_class: "new transparent",
    		$$slots: { default: [create_default_slot_1$6] },
    		$$scope: { ctx }
    	};

    	if (/*layout*/ ctx[0] !== void 0) {
    		button1_props.layout = /*layout*/ ctx[0];
    	}

    	button1 = new Chat_button({ props: button1_props, $$inline: true });
    	binding_callbacks.push(() => bind(button1, 'layout', button1_layout_binding));

    	function button2_layout_binding(value) {
    		/*button2_layout_binding*/ ctx[3](value);
    	}

    	let button2_props = {
    		new_layout: "close",
    		my_class: "close icon",
    		$$slots: { default: [create_default_slot$8] },
    		$$scope: { ctx }
    	};

    	if (/*layout*/ ctx[0] !== void 0) {
    		button2_props.layout = /*layout*/ ctx[0];
    	}

    	button2 = new Chat_button({ props: button2_props, $$inline: true });
    	binding_callbacks.push(() => bind(button2, 'layout', button2_layout_binding));

    	const block = {
    		c: function create() {
    			div3 = element("div");
    			create_component(button0.$$.fragment);
    			t0 = space();
    			create_component(button1.$$.fragment);
    			t1 = space();
    			create_component(button2.$$.fragment);
    			t2 = space();
    			div2 = element("div");
    			p0 = element("p");
    			p0.textContent = "list of your rooms :";
    			t4 = space();
    			div1 = element("div");
    			div0 = element("div");
    			p1 = element("p");
    			p1.textContent = "/ you have no chat room yet /";
    			attr_dev(p0, "class", "title svelte-1jygwt2");
    			add_location(p0, file$i, 27, 2, 512);
    			attr_dev(p1, "class", "__center");
    			add_location(p1, file$i, 30, 4, 622);
    			attr_dev(div0, "class", "__show_if_only_child");
    			add_location(div0, file$i, 29, 3, 583);
    			attr_dev(div1, "class", "room_list");
    			add_location(div1, file$i, 28, 2, 556);
    			attr_dev(div2, "class", "panel_home __overflow_y_scroll __border_top __top svelte-1jygwt2");
    			add_location(div2, file$i, 26, 1, 446);
    			attr_dev(div3, "class", "grid_box svelte-1jygwt2");
    			add_location(div3, file$i, 8, 0, 87);
    		},
    		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) {
    			insert_dev(target, div3, anchor);
    			mount_component(button0, div3, null);
    			append_dev(div3, t0);
    			mount_component(button1, div3, null);
    			append_dev(div3, t1);
    			mount_component(button2, div3, null);
    			append_dev(div3, t2);
    			append_dev(div3, div2);
    			append_dev(div2, p0);
    			append_dev(div2, t4);
    			append_dev(div2, div1);
    			append_dev(div1, div0);
    			append_dev(div0, p1);
    			current = true;
    		},
    		p: function update(ctx, [dirty]) {
    			const button0_changes = {};

    			if (dirty & /*$$scope*/ 16) {
    				button0_changes.$$scope = { dirty, ctx };
    			}

    			if (!updating_layout && dirty & /*layout*/ 1) {
    				updating_layout = true;
    				button0_changes.layout = /*layout*/ ctx[0];
    				add_flush_callback(() => updating_layout = false);
    			}

    			button0.$set(button0_changes);
    			const button1_changes = {};

    			if (dirty & /*$$scope*/ 16) {
    				button1_changes.$$scope = { dirty, ctx };
    			}

    			if (!updating_layout_1 && dirty & /*layout*/ 1) {
    				updating_layout_1 = true;
    				button1_changes.layout = /*layout*/ ctx[0];
    				add_flush_callback(() => updating_layout_1 = false);
    			}

    			button1.$set(button1_changes);
    			const button2_changes = {};

    			if (dirty & /*$$scope*/ 16) {
    				button2_changes.$$scope = { dirty, ctx };
    			}

    			if (!updating_layout_2 && dirty & /*layout*/ 1) {
    				updating_layout_2 = true;
    				button2_changes.layout = /*layout*/ ctx[0];
    				add_flush_callback(() => updating_layout_2 = false);
    			}

    			button2.$set(button2_changes);
    		},
    		i: function intro(local) {
    			if (current) return;
    			transition_in(button0.$$.fragment, local);
    			transition_in(button1.$$.fragment, local);
    			transition_in(button2.$$.fragment, local);
    			current = true;
    		},
    		o: function outro(local) {
    			transition_out(button0.$$.fragment, local);
    			transition_out(button1.$$.fragment, local);
    			transition_out(button2.$$.fragment, local);
    			current = false;
    		},
    		d: function destroy(detaching) {
    			if (detaching) detach_dev(div3);
    			destroy_component(button0);
    			destroy_component(button1);
    			destroy_component(button2);
    		}
    	};

    	dispatch_dev("SvelteRegisterBlock", {
    		block,
    		id: create_fragment$j.name,
    		type: "component",
    		source: "",
    		ctx
    	});

    	return block;
    }

    function instance$j($$self, $$props, $$invalidate) {
    	let { $$slots: slots = {}, $$scope } = $$props;
    	validate_slots('Layout_home', slots, []);
    	let { layout } = $$props;

    	$$self.$$.on_mount.push(function () {
    		if (layout === undefined && !('layout' in $$props || $$self.$$.bound[$$self.$$.props['layout']])) {
    			console.warn("<Layout_home> was created without expected prop 'layout'");
    		}
    	});

    	const writable_props = ['layout'];

    	Object.keys($$props).forEach(key => {
    		if (!~writable_props.indexOf(key) && key.slice(0, 2) !== '$$' && key !== 'slot') console.warn(`<Layout_home> was created with unknown prop '${key}'`);
    	});

    	function button0_layout_binding(value) {
    		layout = value;
    		$$invalidate(0, layout);
    	}

    	function button1_layout_binding(value) {
    		layout = value;
    		$$invalidate(0, layout);
    	}

    	function button2_layout_binding(value) {
    		layout = value;
    		$$invalidate(0, layout);
    	}

    	$$self.$$set = $$props => {
    		if ('layout' in $$props) $$invalidate(0, layout = $$props.layout);
    	};

    	$$self.$capture_state = () => ({ Button: Chat_button, layout });

    	$$self.$inject_state = $$props => {
    		if ('layout' in $$props) $$invalidate(0, layout = $$props.layout);
    	};

    	if ($$props && "$$inject" in $$props) {
    		$$self.$inject_state($$props.$$inject);
    	}

    	return [layout, button0_layout_binding, button1_layout_binding, button2_layout_binding];
    }

    class Layout_home extends SvelteComponentDev {
    	constructor(options) {
    		super(options);
    		init(this, options, instance$j, create_fragment$j, safe_not_equal, { layout: 0 });

    		dispatch_dev("SvelteRegisterComponent", {
    			component: this,
    			tagName: "Layout_home",
    			options,
    			id: create_fragment$j.name
    		});
    	}

    	get layout() {
    		throw new Error("<Layout_home>: Props cannot be read directly from the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
    	}

    	set layout(value) {
    		throw new Error("<Layout_home>: Props cannot be set directly on the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
    	}
    }

    /* src/pieces/chat/Layout_room.svelte generated by Svelte v3.53.1 */
    const file$h = "src/pieces/chat/Layout_room.svelte";

    // (13:1) <Button bind:layout new_layout={back} my_class="back icon" my_title="go back {back}">
    function create_default_slot_3$4(ctx) {
    	let t;

    	const block = {
    		c: function create() {
    			t = text("back");
    		},
    		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$4.name,
    		type: "slot",
    		source: "(13:1) <Button bind:layout new_layout={back} my_class=\\\"back icon\\\" my_title=\\\"go back {back}\\\">",
    		ctx
    	});

    	return block;
    }

    // (18:1) <Button bind:layout new_layout="room_set" my_class="transparent">
    function create_default_slot_2$5(ctx) {
    	let t;

    	const block = {
    		c: function create() {
    			t = text("<room_name>");
    		},
    		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$5.name,
    		type: "slot",
    		source: "(18:1) <Button bind:layout new_layout=\\\"room_set\\\" my_class=\\\"transparent\\\">",
    		ctx
    	});

    	return block;
    }

    // (23:1) <Button bind:layout new_layout="close" my_class="close icon">
    function create_default_slot_1$5(ctx) {
    	let t;

    	const block = {
    		c: function create() {
    			t = text("close");
    		},
    		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_1$5.name,
    		type: "slot",
    		source: "(23:1) <Button bind:layout new_layout=\\\"close\\\" my_class=\\\"close icon\\\">",
    		ctx
    	});

    	return block;
    }

    // (67:1) <Button my_class="send">
    function create_default_slot$7(ctx) {
    	let t;

    	const block = {
    		c: function create() {
    			t = text("send");
    		},
    		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$7.name,
    		type: "slot",
    		source: "(67:1) <Button my_class=\\\"send\\\">",
    		ctx
    	});

    	return block;
    }

    function create_fragment$i(ctx) {
    	let div10;
    	let button0;
    	let updating_layout;
    	let t0;
    	let button1;
    	let updating_layout_1;
    	let t1;
    	let button2;
    	let updating_layout_2;
    	let t2;
    	let div7;
    	let div6;
    	let div0;
    	let p0;
    	let t4;
    	let p1;
    	let t5;
    	let br;
    	let t6;
    	let t7;
    	let div1;
    	let p2;
    	let t9;
    	let p3;
    	let t11;
    	let div2;
    	let p4;
    	let t13;
    	let p5;
    	let t15;
    	let div3;
    	let p6;
    	let t17;
    	let p7;
    	let t19;
    	let div4;
    	let p8;
    	let t21;
    	let p9;
    	let t23;
    	let div5;
    	let p10;
    	let t25;
    	let p11;
    	let t27;
    	let div9;
    	let div8;
    	let t28;
    	let button3;
    	let current;

    	function button0_layout_binding(value) {
    		/*button0_layout_binding*/ ctx[2](value);
    	}

    	let button0_props = {
    		new_layout: /*back*/ ctx[1],
    		my_class: "back icon",
    		my_title: "go back " + /*back*/ ctx[1],
    		$$slots: { default: [create_default_slot_3$4] },
    		$$scope: { ctx }
    	};

    	if (/*layout*/ ctx[0] !== void 0) {
    		button0_props.layout = /*layout*/ ctx[0];
    	}

    	button0 = new Chat_button({ props: button0_props, $$inline: true });
    	binding_callbacks.push(() => bind(button0, 'layout', button0_layout_binding));

    	function button1_layout_binding(value) {
    		/*button1_layout_binding*/ ctx[3](value);
    	}

    	let button1_props = {
    		new_layout: "room_set",
    		my_class: "transparent",
    		$$slots: { default: [create_default_slot_2$5] },
    		$$scope: { ctx }
    	};

    	if (/*layout*/ ctx[0] !== void 0) {
    		button1_props.layout = /*layout*/ ctx[0];
    	}

    	button1 = new Chat_button({ props: button1_props, $$inline: true });
    	binding_callbacks.push(() => bind(button1, 'layout', button1_layout_binding));

    	function button2_layout_binding(value) {
    		/*button2_layout_binding*/ ctx[4](value);
    	}

    	let button2_props = {
    		new_layout: "close",
    		my_class: "close icon",
    		$$slots: { default: [create_default_slot_1$5] },
    		$$scope: { ctx }
    	};

    	if (/*layout*/ ctx[0] !== void 0) {
    		button2_props.layout = /*layout*/ ctx[0];
    	}

    	button2 = new Chat_button({ props: button2_props, $$inline: true });
    	binding_callbacks.push(() => bind(button2, 'layout', button2_layout_binding));

    	button3 = new Chat_button({
    			props: {
    				my_class: "send",
    				$$slots: { default: [create_default_slot$7] },
    				$$scope: { ctx }
    			},
    			$$inline: true
    		});

    	const block = {
    		c: function create() {
    			div10 = element("div");
    			create_component(button0.$$.fragment);
    			t0 = space();
    			create_component(button1.$$.fragment);
    			t1 = space();
    			create_component(button2.$$.fragment);
    			t2 = space();
    			div7 = element("div");
    			div6 = element("div");
    			div0 = element("div");
    			p0 = element("p");
    			p0.textContent = "bob";
    			t4 = space();
    			p1 = element("p");
    			t5 = text("hello hello");
    			br = element("br");
    			t6 = text("hello hello hello hello");
    			t7 = space();
    			div1 = element("div");
    			p2 = element("p");
    			p2.textContent = "me";
    			t9 = space();
    			p3 = element("p");
    			p3.textContent = "hello";
    			t11 = space();
    			div2 = element("div");
    			p4 = element("p");
    			p4.textContent = "bob";
    			t13 = space();
    			p5 = element("p");
    			p5.textContent = "hello";
    			t15 = space();
    			div3 = element("div");
    			p6 = element("p");
    			p6.textContent = "me";
    			t17 = space();
    			p7 = element("p");
    			p7.textContent = "hello";
    			t19 = space();
    			div4 = element("div");
    			p8 = element("p");
    			p8.textContent = "bob";
    			t21 = space();
    			p9 = element("p");
    			p9.textContent = "hello";
    			t23 = space();
    			div5 = element("div");
    			p10 = element("p");
    			p10.textContent = "me";
    			t25 = space();
    			p11 = element("p");
    			p11.textContent = "hello";
    			t27 = space();
    			div9 = element("div");
    			div8 = element("div");
    			t28 = space();
    			create_component(button3.$$.fragment);
    			attr_dev(p0, "class", "name svelte-wnqq67");
    			add_location(p0, file$h, 32, 4, 632);
    			add_location(br, file$h, 33, 30, 686);
    			attr_dev(p1, "class", "msg svelte-wnqq67");
    			add_location(p1, file$h, 33, 4, 660);
    			attr_dev(div0, "class", "chat_msg blub svelte-wnqq67");
    			add_location(div0, file$h, 31, 3, 600);
    			attr_dev(p2, "class", "name svelte-wnqq67");
    			add_location(p2, file$h, 36, 4, 763);
    			attr_dev(p3, "class", "msg svelte-wnqq67");
    			add_location(p3, file$h, 37, 4, 790);
    			attr_dev(div1, "class", "chat_msg blob svelte-wnqq67");
    			add_location(div1, file$h, 35, 3, 731);
    			attr_dev(p4, "class", "name svelte-wnqq67");
    			add_location(p4, file$h, 40, 4, 858);
    			attr_dev(p5, "class", "msg svelte-wnqq67");
    			add_location(p5, file$h, 41, 4, 886);
    			attr_dev(div2, "class", "chat_msg me svelte-wnqq67");
    			add_location(div2, file$h, 39, 3, 828);
    			attr_dev(p6, "class", "name svelte-wnqq67");
    			add_location(p6, file$h, 44, 4, 954);
    			attr_dev(p7, "class", "msg svelte-wnqq67");
    			add_location(p7, file$h, 45, 4, 981);
    			attr_dev(div3, "class", "chat_msg me svelte-wnqq67");
    			add_location(div3, file$h, 43, 3, 924);
    			attr_dev(p8, "class", "name svelte-wnqq67");
    			add_location(p8, file$h, 48, 4, 1051);
    			attr_dev(p9, "class", "msg svelte-wnqq67");
    			add_location(p9, file$h, 49, 4, 1079);
    			attr_dev(div4, "class", "chat_msg bleb svelte-wnqq67");
    			add_location(div4, file$h, 47, 3, 1019);
    			attr_dev(p10, "class", "name svelte-wnqq67");
    			add_location(p10, file$h, 52, 4, 1151);
    			attr_dev(p11, "class", "msg svelte-wnqq67");
    			add_location(p11, file$h, 53, 4, 1178);
    			attr_dev(div5, "class", "chat_msg SERVER svelte-wnqq67");
    			add_location(div5, file$h, 51, 3, 1117);
    			attr_dev(div6, "class", "msg_thread svelte-wnqq67");
    			add_location(div6, file$h, 28, 2, 530);
    			attr_dev(div7, "class", "chat_panel panel_msg svelte-wnqq67");
    			add_location(div7, file$h, 27, 1, 493);
    			attr_dev(div8, "class", "text_area svelte-wnqq67");
    			attr_dev(div8, "id", "chat_msg_write");
    			attr_dev(div8, "contenteditable", "true");
    			add_location(div8, file$h, 61, 2, 1316);
    			attr_dev(div9, "class", "chat_panel panel_write svelte-wnqq67");
    			add_location(div9, file$h, 60, 1, 1277);
    			attr_dev(div10, "class", "grid_box svelte-wnqq67");
    			add_location(div10, file$h, 9, 0, 115);
    		},
    		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) {
    			insert_dev(target, div10, anchor);
    			mount_component(button0, div10, null);
    			append_dev(div10, t0);
    			mount_component(button1, div10, null);
    			append_dev(div10, t1);
    			mount_component(button2, div10, null);
    			append_dev(div10, t2);
    			append_dev(div10, div7);
    			append_dev(div7, div6);
    			append_dev(div6, div0);
    			append_dev(div0, p0);
    			append_dev(div0, t4);
    			append_dev(div0, p1);
    			append_dev(p1, t5);
    			append_dev(p1, br);
    			append_dev(p1, t6);
    			append_dev(div6, t7);
    			append_dev(div6, div1);
    			append_dev(div1, p2);
    			append_dev(div1, t9);
    			append_dev(div1, p3);
    			append_dev(div6, t11);
    			append_dev(div6, div2);
    			append_dev(div2, p4);
    			append_dev(div2, t13);
    			append_dev(div2, p5);
    			append_dev(div6, t15);
    			append_dev(div6, div3);
    			append_dev(div3, p6);
    			append_dev(div3, t17);
    			append_dev(div3, p7);
    			append_dev(div6, t19);
    			append_dev(div6, div4);
    			append_dev(div4, p8);
    			append_dev(div4, t21);
    			append_dev(div4, p9);
    			append_dev(div6, t23);
    			append_dev(div6, div5);
    			append_dev(div5, p10);
    			append_dev(div5, t25);
    			append_dev(div5, p11);
    			append_dev(div10, t27);
    			append_dev(div10, div9);
    			append_dev(div9, div8);
    			append_dev(div10, t28);
    			mount_component(button3, div10, null);
    			current = true;
    		},
    		p: function update(ctx, [dirty]) {
    			const button0_changes = {};
    			if (dirty & /*back*/ 2) button0_changes.new_layout = /*back*/ ctx[1];
    			if (dirty & /*back*/ 2) button0_changes.my_title = "go back " + /*back*/ ctx[1];

    			if (dirty & /*$$scope*/ 32) {
    				button0_changes.$$scope = { dirty, ctx };
    			}

    			if (!updating_layout && dirty & /*layout*/ 1) {
    				updating_layout = true;
    				button0_changes.layout = /*layout*/ ctx[0];
    				add_flush_callback(() => updating_layout = false);
    			}

    			button0.$set(button0_changes);
    			const button1_changes = {};

    			if (dirty & /*$$scope*/ 32) {
    				button1_changes.$$scope = { dirty, ctx };
    			}

    			if (!updating_layout_1 && dirty & /*layout*/ 1) {
    				updating_layout_1 = true;
    				button1_changes.layout = /*layout*/ ctx[0];
    				add_flush_callback(() => updating_layout_1 = false);
    			}

    			button1.$set(button1_changes);
    			const button2_changes = {};

    			if (dirty & /*$$scope*/ 32) {
    				button2_changes.$$scope = { dirty, ctx };
    			}

    			if (!updating_layout_2 && dirty & /*layout*/ 1) {
    				updating_layout_2 = true;
    				button2_changes.layout = /*layout*/ ctx[0];
    				add_flush_callback(() => updating_layout_2 = false);
    			}

    			button2.$set(button2_changes);
    			const button3_changes = {};

    			if (dirty & /*$$scope*/ 32) {
    				button3_changes.$$scope = { dirty, ctx };
    			}

    			button3.$set(button3_changes);
    		},
    		i: function intro(local) {
    			if (current) return;
    			transition_in(button0.$$.fragment, local);
    			transition_in(button1.$$.fragment, local);
    			transition_in(button2.$$.fragment, local);
    			transition_in(button3.$$.fragment, local);
    			current = true;
    		},
    		o: function outro(local) {
    			transition_out(button0.$$.fragment, local);
    			transition_out(button1.$$.fragment, local);
    			transition_out(button2.$$.fragment, local);
    			transition_out(button3.$$.fragment, local);
    			current = false;
    		},
    		d: function destroy(detaching) {
    			if (detaching) detach_dev(div10);
    			destroy_component(button0);
    			destroy_component(button1);
    			destroy_component(button2);
    			destroy_component(button3);
    		}
    	};

    	dispatch_dev("SvelteRegisterBlock", {
    		block,
    		id: create_fragment$i.name,
    		type: "component",
    		source: "",
    		ctx
    	});

    	return block;
    }

    function instance$i($$self, $$props, $$invalidate) {
    	let { $$slots: slots = {}, $$scope } = $$props;
    	validate_slots('Layout_room', slots, []);
    	let { layout = "" } = $$props;
    	let { back = "" } = $$props;
    	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}'`);
    	});

    	function button0_layout_binding(value) {
    		layout = value;
    		$$invalidate(0, layout);
    	}

    	function button1_layout_binding(value) {
    		layout = value;
    		$$invalidate(0, layout);
    	}

    	function button2_layout_binding(value) {
    		layout = value;
    		$$invalidate(0, layout);
    	}

    	$$self.$$set = $$props => {
    		if ('layout' in $$props) $$invalidate(0, layout = $$props.layout);
    		if ('back' in $$props) $$invalidate(1, back = $$props.back);
    	};

    	$$self.$capture_state = () => ({ Button: Chat_button, layout, back });

    	$$self.$inject_state = $$props => {
    		if ('layout' in $$props) $$invalidate(0, layout = $$props.layout);
    		if ('back' in $$props) $$invalidate(1, back = $$props.back);
    	};

    	if ($$props && "$$inject" in $$props) {
    		$$self.$inject_state($$props.$$inject);
    	}

    	return [
    		layout,
    		back,
    		button0_layout_binding,
    		button1_layout_binding,
    		button2_layout_binding
    	];
    }

    class Layout_room extends SvelteComponentDev {
    	constructor(options) {
    		super(options);
    		init(this, options, instance$i, create_fragment$i, safe_not_equal, { layout: 0, back: 1 });

    		dispatch_dev("SvelteRegisterComponent", {
    			component: this,
    			tagName: "Layout_room",
    			options,
    			id: create_fragment$i.name
    		});
    	}

    	get layout() {
    		throw new Error("<Layout_room>: Props cannot be read directly from the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
    	}

    	set layout(value) {
    		throw new Error("<Layout_room>: Props cannot be set directly on the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
    	}

    	get back() {
    		throw new Error("<Layout_room>: Props cannot be read directly from the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
    	}

    	set back(value) {
    		throw new Error("<Layout_room>: Props cannot be set directly on the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
    	}
    }

    /* src/pieces/chat/Layout_new.svelte generated by Svelte v3.53.1 */
    const file$g = "src/pieces/chat/Layout_new.svelte";

    // (13:1) <Button bind:layout new_layout={back} my_class="back icon" my_title="go back {back}">
    function create_default_slot_3$3(ctx) {
    	let t;

    	const block = {
    		c: function create() {
    			t = text("back");
    		},
    		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$3.name,
    		type: "slot",
    		source: "(13:1) <Button bind:layout new_layout={back} my_class=\\\"back icon\\\" my_title=\\\"go back {back}\\\">",
    		ctx
    	});

    	return block;
    }

    // (18:1) <Button my_class="new deactivate">
    function create_default_slot_2$4(ctx) {
    	let t;

    	const block = {
    		c: function create() {
    			t = text("new");
    		},
    		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$4.name,
    		type: "slot",
    		source: "(18:1) <Button my_class=\\\"new deactivate\\\">",
    		ctx
    	});

    	return block;
    }

    // (23:1) <Button bind:layout new_layout="close" my_class="close icon">
    function create_default_slot_1$4(ctx) {
    	let t;

    	const block = {
    		c: function create() {
    			t = text("close");
    		},
    		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_1$4.name,
    		type: "slot",
    		source: "(23:1) <Button bind:layout new_layout=\\\"close\\\" my_class=\\\"close icon\\\">",
    		ctx
    	});

    	return block;
    }

    // (29:2) <Button bind:layout new_layout="create" my_class="create">
    function create_default_slot$6(ctx) {
    	let t;

    	const block = {
    		c: function create() {
    			t = text("create");
    		},
    		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$6.name,
    		type: "slot",
    		source: "(29:2) <Button bind:layout new_layout=\\\"create\\\" my_class=\\\"create\\\">",
    		ctx
    	});

    	return block;
    }

    function create_fragment$h(ctx) {
    	let div3;
    	let button0;
    	let updating_layout;
    	let t0;
    	let button1;
    	let t1;
    	let button2;
    	let updating_layout_1;
    	let t2;
    	let div2;
    	let button3;
    	let updating_layout_2;
    	let t3;
    	let p0;
    	let t5;
    	let div1;
    	let div0;
    	let p1;
    	let current;

    	function button0_layout_binding(value) {
    		/*button0_layout_binding*/ ctx[2](value);
    	}

    	let button0_props = {
    		new_layout: /*back*/ ctx[1],
    		my_class: "back icon",
    		my_title: "go back " + /*back*/ ctx[1],
    		$$slots: { default: [create_default_slot_3$3] },
    		$$scope: { ctx }
    	};

    	if (/*layout*/ ctx[0] !== void 0) {
    		button0_props.layout = /*layout*/ ctx[0];
    	}

    	button0 = new Chat_button({ props: button0_props, $$inline: true });
    	binding_callbacks.push(() => bind(button0, 'layout', button0_layout_binding));

    	button1 = new Chat_button({
    			props: {
    				my_class: "new deactivate",
    				$$slots: { default: [create_default_slot_2$4] },
    				$$scope: { ctx }
    			},
    			$$inline: true
    		});

    	function button2_layout_binding(value) {
    		/*button2_layout_binding*/ ctx[3](value);
    	}

    	let button2_props = {
    		new_layout: "close",
    		my_class: "close icon",
    		$$slots: { default: [create_default_slot_1$4] },
    		$$scope: { ctx }
    	};

    	if (/*layout*/ ctx[0] !== void 0) {
    		button2_props.layout = /*layout*/ ctx[0];
    	}

    	button2 = new Chat_button({ props: button2_props, $$inline: true });
    	binding_callbacks.push(() => bind(button2, 'layout', button2_layout_binding));

    	function button3_layout_binding(value) {
    		/*button3_layout_binding*/ ctx[4](value);
    	}

    	let button3_props = {
    		new_layout: "create",
    		my_class: "create",
    		$$slots: { default: [create_default_slot$6] },
    		$$scope: { ctx }
    	};

    	if (/*layout*/ ctx[0] !== void 0) {
    		button3_props.layout = /*layout*/ ctx[0];
    	}

    	button3 = new Chat_button({ props: button3_props, $$inline: true });
    	binding_callbacks.push(() => bind(button3, 'layout', button3_layout_binding));

    	const block = {
    		c: function create() {
    			div3 = element("div");
    			create_component(button0.$$.fragment);
    			t0 = space();
    			create_component(button1.$$.fragment);
    			t1 = space();
    			create_component(button2.$$.fragment);
    			t2 = space();
    			div2 = element("div");
    			create_component(button3.$$.fragment);
    			t3 = space();
    			p0 = element("p");
    			p0.textContent = "join room :";
    			t5 = space();
    			div1 = element("div");
    			div0 = element("div");
    			p1 = element("p");
    			p1.textContent = "/ there are no public rooms yet /";
    			add_location(p0, file$g, 31, 2, 596);
    			attr_dev(p1, "class", "__center");
    			add_location(p1, file$g, 34, 4, 686);
    			attr_dev(div0, "class", "__show_if_only_child");
    			add_location(div0, file$g, 33, 3, 647);
    			attr_dev(div1, "class", "public_rooms");
    			add_location(div1, file$g, 32, 2, 617);
    			attr_dev(div2, "class", "panel_new __overflow_y_scroll __border_top __top");
    			add_location(div2, file$g, 27, 1, 448);
    			attr_dev(div3, "class", "grid_box svelte-4f5gf1");
    			add_location(div3, file$g, 9, 0, 115);
    		},
    		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) {
    			insert_dev(target, div3, anchor);
    			mount_component(button0, div3, null);
    			append_dev(div3, t0);
    			mount_component(button1, div3, null);
    			append_dev(div3, t1);
    			mount_component(button2, div3, null);
    			append_dev(div3, t2);
    			append_dev(div3, div2);
    			mount_component(button3, div2, null);
    			append_dev(div2, t3);
    			append_dev(div2, p0);
    			append_dev(div2, t5);
    			append_dev(div2, div1);
    			append_dev(div1, div0);
    			append_dev(div0, p1);
    			current = true;
    		},
    		p: function update(ctx, [dirty]) {
    			const button0_changes = {};
    			if (dirty & /*back*/ 2) button0_changes.new_layout = /*back*/ ctx[1];
    			if (dirty & /*back*/ 2) button0_changes.my_title = "go back " + /*back*/ ctx[1];

    			if (dirty & /*$$scope*/ 32) {
    				button0_changes.$$scope = { dirty, ctx };
    			}

    			if (!updating_layout && dirty & /*layout*/ 1) {
    				updating_layout = true;
    				button0_changes.layout = /*layout*/ ctx[0];
    				add_flush_callback(() => updating_layout = false);
    			}

    			button0.$set(button0_changes);
    			const button1_changes = {};

    			if (dirty & /*$$scope*/ 32) {
    				button1_changes.$$scope = { dirty, ctx };
    			}

    			button1.$set(button1_changes);
    			const button2_changes = {};

    			if (dirty & /*$$scope*/ 32) {
    				button2_changes.$$scope = { dirty, ctx };
    			}

    			if (!updating_layout_1 && dirty & /*layout*/ 1) {
    				updating_layout_1 = true;
    				button2_changes.layout = /*layout*/ ctx[0];
    				add_flush_callback(() => updating_layout_1 = false);
    			}

    			button2.$set(button2_changes);
    			const button3_changes = {};

    			if (dirty & /*$$scope*/ 32) {
    				button3_changes.$$scope = { dirty, ctx };
    			}

    			if (!updating_layout_2 && dirty & /*layout*/ 1) {
    				updating_layout_2 = true;
    				button3_changes.layout = /*layout*/ ctx[0];
    				add_flush_callback(() => updating_layout_2 = false);
    			}

    			button3.$set(button3_changes);
    		},
    		i: function intro(local) {
    			if (current) return;
    			transition_in(button0.$$.fragment, local);
    			transition_in(button1.$$.fragment, local);
    			transition_in(button2.$$.fragment, local);
    			transition_in(button3.$$.fragment, local);
    			current = true;
    		},
    		o: function outro(local) {
    			transition_out(button0.$$.fragment, local);
    			transition_out(button1.$$.fragment, local);
    			transition_out(button2.$$.fragment, local);
    			transition_out(button3.$$.fragment, local);
    			current = false;
    		},
    		d: function destroy(detaching) {
    			if (detaching) detach_dev(div3);
    			destroy_component(button0);
    			destroy_component(button1);
    			destroy_component(button2);
    			destroy_component(button3);
    		}
    	};

    	dispatch_dev("SvelteRegisterBlock", {
    		block,
    		id: create_fragment$h.name,
    		type: "component",
    		source: "",
    		ctx
    	});

    	return block;
    }

    function instance$h($$self, $$props, $$invalidate) {
    	let { $$slots: slots = {}, $$scope } = $$props;
    	validate_slots('Layout_new', slots, []);
    	let { layout = "" } = $$props;
    	let { back = "" } = $$props;
    	const writable_props = ['layout', 'back'];

    	Object.keys($$props).forEach(key => {
    		if (!~writable_props.indexOf(key) && key.slice(0, 2) !== '$$' && key !== 'slot') console.warn(`<Layout_new> was created with unknown prop '${key}'`);
    	});

    	function button0_layout_binding(value) {
    		layout = value;
    		$$invalidate(0, layout);
    	}

    	function button2_layout_binding(value) {
    		layout = value;
    		$$invalidate(0, layout);
    	}

    	function button3_layout_binding(value) {
    		layout = value;
    		$$invalidate(0, layout);
    	}

    	$$self.$$set = $$props => {
    		if ('layout' in $$props) $$invalidate(0, layout = $$props.layout);
    		if ('back' in $$props) $$invalidate(1, back = $$props.back);
    	};

    	$$self.$capture_state = () => ({ Button: Chat_button, layout, back });

    	$$self.$inject_state = $$props => {
    		if ('layout' in $$props) $$invalidate(0, layout = $$props.layout);
    		if ('back' in $$props) $$invalidate(1, back = $$props.back);
    	};

    	if ($$props && "$$inject" in $$props) {
    		$$self.$inject_state($$props.$$inject);
    	}

    	return [
    		layout,
    		back,
    		button0_layout_binding,
    		button2_layout_binding,
    		button3_layout_binding
    	];
    }

    class Layout_new extends SvelteComponentDev {
    	constructor(options) {
    		super(options);
    		init(this, options, instance$h, create_fragment$h, safe_not_equal, { layout: 0, back: 1 });

    		dispatch_dev("SvelteRegisterComponent", {
    			component: this,
    			tagName: "Layout_new",
    			options,
    			id: create_fragment$h.name
    		});
    	}

    	get layout() {
    		throw new Error("<Layout_new>: Props cannot be read directly from the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
    	}

    	set layout(value) {
    		throw new Error("<Layout_new>: Props cannot be set directly on the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
    	}

    	get back() {
    		throw new Error("<Layout_new>: Props cannot be read directly from the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
    	}

    	set back(value) {
    		throw new Error("<Layout_new>: Props cannot be set directly on the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
    	}
    }

    /* src/pieces/chat/Layout_settings.svelte generated by Svelte v3.53.1 */
    const file$f = "src/pieces/chat/Layout_settings.svelte";

    // (13:1) <Button bind:layout new_layout={back} my_class="back icon" my_title="go back {back}">
    function create_default_slot_12(ctx) {
    	let t;

    	const block = {
    		c: function create() {
    			t = text("back");
    		},
    		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_12.name,
    		type: "slot",
    		source: "(13:1) <Button bind:layout new_layout={back} my_class=\\\"back icon\\\" my_title=\\\"go back {back}\\\">",
    		ctx
    	});

    	return block;
    }

    // (18:1) <Button my_class="deactivate">
    function create_default_slot_11(ctx) {
    	let t;

    	const block = {
    		c: function create() {
    			t = text("settings");
    		},
    		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_11.name,
    		type: "slot",
    		source: "(18:1) <Button my_class=\\\"deactivate\\\">",
    		ctx
    	});

    	return block;
    }

    // (23:1) <Button bind:layout new_layout="close" my_class="close icon">
    function create_default_slot_10(ctx) {
    	let t;

    	const block = {
    		c: function create() {
    			t = text("close");
    		},
    		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_10.name,
    		type: "slot",
    		source: "(23:1) <Button bind:layout new_layout=\\\"close\\\" my_class=\\\"close icon\\\">",
    		ctx
    	});

    	return block;
    }

    // (52:2) <Button bind:layout new_layout="close"    >
    function create_default_slot_9(ctx) {
    	let t;

    	const block = {
    		c: function create() {
    			t = text("close");
    		},
    		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_9.name,
    		type: "slot",
    		source: "(52:2) <Button bind:layout new_layout=\\\"close\\\"    >",
    		ctx
    	});

    	return block;
    }

    // (53:2) <Button bind:layout new_layout="home"     >
    function create_default_slot_8(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_8.name,
    		type: "slot",
    		source: "(53:2) <Button bind:layout new_layout=\\\"home\\\"     >",
    		ctx
    	});

    	return block;
    }

    // (54:2) <Button bind:layout new_layout="room"     >
    function create_default_slot_7$1(ctx) {
    	let t;

    	const block = {
    		c: function create() {
    			t = text("room");
    		},
    		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_7$1.name,
    		type: "slot",
    		source: "(54:2) <Button bind:layout new_layout=\\\"room\\\"     >",
    		ctx
    	});

    	return block;
    }

    // (55:2) <Button bind:layout new_layout="new"      >
    function create_default_slot_6$1(ctx) {
    	let t;

    	const block = {
    		c: function create() {
    			t = text("new");
    		},
    		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_6$1.name,
    		type: "slot",
    		source: "(55:2) <Button bind:layout new_layout=\\\"new\\\"      >",
    		ctx
    	});

    	return block;
    }

    // (56:2) <Button bind:layout new_layout="settings" >
    function create_default_slot_5$1(ctx) {
    	let t;

    	const block = {
    		c: function create() {
    			t = text("settings");
    		},
    		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_5$1.name,
    		type: "slot",
    		source: "(56:2) <Button bind:layout new_layout=\\\"settings\\\" >",
    		ctx
    	});

    	return block;
    }

    // (57:2) <Button bind:layout new_layout="room_set" >
    function create_default_slot_4$1(ctx) {
    	let t;

    	const block = {
    		c: function create() {
    			t = text("room_set");
    		},
    		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_4$1.name,
    		type: "slot",
    		source: "(57:2) <Button bind:layout new_layout=\\\"room_set\\\" >",
    		ctx
    	});

    	return block;
    }

    // (58:2) <Button bind:layout new_layout="protected">
    function create_default_slot_3$2(ctx) {
    	let t;

    	const block = {
    		c: function create() {
    			t = text("protected");
    		},
    		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$2.name,
    		type: "slot",
    		source: "(58:2) <Button bind:layout new_layout=\\\"protected\\\">",
    		ctx
    	});

    	return block;
    }

    // (59:2) <Button bind:layout new_layout="create"   >
    function create_default_slot_2$3(ctx) {
    	let t;

    	const block = {
    		c: function create() {
    			t = text("create");
    		},
    		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$3.name,
    		type: "slot",
    		source: "(59:2) <Button bind:layout new_layout=\\\"create\\\"   >",
    		ctx
    	});

    	return block;
    }

    // (60:2) <Button bind:layout new_layout="mute"     >
    function create_default_slot_1$3(ctx) {
    	let t;

    	const block = {
    		c: function create() {
    			t = text("mute");
    		},
    		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_1$3.name,
    		type: "slot",
    		source: "(60:2) <Button bind:layout new_layout=\\\"mute\\\"     >",
    		ctx
    	});

    	return block;
    }

    // (61:2) <Button bind:layout new_layout="user"     >
    function create_default_slot$5(ctx) {
    	let t;

    	const block = {
    		c: function create() {
    			t = text("user");
    		},
    		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$5.name,
    		type: "slot",
    		source: "(61:2) <Button bind:layout new_layout=\\\"user\\\"     >",
    		ctx
    	});

    	return block;
    }

    function create_fragment$g(ctx) {
    	let div3;
    	let button0;
    	let updating_layout;
    	let t0;
    	let button1;
    	let t1;
    	let button2;
    	let updating_layout_1;
    	let t2;
    	let div2;
    	let p0;
    	let t4;
    	let div1;
    	let div0;
    	let p1;
    	let t6;
    	let button3;
    	let updating_layout_2;
    	let t7;
    	let button4;
    	let updating_layout_3;
    	let t8;
    	let button5;
    	let updating_layout_4;
    	let t9;
    	let button6;
    	let updating_layout_5;
    	let t10;
    	let button7;
    	let updating_layout_6;
    	let t11;
    	let button8;
    	let updating_layout_7;
    	let t12;
    	let button9;
    	let updating_layout_8;
    	let t13;
    	let button10;
    	let updating_layout_9;
    	let t14;
    	let button11;
    	let updating_layout_10;
    	let t15;
    	let button12;
    	let updating_layout_11;
    	let current;

    	function button0_layout_binding(value) {
    		/*button0_layout_binding*/ ctx[2](value);
    	}

    	let button0_props = {
    		new_layout: /*back*/ ctx[1],
    		my_class: "back icon",
    		my_title: "go back " + /*back*/ ctx[1],
    		$$slots: { default: [create_default_slot_12] },
    		$$scope: { ctx }
    	};

    	if (/*layout*/ ctx[0] !== void 0) {
    		button0_props.layout = /*layout*/ ctx[0];
    	}

    	button0 = new Chat_button({ props: button0_props, $$inline: true });
    	binding_callbacks.push(() => bind(button0, 'layout', button0_layout_binding));

    	button1 = new Chat_button({
    			props: {
    				my_class: "deactivate",
    				$$slots: { default: [create_default_slot_11] },
    				$$scope: { ctx }
    			},
    			$$inline: true
    		});

    	function button2_layout_binding(value) {
    		/*button2_layout_binding*/ ctx[3](value);
    	}

    	let button2_props = {
    		new_layout: "close",
    		my_class: "close icon",
    		$$slots: { default: [create_default_slot_10] },
    		$$scope: { ctx }
    	};

    	if (/*layout*/ ctx[0] !== void 0) {
    		button2_props.layout = /*layout*/ ctx[0];
    	}

    	button2 = new Chat_button({ props: button2_props, $$inline: true });
    	binding_callbacks.push(() => bind(button2, 'layout', button2_layout_binding));

    	function button3_layout_binding(value) {
    		/*button3_layout_binding*/ ctx[4](value);
    	}

    	let button3_props = {
    		new_layout: "close",
    		$$slots: { default: [create_default_slot_9] },
    		$$scope: { ctx }
    	};

    	if (/*layout*/ ctx[0] !== void 0) {
    		button3_props.layout = /*layout*/ ctx[0];
    	}

    	button3 = new Chat_button({ props: button3_props, $$inline: true });
    	binding_callbacks.push(() => bind(button3, 'layout', button3_layout_binding));

    	function button4_layout_binding(value) {
    		/*button4_layout_binding*/ ctx[5](value);
    	}

    	let button4_props = {
    		new_layout: "home",
    		$$slots: { default: [create_default_slot_8] },
    		$$scope: { ctx }
    	};

    	if (/*layout*/ ctx[0] !== void 0) {
    		button4_props.layout = /*layout*/ ctx[0];
    	}

    	button4 = new Chat_button({ props: button4_props, $$inline: true });
    	binding_callbacks.push(() => bind(button4, 'layout', button4_layout_binding));

    	function button5_layout_binding(value) {
    		/*button5_layout_binding*/ ctx[6](value);
    	}

    	let button5_props = {
    		new_layout: "room",
    		$$slots: { default: [create_default_slot_7$1] },
    		$$scope: { ctx }
    	};

    	if (/*layout*/ ctx[0] !== void 0) {
    		button5_props.layout = /*layout*/ ctx[0];
    	}

    	button5 = new Chat_button({ props: button5_props, $$inline: true });
    	binding_callbacks.push(() => bind(button5, 'layout', button5_layout_binding));

    	function button6_layout_binding(value) {
    		/*button6_layout_binding*/ ctx[7](value);
    	}

    	let button6_props = {
    		new_layout: "new",
    		$$slots: { default: [create_default_slot_6$1] },
    		$$scope: { ctx }
    	};

    	if (/*layout*/ ctx[0] !== void 0) {
    		button6_props.layout = /*layout*/ ctx[0];
    	}

    	button6 = new Chat_button({ props: button6_props, $$inline: true });
    	binding_callbacks.push(() => bind(button6, 'layout', button6_layout_binding));

    	function button7_layout_binding(value) {
    		/*button7_layout_binding*/ ctx[8](value);
    	}

    	let button7_props = {
    		new_layout: "settings",
    		$$slots: { default: [create_default_slot_5$1] },
    		$$scope: { ctx }
    	};

    	if (/*layout*/ ctx[0] !== void 0) {
    		button7_props.layout = /*layout*/ ctx[0];
    	}

    	button7 = new Chat_button({ props: button7_props, $$inline: true });
    	binding_callbacks.push(() => bind(button7, 'layout', button7_layout_binding));

    	function button8_layout_binding(value) {
    		/*button8_layout_binding*/ ctx[9](value);
    	}

    	let button8_props = {
    		new_layout: "room_set",
    		$$slots: { default: [create_default_slot_4$1] },
    		$$scope: { ctx }
    	};

    	if (/*layout*/ ctx[0] !== void 0) {
    		button8_props.layout = /*layout*/ ctx[0];
    	}

    	button8 = new Chat_button({ props: button8_props, $$inline: true });
    	binding_callbacks.push(() => bind(button8, 'layout', button8_layout_binding));

    	function button9_layout_binding(value) {
    		/*button9_layout_binding*/ ctx[10](value);
    	}

    	let button9_props = {
    		new_layout: "protected",
    		$$slots: { default: [create_default_slot_3$2] },
    		$$scope: { ctx }
    	};

    	if (/*layout*/ ctx[0] !== void 0) {
    		button9_props.layout = /*layout*/ ctx[0];
    	}

    	button9 = new Chat_button({ props: button9_props, $$inline: true });
    	binding_callbacks.push(() => bind(button9, 'layout', button9_layout_binding));

    	function button10_layout_binding(value) {
    		/*button10_layout_binding*/ ctx[11](value);
    	}

    	let button10_props = {
    		new_layout: "create",
    		$$slots: { default: [create_default_slot_2$3] },
    		$$scope: { ctx }
    	};

    	if (/*layout*/ ctx[0] !== void 0) {
    		button10_props.layout = /*layout*/ ctx[0];
    	}

    	button10 = new Chat_button({ props: button10_props, $$inline: true });
    	binding_callbacks.push(() => bind(button10, 'layout', button10_layout_binding));

    	function button11_layout_binding(value) {
    		/*button11_layout_binding*/ ctx[12](value);
    	}

    	let button11_props = {
    		new_layout: "mute",
    		$$slots: { default: [create_default_slot_1$3] },
    		$$scope: { ctx }
    	};

    	if (/*layout*/ ctx[0] !== void 0) {
    		button11_props.layout = /*layout*/ ctx[0];
    	}

    	button11 = new Chat_button({ props: button11_props, $$inline: true });
    	binding_callbacks.push(() => bind(button11, 'layout', button11_layout_binding));

    	function button12_layout_binding(value) {
    		/*button12_layout_binding*/ ctx[13](value);
    	}

    	let button12_props = {
    		new_layout: "user",
    		$$slots: { default: [create_default_slot$5] },
    		$$scope: { ctx }
    	};

    	if (/*layout*/ ctx[0] !== void 0) {
    		button12_props.layout = /*layout*/ ctx[0];
    	}

    	button12 = new Chat_button({ props: button12_props, $$inline: true });
    	binding_callbacks.push(() => bind(button12, 'layout', button12_layout_binding));

    	const block = {
    		c: function create() {
    			div3 = element("div");
    			create_component(button0.$$.fragment);
    			t0 = space();
    			create_component(button1.$$.fragment);
    			t1 = space();
    			create_component(button2.$$.fragment);
    			t2 = space();
    			div2 = element("div");
    			p0 = element("p");
    			p0.textContent = "blocked users :";
    			t4 = space();
    			div1 = element("div");
    			div0 = element("div");
    			p1 = element("p");
    			p1.textContent = "/ you have blocked no one /";
    			t6 = space();
    			create_component(button3.$$.fragment);
    			t7 = space();
    			create_component(button4.$$.fragment);
    			t8 = space();
    			create_component(button5.$$.fragment);
    			t9 = space();
    			create_component(button6.$$.fragment);
    			t10 = space();
    			create_component(button7.$$.fragment);
    			t11 = space();
    			create_component(button8.$$.fragment);
    			t12 = space();
    			create_component(button9.$$.fragment);
    			t13 = space();
    			create_component(button10.$$.fragment);
    			t14 = space();
    			create_component(button11.$$.fragment);
    			t15 = space();
    			create_component(button12.$$.fragment);
    			add_location(p0, file$f, 28, 2, 529);
    			attr_dev(p1, "class", "__center");
    			add_location(p1, file$f, 31, 4, 624);
    			attr_dev(div0, "class", "__show_if_only_child");
    			add_location(div0, file$f, 30, 3, 585);
    			attr_dev(div1, "class", "blocked_users");
    			add_location(div1, file$f, 29, 2, 554);
    			attr_dev(div2, "class", "panel_settings __overflow_y_scroll __border_top __top");
    			add_location(div2, file$f, 27, 1, 459);
    			attr_dev(div3, "class", "grid_box svelte-1lfmc2m");
    			add_location(div3, file$f, 9, 0, 115);
    		},
    		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) {
    			insert_dev(target, div3, anchor);
    			mount_component(button0, div3, null);
    			append_dev(div3, t0);
    			mount_component(button1, div3, null);
    			append_dev(div3, t1);
    			mount_component(button2, div3, null);
    			append_dev(div3, t2);
    			append_dev(div3, div2);
    			append_dev(div2, p0);
    			append_dev(div2, t4);
    			append_dev(div2, div1);
    			append_dev(div1, div0);
    			append_dev(div0, p1);
    			append_dev(div2, t6);
    			mount_component(button3, div2, null);
    			append_dev(div2, t7);
    			mount_component(button4, div2, null);
    			append_dev(div2, t8);
    			mount_component(button5, div2, null);
    			append_dev(div2, t9);
    			mount_component(button6, div2, null);
    			append_dev(div2, t10);
    			mount_component(button7, div2, null);
    			append_dev(div2, t11);
    			mount_component(button8, div2, null);
    			append_dev(div2, t12);
    			mount_component(button9, div2, null);
    			append_dev(div2, t13);
    			mount_component(button10, div2, null);
    			append_dev(div2, t14);
    			mount_component(button11, div2, null);
    			append_dev(div2, t15);
    			mount_component(button12, div2, null);
    			current = true;
    		},
    		p: function update(ctx, [dirty]) {
    			const button0_changes = {};
    			if (dirty & /*back*/ 2) button0_changes.new_layout = /*back*/ ctx[1];
    			if (dirty & /*back*/ 2) button0_changes.my_title = "go back " + /*back*/ ctx[1];

    			if (dirty & /*$$scope*/ 16384) {
    				button0_changes.$$scope = { dirty, ctx };
    			}

    			if (!updating_layout && dirty & /*layout*/ 1) {
    				updating_layout = true;
    				button0_changes.layout = /*layout*/ ctx[0];
    				add_flush_callback(() => updating_layout = false);
    			}

    			button0.$set(button0_changes);
    			const button1_changes = {};

    			if (dirty & /*$$scope*/ 16384) {
    				button1_changes.$$scope = { dirty, ctx };
    			}

    			button1.$set(button1_changes);
    			const button2_changes = {};

    			if (dirty & /*$$scope*/ 16384) {
    				button2_changes.$$scope = { dirty, ctx };
    			}

    			if (!updating_layout_1 && dirty & /*layout*/ 1) {
    				updating_layout_1 = true;
    				button2_changes.layout = /*layout*/ ctx[0];
    				add_flush_callback(() => updating_layout_1 = false);
    			}

    			button2.$set(button2_changes);
    			const button3_changes = {};

    			if (dirty & /*$$scope*/ 16384) {
    				button3_changes.$$scope = { dirty, ctx };
    			}

    			if (!updating_layout_2 && dirty & /*layout*/ 1) {
    				updating_layout_2 = true;
    				button3_changes.layout = /*layout*/ ctx[0];
    				add_flush_callback(() => updating_layout_2 = false);
    			}

    			button3.$set(button3_changes);
    			const button4_changes = {};

    			if (dirty & /*$$scope*/ 16384) {
    				button4_changes.$$scope = { dirty, ctx };
    			}

    			if (!updating_layout_3 && dirty & /*layout*/ 1) {
    				updating_layout_3 = true;
    				button4_changes.layout = /*layout*/ ctx[0];
    				add_flush_callback(() => updating_layout_3 = false);
    			}

    			button4.$set(button4_changes);
    			const button5_changes = {};

    			if (dirty & /*$$scope*/ 16384) {
    				button5_changes.$$scope = { dirty, ctx };
    			}

    			if (!updating_layout_4 && dirty & /*layout*/ 1) {
    				updating_layout_4 = true;
    				button5_changes.layout = /*layout*/ ctx[0];
    				add_flush_callback(() => updating_layout_4 = false);
    			}

    			button5.$set(button5_changes);
    			const button6_changes = {};

    			if (dirty & /*$$scope*/ 16384) {
    				button6_changes.$$scope = { dirty, ctx };
    			}

    			if (!updating_layout_5 && dirty & /*layout*/ 1) {
    				updating_layout_5 = true;
    				button6_changes.layout = /*layout*/ ctx[0];
    				add_flush_callback(() => updating_layout_5 = false);
    			}

    			button6.$set(button6_changes);
    			const button7_changes = {};

    			if (dirty & /*$$scope*/ 16384) {
    				button7_changes.$$scope = { dirty, ctx };
    			}

    			if (!updating_layout_6 && dirty & /*layout*/ 1) {
    				updating_layout_6 = true;
    				button7_changes.layout = /*layout*/ ctx[0];
    				add_flush_callback(() => updating_layout_6 = false);
    			}

    			button7.$set(button7_changes);
    			const button8_changes = {};

    			if (dirty & /*$$scope*/ 16384) {
    				button8_changes.$$scope = { dirty, ctx };
    			}

    			if (!updating_layout_7 && dirty & /*layout*/ 1) {
    				updating_layout_7 = true;
    				button8_changes.layout = /*layout*/ ctx[0];
    				add_flush_callback(() => updating_layout_7 = false);
    			}

    			button8.$set(button8_changes);
    			const button9_changes = {};

    			if (dirty & /*$$scope*/ 16384) {
    				button9_changes.$$scope = { dirty, ctx };
    			}

    			if (!updating_layout_8 && dirty & /*layout*/ 1) {
    				updating_layout_8 = true;
    				button9_changes.layout = /*layout*/ ctx[0];
    				add_flush_callback(() => updating_layout_8 = false);
    			}

    			button9.$set(button9_changes);
    			const button10_changes = {};

    			if (dirty & /*$$scope*/ 16384) {
    				button10_changes.$$scope = { dirty, ctx };
    			}

    			if (!updating_layout_9 && dirty & /*layout*/ 1) {
    				updating_layout_9 = true;
    				button10_changes.layout = /*layout*/ ctx[0];
    				add_flush_callback(() => updating_layout_9 = false);
    			}

    			button10.$set(button10_changes);
    			const button11_changes = {};

    			if (dirty & /*$$scope*/ 16384) {
    				button11_changes.$$scope = { dirty, ctx };
    			}

    			if (!updating_layout_10 && dirty & /*layout*/ 1) {
    				updating_layout_10 = true;
    				button11_changes.layout = /*layout*/ ctx[0];
    				add_flush_callback(() => updating_layout_10 = false);
    			}

    			button11.$set(button11_changes);
    			const button12_changes = {};

    			if (dirty & /*$$scope*/ 16384) {
    				button12_changes.$$scope = { dirty, ctx };
    			}

    			if (!updating_layout_11 && dirty & /*layout*/ 1) {
    				updating_layout_11 = true;
    				button12_changes.layout = /*layout*/ ctx[0];
    				add_flush_callback(() => updating_layout_11 = false);
    			}

    			button12.$set(button12_changes);
    		},
    		i: function intro(local) {
    			if (current) return;
    			transition_in(button0.$$.fragment, local);
    			transition_in(button1.$$.fragment, local);
    			transition_in(button2.$$.fragment, local);
    			transition_in(button3.$$.fragment, local);
    			transition_in(button4.$$.fragment, local);
    			transition_in(button5.$$.fragment, local);
    			transition_in(button6.$$.fragment, local);
    			transition_in(button7.$$.fragment, local);
    			transition_in(button8.$$.fragment, local);
    			transition_in(button9.$$.fragment, local);
    			transition_in(button10.$$.fragment, local);
    			transition_in(button11.$$.fragment, local);
    			transition_in(button12.$$.fragment, local);
    			current = true;
    		},
    		o: function outro(local) {
    			transition_out(button0.$$.fragment, local);
    			transition_out(button1.$$.fragment, local);
    			transition_out(button2.$$.fragment, local);
    			transition_out(button3.$$.fragment, local);
    			transition_out(button4.$$.fragment, local);
    			transition_out(button5.$$.fragment, local);
    			transition_out(button6.$$.fragment, local);
    			transition_out(button7.$$.fragment, local);
    			transition_out(button8.$$.fragment, local);
    			transition_out(button9.$$.fragment, local);
    			transition_out(button10.$$.fragment, local);
    			transition_out(button11.$$.fragment, local);
    			transition_out(button12.$$.fragment, local);
    			current = false;
    		},
    		d: function destroy(detaching) {
    			if (detaching) detach_dev(div3);
    			destroy_component(button0);
    			destroy_component(button1);
    			destroy_component(button2);
    			destroy_component(button3);
    			destroy_component(button4);
    			destroy_component(button5);
    			destroy_component(button6);
    			destroy_component(button7);
    			destroy_component(button8);
    			destroy_component(button9);
    			destroy_component(button10);
    			destroy_component(button11);
    			destroy_component(button12);
    		}
    	};

    	dispatch_dev("SvelteRegisterBlock", {
    		block,
    		id: create_fragment$g.name,
    		type: "component",
    		source: "",
    		ctx
    	});

    	return block;
    }

    function instance$g($$self, $$props, $$invalidate) {
    	let { $$slots: slots = {}, $$scope } = $$props;
    	validate_slots('Layout_settings', slots, []);
    	let { layout = "" } = $$props;
    	let { back = "" } = $$props;
    	const writable_props = ['layout', 'back'];

    	Object.keys($$props).forEach(key => {
    		if (!~writable_props.indexOf(key) && key.slice(0, 2) !== '$$' && key !== 'slot') console.warn(`<Layout_settings> was created with unknown prop '${key}'`);
    	});

    	function button0_layout_binding(value) {
    		layout = value;
    		$$invalidate(0, layout);
    	}

    	function button2_layout_binding(value) {
    		layout = value;
    		$$invalidate(0, layout);
    	}

    	function button3_layout_binding(value) {
    		layout = value;
    		$$invalidate(0, layout);
    	}

    	function button4_layout_binding(value) {
    		layout = value;
    		$$invalidate(0, layout);
    	}

    	function button5_layout_binding(value) {
    		layout = value;
    		$$invalidate(0, layout);
    	}

    	function button6_layout_binding(value) {
    		layout = value;
    		$$invalidate(0, layout);
    	}

    	function button7_layout_binding(value) {
    		layout = value;
    		$$invalidate(0, layout);
    	}

    	function button8_layout_binding(value) {
    		layout = value;
    		$$invalidate(0, layout);
    	}

    	function button9_layout_binding(value) {
    		layout = value;
    		$$invalidate(0, layout);
    	}

    	function button10_layout_binding(value) {
    		layout = value;
    		$$invalidate(0, layout);
    	}

    	function button11_layout_binding(value) {
    		layout = value;
    		$$invalidate(0, layout);
    	}

    	function button12_layout_binding(value) {
    		layout = value;
    		$$invalidate(0, layout);
    	}

    	$$self.$$set = $$props => {
    		if ('layout' in $$props) $$invalidate(0, layout = $$props.layout);
    		if ('back' in $$props) $$invalidate(1, back = $$props.back);
    	};

    	$$self.$capture_state = () => ({ Button: Chat_button, layout, back });

    	$$self.$inject_state = $$props => {
    		if ('layout' in $$props) $$invalidate(0, layout = $$props.layout);
    		if ('back' in $$props) $$invalidate(1, back = $$props.back);
    	};

    	if ($$props && "$$inject" in $$props) {
    		$$self.$inject_state($$props.$$inject);
    	}

    	return [
    		layout,
    		back,
    		button0_layout_binding,
    		button2_layout_binding,
    		button3_layout_binding,
    		button4_layout_binding,
    		button5_layout_binding,
    		button6_layout_binding,
    		button7_layout_binding,
    		button8_layout_binding,
    		button9_layout_binding,
    		button10_layout_binding,
    		button11_layout_binding,
    		button12_layout_binding
    	];
    }

    class Layout_settings extends SvelteComponentDev {
    	constructor(options) {
    		super(options);
    		init(this, options, instance$g, create_fragment$g, safe_not_equal, { layout: 0, back: 1 });

    		dispatch_dev("SvelteRegisterComponent", {
    			component: this,
    			tagName: "Layout_settings",
    			options,
    			id: create_fragment$g.name
    		});
    	}

    	get layout() {
    		throw new Error("<Layout_settings>: Props cannot be read directly from the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
    	}

    	set layout(value) {
    		throw new Error("<Layout_settings>: Props cannot be set directly on the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
    	}

    	get back() {
    		throw new Error("<Layout_settings>: Props cannot be read directly from the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
    	}

    	set back(value) {
    		throw new Error("<Layout_settings>: Props cannot be set directly on the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
    	}
    }

    /* src/pieces/chat/Layout_room_set.svelte generated by Svelte v3.53.1 */
    const file$e = "src/pieces/chat/Layout_room_set.svelte";

    // (13:1) <Button bind:layout new_layout={back} my_class="back icon" my_title="go back {back}">
    function create_default_slot_7(ctx) {
    	let t;

    	const block = {
    		c: function create() {
    			t = text("back");
    		},
    		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_7.name,
    		type: "slot",
    		source: "(13:1) <Button bind:layout new_layout={back} my_class=\\\"back icon\\\" my_title=\\\"go back {back}\\\">",
    		ctx
    	});

    	return block;
    }

    // (18:1) <Button my_class="deactivate">
    function create_default_slot_6(ctx) {
    	let t;

    	const block = {
    		c: function create() {
    			t = text("<room_name>");
    		},
    		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_6.name,
    		type: "slot",
    		source: "(18:1) <Button my_class=\\\"deactivate\\\">",
    		ctx
    	});

    	return block;
    }

    // (23:1) <Button bind:layout new_layout="close" my_class="close icon">
    function create_default_slot_5(ctx) {
    	let t;

    	const block = {
    		c: function create() {
    			t = text("close");
    		},
    		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_5.name,
    		type: "slot",
    		source: "(23:1) <Button bind:layout new_layout=\\\"close\\\" my_class=\\\"close icon\\\">",
    		ctx
    	});

    	return block;
    }

    // (29:2) <Button bind:layout new_layout="create" my_class="create">
    function create_default_slot_4(ctx) {
    	let t;

    	const block = {
    		c: function create() {
    			t = text("leave");
    		},
    		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_4.name,
    		type: "slot",
    		source: "(29:2) <Button bind:layout new_layout=\\\"create\\\" my_class=\\\"create\\\">",
    		ctx
    	});

    	return block;
    }

    // (39:3) <Button bind:layout new_layout="user" my_class="list">
    function create_default_slot_3$1(ctx) {
    	let t;

    	const block = {
    		c: function create() {
    			t = text("user 1");
    		},
    		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$1.name,
    		type: "slot",
    		source: "(39:3) <Button bind:layout new_layout=\\\"user\\\" my_class=\\\"list\\\">",
    		ctx
    	});

    	return block;
    }

    // (42:3) <Button bind:layout new_layout="user" my_class="list blocked">
    function create_default_slot_2$2(ctx) {
    	let t;

    	const block = {
    		c: function create() {
    			t = text("user 2");
    		},
    		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$2.name,
    		type: "slot",
    		source: "(42:3) <Button bind:layout new_layout=\\\"user\\\" my_class=\\\"list blocked\\\">",
    		ctx
    	});

    	return block;
    }

    // (45:3) <Button bind:layout new_layout="user" my_class="list">
    function create_default_slot_1$2(ctx) {
    	let t;

    	const block = {
    		c: function create() {
    			t = text("user 3");
    		},
    		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_1$2.name,
    		type: "slot",
    		source: "(45:3) <Button bind:layout new_layout=\\\"user\\\" my_class=\\\"list\\\">",
    		ctx
    	});

    	return block;
    }

    // (48:3) <Button bind:layout new_layout="user" my_class="list">
    function create_default_slot$4(ctx) {
    	let t;

    	const block = {
    		c: function create() {
    			t = text("user 4");
    		},
    		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$4.name,
    		type: "slot",
    		source: "(48:3) <Button bind:layout new_layout=\\\"user\\\" my_class=\\\"list\\\">",
    		ctx
    	});

    	return block;
    }

    function create_fragment$f(ctx) {
    	let div3;
    	let button0;
    	let updating_layout;
    	let t0;
    	let button1;
    	let t1;
    	let button2;
    	let updating_layout_1;
    	let t2;
    	let div2;
    	let button3;
    	let updating_layout_2;
    	let t3;
    	let p0;
    	let t5;
    	let div1;
    	let div0;
    	let p1;
    	let t7;
    	let button4;
    	let updating_layout_3;
    	let t8;
    	let button5;
    	let updating_layout_4;
    	let t9;
    	let button6;
    	let updating_layout_5;
    	let t10;
    	let button7;
    	let updating_layout_6;
    	let current;

    	function button0_layout_binding(value) {
    		/*button0_layout_binding*/ ctx[2](value);
    	}

    	let button0_props = {
    		new_layout: /*back*/ ctx[1],
    		my_class: "back icon",
    		my_title: "go back " + /*back*/ ctx[1],
    		$$slots: { default: [create_default_slot_7] },
    		$$scope: { ctx }
    	};

    	if (/*layout*/ ctx[0] !== void 0) {
    		button0_props.layout = /*layout*/ ctx[0];
    	}

    	button0 = new Chat_button({ props: button0_props, $$inline: true });
    	binding_callbacks.push(() => bind(button0, 'layout', button0_layout_binding));

    	button1 = new Chat_button({
    			props: {
    				my_class: "deactivate",
    				$$slots: { default: [create_default_slot_6] },
    				$$scope: { ctx }
    			},
    			$$inline: true
    		});

    	function button2_layout_binding(value) {
    		/*button2_layout_binding*/ ctx[3](value);
    	}

    	let button2_props = {
    		new_layout: "close",
    		my_class: "close icon",
    		$$slots: { default: [create_default_slot_5] },
    		$$scope: { ctx }
    	};

    	if (/*layout*/ ctx[0] !== void 0) {
    		button2_props.layout = /*layout*/ ctx[0];
    	}

    	button2 = new Chat_button({ props: button2_props, $$inline: true });
    	binding_callbacks.push(() => bind(button2, 'layout', button2_layout_binding));

    	function button3_layout_binding(value) {
    		/*button3_layout_binding*/ ctx[4](value);
    	}

    	let button3_props = {
    		new_layout: "create",
    		my_class: "create",
    		$$slots: { default: [create_default_slot_4] },
    		$$scope: { ctx }
    	};

    	if (/*layout*/ ctx[0] !== void 0) {
    		button3_props.layout = /*layout*/ ctx[0];
    	}

    	button3 = new Chat_button({ props: button3_props, $$inline: true });
    	binding_callbacks.push(() => bind(button3, 'layout', button3_layout_binding));

    	function button4_layout_binding(value) {
    		/*button4_layout_binding*/ ctx[5](value);
    	}

    	let button4_props = {
    		new_layout: "user",
    		my_class: "list",
    		$$slots: { default: [create_default_slot_3$1] },
    		$$scope: { ctx }
    	};

    	if (/*layout*/ ctx[0] !== void 0) {
    		button4_props.layout = /*layout*/ ctx[0];
    	}

    	button4 = new Chat_button({ props: button4_props, $$inline: true });
    	binding_callbacks.push(() => bind(button4, 'layout', button4_layout_binding));

    	function button5_layout_binding(value) {
    		/*button5_layout_binding*/ ctx[6](value);
    	}

    	let button5_props = {
    		new_layout: "user",
    		my_class: "list blocked",
    		$$slots: { default: [create_default_slot_2$2] },
    		$$scope: { ctx }
    	};

    	if (/*layout*/ ctx[0] !== void 0) {
    		button5_props.layout = /*layout*/ ctx[0];
    	}

    	button5 = new Chat_button({ props: button5_props, $$inline: true });
    	binding_callbacks.push(() => bind(button5, 'layout', button5_layout_binding));

    	function button6_layout_binding(value) {
    		/*button6_layout_binding*/ ctx[7](value);
    	}

    	let button6_props = {
    		new_layout: "user",
    		my_class: "list",
    		$$slots: { default: [create_default_slot_1$2] },
    		$$scope: { ctx }
    	};

    	if (/*layout*/ ctx[0] !== void 0) {
    		button6_props.layout = /*layout*/ ctx[0];
    	}

    	button6 = new Chat_button({ props: button6_props, $$inline: true });
    	binding_callbacks.push(() => bind(button6, 'layout', button6_layout_binding));

    	function button7_layout_binding(value) {
    		/*button7_layout_binding*/ ctx[8](value);
    	}

    	let button7_props = {
    		new_layout: "user",
    		my_class: "list",
    		$$slots: { default: [create_default_slot$4] },
    		$$scope: { ctx }
    	};

    	if (/*layout*/ ctx[0] !== void 0) {
    		button7_props.layout = /*layout*/ ctx[0];
    	}

    	button7 = new Chat_button({ props: button7_props, $$inline: true });
    	binding_callbacks.push(() => bind(button7, 'layout', button7_layout_binding));

    	const block = {
    		c: function create() {
    			div3 = element("div");
    			create_component(button0.$$.fragment);
    			t0 = space();
    			create_component(button1.$$.fragment);
    			t1 = space();
    			create_component(button2.$$.fragment);
    			t2 = space();
    			div2 = element("div");
    			create_component(button3.$$.fragment);
    			t3 = space();
    			p0 = element("p");
    			p0.textContent = "room users :";
    			t5 = space();
    			div1 = element("div");
    			div0 = element("div");
    			p1 = element("p");
    			p1.textContent = "/ there are no public rooms yet /";
    			t7 = space();
    			create_component(button4.$$.fragment);
    			t8 = space();
    			create_component(button5.$$.fragment);
    			t9 = space();
    			create_component(button6.$$.fragment);
    			t10 = space();
    			create_component(button7.$$.fragment);
    			add_location(p0, file$e, 31, 2, 621);
    			attr_dev(p1, "class", "__center");
    			add_location(p1, file$e, 34, 4, 710);
    			attr_dev(div0, "class", "__show_if_only_child");
    			add_location(div0, file$e, 33, 3, 671);
    			attr_dev(div1, "class", "room_users");
    			add_location(div1, file$e, 32, 2, 643);
    			attr_dev(div2, "class", "panel_room_set __overflow_y_scroll __border_top __top");
    			add_location(div2, file$e, 27, 1, 469);
    			attr_dev(div3, "class", "grid_box svelte-1sv7l8q");
    			add_location(div3, file$e, 9, 0, 115);
    		},
    		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) {
    			insert_dev(target, div3, anchor);
    			mount_component(button0, div3, null);
    			append_dev(div3, t0);
    			mount_component(button1, div3, null);
    			append_dev(div3, t1);
    			mount_component(button2, div3, null);
    			append_dev(div3, t2);
    			append_dev(div3, div2);
    			mount_component(button3, div2, null);
    			append_dev(div2, t3);
    			append_dev(div2, p0);
    			append_dev(div2, t5);
    			append_dev(div2, div1);
    			append_dev(div1, div0);
    			append_dev(div0, p1);
    			append_dev(div1, t7);
    			mount_component(button4, div1, null);
    			append_dev(div1, t8);
    			mount_component(button5, div1, null);
    			append_dev(div1, t9);
    			mount_component(button6, div1, null);
    			append_dev(div1, t10);
    			mount_component(button7, div1, null);
    			current = true;
    		},
    		p: function update(ctx, [dirty]) {
    			const button0_changes = {};
    			if (dirty & /*back*/ 2) button0_changes.new_layout = /*back*/ ctx[1];
    			if (dirty & /*back*/ 2) button0_changes.my_title = "go back " + /*back*/ ctx[1];

    			if (dirty & /*$$scope*/ 512) {
    				button0_changes.$$scope = { dirty, ctx };
    			}

    			if (!updating_layout && dirty & /*layout*/ 1) {
    				updating_layout = true;
    				button0_changes.layout = /*layout*/ ctx[0];
    				add_flush_callback(() => updating_layout = false);
    			}

    			button0.$set(button0_changes);
    			const button1_changes = {};

    			if (dirty & /*$$scope*/ 512) {
    				button1_changes.$$scope = { dirty, ctx };
    			}

    			button1.$set(button1_changes);
    			const button2_changes = {};

    			if (dirty & /*$$scope*/ 512) {
    				button2_changes.$$scope = { dirty, ctx };
    			}

    			if (!updating_layout_1 && dirty & /*layout*/ 1) {
    				updating_layout_1 = true;
    				button2_changes.layout = /*layout*/ ctx[0];
    				add_flush_callback(() => updating_layout_1 = false);
    			}

    			button2.$set(button2_changes);
    			const button3_changes = {};

    			if (dirty & /*$$scope*/ 512) {
    				button3_changes.$$scope = { dirty, ctx };
    			}

    			if (!updating_layout_2 && dirty & /*layout*/ 1) {
    				updating_layout_2 = true;
    				button3_changes.layout = /*layout*/ ctx[0];
    				add_flush_callback(() => updating_layout_2 = false);
    			}

    			button3.$set(button3_changes);
    			const button4_changes = {};

    			if (dirty & /*$$scope*/ 512) {
    				button4_changes.$$scope = { dirty, ctx };
    			}

    			if (!updating_layout_3 && dirty & /*layout*/ 1) {
    				updating_layout_3 = true;
    				button4_changes.layout = /*layout*/ ctx[0];
    				add_flush_callback(() => updating_layout_3 = false);
    			}

    			button4.$set(button4_changes);
    			const button5_changes = {};

    			if (dirty & /*$$scope*/ 512) {
    				button5_changes.$$scope = { dirty, ctx };
    			}

    			if (!updating_layout_4 && dirty & /*layout*/ 1) {
    				updating_layout_4 = true;
    				button5_changes.layout = /*layout*/ ctx[0];
    				add_flush_callback(() => updating_layout_4 = false);
    			}

    			button5.$set(button5_changes);
    			const button6_changes = {};

    			if (dirty & /*$$scope*/ 512) {
    				button6_changes.$$scope = { dirty, ctx };
    			}

    			if (!updating_layout_5 && dirty & /*layout*/ 1) {
    				updating_layout_5 = true;
    				button6_changes.layout = /*layout*/ ctx[0];
    				add_flush_callback(() => updating_layout_5 = false);
    			}

    			button6.$set(button6_changes);
    			const button7_changes = {};

    			if (dirty & /*$$scope*/ 512) {
    				button7_changes.$$scope = { dirty, ctx };
    			}

    			if (!updating_layout_6 && dirty & /*layout*/ 1) {
    				updating_layout_6 = true;
    				button7_changes.layout = /*layout*/ ctx[0];
    				add_flush_callback(() => updating_layout_6 = false);
    			}

    			button7.$set(button7_changes);
    		},
    		i: function intro(local) {
    			if (current) return;
    			transition_in(button0.$$.fragment, local);
    			transition_in(button1.$$.fragment, local);
    			transition_in(button2.$$.fragment, local);
    			transition_in(button3.$$.fragment, local);
    			transition_in(button4.$$.fragment, local);
    			transition_in(button5.$$.fragment, local);
    			transition_in(button6.$$.fragment, local);
    			transition_in(button7.$$.fragment, local);
    			current = true;
    		},
    		o: function outro(local) {
    			transition_out(button0.$$.fragment, local);
    			transition_out(button1.$$.fragment, local);
    			transition_out(button2.$$.fragment, local);
    			transition_out(button3.$$.fragment, local);
    			transition_out(button4.$$.fragment, local);
    			transition_out(button5.$$.fragment, local);
    			transition_out(button6.$$.fragment, local);
    			transition_out(button7.$$.fragment, local);
    			current = false;
    		},
    		d: function destroy(detaching) {
    			if (detaching) detach_dev(div3);
    			destroy_component(button0);
    			destroy_component(button1);
    			destroy_component(button2);
    			destroy_component(button3);
    			destroy_component(button4);
    			destroy_component(button5);
    			destroy_component(button6);
    			destroy_component(button7);
    		}
    	};

    	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('Layout_room_set', slots, []);
    	let { layout = "" } = $$props;
    	let { back = "" } = $$props;
    	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_set> was created with unknown prop '${key}'`);
    	});

    	function button0_layout_binding(value) {
    		layout = value;
    		$$invalidate(0, layout);
    	}

    	function button2_layout_binding(value) {
    		layout = value;
    		$$invalidate(0, layout);
    	}

    	function button3_layout_binding(value) {
    		layout = value;
    		$$invalidate(0, layout);
    	}

    	function button4_layout_binding(value) {
    		layout = value;
    		$$invalidate(0, layout);
    	}

    	function button5_layout_binding(value) {
    		layout = value;
    		$$invalidate(0, layout);
    	}

    	function button6_layout_binding(value) {
    		layout = value;
    		$$invalidate(0, layout);
    	}

    	function button7_layout_binding(value) {
    		layout = value;
    		$$invalidate(0, layout);
    	}

    	$$self.$$set = $$props => {
    		if ('layout' in $$props) $$invalidate(0, layout = $$props.layout);
    		if ('back' in $$props) $$invalidate(1, back = $$props.back);
    	};

    	$$self.$capture_state = () => ({ Button: Chat_button, layout, back });

    	$$self.$inject_state = $$props => {
    		if ('layout' in $$props) $$invalidate(0, layout = $$props.layout);
    		if ('back' in $$props) $$invalidate(1, back = $$props.back);
    	};

    	if ($$props && "$$inject" in $$props) {
    		$$self.$inject_state($$props.$$inject);
    	}

    	return [
    		layout,
    		back,
    		button0_layout_binding,
    		button2_layout_binding,
    		button3_layout_binding,
    		button4_layout_binding,
    		button5_layout_binding,
    		button6_layout_binding,
    		button7_layout_binding
    	];
    }

    class Layout_room_set extends SvelteComponentDev {
    	constructor(options) {
    		super(options);
    		init(this, options, instance$f, create_fragment$f, safe_not_equal, { layout: 0, back: 1 });

    		dispatch_dev("SvelteRegisterComponent", {
    			component: this,
    			tagName: "Layout_room_set",
    			options,
    			id: create_fragment$f.name
    		});
    	}

    	get layout() {
    		throw new Error("<Layout_room_set>: Props cannot be read directly from the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
    	}

    	set layout(value) {
    		throw new Error("<Layout_room_set>: Props cannot be set directly on the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
    	}

    	get back() {
    		throw new Error("<Layout_room_set>: Props cannot be read directly from the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
    	}

    	set back(value) {
    		throw new Error("<Layout_room_set>: Props cannot be set directly on the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
    	}
    }

    /* src/pieces/chat/Layout_protected.svelte generated by Svelte v3.53.1 */
    const file$d = "src/pieces/chat/Layout_protected.svelte";

    // (13:1) <Button bind:layout new_layout={back} my_class="back icon" my_title="go back {back}">
    function create_default_slot_2$1(ctx) {
    	let t;

    	const block = {
    		c: function create() {
    			t = text("back");
    		},
    		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$1.name,
    		type: "slot",
    		source: "(13:1) <Button bind:layout new_layout={back} my_class=\\\"back icon\\\" my_title=\\\"go back {back}\\\">",
    		ctx
    	});

    	return block;
    }

    // (18:1) <Button my_class="deactivate">
    function create_default_slot_1$1(ctx) {
    	let t;

    	const block = {
    		c: function create() {
    			t = text("<room_name>");
    		},
    		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_1$1.name,
    		type: "slot",
    		source: "(18:1) <Button my_class=\\\"deactivate\\\">",
    		ctx
    	});

    	return block;
    }

    // (23:1) <Button bind:layout new_layout="close" my_class="close icon">
    function create_default_slot$3(ctx) {
    	let t;

    	const block = {
    		c: function create() {
    			t = text("close");
    		},
    		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: "(23:1) <Button bind:layout new_layout=\\\"close\\\" my_class=\\\"close icon\\\">",
    		ctx
    	});

    	return block;
    }

    function create_fragment$e(ctx) {
    	let div1;
    	let button0;
    	let updating_layout;
    	let t0;
    	let button1;
    	let t1;
    	let button2;
    	let updating_layout_1;
    	let t2;
    	let div0;
    	let p0;
    	let t4;
    	let form;
    	let label;
    	let p1;
    	let t6;
    	let input0;
    	let t7;
    	let input1;
    	let current;

    	function button0_layout_binding(value) {
    		/*button0_layout_binding*/ ctx[2](value);
    	}

    	let button0_props = {
    		new_layout: /*back*/ ctx[1],
    		my_class: "back icon",
    		my_title: "go back " + /*back*/ ctx[1],
    		$$slots: { default: [create_default_slot_2$1] },
    		$$scope: { ctx }
    	};

    	if (/*layout*/ ctx[0] !== void 0) {
    		button0_props.layout = /*layout*/ ctx[0];
    	}

    	button0 = new Chat_button({ props: button0_props, $$inline: true });
    	binding_callbacks.push(() => bind(button0, 'layout', button0_layout_binding));

    	button1 = new Chat_button({
    			props: {
    				my_class: "deactivate",
    				$$slots: { default: [create_default_slot_1$1] },
    				$$scope: { ctx }
    			},
    			$$inline: true
    		});

    	function button2_layout_binding(value) {
    		/*button2_layout_binding*/ ctx[3](value);
    	}

    	let button2_props = {
    		new_layout: "close",
    		my_class: "close icon",
    		$$slots: { default: [create_default_slot$3] },
    		$$scope: { ctx }
    	};

    	if (/*layout*/ ctx[0] !== void 0) {
    		button2_props.layout = /*layout*/ ctx[0];
    	}

    	button2 = new Chat_button({ props: button2_props, $$inline: true });
    	binding_callbacks.push(() => bind(button2, 'layout', button2_layout_binding));

    	const block = {
    		c: function create() {
    			div1 = element("div");
    			create_component(button0.$$.fragment);
    			t0 = space();
    			create_component(button1.$$.fragment);
    			t1 = space();
    			create_component(button2.$$.fragment);
    			t2 = space();
    			div0 = element("div");
    			p0 = element("p");
    			p0.textContent = "this room is protected";
    			t4 = space();
    			form = element("form");
    			label = element("label");
    			p1 = element("p");
    			p1.textContent = "password :";
    			t6 = space();
    			input0 = element("input");
    			t7 = space();
    			input1 = element("input");
    			attr_dev(p0, "class", "title __center svelte-s19rid");
    			add_location(p0, file$d, 28, 2, 541);
    			add_location(p1, file$d, 30, 26, 629);
    			attr_dev(label, "for", "chat_pswd");
    			add_location(label, file$d, 30, 3, 606);
    			attr_dev(input0, "id", "chat_pswd");
    			attr_dev(input0, "type", "password");
    			input0.required = true;
    			add_location(input0, file$d, 31, 3, 658);
    			attr_dev(input1, "type", "submit");
    			input1.value = "⮡";
    			add_location(input1, file$d, 32, 3, 710);
    			add_location(form, file$d, 29, 2, 596);
    			attr_dev(div0, "class", "panel_protected __overflow_y_scroll __border_top __top");
    			add_location(div0, file$d, 27, 1, 470);
    			attr_dev(div1, "class", "grid_box svelte-s19rid");
    			add_location(div1, file$d, 9, 0, 115);
    		},
    		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) {
    			insert_dev(target, div1, anchor);
    			mount_component(button0, div1, null);
    			append_dev(div1, t0);
    			mount_component(button1, div1, null);
    			append_dev(div1, t1);
    			mount_component(button2, div1, null);
    			append_dev(div1, t2);
    			append_dev(div1, div0);
    			append_dev(div0, p0);
    			append_dev(div0, t4);
    			append_dev(div0, form);
    			append_dev(form, label);
    			append_dev(label, p1);
    			append_dev(form, t6);
    			append_dev(form, input0);
    			append_dev(form, t7);
    			append_dev(form, input1);
    			current = true;
    		},
    		p: function update(ctx, [dirty]) {
    			const button0_changes = {};
    			if (dirty & /*back*/ 2) button0_changes.new_layout = /*back*/ ctx[1];
    			if (dirty & /*back*/ 2) button0_changes.my_title = "go back " + /*back*/ ctx[1];

    			if (dirty & /*$$scope*/ 16) {
    				button0_changes.$$scope = { dirty, ctx };
    			}

    			if (!updating_layout && dirty & /*layout*/ 1) {
    				updating_layout = true;
    				button0_changes.layout = /*layout*/ ctx[0];
    				add_flush_callback(() => updating_layout = false);
    			}

    			button0.$set(button0_changes);
    			const button1_changes = {};

    			if (dirty & /*$$scope*/ 16) {
    				button1_changes.$$scope = { dirty, ctx };
    			}

    			button1.$set(button1_changes);
    			const button2_changes = {};

    			if (dirty & /*$$scope*/ 16) {
    				button2_changes.$$scope = { dirty, ctx };
    			}

    			if (!updating_layout_1 && dirty & /*layout*/ 1) {
    				updating_layout_1 = true;
    				button2_changes.layout = /*layout*/ ctx[0];
    				add_flush_callback(() => updating_layout_1 = false);
    			}

    			button2.$set(button2_changes);
    		},
    		i: function intro(local) {
    			if (current) return;
    			transition_in(button0.$$.fragment, local);
    			transition_in(button1.$$.fragment, local);
    			transition_in(button2.$$.fragment, local);
    			current = true;
    		},
    		o: function outro(local) {
    			transition_out(button0.$$.fragment, local);
    			transition_out(button1.$$.fragment, local);
    			transition_out(button2.$$.fragment, local);
    			current = false;
    		},
    		d: function destroy(detaching) {
    			if (detaching) detach_dev(div1);
    			destroy_component(button0);
    			destroy_component(button1);
    			destroy_component(button2);
    		}
    	};

    	dispatch_dev("SvelteRegisterBlock", {
    		block,
    		id: create_fragment$e.name,
    		type: "component",
    		source: "",
    		ctx
    	});

    	return block;
    }

    function instance$e($$self, $$props, $$invalidate) {
    	let { $$slots: slots = {}, $$scope } = $$props;
    	validate_slots('Layout_protected', slots, []);
    	let { layout = "" } = $$props;
    	let { back = "" } = $$props;
    	const writable_props = ['layout', 'back'];

    	Object.keys($$props).forEach(key => {
    		if (!~writable_props.indexOf(key) && key.slice(0, 2) !== '$$' && key !== 'slot') console.warn(`<Layout_protected> was created with unknown prop '${key}'`);
    	});

    	function button0_layout_binding(value) {
    		layout = value;
    		$$invalidate(0, layout);
    	}

    	function button2_layout_binding(value) {
    		layout = value;
    		$$invalidate(0, layout);
    	}

    	$$self.$$set = $$props => {
    		if ('layout' in $$props) $$invalidate(0, layout = $$props.layout);
    		if ('back' in $$props) $$invalidate(1, back = $$props.back);
    	};

    	$$self.$capture_state = () => ({ Button: Chat_button, layout, back });

    	$$self.$inject_state = $$props => {
    		if ('layout' in $$props) $$invalidate(0, layout = $$props.layout);
    		if ('back' in $$props) $$invalidate(1, back = $$props.back);
    	};

    	if ($$props && "$$inject" in $$props) {
    		$$self.$inject_state($$props.$$inject);
    	}

    	return [layout, back, button0_layout_binding, button2_layout_binding];
    }

    class Layout_protected extends SvelteComponentDev {
    	constructor(options) {
    		super(options);
    		init(this, options, instance$e, create_fragment$e, safe_not_equal, { layout: 0, back: 1 });

    		dispatch_dev("SvelteRegisterComponent", {
    			component: this,
    			tagName: "Layout_protected",
    			options,
    			id: create_fragment$e.name
    		});
    	}

    	get layout() {
    		throw new Error("<Layout_protected>: Props cannot be read directly from the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
    	}

    	set layout(value) {
    		throw new Error("<Layout_protected>: Props cannot be set directly on the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
    	}

    	get back() {
    		throw new Error("<Layout_protected>: Props cannot be read directly from the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
    	}

    	set back(value) {
    		throw new Error("<Layout_protected>: Props cannot be set directly on the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
    	}
    }

    /* src/pieces/chat/Chat.svelte generated by Svelte v3.53.1 */

    const { console: console_1$5 } = globals;
    const file$c = "src/pieces/chat/Chat.svelte";

    // (58:1) {:else}
    function create_else_block$4(ctx) {
    	let div;
    	let button;
    	let updating_layout;
    	let current;

    	function button_layout_binding(value) {
    		/*button_layout_binding*/ ctx[9](value);
    	}

    	let button_props = {
    		new_layout: /*layouts*/ ctx[2][0],
    		my_class: "chat",
    		$$slots: { default: [create_default_slot$2] },
    		$$scope: { ctx }
    	};

    	if (/*layout*/ ctx[1] !== void 0) {
    		button_props.layout = /*layout*/ ctx[1];
    	}

    	button = new Chat_button({ props: button_props, $$inline: true });
    	binding_callbacks.push(() => bind(button, 'layout', button_layout_binding));

    	const block = {
    		c: function create() {
    			div = element("div");
    			create_component(button.$$.fragment);
    			attr_dev(div, "class", "grid_box svelte-1oi61jk");
    			add_location(div, file$c, 58, 2, 1505);
    		},
    		m: function mount(target, anchor) {
    			insert_dev(target, div, anchor);
    			mount_component(button, div, null);
    			current = true;
    		},
    		p: function update(ctx, dirty) {
    			const button_changes = {};
    			if (dirty & /*layouts*/ 4) button_changes.new_layout = /*layouts*/ ctx[2][0];

    			if (dirty & /*$$scope*/ 8192) {
    				button_changes.$$scope = { dirty, ctx };
    			}

    			if (!updating_layout && dirty & /*layout*/ 2) {
    				updating_layout = true;
    				button_changes.layout = /*layout*/ ctx[1];
    				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) {
    			if (detaching) detach_dev(div);
    			destroy_component(button);
    		}
    	};

    	dispatch_dev("SvelteRegisterBlock", {
    		block,
    		id: create_else_block$4.name,
    		type: "else",
    		source: "(58:1) {:else}",
    		ctx
    	});

    	return block;
    }

    // (55:34) 
    function create_if_block_5(ctx) {
    	let protectedlayout;
    	let updating_layout;
    	let current;

    	function protectedlayout_layout_binding(value) {
    		/*protectedlayout_layout_binding*/ ctx[8](value);
    	}

    	let protectedlayout_props = { back: /*layouts*/ ctx[2][1] };

    	if (/*layout*/ ctx[1] !== void 0) {
    		protectedlayout_props.layout = /*layout*/ ctx[1];
    	}

    	protectedlayout = new Layout_protected({
    			props: protectedlayout_props,
    			$$inline: true
    		});

    	binding_callbacks.push(() => bind(protectedlayout, 'layout', protectedlayout_layout_binding));

    	const block = {
    		c: function create() {
    			create_component(protectedlayout.$$.fragment);
    		},
    		m: function mount(target, anchor) {
    			mount_component(protectedlayout, target, anchor);
    			current = true;
    		},
    		p: function update(ctx, dirty) {
    			const protectedlayout_changes = {};
    			if (dirty & /*layouts*/ 4) protectedlayout_changes.back = /*layouts*/ ctx[2][1];

    			if (!updating_layout && dirty & /*layout*/ 2) {
    				updating_layout = true;
    				protectedlayout_changes.layout = /*layout*/ ctx[1];
    				add_flush_callback(() => updating_layout = false);
    			}

    			protectedlayout.$set(protectedlayout_changes);
    		},
    		i: function intro(local) {
    			if (current) return;
    			transition_in(protectedlayout.$$.fragment, local);
    			current = true;
    		},
    		o: function outro(local) {
    			transition_out(protectedlayout.$$.fragment, local);
    			current = false;
    		},
    		d: function destroy(detaching) {
    			destroy_component(protectedlayout, detaching);
    		}
    	};

    	dispatch_dev("SvelteRegisterBlock", {
    		block,
    		id: create_if_block_5.name,
    		type: "if",
    		source: "(55:34) ",
    		ctx
    	});

    	return block;
    }

    // (52:33) 
    function create_if_block_4(ctx) {
    	let roomsetlayout;
    	let updating_layout;
    	let current;

    	function roomsetlayout_layout_binding(value) {
    		/*roomsetlayout_layout_binding*/ ctx[7](value);
    	}

    	let roomsetlayout_props = { back: /*layouts*/ ctx[2][1] };

    	if (/*layout*/ ctx[1] !== void 0) {
    		roomsetlayout_props.layout = /*layout*/ ctx[1];
    	}

    	roomsetlayout = new Layout_room_set({
    			props: roomsetlayout_props,
    			$$inline: true
    		});

    	binding_callbacks.push(() => bind(roomsetlayout, 'layout', roomsetlayout_layout_binding));

    	const block = {
    		c: function create() {
    			create_component(roomsetlayout.$$.fragment);
    		},
    		m: function mount(target, anchor) {
    			mount_component(roomsetlayout, target, anchor);
    			current = true;
    		},
    		p: function update(ctx, dirty) {
    			const roomsetlayout_changes = {};
    			if (dirty & /*layouts*/ 4) roomsetlayout_changes.back = /*layouts*/ ctx[2][1];

    			if (!updating_layout && dirty & /*layout*/ 2) {
    				updating_layout = true;
    				roomsetlayout_changes.layout = /*layout*/ ctx[1];
    				add_flush_callback(() => updating_layout = false);
    			}

    			roomsetlayout.$set(roomsetlayout_changes);
    		},
    		i: function intro(local) {
    			if (current) return;
    			transition_in(roomsetlayout.$$.fragment, local);
    			current = true;
    		},
    		o: function outro(local) {
    			transition_out(roomsetlayout.$$.fragment, local);
    			current = false;
    		},
    		d: function destroy(detaching) {
    			destroy_component(roomsetlayout, detaching);
    		}
    	};

    	dispatch_dev("SvelteRegisterBlock", {
    		block,
    		id: create_if_block_4.name,
    		type: "if",
    		source: "(52:33) ",
    		ctx
    	});

    	return block;
    }

    // (49:33) 
    function create_if_block_3(ctx) {
    	let settingslayout;
    	let updating_layout;
    	let current;

    	function settingslayout_layout_binding(value) {
    		/*settingslayout_layout_binding*/ ctx[6](value);
    	}

    	let settingslayout_props = { back: /*layouts*/ ctx[2][1] };

    	if (/*layout*/ ctx[1] !== void 0) {
    		settingslayout_props.layout = /*layout*/ ctx[1];
    	}

    	settingslayout = new Layout_settings({
    			props: settingslayout_props,
    			$$inline: true
    		});

    	binding_callbacks.push(() => bind(settingslayout, 'layout', settingslayout_layout_binding));

    	const block = {
    		c: function create() {
    			create_component(settingslayout.$$.fragment);
    		},
    		m: function mount(target, anchor) {
    			mount_component(settingslayout, target, anchor);
    			current = true;
    		},
    		p: function update(ctx, dirty) {
    			const settingslayout_changes = {};
    			if (dirty & /*layouts*/ 4) settingslayout_changes.back = /*layouts*/ ctx[2][1];

    			if (!updating_layout && dirty & /*layout*/ 2) {
    				updating_layout = true;
    				settingslayout_changes.layout = /*layout*/ ctx[1];
    				add_flush_callback(() => updating_layout = false);
    			}

    			settingslayout.$set(settingslayout_changes);
    		},
    		i: function intro(local) {
    			if (current) return;
    			transition_in(settingslayout.$$.fragment, local);
    			current = true;
    		},
    		o: function outro(local) {
    			transition_out(settingslayout.$$.fragment, local);
    			current = false;
    		},
    		d: function destroy(detaching) {
    			destroy_component(settingslayout, detaching);
    		}
    	};

    	dispatch_dev("SvelteRegisterBlock", {
    		block,
    		id: create_if_block_3.name,
    		type: "if",
    		source: "(49:33) ",
    		ctx
    	});

    	return block;
    }

    // (46:28) 
    function create_if_block_2(ctx) {
    	let newlayout;
    	let updating_layout;
    	let current;

    	function newlayout_layout_binding(value) {
    		/*newlayout_layout_binding*/ ctx[5](value);
    	}

    	let newlayout_props = { back: /*layouts*/ ctx[2][1] };

    	if (/*layout*/ ctx[1] !== void 0) {
    		newlayout_props.layout = /*layout*/ ctx[1];
    	}

    	newlayout = new Layout_new({ props: newlayout_props, $$inline: true });
    	binding_callbacks.push(() => bind(newlayout, 'layout', newlayout_layout_binding));

    	const block = {
    		c: function create() {
    			create_component(newlayout.$$.fragment);
    		},
    		m: function mount(target, anchor) {
    			mount_component(newlayout, target, anchor);
    			current = true;
    		},
    		p: function update(ctx, dirty) {
    			const newlayout_changes = {};
    			if (dirty & /*layouts*/ 4) newlayout_changes.back = /*layouts*/ ctx[2][1];

    			if (!updating_layout && dirty & /*layout*/ 2) {
    				updating_layout = true;
    				newlayout_changes.layout = /*layout*/ ctx[1];
    				add_flush_callback(() => updating_layout = false);
    			}

    			newlayout.$set(newlayout_changes);
    		},
    		i: function intro(local) {
    			if (current) return;
    			transition_in(newlayout.$$.fragment, local);
    			current = true;
    		},
    		o: function outro(local) {
    			transition_out(newlayout.$$.fragment, local);
    			current = false;
    		},
    		d: function destroy(detaching) {
    			destroy_component(newlayout, detaching);
    		}
    	};

    	dispatch_dev("SvelteRegisterBlock", {
    		block,
    		id: create_if_block_2.name,
    		type: "if",
    		source: "(46:28) ",
    		ctx
    	});

    	return block;
    }

    // (43:29) 
    function create_if_block_1$1(ctx) {
    	let roomlayout;
    	let updating_layout;
    	let current;

    	function roomlayout_layout_binding(value) {
    		/*roomlayout_layout_binding*/ ctx[4](value);
    	}

    	let roomlayout_props = { back: /*layouts*/ ctx[2][1] };

    	if (/*layout*/ ctx[1] !== void 0) {
    		roomlayout_props.layout = /*layout*/ ctx[1];
    	}

    	roomlayout = new Layout_room({ props: roomlayout_props, $$inline: true });
    	binding_callbacks.push(() => bind(roomlayout, 'layout', roomlayout_layout_binding));

    	const block = {
    		c: function create() {
    			create_component(roomlayout.$$.fragment);
    		},
    		m: function mount(target, anchor) {
    			mount_component(roomlayout, target, anchor);
    			current = true;
    		},
    		p: function update(ctx, dirty) {
    			const roomlayout_changes = {};
    			if (dirty & /*layouts*/ 4) roomlayout_changes.back = /*layouts*/ ctx[2][1];

    			if (!updating_layout && dirty & /*layout*/ 2) {
    				updating_layout = true;
    				roomlayout_changes.layout = /*layout*/ ctx[1];
    				add_flush_callback(() => updating_layout = false);
    			}

    			roomlayout.$set(roomlayout_changes);
    		},
    		i: function intro(local) {
    			if (current) return;
    			transition_in(roomlayout.$$.fragment, local);
    			current = true;
    		},
    		o: function outro(local) {
    			transition_out(roomlayout.$$.fragment, local);
    			current = false;
    		},
    		d: function destroy(detaching) {
    			destroy_component(roomlayout, detaching);
    		}
    	};

    	dispatch_dev("SvelteRegisterBlock", {
    		block,
    		id: create_if_block_1$1.name,
    		type: "if",
    		source: "(43:29) ",
    		ctx
    	});

    	return block;
    }

    // (40:1) {#if layout === "home"}
    function create_if_block$6(ctx) {
    	let homelayout;
    	let updating_layout;
    	let current;

    	function homelayout_layout_binding(value) {
    		/*homelayout_layout_binding*/ ctx[3](value);
    	}

    	let homelayout_props = {};

    	if (/*layout*/ ctx[1] !== void 0) {
    		homelayout_props.layout = /*layout*/ ctx[1];
    	}

    	homelayout = new Layout_home({ props: homelayout_props, $$inline: true });
    	binding_callbacks.push(() => bind(homelayout, 'layout', homelayout_layout_binding));

    	const block = {
    		c: function create() {
    			create_component(homelayout.$$.fragment);
    		},
    		m: function mount(target, anchor) {
    			mount_component(homelayout, target, anchor);
    			current = true;
    		},
    		p: function update(ctx, dirty) {
    			const homelayout_changes = {};

    			if (!updating_layout && dirty & /*layout*/ 2) {
    				updating_layout = true;
    				homelayout_changes.layout = /*layout*/ ctx[1];
    				add_flush_callback(() => updating_layout = false);
    			}

    			homelayout.$set(homelayout_changes);
    		},
    		i: function intro(local) {
    			if (current) return;
    			transition_in(homelayout.$$.fragment, local);
    			current = true;
    		},
    		o: function outro(local) {
    			transition_out(homelayout.$$.fragment, local);
    			current = false;
    		},
    		d: function destroy(detaching) {
    			destroy_component(homelayout, detaching);
    		}
    	};

    	dispatch_dev("SvelteRegisterBlock", {
    		block,
    		id: create_if_block$6.name,
    		type: "if",
    		source: "(40:1) {#if layout === \\\"home\\\"}",
    		ctx
    	});

    	return block;
    }

    // (60:3) <Button bind:layout new_layout={layouts[0]} my_class="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: "(60:3) <Button bind:layout new_layout={layouts[0]} my_class=\\\"chat\\\">",
    		ctx
    	});

    	return block;
    }

    function create_fragment$d(ctx) {
    	let div;
    	let current_block_type_index;
    	let if_block;
    	let div_class_value;
    	let current;

    	const if_block_creators = [
    		create_if_block$6,
    		create_if_block_1$1,
    		create_if_block_2,
    		create_if_block_3,
    		create_if_block_4,
    		create_if_block_5,
    		create_else_block$4
    	];

    	const if_blocks = [];

    	function select_block_type(ctx, dirty) {
    		if (/*layout*/ ctx[1] === "home") return 0;
    		if (/*layout*/ ctx[1] === "room") return 1;
    		if (/*layout*/ ctx[1] === "new") return 2;
    		if (/*layout*/ ctx[1] === "settings") return 3;
    		if (/*layout*/ ctx[1] === "room_set") return 4;
    		if (/*layout*/ ctx[1] === "protected") return 5;
    		return 6;
    	}

    	current_block_type_index = select_block_type(ctx);
    	if_block = if_blocks[current_block_type_index] = if_block_creators[current_block_type_index](ctx);

    	const block = {
    		c: function create() {
    			div = element("div");
    			if_block.c();
    			attr_dev(div, "class", div_class_value = "" + (null_to_empty(/*layout*/ ctx[1]) + " svelte-1oi61jk"));
    			attr_dev(div, "id", "chat_box");
    			set_style(div, "background-color", /*color*/ ctx[0]);
    			add_location(div, file$c, 37, 0, 955);
    		},
    		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) {
    			insert_dev(target, div, anchor);
    			if_blocks[current_block_type_index].m(div, null);
    			current = true;
    		},
    		p: function update(ctx, [dirty]) {
    			let previous_block_index = current_block_type_index;
    			current_block_type_index = select_block_type(ctx);

    			if (current_block_type_index === previous_block_index) {
    				if_blocks[current_block_type_index].p(ctx, dirty);
    			} else {
    				group_outros();

    				transition_out(if_blocks[previous_block_index], 1, 1, () => {
    					if_blocks[previous_block_index] = null;
    				});

    				check_outros();
    				if_block = if_blocks[current_block_type_index];

    				if (!if_block) {
    					if_block = if_blocks[current_block_type_index] = if_block_creators[current_block_type_index](ctx);
    					if_block.c();
    				} else {
    					if_block.p(ctx, dirty);
    				}

    				transition_in(if_block, 1);
    				if_block.m(div, null);
    			}

    			if (!current || dirty & /*layout*/ 2 && div_class_value !== (div_class_value = "" + (null_to_empty(/*layout*/ ctx[1]) + " svelte-1oi61jk"))) {
    				attr_dev(div, "class", div_class_value);
    			}

    			if (!current || dirty & /*color*/ 1) {
    				set_style(div, "background-color", /*color*/ ctx[0]);
    			}
    		},
    		i: function intro(local) {
    			if (current) return;
    			transition_in(if_block);
    			current = true;
    		},
    		o: function outro(local) {
    			transition_out(if_block);
    			current = false;
    		},
    		d: function destroy(detaching) {
    			if (detaching) detach_dev(div);
    			if_blocks[current_block_type_index].d();
    		}
    	};

    	dispatch_dev("SvelteRegisterBlock", {
    		block,
    		id: create_fragment$d.name,
    		type: "component",
    		source: "",
    		ctx
    	});

    	return block;
    }

    function instance$d($$self, $$props, $$invalidate) {
    	let { $$slots: slots = {}, $$scope } = $$props;
    	validate_slots('Chat', slots, []);
    	let { color = "transparent" } = $$props;
    	let room = "";
    	let admin = false;
    	let layout = "close";
    	let layouts = ["home"];

    	// hold previous versions of layout, to go back
    	function set_layouts(layout) {
    		if (layout === "close") return;
    		if (layout === layouts[0]) return;
    		$$invalidate(2, layouts = [layout, ...layouts]);
    		console.log(layouts);
    	}

    	const writable_props = ['color'];

    	Object.keys($$props).forEach(key => {
    		if (!~writable_props.indexOf(key) && key.slice(0, 2) !== '$$' && key !== 'slot') console_1$5.warn(`<Chat> was created with unknown prop '${key}'`);
    	});

    	function homelayout_layout_binding(value) {
    		layout = value;
    		$$invalidate(1, layout);
    	}

    	function roomlayout_layout_binding(value) {
    		layout = value;
    		$$invalidate(1, layout);
    	}

    	function newlayout_layout_binding(value) {
    		layout = value;
    		$$invalidate(1, layout);
    	}

    	function settingslayout_layout_binding(value) {
    		layout = value;
    		$$invalidate(1, layout);
    	}

    	function roomsetlayout_layout_binding(value) {
    		layout = value;
    		$$invalidate(1, layout);
    	}

    	function protectedlayout_layout_binding(value) {
    		layout = value;
    		$$invalidate(1, layout);
    	}

    	function button_layout_binding(value) {
    		layout = value;
    		$$invalidate(1, layout);
    	}

    	$$self.$$set = $$props => {
    		if ('color' in $$props) $$invalidate(0, color = $$props.color);
    	};

    	$$self.$capture_state = () => ({
    		Button: Chat_button,
    		HomeLayout: Layout_home,
    		RoomLayout: Layout_room,
    		NewLayout: Layout_new,
    		SettingsLayout: Layout_settings,
    		RoomsetLayout: Layout_room_set,
    		ProtectedLayout: Layout_protected,
    		color,
    		room,
    		admin,
    		layout,
    		layouts,
    		set_layouts
    	});

    	$$self.$inject_state = $$props => {
    		if ('color' in $$props) $$invalidate(0, color = $$props.color);
    		if ('room' in $$props) room = $$props.room;
    		if ('admin' in $$props) admin = $$props.admin;
    		if ('layout' in $$props) $$invalidate(1, layout = $$props.layout);
    		if ('layouts' in $$props) $$invalidate(2, layouts = $$props.layouts);
    	};

    	if ($$props && "$$inject" in $$props) {
    		$$self.$inject_state($$props.$$inject);
    	}

    	$$self.$$.update = () => {
    		if ($$self.$$.dirty & /*layout*/ 2) {
    			set_layouts(layout);
    		}
    	};

    	return [
    		color,
    		layout,
    		layouts,
    		homelayout_layout_binding,
    		roomlayout_layout_binding,
    		newlayout_layout_binding,
    		settingslayout_layout_binding,
    		roomsetlayout_layout_binding,
    		protectedlayout_layout_binding,
    		button_layout_binding
    	];
    }

    class Chat extends SvelteComponentDev {
    	constructor(options) {
    		super(options);
    		init(this, options, instance$d, create_fragment$d, safe_not_equal, { color: 0 });

    		dispatch_dev("SvelteRegisterComponent", {
    			component: this,
    			tagName: "Chat",
    			options,
    			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 */
    const file$b = "src/pages/profile/ProfileDisplay.svelte";

    // (19:2) {:else}
    function create_else_block$3(ctx) {
    	let h2;
    	let t1;
    	let div;

    	const block = {
    		c: function create() {
    			h2 = element("h2");
    			h2.textContent = "Sorry";
    			t1 = space();
    			div = element("div");
    			div.textContent = "Failed to load current";
    			add_location(h2, file$b, 20, 4, 705);
    			add_location(div, file$b, 21, 4, 724);
    		},
    		m: function mount(target, anchor) {
    			insert_dev(target, h2, anchor);
    			insert_dev(target, t1, anchor);
    			insert_dev(target, div, anchor);
    		},
    		p: noop,
    		i: noop,
    		o: noop,
    		d: function destroy(detaching) {
    			if (detaching) detach_dev(h2);
    			if (detaching) detach_dev(t1);
    			if (detaching) detach_dev(div);
    		}
    	};

    	dispatch_dev("SvelteRegisterBlock", {
    		block,
    		id: create_else_block$3.name,
    		type: "else",
    		source: "(19:2) {:else}",
    		ctx
    	});

    	return block;
    }

    // (17:2) {#if user !== undefined}
    function create_if_block$5(ctx) {
    	let generateuserdisplay;
    	let current;

    	generateuserdisplay = new GenerateUserDisplay({
    			props: { user: /*user*/ ctx[0], primary: true },
    			$$inline: true
    		});

    	const block = {
    		c: function create() {
    			create_component(generateuserdisplay.$$.fragment);
    		},
    		m: function mount(target, anchor) {
    			mount_component(generateuserdisplay, target, anchor);
    			current = true;
    		},
    		p: function update(ctx, dirty) {
    			const generateuserdisplay_changes = {};
    			if (dirty & /*user*/ 1) generateuserdisplay_changes.user = /*user*/ ctx[0];
    			generateuserdisplay.$set(generateuserdisplay_changes);
    		},
    		i: function intro(local) {
    			if (current) return;
    			transition_in(generateuserdisplay.$$.fragment, local);
    			current = true;
    		},
    		o: function outro(local) {
    			transition_out(generateuserdisplay.$$.fragment, local);
    			current = false;
    		},
    		d: function destroy(detaching) {
    			destroy_component(generateuserdisplay, detaching);
    		}
    	};

    	dispatch_dev("SvelteRegisterBlock", {
    		block,
    		id: create_if_block$5.name,
    		type: "if",
    		source: "(17:2) {#if user !== undefined}",
    		ctx
    	});

    	return block;
    }

    function create_fragment$c(ctx) {
    	let chat;
    	let t0;
    	let div0;
    	let current_block_type_index;
    	let if_block;
    	let t1;
    	let div1;
    	let t3;
    	let div2;
    	let t5;
    	let div3;
    	let t7;
    	let div4;
    	let t9;
    	let div5;
    	let t11;
    	let div6;
    	let t13;
    	let div7;
    	let t15;
    	let div8;
    	let t17;
    	let div9;
    	let t19;
    	let div10;
    	let t21;
    	let div11;
    	let t23;
    	let div12;
    	let t25;
    	let div13;
    	let t27;
    	let div14;
    	let t29;
    	let div15;
    	let t31;
    	let div16;
    	let t33;
    	let div17;
    	let t35;
    	let div18;
    	let t37;
    	let div19;
    	let t39;
    	let div20;
    	let t41;
    	let div21;
    	let t43;
    	let div22;
    	let t45;
    	let div23;
    	let t47;
    	let div24;
    	let t49;
    	let div25;
    	let t51;
    	let div26;
    	let t53;
    	let div27;
    	let t55;
    	let div28;
    	let t57;
    	let div29;
    	let t59;
    	let div30;
    	let current;

    	chat = new Chat({
    			props: { color: "bisque" },
    			$$inline: true
    		});

    	const if_block_creators = [create_if_block$5, create_else_block$3];
    	const if_blocks = [];

    	function select_block_type(ctx, dirty) {
    		if (/*user*/ ctx[0] !== undefined) return 0;
    		return 1;
    	}

    	current_block_type_index = select_block_type(ctx);
    	if_block = if_blocks[current_block_type_index] = if_block_creators[current_block_type_index](ctx);

    	const block = {
    		c: function create() {
    			create_component(chat.$$.fragment);
    			t0 = space();
    			div0 = element("div");
    			if_block.c();
    			t1 = space();
    			div1 = element("div");
    			div1.textContent = "testing when there's tons of stuff";
    			t3 = space();
    			div2 = element("div");
    			div2.textContent = "testing when there's tons of stuff";
    			t5 = space();
    			div3 = element("div");
    			div3.textContent = "testing when there's tons of stuff";
    			t7 = space();
    			div4 = element("div");
    			div4.textContent = "testing when there's tons of stuff";
    			t9 = space();
    			div5 = element("div");
    			div5.textContent = "testing when there's tons of stuff";
    			t11 = space();
    			div6 = element("div");
    			div6.textContent = "testing when there's tons of stuff";
    			t13 = space();
    			div7 = element("div");
    			div7.textContent = "testing when there's tons of stuff";
    			t15 = space();
    			div8 = element("div");
    			div8.textContent = "testing when there's tons of stuff";
    			t17 = space();
    			div9 = element("div");
    			div9.textContent = "testing when there's tons of stuff";
    			t19 = space();
    			div10 = element("div");
    			div10.textContent = "testing when there's tons of stuff";
    			t21 = space();
    			div11 = element("div");
    			div11.textContent = "testing when there's tons of stuff";
    			t23 = space();
    			div12 = element("div");
    			div12.textContent = "testing when there's tons of stuff";
    			t25 = space();
    			div13 = element("div");
    			div13.textContent = "testing when there's tons of stuff";
    			t27 = space();
    			div14 = element("div");
    			div14.textContent = "testing when there's tons of stuff";
    			t29 = space();
    			div15 = element("div");
    			div15.textContent = "testing when there's tons of stuff";
    			t31 = space();
    			div16 = element("div");
    			div16.textContent = "testing when there's tons of stuff";
    			t33 = space();
    			div17 = element("div");
    			div17.textContent = "testing when there's tons of stuff";
    			t35 = space();
    			div18 = element("div");
    			div18.textContent = "testing when there's tons of stuff";
    			t37 = space();
    			div19 = element("div");
    			div19.textContent = "testing when there's tons of stuff";
    			t39 = space();
    			div20 = element("div");
    			div20.textContent = "testing when there's tons of stuff";
    			t41 = space();
    			div21 = element("div");
    			div21.textContent = "testing when there's tons of stuff";
    			t43 = space();
    			div22 = element("div");
    			div22.textContent = "testing when there's tons of stuff";
    			t45 = space();
    			div23 = element("div");
    			div23.textContent = "testing when there's tons of stuff";
    			t47 = space();
    			div24 = element("div");
    			div24.textContent = "testing when there's tons of stuff";
    			t49 = space();
    			div25 = element("div");
    			div25.textContent = "testing when there's tons of stuff";
    			t51 = space();
    			div26 = element("div");
    			div26.textContent = "testing when there's tons of stuff";
    			t53 = space();
    			div27 = element("div");
    			div27.textContent = "testing when there's tons of stuff";
    			t55 = space();
    			div28 = element("div");
    			div28.textContent = "testing when there's tons of stuff";
    			t57 = space();
    			div29 = element("div");
    			div29.textContent = "testing when there's tons of stuff";
    			t59 = space();
    			div30 = element("div");
    			div30.textContent = "testing when there's tons of stuff";
    			attr_dev(div0, "class", "outer svelte-16aefqu");
    			add_location(div0, file$b, 14, 0, 422);
    			add_location(div1, file$b, 25, 0, 774);
    			add_location(div2, file$b, 26, 0, 820);
    			add_location(div3, file$b, 27, 0, 866);
    			add_location(div4, file$b, 28, 0, 912);
    			add_location(div5, file$b, 29, 0, 958);
    			add_location(div6, file$b, 30, 0, 1004);
    			add_location(div7, file$b, 31, 0, 1050);
    			add_location(div8, file$b, 32, 0, 1096);
    			add_location(div9, file$b, 33, 0, 1142);
    			add_location(div10, file$b, 34, 0, 1188);
    			add_location(div11, file$b, 35, 0, 1234);
    			add_location(div12, file$b, 36, 0, 1280);
    			add_location(div13, file$b, 37, 0, 1326);
    			add_location(div14, file$b, 38, 0, 1372);
    			add_location(div15, file$b, 39, 0, 1418);
    			add_location(div16, file$b, 40, 0, 1464);
    			add_location(div17, file$b, 41, 0, 1510);
    			add_location(div18, file$b, 42, 0, 1556);
    			add_location(div19, file$b, 43, 0, 1602);
    			add_location(div20, file$b, 44, 0, 1648);
    			add_location(div21, file$b, 45, 0, 1694);
    			add_location(div22, file$b, 46, 0, 1740);
    			add_location(div23, file$b, 47, 0, 1786);
    			add_location(div24, file$b, 48, 0, 1832);
    			add_location(div25, file$b, 49, 0, 1878);
    			add_location(div26, file$b, 50, 0, 1924);
    			add_location(div27, file$b, 51, 0, 1970);
    			add_location(div28, file$b, 52, 0, 2016);
    			add_location(div29, file$b, 53, 0, 2062);
    			add_location(div30, file$b, 54, 0, 2108);
    		},
    		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(chat, target, anchor);
    			insert_dev(target, t0, anchor);
    			insert_dev(target, div0, anchor);
    			if_blocks[current_block_type_index].m(div0, null);
    			insert_dev(target, t1, anchor);
    			insert_dev(target, div1, anchor);
    			insert_dev(target, t3, anchor);
    			insert_dev(target, div2, anchor);
    			insert_dev(target, t5, anchor);
    			insert_dev(target, div3, anchor);
    			insert_dev(target, t7, anchor);
    			insert_dev(target, div4, anchor);
    			insert_dev(target, t9, anchor);
    			insert_dev(target, div5, anchor);
    			insert_dev(target, t11, anchor);
    			insert_dev(target, div6, anchor);
    			insert_dev(target, t13, anchor);
    			insert_dev(target, div7, anchor);
    			insert_dev(target, t15, anchor);
    			insert_dev(target, div8, anchor);
    			insert_dev(target, t17, anchor);
    			insert_dev(target, div9, anchor);
    			insert_dev(target, t19, anchor);
    			insert_dev(target, div10, anchor);
    			insert_dev(target, t21, anchor);
    			insert_dev(target, div11, anchor);
    			insert_dev(target, t23, anchor);
    			insert_dev(target, div12, anchor);
    			insert_dev(target, t25, anchor);
    			insert_dev(target, div13, anchor);
    			insert_dev(target, t27, anchor);
    			insert_dev(target, div14, anchor);
    			insert_dev(target, t29, anchor);
    			insert_dev(target, div15, anchor);
    			insert_dev(target, t31, anchor);
    			insert_dev(target, div16, anchor);
    			insert_dev(target, t33, anchor);
    			insert_dev(target, div17, anchor);
    			insert_dev(target, t35, anchor);
    			insert_dev(target, div18, anchor);
    			insert_dev(target, t37, anchor);
    			insert_dev(target, div19, anchor);
    			insert_dev(target, t39, anchor);
    			insert_dev(target, div20, anchor);
    			insert_dev(target, t41, anchor);
    			insert_dev(target, div21, anchor);
    			insert_dev(target, t43, anchor);
    			insert_dev(target, div22, anchor);
    			insert_dev(target, t45, anchor);
    			insert_dev(target, div23, anchor);
    			insert_dev(target, t47, anchor);
    			insert_dev(target, div24, anchor);
    			insert_dev(target, t49, anchor);
    			insert_dev(target, div25, anchor);
    			insert_dev(target, t51, anchor);
    			insert_dev(target, div26, anchor);
    			insert_dev(target, t53, anchor);
    			insert_dev(target, div27, anchor);
    			insert_dev(target, t55, anchor);
    			insert_dev(target, div28, anchor);
    			insert_dev(target, t57, anchor);
    			insert_dev(target, div29, anchor);
    			insert_dev(target, t59, anchor);
    			insert_dev(target, div30, anchor);
    			current = true;
    		},
    		p: function update(ctx, [dirty]) {
    			let previous_block_index = current_block_type_index;
    			current_block_type_index = select_block_type(ctx);

    			if (current_block_type_index === previous_block_index) {
    				if_blocks[current_block_type_index].p(ctx, dirty);
    			} else {
    				group_outros();

    				transition_out(if_blocks[previous_block_index], 1, 1, () => {
    					if_blocks[previous_block_index] = null;
    				});

    				check_outros();
    				if_block = if_blocks[current_block_type_index];

    				if (!if_block) {
    					if_block = if_blocks[current_block_type_index] = if_block_creators[current_block_type_index](ctx);
    					if_block.c();
    				} else {
    					if_block.p(ctx, dirty);
    				}

    				transition_in(if_block, 1);
    				if_block.m(div0, null);
    			}
    		},
    		i: function intro(local) {
    			if (current) return;
    			transition_in(chat.$$.fragment, local);
    			transition_in(if_block);
    			current = true;
    		},
    		o: function outro(local) {
    			transition_out(chat.$$.fragment, local);
    			transition_out(if_block);
    			current = false;
    		},
    		d: function destroy(detaching) {
    			destroy_component(chat, detaching);
    			if (detaching) detach_dev(t0);
    			if (detaching) detach_dev(div0);
    			if_blocks[current_block_type_index].d();
    			if (detaching) detach_dev(t1);
    			if (detaching) detach_dev(div1);
    			if (detaching) detach_dev(t3);
    			if (detaching) detach_dev(div2);
    			if (detaching) detach_dev(t5);
    			if (detaching) detach_dev(div3);
    			if (detaching) detach_dev(t7);
    			if (detaching) detach_dev(div4);
    			if (detaching) detach_dev(t9);
    			if (detaching) detach_dev(div5);
    			if (detaching) detach_dev(t11);
    			if (detaching) detach_dev(div6);
    			if (detaching) detach_dev(t13);
    			if (detaching) detach_dev(div7);
    			if (detaching) detach_dev(t15);
    			if (detaching) detach_dev(div8);
    			if (detaching) detach_dev(t17);
    			if (detaching) detach_dev(div9);
    			if (detaching) detach_dev(t19);
    			if (detaching) detach_dev(div10);
    			if (detaching) detach_dev(t21);
    			if (detaching) detach_dev(div11);
    			if (detaching) detach_dev(t23);
    			if (detaching) detach_dev(div12);
    			if (detaching) detach_dev(t25);
    			if (detaching) detach_dev(div13);
    			if (detaching) detach_dev(t27);
    			if (detaching) detach_dev(div14);
    			if (detaching) detach_dev(t29);
    			if (detaching) detach_dev(div15);
    			if (detaching) detach_dev(t31);
    			if (detaching) detach_dev(div16);
    			if (detaching) detach_dev(t33);
    			if (detaching) detach_dev(div17);
    			if (detaching) detach_dev(t35);
    			if (detaching) detach_dev(div18);
    			if (detaching) detach_dev(t37);
    			if (detaching) detach_dev(div19);
    			if (detaching) detach_dev(t39);
    			if (detaching) detach_dev(div20);
    			if (detaching) detach_dev(t41);
    			if (detaching) detach_dev(div21);
    			if (detaching) detach_dev(t43);
    			if (detaching) detach_dev(div22);
    			if (detaching) detach_dev(t45);
    			if (detaching) detach_dev(div23);
    			if (detaching) detach_dev(t47);
    			if (detaching) detach_dev(div24);
    			if (detaching) detach_dev(t49);
    			if (detaching) detach_dev(div25);
    			if (detaching) detach_dev(t51);
    			if (detaching) detach_dev(div26);
    			if (detaching) detach_dev(t53);
    			if (detaching) detach_dev(div27);
    			if (detaching) detach_dev(t55);
    			if (detaching) detach_dev(div28);
    			if (detaching) detach_dev(t57);
    			if (detaching) detach_dev(div29);
    			if (detaching) detach_dev(t59);
    			if (detaching) detach_dev(div30);
    		}
    	};

    	dispatch_dev("SvelteRegisterBlock", {
    		block,
    		id: create_fragment$c.name,
    		type: "component",
    		source: "",
    		ctx
    	});

    	return block;
    }

    function instance$c($$self, $$props, $$invalidate) {
    	let { $$slots: slots = {}, $$scope } = $$props;
    	validate_slots('ProfileDisplay', slots, []);
    	let user;

    	onMount(async () => {
    		// console.log('mounting profile display')
    		$$invalidate(0, user = await fetch('http://transcendance:8080/api/v2/user').then(x => x.json()));
    	});

    	const writable_props = [];

    	Object.keys($$props).forEach(key => {
    		if (!~writable_props.indexOf(key) && key.slice(0, 2) !== '$$' && key !== 'slot') console.warn(`<ProfileDisplay> was created with unknown prop '${key}'`);
    	});

    	$$self.$capture_state = () => ({ onMount, GenerateUserDisplay, Chat, user });

    	$$self.$inject_state = $$props => {
    		if ('user' in $$props) $$invalidate(0, user = $$props.user);
    	};

    	if ($$props && "$$inject" in $$props) {
    		$$self.$inject_state($$props.$$inject);
    	}

    	return [user];
    }

    class ProfileDisplay extends SvelteComponentDev {
    	constructor(options) {
    		super(options);
    		init(this, options, instance$c, create_fragment$c, safe_not_equal, {});

    		dispatch_dev("SvelteRegisterComponent", {
    			component: this,
    			tagName: "ProfileDisplay",
    			options,
    			id: create_fragment$c.name
    		});
    	}
    }

    /* src/pieces/Card.svelte generated by Svelte v3.53.1 */

    const file$a = "src/pieces/Card.svelte";

    function create_fragment$b(ctx) {
    	let div;
    	let current;
    	const default_slot_template = /*#slots*/ ctx[1].default;
    	const default_slot = create_slot(default_slot_template, ctx, /*$$scope*/ ctx[0], null);

    	const block = {
    		c: function create() {
    			div = element("div");
    			if (default_slot) default_slot.c();
    			attr_dev(div, "class", "card svelte-8smyff");
    			add_location(div, file$a, 0, 0, 0);
    		},
    		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) {
    			insert_dev(target, div, anchor);

    			if (default_slot) {
    				default_slot.m(div, null);
    			}

    			current = true;
    		},
    		p: function update(ctx, [dirty]) {
    			if (default_slot) {
    				if (default_slot.p && (!current || dirty & /*$$scope*/ 1)) {
    					update_slot_base(
    						default_slot,
    						default_slot_template,
    						ctx,
    						/*$$scope*/ ctx[0],
    						!current
    						? get_all_dirty_from_scope(/*$$scope*/ ctx[0])
    						: get_slot_changes(default_slot_template, /*$$scope*/ ctx[0], dirty, null),
    						null
    					);
    				}
    			}
    		},
    		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);
    		}
    	};

    	dispatch_dev("SvelteRegisterBlock", {
    		block,
    		id: create_fragment$b.name,
    		type: "component",
    		source: "",
    		ctx
    	});

    	return block;
    }

    function instance$b($$self, $$props, $$invalidate) {
    	let { $$slots: slots = {}, $$scope } = $$props;
    	validate_slots('Card', slots, ['default']);
    	const writable_props = [];

    	Object.keys($$props).forEach(key => {
    		if (!~writable_props.indexOf(key) && key.slice(0, 2) !== '$$' && key !== 'slot') console.warn(`<Card> was created with unknown prop '${key}'`);
    	});

    	$$self.$$set = $$props => {
    		if ('$$scope' in $$props) $$invalidate(0, $$scope = $$props.$$scope);
    	};

    	return [$$scope, slots];
    }

    class Card extends SvelteComponentDev {
    	constructor(options) {
    		super(options);
    		init(this, options, instance$b, create_fragment$b, safe_not_equal, {});

    		dispatch_dev("SvelteRegisterComponent", {
    			component: this,
    			tagName: "Card",
    			options,
    			id: create_fragment$b.name
    		});
    	}
    }

    /* src/pieces/Button.svelte generated by Svelte v3.53.1 */

    const file$9 = "src/pieces/Button.svelte";

    function create_fragment$a(ctx) {
    	let button;
    	let button_class_value;
    	let current;
    	let mounted;
    	let dispose;
    	const default_slot_template = /*#slots*/ ctx[4].default;
    	const default_slot = create_slot(default_slot_template, ctx, /*$$scope*/ ctx[3], null);

    	const block = {
    		c: function create() {
    			button = element("button");
    			if (default_slot) default_slot.c();
    			attr_dev(button, "class", button_class_value = "" + (null_to_empty(/*type*/ ctx[0]) + " svelte-1u0z9cq"));
    			toggle_class(button, "flat", /*flat*/ ctx[1]);
    			toggle_class(button, "inverse", /*inverse*/ ctx[2]);
    			add_location(button, file$9, 10, 0, 602);
    		},
    		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) {
    			insert_dev(target, button, anchor);

    			if (default_slot) {
    				default_slot.m(button, null);
    			}

    			current = true;

    			if (!mounted) {
    				dispose = listen_dev(button, "click", /*click_handler*/ ctx[5], false, false, false);
    				mounted = true;
    			}
    		},
    		p: function update(ctx, [dirty]) {
    			if (default_slot) {
    				if (default_slot.p && (!current || dirty & /*$$scope*/ 8)) {
    					update_slot_base(
    						default_slot,
    						default_slot_template,
    						ctx,
    						/*$$scope*/ ctx[3],
    						!current
    						? get_all_dirty_from_scope(/*$$scope*/ ctx[3])
    						: get_slot_changes(default_slot_template, /*$$scope*/ ctx[3], dirty, null),
    						null
    					);
    				}
    			}

    			if (!current || dirty & /*type*/ 1 && button_class_value !== (button_class_value = "" + (null_to_empty(/*type*/ ctx[0]) + " svelte-1u0z9cq"))) {
    				attr_dev(button, "class", button_class_value);
    			}

    			if (!current || dirty & /*type, flat*/ 3) {
    				toggle_class(button, "flat", /*flat*/ ctx[1]);
    			}

    			if (!current || dirty & /*type, inverse*/ 5) {
    				toggle_class(button, "inverse", /*inverse*/ ctx[2]);
    			}
    		},
    		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(button);
    			if (default_slot) default_slot.d(detaching);
    			mounted = false;
    			dispose();
    		}
    	};

    	dispatch_dev("SvelteRegisterBlock", {
    		block,
    		id: create_fragment$a.name,
    		type: "component",
    		source: "",
    		ctx
    	});

    	return block;
    }

    function instance$a($$self, $$props, $$invalidate) {
    	let { $$slots: slots = {}, $$scope } = $$props;
    	validate_slots('Button', slots, ['default']);
    	let { type = 'primary' } = $$props;
    	let { flat = false } = $$props;
    	let { inverse = false } = $$props;
    	const writable_props = ['type', 'flat', 'inverse'];

    	Object.keys($$props).forEach(key => {
    		if (!~writable_props.indexOf(key) && key.slice(0, 2) !== '$$' && key !== 'slot') console.warn(`<Button> was created with unknown prop '${key}'`);
    	});

    	function click_handler(event) {
    		bubble.call(this, $$self, event);
    	}

    	$$self.$$set = $$props => {
    		if ('type' in $$props) $$invalidate(0, type = $$props.type);
    		if ('flat' in $$props) $$invalidate(1, flat = $$props.flat);
    		if ('inverse' in $$props) $$invalidate(2, inverse = $$props.inverse);
    		if ('$$scope' in $$props) $$invalidate(3, $$scope = $$props.$$scope);
    	};

    	$$self.$capture_state = () => ({ type, flat, inverse });

    	$$self.$inject_state = $$props => {
    		if ('type' in $$props) $$invalidate(0, type = $$props.type);
    		if ('flat' in $$props) $$invalidate(1, flat = $$props.flat);
    		if ('inverse' in $$props) $$invalidate(2, inverse = $$props.inverse);
    	};

    	if ($$props && "$$inject" in $$props) {
    		$$self.$inject_state($$props.$$inject);
    	}

    	return [type, flat, inverse, $$scope, slots, click_handler];
    }

    class Button extends SvelteComponentDev {
    	constructor(options) {
    		super(options);
    		init(this, options, instance$a, create_fragment$a, safe_not_equal, { type: 0, flat: 1, inverse: 2 });

    		dispatch_dev("SvelteRegisterComponent", {
    			component: this,
    			tagName: "Button",
    			options,
    			id: create_fragment$a.name
    		});
    	}

    	get type() {
    		throw new Error("<Button>: Props cannot be read directly from the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
    	}

    	set type(value) {
    		throw new Error("<Button>: Props cannot be set directly on the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
    	}

    	get flat() {
    		throw new Error("<Button>: Props cannot be read directly from the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
    	}

    	set flat(value) {
    		throw new Error("<Button>: Props cannot be set directly on the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
    	}

    	get inverse() {
    		throw new Error("<Button>: Props cannot be read directly from the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
    	}

    	set inverse(value) {
    		throw new Error("<Button>: Props cannot be set directly on the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
    	}
    }

    /* src/pages/profile/ProfileSettings.svelte generated by Svelte v3.53.1 */

    const { console: console_1$4 } = globals;
    const file$8 = "src/pages/profile/ProfileSettings.svelte";

    // (122:8) <Button type="secondary">
    function create_default_slot_3(ctx) {
    	let t;

    	const block = {
    		c: function create() {
    			t = text("Update Settings");
    		},
    		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: "(122:8) <Button type=\\\"secondary\\\">",
    		ctx
    	});

    	return block;
    }

    // (107:4) <Card>
    function create_default_slot_2(ctx) {
    	let form;
    	let div3;
    	let div0;
    	let t1;
    	let input0;
    	let input0_placeholder_value;
    	let t2;
    	let div1;
    	let t3_value = /*success*/ ctx[5].username + "";
    	let t3;
    	let t4;
    	let div2;
    	let t5_value = /*errors*/ ctx[4].username + "";
    	let t5;
    	let t6;
    	let div6;
    	let div4;
    	let t8;
    	let input1;
    	let t9;
    	let div5;
    	let t10_value = /*errors*/ ctx[4].checkbox + "";
    	let t10;
    	let t11;
    	let button;
    	let current;
    	let mounted;
    	let dispose;

    	button = new Button({
    			props: {
    				type: "secondary",
    				$$slots: { default: [create_default_slot_3] },
    				$$scope: { ctx }
    			},
    			$$inline: true
    		});

    	const block = {
    		c: function create() {
    			form = element("form");
    			div3 = element("div");
    			div0 = element("div");
    			div0.textContent = "New Username";
    			t1 = space();
    			input0 = element("input");
    			t2 = space();
    			div1 = element("div");
    			t3 = text(t3_value);
    			t4 = space();
    			div2 = element("div");
    			t5 = text(t5_value);
    			t6 = space();
    			div6 = element("div");
    			div4 = element("div");
    			div4.textContent = "Set Two Factor Authentication";
    			t8 = space();
    			input1 = element("input");
    			t9 = space();
    			div5 = element("div");
    			t10 = text(t10_value);
    			t11 = space();
    			create_component(button.$$.fragment);
    			attr_dev(div0, "class", "label svelte-qtbld7");
    			add_location(div0, file$8, 109, 10, 3974);
    			attr_dev(input0, "type", "text");
    			attr_dev(input0, "placeholder", input0_placeholder_value = "current username: " + /*nameTmp*/ ctx[3]);
    			add_location(input0, file$8, 112, 10, 4208);
    			attr_dev(div1, "class", "success svelte-qtbld7");
    			add_location(div1, file$8, 113, 8, 4304);
    			attr_dev(div2, "class", "error svelte-qtbld7");
    			add_location(div2, file$8, 114, 10, 4360);
    			attr_dev(div3, "class", "form-field svelte-qtbld7");
    			add_location(div3, file$8, 108, 8, 3939);
    			attr_dev(div4, "class", "label inline-check svelte-qtbld7");
    			add_location(div4, file$8, 117, 10, 4461);
    			attr_dev(input1, "class", "inline-check svelte-qtbld7");
    			attr_dev(input1, "type", "checkbox");
    			add_location(input1, file$8, 118, 10, 4539);
    			attr_dev(div5, "class", "error svelte-qtbld7");
    			add_location(div5, file$8, 119, 10, 4617);
    			attr_dev(div6, "class", "form-field svelte-qtbld7");
    			add_location(div6, file$8, 116, 8, 4426);
    			attr_dev(form, "class", "svelte-qtbld7");
    			add_location(form, file$8, 107, 6, 3881);
    		},
    		m: function mount(target, anchor) {
    			insert_dev(target, form, anchor);
    			append_dev(form, div3);
    			append_dev(div3, div0);
    			append_dev(div3, t1);
    			append_dev(div3, input0);
    			set_input_value(input0, /*set*/ ctx[2].username);
    			append_dev(div3, t2);
    			append_dev(div3, div1);
    			append_dev(div1, t3);
    			append_dev(div3, t4);
    			append_dev(div3, div2);
    			append_dev(div2, t5);
    			append_dev(form, t6);
    			append_dev(form, div6);
    			append_dev(div6, div4);
    			append_dev(div6, t8);
    			append_dev(div6, input1);
    			input1.checked = /*set*/ ctx[2].tfa;
    			append_dev(div6, t9);
    			append_dev(div6, div5);
    			append_dev(div5, t10);
    			append_dev(form, t11);
    			mount_component(button, form, null);
    			current = true;

    			if (!mounted) {
    				dispose = [
    					listen_dev(input0, "input", /*input0_input_handler*/ ctx[8]),
    					listen_dev(input1, "change", /*input1_change_handler*/ ctx[9]),
    					listen_dev(form, "submit", prevent_default(/*settingsHandler*/ ctx[6]), false, true, false)
    				];

    				mounted = true;
    			}
    		},
    		p: function update(ctx, dirty) {
    			if (!current || dirty & /*nameTmp*/ 8 && input0_placeholder_value !== (input0_placeholder_value = "current username: " + /*nameTmp*/ ctx[3])) {
    				attr_dev(input0, "placeholder", input0_placeholder_value);
    			}

    			if (dirty & /*set*/ 4 && input0.value !== /*set*/ ctx[2].username) {
    				set_input_value(input0, /*set*/ ctx[2].username);
    			}

    			if ((!current || dirty & /*success*/ 32) && t3_value !== (t3_value = /*success*/ ctx[5].username + "")) set_data_dev(t3, t3_value);
    			if ((!current || dirty & /*errors*/ 16) && t5_value !== (t5_value = /*errors*/ ctx[4].username + "")) set_data_dev(t5, t5_value);

    			if (dirty & /*set*/ 4) {
    				input1.checked = /*set*/ ctx[2].tfa;
    			}

    			if ((!current || dirty & /*errors*/ 16) && t10_value !== (t10_value = /*errors*/ ctx[4].checkbox + "")) set_data_dev(t10, t10_value);
    			const button_changes = {};

    			if (dirty & /*$$scope*/ 8192) {
    				button_changes.$$scope = { dirty, ctx };
    			}

    			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) {
    			if (detaching) detach_dev(form);
    			destroy_component(button);
    			mounted = false;
    			run_all(dispose);
    		}
    	};

    	dispatch_dev("SvelteRegisterBlock", {
    		block,
    		id: create_default_slot_2.name,
    		type: "slot",
    		source: "(107:4) <Card>",
    		ctx
    	});

    	return block;
    }

    // (128:6) {#if avatar !== undefined}
    function create_if_block$4(ctx) {
    	let img;
    	let img_src_value;

    	const block = {
    		c: function create() {
    			img = element("img");
    			attr_dev(img, "class", "avatar svelte-qtbld7");
    			if (!src_url_equal(img.src, img_src_value = /*avatar*/ ctx[0])) attr_dev(img, "src", img_src_value);
    			attr_dev(img, "alt", "your avatar");
    			add_location(img, file$8, 128, 8, 4905);
    		},
    		m: function mount(target, anchor) {
    			insert_dev(target, img, anchor);
    		},
    		p: function update(ctx, dirty) {
    			if (dirty & /*avatar*/ 1 && !src_url_equal(img.src, img_src_value = /*avatar*/ ctx[0])) {
    				attr_dev(img, "src", img_src_value);
    			}
    		},
    		d: function destroy(detaching) {
    			if (detaching) detach_dev(img);
    		}
    	};

    	dispatch_dev("SvelteRegisterBlock", {
    		block,
    		id: create_if_block$4.name,
    		type: "if",
    		source: "(128:6) {#if avatar !== undefined}",
    		ctx
    	});

    	return block;
    }

    // (139:8) <Button type={newAvatar === undefined ? "primary" : "secondary"}>
    function create_default_slot_1(ctx) {
    	let t;

    	const block = {
    		c: function create() {
    			t = text("Upload Avatar");
    		},
    		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_1.name,
    		type: "slot",
    		source: "(139:8) <Button type={newAvatar === undefined ? \\\"primary\\\" : \\\"secondary\\\"}>",
    		ctx
    	});

    	return block;
    }

    // (126:4) <Card>
    function create_default_slot$1(ctx) {
    	let t0;
    	let form;
    	let div2;
    	let div0;
    	let t2;
    	let input;
    	let t3;
    	let div1;
    	let t4_value = /*errors*/ ctx[4].avatar + "";
    	let t4;
    	let t5;
    	let button;
    	let current;
    	let mounted;
    	let dispose;
    	let if_block = /*avatar*/ ctx[0] !== undefined && create_if_block$4(ctx);

    	button = new Button({
    			props: {
    				type: /*newAvatar*/ ctx[1] === undefined
    				? "primary"
    				: "secondary",
    				$$slots: { default: [create_default_slot_1] },
    				$$scope: { ctx }
    			},
    			$$inline: true
    		});

    	const block = {
    		c: function create() {
    			if (if_block) if_block.c();
    			t0 = space();
    			form = element("form");
    			div2 = element("div");
    			div0 = element("div");
    			div0.textContent = "Pick a new Avatar";
    			t2 = space();
    			input = element("input");
    			t3 = space();
    			div1 = element("div");
    			t4 = text(t4_value);
    			t5 = space();
    			create_component(button.$$.fragment);
    			attr_dev(div0, "class", "label svelte-qtbld7");
    			add_location(div0, file$8, 134, 10, 5211);
    			attr_dev(input, "type", "file");
    			add_location(input, file$8, 135, 10, 5264);
    			attr_dev(div1, "class", "error svelte-qtbld7");
    			add_location(div1, file$8, 136, 10, 5318);
    			attr_dev(div2, "class", "form-field svelte-qtbld7");
    			add_location(div2, file$8, 133, 8, 5176);
    			attr_dev(form, "class", "svelte-qtbld7");
    			add_location(form, file$8, 130, 6, 4976);
    		},
    		m: function mount(target, anchor) {
    			if (if_block) if_block.m(target, anchor);
    			insert_dev(target, t0, anchor);
    			insert_dev(target, form, anchor);
    			append_dev(form, div2);
    			append_dev(div2, div0);
    			append_dev(div2, t2);
    			append_dev(div2, input);
    			append_dev(div2, t3);
    			append_dev(div2, div1);
    			append_dev(div1, t4);
    			append_dev(form, t5);
    			mount_component(button, form, null);
    			current = true;

    			if (!mounted) {
    				dispose = [
    					listen_dev(input, "change", /*input_change_handler*/ ctx[10]),
    					listen_dev(form, "submit", prevent_default(/*uploadAvatar*/ ctx[7]), false, true, false)
    				];

    				mounted = true;
    			}
    		},
    		p: function update(ctx, dirty) {
    			if (/*avatar*/ ctx[0] !== undefined) {
    				if (if_block) {
    					if_block.p(ctx, dirty);
    				} else {
    					if_block = create_if_block$4(ctx);
    					if_block.c();
    					if_block.m(t0.parentNode, t0);
    				}
    			} else if (if_block) {
    				if_block.d(1);
    				if_block = null;
    			}

    			if ((!current || dirty & /*errors*/ 16) && t4_value !== (t4_value = /*errors*/ ctx[4].avatar + "")) set_data_dev(t4, t4_value);
    			const button_changes = {};

    			if (dirty & /*newAvatar*/ 2) button_changes.type = /*newAvatar*/ ctx[1] === undefined
    			? "primary"
    			: "secondary";

    			if (dirty & /*$$scope*/ 8192) {
    				button_changes.$$scope = { dirty, ctx };
    			}

    			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) {
    			if (if_block) if_block.d(detaching);
    			if (detaching) detach_dev(t0);
    			if (detaching) detach_dev(form);
    			destroy_component(button);
    			mounted = false;
    			run_all(dispose);
    		}
    	};

    	dispatch_dev("SvelteRegisterBlock", {
    		block,
    		id: create_default_slot$1.name,
    		type: "slot",
    		source: "(126:4) <Card>",
    		ctx
    	});

    	return block;
    }

    function create_fragment$9(ctx) {
    	let main;
    	let h2;
    	let t1;
    	let div;
    	let card0;
    	let t2;
    	let card1;
    	let current;

    	card0 = new Card({
    			props: {
    				$$slots: { default: [create_default_slot_2] },
    				$$scope: { ctx }
    			},
    			$$inline: true
    		});

    	card1 = new Card({
    			props: {
    				$$slots: { default: [create_default_slot$1] },
    				$$scope: { ctx }
    			},
    			$$inline: true
    		});

    	const block = {
    		c: function create() {
    			main = element("main");
    			h2 = element("h2");
    			h2.textContent = "Look! You can change stuff";
    			t1 = space();
    			div = element("div");
    			create_component(card0.$$.fragment);
    			t2 = space();
    			create_component(card1.$$.fragment);
    			add_location(h2, file$8, 104, 2, 3806);
    			attr_dev(div, "class", "cards svelte-qtbld7");
    			add_location(div, file$8, 105, 2, 3844);
    			attr_dev(main, "class", "svelte-qtbld7");
    			add_location(main, file$8, 103, 0, 3797);
    		},
    		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) {
    			insert_dev(target, main, anchor);
    			append_dev(main, h2);
    			append_dev(main, t1);
    			append_dev(main, div);
    			mount_component(card0, div, null);
    			append_dev(div, t2);
    			mount_component(card1, div, null);
    			current = true;
    		},
    		p: function update(ctx, [dirty]) {
    			const card0_changes = {};

    			if (dirty & /*$$scope, errors, set, success, nameTmp*/ 8252) {
    				card0_changes.$$scope = { dirty, ctx };
    			}

    			card0.$set(card0_changes);
    			const card1_changes = {};

    			if (dirty & /*$$scope, newAvatar, errors, avatar*/ 8211) {
    				card1_changes.$$scope = { dirty, ctx };
    			}

    			card1.$set(card1_changes);
    		},
    		i: function intro(local) {
    			if (current) return;
    			transition_in(card0.$$.fragment, local);
    			transition_in(card1.$$.fragment, local);
    			current = true;
    		},
    		o: function outro(local) {
    			transition_out(card0.$$.fragment, local);
    			transition_out(card1.$$.fragment, local);
    			current = false;
    		},
    		d: function destroy(detaching) {
    			if (detaching) detach_dev(main);
    			destroy_component(card0);
    			destroy_component(card1);
    		}
    	};

    	dispatch_dev("SvelteRegisterBlock", {
    		block,
    		id: create_fragment$9.name,
    		type: "component",
    		source: "",
    		ctx
    	});

    	return block;
    }

    function instance$9($$self, $$props, $$invalidate) {
    	let { $$slots: slots = {}, $$scope } = $$props;
    	validate_slots('ProfileSettings', slots, []);
    	let user;
    	let avatar, newAvatar;
    	let uploadAvatarSuccess = false;

    	// tbh i might not need this...
    	let set = { username: '', tfa: false };

    	let nameTmp; // annoying...
    	const errors = { username: '', checkbox: '', avatar: '' };
    	let success = { username: '', avatar: '' };

    	onMount(async () => {
    		user = await fetch('http://transcendance:8080/api/v2/user').then(x => x.json());

    		// do a .catch?
    		if (user === undefined) {
    			console.log('User did not load, something more official should prolly happen');
    		}

    		// i don't unerstand why this is necessary but it really doesn't like it otherwise
    		$$invalidate(3, nameTmp = user.username);

    		console.log(user.username);
    		$$invalidate(2, set.tfa = user.isEnabledTwoFactorAuth, set);

    		// tmp
    		// console.log('this is what is in the avatar before fetch')
    		// console.log(avatar)
    		await fetch("http://transcendance:8080/api/v2/user/avatar", { method: "GET" }).then(response => {
    			return response.blob();
    		}).then(data => {
    			const url = URL.createObjectURL(data);
    			$$invalidate(0, avatar = url);
    		}).catch(() => $$invalidate(4, errors.avatar = 'Sorry your avatar could not be loaded', errors));
    	}); // .then(() => errors.avatar = '' ) // unnecessary i think cuz in on mount...
    	// tmp
    	// console.log('this is what is in the avatar')
    	// console.log(avatar)

    	// console.log('this is what is in the NEW Avatar')
    	// console.log(newAvatar)
    	const settingsHandler = async () => {
    		// I don't really care which i use at this point...
    		// if (set.username === nameTmp) {
    		if (set.username.trim() === '' && set.tfa === user.isEnabledTwoFactorAuth) {
    			$$invalidate(4, errors.username = 'Invalid new username', errors);
    			return;
    		} else if (set.username.trim() === '' && set.tfa !== user.isEnabledTwoFactorAuth) {
    			$$invalidate(2, set.username = user.username, set);
    		} else {
    			$$invalidate(4, errors.username = '', errors);
    		}

    		await fetch('http://transcendance:8080/api/v2/user', {
    			method: 'PATCH',
    			headers: { 'Content-Type': 'application/json' },
    			body: JSON.stringify({
    				"username": set.username,
    				"isEnabledTwoFactorAuth": set.tfa
    			})
    		}).then(response => {
    			if (response.status === 200) $$invalidate(5, success.username = "Your changes have been saved", success); else if (response.status === 201) push("/2fa"); else $$invalidate(4, errors.username = "Something went wrong", errors);
    		}).catch(err => $$invalidate(4, errors.username = err, errors));
    	}; // .then((result) => console.log(result))
    	// .then(() => console.log('successful sub of new settings'))

    	const uploadAvatar = async () => {
    		$$invalidate(4, errors.avatar = '', errors);

    		if (newAvatar === undefined) {
    			$$invalidate(4, errors.avatar = 'You need to pick a file.', errors);
    			return;
    		}

    		const data = new FormData();
    		data.append("file", newAvatar[0]);

    		// tmp
    		console.log(data);

    		await fetch("http://transcendance:8080/api/v2/user/avatar", { method: 'POST', body: data }).then(() => uploadAvatarSuccess = true).then(() => $$invalidate(5, success.avatar = 'Your changes have been saved', success)).catch(() => $$invalidate(4, errors.avatar = 'Sorry failed to upload your new Avatar', errors)); // for some reason it needs to be a function, i think a TS thing, not a promis otherwise

    		await fetch("http://transcendance:8080/api/v2/user/avatar", { method: "GET" }).then(response => {
    			return response.blob();
    		}).then(data => {
    			const url = URL.createObjectURL(data);
    			$$invalidate(0, avatar = url);
    		}).catch(() => $$invalidate(4, errors.avatar = 'Sorry your avatar could not be loaded', errors));
    	};

    	const writable_props = [];

    	Object.keys($$props).forEach(key => {
    		if (!~writable_props.indexOf(key) && key.slice(0, 2) !== '$$' && key !== 'slot') console_1$4.warn(`<ProfileSettings> was created with unknown prop '${key}'`);
    	});

    	function input0_input_handler() {
    		set.username = this.value;
    		$$invalidate(2, set);
    	}

    	function input1_change_handler() {
    		set.tfa = this.checked;
    		$$invalidate(2, set);
    	}

    	function input_change_handler() {
    		newAvatar = this.files;
    		$$invalidate(1, newAvatar);
    	}

    	$$self.$capture_state = () => ({
    		Card,
    		onMount,
    		push,
    		Button,
    		user,
    		avatar,
    		newAvatar,
    		uploadAvatarSuccess,
    		set,
    		nameTmp,
    		errors,
    		success,
    		settingsHandler,
    		uploadAvatar
    	});

    	$$self.$inject_state = $$props => {
    		if ('user' in $$props) user = $$props.user;
    		if ('avatar' in $$props) $$invalidate(0, avatar = $$props.avatar);
    		if ('newAvatar' in $$props) $$invalidate(1, newAvatar = $$props.newAvatar);
    		if ('uploadAvatarSuccess' in $$props) uploadAvatarSuccess = $$props.uploadAvatarSuccess;
    		if ('set' in $$props) $$invalidate(2, set = $$props.set);
    		if ('nameTmp' in $$props) $$invalidate(3, nameTmp = $$props.nameTmp);
    		if ('success' in $$props) $$invalidate(5, success = $$props.success);
    	};

    	if ($$props && "$$inject" in $$props) {
    		$$self.$inject_state($$props.$$inject);
    	}

    	return [
    		avatar,
    		newAvatar,
    		set,
    		nameTmp,
    		errors,
    		success,
    		settingsHandler,
    		uploadAvatar,
    		input0_input_handler,
    		input1_change_handler,
    		input_change_handler
    	];
    }

    class ProfileSettings extends SvelteComponentDev {
    	constructor(options) {
    		super(options);
    		init(this, options, instance$9, create_fragment$9, safe_not_equal, {});

    		dispatch_dev("SvelteRegisterComponent", {
    			component: this,
    			tagName: "ProfileSettings",
    			options,
    			id: create_fragment$9.name
    		});
    	}
    }

    /* src/pieces/DisplayAUser.svelte generated by Svelte v3.53.1 */

    const { console: console_1$3 } = globals;
    const file$7 = "src/pieces/DisplayAUser.svelte";

    // (37:0) {:else}
    function create_else_block$2(ctx) {
    	let h2;
    	let t1;
    	let div;
    	let t2;
    	let t3;

    	const block = {
    		c: function create() {
    			h2 = element("h2");
    			h2.textContent = "Sorry";
    			t1 = space();
    			div = element("div");
    			t2 = text("Failed to load user ");
    			t3 = text(/*aUsername*/ ctx[0]);
    			add_location(h2, file$7, 37, 2, 1502);
    			add_location(div, file$7, 38, 2, 1519);
    		},
    		m: function mount(target, anchor) {
    			insert_dev(target, h2, anchor);
    			insert_dev(target, t1, anchor);
    			insert_dev(target, div, anchor);
    			append_dev(div, t2);
    			append_dev(div, t3);
    		},
    		p: function update(ctx, dirty) {
    			if (dirty & /*aUsername*/ 1) set_data_dev(t3, /*aUsername*/ ctx[0]);
    		},
    		i: noop,
    		o: noop,
    		d: function destroy(detaching) {
    			if (detaching) detach_dev(h2);
    			if (detaching) detach_dev(t1);
    			if (detaching) detach_dev(div);
    		}
    	};

    	dispatch_dev("SvelteRegisterBlock", {
    		block,
    		id: create_else_block$2.name,
    		type: "else",
    		source: "(37:0) {:else}",
    		ctx
    	});

    	return block;
    }

    // (34:0) {#if user !== undefined}
    function create_if_block$3(ctx) {
    	let generateuserdisplay;
    	let updating_user;
    	let current;

    	function generateuserdisplay_user_binding(value) {
    		/*generateuserdisplay_user_binding*/ ctx[2](value);
    	}

    	let generateuserdisplay_props = { primary: true };

    	if (/*user*/ ctx[1] !== void 0) {
    		generateuserdisplay_props.user = /*user*/ ctx[1];
    	}

    	generateuserdisplay = new GenerateUserDisplay({
    			props: generateuserdisplay_props,
    			$$inline: true
    		});

    	binding_callbacks.push(() => bind(generateuserdisplay, 'user', generateuserdisplay_user_binding));

    	const block = {
    		c: function create() {
    			create_component(generateuserdisplay.$$.fragment);
    		},
    		m: function mount(target, anchor) {
    			mount_component(generateuserdisplay, target, anchor);
    			current = true;
    		},
    		p: function update(ctx, dirty) {
    			const generateuserdisplay_changes = {};

    			if (!updating_user && dirty & /*user*/ 2) {
    				updating_user = true;
    				generateuserdisplay_changes.user = /*user*/ ctx[1];
    				add_flush_callback(() => updating_user = false);
    			}

    			generateuserdisplay.$set(generateuserdisplay_changes);
    		},
    		i: function intro(local) {
    			if (current) return;
    			transition_in(generateuserdisplay.$$.fragment, local);
    			current = true;
    		},
    		o: function outro(local) {
    			transition_out(generateuserdisplay.$$.fragment, local);
    			current = false;
    		},
    		d: function destroy(detaching) {
    			destroy_component(generateuserdisplay, detaching);
    		}
    	};

    	dispatch_dev("SvelteRegisterBlock", {
    		block,
    		id: create_if_block$3.name,
    		type: "if",
    		source: "(34:0) {#if user !== undefined}",
    		ctx
    	});

    	return block;
    }

    function create_fragment$8(ctx) {
    	let current_block_type_index;
    	let if_block;
    	let if_block_anchor;
    	let current;
    	const if_block_creators = [create_if_block$3, create_else_block$2];
    	const if_blocks = [];

    	function select_block_type(ctx, dirty) {
    		if (/*user*/ ctx[1] !== undefined) return 0;
    		return 1;
    	}

    	current_block_type_index = select_block_type(ctx);
    	if_block = if_blocks[current_block_type_index] = if_block_creators[current_block_type_index](ctx);

    	const block = {
    		c: function create() {
    			if_block.c();
    			if_block_anchor = empty();
    		},
    		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) {
    			if_blocks[current_block_type_index].m(target, anchor);
    			insert_dev(target, if_block_anchor, anchor);
    			current = true;
    		},
    		p: function update(ctx, [dirty]) {
    			let previous_block_index = current_block_type_index;
    			current_block_type_index = select_block_type(ctx);

    			if (current_block_type_index === previous_block_index) {
    				if_blocks[current_block_type_index].p(ctx, dirty);
    			} else {
    				group_outros();

    				transition_out(if_blocks[previous_block_index], 1, 1, () => {
    					if_blocks[previous_block_index] = null;
    				});

    				check_outros();
    				if_block = if_blocks[current_block_type_index];

    				if (!if_block) {
    					if_block = if_blocks[current_block_type_index] = if_block_creators[current_block_type_index](ctx);
    					if_block.c();
    				} else {
    					if_block.p(ctx, dirty);
    				}

    				transition_in(if_block, 1);
    				if_block.m(if_block_anchor.parentNode, if_block_anchor);
    			}
    		},
    		i: function intro(local) {
    			if (current) return;
    			transition_in(if_block);
    			current = true;
    		},
    		o: function outro(local) {
    			transition_out(if_block);
    			current = false;
    		},
    		d: function destroy(detaching) {
    			if_blocks[current_block_type_index].d(detaching);
    			if (detaching) detach_dev(if_block_anchor);
    		}
    	};

    	dispatch_dev("SvelteRegisterBlock", {
    		block,
    		id: create_fragment$8.name,
    		type: "component",
    		source: "",
    		ctx
    	});

    	return block;
    }

    function instance$8($$self, $$props, $$invalidate) {
    	let { $$slots: slots = {}, $$scope } = $$props;
    	validate_slots('DisplayAUser', slots, []);
    	let { aUsername } = $$props;
    	let user;

    	onMount(async () => {
    		console.log('Display aUser username: ' + aUsername);

    		// http://transcendance:8080/api/v2/user?username=NomDuUserATrouver
    		$$invalidate(1, user = await fetch(`http://transcendance:8080/api/v2/user?username=${aUsername}`).then(x => x.json()));
    	}); // console.log('Display a user: ')
    	// console.log({...user})

    	// $: {
    	//   updateUser(aUsername);
    	// }
    	const updateUser = async updatedUser => {
    		console.log('Display Update aUser username: ' + updateUser);

    		// http://transcendance:8080/api/v2/user?username=NomDuUserATrouver
    		$$invalidate(1, user = await fetch(`http://transcendance:8080/api/v2/user?username=${updateUser}`).then(x => x.json()));
    	};

    	$$self.$$.on_mount.push(function () {
    		if (aUsername === undefined && !('aUsername' in $$props || $$self.$$.bound[$$self.$$.props['aUsername']])) {
    			console_1$3.warn("<DisplayAUser> was created without expected prop 'aUsername'");
    		}
    	});

    	const writable_props = ['aUsername'];

    	Object.keys($$props).forEach(key => {
    		if (!~writable_props.indexOf(key) && key.slice(0, 2) !== '$$' && key !== 'slot') console_1$3.warn(`<DisplayAUser> was created with unknown prop '${key}'`);
    	});

    	function generateuserdisplay_user_binding(value) {
    		user = value;
    		$$invalidate(1, user);
    	}

    	$$self.$$set = $$props => {
    		if ('aUsername' in $$props) $$invalidate(0, aUsername = $$props.aUsername);
    	};

    	$$self.$capture_state = () => ({
    		onMount,
    		GenerateUserDisplay,
    		aUsername,
    		user,
    		updateUser
    	});

    	$$self.$inject_state = $$props => {
    		if ('aUsername' in $$props) $$invalidate(0, aUsername = $$props.aUsername);
    		if ('user' in $$props) $$invalidate(1, user = $$props.user);
    	};

    	if ($$props && "$$inject" in $$props) {
    		$$self.$inject_state($$props.$$inject);
    	}

    	return [aUsername, user, generateuserdisplay_user_binding];
    }

    class DisplayAUser extends SvelteComponentDev {
    	constructor(options) {
    		super(options);
    		init(this, options, instance$8, create_fragment$8, safe_not_equal, { aUsername: 0 });

    		dispatch_dev("SvelteRegisterComponent", {
    			component: this,
    			tagName: "DisplayAUser",
    			options,
    			id: create_fragment$8.name
    		});
    	}

    	get aUsername() {
    		throw new Error("<DisplayAUser>: Props cannot be read directly from the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
    	}

    	set aUsername(value) {
    		throw new Error("<DisplayAUser>: Props cannot be set directly on the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
    	}
    }

    /* src/pages/profile/ProfileFriends.svelte generated by Svelte v3.53.1 */
    const file$6 = "src/pages/profile/ProfileFriends.svelte";

    function get_each_context(ctx, list, i) {
    	const child_ctx = ctx.slice();
    	child_ctx[17] = list[i];
    	return child_ctx;
    }

    // (112:4) {:else}
    function create_else_block$1(ctx) {
    	let each_1_anchor;
    	let each_value = /*allUsers*/ ctx[0];
    	validate_each_argument(each_value);
    	let each_blocks = [];

    	for (let i = 0; i < each_value.length; i += 1) {
    		each_blocks[i] = create_each_block(get_each_context(ctx, each_value, i));
    	}

    	const block = {
    		c: function create() {
    			for (let i = 0; i < each_blocks.length; i += 1) {
    				each_blocks[i].c();
    			}

    			each_1_anchor = empty();
    		},
    		m: function mount(target, anchor) {
    			for (let i = 0; i < each_blocks.length; i += 1) {
    				each_blocks[i].m(target, anchor);
    			}

    			insert_dev(target, each_1_anchor, anchor);
    		},
    		p: function update(ctx, dirty) {
    			if (dirty & /*allUsers, viewAUser*/ 9) {
    				each_value = /*allUsers*/ ctx[0];
    				validate_each_argument(each_value);
    				let i;

    				for (i = 0; i < each_value.length; i += 1) {
    					const child_ctx = get_each_context(ctx, each_value, i);

    					if (each_blocks[i]) {
    						each_blocks[i].p(child_ctx, dirty);
    					} else {
    						each_blocks[i] = create_each_block(child_ctx);
    						each_blocks[i].c();
    						each_blocks[i].m(each_1_anchor.parentNode, each_1_anchor);
    					}
    				}

    				for (; i < each_blocks.length; i += 1) {
    					each_blocks[i].d(1);
    				}

    				each_blocks.length = each_value.length;
    			}
    		},
    		d: function destroy(detaching) {
    			destroy_each(each_blocks, detaching);
    			if (detaching) detach_dev(each_1_anchor);
    		}
    	};

    	dispatch_dev("SvelteRegisterBlock", {
    		block,
    		id: create_else_block$1.name,
    		type: "else",
    		source: "(112:4) {:else}",
    		ctx
    	});

    	return block;
    }

    // (110:4) {#if allUsers === undefined}
    function create_if_block_1(ctx) {
    	let div;

    	const block = {
    		c: function create() {
    			div = element("div");
    			div.textContent = "Failed to load all users";
    			attr_dev(div, "class", "error svelte-55f7si");
    			add_location(div, file$6, 110, 6, 3972);
    		},
    		m: function mount(target, anchor) {
    			insert_dev(target, div, anchor);
    		},
    		p: noop,
    		d: function destroy(detaching) {
    			if (detaching) detach_dev(div);
    		}
    	};

    	dispatch_dev("SvelteRegisterBlock", {
    		block,
    		id: create_if_block_1.name,
    		type: "if",
    		source: "(110:4) {#if allUsers === undefined}",
    		ctx
    	});

    	return block;
    }

    // (119:6) {#each allUsers as aUser }
    function create_each_block(ctx) {
    	let div0;
    	let t0_value = /*aUser*/ ctx[17].username + "";
    	let t0;
    	let t1;
    	let div1;
    	let t2_value = /*aUser*/ ctx[17].status + "";
    	let t2;
    	let t3;
    	let br;
    	let mounted;
    	let dispose;

    	function click_handler() {
    		return /*click_handler*/ ctx[4](/*aUser*/ ctx[17]);
    	}

    	const block = {
    		c: function create() {
    			div0 = element("div");
    			t0 = text(t0_value);
    			t1 = space();
    			div1 = element("div");
    			t2 = text(t2_value);
    			t3 = space();
    			br = element("br");
    			attr_dev(div0, "class", "a-user svelte-55f7si");
    			add_location(div0, file$6, 120, 8, 4506);
    			attr_dev(div1, "class", "status a-user svelte-55f7si");
    			add_location(div1, file$6, 124, 8, 4775);
    			add_location(br, file$6, 125, 8, 4831);
    		},
    		m: function mount(target, anchor) {
    			insert_dev(target, div0, anchor);
    			append_dev(div0, t0);
    			insert_dev(target, t1, anchor);
    			insert_dev(target, div1, anchor);
    			append_dev(div1, t2);
    			insert_dev(target, t3, anchor);
    			insert_dev(target, br, anchor);

    			if (!mounted) {
    				dispose = listen_dev(div0, "click", click_handler, false, false, false);
    				mounted = true;
    			}
    		},
    		p: function update(new_ctx, dirty) {
    			ctx = new_ctx;
    			if (dirty & /*allUsers*/ 1 && t0_value !== (t0_value = /*aUser*/ ctx[17].username + "")) set_data_dev(t0, t0_value);
    			if (dirty & /*allUsers*/ 1 && t2_value !== (t2_value = /*aUser*/ ctx[17].status + "")) set_data_dev(t2, t2_value);
    		},
    		d: function destroy(detaching) {
    			if (detaching) detach_dev(div0);
    			if (detaching) detach_dev(t1);
    			if (detaching) detach_dev(div1);
    			if (detaching) detach_dev(t3);
    			if (detaching) detach_dev(br);
    			mounted = false;
    			dispose();
    		}
    	};

    	dispatch_dev("SvelteRegisterBlock", {
    		block,
    		id: create_each_block.name,
    		type: "each",
    		source: "(119:6) {#each allUsers as aUser }",
    		ctx
    	});

    	return block;
    }

    // (141:4) {#if userBeingViewed}
    function create_if_block$2(ctx) {
    	let div;
    	let t0_value = /*userBeingViewed*/ ctx[1].username + "";
    	let t0;
    	let t1;
    	let displayauser;
    	let t2;
    	let button;
    	let current;

    	displayauser = new DisplayAUser({
    			props: {
    				aUsername: /*userBeingViewed*/ ctx[1].username
    			},
    			$$inline: true
    		});

    	button = new Button({
    			props: {
    				type: "secondary",
    				$$slots: { default: [create_default_slot] },
    				$$scope: { ctx }
    			},
    			$$inline: true
    		});

    	button.$on("click", /*click_handler_1*/ ctx[5]);

    	const block = {
    		c: function create() {
    			div = element("div");
    			t0 = text(t0_value);
    			t1 = space();
    			create_component(displayauser.$$.fragment);
    			t2 = space();
    			create_component(button.$$.fragment);
    			add_location(div, file$6, 141, 6, 5200);
    		},
    		m: function mount(target, anchor) {
    			insert_dev(target, div, anchor);
    			append_dev(div, t0);
    			insert_dev(target, t1, anchor);
    			mount_component(displayauser, target, anchor);
    			insert_dev(target, t2, anchor);
    			mount_component(button, target, anchor);
    			current = true;
    		},
    		p: function update(ctx, dirty) {
    			if ((!current || dirty & /*userBeingViewed*/ 2) && t0_value !== (t0_value = /*userBeingViewed*/ ctx[1].username + "")) set_data_dev(t0, t0_value);
    			const displayauser_changes = {};
    			if (dirty & /*userBeingViewed*/ 2) displayauser_changes.aUsername = /*userBeingViewed*/ ctx[1].username;
    			displayauser.$set(displayauser_changes);
    			const button_changes = {};

    			if (dirty & /*$$scope*/ 1048576) {
    				button_changes.$$scope = { dirty, ctx };
    			}

    			button.$set(button_changes);
    		},
    		i: function intro(local) {
    			if (current) return;
    			transition_in(displayauser.$$.fragment, local);
    			transition_in(button.$$.fragment, local);
    			current = true;
    		},
    		o: function outro(local) {
    			transition_out(displayauser.$$.fragment, local);
    			transition_out(button.$$.fragment, local);
    			current = false;
    		},
    		d: function destroy(detaching) {
    			if (detaching) detach_dev(div);
    			if (detaching) detach_dev(t1);
    			destroy_component(displayauser, detaching);
    			if (detaching) detach_dev(t2);
    			destroy_component(button, detaching);
    		}
    	};

    	dispatch_dev("SvelteRegisterBlock", {
    		block,
    		id: create_if_block$2.name,
    		type: "if",
    		source: "(141:4) {#if userBeingViewed}",
    		ctx
    	});

    	return block;
    }

    // (146:6) <Button type="secondary" on:click={() => sendFriendRequest(userBeingViewed.username)}>
    function create_default_slot(ctx) {
    	let t;

    	const block = {
    		c: function create() {
    			t = text("Add Friend");
    		},
    		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.name,
    		type: "slot",
    		source: "(146:6) <Button type=\\\"secondary\\\" on:click={() => sendFriendRequest(userBeingViewed.username)}>",
    		ctx
    	});

    	return block;
    }

    function create_fragment$7(ctx) {
    	let div2;
    	let div0;
    	let h3;
    	let t1;
    	let t2;
    	let div1;
    	let h1;
    	let t4;
    	let current;

    	function select_block_type(ctx, dirty) {
    		if (/*allUsers*/ ctx[0] === undefined) return create_if_block_1;
    		return create_else_block$1;
    	}

    	let current_block_type = select_block_type(ctx);
    	let if_block0 = current_block_type(ctx);
    	let if_block1 = /*userBeingViewed*/ ctx[1] && create_if_block$2(ctx);

    	const block = {
    		c: function create() {
    			div2 = element("div");
    			div0 = element("div");
    			h3 = element("h3");
    			h3.textContent = "All Users";
    			t1 = space();
    			if_block0.c();
    			t2 = space();
    			div1 = element("div");
    			h1 = element("h1");
    			h1.textContent = "Main Display";
    			t4 = space();
    			if (if_block1) if_block1.c();
    			add_location(h3, file$6, 108, 4, 3914);
    			attr_dev(div0, "class", "all-users-sidebar svelte-55f7si");
    			add_location(div0, file$6, 107, 2, 3878);
    			add_location(h1, file$6, 134, 4, 4906);
    			attr_dev(div1, "class", "main-display svelte-55f7si");
    			add_location(div1, file$6, 132, 2, 4874);
    			attr_dev(div2, "class", "top-grid svelte-55f7si");
    			add_location(div2, file$6, 105, 0, 3852);
    		},
    		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) {
    			insert_dev(target, div2, anchor);
    			append_dev(div2, div0);
    			append_dev(div0, h3);
    			append_dev(div0, t1);
    			if_block0.m(div0, null);
    			append_dev(div2, t2);
    			append_dev(div2, div1);
    			append_dev(div1, h1);
    			append_dev(div1, t4);
    			if (if_block1) if_block1.m(div1, null);
    			current = true;
    		},
    		p: function update(ctx, [dirty]) {
    			if (current_block_type === (current_block_type = select_block_type(ctx)) && if_block0) {
    				if_block0.p(ctx, dirty);
    			} else {
    				if_block0.d(1);
    				if_block0 = current_block_type(ctx);

    				if (if_block0) {
    					if_block0.c();
    					if_block0.m(div0, null);
    				}
    			}

    			if (/*userBeingViewed*/ ctx[1]) {
    				if (if_block1) {
    					if_block1.p(ctx, dirty);

    					if (dirty & /*userBeingViewed*/ 2) {
    						transition_in(if_block1, 1);
    					}
    				} else {
    					if_block1 = create_if_block$2(ctx);
    					if_block1.c();
    					transition_in(if_block1, 1);
    					if_block1.m(div1, null);
    				}
    			} else if (if_block1) {
    				group_outros();

    				transition_out(if_block1, 1, 1, () => {
    					if_block1 = null;
    				});

    				check_outros();
    			}
    		},
    		i: function intro(local) {
    			if (current) return;
    			transition_in(if_block1);
    			current = true;
    		},
    		o: function outro(local) {
    			transition_out(if_block1);
    			current = false;
    		},
    		d: function destroy(detaching) {
    			if (detaching) detach_dev(div2);
    			if_block0.d();
    			if (if_block1) if_block1.d();
    		}
    	};

    	dispatch_dev("SvelteRegisterBlock", {
    		block,
    		id: create_fragment$7.name,
    		type: "component",
    		source: "",
    		ctx
    	});

    	return block;
    }

    function instance$7($$self, $$props, $$invalidate) {
    	let { $$slots: slots = {}, $$scope } = $$props;
    	validate_slots('ProfileFriends', slots, []);
    	let errors = { friendRequest: '' };
    	let set = { friendUsername: '', friendId: Number };
    	let user;
    	let allUsers;
    	let myFriends;
    	let requestsMade, requestsRecieved;
    	let userBeingViewed;

    	onMount(async () => {
    		// yea no idea what
    		// i mean do i fetch user? i will for now
    		user = await fetch('http://transcendance:8080/api/v2/user').then(x => x.json());

    		// userBeingViewed = user;
    		// console.log('user is ')
    		// console.log(user)
    		// console.log(user.username)
    		myFriends = await fetch("http://transcendance:8080/api/v2/network/myfriends").then(x => x.json());

    		// console.log('my friends')
    		// console.log(myFriends)
    		requestsMade = await fetch('http://transcendance:8080/api/v2/network/pending').then(x => x.json());

    		// console.log('Requests pending ');
    		// console.log(requestsMade);
    		requestsRecieved = await fetch('http://transcendance:8080/api/v2/network/received').then(x => x.json());

    		// console.log('Requests received ');
    		// console.log(requestsRecieved);
    		$$invalidate(0, allUsers = await fetch('http://transcendance:8080/api/v2/user/all').then(x => x.json()));
    	}); // console.log('got all users ' + allUsers)

    	const displayAllUsers = async () => {
    		$$invalidate(0, allUsers = await fetch('http://transcendance:8080/api/v2/user/all').then(x => x.json()));
    	}; // console.log('got all users ' + allUsers)

    	const displayAllFriends = async () => {
    		myFriends = await fetch('http://transcendance:8080/api/v2/network/myfriends').then(x => x.json());
    	}; // console.log('got all friends ' + allFriends)

    	const displayRequestsMade = async () => {
    		requestsMade = await fetch('http://transcendance:8080/api/v2/network/pending').then(x => x.json());
    	}; // console.log('got requests made ' + requestsMade)

    	let sentFriendRequest;

    	const sendFriendRequest = async potentialFriendUsername => {
    		set.friendUsername = '';
    		errors.friendRequest = '';
    		let valid = false;

    		if (potentialFriendUsername === user.username) {
    			errors.friendRequest = "You can't friend yourself.";
    			valid = false;
    		} else {
    			set.friendUsername = potentialFriendUsername;
    			valid = true;
    		}

    		if (valid) {
    			sentFriendRequest = await fetch("http://transcendance:8080/api/v2/network/myfriends", {
    				method: "POST",
    				headers: { 'Content-Type': 'application/json' },
    				body: JSON.stringify({
    					"receiverUsername": set.friendUsername,
    					"status": "R"
    				})
    			}).then(x => x.json());
    		}
    	};

    	// let sendUsername;
    	const viewAUser = async aUser => {
    		$$invalidate(1, userBeingViewed = aUser);
    	}; // sendUsername = userBeingViewed.username;
    	// prolly like fetch if you're friends or not?
    	// GET http://transcendance:8080/api/v2/networks/myfriends?username=aUser but i need to make that as long as Cherif
    	// doesn't have a better option

    	// like i want this thing to return the Friendship ID ideally
    	const blockAUser = async friendshipId => {
    		
    	};

    	const writable_props = [];

    	Object.keys($$props).forEach(key => {
    		if (!~writable_props.indexOf(key) && key.slice(0, 2) !== '$$' && key !== 'slot') console.warn(`<ProfileFriends> was created with unknown prop '${key}'`);
    	});

    	const click_handler = aUser => viewAUser(aUser);
    	const click_handler_1 = () => sendFriendRequest(userBeingViewed.username);

    	$$self.$capture_state = () => ({
    		onMount,
    		Button,
    		DisplayAUser,
    		errors,
    		set,
    		user,
    		allUsers,
    		myFriends,
    		requestsMade,
    		requestsRecieved,
    		userBeingViewed,
    		displayAllUsers,
    		displayAllFriends,
    		displayRequestsMade,
    		sentFriendRequest,
    		sendFriendRequest,
    		viewAUser,
    		blockAUser
    	});

    	$$self.$inject_state = $$props => {
    		if ('errors' in $$props) errors = $$props.errors;
    		if ('set' in $$props) set = $$props.set;
    		if ('user' in $$props) user = $$props.user;
    		if ('allUsers' in $$props) $$invalidate(0, allUsers = $$props.allUsers);
    		if ('myFriends' in $$props) myFriends = $$props.myFriends;
    		if ('requestsMade' in $$props) requestsMade = $$props.requestsMade;
    		if ('requestsRecieved' in $$props) requestsRecieved = $$props.requestsRecieved;
    		if ('userBeingViewed' in $$props) $$invalidate(1, userBeingViewed = $$props.userBeingViewed);
    		if ('sentFriendRequest' in $$props) sentFriendRequest = $$props.sentFriendRequest;
    	};

    	if ($$props && "$$inject" in $$props) {
    		$$self.$inject_state($$props.$$inject);
    	}

    	return [
    		allUsers,
    		userBeingViewed,
    		sendFriendRequest,
    		viewAUser,
    		click_handler,
    		click_handler_1
    	];
    }

    class ProfileFriends extends SvelteComponentDev {
    	constructor(options) {
    		super(options);
    		init(this, options, instance$7, create_fragment$7, safe_not_equal, {});

    		dispatch_dev("SvelteRegisterComponent", {
    			component: this,
    			tagName: "ProfileFriends",
    			options,
    			id: create_fragment$7.name
    		});
    	}
    }

    // establishing the prefix here very clearly so we can have a coherent repeatable structure
    const prefix = '/profile';

    const profileRoutes = {
      '/': ProfileDisplay,
      '/settings': ProfileSettings,
      '/friends': ProfileFriends,
      '*': NotFound
    };

    // I think the conditions of access like are you authenticated work best when they are on the parent routes not the nested routes cuz i don't want my header showing up

    // export const profileRoutes = {
    //   '/': wrap({
    //     component: ProfileDisplay,
    //     conditions: [
    //       (detail) => {
    //         const { fortyTwo, tfa } = get(loginStatus);
    //         console.log(fortyTwo);
    //         console.log(tfa);
    //         console.log('in Profile Display');
    //         // return true;
    //         return (fortyTwo && tfa);
    //       }
    //     ]
    //   }),
    //   '/settings': wrap({
    //     component: ProfileSettings,
    //     conditions: [
    //       (detail) => {
    //         const { fortyTwo, tfa } = get(loginStatus);
    //         // console.log(fortyTwo);
    //         // console.log(tfa);
    //         // return true;
    //         return (fortyTwo && tfa);
    //       }
    //     ]
    //   }),
    //   '*': NotFound
    // };

    // what if i did /#/profile/:id for like not the user? and then based on that did a fetch?

    /* src/pages/profile/ProfilePage.svelte generated by Svelte v3.53.1 */
    const file$5 = "src/pages/profile/ProfilePage.svelte";

    function create_fragment$6(ctx) {
    	let header;
    	let t;
    	let div;
    	let router;
    	let current;
    	header = new Header({ $$inline: true });

    	router = new Router({
    			props: { routes: profileRoutes, prefix },
    			$$inline: true
    		});

    	const block = {
    		c: function create() {
    			create_component(header.$$.fragment);
    			t = space();
    			div = element("div");
    			create_component(router.$$.fragment);
    			add_location(div, file$5, 15, 0, 618);
    		},
    		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(header, target, anchor);
    			insert_dev(target, t, anchor);
    			insert_dev(target, div, anchor);
    			mount_component(router, div, null);
    			current = true;
    		},
    		p: noop,
    		i: function intro(local) {
    			if (current) return;
    			transition_in(header.$$.fragment, local);
    			transition_in(router.$$.fragment, local);
    			current = true;
    		},
    		o: function outro(local) {
    			transition_out(header.$$.fragment, local);
    			transition_out(router.$$.fragment, local);
    			current = false;
    		},
    		d: function destroy(detaching) {
    			destroy_component(header, detaching);
    			if (detaching) detach_dev(t);
    			if (detaching) detach_dev(div);
    			destroy_component(router);
    		}
    	};

    	dispatch_dev("SvelteRegisterBlock", {
    		block,
    		id: create_fragment$6.name,
    		type: "component",
    		source: "",
    		ctx
    	});

    	return block;
    }

    function instance$6($$self, $$props, $$invalidate) {
    	let { $$slots: slots = {}, $$scope } = $$props;
    	validate_slots('ProfilePage', slots, []);
    	const writable_props = [];

    	Object.keys($$props).forEach(key => {
    		if (!~writable_props.indexOf(key) && key.slice(0, 2) !== '$$' && key !== 'slot') console.warn(`<ProfilePage> was created with unknown prop '${key}'`);
    	});

    	$$self.$capture_state = () => ({ Header, Router, profileRoutes, prefix });
    	return [];
    }

    class ProfilePage extends SvelteComponentDev {
    	constructor(options) {
    		super(options);
    		init(this, options, instance$6, create_fragment$6, safe_not_equal, {});

    		dispatch_dev("SvelteRegisterComponent", {
    			component: this,
    			tagName: "ProfilePage",
    			options,
    			id: create_fragment$6.name
    		});
    	}
    }

    /* src/pieces/Canvas.svelte generated by Svelte v3.53.1 */
    const file$4 = "src/pieces/Canvas.svelte";

    function create_fragment$5(ctx) {
    	let canvas_1;

    	const block = {
    		c: function create() {
    			canvas_1 = element("canvas");
    			attr_dev(canvas_1, "width", window.innerWidth);
    			attr_dev(canvas_1, "height", window.innerHeight);
    			attr_dev(canvas_1, "class", "svelte-1bstsd0");
    			add_location(canvas_1, file$4, 76, 0, 2948);
    		},
    		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) {
    			insert_dev(target, canvas_1, anchor);
    			/*canvas_1_binding*/ ctx[1](canvas_1);
    		},
    		p: noop,
    		i: noop,
    		o: noop,
    		d: function destroy(detaching) {
    			if (detaching) detach_dev(canvas_1);
    			/*canvas_1_binding*/ ctx[1](null);
    		}
    	};

    	dispatch_dev("SvelteRegisterBlock", {
    		block,
    		id: create_fragment$5.name,
    		type: "component",
    		source: "",
    		ctx
    	});

    	return block;
    }

    function instance$5($$self, $$props, $$invalidate) {
    	let scaleRatio;
    	let nPotoatoRows;
    	let nPotoatoCols;
    	let { $$slots: slots = {}, $$scope } = $$props;
    	validate_slots('Canvas', slots, []);
    	let canvas;

    	// let img;
    	let loaded = false;

    	// i feel like they told me not to do this, new Image(), isn't there another way?
    	// never mind they do seem to do this shit...
    	// no idea if this should be in onMount...
    	const img = new Image();

    	img.src = 'img/potato_logo.png';

    	img.onload = () => {
    		loaded = true;
    	}; // not sure if i'll use this...

    	// $: spacing = (canvas.height - (img.height / scaleRatio * (nPotoatoRows - 1) )) / nPotoatoRows;
    	// apparently i might need to move all my reactive statements outside the onMount... not sure why...
    	onMount(() => {
    		// in this on mount we will set the canvas and the img
    		const ctx = canvas.getContext('2d');

    		// let frame = requestAnimationFrame(loop);
    		ctx.width = window.innerWidth;

    		ctx.height = window.innerHeight;

    		// console.log(nPotoatoCols);
    		// img = fetch('img/potato_logo.png');
    		// Moving the IMG stuff from her out of mount
    		// let nPotoatoRows = 4;
    		// $: nPotoatoRows = Math.floor(canvas.height / 200);
    		let spacing = (canvas.height - img.height / scaleRatio * (nPotoatoRows - 1)) / nPotoatoRows;

    		// let startX = spacing;
    		// let startY = spacing;
    		// let startX = 0;
    		// let startY = 0;
    		let startX = -(spacing * 2.5);

    		let startY = -(spacing * 2.5);
    		let x = startX;
    		let y = startY;
    		let frame = requestAnimationFrame(loop);

    		// i don't think i need t...
    		function loop(t) {
    			// yea ok a loop in a loop in a loop, horrible idea...
    			ctx.clearRect(0, 0, canvas.width, canvas.height);

    			// this has to be at the end, no?
    			frame = requestAnimationFrame(loop);

    			// if (x > 900) {
    			//   x = startX;
    			//   y = startY;
    			// }
    			// else {
    			//   x += dx;
    			//   y += dy;
    			// }
    			for (let i = 0; i < 20; i++) {
    				for (let j = 0; j < 10; j++) {
    					// ctx.drawImage(img, x + (i * spacing * 2), y + (j * spacing), img.width / scaleRatio, img.height / scaleRatio);
    					ctx.drawImage(img, x + i * spacing, y + j * spacing, img.width / scaleRatio, img.height / scaleRatio);
    				}
    			}
    		}

    		return () => {
    			cancelAnimationFrame(frame);
    		};
    	});

    	const writable_props = [];

    	Object.keys($$props).forEach(key => {
    		if (!~writable_props.indexOf(key) && key.slice(0, 2) !== '$$' && key !== 'slot') console.warn(`<Canvas> was created with unknown prop '${key}'`);
    	});

    	function canvas_1_binding($$value) {
    		binding_callbacks[$$value ? 'unshift' : 'push'](() => {
    			canvas = $$value;
    			$$invalidate(0, canvas);
    		});
    	}

    	$$self.$capture_state = () => ({
    		onMount,
    		canvas,
    		loaded,
    		img,
    		scaleRatio,
    		nPotoatoRows,
    		nPotoatoCols
    	});

    	$$self.$inject_state = $$props => {
    		if ('canvas' in $$props) $$invalidate(0, canvas = $$props.canvas);
    		if ('loaded' in $$props) loaded = $$props.loaded;
    		if ('scaleRatio' in $$props) scaleRatio = $$props.scaleRatio;
    		if ('nPotoatoRows' in $$props) nPotoatoRows = $$props.nPotoatoRows;
    		if ('nPotoatoCols' in $$props) nPotoatoCols = $$props.nPotoatoCols;
    	};

    	if ($$props && "$$inject" in $$props) {
    		$$self.$inject_state($$props.$$inject);
    	}

    	scaleRatio = 30;
    	nPotoatoRows = Math.floor(window.innerHeight / 200);
    	nPotoatoCols = Math.floor(window.innerWidth / 200);
    	return [canvas, canvas_1_binding];
    }

    class Canvas extends SvelteComponentDev {
    	constructor(options) {
    		super(options);
    		init(this, options, instance$5, create_fragment$5, safe_not_equal, {});

    		dispatch_dev("SvelteRegisterComponent", {
    			component: this,
    			tagName: "Canvas",
    			options,
    			id: create_fragment$5.name
    		});
    	}
    }

    /* src/pages/SplashPage.svelte generated by Svelte v3.53.1 */

    const { console: console_1$2 } = globals;
    const file$3 = "src/pages/SplashPage.svelte";

    // (47:4) {:else}
    function create_else_block(ctx) {
    	let div;
    	let mounted;
    	let dispose;

    	const block = {
    		c: function create() {
    			div = element("div");
    			div.textContent = "Login";
    			attr_dev(div, "class", "svelte-7t4byu");
    			add_location(div, file$3, 47, 6, 1855);
    		},
    		m: function mount(target, anchor) {
    			insert_dev(target, div, anchor);

    			if (!mounted) {
    				dispose = listen_dev(div, "click", /*login*/ ctx[1], false, false, false);
    				mounted = true;
    			}
    		},
    		p: noop,
    		d: function destroy(detaching) {
    			if (detaching) detach_dev(div);
    			mounted = false;
    			dispose();
    		}
    	};

    	dispatch_dev("SvelteRegisterBlock", {
    		block,
    		id: create_else_block.name,
    		type: "else",
    		source: "(47:4) {:else}",
    		ctx
    	});

    	return block;
    }

    // (44:4) {#if user && user.username}
    function create_if_block$1(ctx) {
    	let div0;
    	let t1;
    	let div1;
    	let mounted;
    	let dispose;

    	const block = {
    		c: function create() {
    			div0 = element("div");
    			div0.textContent = "Profile";
    			t1 = space();
    			div1 = element("div");
    			div1.textContent = "Logout";
    			attr_dev(div0, "class", "svelte-7t4byu");
    			add_location(div0, file$3, 44, 6, 1738);
    			attr_dev(div1, "class", "svelte-7t4byu");
    			add_location(div1, file$3, 45, 6, 1801);
    		},
    		m: function mount(target, anchor) {
    			insert_dev(target, div0, anchor);
    			insert_dev(target, t1, anchor);
    			insert_dev(target, div1, anchor);

    			if (!mounted) {
    				dispose = [
    					listen_dev(div0, "click", /*click_handler*/ ctx[3], false, false, false),
    					listen_dev(div1, "click", /*logout*/ ctx[2], false, false, false)
    				];

    				mounted = true;
    			}
    		},
    		p: noop,
    		d: function destroy(detaching) {
    			if (detaching) detach_dev(div0);
    			if (detaching) detach_dev(t1);
    			if (detaching) detach_dev(div1);
    			mounted = false;
    			run_all(dispose);
    		}
    	};

    	dispatch_dev("SvelteRegisterBlock", {
    		block,
    		id: create_if_block$1.name,
    		type: "if",
    		source: "(44:4) {#if user && user.username}",
    		ctx
    	});

    	return block;
    }

    function create_fragment$4(ctx) {
    	let header;
    	let h1;
    	let t1;
    	let nav;
    	let t2;
    	let h2;
    	let div0;
    	let t4;
    	let div1;
    	let t6;
    	let canvas;
    	let current;

    	function select_block_type(ctx, dirty) {
    		if (/*user*/ ctx[0] && /*user*/ ctx[0].username) return create_if_block$1;
    		return create_else_block;
    	}

    	let current_block_type = select_block_type(ctx);
    	let if_block = current_block_type(ctx);
    	canvas = new Canvas({ $$inline: true });

    	const block = {
    		c: function create() {
    			header = element("header");
    			h1 = element("h1");
    			h1.textContent = "Potato Pong";
    			t1 = space();
    			nav = element("nav");
    			if_block.c();
    			t2 = space();
    			h2 = element("h2");
    			div0 = element("div");
    			div0.textContent = "Welcome to";
    			t4 = space();
    			div1 = element("div");
    			div1.textContent = "Potato Pong";
    			t6 = space();
    			create_component(canvas.$$.fragment);
    			attr_dev(h1, "class", "svelte-7t4byu");
    			add_location(h1, file$3, 40, 2, 1633);
    			attr_dev(nav, "class", "svelte-7t4byu");
    			add_location(nav, file$3, 41, 2, 1656);
    			attr_dev(div0, "class", "svelte-7t4byu");
    			add_location(div0, file$3, 51, 4, 1919);
    			attr_dev(div1, "class", "svelte-7t4byu");
    			add_location(div1, file$3, 52, 4, 1945);
    			attr_dev(h2, "class", "svelte-7t4byu");
    			add_location(h2, file$3, 50, 2, 1910);
    			attr_dev(header, "class", "grid-container svelte-7t4byu");
    			add_location(header, file$3, 39, 0, 1599);
    		},
    		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) {
    			insert_dev(target, header, anchor);
    			append_dev(header, h1);
    			append_dev(header, t1);
    			append_dev(header, nav);
    			if_block.m(nav, null);
    			append_dev(header, t2);
    			append_dev(header, h2);
    			append_dev(h2, div0);
    			append_dev(h2, t4);
    			append_dev(h2, div1);
    			insert_dev(target, t6, anchor);
    			mount_component(canvas, target, anchor);
    			current = true;
    		},
    		p: function update(ctx, [dirty]) {
    			if (current_block_type === (current_block_type = select_block_type(ctx)) && if_block) {
    				if_block.p(ctx, dirty);
    			} else {
    				if_block.d(1);
    				if_block = current_block_type(ctx);

    				if (if_block) {
    					if_block.c();
    					if_block.m(nav, null);
    				}
    			}
    		},
    		i: function intro(local) {
    			if (current) return;
    			transition_in(canvas.$$.fragment, local);
    			current = true;
    		},
    		o: function outro(local) {
    			transition_out(canvas.$$.fragment, local);
    			current = false;
    		},
    		d: function destroy(detaching) {
    			if (detaching) detach_dev(header);
    			if_block.d();
    			if (detaching) detach_dev(t6);
    			destroy_component(canvas, detaching);
    		}
    	};

    	dispatch_dev("SvelteRegisterBlock", {
    		block,
    		id: create_fragment$4.name,
    		type: "component",
    		source: "",
    		ctx
    	});

    	return block;
    }

    function instance$4($$self, $$props, $$invalidate) {
    	let { $$slots: slots = {}, $$scope } = $$props;
    	validate_slots('SplashPage', slots, []);
    	let user;

    	onMount(async () => {
    		$$invalidate(0, user = await fetch('http://transcendance:8080/api/v2/user').then(resp => resp.json()));

    		// i mean i could do a failed to load user or some shit, maybe with a .catch or something? but atm why bother
    		console.log('User var');

    		console.log(user);

    		// if (user && user.statusCode && user.statusCode === 403) {
    		//   console.log('user not logged in')
    		// }
    		// if (user && user.username) {
    		//   console.log('we have a user');
    		// }
    		// user === undefined doesn't work cuz we declared user in the scope of onMount
    		// if (user === undefined) {
    		if (user && user.statusCode && user.statusCode === 403) {
    			console.log('on mount no user, returned status code 403 so logging out of userStore');
    		} // userLogout(); // which i think should delete any previous local storage
    	});

    	const login = async () => {
    		window.location.href = 'http://transcendance:8080/api/v2/auth';
    		console.log('you are now logged in');
    	};

    	// i could prolly put this in it's own compoent, i seem to use it in several places... or maybe just some JS? like no need for html
    	// we could .then( () => replace('/') ) need the func so TS compatible...
    	const logout = async () => {
    		await fetch('http://transcendance:8080/api/v2/auth/logout', { method: 'POST' });
    		$$invalidate(0, user = undefined);
    	};

    	const writable_props = [];

    	Object.keys($$props).forEach(key => {
    		if (!~writable_props.indexOf(key) && key.slice(0, 2) !== '$$' && key !== 'slot') console_1$2.warn(`<SplashPage> was created with unknown prop '${key}'`);
    	});

    	const click_handler = () => push('/profile');

    	$$self.$capture_state = () => ({
    		Canvas,
    		push,
    		onMount,
    		user,
    		login,
    		logout
    	});

    	$$self.$inject_state = $$props => {
    		if ('user' in $$props) $$invalidate(0, user = $$props.user);
    	};

    	if ($$props && "$$inject" in $$props) {
    		$$self.$inject_state($$props.$$inject);
    	}

    	return [user, login, logout, click_handler];
    }

    class SplashPage extends SvelteComponentDev {
    	constructor(options) {
    		super(options);
    		init(this, options, instance$4, create_fragment$4, safe_not_equal, {});

    		dispatch_dev("SvelteRegisterComponent", {
    			component: this,
    			tagName: "SplashPage",
    			options,
    			id: create_fragment$4.name
    		});
    	}
    }

    /* src/pages/TwoFactorAuthentication.svelte generated by Svelte v3.53.1 */

    const { console: console_1$1 } = globals;
    const file$2 = "src/pages/TwoFactorAuthentication.svelte";

    // (67:2) {:catch}
    function create_catch_block(ctx) {
    	let p;

    	const block = {
    		c: function create() {
    			p = element("p");
    			p.textContent = "Unable to get QrCodeImg";
    			add_location(p, file$2, 67, 4, 2000);
    		},
    		m: function mount(target, anchor) {
    			insert_dev(target, p, anchor);
    		},
    		p: noop,
    		d: function destroy(detaching) {
    			if (detaching) detach_dev(p);
    		}
    	};

    	dispatch_dev("SvelteRegisterBlock", {
    		block,
    		id: create_catch_block.name,
    		type: "catch",
    		source: "(67:2) {:catch}",
    		ctx
    	});

    	return block;
    }

    // (54:2) {:then data}
    function create_then_block(ctx) {
    	let img;
    	let img_src_value;
    	let t0;
    	let form;
    	let input;
    	let t1;
    	let button;
    	let t3;
    	let if_block_anchor;
    	let mounted;
    	let dispose;
    	let if_block = /*wrongCode*/ ctx[2] && create_if_block(ctx);

    	const block = {
    		c: function create() {
    			img = element("img");
    			t0 = space();
    			form = element("form");
    			input = element("input");
    			t1 = space();
    			button = element("button");
    			button.textContent = "Send";
    			t3 = space();
    			if (if_block) if_block.c();
    			if_block_anchor = empty();
    			if (!src_url_equal(img.src, img_src_value = /*qrCodeImg*/ ctx[0])) attr_dev(img, "src", img_src_value);
    			attr_dev(img, "alt", "A QRCodeImg you must scan with google authenticator");
    			attr_dev(img, "id", "qrcodeImg");
    			add_location(img, file$2, 55, 4, 1523);
    			attr_dev(input, "id", "code");
    			attr_dev(input, "type", "text");
    			attr_dev(input, "placeholder", "Input Code");
    			attr_dev(input, "class", "svelte-1cznfcz");
    			add_location(input, file$2, 57, 6, 1675);
    			attr_dev(button, "type", "submit");
    			add_location(button, file$2, 58, 6, 1757);
    			attr_dev(form, "class", "svelte-1cznfcz");
    			add_location(form, file$2, 56, 4, 1624);
    		},
    		m: function mount(target, anchor) {
    			insert_dev(target, img, anchor);
    			insert_dev(target, t0, anchor);
    			insert_dev(target, form, anchor);
    			append_dev(form, input);
    			set_input_value(input, /*qrCode*/ ctx[1]);
    			append_dev(form, t1);
    			append_dev(form, button);
    			insert_dev(target, t3, anchor);
    			if (if_block) if_block.m(target, anchor);
    			insert_dev(target, if_block_anchor, anchor);

    			if (!mounted) {
    				dispose = [
    					listen_dev(input, "input", /*input_input_handler*/ ctx[5]),
    					listen_dev(form, "submit", prevent_default(/*submitCode*/ ctx[4]), false, true, false)
    				];

    				mounted = true;
    			}
    		},
    		p: function update(ctx, dirty) {
    			if (dirty & /*qrCodeImg*/ 1 && !src_url_equal(img.src, img_src_value = /*qrCodeImg*/ ctx[0])) {
    				attr_dev(img, "src", img_src_value);
    			}

    			if (dirty & /*qrCode*/ 2 && input.value !== /*qrCode*/ ctx[1]) {
    				set_input_value(input, /*qrCode*/ ctx[1]);
    			}

    			if (/*wrongCode*/ ctx[2]) {
    				if (if_block) {
    					if_block.p(ctx, dirty);
    				} else {
    					if_block = create_if_block(ctx);
    					if_block.c();
    					if_block.m(if_block_anchor.parentNode, if_block_anchor);
    				}
    			} else if (if_block) {
    				if_block.d(1);
    				if_block = null;
    			}
    		},
    		d: function destroy(detaching) {
    			if (detaching) detach_dev(img);
    			if (detaching) detach_dev(t0);
    			if (detaching) detach_dev(form);
    			if (detaching) detach_dev(t3);
    			if (if_block) if_block.d(detaching);
    			if (detaching) detach_dev(if_block_anchor);
    			mounted = false;
    			run_all(dispose);
    		}
    	};

    	dispatch_dev("SvelteRegisterBlock", {
    		block,
    		id: create_then_block.name,
    		type: "then",
    		source: "(54:2) {:then data}",
    		ctx
    	});

    	return block;
    }

    // (61:4) {#if wrongCode}
    function create_if_block(ctx) {
    	let div;
    	let t;

    	const block = {
    		c: function create() {
    			div = element("div");
    			t = text(/*wrongCode*/ ctx[2]);
    			attr_dev(div, "class", "error svelte-1cznfcz");
    			add_location(div, file$2, 62, 6, 1922);
    		},
    		m: function mount(target, anchor) {
    			insert_dev(target, div, anchor);
    			append_dev(div, t);
    		},
    		p: function update(ctx, dirty) {
    			if (dirty & /*wrongCode*/ 4) set_data_dev(t, /*wrongCode*/ ctx[2]);
    		},
    		d: function destroy(detaching) {
    			if (detaching) detach_dev(div);
    		}
    	};

    	dispatch_dev("SvelteRegisterBlock", {
    		block,
    		id: create_if_block.name,
    		type: "if",
    		source: "(61:4) {#if wrongCode}",
    		ctx
    	});

    	return block;
    }

    // (52:25)      <p>Please Wait...</p>   {:then data}
    function create_pending_block(ctx) {
    	let p;

    	const block = {
    		c: function create() {
    			p = element("p");
    			p.textContent = "Please Wait...";
    			add_location(p, file$2, 52, 4, 1437);
    		},
    		m: function mount(target, anchor) {
    			insert_dev(target, p, anchor);
    		},
    		p: noop,
    		d: function destroy(detaching) {
    			if (detaching) detach_dev(p);
    		}
    	};

    	dispatch_dev("SvelteRegisterBlock", {
    		block,
    		id: create_pending_block.name,
    		type: "pending",
    		source: "(52:25)      <p>Please Wait...</p>   {:then data}",
    		ctx
    	});

    	return block;
    }

    function create_fragment$3(ctx) {
    	let main;
    	let h1;
    	let t1;
    	let p;
    	let t3;

    	let info = {
    		ctx,
    		current: null,
    		token: null,
    		hasCatch: true,
    		pending: create_pending_block,
    		then: create_then_block,
    		catch: create_catch_block,
    		value: 6
    	};

    	handle_promise(/*fetchQrCodeImg*/ ctx[3], info);

    	const block = {
    		c: function create() {
    			main = element("main");
    			h1 = element("h1");
    			h1.textContent = "2FA Sign In";
    			t1 = space();
    			p = element("p");
    			p.textContent = "use google authenticator";
    			t3 = space();
    			info.block.c();
    			add_location(h1, file$2, 49, 2, 1352);
    			add_location(p, file$2, 50, 2, 1375);
    			attr_dev(main, "class", "svelte-1cznfcz");
    			add_location(main, file$2, 48, 0, 1343);
    		},
    		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) {
    			insert_dev(target, main, anchor);
    			append_dev(main, h1);
    			append_dev(main, t1);
    			append_dev(main, p);
    			append_dev(main, t3);
    			info.block.m(main, info.anchor = null);
    			info.mount = () => main;
    			info.anchor = null;
    		},
    		p: function update(new_ctx, [dirty]) {
    			ctx = new_ctx;
    			update_await_block_branch(info, ctx, dirty);
    		},
    		i: noop,
    		o: noop,
    		d: function destroy(detaching) {
    			if (detaching) detach_dev(main);
    			info.block.d();
    			info.token = null;
    			info = null;
    		}
    	};

    	dispatch_dev("SvelteRegisterBlock", {
    		block,
    		id: create_fragment$3.name,
    		type: "component",
    		source: "",
    		ctx
    	});

    	return block;
    }

    function instance$3($$self, $$props, $$invalidate) {
    	let { $$slots: slots = {}, $$scope } = $$props;
    	validate_slots('TwoFactorAuthentication', slots, []);
    	let qrCodeImg;
    	let qrCode = "";
    	let wrongCode = "";

    	const fetchQrCodeImg = (async () => {
    		await fetch("http://transcendance:8080/api/v2/auth/2fa/generate", { method: 'POST' }).then(response => {
    			return response.blob();
    		}).then(blob => {
    			const url = URL.createObjectURL(blob);
    			$$invalidate(0, qrCodeImg = url);
    		});
    	})();

    	const submitCode = async () => {
    		const response = await fetch("http://transcendance:8080/api/v2/auth/2fa/check", {
    			method: 'POST',
    			headers: { "Content-Type": "application/json" },
    			body: JSON.stringify({ "twoFaCode": qrCode })
    		});

    		if (response.status === 401) {
    			$$invalidate(1, qrCode = "");
    			$$invalidate(2, wrongCode = `Wrong code`);
    		}

    		if (response.status === 200) {
    			push('/profile');
    			console.log('valid Code for 2FA');
    		}
    	};

    	const writable_props = [];

    	Object.keys($$props).forEach(key => {
    		if (!~writable_props.indexOf(key) && key.slice(0, 2) !== '$$' && key !== 'slot') console_1$1.warn(`<TwoFactorAuthentication> was created with unknown prop '${key}'`);
    	});

    	function input_input_handler() {
    		qrCode = this.value;
    		$$invalidate(1, qrCode);
    	}

    	$$self.$capture_state = () => ({
    		push,
    		qrCodeImg,
    		qrCode,
    		wrongCode,
    		fetchQrCodeImg,
    		submitCode
    	});

    	$$self.$inject_state = $$props => {
    		if ('qrCodeImg' in $$props) $$invalidate(0, qrCodeImg = $$props.qrCodeImg);
    		if ('qrCode' in $$props) $$invalidate(1, qrCode = $$props.qrCode);
    		if ('wrongCode' in $$props) $$invalidate(2, wrongCode = $$props.wrongCode);
    	};

    	if ($$props && "$$inject" in $$props) {
    		$$self.$inject_state($$props.$$inject);
    	}

    	return [qrCodeImg, qrCode, wrongCode, fetchQrCodeImg, submitCode, input_input_handler];
    }

    class TwoFactorAuthentication extends SvelteComponentDev {
    	constructor(options) {
    		super(options);
    		init(this, options, instance$3, create_fragment$3, safe_not_equal, {});

    		dispatch_dev("SvelteRegisterComponent", {
    			component: this,
    			tagName: "TwoFactorAuthentication",
    			options,
    			id: create_fragment$3.name
    		});
    	}
    }

    /* src/pages/UnauthorizedAccessPage.svelte generated by Svelte v3.53.1 */
    const file$1 = "src/pages/UnauthorizedAccessPage.svelte";

    function create_fragment$2(ctx) {
    	let div;
    	let h1;
    	let t1;
    	let button;
    	let mounted;
    	let dispose;

    	const block = {
    		c: function create() {
    			div = element("div");
    			h1 = element("h1");
    			h1.textContent = "You're not supposed to be here...";
    			t1 = space();
    			button = element("button");
    			button.textContent = "Go Home";
    			add_location(h1, file$1, 4, 2, 98);
    			add_location(button, file$1, 5, 2, 143);
    			attr_dev(div, "class", "wrapper svelte-1q8uute");
    			add_location(div, file$1, 3, 0, 74);
    		},
    		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) {
    			insert_dev(target, div, anchor);
    			append_dev(div, h1);
    			append_dev(div, t1);
    			append_dev(div, button);

    			if (!mounted) {
    				dispose = listen_dev(button, "click", /*click_handler*/ ctx[0], false, false, false);
    				mounted = true;
    			}
    		},
    		p: noop,
    		i: noop,
    		o: noop,
    		d: function destroy(detaching) {
    			if (detaching) detach_dev(div);
    			mounted = false;
    			dispose();
    		}
    	};

    	dispatch_dev("SvelteRegisterBlock", {
    		block,
    		id: create_fragment$2.name,
    		type: "component",
    		source: "",
    		ctx
    	});

    	return block;
    }

    function instance$2($$self, $$props, $$invalidate) {
    	let { $$slots: slots = {}, $$scope } = $$props;
    	validate_slots('UnauthorizedAccessPage', slots, []);
    	const writable_props = [];

    	Object.keys($$props).forEach(key => {
    		if (!~writable_props.indexOf(key) && key.slice(0, 2) !== '$$' && key !== 'slot') console.warn(`<UnauthorizedAccessPage> was created with unknown prop '${key}'`);
    	});

    	const click_handler = () => replace('/');
    	$$self.$capture_state = () => ({ replace });
    	return [click_handler];
    }

    class UnauthorizedAccessPage extends SvelteComponentDev {
    	constructor(options) {
    		super(options);
    		init(this, options, instance$2, create_fragment$2, safe_not_equal, {});

    		dispatch_dev("SvelteRegisterComponent", {
    			component: this,
    			tagName: "UnauthorizedAccessPage",
    			options,
    			id: create_fragment$2.name
    		});
    	}
    }

    /* src/pages/TmpTestPage.svelte generated by Svelte v3.53.1 */
    const file = "src/pages/TmpTestPage.svelte";

    function create_fragment$1(ctx) {
    	let div1;
    	let h1;
    	let t1;
    	let button;
    	let t3;
    	let div0;
    	let t4;
    	let mounted;
    	let dispose;

    	const block = {
    		c: function create() {
    			div1 = element("div");
    			h1 = element("h1");
    			h1.textContent = "You made it to Test";
    			t1 = space();
    			button = element("button");
    			button.textContent = "Go Home";
    			t3 = space();
    			div0 = element("div");
    			t4 = text(/*user*/ ctx[0]);
    			add_location(h1, file, 5, 2, 115);
    			add_location(button, file, 6, 2, 146);
    			add_location(div0, file, 7, 2, 206);
    			attr_dev(div1, "class", "wrapper svelte-1q8uute");
    			add_location(div1, file, 4, 0, 91);
    		},
    		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) {
    			insert_dev(target, div1, anchor);
    			append_dev(div1, h1);
    			append_dev(div1, t1);
    			append_dev(div1, button);
    			append_dev(div1, t3);
    			append_dev(div1, div0);
    			append_dev(div0, t4);

    			if (!mounted) {
    				dispose = listen_dev(button, "click", /*click_handler*/ ctx[1], false, false, false);
    				mounted = true;
    			}
    		},
    		p: function update(ctx, [dirty]) {
    			if (dirty & /*user*/ 1) set_data_dev(t4, /*user*/ ctx[0]);
    		},
    		i: noop,
    		o: noop,
    		d: function destroy(detaching) {
    			if (detaching) detach_dev(div1);
    			mounted = false;
    			dispose();
    		}
    	};

    	dispatch_dev("SvelteRegisterBlock", {
    		block,
    		id: create_fragment$1.name,
    		type: "component",
    		source: "",
    		ctx
    	});

    	return block;
    }

    function instance$1($$self, $$props, $$invalidate) {
    	let { $$slots: slots = {}, $$scope } = $$props;
    	validate_slots('TmpTestPage', slots, []);
    	let { user } = $$props;

    	$$self.$$.on_mount.push(function () {
    		if (user === undefined && !('user' in $$props || $$self.$$.bound[$$self.$$.props['user']])) {
    			console.warn("<TmpTestPage> was created without expected prop 'user'");
    		}
    	});

    	const writable_props = ['user'];

    	Object.keys($$props).forEach(key => {
    		if (!~writable_props.indexOf(key) && key.slice(0, 2) !== '$$' && key !== 'slot') console.warn(`<TmpTestPage> was created with unknown prop '${key}'`);
    	});

    	const click_handler = () => replace('/');

    	$$self.$$set = $$props => {
    		if ('user' in $$props) $$invalidate(0, user = $$props.user);
    	};

    	$$self.$capture_state = () => ({ replace, user });

    	$$self.$inject_state = $$props => {
    		if ('user' in $$props) $$invalidate(0, user = $$props.user);
    	};

    	if ($$props && "$$inject" in $$props) {
    		$$self.$inject_state($$props.$$inject);
    	}

    	return [user, click_handler];
    }

    class TmpTestPage extends SvelteComponentDev {
    	constructor(options) {
    		super(options);
    		init(this, options, instance$1, create_fragment$1, safe_not_equal, { user: 0 });

    		dispatch_dev("SvelteRegisterComponent", {
    			component: this,
    			tagName: "TmpTestPage",
    			options,
    			id: create_fragment$1.name
    		});
    	}

    	get user() {
    		throw new Error("<TmpTestPage>: Props cannot be read directly from the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
    	}

    	set user(value) {
    		throw new Error("<TmpTestPage>: Props cannot be set directly on the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
    	}
    }

    //   "/article/:title": Article, // this is how you would do parameters!
    // "/": LoginPage,

    // TMP not using this cuz need to work out how to authentical both 42 and 2FA from the backend

    // export const primaryRoutes = {
    //   '/': SplashPage,
    //   // '/2fa': TwoFactorAuthentication,
    //   '/2fa': wrap({
    //     component: TwoFactorAuthentication,
    //     conditions: [
    //       (detail) => {
    //         // let loggedIn;
    //         // loginStatus.subscribe(value => {
    //        //   loggedIn = value;
    //        // });

    //         const { fortyTwo, tfa } = get(loginStatus);

    //         console.log('condition in /2fa');
    //         // return (loginStatus.fortyTwo && loginStatus.tfa);
    //         // console.log($loginStatus.fortyTwo)
    //         console.log(fortyTwo);
    //         console.log(tfa);
    //         return true;
    //       }
    //     ]
    //   }),
    //   '/profile': wrap({
    //     component: ProfilePage,
    //     conditions: [
    //       (detail) => {
    //         const { fortyTwo, tfa } = get(loginStatus);
    //         // console.log(fortyTwo);
    //         // console.log(tfa);
    //         // return true;
    //         return (fortyTwo && tfa);
    //       }
    //     ]
    //   }),
    //   '/profile/*': wrap({
    //     component: ProfilePage,
    //     conditions: [
    //       (detail) => {
    //         const { fortyTwo, tfa } = get(loginStatus);
    //         // console.log(fortyTwo);
    //         // console.log(tfa);
    //         // return true;
    //         return (fortyTwo && tfa);
    //       }
    //     ]
    //   }),
    //   '/profile': wrap({
    //         // Use a dynamically-loaded component for this
    //         asyncComponent: () => import('./ProfilePage.svelte'),
    //         // Adding one pre-condition that's an async function
    //         conditions: [
    //           async (detail) => {
    //             // Make a network request, which are async operations
    //             const response = await fetch('http://transcendance:8080/api/v2/user')
    //             const data = await response.json()
    //             // Return true to continue loading the component, or false otherwise
    //             if (data.isAdmin) {
    //               return true
    //             }
    //             else {
    //               return false
    //             }
    //           }
    //         ]
    //       }),
    //   '/unauthorized-access': UnauthorizedAccessPage,
    //   '*': NotFound
    // };

    const primaryRoutes = {
      '/': SplashPage,
      '/2fa': TwoFactorAuthentication,
      // '/test': wrap({
      //   component: TestPage,
      //   conditions: [
      //     (detail) => {
      //       const user = get(userStore);  // seems like get(store) is not an option
      //       // // const user = userStore;
      //       // // console.log(fortyTwo);
      //       // // console.log(tfa);
      //       // console.log('in /test what is in user')
      //       // console.log(user)

      //       // you moron $userStore is a Svelte Abreviation, this is .JS, duh
      //       // let user = $userStore;
      //       // let user;
      //       // const unsub = userStore.subscribe(value => {
      //       //   console.log(value);
      //       //   user = value;
      //       // });
      //       console.log('in /test what is in userStore directly')
      //       console.log(user)

      //       // return true;
      //       // obvi this doesn't work cuz skips to true after no user...
      //         // you gotta make the condition the true and the everything else false
      //       // if (user && user.statusCode && user.statusCode === 403)
      //       // if (user && user.username) {
      //       if (user !== null) {
      //         unsub();
      //         return true;
      //       } else {
      //         unsub();
      //         return false;
      //       }
      //     }
      //   ]
      // }),
      '/test': wrap$1({
        component: TmpTestPage,
        conditions: [
          async(detail) => {
            // THIS SHIT TOTALLY WORKS
            // Yea in the end this might be the best thing, like also from a Security point of view
            const user = await fetch('http://transcendance:8080/api/v2/user')
            .then((resp) => resp.json());

            console.log('in /test what is in user');
            console.log(user);

            if (user && user.username)
              return true;
            else
              return false;
          }
        ],
        // props: {
        //   user: user
        // }
      }),
      '/profile': wrap$1({
        component: ProfilePage,
        conditions: [
          async(detail) => {
            const user = await fetch('http://transcendance:8080/api/v2/user')
            .then((resp) => resp.json());

            console.log('in /profile what is in user');
            console.log(user);

            if (user && user.username)
              return true;
            else
              return false;
          }
        ]
      }),
      '/profile/*': wrap$1({
        component: ProfilePage,
        conditions: [
          async(detail) => {
            const user = await fetch('http://transcendance:8080/api/v2/user')
            .then((resp) => resp.json());

            console.log('in /profile/* what is in user');
            console.log(user);

            if (user && user.username)
              return true;
            else
              return false;
          }
        ]
      }),
      // '/game': wrap({
      //   component: ProfilePage,
      //   conditions: [
      //     async(detail) => {
      //       const user = await fetch('http://transcendance:8080/api/v2/user')
      //       .then((resp) => resp.json())

      //       console.log('in /test what is in user')
      //       console.log(user)

      //       if (user && user.username)
      //         return true;
      //       else
      //         return false;
      //     }
      //   ]
      // }),
      // '/spectate': wrap({
      //   component: ProfilePage,
      //   conditions: [
      //     async(detail) => {
      //       const user = await fetch('http://transcendance:8080/api/v2/user')
      //       .then((resp) => resp.json())

      //       console.log('in /test what is in user')
      //       console.log(user)

      //       if (user && user.username)
      //         return true;
      //       else
      //         return false;
      //     }
      //   ]
      // }),
      // '/chat': wrap({
      //   component: ProfilePage,
      //   conditions: [
      //     async(detail) => {
      //       const user = await fetch('http://transcendance:8080/api/v2/user')
      //       .then((resp) => resp.json())

      //       console.log('in /test what is in user')
      //       console.log(user)

      //       if (user && user.username)
      //         return true;
      //       else
      //         return false;
      //     }
      //   ]
      // }),
      '/unauthorized-access': UnauthorizedAccessPage,
      '*': NotFound
    };

    // export const primaryRoutes = {
    //   "/": SplashPage,
    //   "/profile": ProfilePage,
    //   "/game": GamePage,
    //   "/chat": ChatPage,
    //   "*": NotFound
    // };


    // i might need to add /profile/* and such to make the nested routers work

    // ok maybe these need to be in their own files?



    // export const gameRoutes = {
    //   "/": GamePage,
    //   "*": NotFound
    // };

    // export const chatRoutes = {
    //   "/": ChatPage,
    //   "*": NotFound
    // };

    /* src/App.svelte generated by Svelte v3.53.1 */

    const { console: console_1 } = globals;

    function create_fragment(ctx) {
    	let router;
    	let current;

    	router = new Router({
    			props: { routes: primaryRoutes },
    			$$inline: true
    		});

    	router.$on("conditionsFailed", /*conditionsFailed*/ ctx[0]);

    	const block = {
    		c: function create() {
    			create_component(router.$$.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(router, target, anchor);
    			current = true;
    		},
    		p: noop,
    		i: function intro(local) {
    			if (current) return;
    			transition_in(router.$$.fragment, local);
    			current = true;
    		},
    		o: function outro(local) {
    			transition_out(router.$$.fragment, local);
    			current = false;
    		},
    		d: function destroy(detaching) {
    			destroy_component(router, detaching);
    		}
    	};

    	dispatch_dev("SvelteRegisterBlock", {
    		block,
    		id: create_fragment.name,
    		type: "component",
    		source: "",
    		ctx
    	});

    	return block;
    }

    function instance($$self, $$props, $$invalidate) {
    	let { $$slots: slots = {}, $$scope } = $$props;
    	validate_slots('App', slots, []);

    	const conditionsFailed = event => {
    		console.error('conditionsFailed event', event.detail);

    		// i mean i guess i can just leave this in there permanently?
    		replace('/unauthorized-access');
    	};

    	const writable_props = [];

    	Object.keys($$props).forEach(key => {
    		if (!~writable_props.indexOf(key) && key.slice(0, 2) !== '$$' && key !== 'slot') console_1.warn(`<App> was created with unknown prop '${key}'`);
    	});

    	$$self.$capture_state = () => ({
    		Router,
    		replace,
    		primaryRoutes,
    		conditionsFailed
    	});

    	return [conditionsFailed];
    }

    class App extends SvelteComponentDev {
    	constructor(options) {
    		super(options);
    		init(this, options, instance, create_fragment, safe_not_equal, {});

    		dispatch_dev("SvelteRegisterComponent", {
    			component: this,
    			tagName: "App",
    			options,
    			id: create_fragment.name
    		});
    	}
    }

    const app = new App({
        target: document.body,
        props: {
        // name: 'world'
        }
    });

    return app;

})();
//# sourceMappingURL=bundle.js.map
