
(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() { }
    const identity = x => x;
    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;
    }

    const is_client = typeof window !== 'undefined';
    let now = is_client
        ? () => window.performance.now()
        : () => Date.now();
    let raf = is_client ? cb => requestAnimationFrame(cb) : noop;

    const tasks = new Set();
    function run_tasks(now) {
        tasks.forEach(task => {
            if (!task.c(now)) {
                tasks.delete(task);
                task.f();
            }
        });
        if (tasks.size !== 0)
            raf(run_tasks);
    }
    /**
     * Creates a new task that runs on each raf frame
     * until it returns a falsy value or is aborted
     */
    function loop(callback) {
        let task;
        if (tasks.size === 0)
            raf(run_tasks);
        return {
            promise: new Promise(fulfill => {
                tasks.add(task = { c: callback, f: fulfill });
            }),
            abort() {
                tasks.delete(task);
            }
        };
    }
    function append(target, node) {
        target.appendChild(node);
    }
    function get_root_for_style(node) {
        if (!node)
            return document;
        const root = node.getRootNode ? node.getRootNode() : node.ownerDocument;
        if (root && root.host) {
            return root;
        }
        return node.ownerDocument;
    }
    function append_empty_stylesheet(node) {
        const style_element = element('style');
        append_stylesheet(get_root_for_style(node), style_element);
        return style_element.sheet;
    }
    function append_stylesheet(node, style) {
        append(node.head || node, style);
        return style.sheet;
    }
    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$1() {
        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 select_option(select, value) {
        for (let i = 0; i < select.options.length; i += 1) {
            const option = select.options[i];
            if (option.__value === value) {
                option.selected = true;
                return;
            }
        }
        select.selectedIndex = -1; // no option should be selected
    }
    function select_value(select) {
        const selected_option = select.querySelector(':checked') || select.options[0];
        return selected_option && selected_option.__value;
    }
    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;
    }
    class HtmlTag {
        constructor(is_svg = false) {
            this.is_svg = false;
            this.is_svg = is_svg;
            this.e = this.n = null;
        }
        c(html) {
            this.h(html);
        }
        m(html, target, anchor = null) {
            if (!this.e) {
                if (this.is_svg)
                    this.e = svg_element(target.nodeName);
                else
                    this.e = element(target.nodeName);
                this.t = target;
                this.c(html);
            }
            this.i(anchor);
        }
        h(html) {
            this.e.innerHTML = html;
            this.n = Array.from(this.e.childNodes);
        }
        i(anchor) {
            for (let i = 0; i < this.n.length; i += 1) {
                insert(this.t, this.n[i], anchor);
            }
        }
        p(html) {
            this.d();
            this.h(html);
            this.i(this.a);
        }
        d() {
            this.n.forEach(detach);
        }
    }

    // we need to store the information for multiple documents because a Svelte application could also contain iframes
    // https://github.com/sveltejs/svelte/issues/3624
    const managed_styles = new Map();
    let active = 0;
    // https://github.com/darkskyapp/string-hash/blob/master/index.js
    function hash(str) {
        let hash = 5381;
        let i = str.length;
        while (i--)
            hash = ((hash << 5) - hash) ^ str.charCodeAt(i);
        return hash >>> 0;
    }
    function create_style_information(doc, node) {
        const info = { stylesheet: append_empty_stylesheet(node), rules: {} };
        managed_styles.set(doc, info);
        return info;
    }
    function create_rule(node, a, b, duration, delay, ease, fn, uid = 0) {
        const step = 16.666 / duration;
        let keyframes = '{\n';
        for (let p = 0; p <= 1; p += step) {
            const t = a + (b - a) * ease(p);
            keyframes += p * 100 + `%{${fn(t, 1 - t)}}\n`;
        }
        const rule = keyframes + `100% {${fn(b, 1 - b)}}\n}`;
        const name = `__svelte_${hash(rule)}_${uid}`;
        const doc = get_root_for_style(node);
        const { stylesheet, rules } = managed_styles.get(doc) || create_style_information(doc, node);
        if (!rules[name]) {
            rules[name] = true;
            stylesheet.insertRule(`@keyframes ${name} ${rule}`, stylesheet.cssRules.length);
        }
        const animation = node.style.animation || '';
        node.style.animation = `${animation ? `${animation}, ` : ''}${name} ${duration}ms linear ${delay}ms 1 both`;
        active += 1;
        return name;
    }
    function delete_rule(node, name) {
        const previous = (node.style.animation || '').split(', ');
        const next = previous.filter(name
            ? anim => anim.indexOf(name) < 0 // remove specific animation
            : anim => anim.indexOf('__svelte') === -1 // remove all Svelte animations
        );
        const deleted = previous.length - next.length;
        if (deleted) {
            node.style.animation = next.join(', ');
            active -= deleted;
            if (!active)
                clear_rules();
        }
    }
    function clear_rules() {
        raf(() => {
            if (active)
                return;
            managed_styles.forEach(info => {
                const { ownerNode } = info.stylesheet;
                // there is no ownerNode if it runs on jsdom.
                if (ownerNode)
                    detach(ownerNode);
            });
            managed_styles.clear();
        });
    }

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

    let promise;
    function wait() {
        if (!promise) {
            promise = Promise.resolve();
            promise.then(() => {
                promise = null;
            });
        }
        return promise;
    }
    function dispatch(node, direction, kind) {
        node.dispatchEvent(custom_event(`${direction ? 'intro' : 'outro'}${kind}`));
    }
    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();
        }
    }
    const null_transition = { duration: 0 };
    function create_in_transition(node, fn, params) {
        let config = fn(node, params);
        let running = false;
        let animation_name;
        let task;
        let uid = 0;
        function cleanup() {
            if (animation_name)
                delete_rule(node, animation_name);
        }
        function go() {
            const { delay = 0, duration = 300, easing = identity, tick = noop, css } = config || null_transition;
            if (css)
                animation_name = create_rule(node, 0, 1, duration, delay, easing, css, uid++);
            tick(0, 1);
            const start_time = now() + delay;
            const end_time = start_time + duration;
            if (task)
                task.abort();
            running = true;
            add_render_callback(() => dispatch(node, true, 'start'));
            task = loop(now => {
                if (running) {
                    if (now >= end_time) {
                        tick(1, 0);
                        dispatch(node, true, 'end');
                        cleanup();
                        return running = false;
                    }
                    if (now >= start_time) {
                        const t = easing((now - start_time) / duration);
                        tick(t, 1 - t);
                    }
                }
                return running;
            });
        }
        let started = false;
        return {
            start() {
                if (started)
                    return;
                started = true;
                delete_rule(node);
                if (is_function(config)) {
                    config = config();
                    wait().then(go);
                }
                else {
                    go();
                }
            },
            invalidate() {
                started = false;
            },
            end() {
                if (running) {
                    cleanup();
                    running = false;
                }
            }
        };
    }

    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$2(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 prop_dev(node, property, value) {
        node[property] = value;
        dispatch_dev('SvelteDOMSetProperty', { node, property, 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$1(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$1, console: console_1$g } = globals;

    // (267:0) {:else}
    function create_else_block$7(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$1();
    		},
    		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$7.name,
    		type: "else",
    		source: "(267:0) {:else}",
    		ctx
    	});

    	return block;
    }

    // (260:0) {#if componentParams}
    function create_if_block$e(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$1();
    		},
    		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$e.name,
    		type: "if",
    		source: "(260:0) {#if componentParams}",
    		ctx
    	});

    	return block;
    }

    function create_fragment$B(ctx) {
    	let current_block_type_index;
    	let if_block;
    	let if_block_anchor;
    	let current;
    	const if_block_creators = [create_if_block$e, create_else_block$7];
    	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$1();
    		},
    		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$B.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$2 = 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$B($$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$1(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$1.keys($$props).forEach(key => {
    		if (!~writable_props.indexOf(key) && key.slice(0, 2) !== '$$' && key !== 'slot') console_1$g.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$2,
    		querystring,
    		params,
    		push,
    		pop,
    		replace,
    		link,
    		restoreScroll,
    		updateLink,
    		linkOpts,
    		scrollstateHistoryHandler,
    		onDestroy,
    		createEventDispatcher,
    		afterUpdate,
    		parse: parse$1,
    		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$2(this, options, instance$B, create_fragment$B, safe_not_equal, {
    			routes: 3,
    			prefix: 4,
    			restoreScrollState: 5
    		});

    		dispatch_dev("SvelteRegisterComponent", {
    			component: this,
    			tagName: "Router",
    			options,
    			id: create_fragment$B.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$x = "src/pages/NotFound.svelte";

    function create_fragment$A(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$x, 4, 0, 64);
    			add_location(p0, file$x, 5, 0, 87);
    			add_location(p1, file$x, 7, 0, 192);
    			add_location(h2, file$x, 9, 4, 247);
    			attr_dev(a, "href", "/");
    			add_location(a, file$x, 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$A.name,
    		type: "component",
    		source: "",
    		ctx
    	});

    	return block;
    }

    function instance$A($$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$2(this, options, instance$A, create_fragment$A, safe_not_equal, {});

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

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

    // Current location
    let location$1;

    // Function that updates all nodes marking the active ones
    function checkActive(el) {
        const matchesLocation = el.pattern.test(location$1);
        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$1 = 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$f } = globals;
    const file$w = "src/pieces/Header.svelte";

    // (25:39) 
    function create_if_block_1$6(ctx) {
    	let button;
    	let mounted;
    	let dispose;

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

    			if (!mounted) {
    				dispose = listen_dev(button, "click", /*click_handler_5*/ ctx[7], 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$6.name,
    		type: "if",
    		source: "(25:39) ",
    		ctx
    	});

    	return block;
    }

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

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

    			if (!mounted) {
    				dispose = listen_dev(button, "click", /*click_handler_4*/ ctx[6], 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$d.name,
    		type: "if",
    		source: "(23:4) {#if $location !== '/profile'}",
    		ctx
    	});

    	return block;
    }

    function create_fragment$z(ctx) {
    	let header;
    	let img;
    	let img_src_value;
    	let t0;
    	let h1;
    	let t2;
    	let nav;
    	let button0;
    	let t4;
    	let button1;
    	let t6;
    	let button2;
    	let t8;
    	let t9;
    	let button3;
    	let t11;
    	let button4;
    	let mounted;
    	let dispose;

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

    	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");
    			button0 = element("button");
    			button0.textContent = "Play";
    			t4 = space();
    			button1 = element("button");
    			button1.textContent = "Spectate";
    			t6 = space();
    			button2 = element("button");
    			button2.textContent = "Ranking";
    			t8 = space();
    			if (if_block) if_block.c();
    			t9 = space();
    			button3 = element("button");
    			button3.textContent = "Friends";
    			t11 = space();
    			button4 = element("button");
    			button4.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-1aisfio");
    			add_location(img, file$w, 16, 2, 534);
    			attr_dev(h1, "class", "svelte-1aisfio");
    			add_location(h1, file$w, 17, 2, 621);
    			attr_dev(button0, "class", "svelte-1aisfio");
    			add_location(button0, file$w, 19, 1, 651);
    			attr_dev(button1, "class", "svelte-1aisfio");
    			add_location(button1, file$w, 20, 1, 707);
    			attr_dev(button2, "class", "svelte-1aisfio");
    			add_location(button2, file$w, 21, 1, 772);
    			attr_dev(button3, "class", "svelte-1aisfio");
    			add_location(button3, file$w, 27, 4, 1069);
    			attr_dev(button4, "class", "svelte-1aisfio");
    			add_location(button4, file$w, 28, 4, 1142);
    			attr_dev(nav, "class", "svelte-1aisfio");
    			add_location(nav, file$w, 18, 2, 644);
    			attr_dev(header, "class", "svelte-1aisfio");
    			add_location(header, file$w, 15, 0, 523);
    		},
    		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);
    			append_dev(nav, button0);
    			append_dev(nav, t4);
    			append_dev(nav, button1);
    			append_dev(nav, t6);
    			append_dev(nav, button2);
    			append_dev(nav, t8);
    			if (if_block) if_block.m(nav, null);
    			append_dev(nav, t9);
    			append_dev(nav, button3);
    			append_dev(nav, t11);
    			append_dev(nav, button4);

    			if (!mounted) {
    				dispose = [
    					listen_dev(img, "click", /*click_handler*/ ctx[2], false, false, false),
    					listen_dev(button0, "click", /*click_handler_1*/ ctx[3], false, false, false),
    					listen_dev(button1, "click", /*click_handler_2*/ ctx[4], false, false, false),
    					listen_dev(button2, "click", /*click_handler_3*/ ctx[5], false, false, false),
    					listen_dev(button3, "click", /*click_handler_6*/ ctx[8], false, false, false),
    					listen_dev(button4, "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, t9);
    				}
    			}
    		},
    		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$z.name,
    		type: "component",
    		source: "",
    		ctx
    	});

    	return block;
    }

    function instance$z($$self, $$props, $$invalidate) {
    	let $location;
    	validate_store(location$2, 'location');
    	component_subscribe($$self, location$2, $$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(() => push('/'));
    		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$f.warn(`<Header> was created with unknown prop '${key}'`);
    	});

    	const click_handler = () => push('/');
    	const click_handler_1 = () => push('/game');
    	const click_handler_2 = () => push('/spectator');
    	const click_handler_3 = () => push('/ranking');
    	const click_handler_4 = () => push('/profile');
    	const click_handler_5 = () => push('/profile/settings');
    	const click_handler_6 = () => push('/profile/friends');

    	$$self.$capture_state = () => ({
    		push,
    		location: location$2,
    		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,
    		click_handler_5,
    		click_handler_6
    	];
    }

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

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

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

    const { console: console_1$e } = globals;
    const file$v = "src/pieces/GenerateUserDisplay.svelte";

    // (66:2) {#if user !== undefined}
    function create_if_block$c(ctx) {
    	let main;
    	let img;
    	let img_src_value;
    	let t0;
    	let div0;
    	let t1_value = /*errors*/ ctx[3].avatar + "";
    	let t1;
    	let t2;
    	let div1;
    	let t3_value = /*user*/ ctx[0].username + "";
    	let t3;
    	let t4;
    	let div2;
    	let t5;
    	let span4;
    	let span0;
    	let svg0;
    	let path0;
    	let t6;
    	let span1;
    	let svg1;
    	let path1;
    	let t7;
    	let span2;
    	let svg2;
    	let path2;
    	let t8;
    	let span3;
    	let t9;
    	let t10;
    	let section;
    	let h4;
    	let t12;
    	let p0;
    	let t13;
    	let t14_value = /*user*/ ctx[0].stats.totalGame + "";
    	let t14;
    	let t15;
    	let p1;
    	let t16;
    	let t17_value = /*user*/ ctx[0].stats.winGame + "";
    	let t17;
    	let t18;
    	let p2;
    	let t19;
    	let t20_value = /*user*/ ctx[0].stats.loseGame + "";
    	let t20;
    	let t21;
    	let p3;
    	let t22;
    	let t23_value = /*user*/ ctx[0].stats.drawGame + "";
    	let t23;

    	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(t3_value);
    			t4 = space();
    			div2 = element("div");
    			t5 = text("Rank:\n      ");
    			span4 = element("span");
    			span0 = element("span");
    			svg0 = svg_element("svg");
    			path0 = svg_element("path");
    			t6 = space();
    			span1 = element("span");
    			svg1 = svg_element("svg");
    			path1 = svg_element("path");
    			t7 = space();
    			span2 = element("span");
    			svg2 = svg_element("svg");
    			path2 = svg_element("path");
    			t8 = space();
    			span3 = element("span");
    			t9 = text(/*rank*/ ctx[1]);
    			t10 = space();
    			section = element("section");
    			h4 = element("h4");
    			h4.textContent = "Match Statistics";
    			t12 = space();
    			p0 = element("p");
    			t13 = text("Total: ");
    			t14 = text(t14_value);
    			t15 = space();
    			p1 = element("p");
    			t16 = text("Victories: ");
    			t17 = text(t17_value);
    			t18 = space();
    			p2 = element("p");
    			t19 = text("Losses: ");
    			t20 = text(t20_value);
    			t21 = space();
    			p3 = element("p");
    			t22 = text("Draws: ");
    			t23 = text(t23_value);
    			attr_dev(img, "class", "avatar svelte-vn7dzx");
    			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$v, 69, 4, 2466);
    			attr_dev(div0, "class", "error svelte-vn7dzx");
    			add_location(div0, file$v, 70, 4, 2530);
    			attr_dev(div1, "class", "username svelte-vn7dzx");
    			add_location(div1, file$v, 71, 4, 2575);
    			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-vn7dzx");
    			add_location(path0, file$v, 76, 10, 2781);
    			attr_dev(svg0, "viewBox", "0 0 512 512");
    			attr_dev(svg0, "class", "svelte-vn7dzx");
    			add_location(svg0, file$v, 75, 10, 2743);
    			attr_dev(span0, "class", "glitter-star svelte-vn7dzx");
    			add_location(span0, file$v, 74, 8, 2684);
    			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-vn7dzx");
    			add_location(path1, file$v, 81, 10, 3274);
    			attr_dev(svg1, "viewBox", "0 0 512 512");
    			attr_dev(svg1, "class", "svelte-vn7dzx");
    			add_location(svg1, file$v, 80, 10, 3236);
    			attr_dev(span1, "class", "glitter-star svelte-vn7dzx");
    			add_location(span1, file$v, 79, 8, 3177);
    			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-vn7dzx");
    			add_location(path2, file$v, 86, 10, 3767);
    			attr_dev(svg2, "viewBox", "0 0 512 512");
    			attr_dev(svg2, "class", "svelte-vn7dzx");
    			add_location(svg2, file$v, 85, 10, 3729);
    			attr_dev(span2, "class", "glitter-star svelte-vn7dzx");
    			add_location(span2, file$v, 84, 8, 3670);
    			attr_dev(span3, "class", "glitter-text svelte-vn7dzx");
    			add_location(span3, file$v, 89, 8, 4163);
    			attr_dev(span4, "class", "glitter svelte-vn7dzx");
    			add_location(span4, file$v, 73, 6, 2653);
    			attr_dev(div2, "class", "rank svelte-vn7dzx");
    			add_location(div2, file$v, 72, 4, 2623);
    			attr_dev(h4, "class", "svelte-vn7dzx");
    			add_location(h4, file$v, 93, 6, 4268);
    			add_location(p0, file$v, 94, 6, 4300);
    			add_location(p1, file$v, 95, 6, 4343);
    			add_location(p2, file$v, 96, 6, 4388);
    			add_location(p3, file$v, 97, 6, 4431);
    			attr_dev(section, "class", "main-stats svelte-vn7dzx");
    			add_location(section, file$v, 92, 4, 4233);
    			attr_dev(main, "class", "svelte-vn7dzx");
    			add_location(main, file$v, 66, 2, 2288);
    		},
    		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(main, t4);
    			append_dev(main, div2);
    			append_dev(div2, t5);
    			append_dev(div2, span4);
    			append_dev(span4, span0);
    			append_dev(span0, svg0);
    			append_dev(svg0, path0);
    			/*span0_binding*/ ctx[6](span0);
    			append_dev(span4, t6);
    			append_dev(span4, span1);
    			append_dev(span1, svg1);
    			append_dev(svg1, path1);
    			/*span1_binding*/ ctx[7](span1);
    			append_dev(span4, t7);
    			append_dev(span4, span2);
    			append_dev(span2, svg2);
    			append_dev(svg2, path2);
    			/*span2_binding*/ ctx[8](span2);
    			append_dev(span4, t8);
    			append_dev(span4, span3);
    			append_dev(span3, t9);
    			append_dev(main, t10);
    			append_dev(main, section);
    			append_dev(section, h4);
    			append_dev(section, t12);
    			append_dev(section, p0);
    			append_dev(p0, t13);
    			append_dev(p0, t14);
    			append_dev(section, t15);
    			append_dev(section, p1);
    			append_dev(p1, t16);
    			append_dev(p1, t17);
    			append_dev(section, t18);
    			append_dev(section, p2);
    			append_dev(p2, t19);
    			append_dev(p2, t20);
    			append_dev(section, t21);
    			append_dev(section, p3);
    			append_dev(p3, t22);
    			append_dev(p3, t23);
    		},
    		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 & /*errors*/ 8 && t1_value !== (t1_value = /*errors*/ ctx[3].avatar + "")) set_data_dev(t1, t1_value);
    			if (dirty & /*user*/ 1 && t3_value !== (t3_value = /*user*/ ctx[0].username + "")) set_data_dev(t3, t3_value);
    			if (dirty & /*rank*/ 2) set_data_dev(t9, /*rank*/ ctx[1]);
    			if (dirty & /*user*/ 1 && t14_value !== (t14_value = /*user*/ ctx[0].stats.totalGame + "")) set_data_dev(t14, t14_value);
    			if (dirty & /*user*/ 1 && t17_value !== (t17_value = /*user*/ ctx[0].stats.winGame + "")) set_data_dev(t17, t17_value);
    			if (dirty & /*user*/ 1 && t20_value !== (t20_value = /*user*/ ctx[0].stats.loseGame + "")) set_data_dev(t20, t20_value);
    			if (dirty & /*user*/ 1 && t23_value !== (t23_value = /*user*/ ctx[0].stats.drawGame + "")) set_data_dev(t23, t23_value);
    		},
    		d: function destroy(detaching) {
    			if (detaching) detach_dev(main);
    			/*span0_binding*/ ctx[6](null);
    			/*span1_binding*/ ctx[7](null);
    			/*span2_binding*/ ctx[8](null);
    		}
    	};

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

    	return block;
    }

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

    	const block = {
    		c: function create() {
    			div = element("div");
    			if (if_block) if_block.c();
    			attr_dev(div, "class", "outer svelte-vn7dzx");
    			add_location(div, file$v, 64, 0, 2239);
    		},
    		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$c(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$y.name,
    		type: "component",
    		source: "",
    		ctx
    	});

    	return block;
    }

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

    	// avatar needs to be updated!!!
    	console.log('Generate User Display, BEFORE on mount ' + avatar);

    	// add errors
    	let errors = { avatar: '' };

    	onMount(async () => {
    		// console.log('Generate User Display, on mount ' + user.username)
    		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);
    			}).catch(() => $$invalidate(3, errors.avatar = 'Sorry your avatar could not be loaded', errors));
    		} else // console.log(avatar)
    		{
    			await fetch(`http://${'transcendance'}:${'8080'}/api/v2/user/avatar?username=${user.username}`, {
    				method: "GET", // console.log('avatar: ')
    				
    			}).then(response => {
    				return response.blob();
    			}).then(data => {
    				const url = URL.createObjectURL(data);
    				$$invalidate(2, avatar = url);
    			}).catch(() => $$invalidate(3, errors.avatar = 'Sorry your avatar could not be loaded', errors));
    		}
    	});

    	/**** THIS IS BASICALLY ALL THE RANK LOGIC ERIC HAS MADE ****/
    	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;

    	const animate = star => {
    		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 = "";
    		}
    	};

    	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_1$e.warn("<GenerateUserDisplay> was created without expected prop 'user'");
    		}

    		if (primary === undefined && !('primary' in $$props || $$self.$$.bound[$$self.$$.props['primary']])) {
    			console_1$e.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_1$e.warn(`<GenerateUserDisplay> was created with unknown prop '${key}'`);
    	});

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

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

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

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

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

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

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

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

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

    		dispatch_dev("SvelteRegisterComponent", {
    			component: this,
    			tagName: "GenerateUserDisplay",
    			options,
    			id: create_fragment$y.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/tmp_debug.svelte generated by Svelte v3.53.1 */

    const file$u = "src/pieces/chat/tmp_debug.svelte";

    function create_fragment$x(ctx) {
    	let div;
    	let p;
    	let t1;
    	let button0;
    	let t3;
    	let button1;
    	let t5;
    	let button2;
    	let t7;
    	let button3;
    	let t9;
    	let button4;
    	let t11;
    	let button5;
    	let t13;
    	let button6;
    	let t15;
    	let button7;
    	let t17;
    	let button8;
    	let t19;
    	let button9;
    	let t21;
    	let button10;
    	let mounted;
    	let dispose;

    	const block = {
    		c: function create() {
    			div = element("div");
    			p = element("p");
    			p.textContent = "temp, for testing :";
    			t1 = space();
    			button0 = element("button");
    			button0.textContent = "close";
    			t3 = space();
    			button1 = element("button");
    			button1.textContent = "home";
    			t5 = space();
    			button2 = element("button");
    			button2.textContent = "room";
    			t7 = space();
    			button3 = element("button");
    			button3.textContent = "new";
    			t9 = space();
    			button4 = element("button");
    			button4.textContent = "settings";
    			t11 = space();
    			button5 = element("button");
    			button5.textContent = "room_set";
    			t13 = space();
    			button6 = element("button");
    			button6.textContent = "protected";
    			t15 = space();
    			button7 = element("button");
    			button7.textContent = "create";
    			t17 = space();
    			button8 = element("button");
    			button8.textContent = "mute";
    			t19 = space();
    			button9 = element("button");
    			button9.textContent = "user from settings";
    			t21 = space();
    			button10 = element("button");
    			button10.textContent = "user from room_set";
    			add_location(p, file$u, 8, 1, 209);
    			add_location(button0, file$u, 9, 1, 237);
    			add_location(button1, file$u, 10, 1, 305);
    			add_location(button2, file$u, 11, 1, 372);
    			add_location(button3, file$u, 12, 1, 439);
    			add_location(button4, file$u, 13, 1, 505);
    			add_location(button5, file$u, 14, 1, 576);
    			add_location(button6, file$u, 15, 1, 647);
    			add_location(button7, file$u, 16, 1, 719);
    			add_location(button8, file$u, 17, 1, 788);
    			add_location(button9, file$u, 18, 1, 855);
    			add_location(button10, file$u, 22, 1, 975);
    			set_style(div, "display", "flex");
    			set_style(div, "flex-direction", "column");
    			set_style(div, "font-size", "12px");
    			set_style(div, "position", "fixed");
    			set_style(div, "top", "20px");
    			set_style(div, "left", "20px");
    			set_style(div, "background-color", "white");
    			add_location(div, file$u, 7, 0, 73);
    		},
    		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, p);
    			append_dev(div, t1);
    			append_dev(div, button0);
    			append_dev(div, t3);
    			append_dev(div, button1);
    			append_dev(div, t5);
    			append_dev(div, button2);
    			append_dev(div, t7);
    			append_dev(div, button3);
    			append_dev(div, t9);
    			append_dev(div, button4);
    			append_dev(div, t11);
    			append_dev(div, button5);
    			append_dev(div, t13);
    			append_dev(div, button6);
    			append_dev(div, t15);
    			append_dev(div, button7);
    			append_dev(div, t17);
    			append_dev(div, button8);
    			append_dev(div, t19);
    			append_dev(div, button9);
    			append_dev(div, t21);
    			append_dev(div, button10);

    			if (!mounted) {
    				dispose = [
    					listen_dev(button0, "click", /*click_handler*/ ctx[2], false, false, false),
    					listen_dev(button1, "click", /*click_handler_1*/ ctx[3], false, false, false),
    					listen_dev(button2, "click", /*click_handler_2*/ ctx[4], false, false, false),
    					listen_dev(button3, "click", /*click_handler_3*/ ctx[5], false, false, false),
    					listen_dev(button4, "click", /*click_handler_4*/ ctx[6], false, false, false),
    					listen_dev(button5, "click", /*click_handler_5*/ ctx[7], false, false, false),
    					listen_dev(button6, "click", /*click_handler_6*/ ctx[8], false, false, false),
    					listen_dev(button7, "click", /*click_handler_7*/ ctx[9], false, false, false),
    					listen_dev(button8, "click", /*click_handler_8*/ ctx[10], false, false, false),
    					listen_dev(button9, "click", /*click_handler_9*/ ctx[11], false, false, false),
    					listen_dev(button10, "click", /*click_handler_10*/ ctx[12], false, false, false)
    				];

    				mounted = true;
    			}
    		},
    		p: noop,
    		i: noop,
    		o: noop,
    		d: function destroy(detaching) {
    			if (detaching) detach_dev(div);
    			mounted = false;
    			run_all(dispose);
    		}
    	};

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

    	return block;
    }

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

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

    	const click_handler = function () {
    		$$invalidate(0, layout = "close");
    	};

    	const click_handler_1 = function () {
    		$$invalidate(0, layout = "home");
    	};

    	const click_handler_2 = function () {
    		$$invalidate(0, layout = "room");
    	};

    	const click_handler_3 = function () {
    		$$invalidate(0, layout = "new");
    	};

    	const click_handler_4 = function () {
    		$$invalidate(0, layout = "settings");
    	};

    	const click_handler_5 = function () {
    		$$invalidate(0, layout = "room_set");
    	};

    	const click_handler_6 = function () {
    		$$invalidate(0, layout = "protected");
    	};

    	const click_handler_7 = function () {
    		$$invalidate(0, layout = "create");
    	};

    	const click_handler_8 = function () {
    		$$invalidate(0, layout = "mute");
    	};

    	const click_handler_9 = function () {
    		$$invalidate(1, layouts = ["settings", "settings"]);
    		$$invalidate(0, layout = "user");
    	};

    	const click_handler_10 = function () {
    		$$invalidate(1, layouts = ["room_set", "room_set"]);
    		$$invalidate(0, layout = "user");
    	};

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

    	$$self.$capture_state = () => ({ layout, layouts });

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

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

    	return [
    		layout,
    		layouts,
    		click_handler,
    		click_handler_1,
    		click_handler_2,
    		click_handler_3,
    		click_handler_4,
    		click_handler_5,
    		click_handler_6,
    		click_handler_7,
    		click_handler_8,
    		click_handler_9,
    		click_handler_10
    	];
    }

    class Tmp_debug extends SvelteComponentDev {
    	constructor(options) {
    		super(options);
    		init$2(this, options, instance$x, create_fragment$x, safe_not_equal, { layout: 0, layouts: 1 });

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

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

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

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

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

    let msgs = writable([]);
    let layout = writable("close");
    let current_room_name = writable("");
    let user;
    let socket$1;
    function set_user(new_user) { user = new_user; }
    function set_socket(new_socket) { socket$1 = new_socket; }
    function add_msg(name, message) {
        msgs.update(msgs => [...msgs, { name: "me", message: message }]);
    }

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

    function create_fragment$w(ctx) {
    	let div;
    	let div_class_value;
    	let current;
    	const default_slot_template = /*#slots*/ ctx[3].default;
    	const default_slot = create_slot(default_slot_template, ctx, /*$$scope*/ ctx[2], null);

    	const block = {
    		c: function create() {
    			div = element("div");
    			if (default_slot) default_slot.c();
    			attr_dev(div, "class", div_class_value = "" + (/*$layout*/ ctx[1] + " chat_box" + " svelte-6ej1tr"));
    			set_style(div, "background-color", /*color*/ ctx[0]);
    			add_location(div, file$t, 4, 0, 86);
    		},
    		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*/ 4)) {
    					update_slot_base(
    						default_slot,
    						default_slot_template,
    						ctx,
    						/*$$scope*/ ctx[2],
    						!current
    						? get_all_dirty_from_scope(/*$$scope*/ ctx[2])
    						: get_slot_changes(default_slot_template, /*$$scope*/ ctx[2], dirty, null),
    						null
    					);
    				}
    			}

    			if (!current || dirty & /*$layout*/ 2 && div_class_value !== (div_class_value = "" + (/*$layout*/ ctx[1] + " chat_box" + " svelte-6ej1tr"))) {
    				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(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$w.name,
    		type: "component",
    		source: "",
    		ctx
    	});

    	return block;
    }

    function instance$w($$self, $$props, $$invalidate) {
    	let $layout;
    	validate_store(layout, 'layout');
    	component_subscribe($$self, layout, $$value => $$invalidate(1, $layout = $$value));
    	let { $$slots: slots = {}, $$scope } = $$props;
    	validate_slots('Chat_box_css', slots, ['default']);
    	let { color } = $$props;

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

    	const writable_props = ['color'];

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

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

    	$$self.$capture_state = () => ({ layout, color, $layout });

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

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

    	return [color, $layout, $$scope, slots];
    }

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

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

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

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

    function create_fragment$v(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-1qngx3f");
    			add_location(p, file$s, 23, 1, 433);
    			attr_dev(button, "title", /*my_title*/ ctx[1]);
    			attr_dev(button, "class", button_class_value = "" + (null_to_empty(/*my_class*/ ctx[0]) + " svelte-1qngx3f"));
    			add_location(button, file$s, 22, 0, 344);
    		},
    		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[3], false, false, false),
    					listen_dev(
    						button,
    						"click",
    						function () {
    							if (is_function(/*on_click*/ ctx[2])) /*on_click*/ ctx[2].apply(this, arguments);
    						},
    						false,
    						false,
    						false
    					)
    				];

    				mounted = true;
    			}
    		},
    		p: function update(new_ctx, [dirty]) {
    			ctx = new_ctx;

    			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_title*/ 2) {
    				attr_dev(button, "title", /*my_title*/ ctx[1]);
    			}

    			if (!current || dirty & /*my_class*/ 1 && button_class_value !== (button_class_value = "" + (null_to_empty(/*my_class*/ ctx[0]) + " svelte-1qngx3f"))) {
    				attr_dev(button, "class", button_class_value);
    			}
    		},
    		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;
    			run_all(dispose);
    		}
    	};

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

    	return block;
    }

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

    	function update_layout() {
    		layout.set(new_layout);
    	}

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

    	Object.keys($$props).forEach(key => {
    		if (!~writable_props.indexOf(key) && key.slice(0, 2) !== '$$' && key !== 'slot') console.warn(`<Element_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 ('new_layout' in $$props) $$invalidate(4, new_layout = $$props.new_layout);
    		if ('on_click' in $$props) $$invalidate(2, on_click = $$props.on_click);
    		if ('$$scope' in $$props) $$invalidate(5, $$scope = $$props.$$scope);
    	};

    	$$self.$capture_state = () => ({
    		layout,
    		my_class,
    		my_title,
    		new_layout,
    		on_click,
    		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 ('new_layout' in $$props) $$invalidate(4, new_layout = $$props.new_layout);
    		if ('on_click' in $$props) $$invalidate(2, on_click = $$props.on_click);
    	};

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

    	return [my_class, my_title, on_click, update_layout, new_layout, $$scope, slots];
    }

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

    		init$2(this, options, instance$v, create_fragment$v, safe_not_equal, {
    			my_class: 0,
    			my_title: 1,
    			new_layout: 4,
    			on_click: 2
    		});

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

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

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

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

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

    // (7:1) <Button new_layout={back} my_class="chat">
    function create_default_slot$c(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$c.name,
    		type: "slot",
    		source: "(7:1) <Button new_layout={back} my_class=\\\"chat\\\">",
    		ctx
    	});

    	return block;
    }

    function create_fragment$u(ctx) {
    	let div;
    	let button;
    	let current;

    	button = new Element_button({
    			props: {
    				new_layout: /*back*/ ctx[0],
    				my_class: "chat",
    				$$slots: { default: [create_default_slot$c] },
    				$$scope: { ctx }
    			},
    			$$inline: true
    		});

    	const block = {
    		c: function create() {
    			div = element("div");
    			create_component(button.$$.fragment);
    			attr_dev(div, "class", "grid_box svelte-fc4a40");
    			add_location(div, file$r, 5, 0, 120);
    		},
    		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);
    			mount_component(button, div, null);
    			current = true;
    		},
    		p: function update(ctx, [dirty]) {
    			const button_changes = {};
    			if (dirty & /*back*/ 1) button_changes.new_layout = /*back*/ ctx[0];

    			if (dirty & /*$$scope*/ 2) {
    				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(div);
    			destroy_component(button);
    		}
    	};

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

    	return block;
    }

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

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

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

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

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

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

    	return [back];
    }

    class Layout_close extends SvelteComponentDev {
    	constructor(options) {
    		super(options);
    		init$2(this, options, instance$u, create_fragment$u, safe_not_equal, { back: 0 });

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

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

    async function get_room_messages()
    {
    	console.log("in get_room_messages");
    	const response = await fetch('/api/v2/chat/messages');
    	const data = await response.json();
    	const messages = data.messages;

    	messages.forEach(function(item) {
    		if (item.name === user.username) {
    			item.name = "me";
    		}
    	});

    	msgs.set(messages);
    }

    async function create_room(room_name, room_type)
    {
    	console.log("in create_room");

    	let form_data = {
    		room_name: room_name,
    		room_type: room_type,
    	};

    	// send the new room
    	const response = await fetch('/api/v2/chat/create', {
    		method: 'POST',
    		headers: { 'Content-Type': 'application/json' },
    		body: JSON.stringify(form_data),
    	});

    	// get response status and message
    	let response_status = response.status;
    	let data = await response.json();
    	let response_message = "";
    	if (data.message)
    		response_message = data.message;

    	return {
    		status: response_status,
    		message: response_message
    	};
    }

    async function join_room(room_name)
    {
    	console.log("in join_room");
    	console.log(room_name);

    	let name = {
    		room_name: room_name,
    	};
    	const response = await fetch('/api/v2/chat/join', {
    		method: 'POST',
    		headers: { 'Content-Type': 'application/json' },
    		body: JSON.stringify(name),
    	});
    	let data = await response.json();
    	console.log(data.message);

    	socket$1.emit('join', room_name);
    }

    async function change_room(room_name)
    {
    	console.log("in change_room");

    	let room_name_request = {
    		room_name: room_name,
    	};
    	const response = await fetch('/api/v2/chat/change', {
    		method: 'POST',
    		headers: { 'Content-Type': 'application/json' },
    		body: JSON.stringify(room_name_request),
    	});
    	let data = await response.json();
    	console.log(data.message);

    	await get_room_messages();
    	socket$1.emit('change', room_name);

    	current_room_name.set(room_name);
    	layout.set("room");
    }

    async function get_my_rooms()
    {
    	console.log("in get_my_rooms");

    	const response = await fetch('/api/v2/chat/myrooms');
    	const data = await response.json();

    	console.log("data.rooms:", data.rooms);
    	for (let room of data.rooms)
    		console.log(room.name);
    	let rooms = data.rooms;

    	return rooms;
    }

    async function get_all_rooms()
    {
    	console.log("in get_all_rooms");

    	const response = await fetch('/api/v2/chat/allrooms');
    	const data = await response.json();

    	console.log("data.rooms:", data.rooms);
    	for (let room of data.rooms)
    		console.log(room.name);
    	let rooms = data.rooms;

    	return rooms;
    }

    async function get_room_users()
    {
    	console.log("in get_room_users");

    	const response = await fetch('/api/v2/chat/roomusers');
    	const data = await response.json();

    	console.log("data.users:", data.users);
    	for (let user of data.users)
    		console.log(user.username);
    	let users = data.users;

    	return users;
    }

    async function user_leave_room()
    {
    	console.log("in leave_room");

    	const response = await fetch('/api/v2/chat/removeuser', {
    		method: 'DELETE',
    	});
    	const data = await response.json();

    	console.log("data", data);
    }

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

    const { console: console_1$d } = globals;
    const file$q = "src/pieces/chat/Layout_home.svelte";

    function get_each_context$8(ctx, list, i) {
    	const child_ctx = ctx.slice();
    	child_ctx[2] = list[i];
    	return child_ctx;
    }

    // (23:1) <Button new_layout="settings" my_class="settings dots icon">
    function create_default_slot_3$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_3$6.name,
    		type: "slot",
    		source: "(23:1) <Button new_layout=\\\"settings\\\" my_class=\\\"settings dots icon\\\">",
    		ctx
    	});

    	return block;
    }

    // (28:1) <Button new_layout="new" my_class="new transparent">
    function create_default_slot_2$a(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$a.name,
    		type: "slot",
    		source: "(28:1) <Button new_layout=\\\"new\\\" my_class=\\\"new transparent\\\">",
    		ctx
    	});

    	return block;
    }

    // (33:1) <Button new_layout="close" my_class="close icon">
    function create_default_slot_1$a(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$a.name,
    		type: "slot",
    		source: "(33:1) <Button new_layout=\\\"close\\\" my_class=\\\"close icon\\\">",
    		ctx
    	});

    	return block;
    }

    // (1:0) <script>   import { layout, msgs, user }
    function create_catch_block$3(ctx) {
    	const block = {
    		c: noop,
    		m: noop,
    		p: noop,
    		i: noop,
    		o: noop,
    		d: noop
    	};

    	dispatch_dev("SvelteRegisterBlock", {
    		block,
    		id: create_catch_block$3.name,
    		type: "catch",
    		source: "(1:0) <script>   import { layout, msgs, user }",
    		ctx
    	});

    	return block;
    }

    // (46:3) {:then rooms}
    function create_then_block$3(ctx) {
    	let each_1_anchor;
    	let current;
    	let each_value = /*rooms*/ ctx[1];
    	validate_each_argument(each_value);
    	let each_blocks = [];

    	for (let i = 0; i < each_value.length; i += 1) {
    		each_blocks[i] = create_each_block$8(get_each_context$8(ctx, each_value, i));
    	}

    	const out = i => transition_out(each_blocks[i], 1, 1, () => {
    		each_blocks[i] = null;
    	});

    	const block = {
    		c: function create() {
    			for (let i = 0; i < each_blocks.length; i += 1) {
    				each_blocks[i].c();
    			}

    			each_1_anchor = empty$1();
    		},
    		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);
    			current = true;
    		},
    		p: function update(ctx, dirty) {
    			if (dirty & /*go_to_room, rooms*/ 3) {
    				each_value = /*rooms*/ ctx[1];
    				validate_each_argument(each_value);
    				let i;

    				for (i = 0; i < each_value.length; i += 1) {
    					const child_ctx = get_each_context$8(ctx, each_value, i);

    					if (each_blocks[i]) {
    						each_blocks[i].p(child_ctx, dirty);
    						transition_in(each_blocks[i], 1);
    					} else {
    						each_blocks[i] = create_each_block$8(child_ctx);
    						each_blocks[i].c();
    						transition_in(each_blocks[i], 1);
    						each_blocks[i].m(each_1_anchor.parentNode, each_1_anchor);
    					}
    				}

    				group_outros();

    				for (i = each_value.length; i < each_blocks.length; i += 1) {
    					out(i);
    				}

    				check_outros();
    			}
    		},
    		i: function intro(local) {
    			if (current) return;

    			for (let i = 0; i < each_value.length; i += 1) {
    				transition_in(each_blocks[i]);
    			}

    			current = true;
    		},
    		o: function outro(local) {
    			each_blocks = each_blocks.filter(Boolean);

    			for (let i = 0; i < each_blocks.length; i += 1) {
    				transition_out(each_blocks[i]);
    			}

    			current = false;
    		},
    		d: function destroy(detaching) {
    			destroy_each(each_blocks, detaching);
    			if (detaching) detach_dev(each_1_anchor);
    		}
    	};

    	dispatch_dev("SvelteRegisterBlock", {
    		block,
    		id: create_then_block$3.name,
    		type: "then",
    		source: "(46:3) {:then rooms}",
    		ctx
    	});

    	return block;
    }

    // (48:5) <Button my_class="list" on_click={go_to_room}>
    function create_default_slot$b(ctx) {
    	let t0_value = /*room*/ ctx[2].name + "";
    	let t0;
    	let t1;

    	const block = {
    		c: function create() {
    			t0 = text(t0_value);
    			t1 = space();
    		},
    		m: function mount(target, anchor) {
    			insert_dev(target, t0, anchor);
    			insert_dev(target, t1, anchor);
    		},
    		p: noop,
    		d: function destroy(detaching) {
    			if (detaching) detach_dev(t0);
    			if (detaching) detach_dev(t1);
    		}
    	};

    	dispatch_dev("SvelteRegisterBlock", {
    		block,
    		id: create_default_slot$b.name,
    		type: "slot",
    		source: "(48:5) <Button my_class=\\\"list\\\" on_click={go_to_room}>",
    		ctx
    	});

    	return block;
    }

    // (47:4) {#each rooms as room}
    function create_each_block$8(ctx) {
    	let button;
    	let current;

    	button = new Element_button({
    			props: {
    				my_class: "list",
    				on_click: /*go_to_room*/ ctx[0],
    				$$slots: { default: [create_default_slot$b] },
    				$$scope: { ctx }
    			},
    			$$inline: true
    		});

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

    			if (dirty & /*$$scope*/ 32) {
    				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) {
    			destroy_component(button, detaching);
    		}
    	};

    	dispatch_dev("SvelteRegisterBlock", {
    		block,
    		id: create_each_block$8.name,
    		type: "each",
    		source: "(47:4) {#each rooms as room}",
    		ctx
    	});

    	return block;
    }

    // (44:17)      <p>rooms are loading...</p>    {:then rooms}
    function create_pending_block$3(ctx) {
    	let p;

    	const block = {
    		c: function create() {
    			p = element("p");
    			p.textContent = "rooms are loading...";
    			add_location(p, file$q, 44, 4, 1002);
    		},
    		m: function mount(target, anchor) {
    			insert_dev(target, p, anchor);
    		},
    		p: noop,
    		i: noop,
    		o: noop,
    		d: function destroy(detaching) {
    			if (detaching) detach_dev(p);
    		}
    	};

    	dispatch_dev("SvelteRegisterBlock", {
    		block,
    		id: create_pending_block$3.name,
    		type: "pending",
    		source: "(44:17)      <p>rooms are loading...</p>    {:then rooms}",
    		ctx
    	});

    	return block;
    }

    function create_fragment$t(ctx) {
    	let div3;
    	let button0;
    	let t0;
    	let button1;
    	let t1;
    	let button2;
    	let t2;
    	let div2;
    	let p0;
    	let t4;
    	let div1;
    	let div0;
    	let p1;
    	let t6;
    	let current;

    	button0 = new Element_button({
    			props: {
    				new_layout: "settings",
    				my_class: "settings dots icon",
    				$$slots: { default: [create_default_slot_3$6] },
    				$$scope: { ctx }
    			},
    			$$inline: true
    		});

    	button1 = new Element_button({
    			props: {
    				new_layout: "new",
    				my_class: "new transparent",
    				$$slots: { default: [create_default_slot_2$a] },
    				$$scope: { ctx }
    			},
    			$$inline: true
    		});

    	button2 = new Element_button({
    			props: {
    				new_layout: "close",
    				my_class: "close icon",
    				$$slots: { default: [create_default_slot_1$a] },
    				$$scope: { ctx }
    			},
    			$$inline: true
    		});

    	let info = {
    		ctx,
    		current: null,
    		token: null,
    		hasCatch: false,
    		pending: create_pending_block$3,
    		then: create_then_block$3,
    		catch: create_catch_block$3,
    		value: 1,
    		blocks: [,,,]
    	};

    	handle_promise(/*rooms*/ ctx[1], info);

    	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 /";
    			t6 = space();
    			info.block.c();
    			attr_dev(p0, "class", "title svelte-1jygwt2");
    			add_location(p0, file$q, 38, 2, 806);
    			attr_dev(p1, "class", "__center");
    			add_location(p1, file$q, 41, 4, 916);
    			attr_dev(div0, "class", "__show_if_only_child");
    			add_location(div0, file$q, 40, 3, 877);
    			attr_dev(div1, "class", "room_list");
    			add_location(div1, file$q, 39, 2, 850);
    			attr_dev(div2, "class", "panel panel_home __border_top svelte-1jygwt2");
    			add_location(div2, file$q, 37, 1, 760);
    			attr_dev(div3, "class", "grid_box svelte-1jygwt2");
    			add_location(div3, file$q, 19, 0, 437);
    		},
    		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(div1, t6);
    			info.block.m(div1, info.anchor = null);
    			info.mount = () => div1;
    			info.anchor = null;
    			current = true;
    		},
    		p: function update(new_ctx, [dirty]) {
    			ctx = new_ctx;
    			const button0_changes = {};

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

    			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 };
    			}

    			button2.$set(button2_changes);
    			update_await_block_branch(info, ctx, dirty);
    		},
    		i: function intro(local) {
    			if (current) return;
    			transition_in(button0.$$.fragment, local);
    			transition_in(button1.$$.fragment, local);
    			transition_in(button2.$$.fragment, local);
    			transition_in(info.block);
    			current = true;
    		},
    		o: function outro(local) {
    			transition_out(button0.$$.fragment, local);
    			transition_out(button1.$$.fragment, local);
    			transition_out(button2.$$.fragment, local);

    			for (let i = 0; i < 3; i += 1) {
    				const block = info.blocks[i];
    				transition_out(block);
    			}

    			current = false;
    		},
    		d: function destroy(detaching) {
    			if (detaching) detach_dev(div3);
    			destroy_component(button0);
    			destroy_component(button1);
    			destroy_component(button2);
    			info.block.d();
    			info.token = null;
    			info = null;
    		}
    	};

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

    	return block;
    }

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

    	// go to clicked room
    	async function go_to_room(evt) {
    		console.log("inside go_to_room");
    		await change_room(evt.target.innerText);
    		await get_room_messages();
    	}

    	const writable_props = [];

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

    	$$self.$capture_state = () => ({
    		layout,
    		msgs,
    		user,
    		change_room,
    		get_room_messages,
    		get_my_rooms,
    		onMount,
    		Button: Element_button,
    		rooms,
    		go_to_room
    	});

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

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

    	return [go_to_room, rooms];
    }

    class Layout_home extends SvelteComponentDev {
    	constructor(options) {
    		super(options);
    		init$2(this, options, instance$t, create_fragment$t, safe_not_equal, {});

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

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

    const file$p = "src/pieces/chat/Element_msg.svelte";

    function create_fragment$s(ctx) {
    	let div;
    	let p0;
    	let t0;
    	let t1;
    	let p1;
    	let div_class_value;
    	let current;
    	const default_slot_template = /*#slots*/ ctx[2].default;
    	const default_slot = create_slot(default_slot_template, ctx, /*$$scope*/ ctx[1], null);

    	const block = {
    		c: function create() {
    			div = element("div");
    			p0 = element("p");
    			t0 = text(/*name*/ ctx[0]);
    			t1 = space();
    			p1 = element("p");
    			if (default_slot) default_slot.c();
    			attr_dev(p0, "class", "name svelte-14xxpbz");
    			add_location(p0, file$p, 7, 1, 71);
    			attr_dev(p1, "class", "msg svelte-14xxpbz");
    			add_location(p1, file$p, 8, 1, 99);
    			attr_dev(div, "class", div_class_value = "chat_msg " + /*name*/ ctx[0] + " svelte-14xxpbz");
    			add_location(div, file$p, 6, 0, 40);
    		},
    		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, p0);
    			append_dev(p0, t0);
    			append_dev(div, t1);
    			append_dev(div, p1);

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

    			current = true;
    		},
    		p: function update(ctx, [dirty]) {
    			if (!current || dirty & /*name*/ 1) set_data_dev(t0, /*name*/ ctx[0]);

    			if (default_slot) {
    				if (default_slot.p && (!current || dirty & /*$$scope*/ 2)) {
    					update_slot_base(
    						default_slot,
    						default_slot_template,
    						ctx,
    						/*$$scope*/ ctx[1],
    						!current
    						? get_all_dirty_from_scope(/*$$scope*/ ctx[1])
    						: get_slot_changes(default_slot_template, /*$$scope*/ ctx[1], dirty, null),
    						null
    					);
    				}
    			}

    			if (!current || dirty & /*name*/ 1 && div_class_value !== (div_class_value = "chat_msg " + /*name*/ ctx[0] + " svelte-14xxpbz")) {
    				attr_dev(div, "class", div_class_value);
    			}
    		},
    		i: 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$s.name,
    		type: "component",
    		source: "",
    		ctx
    	});

    	return block;
    }

    function instance$s($$self, $$props, $$invalidate) {
    	let { $$slots: slots = {}, $$scope } = $$props;
    	validate_slots('Element_msg', slots, ['default']);
    	let { name } = $$props;

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

    	const writable_props = ['name'];

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

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

    	$$self.$capture_state = () => ({ name });

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

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

    	return [name, $$scope, slots];
    }

    class Element_msg extends SvelteComponentDev {
    	constructor(options) {
    		super(options);
    		init$2(this, options, instance$s, create_fragment$s, safe_not_equal, { name: 0 });

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

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

    	set name(value) {
    		throw new Error("<Element_msg>: 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 { console: console_1$c } = globals;
    const file$o = "src/pieces/chat/Layout_room.svelte";

    function get_each_context$7(ctx, list, i) {
    	const child_ctx = ctx.slice();
    	child_ctx[4] = list[i];
    	return child_ctx;
    }

    // (39:1) <Button new_layout={back} my_class="back icon" my_title="go back {back}">
    function create_default_slot_4$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_4$4.name,
    		type: "slot",
    		source: "(39:1) <Button new_layout={back} my_class=\\\"back icon\\\" my_title=\\\"go back {back}\\\">",
    		ctx
    	});

    	return block;
    }

    // (44:1) <Button new_layout="room_set" my_class="room_name transparent">
    function create_default_slot_3$5(ctx) {
    	let t;

    	const block = {
    		c: function create() {
    			t = text(/*$current_room_name*/ ctx[2]);
    		},
    		m: function mount(target, anchor) {
    			insert_dev(target, t, anchor);
    		},
    		p: function update(ctx, dirty) {
    			if (dirty & /*$current_room_name*/ 4) set_data_dev(t, /*$current_room_name*/ ctx[2]);
    		},
    		d: function destroy(detaching) {
    			if (detaching) detach_dev(t);
    		}
    	};

    	dispatch_dev("SvelteRegisterBlock", {
    		block,
    		id: create_default_slot_3$5.name,
    		type: "slot",
    		source: "(44:1) <Button new_layout=\\\"room_set\\\" my_class=\\\"room_name transparent\\\">",
    		ctx
    	});

    	return block;
    }

    // (49:1) <Button new_layout="close" my_class="close icon">
    function create_default_slot_2$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_2$9.name,
    		type: "slot",
    		source: "(49:1) <Button new_layout=\\\"close\\\" my_class=\\\"close icon\\\">",
    		ctx
    	});

    	return block;
    }

    // (57:4) <Msg name={msg.name}>
    function create_default_slot_1$9(ctx) {
    	let html_tag;
    	let raw_value = /*msg*/ ctx[4].message + "";
    	let html_anchor;

    	const block = {
    		c: function create() {
    			html_tag = new HtmlTag(false);
    			html_anchor = empty$1();
    			html_tag.a = html_anchor;
    		},
    		m: function mount(target, anchor) {
    			html_tag.m(raw_value, target, anchor);
    			insert_dev(target, html_anchor, anchor);
    		},
    		p: function update(ctx, dirty) {
    			if (dirty & /*$msgs*/ 8 && raw_value !== (raw_value = /*msg*/ ctx[4].message + "")) html_tag.p(raw_value);
    		},
    		d: function destroy(detaching) {
    			if (detaching) detach_dev(html_anchor);
    			if (detaching) html_tag.d();
    		}
    	};

    	dispatch_dev("SvelteRegisterBlock", {
    		block,
    		id: create_default_slot_1$9.name,
    		type: "slot",
    		source: "(57:4) <Msg name={msg.name}>",
    		ctx
    	});

    	return block;
    }

    // (56:3) {#each $msgs as msg}
    function create_each_block$7(ctx) {
    	let msg_1;
    	let current;

    	msg_1 = new Element_msg({
    			props: {
    				name: /*msg*/ ctx[4].name,
    				$$slots: { default: [create_default_slot_1$9] },
    				$$scope: { ctx }
    			},
    			$$inline: true
    		});

    	const block = {
    		c: function create() {
    			create_component(msg_1.$$.fragment);
    		},
    		m: function mount(target, anchor) {
    			mount_component(msg_1, target, anchor);
    			current = true;
    		},
    		p: function update(ctx, dirty) {
    			const msg_1_changes = {};
    			if (dirty & /*$msgs*/ 8) msg_1_changes.name = /*msg*/ ctx[4].name;

    			if (dirty & /*$$scope, $msgs*/ 2056) {
    				msg_1_changes.$$scope = { dirty, ctx };
    			}

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

    	dispatch_dev("SvelteRegisterBlock", {
    		block,
    		id: create_each_block$7.name,
    		type: "each",
    		source: "(56:3) {#each $msgs as msg}",
    		ctx
    	});

    	return block;
    }

    // (74:1) <Button my_class="send" on_click={send_msg}>
    function create_default_slot$a(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$a.name,
    		type: "slot",
    		source: "(74:1) <Button my_class=\\\"send\\\" on_click={send_msg}>",
    		ctx
    	});

    	return block;
    }

    function create_fragment$r(ctx) {
    	let div4;
    	let button0;
    	let t0;
    	let button1;
    	let t1;
    	let button2;
    	let t2;
    	let div1;
    	let div0;
    	let t3;
    	let div3;
    	let div2;
    	let t4;
    	let button3;
    	let current;
    	let mounted;
    	let dispose;

    	button0 = new Element_button({
    			props: {
    				new_layout: /*back*/ ctx[0],
    				my_class: "back icon",
    				my_title: "go back " + /*back*/ ctx[0],
    				$$slots: { default: [create_default_slot_4$4] },
    				$$scope: { ctx }
    			},
    			$$inline: true
    		});

    	button1 = new Element_button({
    			props: {
    				new_layout: "room_set",
    				my_class: "room_name transparent",
    				$$slots: { default: [create_default_slot_3$5] },
    				$$scope: { ctx }
    			},
    			$$inline: true
    		});

    	button2 = new Element_button({
    			props: {
    				new_layout: "close",
    				my_class: "close icon",
    				$$slots: { default: [create_default_slot_2$9] },
    				$$scope: { ctx }
    			},
    			$$inline: true
    		});

    	let each_value = /*$msgs*/ ctx[3];
    	validate_each_argument(each_value);
    	let each_blocks = [];

    	for (let i = 0; i < each_value.length; i += 1) {
    		each_blocks[i] = create_each_block$7(get_each_context$7(ctx, each_value, i));
    	}

    	const out = i => transition_out(each_blocks[i], 1, 1, () => {
    		each_blocks[i] = null;
    	});

    	button3 = new Element_button({
    			props: {
    				my_class: "send",
    				on_click: /*send_msg*/ ctx[5],
    				$$slots: { default: [create_default_slot$a] },
    				$$scope: { ctx }
    			},
    			$$inline: true
    		});

    	const block = {
    		c: function create() {
    			div4 = element("div");
    			create_component(button0.$$.fragment);
    			t0 = space();
    			create_component(button1.$$.fragment);
    			t1 = space();
    			create_component(button2.$$.fragment);
    			t2 = space();
    			div1 = element("div");
    			div0 = element("div");

    			for (let i = 0; i < each_blocks.length; i += 1) {
    				each_blocks[i].c();
    			}

    			t3 = space();
    			div3 = element("div");
    			div2 = element("div");
    			t4 = space();
    			create_component(button3.$$.fragment);
    			attr_dev(div0, "class", "msg_thread svelte-1quyp80");
    			add_location(div0, file$o, 54, 2, 950);
    			attr_dev(div1, "class", "panel panel_msg svelte-1quyp80");
    			add_location(div1, file$o, 53, 1, 918);
    			attr_dev(div2, "class", "text_area svelte-1quyp80");
    			attr_dev(div2, "contenteditable", "true");
    			if (/*msg*/ ctx[4] === void 0) add_render_callback(() => /*div2_input_handler*/ ctx[7].call(div2));
    			add_location(div2, file$o, 63, 2, 1124);
    			attr_dev(div3, "class", "panel_write svelte-1quyp80");
    			add_location(div3, file$o, 62, 1, 1096);
    			attr_dev(div4, "class", "grid_box svelte-1quyp80");
    			add_location(div4, file$o, 35, 0, 563);
    		},
    		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, div4, anchor);
    			mount_component(button0, div4, null);
    			append_dev(div4, t0);
    			mount_component(button1, div4, null);
    			append_dev(div4, t1);
    			mount_component(button2, div4, null);
    			append_dev(div4, t2);
    			append_dev(div4, div1);
    			append_dev(div1, div0);

    			for (let i = 0; i < each_blocks.length; i += 1) {
    				each_blocks[i].m(div0, null);
    			}

    			append_dev(div4, t3);
    			append_dev(div4, div3);
    			append_dev(div3, div2);

    			if (/*msg*/ ctx[4] !== void 0) {
    				div2.innerHTML = /*msg*/ ctx[4];
    			}

    			/*div2_binding*/ ctx[8](div2);
    			append_dev(div4, t4);
    			mount_component(button3, div4, null);
    			current = true;

    			if (!mounted) {
    				dispose = [
    					listen_dev(div2, "input", /*div2_input_handler*/ ctx[7]),
    					listen_dev(div2, "keypress", /*enter_send_msg*/ ctx[6], false, false, false)
    				];

    				mounted = true;
    			}
    		},
    		p: function update(ctx, [dirty]) {
    			const button0_changes = {};
    			if (dirty & /*back*/ 1) button0_changes.new_layout = /*back*/ ctx[0];
    			if (dirty & /*back*/ 1) button0_changes.my_title = "go back " + /*back*/ ctx[0];

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

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

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

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

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

    			button2.$set(button2_changes);

    			if (dirty & /*$msgs*/ 8) {
    				each_value = /*$msgs*/ ctx[3];
    				validate_each_argument(each_value);
    				let i;

    				for (i = 0; i < each_value.length; i += 1) {
    					const child_ctx = get_each_context$7(ctx, each_value, i);

    					if (each_blocks[i]) {
    						each_blocks[i].p(child_ctx, dirty);
    						transition_in(each_blocks[i], 1);
    					} else {
    						each_blocks[i] = create_each_block$7(child_ctx);
    						each_blocks[i].c();
    						transition_in(each_blocks[i], 1);
    						each_blocks[i].m(div0, null);
    					}
    				}

    				group_outros();

    				for (i = each_value.length; i < each_blocks.length; i += 1) {
    					out(i);
    				}

    				check_outros();
    			}

    			if (dirty & /*msg*/ 16 && /*msg*/ ctx[4] !== div2.innerHTML) {
    				div2.innerHTML = /*msg*/ ctx[4];
    			}

    			const button3_changes = {};

    			if (dirty & /*$$scope*/ 2048) {
    				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);

    			for (let i = 0; i < each_value.length; i += 1) {
    				transition_in(each_blocks[i]);
    			}

    			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);
    			each_blocks = each_blocks.filter(Boolean);

    			for (let i = 0; i < each_blocks.length; i += 1) {
    				transition_out(each_blocks[i]);
    			}

    			transition_out(button3.$$.fragment, local);
    			current = false;
    		},
    		d: function destroy(detaching) {
    			if (detaching) detach_dev(div4);
    			destroy_component(button0);
    			destroy_component(button1);
    			destroy_component(button2);
    			destroy_each(each_blocks, detaching);
    			/*div2_binding*/ ctx[8](null);
    			destroy_component(button3);
    			mounted = false;
    			run_all(dispose);
    		}
    	};

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

    	return block;
    }

    function instance$r($$self, $$props, $$invalidate) {
    	let $current_room_name;
    	let $msgs;
    	validate_store(current_room_name, 'current_room_name');
    	component_subscribe($$self, current_room_name, $$value => $$invalidate(2, $current_room_name = $$value));
    	validate_store(msgs, 'msgs');
    	component_subscribe($$self, msgs, $$value => $$invalidate(3, $msgs = $$value));
    	let { $$slots: slots = {}, $$scope } = $$props;
    	validate_slots('Layout_room', slots, []);
    	let { back = "" } = $$props;
    	let msg = "";
    	let text_area;

    	function send_msg() {
    		$$invalidate(4, msg = msg.trim());

    		if (msg.length > 0) {
    			socket$1.emit('message', msg);
    			add_msg("me", msg);
    			console.log(msgs);
    		}

    		$$invalidate(4, msg = "");
    		text_area.focus();
    	}

    	function enter_send_msg(evt) {
    		if (evt.shiftKey && evt.key === "Enter") {
    			evt.preventDefault();
    			send_msg();
    		}
    	}

    	const writable_props = ['back'];

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

    	function div2_input_handler() {
    		msg = this.innerHTML;
    		$$invalidate(4, msg);
    	}

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

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

    	$$self.$capture_state = () => ({
    		layout,
    		socket: socket$1,
    		msgs,
    		add_msg,
    		current_room_name,
    		Button: Element_button,
    		Msg: Element_msg,
    		back,
    		msg,
    		text_area,
    		send_msg,
    		enter_send_msg,
    		$current_room_name,
    		$msgs
    	});

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

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

    	return [
    		back,
    		text_area,
    		$current_room_name,
    		$msgs,
    		msg,
    		send_msg,
    		enter_send_msg,
    		div2_input_handler,
    		div2_binding
    	];
    }

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

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

    	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 { console: console_1$b } = globals;
    const file$n = "src/pieces/chat/Layout_new.svelte";

    function get_each_context$6(ctx, list, i) {
    	const child_ctx = ctx.slice();
    	child_ctx[3] = list[i];
    	return child_ctx;
    }

    // (26:1) <Button new_layout={back} my_class="back icon" my_title="go back {back}">
    function create_default_slot_4$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_4$3.name,
    		type: "slot",
    		source: "(26:1) <Button new_layout={back} my_class=\\\"back icon\\\" my_title=\\\"go back {back}\\\">",
    		ctx
    	});

    	return block;
    }

    // (31:1) <Button my_class="new deactivate">
    function create_default_slot_3$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_3$4.name,
    		type: "slot",
    		source: "(31:1) <Button my_class=\\\"new deactivate\\\">",
    		ctx
    	});

    	return block;
    }

    // (36:1) <Button new_layout="close" my_class="close icon">
    function create_default_slot_2$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_2$8.name,
    		type: "slot",
    		source: "(36:1) <Button new_layout=\\\"close\\\" my_class=\\\"close icon\\\">",
    		ctx
    	});

    	return block;
    }

    // (42:2) <Button new_layout="create" my_class="create">
    function create_default_slot_1$8(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_1$8.name,
    		type: "slot",
    		source: "(42:2) <Button new_layout=\\\"create\\\" my_class=\\\"create\\\">",
    		ctx
    	});

    	return block;
    }

    // (1:0) <script>   import { layout, msgs, user, socket }
    function create_catch_block$2(ctx) {
    	const block = {
    		c: noop,
    		m: noop,
    		p: noop,
    		i: noop,
    		o: noop,
    		d: noop
    	};

    	dispatch_dev("SvelteRegisterBlock", {
    		block,
    		id: create_catch_block$2.name,
    		type: "catch",
    		source: "(1:0) <script>   import { layout, msgs, user, socket }",
    		ctx
    	});

    	return block;
    }

    // (52:3) {:then rooms}
    function create_then_block$2(ctx) {
    	let each_1_anchor;
    	let current;
    	let each_value = /*rooms*/ ctx[2];
    	validate_each_argument(each_value);
    	let each_blocks = [];

    	for (let i = 0; i < each_value.length; i += 1) {
    		each_blocks[i] = create_each_block$6(get_each_context$6(ctx, each_value, i));
    	}

    	const out = i => transition_out(each_blocks[i], 1, 1, () => {
    		each_blocks[i] = null;
    	});

    	const block = {
    		c: function create() {
    			for (let i = 0; i < each_blocks.length; i += 1) {
    				each_blocks[i].c();
    			}

    			each_1_anchor = empty$1();
    		},
    		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);
    			current = true;
    		},
    		p: function update(ctx, dirty) {
    			if (dirty & /*join_rooms, rooms*/ 6) {
    				each_value = /*rooms*/ ctx[2];
    				validate_each_argument(each_value);
    				let i;

    				for (i = 0; i < each_value.length; i += 1) {
    					const child_ctx = get_each_context$6(ctx, each_value, i);

    					if (each_blocks[i]) {
    						each_blocks[i].p(child_ctx, dirty);
    						transition_in(each_blocks[i], 1);
    					} else {
    						each_blocks[i] = create_each_block$6(child_ctx);
    						each_blocks[i].c();
    						transition_in(each_blocks[i], 1);
    						each_blocks[i].m(each_1_anchor.parentNode, each_1_anchor);
    					}
    				}

    				group_outros();

    				for (i = each_value.length; i < each_blocks.length; i += 1) {
    					out(i);
    				}

    				check_outros();
    			}
    		},
    		i: function intro(local) {
    			if (current) return;

    			for (let i = 0; i < each_value.length; i += 1) {
    				transition_in(each_blocks[i]);
    			}

    			current = true;
    		},
    		o: function outro(local) {
    			each_blocks = each_blocks.filter(Boolean);

    			for (let i = 0; i < each_blocks.length; i += 1) {
    				transition_out(each_blocks[i]);
    			}

    			current = false;
    		},
    		d: function destroy(detaching) {
    			destroy_each(each_blocks, detaching);
    			if (detaching) detach_dev(each_1_anchor);
    		}
    	};

    	dispatch_dev("SvelteRegisterBlock", {
    		block,
    		id: create_then_block$2.name,
    		type: "then",
    		source: "(52:3) {:then rooms}",
    		ctx
    	});

    	return block;
    }

    // (54:5) <Button my_class="list" on_click={join_rooms}>
    function create_default_slot$9(ctx) {
    	let t0_value = /*room*/ ctx[3].name + "";
    	let t0;
    	let t1;

    	const block = {
    		c: function create() {
    			t0 = text(t0_value);
    			t1 = space();
    		},
    		m: function mount(target, anchor) {
    			insert_dev(target, t0, anchor);
    			insert_dev(target, t1, anchor);
    		},
    		p: noop,
    		d: function destroy(detaching) {
    			if (detaching) detach_dev(t0);
    			if (detaching) detach_dev(t1);
    		}
    	};

    	dispatch_dev("SvelteRegisterBlock", {
    		block,
    		id: create_default_slot$9.name,
    		type: "slot",
    		source: "(54:5) <Button my_class=\\\"list\\\" on_click={join_rooms}>",
    		ctx
    	});

    	return block;
    }

    // (53:4) {#each rooms as room}
    function create_each_block$6(ctx) {
    	let button;
    	let current;

    	button = new Element_button({
    			props: {
    				my_class: "list",
    				on_click: /*join_rooms*/ ctx[1],
    				$$slots: { default: [create_default_slot$9] },
    				$$scope: { ctx }
    			},
    			$$inline: true
    		});

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

    			if (dirty & /*$$scope*/ 64) {
    				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) {
    			destroy_component(button, detaching);
    		}
    	};

    	dispatch_dev("SvelteRegisterBlock", {
    		block,
    		id: create_each_block$6.name,
    		type: "each",
    		source: "(53:4) {#each rooms as room}",
    		ctx
    	});

    	return block;
    }

    // (50:17)      <p>rooms are loading...</p>    {:then rooms}
    function create_pending_block$2(ctx) {
    	let p;

    	const block = {
    		c: function create() {
    			p = element("p");
    			p.textContent = "rooms are loading...";
    			add_location(p, file$n, 50, 4, 1077);
    		},
    		m: function mount(target, anchor) {
    			insert_dev(target, p, anchor);
    		},
    		p: noop,
    		i: noop,
    		o: noop,
    		d: function destroy(detaching) {
    			if (detaching) detach_dev(p);
    		}
    	};

    	dispatch_dev("SvelteRegisterBlock", {
    		block,
    		id: create_pending_block$2.name,
    		type: "pending",
    		source: "(50:17)      <p>rooms are loading...</p>    {:then rooms}",
    		ctx
    	});

    	return block;
    }

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

    	button0 = new Element_button({
    			props: {
    				new_layout: /*back*/ ctx[0],
    				my_class: "back icon",
    				my_title: "go back " + /*back*/ ctx[0],
    				$$slots: { default: [create_default_slot_4$3] },
    				$$scope: { ctx }
    			},
    			$$inline: true
    		});

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

    	button2 = new Element_button({
    			props: {
    				new_layout: "close",
    				my_class: "close icon",
    				$$slots: { default: [create_default_slot_2$8] },
    				$$scope: { ctx }
    			},
    			$$inline: true
    		});

    	button3 = new Element_button({
    			props: {
    				new_layout: "create",
    				my_class: "create",
    				$$slots: { default: [create_default_slot_1$8] },
    				$$scope: { ctx }
    			},
    			$$inline: true
    		});

    	let info = {
    		ctx,
    		current: null,
    		token: null,
    		hasCatch: false,
    		pending: create_pending_block$2,
    		then: create_then_block$2,
    		catch: create_catch_block$2,
    		value: 2,
    		blocks: [,,,]
    	};

    	handle_promise(/*rooms*/ ctx[2], info);

    	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 /";
    			t7 = space();
    			info.block.c();
    			add_location(p0, file$n, 44, 2, 897);
    			attr_dev(p1, "class", "__center");
    			add_location(p1, file$n, 47, 4, 987);
    			attr_dev(div0, "class", "__show_if_only_child");
    			add_location(div0, file$n, 46, 3, 948);
    			attr_dev(div1, "class", "public_rooms");
    			add_location(div1, file$n, 45, 2, 918);
    			attr_dev(div2, "class", "panel panel_new __border_top");
    			add_location(div2, file$n, 40, 1, 781);
    			attr_dev(div3, "class", "grid_box svelte-1b4c0qx");
    			add_location(div3, file$n, 22, 0, 472);
    		},
    		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);
    			info.block.m(div1, info.anchor = null);
    			info.mount = () => div1;
    			info.anchor = null;
    			current = true;
    		},
    		p: function update(new_ctx, [dirty]) {
    			ctx = new_ctx;
    			const button0_changes = {};
    			if (dirty & /*back*/ 1) button0_changes.new_layout = /*back*/ ctx[0];
    			if (dirty & /*back*/ 1) button0_changes.my_title = "go back " + /*back*/ ctx[0];

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

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

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

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

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

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

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

    			button3.$set(button3_changes);
    			update_await_block_branch(info, ctx, dirty);
    		},
    		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(info.block);
    			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);

    			for (let i = 0; i < 3; i += 1) {
    				const block = info.blocks[i];
    				transition_out(block);
    			}

    			current = false;
    		},
    		d: function destroy(detaching) {
    			if (detaching) detach_dev(div3);
    			destroy_component(button0);
    			destroy_component(button1);
    			destroy_component(button2);
    			destroy_component(button3);
    			info.block.d();
    			info.token = null;
    			info = null;
    		}
    	};

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

    	return block;
    }

    function instance$q($$self, $$props, $$invalidate) {
    	let { $$slots: slots = {}, $$scope } = $$props;
    	validate_slots('Layout_new', slots, []);
    	let { back = "" } = $$props;
    	let rooms = get_all_rooms();

    	// join the room
    	async function join_rooms(evt) {
    		console.log("inside join_room");
    		let room_name = evt.target.innerText;
    		await join_room(room_name);
    		await change_room(room_name);
    	}

    	const writable_props = ['back'];

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

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

    	$$self.$capture_state = () => ({
    		layout,
    		msgs,
    		user,
    		socket: socket$1,
    		join_room,
    		change_room,
    		get_room_messages,
    		get_all_rooms,
    		Button: Element_button,
    		back,
    		rooms,
    		join_rooms
    	});

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

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

    	return [back, join_rooms, rooms];
    }

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

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

    	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$m = "src/pieces/chat/Layout_settings.svelte";

    // (13:1) <Button new_layout={back} my_class="back icon" my_title="go back {back}">
    function create_default_slot_2$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_2$7.name,
    		type: "slot",
    		source: "(13:1) <Button new_layout={back} my_class=\\\"back icon\\\" my_title=\\\"go back {back}\\\">",
    		ctx
    	});

    	return block;
    }

    // (18:1) <Button my_class="room_name deactivate">
    function create_default_slot_1$7(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_1$7.name,
    		type: "slot",
    		source: "(18:1) <Button my_class=\\\"room_name deactivate\\\">",
    		ctx
    	});

    	return block;
    }

    // (23:1) <Button 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: "(23:1) <Button new_layout=\\\"close\\\" my_class=\\\"close icon\\\">",
    		ctx
    	});

    	return block;
    }

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

    	button0 = new Element_button({
    			props: {
    				new_layout: /*back*/ ctx[0],
    				my_class: "back icon",
    				my_title: "go back " + /*back*/ ctx[0],
    				$$slots: { default: [create_default_slot_2$7] },
    				$$scope: { ctx }
    			},
    			$$inline: true
    		});

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

    	button2 = new Element_button({
    			props: {
    				new_layout: "close",
    				my_class: "close icon",
    				$$slots: { default: [create_default_slot$8] },
    				$$scope: { ctx }
    			},
    			$$inline: true
    		});

    	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 /";
    			add_location(p0, file$m, 28, 2, 513);
    			attr_dev(p1, "class", "__center");
    			add_location(p1, file$m, 31, 4, 608);
    			attr_dev(div0, "class", "__show_if_only_child");
    			add_location(div0, file$m, 30, 3, 569);
    			attr_dev(div1, "class", "blocked_users");
    			add_location(div1, file$m, 29, 2, 538);
    			attr_dev(div2, "class", "panel panel_settings __border_top");
    			add_location(div2, file$m, 27, 1, 463);
    			attr_dev(div3, "class", "grid_box svelte-1lfmc2m");
    			add_location(div3, file$m, 9, 0, 133);
    		},
    		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 & /*back*/ 1) button0_changes.new_layout = /*back*/ ctx[0];
    			if (dirty & /*back*/ 1) button0_changes.my_title = "go back " + /*back*/ ctx[0];

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

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

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

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

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

    			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$p.name,
    		type: "component",
    		source: "",
    		ctx
    	});

    	return block;
    }

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

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

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

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

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

    	return [back];
    }

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

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

    	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 { console: console_1$a } = globals;
    const file$l = "src/pieces/chat/Layout_room_set.svelte";

    function get_each_context$5(ctx, list, i) {
    	const child_ctx = ctx.slice();
    	child_ctx[4] = list[i];
    	return child_ctx;
    }

    // (28:1) <Button new_layout={back} my_class="back icon" my_title="go back {back}">
    function create_default_slot_4$2(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_4$2.name,
    		type: "slot",
    		source: "(28:1) <Button new_layout={back} my_class=\\\"back icon\\\" my_title=\\\"go back {back}\\\">",
    		ctx
    	});

    	return block;
    }

    // (33:1) <Button my_class="room_name deactivate">
    function create_default_slot_3$3(ctx) {
    	let t;

    	const block = {
    		c: function create() {
    			t = text(/*$current_room_name*/ ctx[1]);
    		},
    		m: function mount(target, anchor) {
    			insert_dev(target, t, anchor);
    		},
    		p: function update(ctx, dirty) {
    			if (dirty & /*$current_room_name*/ 2) set_data_dev(t, /*$current_room_name*/ ctx[1]);
    		},
    		d: function destroy(detaching) {
    			if (detaching) detach_dev(t);
    		}
    	};

    	dispatch_dev("SvelteRegisterBlock", {
    		block,
    		id: create_default_slot_3$3.name,
    		type: "slot",
    		source: "(33:1) <Button my_class=\\\"room_name deactivate\\\">",
    		ctx
    	});

    	return block;
    }

    // (38:1) <Button new_layout="close" my_class="close icon">
    function create_default_slot_2$6(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_2$6.name,
    		type: "slot",
    		source: "(38:1) <Button new_layout=\\\"close\\\" my_class=\\\"close icon\\\">",
    		ctx
    	});

    	return block;
    }

    // (44:2) <Button on_click={leave_room}>
    function create_default_slot_1$6(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_1$6.name,
    		type: "slot",
    		source: "(44:2) <Button on_click={leave_room}>",
    		ctx
    	});

    	return block;
    }

    // (1:0) <script>   import { layout, current_room_name }
    function create_catch_block$1(ctx) {
    	const block = {
    		c: noop,
    		m: noop,
    		p: noop,
    		i: noop,
    		o: noop,
    		d: noop
    	};

    	dispatch_dev("SvelteRegisterBlock", {
    		block,
    		id: create_catch_block$1.name,
    		type: "catch",
    		source: "(1:0) <script>   import { layout, current_room_name }",
    		ctx
    	});

    	return block;
    }

    // (54:3) {:then users}
    function create_then_block$1(ctx) {
    	let each_1_anchor;
    	let current;
    	let each_value = /*users*/ ctx[3];
    	validate_each_argument(each_value);
    	let each_blocks = [];

    	for (let i = 0; i < each_value.length; i += 1) {
    		each_blocks[i] = create_each_block$5(get_each_context$5(ctx, each_value, i));
    	}

    	const out = i => transition_out(each_blocks[i], 1, 1, () => {
    		each_blocks[i] = null;
    	});

    	const block = {
    		c: function create() {
    			for (let i = 0; i < each_blocks.length; i += 1) {
    				each_blocks[i].c();
    			}

    			each_1_anchor = empty$1();
    		},
    		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);
    			current = true;
    		},
    		p: function update(ctx, dirty) {
    			if (dirty & /*user_profile, users*/ 8) {
    				each_value = /*users*/ ctx[3];
    				validate_each_argument(each_value);
    				let i;

    				for (i = 0; i < each_value.length; i += 1) {
    					const child_ctx = get_each_context$5(ctx, each_value, i);

    					if (each_blocks[i]) {
    						each_blocks[i].p(child_ctx, dirty);
    						transition_in(each_blocks[i], 1);
    					} else {
    						each_blocks[i] = create_each_block$5(child_ctx);
    						each_blocks[i].c();
    						transition_in(each_blocks[i], 1);
    						each_blocks[i].m(each_1_anchor.parentNode, each_1_anchor);
    					}
    				}

    				group_outros();

    				for (i = each_value.length; i < each_blocks.length; i += 1) {
    					out(i);
    				}

    				check_outros();
    			}
    		},
    		i: function intro(local) {
    			if (current) return;

    			for (let i = 0; i < each_value.length; i += 1) {
    				transition_in(each_blocks[i]);
    			}

    			current = true;
    		},
    		o: function outro(local) {
    			each_blocks = each_blocks.filter(Boolean);

    			for (let i = 0; i < each_blocks.length; i += 1) {
    				transition_out(each_blocks[i]);
    			}

    			current = false;
    		},
    		d: function destroy(detaching) {
    			destroy_each(each_blocks, detaching);
    			if (detaching) detach_dev(each_1_anchor);
    		}
    	};

    	dispatch_dev("SvelteRegisterBlock", {
    		block,
    		id: create_then_block$1.name,
    		type: "then",
    		source: "(54:3) {:then users}",
    		ctx
    	});

    	return block;
    }

    // (56:5) <Button new_layout="user" my_class="list" on_click={user_profile}>
    function create_default_slot$7(ctx) {
    	let t0_value = /*user*/ ctx[4] + "";
    	let t0;
    	let t1;

    	const block = {
    		c: function create() {
    			t0 = text(t0_value);
    			t1 = space();
    		},
    		m: function mount(target, anchor) {
    			insert_dev(target, t0, anchor);
    			insert_dev(target, t1, anchor);
    		},
    		p: noop,
    		d: function destroy(detaching) {
    			if (detaching) detach_dev(t0);
    			if (detaching) detach_dev(t1);
    		}
    	};

    	dispatch_dev("SvelteRegisterBlock", {
    		block,
    		id: create_default_slot$7.name,
    		type: "slot",
    		source: "(56:5) <Button new_layout=\\\"user\\\" my_class=\\\"list\\\" on_click={user_profile}>",
    		ctx
    	});

    	return block;
    }

    // (55:4) {#each users as user}
    function create_each_block$5(ctx) {
    	let button;
    	let current;

    	button = new Element_button({
    			props: {
    				new_layout: "user",
    				my_class: "list",
    				on_click: user_profile,
    				$$slots: { default: [create_default_slot$7] },
    				$$scope: { ctx }
    			},
    			$$inline: true
    		});

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

    			if (dirty & /*$$scope*/ 128) {
    				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) {
    			destroy_component(button, detaching);
    		}
    	};

    	dispatch_dev("SvelteRegisterBlock", {
    		block,
    		id: create_each_block$5.name,
    		type: "each",
    		source: "(55:4) {#each users as user}",
    		ctx
    	});

    	return block;
    }

    // (52:17)      <p>list of users is loading...</p>    {:then users}
    function create_pending_block$1(ctx) {
    	let p;

    	const block = {
    		c: function create() {
    			p = element("p");
    			p.textContent = "list of users is loading...";
    			add_location(p, file$l, 52, 4, 1049);
    		},
    		m: function mount(target, anchor) {
    			insert_dev(target, p, anchor);
    		},
    		p: noop,
    		i: noop,
    		o: noop,
    		d: function destroy(detaching) {
    			if (detaching) detach_dev(p);
    		}
    	};

    	dispatch_dev("SvelteRegisterBlock", {
    		block,
    		id: create_pending_block$1.name,
    		type: "pending",
    		source: "(52:17)      <p>list of users is loading...</p>    {:then users}",
    		ctx
    	});

    	return block;
    }

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

    	button0 = new Element_button({
    			props: {
    				new_layout: /*back*/ ctx[0],
    				my_class: "back icon",
    				my_title: "go back " + /*back*/ ctx[0],
    				$$slots: { default: [create_default_slot_4$2] },
    				$$scope: { ctx }
    			},
    			$$inline: true
    		});

    	button1 = new Element_button({
    			props: {
    				my_class: "room_name deactivate",
    				$$slots: { default: [create_default_slot_3$3] },
    				$$scope: { ctx }
    			},
    			$$inline: true
    		});

    	button2 = new Element_button({
    			props: {
    				new_layout: "close",
    				my_class: "close icon",
    				$$slots: { default: [create_default_slot_2$6] },
    				$$scope: { ctx }
    			},
    			$$inline: true
    		});

    	button3 = new Element_button({
    			props: {
    				on_click: /*leave_room*/ ctx[2],
    				$$slots: { default: [create_default_slot_1$6] },
    				$$scope: { ctx }
    			},
    			$$inline: true
    		});

    	let info = {
    		ctx,
    		current: null,
    		token: null,
    		hasCatch: false,
    		pending: create_pending_block$1,
    		then: create_then_block$1,
    		catch: create_catch_block$1,
    		value: 3,
    		blocks: [,,,]
    	};

    	handle_promise(/*users*/ ctx[3], info);

    	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();
    			info.block.c();
    			add_location(p0, file$l, 46, 2, 870);
    			attr_dev(p1, "class", "__center");
    			add_location(p1, file$l, 49, 4, 959);
    			attr_dev(div0, "class", "__show_if_only_child");
    			add_location(div0, file$l, 48, 3, 920);
    			attr_dev(div1, "class", "room_users");
    			add_location(div1, file$l, 47, 2, 892);
    			attr_dev(div2, "class", "panel panel_room_set __border_top");
    			add_location(div2, file$l, 42, 1, 766);
    			attr_dev(div3, "class", "grid_box svelte-1sv7l8q");
    			add_location(div3, file$l, 24, 0, 423);
    		},
    		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);
    			info.block.m(div1, info.anchor = null);
    			info.mount = () => div1;
    			info.anchor = null;
    			current = true;
    		},
    		p: function update(new_ctx, [dirty]) {
    			ctx = new_ctx;
    			const button0_changes = {};
    			if (dirty & /*back*/ 1) button0_changes.new_layout = /*back*/ ctx[0];
    			if (dirty & /*back*/ 1) button0_changes.my_title = "go back " + /*back*/ ctx[0];

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

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

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

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

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

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

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

    			button3.$set(button3_changes);
    			update_await_block_branch(info, ctx, dirty);
    		},
    		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(info.block);
    			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);

    			for (let i = 0; i < 3; i += 1) {
    				const block = info.blocks[i];
    				transition_out(block);
    			}

    			current = false;
    		},
    		d: function destroy(detaching) {
    			if (detaching) detach_dev(div3);
    			destroy_component(button0);
    			destroy_component(button1);
    			destroy_component(button2);
    			destroy_component(button3);
    			info.block.d();
    			info.token = null;
    			info = null;
    		}
    	};

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

    	return block;
    }

    function user_profile() {
    	console / log("in user_profile");
    }

    function instance$o($$self, $$props, $$invalidate) {
    	let $current_room_name;
    	validate_store(current_room_name, 'current_room_name');
    	component_subscribe($$self, current_room_name, $$value => $$invalidate(1, $current_room_name = $$value));
    	let { $$slots: slots = {}, $$scope } = $$props;
    	validate_slots('Layout_room_set', slots, []);
    	let { back = "" } = $$props;
    	let users = get_room_users();

    	function leave_room() {
    		console.log("in leave_room");
    		user_leave_room();
    		layout.set("home");
    	}

    	const writable_props = ['back'];

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

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

    	$$self.$capture_state = () => ({
    		layout,
    		current_room_name,
    		get_room_users,
    		user_leave_room,
    		Button: Element_button,
    		back,
    		users,
    		user_profile,
    		leave_room,
    		$current_room_name
    	});

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

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

    	return [back, $current_room_name, leave_room, users];
    }

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

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

    	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$k = "src/pieces/chat/Layout_protected.svelte";

    // (13:1) <Button new_layout={back} my_class="back icon" my_title="go back {back}">
    function create_default_slot_2$5(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$5.name,
    		type: "slot",
    		source: "(13:1) <Button new_layout={back} my_class=\\\"back icon\\\" my_title=\\\"go back {back}\\\">",
    		ctx
    	});

    	return block;
    }

    // (18:1) <Button my_class="room_name deactivate">
    function create_default_slot_1$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_1$5.name,
    		type: "slot",
    		source: "(18:1) <Button my_class=\\\"room_name deactivate\\\">",
    		ctx
    	});

    	return block;
    }

    // (23:1) <Button new_layout="close" my_class="close icon">
    function create_default_slot$6(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$6.name,
    		type: "slot",
    		source: "(23:1) <Button new_layout=\\\"close\\\" my_class=\\\"close icon\\\">",
    		ctx
    	});

    	return block;
    }

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

    	button0 = new Element_button({
    			props: {
    				new_layout: /*back*/ ctx[0],
    				my_class: "back icon",
    				my_title: "go back " + /*back*/ ctx[0],
    				$$slots: { default: [create_default_slot_2$5] },
    				$$scope: { ctx }
    			},
    			$$inline: true
    		});

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

    	button2 = new Element_button({
    			props: {
    				new_layout: "close",
    				my_class: "close icon",
    				$$slots: { default: [create_default_slot$6] },
    				$$scope: { ctx }
    			},
    			$$inline: true
    		});

    	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");
    			add_location(p0, file$k, 28, 2, 525);
    			add_location(p1, file$k, 30, 26, 613);
    			attr_dev(label, "for", "chat_pswd");
    			add_location(label, file$k, 30, 3, 590);
    			attr_dev(input0, "id", "chat_pswd");
    			attr_dev(input0, "type", "password");
    			input0.required = true;
    			add_location(input0, file$k, 31, 3, 642);
    			attr_dev(input1, "type", "submit");
    			input1.value = "⮡";
    			attr_dev(input1, "class", "svelte-2tekts");
    			add_location(input1, file$k, 32, 3, 694);
    			attr_dev(form, "class", "svelte-2tekts");
    			add_location(form, file$k, 29, 2, 580);
    			attr_dev(div0, "class", "panel panel_protected __border_top");
    			add_location(div0, file$k, 27, 1, 474);
    			attr_dev(div1, "class", "grid_box svelte-2tekts");
    			add_location(div1, file$k, 9, 0, 133);
    		},
    		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*/ 1) button0_changes.new_layout = /*back*/ ctx[0];
    			if (dirty & /*back*/ 1) button0_changes.my_title = "go back " + /*back*/ ctx[0];

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

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

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

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

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

    			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$n.name,
    		type: "component",
    		source: "",
    		ctx
    	});

    	return block;
    }

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

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

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

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

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

    	return [back];
    }

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

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

    	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/Element_warning.svelte generated by Svelte v3.53.1 */

    const file$j = "src/pieces/chat/Element_warning.svelte";

    function create_fragment$m(ctx) {
    	let p;
    	let t;

    	const block = {
    		c: function create() {
    			p = element("p");
    			t = text(/*content*/ ctx[0]);
    			set_style(p, "background-color", /*bg_color*/ ctx[1]);
    			set_style(p, "color", /*color*/ ctx[2]);
    			add_location(p, file$j, 8, 0, 140);
    		},
    		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, p, anchor);
    			append_dev(p, t);
    		},
    		p: function update(ctx, [dirty]) {
    			if (dirty & /*content*/ 1) set_data_dev(t, /*content*/ ctx[0]);

    			if (dirty & /*bg_color*/ 2) {
    				set_style(p, "background-color", /*bg_color*/ ctx[1]);
    			}

    			if (dirty & /*color*/ 4) {
    				set_style(p, "color", /*color*/ ctx[2]);
    			}
    		},
    		i: noop,
    		o: noop,
    		d: function destroy(detaching) {
    			if (detaching) detach_dev(p);
    		}
    	};

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

    	return block;
    }

    function instance$m($$self, $$props, $$invalidate) {
    	let { $$slots: slots = {}, $$scope } = $$props;
    	validate_slots('Element_warning', slots, []);
    	let { content = "warning" } = $$props;
    	let { bg_color = "rgb(201, 87, 34)" } = $$props;
    	let { color = "rgb(240, 240, 240)" } = $$props;
    	const writable_props = ['content', 'bg_color', 'color'];

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

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

    	$$self.$capture_state = () => ({ content, bg_color, color });

    	$$self.$inject_state = $$props => {
    		if ('content' in $$props) $$invalidate(0, content = $$props.content);
    		if ('bg_color' in $$props) $$invalidate(1, bg_color = $$props.bg_color);
    		if ('color' in $$props) $$invalidate(2, color = $$props.color);
    	};

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

    	return [content, bg_color, color];
    }

    class Element_warning extends SvelteComponentDev {
    	constructor(options) {
    		super(options);
    		init$2(this, options, instance$m, create_fragment$m, safe_not_equal, { content: 0, bg_color: 1, color: 2 });

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

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

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

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

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

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

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

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

    const { console: console_1$9 } = globals;
    const file$i = "src/pieces/chat/Layout_create.svelte";

    // (38:1) <Button new_layout={back} my_class="back icon" my_title="go back {back}">
    function create_default_slot_2$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_2$4.name,
    		type: "slot",
    		source: "(38:1) <Button new_layout={back} my_class=\\\"back icon\\\" my_title=\\\"go back {back}\\\">",
    		ctx
    	});

    	return block;
    }

    // (43:1) <Button my_class="create deactivate">
    function create_default_slot_1$4(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_1$4.name,
    		type: "slot",
    		source: "(43:1) <Button my_class=\\\"create deactivate\\\">",
    		ctx
    	});

    	return block;
    }

    // (48:1) <Button 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: "(48:1) <Button new_layout=\\\"close\\\" my_class=\\\"close icon\\\">",
    		ctx
    	});

    	return block;
    }

    // (55:3) {#if response.status >= 300}
    function create_if_block_1$5(ctx) {
    	let warning;
    	let current;

    	warning = new Element_warning({
    			props: { content: /*response*/ ctx[5].message },
    			$$inline: true
    		});

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

    	dispatch_dev("SvelteRegisterBlock", {
    		block,
    		id: create_if_block_1$5.name,
    		type: "if",
    		source: "(55:3) {#if response.status >= 300}",
    		ctx
    	});

    	return block;
    }

    // (80:3) {#if room_type === 'protected'}
    function create_if_block$b(ctx) {
    	let div;
    	let label;
    	let p;
    	let t1;
    	let input;
    	let mounted;
    	let dispose;

    	const block = {
    		c: function create() {
    			div = element("div");
    			label = element("label");
    			p = element("p");
    			p.textContent = "choose a password :";
    			t1 = space();
    			input = element("input");
    			attr_dev(p, "class", "svelte-1ulnmwp");
    			add_location(p, file$i, 81, 28, 2570);
    			attr_dev(label, "for", "chat_pswd");
    			attr_dev(label, "class", "svelte-1ulnmwp");
    			add_location(label, file$i, 81, 5, 2547);
    			attr_dev(input, "id", "chat_pswd");
    			attr_dev(input, "type", "password");
    			attr_dev(input, "placeholder", "minimum 8 characters");
    			attr_dev(input, "minlength", "8");
    			attr_dev(input, "name", "password");
    			input.required = true;
    			attr_dev(input, "class", "svelte-1ulnmwp");
    			add_location(input, file$i, 82, 5, 2610);
    			attr_dev(div, "class", "svelte-1ulnmwp");
    			add_location(div, file$i, 80, 4, 2536);
    		},
    		m: function mount(target, anchor) {
    			insert_dev(target, div, anchor);
    			append_dev(div, label);
    			append_dev(label, p);
    			append_dev(div, t1);
    			append_dev(div, input);
    			set_input_value(input, /*room_password*/ ctx[4]);

    			if (!mounted) {
    				dispose = listen_dev(input, "input", /*input_input_handler*/ ctx[12]);
    				mounted = true;
    			}
    		},
    		p: function update(ctx, dirty) {
    			if (dirty & /*room_password*/ 16 && input.value !== /*room_password*/ ctx[4]) {
    				set_input_value(input, /*room_password*/ ctx[4]);
    			}
    		},
    		d: function destroy(detaching) {
    			if (detaching) detach_dev(div);
    			mounted = false;
    			dispose();
    		}
    	};

    	dispatch_dev("SvelteRegisterBlock", {
    		block,
    		id: create_if_block$b.name,
    		type: "if",
    		source: "(80:3) {#if room_type === 'protected'}",
    		ctx
    	});

    	return block;
    }

    function create_fragment$l(ctx) {
    	let div1;
    	let button0;
    	let t0;
    	let button1;
    	let t1;
    	let button2;
    	let t2;
    	let div0;
    	let form;
    	let t3;
    	let label0;
    	let p0;
    	let t5;
    	let input0;
    	let input0_placeholder_value;
    	let t6;
    	let label1;
    	let p1;
    	let t8;
    	let input1;
    	let t9;
    	let label2;
    	let p2;
    	let t11;
    	let input2;
    	let t12;
    	let label3;
    	let p3;
    	let t14;
    	let input3;
    	let t15;
    	let t16;
    	let input4;
    	let current;
    	let mounted;
    	let dispose;

    	button0 = new Element_button({
    			props: {
    				new_layout: /*back*/ ctx[0],
    				my_class: "back icon",
    				my_title: "go back " + /*back*/ ctx[0],
    				$$slots: { default: [create_default_slot_2$4] },
    				$$scope: { ctx }
    			},
    			$$inline: true
    		});

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

    	button2 = new Element_button({
    			props: {
    				new_layout: "close",
    				my_class: "close icon",
    				$$slots: { default: [create_default_slot$5] },
    				$$scope: { ctx }
    			},
    			$$inline: true
    		});

    	let if_block0 = /*response*/ ctx[5].status >= 300 && create_if_block_1$5(ctx);
    	let if_block1 = /*room_type*/ ctx[3] === 'protected' && create_if_block$b(ctx);

    	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");
    			form = element("form");
    			if (if_block0) if_block0.c();
    			t3 = space();
    			label0 = element("label");
    			p0 = element("p");
    			p0.textContent = "new room name :";
    			t5 = space();
    			input0 = element("input");
    			t6 = space();
    			label1 = element("label");
    			p1 = element("p");
    			p1.textContent = "public";
    			t8 = space();
    			input1 = element("input");
    			t9 = space();
    			label2 = element("label");
    			p2 = element("p");
    			p2.textContent = "private";
    			t11 = space();
    			input2 = element("input");
    			t12 = space();
    			label3 = element("label");
    			p3 = element("p");
    			p3.textContent = "protected";
    			t14 = space();
    			input3 = element("input");
    			t15 = space();
    			if (if_block1) if_block1.c();
    			t16 = space();
    			input4 = element("input");
    			attr_dev(p0, "class", "svelte-1ulnmwp");
    			add_location(p0, file$i, 58, 26, 1500);
    			attr_dev(label0, "for", "chat_name");
    			attr_dev(label0, "class", "svelte-1ulnmwp");
    			add_location(label0, file$i, 58, 3, 1477);
    			attr_dev(input0, "id", "chat_name");
    			attr_dev(input0, "name", "room_name");
    			attr_dev(input0, "placeholder", input0_placeholder_value = "allowed special characters: " + /*allowed_chars*/ ctx[1]);
    			input0.required = true;
    			attr_dev(input0, "class", "svelte-1ulnmwp");
    			add_location(input0, file$i, 62, 3, 1699);
    			attr_dev(p1, "class", "svelte-1ulnmwp");
    			add_location(p1, file$i, 65, 4, 1900);
    			attr_dev(input1, "id", "chat_public");
    			attr_dev(input1, "type", "radio");
    			attr_dev(input1, "name", "room_type");
    			input1.__value = "public";
    			input1.value = input1.__value;
    			input1.required = true;
    			attr_dev(input1, "class", "svelte-1ulnmwp");
    			/*$$binding_groups*/ ctx[9][0].push(input1);
    			add_location(input1, file$i, 66, 4, 1918);
    			attr_dev(label1, "for", "chat_public");
    			attr_dev(label1, "class", "_radio svelte-1ulnmwp");
    			add_location(label1, file$i, 64, 3, 1855);
    			attr_dev(p2, "class", "svelte-1ulnmwp");
    			add_location(p2, file$i, 70, 4, 2111);
    			attr_dev(input2, "id", "chat_private");
    			attr_dev(input2, "type", "radio");
    			attr_dev(input2, "name", "room_type");
    			input2.__value = "private";
    			input2.value = input2.__value;
    			input2.required = true;
    			attr_dev(input2, "class", "svelte-1ulnmwp");
    			/*$$binding_groups*/ ctx[9][0].push(input2);
    			add_location(input2, file$i, 71, 4, 2130);
    			attr_dev(label2, "for", "chat_private");
    			attr_dev(label2, "class", "_radio hide svelte-1ulnmwp");
    			add_location(label2, file$i, 69, 3, 2060);
    			attr_dev(p3, "class", "svelte-1ulnmwp");
    			add_location(p3, file$i, 75, 4, 2329);
    			attr_dev(input3, "id", "chat_protected");
    			attr_dev(input3, "type", "radio");
    			attr_dev(input3, "name", "room_type");
    			input3.__value = "protected";
    			input3.value = input3.__value;
    			input3.required = true;
    			attr_dev(input3, "class", "svelte-1ulnmwp");
    			/*$$binding_groups*/ ctx[9][0].push(input3);
    			add_location(input3, file$i, 76, 4, 2350);
    			attr_dev(label3, "for", "chat_protected");
    			attr_dev(label3, "class", "_radio hide svelte-1ulnmwp");
    			add_location(label3, file$i, 74, 3, 2276);
    			attr_dev(input4, "type", "submit");
    			input4.value = "⮡";
    			attr_dev(input4, "class", "svelte-1ulnmwp");
    			add_location(input4, file$i, 85, 3, 2774);
    			attr_dev(form, "class", "svelte-1ulnmwp");
    			add_location(form, file$i, 53, 2, 1326);
    			attr_dev(div0, "class", "panel panel_create __border_top svelte-1ulnmwp");
    			add_location(div0, file$i, 52, 1, 1278);
    			attr_dev(div1, "class", "grid_box svelte-1ulnmwp");
    			add_location(div1, file$i, 34, 0, 957);
    		},
    		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, form);
    			if (if_block0) if_block0.m(form, null);
    			append_dev(form, t3);
    			append_dev(form, label0);
    			append_dev(label0, p0);
    			append_dev(form, t5);
    			append_dev(form, input0);
    			set_input_value(input0, /*room_name*/ ctx[2]);
    			append_dev(form, t6);
    			append_dev(form, label1);
    			append_dev(label1, p1);
    			append_dev(label1, t8);
    			append_dev(label1, input1);
    			input1.checked = input1.__value === /*room_type*/ ctx[3];
    			append_dev(form, t9);
    			append_dev(form, label2);
    			append_dev(label2, p2);
    			append_dev(label2, t11);
    			append_dev(label2, input2);
    			input2.checked = input2.__value === /*room_type*/ ctx[3];
    			append_dev(form, t12);
    			append_dev(form, label3);
    			append_dev(label3, p3);
    			append_dev(label3, t14);
    			append_dev(label3, input3);
    			input3.checked = input3.__value === /*room_type*/ ctx[3];
    			append_dev(form, t15);
    			if (if_block1) if_block1.m(form, null);
    			append_dev(form, t16);
    			append_dev(form, input4);
    			current = true;

    			if (!mounted) {
    				dispose = [
    					listen_dev(input0, "input", /*input0_input_handler*/ ctx[7]),
    					listen_dev(input1, "change", /*input1_change_handler*/ ctx[8]),
    					listen_dev(input2, "change", /*input2_change_handler*/ ctx[10]),
    					listen_dev(input3, "change", /*input3_change_handler*/ ctx[11]),
    					listen_dev(form, "submit", prevent_default(/*handleSubmit*/ ctx[6]), false, true, false)
    				];

    				mounted = true;
    			}
    		},
    		p: function update(ctx, [dirty]) {
    			const button0_changes = {};
    			if (dirty & /*back*/ 1) button0_changes.new_layout = /*back*/ ctx[0];
    			if (dirty & /*back*/ 1) button0_changes.my_title = "go back " + /*back*/ ctx[0];

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

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

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

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

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

    			button2.$set(button2_changes);

    			if (/*response*/ ctx[5].status >= 300) {
    				if (if_block0) {
    					if_block0.p(ctx, dirty);

    					if (dirty & /*response*/ 32) {
    						transition_in(if_block0, 1);
    					}
    				} else {
    					if_block0 = create_if_block_1$5(ctx);
    					if_block0.c();
    					transition_in(if_block0, 1);
    					if_block0.m(form, t3);
    				}
    			} else if (if_block0) {
    				group_outros();

    				transition_out(if_block0, 1, 1, () => {
    					if_block0 = null;
    				});

    				check_outros();
    			}

    			if (!current || dirty & /*allowed_chars*/ 2 && input0_placeholder_value !== (input0_placeholder_value = "allowed special characters: " + /*allowed_chars*/ ctx[1])) {
    				attr_dev(input0, "placeholder", input0_placeholder_value);
    			}

    			if (dirty & /*room_name*/ 4 && input0.value !== /*room_name*/ ctx[2]) {
    				set_input_value(input0, /*room_name*/ ctx[2]);
    			}

    			if (dirty & /*room_type*/ 8) {
    				input1.checked = input1.__value === /*room_type*/ ctx[3];
    			}

    			if (dirty & /*room_type*/ 8) {
    				input2.checked = input2.__value === /*room_type*/ ctx[3];
    			}

    			if (dirty & /*room_type*/ 8) {
    				input3.checked = input3.__value === /*room_type*/ ctx[3];
    			}

    			if (/*room_type*/ ctx[3] === 'protected') {
    				if (if_block1) {
    					if_block1.p(ctx, dirty);
    				} else {
    					if_block1 = create_if_block$b(ctx);
    					if_block1.c();
    					if_block1.m(form, t16);
    				}
    			} else if (if_block1) {
    				if_block1.d(1);
    				if_block1 = null;
    			}
    		},
    		i: function intro(local) {
    			if (current) return;
    			transition_in(button0.$$.fragment, local);
    			transition_in(button1.$$.fragment, local);
    			transition_in(button2.$$.fragment, local);
    			transition_in(if_block0);
    			current = true;
    		},
    		o: function outro(local) {
    			transition_out(button0.$$.fragment, local);
    			transition_out(button1.$$.fragment, local);
    			transition_out(button2.$$.fragment, local);
    			transition_out(if_block0);
    			current = false;
    		},
    		d: function destroy(detaching) {
    			if (detaching) detach_dev(div1);
    			destroy_component(button0);
    			destroy_component(button1);
    			destroy_component(button2);
    			if (if_block0) if_block0.d();
    			/*$$binding_groups*/ ctx[9][0].splice(/*$$binding_groups*/ ctx[9][0].indexOf(input1), 1);
    			/*$$binding_groups*/ ctx[9][0].splice(/*$$binding_groups*/ ctx[9][0].indexOf(input2), 1);
    			/*$$binding_groups*/ ctx[9][0].splice(/*$$binding_groups*/ ctx[9][0].indexOf(input3), 1);
    			if (if_block1) if_block1.d();
    			mounted = false;
    			run_all(dispose);
    		}
    	};

    	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('Layout_create', slots, []);
    	let { back = "" } = $$props;
    	let allowed_chars = 'loading...';

    	//let regex;
    	onMount(async () => {
    		let response = await fetch('/api/v2/chat/allowedchars');
    		let data = await response.json();
    		console.log("data:", data);
    		$$invalidate(1, allowed_chars = data.chars);
    	}); //regex = new RegExp(`^[a-zA-Z0-9\\s${allowed_chars}]+$`);

    	let room_name;
    	let room_type;
    	let room_password;
    	let response = { status: 0, message: "" };

    	async function handleSubmit(evt) {
    		let formIsValid = evt.target.checkValidity();
    		if (!formIsValid) return;

    		// send the new room
    		$$invalidate(5, response = await create_room(room_name, room_type));

    		// go to room
    		if (response.status === 200) await change_room(room_name);
    	}

    	const writable_props = ['back'];

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

    	const $$binding_groups = [[]];

    	function input0_input_handler() {
    		room_name = this.value;
    		$$invalidate(2, room_name);
    	}

    	function input1_change_handler() {
    		room_type = this.__value;
    		$$invalidate(3, room_type);
    	}

    	function input2_change_handler() {
    		room_type = this.__value;
    		$$invalidate(3, room_type);
    	}

    	function input3_change_handler() {
    		room_type = this.__value;
    		$$invalidate(3, room_type);
    	}

    	function input_input_handler() {
    		room_password = this.value;
    		$$invalidate(4, room_password);
    	}

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

    	$$self.$capture_state = () => ({
    		change_room,
    		create_room,
    		onMount,
    		Button: Element_button,
    		Warning: Element_warning,
    		back,
    		allowed_chars,
    		room_name,
    		room_type,
    		room_password,
    		response,
    		handleSubmit
    	});

    	$$self.$inject_state = $$props => {
    		if ('back' in $$props) $$invalidate(0, back = $$props.back);
    		if ('allowed_chars' in $$props) $$invalidate(1, allowed_chars = $$props.allowed_chars);
    		if ('room_name' in $$props) $$invalidate(2, room_name = $$props.room_name);
    		if ('room_type' in $$props) $$invalidate(3, room_type = $$props.room_type);
    		if ('room_password' in $$props) $$invalidate(4, room_password = $$props.room_password);
    		if ('response' in $$props) $$invalidate(5, response = $$props.response);
    	};

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

    	return [
    		back,
    		allowed_chars,
    		room_name,
    		room_type,
    		room_password,
    		response,
    		handleSubmit,
    		input0_input_handler,
    		input1_change_handler,
    		$$binding_groups,
    		input2_change_handler,
    		input3_change_handler,
    		input_input_handler
    	];
    }

    class Layout_create extends SvelteComponentDev {
    	constructor(options) {
    		super(options);
    		init$2(this, options, instance$l, create_fragment$l, safe_not_equal, { back: 0 });

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

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

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

    // (13:1) <Button new_layout={back} my_class="back icon" my_title="go back {back}">
    function create_default_slot_2$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_2$3.name,
    		type: "slot",
    		source: "(13:1) <Button new_layout={back} my_class=\\\"back icon\\\" my_title=\\\"go back {back}\\\">",
    		ctx
    	});

    	return block;
    }

    // (18:1) <Button my_class="user deactivate">
    function create_default_slot_1$3(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_1$3.name,
    		type: "slot",
    		source: "(18:1) <Button my_class=\\\"user deactivate\\\">",
    		ctx
    	});

    	return block;
    }

    // (23:1) <Button new_layout="close" my_class="close icon">
    function create_default_slot$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$4.name,
    		type: "slot",
    		source: "(23:1) <Button new_layout=\\\"close\\\" my_class=\\\"close icon\\\">",
    		ctx
    	});

    	return block;
    }

    function create_fragment$k(ctx) {
    	let div2;
    	let button0;
    	let t0;
    	let button1;
    	let t1;
    	let button2;
    	let t2;
    	let div1;
    	let p0;
    	let t4;
    	let form;
    	let input0;
    	let t5;
    	let label0;
    	let p1;
    	let t7;
    	let div0;
    	let label1;
    	let p2;
    	let t9;
    	let select0;
    	let option0;
    	let option1;
    	let option2;
    	let option3;
    	let option4;
    	let option5;
    	let option6;
    	let option7;
    	let option8;
    	let option9;
    	let option10;
    	let option11;
    	let option12;
    	let option13;
    	let option14;
    	let option15;
    	let option16;
    	let option17;
    	let option18;
    	let option19;
    	let option20;
    	let option21;
    	let option22;
    	let option23;
    	let option24;
    	let option25;
    	let option26;
    	let option27;
    	let option28;
    	let option29;
    	let option30;
    	let option31;
    	let option32;
    	let option33;
    	let option34;
    	let option35;
    	let option36;
    	let option37;
    	let option38;
    	let option39;
    	let option40;
    	let option41;
    	let option42;
    	let option43;
    	let option44;
    	let option45;
    	let option46;
    	let option47;
    	let option48;
    	let t59;
    	let label2;
    	let p3;
    	let t61;
    	let select1;
    	let option49;
    	let option50;
    	let option51;
    	let option52;
    	let option53;
    	let option54;
    	let option55;
    	let option56;
    	let option57;
    	let option58;
    	let option59;
    	let option60;
    	let option61;
    	let option62;
    	let option63;
    	let option64;
    	let option65;
    	let option66;
    	let option67;
    	let option68;
    	let option69;
    	let option70;
    	let option71;
    	let option72;
    	let option73;
    	let option74;
    	let option75;
    	let option76;
    	let option77;
    	let option78;
    	let option79;
    	let option80;
    	let option81;
    	let option82;
    	let option83;
    	let option84;
    	let option85;
    	let option86;
    	let option87;
    	let option88;
    	let option89;
    	let option90;
    	let option91;
    	let option92;
    	let option93;
    	let option94;
    	let option95;
    	let option96;
    	let option97;
    	let t111;
    	let label3;
    	let p4;
    	let t113;
    	let select2;
    	let option98;
    	let option99;
    	let option100;
    	let option101;
    	let option102;
    	let option103;
    	let option104;
    	let option105;
    	let option106;
    	let option107;
    	let option108;
    	let option109;
    	let option110;
    	let option111;
    	let option112;
    	let option113;
    	let option114;
    	let option115;
    	let option116;
    	let option117;
    	let option118;
    	let option119;
    	let option120;
    	let option121;
    	let option122;
    	let option123;
    	let t140;
    	let input1;
    	let current;

    	button0 = new Element_button({
    			props: {
    				new_layout: /*back*/ ctx[0],
    				my_class: "back icon",
    				my_title: "go back " + /*back*/ ctx[0],
    				$$slots: { default: [create_default_slot_2$3] },
    				$$scope: { ctx }
    			},
    			$$inline: true
    		});

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

    	button2 = new Element_button({
    			props: {
    				new_layout: "close",
    				my_class: "close icon",
    				$$slots: { default: [create_default_slot$4] },
    				$$scope: { ctx }
    			},
    			$$inline: true
    		});

    	const block = {
    		c: function create() {
    			div2 = element("div");
    			create_component(button0.$$.fragment);
    			t0 = space();
    			create_component(button1.$$.fragment);
    			t1 = space();
    			create_component(button2.$$.fragment);
    			t2 = space();
    			div1 = element("div");
    			p0 = element("p");
    			p0.textContent = "mute this user for a time :";
    			t4 = space();
    			form = element("form");
    			input0 = element("input");
    			t5 = space();
    			label0 = element("label");
    			p1 = element("p");
    			p1.textContent = "forever";
    			t7 = space();
    			div0 = element("div");
    			label1 = element("label");
    			p2 = element("p");
    			p2.textContent = "minutes :";
    			t9 = space();
    			select0 = element("select");
    			option0 = element("option");
    			option0.textContent = "00";
    			option1 = element("option");
    			option1.textContent = "01";
    			option2 = element("option");
    			option2.textContent = "02";
    			option3 = element("option");
    			option3.textContent = "03";
    			option4 = element("option");
    			option4.textContent = "04";
    			option5 = element("option");
    			option5.textContent = "05";
    			option6 = element("option");
    			option6.textContent = "06";
    			option7 = element("option");
    			option7.textContent = "07";
    			option8 = element("option");
    			option8.textContent = "10";
    			option9 = element("option");
    			option9.textContent = "11";
    			option10 = element("option");
    			option10.textContent = "12";
    			option11 = element("option");
    			option11.textContent = "13";
    			option12 = element("option");
    			option12.textContent = "14";
    			option13 = element("option");
    			option13.textContent = "15";
    			option14 = element("option");
    			option14.textContent = "16";
    			option15 = element("option");
    			option15.textContent = "17";
    			option16 = element("option");
    			option16.textContent = "20";
    			option17 = element("option");
    			option17.textContent = "21";
    			option18 = element("option");
    			option18.textContent = "22";
    			option19 = element("option");
    			option19.textContent = "23";
    			option20 = element("option");
    			option20.textContent = "24";
    			option21 = element("option");
    			option21.textContent = "25";
    			option22 = element("option");
    			option22.textContent = "26";
    			option23 = element("option");
    			option23.textContent = "27";
    			option24 = element("option");
    			option24.textContent = "30";
    			option25 = element("option");
    			option25.textContent = "31";
    			option26 = element("option");
    			option26.textContent = "32";
    			option27 = element("option");
    			option27.textContent = "33";
    			option28 = element("option");
    			option28.textContent = "34";
    			option29 = element("option");
    			option29.textContent = "35";
    			option30 = element("option");
    			option30.textContent = "36";
    			option31 = element("option");
    			option31.textContent = "37";
    			option32 = element("option");
    			option32.textContent = "40";
    			option33 = element("option");
    			option33.textContent = "41";
    			option34 = element("option");
    			option34.textContent = "42";
    			option35 = element("option");
    			option35.textContent = "43";
    			option36 = element("option");
    			option36.textContent = "44";
    			option37 = element("option");
    			option37.textContent = "45";
    			option38 = element("option");
    			option38.textContent = "46";
    			option39 = element("option");
    			option39.textContent = "47";
    			option40 = element("option");
    			option40.textContent = "50";
    			option41 = element("option");
    			option41.textContent = "51";
    			option42 = element("option");
    			option42.textContent = "52";
    			option43 = element("option");
    			option43.textContent = "53";
    			option44 = element("option");
    			option44.textContent = "54";
    			option45 = element("option");
    			option45.textContent = "55";
    			option46 = element("option");
    			option46.textContent = "56";
    			option47 = element("option");
    			option47.textContent = "57";
    			option48 = element("option");
    			option48.textContent = "60";
    			t59 = space();
    			label2 = element("label");
    			p3 = element("p");
    			p3.textContent = "hours :";
    			t61 = space();
    			select1 = element("select");
    			option49 = element("option");
    			option49.textContent = "00";
    			option50 = element("option");
    			option50.textContent = "01";
    			option51 = element("option");
    			option51.textContent = "02";
    			option52 = element("option");
    			option52.textContent = "03";
    			option53 = element("option");
    			option53.textContent = "04";
    			option54 = element("option");
    			option54.textContent = "05";
    			option55 = element("option");
    			option55.textContent = "06";
    			option56 = element("option");
    			option56.textContent = "07";
    			option57 = element("option");
    			option57.textContent = "10";
    			option58 = element("option");
    			option58.textContent = "11";
    			option59 = element("option");
    			option59.textContent = "12";
    			option60 = element("option");
    			option60.textContent = "13";
    			option61 = element("option");
    			option61.textContent = "14";
    			option62 = element("option");
    			option62.textContent = "15";
    			option63 = element("option");
    			option63.textContent = "16";
    			option64 = element("option");
    			option64.textContent = "17";
    			option65 = element("option");
    			option65.textContent = "20";
    			option66 = element("option");
    			option66.textContent = "21";
    			option67 = element("option");
    			option67.textContent = "22";
    			option68 = element("option");
    			option68.textContent = "23";
    			option69 = element("option");
    			option69.textContent = "24";
    			option70 = element("option");
    			option70.textContent = "25";
    			option71 = element("option");
    			option71.textContent = "26";
    			option72 = element("option");
    			option72.textContent = "27";
    			option73 = element("option");
    			option73.textContent = "30";
    			option74 = element("option");
    			option74.textContent = "31";
    			option75 = element("option");
    			option75.textContent = "32";
    			option76 = element("option");
    			option76.textContent = "33";
    			option77 = element("option");
    			option77.textContent = "34";
    			option78 = element("option");
    			option78.textContent = "35";
    			option79 = element("option");
    			option79.textContent = "36";
    			option80 = element("option");
    			option80.textContent = "37";
    			option81 = element("option");
    			option81.textContent = "40";
    			option82 = element("option");
    			option82.textContent = "41";
    			option83 = element("option");
    			option83.textContent = "42";
    			option84 = element("option");
    			option84.textContent = "43";
    			option85 = element("option");
    			option85.textContent = "44";
    			option86 = element("option");
    			option86.textContent = "45";
    			option87 = element("option");
    			option87.textContent = "46";
    			option88 = element("option");
    			option88.textContent = "47";
    			option89 = element("option");
    			option89.textContent = "50";
    			option90 = element("option");
    			option90.textContent = "51";
    			option91 = element("option");
    			option91.textContent = "52";
    			option92 = element("option");
    			option92.textContent = "53";
    			option93 = element("option");
    			option93.textContent = "54";
    			option94 = element("option");
    			option94.textContent = "55";
    			option95 = element("option");
    			option95.textContent = "56";
    			option96 = element("option");
    			option96.textContent = "57";
    			option97 = element("option");
    			option97.textContent = "60";
    			t111 = space();
    			label3 = element("label");
    			p4 = element("p");
    			p4.textContent = "days :";
    			t113 = space();
    			select2 = element("select");
    			option98 = element("option");
    			option98.textContent = "00";
    			option99 = element("option");
    			option99.textContent = "01";
    			option100 = element("option");
    			option100.textContent = "02";
    			option101 = element("option");
    			option101.textContent = "03";
    			option102 = element("option");
    			option102.textContent = "04";
    			option103 = element("option");
    			option103.textContent = "05";
    			option104 = element("option");
    			option104.textContent = "06";
    			option105 = element("option");
    			option105.textContent = "07";
    			option106 = element("option");
    			option106.textContent = "10";
    			option107 = element("option");
    			option107.textContent = "11";
    			option108 = element("option");
    			option108.textContent = "12";
    			option109 = element("option");
    			option109.textContent = "13";
    			option110 = element("option");
    			option110.textContent = "14";
    			option111 = element("option");
    			option111.textContent = "15";
    			option112 = element("option");
    			option112.textContent = "16";
    			option113 = element("option");
    			option113.textContent = "17";
    			option114 = element("option");
    			option114.textContent = "20";
    			option115 = element("option");
    			option115.textContent = "21";
    			option116 = element("option");
    			option116.textContent = "22";
    			option117 = element("option");
    			option117.textContent = "23";
    			option118 = element("option");
    			option118.textContent = "24";
    			option119 = element("option");
    			option119.textContent = "25";
    			option120 = element("option");
    			option120.textContent = "26";
    			option121 = element("option");
    			option121.textContent = "27";
    			option122 = element("option");
    			option122.textContent = "30";
    			option123 = element("option");
    			option123.textContent = "31";
    			t140 = space();
    			input1 = element("input");
    			attr_dev(p0, "class", "__center");
    			add_location(p0, file$h, 30, 2, 516);
    			attr_dev(input0, "id", "chat_mute_forever");
    			attr_dev(input0, "class", "__check_change_next svelte-yo0any");
    			attr_dev(input0, "type", "checkbox");
    			add_location(input0, file$h, 33, 3, 600);
    			attr_dev(p1, "class", "svelte-yo0any");
    			add_location(p1, file$h, 34, 52, 728);
    			attr_dev(label0, "for", "chat_mute_forever");
    			attr_dev(label0, "class", "_checkbox svelte-yo0any");
    			add_location(label0, file$h, 34, 3, 679);
    			attr_dev(p2, "class", "svelte-yo0any");
    			add_location(p2, file$h, 38, 5, 857);
    			option0.__value = "01";
    			option0.value = option0.__value;
    			add_location(option0, file$h, 40, 6, 917);
    			option1.__value = "01";
    			option1.value = option1.__value;
    			add_location(option1, file$h, 41, 6, 954);
    			option2.__value = "02";
    			option2.value = option2.__value;
    			add_location(option2, file$h, 42, 6, 991);
    			option3.__value = "03";
    			option3.value = option3.__value;
    			add_location(option3, file$h, 43, 6, 1028);
    			option4.__value = "04";
    			option4.value = option4.__value;
    			add_location(option4, file$h, 44, 6, 1065);
    			option5.__value = "05";
    			option5.value = option5.__value;
    			add_location(option5, file$h, 45, 6, 1102);
    			option6.__value = "06";
    			option6.value = option6.__value;
    			add_location(option6, file$h, 46, 6, 1139);
    			option7.__value = "07";
    			option7.value = option7.__value;
    			add_location(option7, file$h, 47, 6, 1176);
    			option8.__value = "10";
    			option8.value = option8.__value;
    			add_location(option8, file$h, 48, 6, 1213);
    			option9.__value = "11";
    			option9.value = option9.__value;
    			add_location(option9, file$h, 49, 6, 1250);
    			option10.__value = "12";
    			option10.value = option10.__value;
    			add_location(option10, file$h, 50, 6, 1287);
    			option11.__value = "13";
    			option11.value = option11.__value;
    			add_location(option11, file$h, 51, 6, 1324);
    			option12.__value = "14";
    			option12.value = option12.__value;
    			add_location(option12, file$h, 52, 6, 1361);
    			option13.__value = "15";
    			option13.value = option13.__value;
    			add_location(option13, file$h, 53, 6, 1398);
    			option14.__value = "16";
    			option14.value = option14.__value;
    			add_location(option14, file$h, 54, 6, 1435);
    			option15.__value = "17";
    			option15.value = option15.__value;
    			add_location(option15, file$h, 55, 6, 1472);
    			option16.__value = "20";
    			option16.value = option16.__value;
    			add_location(option16, file$h, 56, 6, 1509);
    			option17.__value = "21";
    			option17.value = option17.__value;
    			add_location(option17, file$h, 57, 6, 1546);
    			option18.__value = "22";
    			option18.value = option18.__value;
    			add_location(option18, file$h, 58, 6, 1583);
    			option19.__value = "23";
    			option19.value = option19.__value;
    			add_location(option19, file$h, 59, 6, 1620);
    			option20.__value = "24";
    			option20.value = option20.__value;
    			add_location(option20, file$h, 60, 6, 1657);
    			option21.__value = "25";
    			option21.value = option21.__value;
    			add_location(option21, file$h, 61, 6, 1694);
    			option22.__value = "26";
    			option22.value = option22.__value;
    			add_location(option22, file$h, 62, 6, 1731);
    			option23.__value = "27";
    			option23.value = option23.__value;
    			add_location(option23, file$h, 63, 6, 1768);
    			option24.__value = "30";
    			option24.value = option24.__value;
    			add_location(option24, file$h, 64, 6, 1805);
    			option25.__value = "31";
    			option25.value = option25.__value;
    			add_location(option25, file$h, 65, 6, 1842);
    			option26.__value = "32";
    			option26.value = option26.__value;
    			add_location(option26, file$h, 66, 6, 1879);
    			option27.__value = "33";
    			option27.value = option27.__value;
    			add_location(option27, file$h, 67, 6, 1916);
    			option28.__value = "34";
    			option28.value = option28.__value;
    			add_location(option28, file$h, 68, 6, 1953);
    			option29.__value = "35";
    			option29.value = option29.__value;
    			add_location(option29, file$h, 69, 6, 1990);
    			option30.__value = "36";
    			option30.value = option30.__value;
    			add_location(option30, file$h, 70, 6, 2027);
    			option31.__value = "37";
    			option31.value = option31.__value;
    			add_location(option31, file$h, 71, 6, 2064);
    			option32.__value = "40";
    			option32.value = option32.__value;
    			add_location(option32, file$h, 72, 6, 2101);
    			option33.__value = "41";
    			option33.value = option33.__value;
    			add_location(option33, file$h, 73, 6, 2138);
    			option34.__value = "42";
    			option34.value = option34.__value;
    			add_location(option34, file$h, 74, 6, 2175);
    			option35.__value = "43";
    			option35.value = option35.__value;
    			add_location(option35, file$h, 75, 6, 2212);
    			option36.__value = "44";
    			option36.value = option36.__value;
    			add_location(option36, file$h, 76, 6, 2249);
    			option37.__value = "45";
    			option37.value = option37.__value;
    			add_location(option37, file$h, 77, 6, 2286);
    			option38.__value = "46";
    			option38.value = option38.__value;
    			add_location(option38, file$h, 78, 6, 2323);
    			option39.__value = "47";
    			option39.value = option39.__value;
    			add_location(option39, file$h, 79, 6, 2360);
    			option40.__value = "50";
    			option40.value = option40.__value;
    			add_location(option40, file$h, 80, 6, 2397);
    			option41.__value = "51";
    			option41.value = option41.__value;
    			add_location(option41, file$h, 81, 6, 2434);
    			option42.__value = "52";
    			option42.value = option42.__value;
    			add_location(option42, file$h, 82, 6, 2471);
    			option43.__value = "53";
    			option43.value = option43.__value;
    			add_location(option43, file$h, 83, 6, 2508);
    			option44.__value = "54";
    			option44.value = option44.__value;
    			add_location(option44, file$h, 84, 6, 2545);
    			option45.__value = "55";
    			option45.value = option45.__value;
    			add_location(option45, file$h, 85, 6, 2582);
    			option46.__value = "56";
    			option46.value = option46.__value;
    			add_location(option46, file$h, 86, 6, 2619);
    			option47.__value = "57";
    			option47.value = option47.__value;
    			add_location(option47, file$h, 87, 6, 2656);
    			option48.__value = "60";
    			option48.value = option48.__value;
    			add_location(option48, file$h, 88, 6, 2693);
    			attr_dev(select0, "id", "chat_mute_minutes");
    			attr_dev(select0, "class", "svelte-yo0any");
    			add_location(select0, file$h, 39, 5, 879);
    			attr_dev(label1, "for", "chat_mute_minutes");
    			attr_dev(label1, "class", "_select svelte-yo0any");
    			add_location(label1, file$h, 37, 4, 804);
    			attr_dev(p3, "class", "svelte-yo0any");
    			add_location(p3, file$h, 93, 5, 2826);
    			option49.__value = "01";
    			option49.value = option49.__value;
    			add_location(option49, file$h, 95, 6, 2882);
    			option50.__value = "01";
    			option50.value = option50.__value;
    			add_location(option50, file$h, 96, 6, 2919);
    			option51.__value = "02";
    			option51.value = option51.__value;
    			add_location(option51, file$h, 97, 6, 2956);
    			option52.__value = "03";
    			option52.value = option52.__value;
    			add_location(option52, file$h, 98, 6, 2993);
    			option53.__value = "04";
    			option53.value = option53.__value;
    			add_location(option53, file$h, 99, 6, 3030);
    			option54.__value = "05";
    			option54.value = option54.__value;
    			add_location(option54, file$h, 100, 6, 3067);
    			option55.__value = "06";
    			option55.value = option55.__value;
    			add_location(option55, file$h, 101, 6, 3104);
    			option56.__value = "07";
    			option56.value = option56.__value;
    			add_location(option56, file$h, 102, 6, 3141);
    			option57.__value = "10";
    			option57.value = option57.__value;
    			add_location(option57, file$h, 103, 6, 3178);
    			option58.__value = "11";
    			option58.value = option58.__value;
    			add_location(option58, file$h, 104, 6, 3215);
    			option59.__value = "12";
    			option59.value = option59.__value;
    			add_location(option59, file$h, 105, 6, 3252);
    			option60.__value = "13";
    			option60.value = option60.__value;
    			add_location(option60, file$h, 106, 6, 3289);
    			option61.__value = "14";
    			option61.value = option61.__value;
    			add_location(option61, file$h, 107, 6, 3326);
    			option62.__value = "15";
    			option62.value = option62.__value;
    			add_location(option62, file$h, 108, 6, 3363);
    			option63.__value = "16";
    			option63.value = option63.__value;
    			add_location(option63, file$h, 109, 6, 3400);
    			option64.__value = "17";
    			option64.value = option64.__value;
    			add_location(option64, file$h, 110, 6, 3437);
    			option65.__value = "20";
    			option65.value = option65.__value;
    			add_location(option65, file$h, 111, 6, 3474);
    			option66.__value = "21";
    			option66.value = option66.__value;
    			add_location(option66, file$h, 112, 6, 3511);
    			option67.__value = "22";
    			option67.value = option67.__value;
    			add_location(option67, file$h, 113, 6, 3548);
    			option68.__value = "23";
    			option68.value = option68.__value;
    			add_location(option68, file$h, 114, 6, 3585);
    			option69.__value = "24";
    			option69.value = option69.__value;
    			add_location(option69, file$h, 115, 6, 3622);
    			option70.__value = "25";
    			option70.value = option70.__value;
    			add_location(option70, file$h, 116, 6, 3659);
    			option71.__value = "26";
    			option71.value = option71.__value;
    			add_location(option71, file$h, 117, 6, 3696);
    			option72.__value = "27";
    			option72.value = option72.__value;
    			add_location(option72, file$h, 118, 6, 3733);
    			option73.__value = "30";
    			option73.value = option73.__value;
    			add_location(option73, file$h, 119, 6, 3770);
    			option74.__value = "31";
    			option74.value = option74.__value;
    			add_location(option74, file$h, 120, 6, 3807);
    			option75.__value = "32";
    			option75.value = option75.__value;
    			add_location(option75, file$h, 121, 6, 3844);
    			option76.__value = "33";
    			option76.value = option76.__value;
    			add_location(option76, file$h, 122, 6, 3881);
    			option77.__value = "34";
    			option77.value = option77.__value;
    			add_location(option77, file$h, 123, 6, 3918);
    			option78.__value = "35";
    			option78.value = option78.__value;
    			add_location(option78, file$h, 124, 6, 3955);
    			option79.__value = "36";
    			option79.value = option79.__value;
    			add_location(option79, file$h, 125, 6, 3992);
    			option80.__value = "37";
    			option80.value = option80.__value;
    			add_location(option80, file$h, 126, 6, 4029);
    			option81.__value = "40";
    			option81.value = option81.__value;
    			add_location(option81, file$h, 127, 6, 4066);
    			option82.__value = "41";
    			option82.value = option82.__value;
    			add_location(option82, file$h, 128, 6, 4103);
    			option83.__value = "42";
    			option83.value = option83.__value;
    			add_location(option83, file$h, 129, 6, 4140);
    			option84.__value = "43";
    			option84.value = option84.__value;
    			add_location(option84, file$h, 130, 6, 4177);
    			option85.__value = "44";
    			option85.value = option85.__value;
    			add_location(option85, file$h, 131, 6, 4214);
    			option86.__value = "45";
    			option86.value = option86.__value;
    			add_location(option86, file$h, 132, 6, 4251);
    			option87.__value = "46";
    			option87.value = option87.__value;
    			add_location(option87, file$h, 133, 6, 4288);
    			option88.__value = "47";
    			option88.value = option88.__value;
    			add_location(option88, file$h, 134, 6, 4325);
    			option89.__value = "50";
    			option89.value = option89.__value;
    			add_location(option89, file$h, 135, 6, 4362);
    			option90.__value = "51";
    			option90.value = option90.__value;
    			add_location(option90, file$h, 136, 6, 4399);
    			option91.__value = "52";
    			option91.value = option91.__value;
    			add_location(option91, file$h, 137, 6, 4436);
    			option92.__value = "53";
    			option92.value = option92.__value;
    			add_location(option92, file$h, 138, 6, 4473);
    			option93.__value = "54";
    			option93.value = option93.__value;
    			add_location(option93, file$h, 139, 6, 4510);
    			option94.__value = "55";
    			option94.value = option94.__value;
    			add_location(option94, file$h, 140, 6, 4547);
    			option95.__value = "56";
    			option95.value = option95.__value;
    			add_location(option95, file$h, 141, 6, 4584);
    			option96.__value = "57";
    			option96.value = option96.__value;
    			add_location(option96, file$h, 142, 6, 4621);
    			option97.__value = "60";
    			option97.value = option97.__value;
    			add_location(option97, file$h, 143, 6, 4658);
    			attr_dev(select1, "id", "chat_mute_hours");
    			attr_dev(select1, "class", "svelte-yo0any");
    			add_location(select1, file$h, 94, 5, 2846);
    			attr_dev(label2, "for", "chat_mute_hours");
    			attr_dev(label2, "class", "_select svelte-yo0any");
    			add_location(label2, file$h, 92, 4, 2775);
    			attr_dev(p4, "class", "svelte-yo0any");
    			add_location(p4, file$h, 148, 5, 4789);
    			option98.__value = "00";
    			option98.value = option98.__value;
    			add_location(option98, file$h, 150, 6, 4843);
    			option99.__value = "01";
    			option99.value = option99.__value;
    			add_location(option99, file$h, 151, 6, 4880);
    			option100.__value = "02";
    			option100.value = option100.__value;
    			add_location(option100, file$h, 152, 6, 4917);
    			option101.__value = "03";
    			option101.value = option101.__value;
    			add_location(option101, file$h, 153, 6, 4954);
    			option102.__value = "04";
    			option102.value = option102.__value;
    			add_location(option102, file$h, 154, 6, 4991);
    			option103.__value = "05";
    			option103.value = option103.__value;
    			add_location(option103, file$h, 155, 6, 5028);
    			option104.__value = "06";
    			option104.value = option104.__value;
    			add_location(option104, file$h, 156, 6, 5065);
    			option105.__value = "07";
    			option105.value = option105.__value;
    			add_location(option105, file$h, 157, 6, 5102);
    			option106.__value = "10";
    			option106.value = option106.__value;
    			add_location(option106, file$h, 158, 6, 5139);
    			option107.__value = "11";
    			option107.value = option107.__value;
    			add_location(option107, file$h, 159, 6, 5176);
    			option108.__value = "12";
    			option108.value = option108.__value;
    			add_location(option108, file$h, 160, 6, 5213);
    			option109.__value = "13";
    			option109.value = option109.__value;
    			add_location(option109, file$h, 161, 6, 5250);
    			option110.__value = "14";
    			option110.value = option110.__value;
    			add_location(option110, file$h, 162, 6, 5287);
    			option111.__value = "15";
    			option111.value = option111.__value;
    			add_location(option111, file$h, 163, 6, 5324);
    			option112.__value = "16";
    			option112.value = option112.__value;
    			add_location(option112, file$h, 164, 6, 5361);
    			option113.__value = "17";
    			option113.value = option113.__value;
    			add_location(option113, file$h, 165, 6, 5398);
    			option114.__value = "20";
    			option114.value = option114.__value;
    			add_location(option114, file$h, 166, 6, 5435);
    			option115.__value = "21";
    			option115.value = option115.__value;
    			add_location(option115, file$h, 167, 6, 5472);
    			option116.__value = "22";
    			option116.value = option116.__value;
    			add_location(option116, file$h, 168, 6, 5509);
    			option117.__value = "23";
    			option117.value = option117.__value;
    			add_location(option117, file$h, 169, 6, 5546);
    			option118.__value = "24";
    			option118.value = option118.__value;
    			add_location(option118, file$h, 170, 6, 5583);
    			option119.__value = "25";
    			option119.value = option119.__value;
    			add_location(option119, file$h, 171, 6, 5620);
    			option120.__value = "26";
    			option120.value = option120.__value;
    			add_location(option120, file$h, 172, 6, 5657);
    			option121.__value = "27";
    			option121.value = option121.__value;
    			add_location(option121, file$h, 173, 6, 5694);
    			option122.__value = "30";
    			option122.value = option122.__value;
    			add_location(option122, file$h, 174, 6, 5731);
    			option123.__value = "31";
    			option123.value = option123.__value;
    			add_location(option123, file$h, 175, 6, 5768);
    			attr_dev(select2, "id", "chat_mute_days");
    			attr_dev(select2, "class", "svelte-yo0any");
    			add_location(select2, file$h, 149, 5, 4808);
    			attr_dev(label3, "for", "chat_mute_days");
    			attr_dev(label3, "class", "_select svelte-yo0any");
    			add_location(label3, file$h, 147, 4, 4739);
    			attr_dev(div0, "class", "__to_block");
    			add_location(div0, file$h, 35, 3, 754);
    			attr_dev(input1, "type", "submit");
    			input1.value = "⮡";
    			attr_dev(input1, "class", "svelte-yo0any");
    			add_location(input1, file$h, 179, 3, 5840);
    			attr_dev(form, "class", "svelte-yo0any");
    			add_location(form, file$h, 31, 2, 570);
    			attr_dev(div1, "class", "panel panel_mute __border_top");
    			add_location(div1, file$h, 29, 1, 470);
    			attr_dev(div2, "class", "grid_box svelte-yo0any");
    			add_location(div2, file$h, 9, 0, 133);
    		},
    		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);
    			mount_component(button0, div2, null);
    			append_dev(div2, t0);
    			mount_component(button1, div2, null);
    			append_dev(div2, t1);
    			mount_component(button2, div2, null);
    			append_dev(div2, t2);
    			append_dev(div2, div1);
    			append_dev(div1, p0);
    			append_dev(div1, t4);
    			append_dev(div1, form);
    			append_dev(form, input0);
    			append_dev(form, t5);
    			append_dev(form, label0);
    			append_dev(label0, p1);
    			append_dev(form, t7);
    			append_dev(form, div0);
    			append_dev(div0, label1);
    			append_dev(label1, p2);
    			append_dev(label1, t9);
    			append_dev(label1, select0);
    			append_dev(select0, option0);
    			append_dev(select0, option1);
    			append_dev(select0, option2);
    			append_dev(select0, option3);
    			append_dev(select0, option4);
    			append_dev(select0, option5);
    			append_dev(select0, option6);
    			append_dev(select0, option7);
    			append_dev(select0, option8);
    			append_dev(select0, option9);
    			append_dev(select0, option10);
    			append_dev(select0, option11);
    			append_dev(select0, option12);
    			append_dev(select0, option13);
    			append_dev(select0, option14);
    			append_dev(select0, option15);
    			append_dev(select0, option16);
    			append_dev(select0, option17);
    			append_dev(select0, option18);
    			append_dev(select0, option19);
    			append_dev(select0, option20);
    			append_dev(select0, option21);
    			append_dev(select0, option22);
    			append_dev(select0, option23);
    			append_dev(select0, option24);
    			append_dev(select0, option25);
    			append_dev(select0, option26);
    			append_dev(select0, option27);
    			append_dev(select0, option28);
    			append_dev(select0, option29);
    			append_dev(select0, option30);
    			append_dev(select0, option31);
    			append_dev(select0, option32);
    			append_dev(select0, option33);
    			append_dev(select0, option34);
    			append_dev(select0, option35);
    			append_dev(select0, option36);
    			append_dev(select0, option37);
    			append_dev(select0, option38);
    			append_dev(select0, option39);
    			append_dev(select0, option40);
    			append_dev(select0, option41);
    			append_dev(select0, option42);
    			append_dev(select0, option43);
    			append_dev(select0, option44);
    			append_dev(select0, option45);
    			append_dev(select0, option46);
    			append_dev(select0, option47);
    			append_dev(select0, option48);
    			append_dev(div0, t59);
    			append_dev(div0, label2);
    			append_dev(label2, p3);
    			append_dev(label2, t61);
    			append_dev(label2, select1);
    			append_dev(select1, option49);
    			append_dev(select1, option50);
    			append_dev(select1, option51);
    			append_dev(select1, option52);
    			append_dev(select1, option53);
    			append_dev(select1, option54);
    			append_dev(select1, option55);
    			append_dev(select1, option56);
    			append_dev(select1, option57);
    			append_dev(select1, option58);
    			append_dev(select1, option59);
    			append_dev(select1, option60);
    			append_dev(select1, option61);
    			append_dev(select1, option62);
    			append_dev(select1, option63);
    			append_dev(select1, option64);
    			append_dev(select1, option65);
    			append_dev(select1, option66);
    			append_dev(select1, option67);
    			append_dev(select1, option68);
    			append_dev(select1, option69);
    			append_dev(select1, option70);
    			append_dev(select1, option71);
    			append_dev(select1, option72);
    			append_dev(select1, option73);
    			append_dev(select1, option74);
    			append_dev(select1, option75);
    			append_dev(select1, option76);
    			append_dev(select1, option77);
    			append_dev(select1, option78);
    			append_dev(select1, option79);
    			append_dev(select1, option80);
    			append_dev(select1, option81);
    			append_dev(select1, option82);
    			append_dev(select1, option83);
    			append_dev(select1, option84);
    			append_dev(select1, option85);
    			append_dev(select1, option86);
    			append_dev(select1, option87);
    			append_dev(select1, option88);
    			append_dev(select1, option89);
    			append_dev(select1, option90);
    			append_dev(select1, option91);
    			append_dev(select1, option92);
    			append_dev(select1, option93);
    			append_dev(select1, option94);
    			append_dev(select1, option95);
    			append_dev(select1, option96);
    			append_dev(select1, option97);
    			append_dev(div0, t111);
    			append_dev(div0, label3);
    			append_dev(label3, p4);
    			append_dev(label3, t113);
    			append_dev(label3, select2);
    			append_dev(select2, option98);
    			append_dev(select2, option99);
    			append_dev(select2, option100);
    			append_dev(select2, option101);
    			append_dev(select2, option102);
    			append_dev(select2, option103);
    			append_dev(select2, option104);
    			append_dev(select2, option105);
    			append_dev(select2, option106);
    			append_dev(select2, option107);
    			append_dev(select2, option108);
    			append_dev(select2, option109);
    			append_dev(select2, option110);
    			append_dev(select2, option111);
    			append_dev(select2, option112);
    			append_dev(select2, option113);
    			append_dev(select2, option114);
    			append_dev(select2, option115);
    			append_dev(select2, option116);
    			append_dev(select2, option117);
    			append_dev(select2, option118);
    			append_dev(select2, option119);
    			append_dev(select2, option120);
    			append_dev(select2, option121);
    			append_dev(select2, option122);
    			append_dev(select2, option123);
    			append_dev(form, t140);
    			append_dev(form, input1);
    			current = true;
    		},
    		p: function update(ctx, [dirty]) {
    			const button0_changes = {};
    			if (dirty & /*back*/ 1) button0_changes.new_layout = /*back*/ ctx[0];
    			if (dirty & /*back*/ 1) button0_changes.my_title = "go back " + /*back*/ ctx[0];

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

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

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

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

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

    			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(div2);
    			destroy_component(button0);
    			destroy_component(button1);
    			destroy_component(button2);
    		}
    	};

    	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('Layout_mute', slots, []);
    	let { back = "" } = $$props;
    	const writable_props = ['back'];

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

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

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

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

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

    	return [back];
    }

    class Layout_mute extends SvelteComponentDev {
    	constructor(options) {
    		super(options);
    		init$2(this, options, instance$k, create_fragment$k, safe_not_equal, { back: 0 });

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

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

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

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

    	const block_1 = {
    		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: block_1,
    		id: create_default_slot_8$1.name,
    		type: "slot",
    		source: "(17:1) <Button new_layout={back} my_class=\\\"back icon\\\" my_title=\\\"go back {back}\\\">",
    		ctx
    	});

    	return block_1;
    }

    // (22:1) <Button my_class="user deactivate">
    function create_default_slot_7$1(ctx) {
    	let t;

    	const block_1 = {
    		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: block_1,
    		id: create_default_slot_7$1.name,
    		type: "slot",
    		source: "(22:1) <Button my_class=\\\"user deactivate\\\">",
    		ctx
    	});

    	return block_1;
    }

    // (27:1) <Button new_layout="close" my_class="close icon">
    function create_default_slot_6$1(ctx) {
    	let t;

    	const block_1 = {
    		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: block_1,
    		id: create_default_slot_6$1.name,
    		type: "slot",
    		source: "(27:1) <Button new_layout=\\\"close\\\" my_class=\\\"close icon\\\">",
    		ctx
    	});

    	return block_1;
    }

    // (32:1) {#if back === "room_set"}
    function create_if_block_1$4(ctx) {
    	let button;
    	let current;

    	button = new Element_button({
    			props: {
    				my_class: "room_name deactivate __border_top",
    				$$slots: { default: [create_default_slot_5$1] },
    				$$scope: { ctx }
    			},
    			$$inline: true
    		});

    	const block_1 = {
    		c: function create() {
    			create_component(button.$$.fragment);
    		},
    		m: function mount(target, anchor) {
    			mount_component(button, target, anchor);
    			current = true;
    		},
    		i: function intro(local) {
    			if (current) return;
    			transition_in(button.$$.fragment, local);
    			current = true;
    		},
    		o: function outro(local) {
    			transition_out(button.$$.fragment, local);
    			current = false;
    		},
    		d: function destroy(detaching) {
    			destroy_component(button, detaching);
    		}
    	};

    	dispatch_dev("SvelteRegisterBlock", {
    		block: block_1,
    		id: create_if_block_1$4.name,
    		type: "if",
    		source: "(32:1) {#if back === \\\"room_set\\\"}",
    		ctx
    	});

    	return block_1;
    }

    // (33:2) <Button my_class="room_name deactivate __border_top">
    function create_default_slot_5$1(ctx) {
    	let t;

    	const block_1 = {
    		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: block_1,
    		id: create_default_slot_5$1.name,
    		type: "slot",
    		source: "(33:2) <Button my_class=\\\"room_name deactivate __border_top\\\">",
    		ctx
    	});

    	return block_1;
    }

    // (41:2) <Button>
    function create_default_slot_4$1(ctx) {
    	let t;

    	const block_1 = {
    		c: function create() {
    			t = text("view profile");
    		},
    		m: function mount(target, anchor) {
    			insert_dev(target, t, anchor);
    		},
    		d: function destroy(detaching) {
    			if (detaching) detach_dev(t);
    		}
    	};

    	dispatch_dev("SvelteRegisterBlock", {
    		block: block_1,
    		id: create_default_slot_4$1.name,
    		type: "slot",
    		source: "(41:2) <Button>",
    		ctx
    	});

    	return block_1;
    }

    // (44:2) <Button>
    function create_default_slot_3$2(ctx) {
    	let t;

    	const block_1 = {
    		c: function create() {
    			t = text("game invitation");
    		},
    		m: function mount(target, anchor) {
    			insert_dev(target, t, anchor);
    		},
    		d: function destroy(detaching) {
    			if (detaching) detach_dev(t);
    		}
    	};

    	dispatch_dev("SvelteRegisterBlock", {
    		block: block_1,
    		id: create_default_slot_3$2.name,
    		type: "slot",
    		source: "(44:2) <Button>",
    		ctx
    	});

    	return block_1;
    }

    // (47:2) <Button>
    function create_default_slot_2$2(ctx) {
    	let t;

    	const block_1 = {
    		c: function create() {
    			t = text(/*block*/ ctx[2]);
    		},
    		m: function mount(target, anchor) {
    			insert_dev(target, t, anchor);
    		},
    		p: noop,
    		d: function destroy(detaching) {
    			if (detaching) detach_dev(t);
    		}
    	};

    	dispatch_dev("SvelteRegisterBlock", {
    		block: block_1,
    		id: create_default_slot_2$2.name,
    		type: "slot",
    		source: "(47:2) <Button>",
    		ctx
    	});

    	return block_1;
    }

    // (51:2) {#if back === "room_set"}
    function create_if_block$a(ctx) {
    	let button0;
    	let t;
    	let button1;
    	let current;

    	button0 = new Element_button({
    			props: {
    				$$slots: { default: [create_default_slot_1$2] },
    				$$scope: { ctx }
    			},
    			$$inline: true
    		});

    	button1 = new Element_button({
    			props: {
    				$$slots: { default: [create_default_slot$3] },
    				$$scope: { ctx }
    			},
    			$$inline: true
    		});

    	const block_1 = {
    		c: function create() {
    			create_component(button0.$$.fragment);
    			t = space();
    			create_component(button1.$$.fragment);
    		},
    		m: function mount(target, anchor) {
    			mount_component(button0, target, anchor);
    			insert_dev(target, t, anchor);
    			mount_component(button1, target, anchor);
    			current = true;
    		},
    		p: function update(ctx, dirty) {
    			const button0_changes = {};

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

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

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

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

    	dispatch_dev("SvelteRegisterBlock", {
    		block: block_1,
    		id: create_if_block$a.name,
    		type: "if",
    		source: "(51:2) {#if back === \\\"room_set\\\"}",
    		ctx
    	});

    	return block_1;
    }

    // (52:3) <Button>
    function create_default_slot_1$2(ctx) {
    	let t;

    	const block_1 = {
    		c: function create() {
    			t = text("make admin");
    		},
    		m: function mount(target, anchor) {
    			insert_dev(target, t, anchor);
    		},
    		d: function destroy(detaching) {
    			if (detaching) detach_dev(t);
    		}
    	};

    	dispatch_dev("SvelteRegisterBlock", {
    		block: block_1,
    		id: create_default_slot_1$2.name,
    		type: "slot",
    		source: "(52:3) <Button>",
    		ctx
    	});

    	return block_1;
    }

    // (55:3) <Button>
    function create_default_slot$3(ctx) {
    	let t;

    	const block_1 = {
    		c: function create() {
    			t = text(/*mute*/ ctx[1]);
    		},
    		m: function mount(target, anchor) {
    			insert_dev(target, t, anchor);
    		},
    		p: noop,
    		d: function destroy(detaching) {
    			if (detaching) detach_dev(t);
    		}
    	};

    	dispatch_dev("SvelteRegisterBlock", {
    		block: block_1,
    		id: create_default_slot$3.name,
    		type: "slot",
    		source: "(55:3) <Button>",
    		ctx
    	});

    	return block_1;
    }

    function create_fragment$j(ctx) {
    	let div1;
    	let button0;
    	let t0;
    	let button1;
    	let t1;
    	let button2;
    	let t2;
    	let t3;
    	let div0;
    	let p;
    	let t5;
    	let button3;
    	let t6;
    	let button4;
    	let t7;
    	let button5;
    	let t8;
    	let current;

    	button0 = new Element_button({
    			props: {
    				new_layout: /*back*/ ctx[0],
    				my_class: "back icon",
    				my_title: "go back " + /*back*/ ctx[0],
    				$$slots: { default: [create_default_slot_8$1] },
    				$$scope: { ctx }
    			},
    			$$inline: true
    		});

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

    	button2 = new Element_button({
    			props: {
    				new_layout: "close",
    				my_class: "close icon",
    				$$slots: { default: [create_default_slot_6$1] },
    				$$scope: { ctx }
    			},
    			$$inline: true
    		});

    	let if_block0 = /*back*/ ctx[0] === "room_set" && create_if_block_1$4(ctx);

    	button3 = new Element_button({
    			props: {
    				$$slots: { default: [create_default_slot_4$1] },
    				$$scope: { ctx }
    			},
    			$$inline: true
    		});

    	button4 = new Element_button({
    			props: {
    				$$slots: { default: [create_default_slot_3$2] },
    				$$scope: { ctx }
    			},
    			$$inline: true
    		});

    	button5 = new Element_button({
    			props: {
    				$$slots: { default: [create_default_slot_2$2] },
    				$$scope: { ctx }
    			},
    			$$inline: true
    		});

    	let if_block1 = /*back*/ ctx[0] === "room_set" && create_if_block$a(ctx);

    	const block_1 = {
    		c: function create() {
    			div1 = element("div");
    			create_component(button0.$$.fragment);
    			t0 = space();
    			create_component(button1.$$.fragment);
    			t1 = space();
    			create_component(button2.$$.fragment);
    			t2 = space();
    			if (if_block0) if_block0.c();
    			t3 = space();
    			div0 = element("div");
    			p = element("p");
    			p.textContent = "user options :";
    			t5 = space();
    			create_component(button3.$$.fragment);
    			t6 = space();
    			create_component(button4.$$.fragment);
    			t7 = space();
    			create_component(button5.$$.fragment);
    			t8 = space();
    			if (if_block1) if_block1.c();
    			attr_dev(p, "class", "__center");
    			add_location(p, file$g, 39, 2, 688);
    			attr_dev(div0, "class", "panel panel_user __border_top svelte-1fj8iha");
    			add_location(div0, file$g, 38, 1, 642);
    			attr_dev(div1, "class", "grid_box svelte-1fj8iha");
    			add_location(div1, file$g, 13, 0, 177);
    		},
    		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);
    			if (if_block0) if_block0.m(div1, null);
    			append_dev(div1, t3);
    			append_dev(div1, div0);
    			append_dev(div0, p);
    			append_dev(div0, t5);
    			mount_component(button3, div0, null);
    			append_dev(div0, t6);
    			mount_component(button4, div0, null);
    			append_dev(div0, t7);
    			mount_component(button5, div0, null);
    			append_dev(div0, t8);
    			if (if_block1) if_block1.m(div0, null);
    			current = true;
    		},
    		p: function update(ctx, [dirty]) {
    			const button0_changes = {};
    			if (dirty & /*back*/ 1) button0_changes.new_layout = /*back*/ ctx[0];
    			if (dirty & /*back*/ 1) button0_changes.my_title = "go back " + /*back*/ ctx[0];

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

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

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

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

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

    			button2.$set(button2_changes);

    			if (/*back*/ ctx[0] === "room_set") {
    				if (if_block0) {
    					if (dirty & /*back*/ 1) {
    						transition_in(if_block0, 1);
    					}
    				} else {
    					if_block0 = create_if_block_1$4(ctx);
    					if_block0.c();
    					transition_in(if_block0, 1);
    					if_block0.m(div1, t3);
    				}
    			} else if (if_block0) {
    				group_outros();

    				transition_out(if_block0, 1, 1, () => {
    					if_block0 = null;
    				});

    				check_outros();
    			}

    			const button3_changes = {};

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

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

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

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

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

    			button5.$set(button5_changes);

    			if (/*back*/ ctx[0] === "room_set") {
    				if (if_block1) {
    					if_block1.p(ctx, dirty);

    					if (dirty & /*back*/ 1) {
    						transition_in(if_block1, 1);
    					}
    				} else {
    					if_block1 = create_if_block$a(ctx);
    					if_block1.c();
    					transition_in(if_block1, 1);
    					if_block1.m(div0, 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(button0.$$.fragment, local);
    			transition_in(button1.$$.fragment, local);
    			transition_in(button2.$$.fragment, local);
    			transition_in(if_block0);
    			transition_in(button3.$$.fragment, local);
    			transition_in(button4.$$.fragment, local);
    			transition_in(button5.$$.fragment, local);
    			transition_in(if_block1);
    			current = true;
    		},
    		o: function outro(local) {
    			transition_out(button0.$$.fragment, local);
    			transition_out(button1.$$.fragment, local);
    			transition_out(button2.$$.fragment, local);
    			transition_out(if_block0);
    			transition_out(button3.$$.fragment, local);
    			transition_out(button4.$$.fragment, local);
    			transition_out(button5.$$.fragment, local);
    			transition_out(if_block1);
    			current = false;
    		},
    		d: function destroy(detaching) {
    			if (detaching) detach_dev(div1);
    			destroy_component(button0);
    			destroy_component(button1);
    			destroy_component(button2);
    			if (if_block0) if_block0.d();
    			destroy_component(button3);
    			destroy_component(button4);
    			destroy_component(button5);
    			if (if_block1) if_block1.d();
    		}
    	};

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

    	return block_1;
    }

    function instance$j($$self, $$props, $$invalidate) {
    	let { $$slots: slots = {}, $$scope } = $$props;
    	validate_slots('Layout_user', slots, []);
    	let { back = "" } = $$props;
    	let mute = "mute";
    	let block = "block";
    	const writable_props = ['back'];

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

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

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

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

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

    	return [back, mute, block];
    }

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

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

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

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

    const { console: console_1$8 } = globals;

    // (70:30) 
    function create_if_block_9$2(ctx) {
    	let userlayout;
    	let current;

    	userlayout = new Layout_user({
    			props: { back: /*layouts*/ ctx[2][1] },
    			$$inline: true
    		});

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

    	dispatch_dev("SvelteRegisterBlock", {
    		block,
    		id: create_if_block_9$2.name,
    		type: "if",
    		source: "(70:30) ",
    		ctx
    	});

    	return block;
    }

    // (67:30) 
    function create_if_block_8$2(ctx) {
    	let mutelayout;
    	let current;

    	mutelayout = new Layout_mute({
    			props: { back: /*layouts*/ ctx[2][1] },
    			$$inline: true
    		});

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

    	dispatch_dev("SvelteRegisterBlock", {
    		block,
    		id: create_if_block_8$2.name,
    		type: "if",
    		source: "(67:30) ",
    		ctx
    	});

    	return block;
    }

    // (64:32) 
    function create_if_block_7$2(ctx) {
    	let createlayout;
    	let current;

    	createlayout = new Layout_create({
    			props: { back: /*layouts*/ ctx[2][1] },
    			$$inline: true
    		});

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

    	dispatch_dev("SvelteRegisterBlock", {
    		block,
    		id: create_if_block_7$2.name,
    		type: "if",
    		source: "(64:32) ",
    		ctx
    	});

    	return block;
    }

    // (61:35) 
    function create_if_block_6$2(ctx) {
    	let protectedlayout;
    	let current;

    	protectedlayout = new Layout_protected({
    			props: { back: /*layouts*/ ctx[2][1] },
    			$$inline: true
    		});

    	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];
    			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_6$2.name,
    		type: "if",
    		source: "(61:35) ",
    		ctx
    	});

    	return block;
    }

    // (58:34) 
    function create_if_block_5$3(ctx) {
    	let roomsetlayout;
    	let current;

    	roomsetlayout = new Layout_room_set({
    			props: { back: /*layouts*/ ctx[2][1] },
    			$$inline: true
    		});

    	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];
    			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_5$3.name,
    		type: "if",
    		source: "(58:34) ",
    		ctx
    	});

    	return block;
    }

    // (55:34) 
    function create_if_block_4$3(ctx) {
    	let settingslayout;
    	let current;

    	settingslayout = new Layout_settings({
    			props: { back: /*layouts*/ ctx[2][1] },
    			$$inline: true
    		});

    	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];
    			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_4$3.name,
    		type: "if",
    		source: "(55:34) ",
    		ctx
    	});

    	return block;
    }

    // (52:29) 
    function create_if_block_3$3(ctx) {
    	let newlayout;
    	let current;

    	newlayout = new Layout_new({
    			props: { back: /*layouts*/ ctx[2][1] },
    			$$inline: true
    		});

    	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];
    			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_3$3.name,
    		type: "if",
    		source: "(52:29) ",
    		ctx
    	});

    	return block;
    }

    // (49:30) 
    function create_if_block_2$3(ctx) {
    	let roomlayout;
    	let current;

    	roomlayout = new Layout_room({
    			props: { back: /*layouts*/ ctx[2][1] },
    			$$inline: true
    		});

    	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];
    			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_2$3.name,
    		type: "if",
    		source: "(49:30) ",
    		ctx
    	});

    	return block;
    }

    // (46:31) 
    function create_if_block_1$3(ctx) {
    	let closelayout;
    	let current;

    	closelayout = new Layout_close({
    			props: { back: /*layouts*/ ctx[2][0] },
    			$$inline: true
    		});

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

    	dispatch_dev("SvelteRegisterBlock", {
    		block,
    		id: create_if_block_1$3.name,
    		type: "if",
    		source: "(46:31) ",
    		ctx
    	});

    	return block;
    }

    // (43:1) {#if $layout === "home"}
    function create_if_block$9(ctx) {
    	let homelayout;
    	let current;
    	homelayout = new Layout_home({ $$inline: true });

    	const block = {
    		c: function create() {
    			create_component(homelayout.$$.fragment);
    		},
    		m: function mount(target, anchor) {
    			mount_component(homelayout, target, anchor);
    			current = true;
    		},
    		p: noop,
    		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$9.name,
    		type: "if",
    		source: "(43:1) {#if $layout === \\\"home\\\"}",
    		ctx
    	});

    	return block;
    }

    // (41:0) <ChatBox color={color}>
    function create_default_slot$2(ctx) {
    	let current_block_type_index;
    	let if_block;
    	let if_block_anchor;
    	let current;

    	const if_block_creators = [
    		create_if_block$9,
    		create_if_block_1$3,
    		create_if_block_2$3,
    		create_if_block_3$3,
    		create_if_block_4$3,
    		create_if_block_5$3,
    		create_if_block_6$2,
    		create_if_block_7$2,
    		create_if_block_8$2,
    		create_if_block_9$2
    	];

    	const if_blocks = [];

    	function select_block_type(ctx, dirty) {
    		if (/*$layout*/ ctx[1] === "home") return 0;
    		if (/*$layout*/ ctx[1] === "close") return 1;
    		if (/*$layout*/ ctx[1] === "room") return 2;
    		if (/*$layout*/ ctx[1] === "new") return 3;
    		if (/*$layout*/ ctx[1] === "settings") return 4;
    		if (/*$layout*/ ctx[1] === "room_set") return 5;
    		if (/*$layout*/ ctx[1] === "protected") return 6;
    		if (/*$layout*/ ctx[1] === "create") return 7;
    		if (/*$layout*/ ctx[1] === "mute") return 8;
    		if (/*$layout*/ ctx[1] === "user") return 9;
    		return -1;
    	}

    	if (~(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 (if_block) if_block.c();
    			if_block_anchor = empty$1();
    		},
    		m: function mount(target, anchor) {
    			if (~current_block_type_index) {
    				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 (~current_block_type_index) {
    					if_blocks[current_block_type_index].p(ctx, dirty);
    				}
    			} else {
    				if (if_block) {
    					group_outros();

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

    					check_outros();
    				}

    				if (~current_block_type_index) {
    					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);
    				} else {
    					if_block = null;
    				}
    			}
    		},
    		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 (~current_block_type_index) {
    				if_blocks[current_block_type_index].d(detaching);
    			}

    			if (detaching) detach_dev(if_block_anchor);
    		}
    	};

    	dispatch_dev("SvelteRegisterBlock", {
    		block,
    		id: create_default_slot$2.name,
    		type: "slot",
    		source: "(41:0) <ChatBox color={color}>",
    		ctx
    	});

    	return block;
    }

    function create_fragment$i(ctx) {
    	let chatbox;
    	let t;
    	let debug_1;
    	let updating_layouts;
    	let current;

    	chatbox = new Chat_box_css({
    			props: {
    				color: /*color*/ ctx[0],
    				$$slots: { default: [create_default_slot$2] },
    				$$scope: { ctx }
    			},
    			$$inline: true
    		});

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

    	let debug_1_props = {};

    	if (/*layouts*/ ctx[2] !== void 0) {
    		debug_1_props.layouts = /*layouts*/ ctx[2];
    	}

    	debug_1 = new Tmp_debug({ props: debug_1_props, $$inline: true });
    	binding_callbacks.push(() => bind(debug_1, 'layouts', debug_1_layouts_binding));

    	const block = {
    		c: function create() {
    			create_component(chatbox.$$.fragment);
    			t = space();
    			create_component(debug_1.$$.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(chatbox, target, anchor);
    			insert_dev(target, t, anchor);
    			mount_component(debug_1, target, anchor);
    			current = true;
    		},
    		p: function update(ctx, [dirty]) {
    			const chatbox_changes = {};
    			if (dirty & /*color*/ 1) chatbox_changes.color = /*color*/ ctx[0];

    			if (dirty & /*$$scope, $layout, layouts*/ 134) {
    				chatbox_changes.$$scope = { dirty, ctx };
    			}

    			chatbox.$set(chatbox_changes);
    			const debug_1_changes = {};

    			if (!updating_layouts && dirty & /*layouts*/ 4) {
    				updating_layouts = true;
    				debug_1_changes.layouts = /*layouts*/ ctx[2];
    				add_flush_callback(() => updating_layouts = false);
    			}

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

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

    	return block;
    }

    function instance$i($$self, $$props, $$invalidate) {
    	let $layout;
    	validate_store(layout, 'layout');
    	component_subscribe($$self, layout, $$value => $$invalidate(1, $layout = $$value));
    	let { $$slots: slots = {}, $$scope } = $$props;
    	validate_slots('Chat_layouts', slots, []);
    	let { color } = $$props;
    	let room = "";
    	let admin = false;
    	let layouts = ["home", "home"];

    	/* hold previous version of layout, to go back
    */
    	function set_layouts($layout) {
    		console.log("layouts:", layouts);
    		console.log("layout:", $layout);
    		if ($layout.length === 0) layout.set(layouts[0]); else if ($layout === "close") return; else if ($layout === layouts[0]) return; else if ($layout === layouts[1]) $$invalidate(2, layouts = [$layout, "home"]); else $$invalidate(2, layouts = [$layout, layouts[0]]);
    		console.log("- layouts:", layouts);
    	}

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

    	const writable_props = ['color'];

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

    	function debug_1_layouts_binding(value) {
    		layouts = value;
    		$$invalidate(2, layouts);
    	}

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

    	$$self.$capture_state = () => ({
    		Debug: Tmp_debug,
    		layout,
    		ChatBox: Chat_box_css,
    		CloseLayout: Layout_close,
    		HomeLayout: Layout_home,
    		RoomLayout: Layout_room,
    		NewLayout: Layout_new,
    		SettingsLayout: Layout_settings,
    		RoomsetLayout: Layout_room_set,
    		ProtectedLayout: Layout_protected,
    		CreateLayout: Layout_create,
    		MuteLayout: Layout_mute,
    		UserLayout: Layout_user,
    		color,
    		room,
    		admin,
    		layouts,
    		set_layouts,
    		$layout
    	});

    	$$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 ('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, debug_1_layouts_binding];
    }

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

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

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

    const PACKET_TYPES = Object.create(null); // no Map = no polyfill
    PACKET_TYPES["open"] = "0";
    PACKET_TYPES["close"] = "1";
    PACKET_TYPES["ping"] = "2";
    PACKET_TYPES["pong"] = "3";
    PACKET_TYPES["message"] = "4";
    PACKET_TYPES["upgrade"] = "5";
    PACKET_TYPES["noop"] = "6";
    const PACKET_TYPES_REVERSE = Object.create(null);
    Object.keys(PACKET_TYPES).forEach(key => {
        PACKET_TYPES_REVERSE[PACKET_TYPES[key]] = key;
    });
    const ERROR_PACKET = { type: "error", data: "parser error" };

    const withNativeBlob$1 = typeof Blob === "function" ||
        (typeof Blob !== "undefined" &&
            Object.prototype.toString.call(Blob) === "[object BlobConstructor]");
    const withNativeArrayBuffer$2 = typeof ArrayBuffer === "function";
    // ArrayBuffer.isView method is not defined in IE10
    const isView$1 = obj => {
        return typeof ArrayBuffer.isView === "function"
            ? ArrayBuffer.isView(obj)
            : obj && obj.buffer instanceof ArrayBuffer;
    };
    const encodePacket = ({ type, data }, supportsBinary, callback) => {
        if (withNativeBlob$1 && data instanceof Blob) {
            if (supportsBinary) {
                return callback(data);
            }
            else {
                return encodeBlobAsBase64(data, callback);
            }
        }
        else if (withNativeArrayBuffer$2 &&
            (data instanceof ArrayBuffer || isView$1(data))) {
            if (supportsBinary) {
                return callback(data);
            }
            else {
                return encodeBlobAsBase64(new Blob([data]), callback);
            }
        }
        // plain string
        return callback(PACKET_TYPES[type] + (data || ""));
    };
    const encodeBlobAsBase64 = (data, callback) => {
        const fileReader = new FileReader();
        fileReader.onload = function () {
            const content = fileReader.result.split(",")[1];
            callback("b" + content);
        };
        return fileReader.readAsDataURL(data);
    };

    const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/';
    // Use a lookup table to find the index.
    const lookup$1 = typeof Uint8Array === 'undefined' ? [] : new Uint8Array(256);
    for (let i = 0; i < chars.length; i++) {
        lookup$1[chars.charCodeAt(i)] = i;
    }
    const decode$1 = (base64) => {
        let bufferLength = base64.length * 0.75, len = base64.length, i, p = 0, encoded1, encoded2, encoded3, encoded4;
        if (base64[base64.length - 1] === '=') {
            bufferLength--;
            if (base64[base64.length - 2] === '=') {
                bufferLength--;
            }
        }
        const arraybuffer = new ArrayBuffer(bufferLength), bytes = new Uint8Array(arraybuffer);
        for (i = 0; i < len; i += 4) {
            encoded1 = lookup$1[base64.charCodeAt(i)];
            encoded2 = lookup$1[base64.charCodeAt(i + 1)];
            encoded3 = lookup$1[base64.charCodeAt(i + 2)];
            encoded4 = lookup$1[base64.charCodeAt(i + 3)];
            bytes[p++] = (encoded1 << 2) | (encoded2 >> 4);
            bytes[p++] = ((encoded2 & 15) << 4) | (encoded3 >> 2);
            bytes[p++] = ((encoded3 & 3) << 6) | (encoded4 & 63);
        }
        return arraybuffer;
    };

    const withNativeArrayBuffer$1 = typeof ArrayBuffer === "function";
    const decodePacket = (encodedPacket, binaryType) => {
        if (typeof encodedPacket !== "string") {
            return {
                type: "message",
                data: mapBinary(encodedPacket, binaryType)
            };
        }
        const type = encodedPacket.charAt(0);
        if (type === "b") {
            return {
                type: "message",
                data: decodeBase64Packet(encodedPacket.substring(1), binaryType)
            };
        }
        const packetType = PACKET_TYPES_REVERSE[type];
        if (!packetType) {
            return ERROR_PACKET;
        }
        return encodedPacket.length > 1
            ? {
                type: PACKET_TYPES_REVERSE[type],
                data: encodedPacket.substring(1)
            }
            : {
                type: PACKET_TYPES_REVERSE[type]
            };
    };
    const decodeBase64Packet = (data, binaryType) => {
        if (withNativeArrayBuffer$1) {
            const decoded = decode$1(data);
            return mapBinary(decoded, binaryType);
        }
        else {
            return { base64: true, data }; // fallback for old browsers
        }
    };
    const mapBinary = (data, binaryType) => {
        switch (binaryType) {
            case "blob":
                return data instanceof ArrayBuffer ? new Blob([data]) : data;
            case "arraybuffer":
            default:
                return data; // assuming the data is already an ArrayBuffer
        }
    };

    const SEPARATOR = String.fromCharCode(30); // see https://en.wikipedia.org/wiki/Delimiter#ASCII_delimited_text
    const encodePayload = (packets, callback) => {
        // some packets may be added to the array while encoding, so the initial length must be saved
        const length = packets.length;
        const encodedPackets = new Array(length);
        let count = 0;
        packets.forEach((packet, i) => {
            // force base64 encoding for binary packets
            encodePacket(packet, false, encodedPacket => {
                encodedPackets[i] = encodedPacket;
                if (++count === length) {
                    callback(encodedPackets.join(SEPARATOR));
                }
            });
        });
    };
    const decodePayload = (encodedPayload, binaryType) => {
        const encodedPackets = encodedPayload.split(SEPARATOR);
        const packets = [];
        for (let i = 0; i < encodedPackets.length; i++) {
            const decodedPacket = decodePacket(encodedPackets[i], binaryType);
            packets.push(decodedPacket);
            if (decodedPacket.type === "error") {
                break;
            }
        }
        return packets;
    };
    const protocol$1 = 4;

    /**
     * Initialize a new `Emitter`.
     *
     * @api public
     */

    function Emitter(obj) {
      if (obj) return mixin(obj);
    }

    /**
     * Mixin the emitter properties.
     *
     * @param {Object} obj
     * @return {Object}
     * @api private
     */

    function mixin(obj) {
      for (var key in Emitter.prototype) {
        obj[key] = Emitter.prototype[key];
      }
      return obj;
    }

    /**
     * Listen on the given `event` with `fn`.
     *
     * @param {String} event
     * @param {Function} fn
     * @return {Emitter}
     * @api public
     */

    Emitter.prototype.on =
    Emitter.prototype.addEventListener = function(event, fn){
      this._callbacks = this._callbacks || {};
      (this._callbacks['$' + event] = this._callbacks['$' + event] || [])
        .push(fn);
      return this;
    };

    /**
     * Adds an `event` listener that will be invoked a single
     * time then automatically removed.
     *
     * @param {String} event
     * @param {Function} fn
     * @return {Emitter}
     * @api public
     */

    Emitter.prototype.once = function(event, fn){
      function on() {
        this.off(event, on);
        fn.apply(this, arguments);
      }

      on.fn = fn;
      this.on(event, on);
      return this;
    };

    /**
     * Remove the given callback for `event` or all
     * registered callbacks.
     *
     * @param {String} event
     * @param {Function} fn
     * @return {Emitter}
     * @api public
     */

    Emitter.prototype.off =
    Emitter.prototype.removeListener =
    Emitter.prototype.removeAllListeners =
    Emitter.prototype.removeEventListener = function(event, fn){
      this._callbacks = this._callbacks || {};

      // all
      if (0 == arguments.length) {
        this._callbacks = {};
        return this;
      }

      // specific event
      var callbacks = this._callbacks['$' + event];
      if (!callbacks) return this;

      // remove all handlers
      if (1 == arguments.length) {
        delete this._callbacks['$' + event];
        return this;
      }

      // remove specific handler
      var cb;
      for (var i = 0; i < callbacks.length; i++) {
        cb = callbacks[i];
        if (cb === fn || cb.fn === fn) {
          callbacks.splice(i, 1);
          break;
        }
      }

      // Remove event specific arrays for event types that no
      // one is subscribed for to avoid memory leak.
      if (callbacks.length === 0) {
        delete this._callbacks['$' + event];
      }

      return this;
    };

    /**
     * Emit `event` with the given args.
     *
     * @param {String} event
     * @param {Mixed} ...
     * @return {Emitter}
     */

    Emitter.prototype.emit = function(event){
      this._callbacks = this._callbacks || {};

      var args = new Array(arguments.length - 1)
        , callbacks = this._callbacks['$' + event];

      for (var i = 1; i < arguments.length; i++) {
        args[i - 1] = arguments[i];
      }

      if (callbacks) {
        callbacks = callbacks.slice(0);
        for (var i = 0, len = callbacks.length; i < len; ++i) {
          callbacks[i].apply(this, args);
        }
      }

      return this;
    };

    // alias used for reserved events (protected method)
    Emitter.prototype.emitReserved = Emitter.prototype.emit;

    /**
     * Return array of callbacks for `event`.
     *
     * @param {String} event
     * @return {Array}
     * @api public
     */

    Emitter.prototype.listeners = function(event){
      this._callbacks = this._callbacks || {};
      return this._callbacks['$' + event] || [];
    };

    /**
     * Check if this emitter has `event` handlers.
     *
     * @param {String} event
     * @return {Boolean}
     * @api public
     */

    Emitter.prototype.hasListeners = function(event){
      return !! this.listeners(event).length;
    };

    const globalThisShim = (() => {
        if (typeof self !== "undefined") {
            return self;
        }
        else if (typeof window !== "undefined") {
            return window;
        }
        else {
            return Function("return this")();
        }
    })();

    function pick(obj, ...attr) {
        return attr.reduce((acc, k) => {
            if (obj.hasOwnProperty(k)) {
                acc[k] = obj[k];
            }
            return acc;
        }, {});
    }
    // Keep a reference to the real timeout functions so they can be used when overridden
    const NATIVE_SET_TIMEOUT = setTimeout;
    const NATIVE_CLEAR_TIMEOUT = clearTimeout;
    function installTimerFunctions(obj, opts) {
        if (opts.useNativeTimers) {
            obj.setTimeoutFn = NATIVE_SET_TIMEOUT.bind(globalThisShim);
            obj.clearTimeoutFn = NATIVE_CLEAR_TIMEOUT.bind(globalThisShim);
        }
        else {
            obj.setTimeoutFn = setTimeout.bind(globalThisShim);
            obj.clearTimeoutFn = clearTimeout.bind(globalThisShim);
        }
    }
    // base64 encoded buffers are about 33% bigger (https://en.wikipedia.org/wiki/Base64)
    const BASE64_OVERHEAD = 1.33;
    // we could also have used `new Blob([obj]).size`, but it isn't supported in IE9
    function byteLength(obj) {
        if (typeof obj === "string") {
            return utf8Length(obj);
        }
        // arraybuffer or blob
        return Math.ceil((obj.byteLength || obj.size) * BASE64_OVERHEAD);
    }
    function utf8Length(str) {
        let c = 0, length = 0;
        for (let i = 0, l = str.length; i < l; i++) {
            c = str.charCodeAt(i);
            if (c < 0x80) {
                length += 1;
            }
            else if (c < 0x800) {
                length += 2;
            }
            else if (c < 0xd800 || c >= 0xe000) {
                length += 3;
            }
            else {
                i++;
                length += 4;
            }
        }
        return length;
    }

    class TransportError extends Error {
        constructor(reason, description, context) {
            super(reason);
            this.description = description;
            this.context = context;
            this.type = "TransportError";
        }
    }
    class Transport extends Emitter {
        /**
         * Transport abstract constructor.
         *
         * @param {Object} options.
         * @api private
         */
        constructor(opts) {
            super();
            this.writable = false;
            installTimerFunctions(this, opts);
            this.opts = opts;
            this.query = opts.query;
            this.readyState = "";
            this.socket = opts.socket;
        }
        /**
         * Emits an error.
         *
         * @param {String} reason
         * @param description
         * @param context - the error context
         * @return {Transport} for chaining
         * @api protected
         */
        onError(reason, description, context) {
            super.emitReserved("error", new TransportError(reason, description, context));
            return this;
        }
        /**
         * Opens the transport.
         *
         * @api public
         */
        open() {
            if ("closed" === this.readyState || "" === this.readyState) {
                this.readyState = "opening";
                this.doOpen();
            }
            return this;
        }
        /**
         * Closes the transport.
         *
         * @api public
         */
        close() {
            if ("opening" === this.readyState || "open" === this.readyState) {
                this.doClose();
                this.onClose();
            }
            return this;
        }
        /**
         * Sends multiple packets.
         *
         * @param {Array} packets
         * @api public
         */
        send(packets) {
            if ("open" === this.readyState) {
                this.write(packets);
            }
        }
        /**
         * Called upon open
         *
         * @api protected
         */
        onOpen() {
            this.readyState = "open";
            this.writable = true;
            super.emitReserved("open");
        }
        /**
         * Called with data.
         *
         * @param {String} data
         * @api protected
         */
        onData(data) {
            const packet = decodePacket(data, this.socket.binaryType);
            this.onPacket(packet);
        }
        /**
         * Called with a decoded packet.
         *
         * @api protected
         */
        onPacket(packet) {
            super.emitReserved("packet", packet);
        }
        /**
         * Called upon close.
         *
         * @api protected
         */
        onClose(details) {
            this.readyState = "closed";
            super.emitReserved("close", details);
        }
    }

    // imported from https://github.com/unshiftio/yeast
    const alphabet = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz-_'.split(''), length = 64, map = {};
    let seed = 0, i = 0, prev;
    /**
     * Return a string representing the specified number.
     *
     * @param {Number} num The number to convert.
     * @returns {String} The string representation of the number.
     * @api public
     */
    function encode$1(num) {
        let encoded = '';
        do {
            encoded = alphabet[num % length] + encoded;
            num = Math.floor(num / length);
        } while (num > 0);
        return encoded;
    }
    /**
     * Yeast: A tiny growing id generator.
     *
     * @returns {String} A unique id.
     * @api public
     */
    function yeast() {
        const now = encode$1(+new Date());
        if (now !== prev)
            return seed = 0, prev = now;
        return now + '.' + encode$1(seed++);
    }
    //
    // Map each character to its index.
    //
    for (; i < length; i++)
        map[alphabet[i]] = i;

    // imported from https://github.com/galkn/querystring
    /**
     * Compiles a querystring
     * Returns string representation of the object
     *
     * @param {Object}
     * @api private
     */
    function encode(obj) {
        let str = '';
        for (let i in obj) {
            if (obj.hasOwnProperty(i)) {
                if (str.length)
                    str += '&';
                str += encodeURIComponent(i) + '=' + encodeURIComponent(obj[i]);
            }
        }
        return str;
    }
    /**
     * Parses a simple querystring into an object
     *
     * @param {String} qs
     * @api private
     */
    function decode(qs) {
        let qry = {};
        let pairs = qs.split('&');
        for (let i = 0, l = pairs.length; i < l; i++) {
            let pair = pairs[i].split('=');
            qry[decodeURIComponent(pair[0])] = decodeURIComponent(pair[1]);
        }
        return qry;
    }

    // imported from https://github.com/component/has-cors
    let value = false;
    try {
        value = typeof XMLHttpRequest !== 'undefined' &&
            'withCredentials' in new XMLHttpRequest();
    }
    catch (err) {
        // if XMLHttp support is disabled in IE then it will throw
        // when trying to create
    }
    const hasCORS = value;

    // browser shim for xmlhttprequest module
    function XHR(opts) {
        const xdomain = opts.xdomain;
        // XMLHttpRequest can be disabled on IE
        try {
            if ("undefined" !== typeof XMLHttpRequest && (!xdomain || hasCORS)) {
                return new XMLHttpRequest();
            }
        }
        catch (e) { }
        if (!xdomain) {
            try {
                return new globalThisShim[["Active"].concat("Object").join("X")]("Microsoft.XMLHTTP");
            }
            catch (e) { }
        }
    }

    function empty() { }
    const hasXHR2 = (function () {
        const xhr = new XHR({
            xdomain: false
        });
        return null != xhr.responseType;
    })();
    class Polling extends Transport {
        /**
         * XHR Polling constructor.
         *
         * @param {Object} opts
         * @api public
         */
        constructor(opts) {
            super(opts);
            this.polling = false;
            if (typeof location !== "undefined") {
                const isSSL = "https:" === location.protocol;
                let port = location.port;
                // some user agents have empty `location.port`
                if (!port) {
                    port = isSSL ? "443" : "80";
                }
                this.xd =
                    (typeof location !== "undefined" &&
                        opts.hostname !== location.hostname) ||
                        port !== opts.port;
                this.xs = opts.secure !== isSSL;
            }
            /**
             * XHR supports binary
             */
            const forceBase64 = opts && opts.forceBase64;
            this.supportsBinary = hasXHR2 && !forceBase64;
        }
        /**
         * Transport name.
         */
        get name() {
            return "polling";
        }
        /**
         * Opens the socket (triggers polling). We write a PING message to determine
         * when the transport is open.
         *
         * @api private
         */
        doOpen() {
            this.poll();
        }
        /**
         * Pauses polling.
         *
         * @param {Function} callback upon buffers are flushed and transport is paused
         * @api private
         */
        pause(onPause) {
            this.readyState = "pausing";
            const pause = () => {
                this.readyState = "paused";
                onPause();
            };
            if (this.polling || !this.writable) {
                let total = 0;
                if (this.polling) {
                    total++;
                    this.once("pollComplete", function () {
                        --total || pause();
                    });
                }
                if (!this.writable) {
                    total++;
                    this.once("drain", function () {
                        --total || pause();
                    });
                }
            }
            else {
                pause();
            }
        }
        /**
         * Starts polling cycle.
         *
         * @api public
         */
        poll() {
            this.polling = true;
            this.doPoll();
            this.emitReserved("poll");
        }
        /**
         * Overloads onData to detect payloads.
         *
         * @api private
         */
        onData(data) {
            const callback = packet => {
                // if its the first message we consider the transport open
                if ("opening" === this.readyState && packet.type === "open") {
                    this.onOpen();
                }
                // if its a close packet, we close the ongoing requests
                if ("close" === packet.type) {
                    this.onClose({ description: "transport closed by the server" });
                    return false;
                }
                // otherwise bypass onData and handle the message
                this.onPacket(packet);
            };
            // decode payload
            decodePayload(data, this.socket.binaryType).forEach(callback);
            // if an event did not trigger closing
            if ("closed" !== this.readyState) {
                // if we got data we're not polling
                this.polling = false;
                this.emitReserved("pollComplete");
                if ("open" === this.readyState) {
                    this.poll();
                }
            }
        }
        /**
         * For polling, send a close packet.
         *
         * @api private
         */
        doClose() {
            const close = () => {
                this.write([{ type: "close" }]);
            };
            if ("open" === this.readyState) {
                close();
            }
            else {
                // in case we're trying to close while
                // handshaking is in progress (GH-164)
                this.once("open", close);
            }
        }
        /**
         * Writes a packets payload.
         *
         * @param {Array} data packets
         * @param {Function} drain callback
         * @api private
         */
        write(packets) {
            this.writable = false;
            encodePayload(packets, data => {
                this.doWrite(data, () => {
                    this.writable = true;
                    this.emitReserved("drain");
                });
            });
        }
        /**
         * Generates uri for connection.
         *
         * @api private
         */
        uri() {
            let query = this.query || {};
            const schema = this.opts.secure ? "https" : "http";
            let port = "";
            // cache busting is forced
            if (false !== this.opts.timestampRequests) {
                query[this.opts.timestampParam] = yeast();
            }
            if (!this.supportsBinary && !query.sid) {
                query.b64 = 1;
            }
            // avoid port if default for schema
            if (this.opts.port &&
                (("https" === schema && Number(this.opts.port) !== 443) ||
                    ("http" === schema && Number(this.opts.port) !== 80))) {
                port = ":" + this.opts.port;
            }
            const encodedQuery = encode(query);
            const ipv6 = this.opts.hostname.indexOf(":") !== -1;
            return (schema +
                "://" +
                (ipv6 ? "[" + this.opts.hostname + "]" : this.opts.hostname) +
                port +
                this.opts.path +
                (encodedQuery.length ? "?" + encodedQuery : ""));
        }
        /**
         * Creates a request.
         *
         * @param {String} method
         * @api private
         */
        request(opts = {}) {
            Object.assign(opts, { xd: this.xd, xs: this.xs }, this.opts);
            return new Request(this.uri(), opts);
        }
        /**
         * Sends data.
         *
         * @param {String} data to send.
         * @param {Function} called upon flush.
         * @api private
         */
        doWrite(data, fn) {
            const req = this.request({
                method: "POST",
                data: data
            });
            req.on("success", fn);
            req.on("error", (xhrStatus, context) => {
                this.onError("xhr post error", xhrStatus, context);
            });
        }
        /**
         * Starts a poll cycle.
         *
         * @api private
         */
        doPoll() {
            const req = this.request();
            req.on("data", this.onData.bind(this));
            req.on("error", (xhrStatus, context) => {
                this.onError("xhr poll error", xhrStatus, context);
            });
            this.pollXhr = req;
        }
    }
    class Request extends Emitter {
        /**
         * Request constructor
         *
         * @param {Object} options
         * @api public
         */
        constructor(uri, opts) {
            super();
            installTimerFunctions(this, opts);
            this.opts = opts;
            this.method = opts.method || "GET";
            this.uri = uri;
            this.async = false !== opts.async;
            this.data = undefined !== opts.data ? opts.data : null;
            this.create();
        }
        /**
         * Creates the XHR object and sends the request.
         *
         * @api private
         */
        create() {
            const opts = pick(this.opts, "agent", "pfx", "key", "passphrase", "cert", "ca", "ciphers", "rejectUnauthorized", "autoUnref");
            opts.xdomain = !!this.opts.xd;
            opts.xscheme = !!this.opts.xs;
            const xhr = (this.xhr = new XHR(opts));
            try {
                xhr.open(this.method, this.uri, this.async);
                try {
                    if (this.opts.extraHeaders) {
                        xhr.setDisableHeaderCheck && xhr.setDisableHeaderCheck(true);
                        for (let i in this.opts.extraHeaders) {
                            if (this.opts.extraHeaders.hasOwnProperty(i)) {
                                xhr.setRequestHeader(i, this.opts.extraHeaders[i]);
                            }
                        }
                    }
                }
                catch (e) { }
                if ("POST" === this.method) {
                    try {
                        xhr.setRequestHeader("Content-type", "text/plain;charset=UTF-8");
                    }
                    catch (e) { }
                }
                try {
                    xhr.setRequestHeader("Accept", "*/*");
                }
                catch (e) { }
                // ie6 check
                if ("withCredentials" in xhr) {
                    xhr.withCredentials = this.opts.withCredentials;
                }
                if (this.opts.requestTimeout) {
                    xhr.timeout = this.opts.requestTimeout;
                }
                xhr.onreadystatechange = () => {
                    if (4 !== xhr.readyState)
                        return;
                    if (200 === xhr.status || 1223 === xhr.status) {
                        this.onLoad();
                    }
                    else {
                        // make sure the `error` event handler that's user-set
                        // does not throw in the same tick and gets caught here
                        this.setTimeoutFn(() => {
                            this.onError(typeof xhr.status === "number" ? xhr.status : 0);
                        }, 0);
                    }
                };
                xhr.send(this.data);
            }
            catch (e) {
                // Need to defer since .create() is called directly from the constructor
                // and thus the 'error' event can only be only bound *after* this exception
                // occurs.  Therefore, also, we cannot throw here at all.
                this.setTimeoutFn(() => {
                    this.onError(e);
                }, 0);
                return;
            }
            if (typeof document !== "undefined") {
                this.index = Request.requestsCount++;
                Request.requests[this.index] = this;
            }
        }
        /**
         * Called upon error.
         *
         * @api private
         */
        onError(err) {
            this.emitReserved("error", err, this.xhr);
            this.cleanup(true);
        }
        /**
         * Cleans up house.
         *
         * @api private
         */
        cleanup(fromError) {
            if ("undefined" === typeof this.xhr || null === this.xhr) {
                return;
            }
            this.xhr.onreadystatechange = empty;
            if (fromError) {
                try {
                    this.xhr.abort();
                }
                catch (e) { }
            }
            if (typeof document !== "undefined") {
                delete Request.requests[this.index];
            }
            this.xhr = null;
        }
        /**
         * Called upon load.
         *
         * @api private
         */
        onLoad() {
            const data = this.xhr.responseText;
            if (data !== null) {
                this.emitReserved("data", data);
                this.emitReserved("success");
                this.cleanup();
            }
        }
        /**
         * Aborts the request.
         *
         * @api public
         */
        abort() {
            this.cleanup();
        }
    }
    Request.requestsCount = 0;
    Request.requests = {};
    /**
     * Aborts pending requests when unloading the window. This is needed to prevent
     * memory leaks (e.g. when using IE) and to ensure that no spurious error is
     * emitted.
     */
    if (typeof document !== "undefined") {
        // @ts-ignore
        if (typeof attachEvent === "function") {
            // @ts-ignore
            attachEvent("onunload", unloadHandler);
        }
        else if (typeof addEventListener === "function") {
            const terminationEvent = "onpagehide" in globalThisShim ? "pagehide" : "unload";
            addEventListener(terminationEvent, unloadHandler, false);
        }
    }
    function unloadHandler() {
        for (let i in Request.requests) {
            if (Request.requests.hasOwnProperty(i)) {
                Request.requests[i].abort();
            }
        }
    }

    const nextTick = (() => {
        const isPromiseAvailable = typeof Promise === "function" && typeof Promise.resolve === "function";
        if (isPromiseAvailable) {
            return cb => Promise.resolve().then(cb);
        }
        else {
            return (cb, setTimeoutFn) => setTimeoutFn(cb, 0);
        }
    })();
    const WebSocket$1 = globalThisShim.WebSocket || globalThisShim.MozWebSocket;
    const usingBrowserWebSocket = true;
    const defaultBinaryType = "arraybuffer";

    // detect ReactNative environment
    const isReactNative = typeof navigator !== "undefined" &&
        typeof navigator.product === "string" &&
        navigator.product.toLowerCase() === "reactnative";
    class WS extends Transport {
        /**
         * WebSocket transport constructor.
         *
         * @api {Object} connection options
         * @api public
         */
        constructor(opts) {
            super(opts);
            this.supportsBinary = !opts.forceBase64;
        }
        /**
         * Transport name.
         *
         * @api public
         */
        get name() {
            return "websocket";
        }
        /**
         * Opens socket.
         *
         * @api private
         */
        doOpen() {
            if (!this.check()) {
                // let probe timeout
                return;
            }
            const uri = this.uri();
            const protocols = this.opts.protocols;
            // React Native only supports the 'headers' option, and will print a warning if anything else is passed
            const opts = isReactNative
                ? {}
                : pick(this.opts, "agent", "perMessageDeflate", "pfx", "key", "passphrase", "cert", "ca", "ciphers", "rejectUnauthorized", "localAddress", "protocolVersion", "origin", "maxPayload", "family", "checkServerIdentity");
            if (this.opts.extraHeaders) {
                opts.headers = this.opts.extraHeaders;
            }
            try {
                this.ws =
                    usingBrowserWebSocket && !isReactNative
                        ? protocols
                            ? new WebSocket$1(uri, protocols)
                            : new WebSocket$1(uri)
                        : new WebSocket$1(uri, protocols, opts);
            }
            catch (err) {
                return this.emitReserved("error", err);
            }
            this.ws.binaryType = this.socket.binaryType || defaultBinaryType;
            this.addEventListeners();
        }
        /**
         * Adds event listeners to the socket
         *
         * @api private
         */
        addEventListeners() {
            this.ws.onopen = () => {
                if (this.opts.autoUnref) {
                    this.ws._socket.unref();
                }
                this.onOpen();
            };
            this.ws.onclose = closeEvent => this.onClose({
                description: "websocket connection closed",
                context: closeEvent
            });
            this.ws.onmessage = ev => this.onData(ev.data);
            this.ws.onerror = e => this.onError("websocket error", e);
        }
        /**
         * Writes data to socket.
         *
         * @param {Array} array of packets.
         * @api private
         */
        write(packets) {
            this.writable = false;
            // encodePacket efficient as it uses WS framing
            // no need for encodePayload
            for (let i = 0; i < packets.length; i++) {
                const packet = packets[i];
                const lastPacket = i === packets.length - 1;
                encodePacket(packet, this.supportsBinary, data => {
                    // always create a new object (GH-437)
                    const opts = {};
                    // Sometimes the websocket has already been closed but the browser didn't
                    // have a chance of informing us about it yet, in that case send will
                    // throw an error
                    try {
                        if (usingBrowserWebSocket) {
                            // TypeError is thrown when passing the second argument on Safari
                            this.ws.send(data);
                        }
                    }
                    catch (e) {
                    }
                    if (lastPacket) {
                        // fake drain
                        // defer to next tick to allow Socket to clear writeBuffer
                        nextTick(() => {
                            this.writable = true;
                            this.emitReserved("drain");
                        }, this.setTimeoutFn);
                    }
                });
            }
        }
        /**
         * Closes socket.
         *
         * @api private
         */
        doClose() {
            if (typeof this.ws !== "undefined") {
                this.ws.close();
                this.ws = null;
            }
        }
        /**
         * Generates uri for connection.
         *
         * @api private
         */
        uri() {
            let query = this.query || {};
            const schema = this.opts.secure ? "wss" : "ws";
            let port = "";
            // avoid port if default for schema
            if (this.opts.port &&
                (("wss" === schema && Number(this.opts.port) !== 443) ||
                    ("ws" === schema && Number(this.opts.port) !== 80))) {
                port = ":" + this.opts.port;
            }
            // append timestamp to URI
            if (this.opts.timestampRequests) {
                query[this.opts.timestampParam] = yeast();
            }
            // communicate binary support capabilities
            if (!this.supportsBinary) {
                query.b64 = 1;
            }
            const encodedQuery = encode(query);
            const ipv6 = this.opts.hostname.indexOf(":") !== -1;
            return (schema +
                "://" +
                (ipv6 ? "[" + this.opts.hostname + "]" : this.opts.hostname) +
                port +
                this.opts.path +
                (encodedQuery.length ? "?" + encodedQuery : ""));
        }
        /**
         * Feature detection for WebSocket.
         *
         * @return {Boolean} whether this transport is available.
         * @api public
         */
        check() {
            return !!WebSocket$1;
        }
    }

    const transports = {
        websocket: WS,
        polling: Polling
    };

    // imported from https://github.com/galkn/parseuri
    /**
     * Parses an URI
     *
     * @author Steven Levithan <stevenlevithan.com> (MIT license)
     * @api private
     */
    const re = /^(?:(?![^:@]+:[^:@\/]*@)(http|https|ws|wss):\/\/)?((?:(([^:@]*)(?::([^:@]*))?)?@)?((?:[a-f0-9]{0,4}:){2,7}[a-f0-9]{0,4}|[^:\/?#]*)(?::(\d*))?)(((\/(?:[^?#](?![^?#\/]*\.[^?#\/.]+(?:[?#]|$)))*\/?)?([^?#\/]*))(?:\?([^#]*))?(?:#(.*))?)/;
    const parts = [
        'source', 'protocol', 'authority', 'userInfo', 'user', 'password', 'host', 'port', 'relative', 'path', 'directory', 'file', 'query', 'anchor'
    ];
    function parse(str) {
        const src = str, b = str.indexOf('['), e = str.indexOf(']');
        if (b != -1 && e != -1) {
            str = str.substring(0, b) + str.substring(b, e).replace(/:/g, ';') + str.substring(e, str.length);
        }
        let m = re.exec(str || ''), uri = {}, i = 14;
        while (i--) {
            uri[parts[i]] = m[i] || '';
        }
        if (b != -1 && e != -1) {
            uri.source = src;
            uri.host = uri.host.substring(1, uri.host.length - 1).replace(/;/g, ':');
            uri.authority = uri.authority.replace('[', '').replace(']', '').replace(/;/g, ':');
            uri.ipv6uri = true;
        }
        uri.pathNames = pathNames(uri, uri['path']);
        uri.queryKey = queryKey(uri, uri['query']);
        return uri;
    }
    function pathNames(obj, path) {
        const regx = /\/{2,9}/g, names = path.replace(regx, "/").split("/");
        if (path.slice(0, 1) == '/' || path.length === 0) {
            names.splice(0, 1);
        }
        if (path.slice(-1) == '/') {
            names.splice(names.length - 1, 1);
        }
        return names;
    }
    function queryKey(uri, query) {
        const data = {};
        query.replace(/(?:^|&)([^&=]*)=?([^&]*)/g, function ($0, $1, $2) {
            if ($1) {
                data[$1] = $2;
            }
        });
        return data;
    }

    class Socket$1 extends Emitter {
        /**
         * Socket constructor.
         *
         * @param {String|Object} uri or options
         * @param {Object} opts - options
         * @api public
         */
        constructor(uri, opts = {}) {
            super();
            if (uri && "object" === typeof uri) {
                opts = uri;
                uri = null;
            }
            if (uri) {
                uri = parse(uri);
                opts.hostname = uri.host;
                opts.secure = uri.protocol === "https" || uri.protocol === "wss";
                opts.port = uri.port;
                if (uri.query)
                    opts.query = uri.query;
            }
            else if (opts.host) {
                opts.hostname = parse(opts.host).host;
            }
            installTimerFunctions(this, opts);
            this.secure =
                null != opts.secure
                    ? opts.secure
                    : typeof location !== "undefined" && "https:" === location.protocol;
            if (opts.hostname && !opts.port) {
                // if no port is specified manually, use the protocol default
                opts.port = this.secure ? "443" : "80";
            }
            this.hostname =
                opts.hostname ||
                    (typeof location !== "undefined" ? location.hostname : "localhost");
            this.port =
                opts.port ||
                    (typeof location !== "undefined" && location.port
                        ? location.port
                        : this.secure
                            ? "443"
                            : "80");
            this.transports = opts.transports || ["polling", "websocket"];
            this.readyState = "";
            this.writeBuffer = [];
            this.prevBufferLen = 0;
            this.opts = Object.assign({
                path: "/engine.io",
                agent: false,
                withCredentials: false,
                upgrade: true,
                timestampParam: "t",
                rememberUpgrade: false,
                rejectUnauthorized: true,
                perMessageDeflate: {
                    threshold: 1024
                },
                transportOptions: {},
                closeOnBeforeunload: true
            }, opts);
            this.opts.path = this.opts.path.replace(/\/$/, "") + "/";
            if (typeof this.opts.query === "string") {
                this.opts.query = decode(this.opts.query);
            }
            // set on handshake
            this.id = null;
            this.upgrades = null;
            this.pingInterval = null;
            this.pingTimeout = null;
            // set on heartbeat
            this.pingTimeoutTimer = null;
            if (typeof addEventListener === "function") {
                if (this.opts.closeOnBeforeunload) {
                    // Firefox closes the connection when the "beforeunload" event is emitted but not Chrome. This event listener
                    // ensures every browser behaves the same (no "disconnect" event at the Socket.IO level when the page is
                    // closed/reloaded)
                    this.beforeunloadEventListener = () => {
                        if (this.transport) {
                            // silently close the transport
                            this.transport.removeAllListeners();
                            this.transport.close();
                        }
                    };
                    addEventListener("beforeunload", this.beforeunloadEventListener, false);
                }
                if (this.hostname !== "localhost") {
                    this.offlineEventListener = () => {
                        this.onClose("transport close", {
                            description: "network connection lost"
                        });
                    };
                    addEventListener("offline", this.offlineEventListener, false);
                }
            }
            this.open();
        }
        /**
         * Creates transport of the given type.
         *
         * @param {String} transport name
         * @return {Transport}
         * @api private
         */
        createTransport(name) {
            const query = Object.assign({}, this.opts.query);
            // append engine.io protocol identifier
            query.EIO = protocol$1;
            // transport name
            query.transport = name;
            // session id if we already have one
            if (this.id)
                query.sid = this.id;
            const opts = Object.assign({}, this.opts.transportOptions[name], this.opts, {
                query,
                socket: this,
                hostname: this.hostname,
                secure: this.secure,
                port: this.port
            });
            return new transports[name](opts);
        }
        /**
         * Initializes transport to use and starts probe.
         *
         * @api private
         */
        open() {
            let transport;
            if (this.opts.rememberUpgrade &&
                Socket$1.priorWebsocketSuccess &&
                this.transports.indexOf("websocket") !== -1) {
                transport = "websocket";
            }
            else if (0 === this.transports.length) {
                // Emit error on next tick so it can be listened to
                this.setTimeoutFn(() => {
                    this.emitReserved("error", "No transports available");
                }, 0);
                return;
            }
            else {
                transport = this.transports[0];
            }
            this.readyState = "opening";
            // Retry with the next transport if the transport is disabled (jsonp: false)
            try {
                transport = this.createTransport(transport);
            }
            catch (e) {
                this.transports.shift();
                this.open();
                return;
            }
            transport.open();
            this.setTransport(transport);
        }
        /**
         * Sets the current transport. Disables the existing one (if any).
         *
         * @api private
         */
        setTransport(transport) {
            if (this.transport) {
                this.transport.removeAllListeners();
            }
            // set up transport
            this.transport = transport;
            // set up transport listeners
            transport
                .on("drain", this.onDrain.bind(this))
                .on("packet", this.onPacket.bind(this))
                .on("error", this.onError.bind(this))
                .on("close", reason => this.onClose("transport close", reason));
        }
        /**
         * Probes a transport.
         *
         * @param {String} transport name
         * @api private
         */
        probe(name) {
            let transport = this.createTransport(name);
            let failed = false;
            Socket$1.priorWebsocketSuccess = false;
            const onTransportOpen = () => {
                if (failed)
                    return;
                transport.send([{ type: "ping", data: "probe" }]);
                transport.once("packet", msg => {
                    if (failed)
                        return;
                    if ("pong" === msg.type && "probe" === msg.data) {
                        this.upgrading = true;
                        this.emitReserved("upgrading", transport);
                        if (!transport)
                            return;
                        Socket$1.priorWebsocketSuccess = "websocket" === transport.name;
                        this.transport.pause(() => {
                            if (failed)
                                return;
                            if ("closed" === this.readyState)
                                return;
                            cleanup();
                            this.setTransport(transport);
                            transport.send([{ type: "upgrade" }]);
                            this.emitReserved("upgrade", transport);
                            transport = null;
                            this.upgrading = false;
                            this.flush();
                        });
                    }
                    else {
                        const err = new Error("probe error");
                        // @ts-ignore
                        err.transport = transport.name;
                        this.emitReserved("upgradeError", err);
                    }
                });
            };
            function freezeTransport() {
                if (failed)
                    return;
                // Any callback called by transport should be ignored since now
                failed = true;
                cleanup();
                transport.close();
                transport = null;
            }
            // Handle any error that happens while probing
            const onerror = err => {
                const error = new Error("probe error: " + err);
                // @ts-ignore
                error.transport = transport.name;
                freezeTransport();
                this.emitReserved("upgradeError", error);
            };
            function onTransportClose() {
                onerror("transport closed");
            }
            // When the socket is closed while we're probing
            function onclose() {
                onerror("socket closed");
            }
            // When the socket is upgraded while we're probing
            function onupgrade(to) {
                if (transport && to.name !== transport.name) {
                    freezeTransport();
                }
            }
            // Remove all listeners on the transport and on self
            const cleanup = () => {
                transport.removeListener("open", onTransportOpen);
                transport.removeListener("error", onerror);
                transport.removeListener("close", onTransportClose);
                this.off("close", onclose);
                this.off("upgrading", onupgrade);
            };
            transport.once("open", onTransportOpen);
            transport.once("error", onerror);
            transport.once("close", onTransportClose);
            this.once("close", onclose);
            this.once("upgrading", onupgrade);
            transport.open();
        }
        /**
         * Called when connection is deemed open.
         *
         * @api private
         */
        onOpen() {
            this.readyState = "open";
            Socket$1.priorWebsocketSuccess = "websocket" === this.transport.name;
            this.emitReserved("open");
            this.flush();
            // we check for `readyState` in case an `open`
            // listener already closed the socket
            if ("open" === this.readyState &&
                this.opts.upgrade &&
                this.transport.pause) {
                let i = 0;
                const l = this.upgrades.length;
                for (; i < l; i++) {
                    this.probe(this.upgrades[i]);
                }
            }
        }
        /**
         * Handles a packet.
         *
         * @api private
         */
        onPacket(packet) {
            if ("opening" === this.readyState ||
                "open" === this.readyState ||
                "closing" === this.readyState) {
                this.emitReserved("packet", packet);
                // Socket is live - any packet counts
                this.emitReserved("heartbeat");
                switch (packet.type) {
                    case "open":
                        this.onHandshake(JSON.parse(packet.data));
                        break;
                    case "ping":
                        this.resetPingTimeout();
                        this.sendPacket("pong");
                        this.emitReserved("ping");
                        this.emitReserved("pong");
                        break;
                    case "error":
                        const err = new Error("server error");
                        // @ts-ignore
                        err.code = packet.data;
                        this.onError(err);
                        break;
                    case "message":
                        this.emitReserved("data", packet.data);
                        this.emitReserved("message", packet.data);
                        break;
                }
            }
        }
        /**
         * Called upon handshake completion.
         *
         * @param {Object} data - handshake obj
         * @api private
         */
        onHandshake(data) {
            this.emitReserved("handshake", data);
            this.id = data.sid;
            this.transport.query.sid = data.sid;
            this.upgrades = this.filterUpgrades(data.upgrades);
            this.pingInterval = data.pingInterval;
            this.pingTimeout = data.pingTimeout;
            this.maxPayload = data.maxPayload;
            this.onOpen();
            // In case open handler closes socket
            if ("closed" === this.readyState)
                return;
            this.resetPingTimeout();
        }
        /**
         * Sets and resets ping timeout timer based on server pings.
         *
         * @api private
         */
        resetPingTimeout() {
            this.clearTimeoutFn(this.pingTimeoutTimer);
            this.pingTimeoutTimer = this.setTimeoutFn(() => {
                this.onClose("ping timeout");
            }, this.pingInterval + this.pingTimeout);
            if (this.opts.autoUnref) {
                this.pingTimeoutTimer.unref();
            }
        }
        /**
         * Called on `drain` event
         *
         * @api private
         */
        onDrain() {
            this.writeBuffer.splice(0, this.prevBufferLen);
            // setting prevBufferLen = 0 is very important
            // for example, when upgrading, upgrade packet is sent over,
            // and a nonzero prevBufferLen could cause problems on `drain`
            this.prevBufferLen = 0;
            if (0 === this.writeBuffer.length) {
                this.emitReserved("drain");
            }
            else {
                this.flush();
            }
        }
        /**
         * Flush write buffers.
         *
         * @api private
         */
        flush() {
            if ("closed" !== this.readyState &&
                this.transport.writable &&
                !this.upgrading &&
                this.writeBuffer.length) {
                const packets = this.getWritablePackets();
                this.transport.send(packets);
                // keep track of current length of writeBuffer
                // splice writeBuffer and callbackBuffer on `drain`
                this.prevBufferLen = packets.length;
                this.emitReserved("flush");
            }
        }
        /**
         * Ensure the encoded size of the writeBuffer is below the maxPayload value sent by the server (only for HTTP
         * long-polling)
         *
         * @private
         */
        getWritablePackets() {
            const shouldCheckPayloadSize = this.maxPayload &&
                this.transport.name === "polling" &&
                this.writeBuffer.length > 1;
            if (!shouldCheckPayloadSize) {
                return this.writeBuffer;
            }
            let payloadSize = 1; // first packet type
            for (let i = 0; i < this.writeBuffer.length; i++) {
                const data = this.writeBuffer[i].data;
                if (data) {
                    payloadSize += byteLength(data);
                }
                if (i > 0 && payloadSize > this.maxPayload) {
                    return this.writeBuffer.slice(0, i);
                }
                payloadSize += 2; // separator + packet type
            }
            return this.writeBuffer;
        }
        /**
         * Sends a message.
         *
         * @param {String} message.
         * @param {Function} callback function.
         * @param {Object} options.
         * @return {Socket} for chaining.
         * @api public
         */
        write(msg, options, fn) {
            this.sendPacket("message", msg, options, fn);
            return this;
        }
        send(msg, options, fn) {
            this.sendPacket("message", msg, options, fn);
            return this;
        }
        /**
         * Sends a packet.
         *
         * @param {String} packet type.
         * @param {String} data.
         * @param {Object} options.
         * @param {Function} callback function.
         * @api private
         */
        sendPacket(type, data, options, fn) {
            if ("function" === typeof data) {
                fn = data;
                data = undefined;
            }
            if ("function" === typeof options) {
                fn = options;
                options = null;
            }
            if ("closing" === this.readyState || "closed" === this.readyState) {
                return;
            }
            options = options || {};
            options.compress = false !== options.compress;
            const packet = {
                type: type,
                data: data,
                options: options
            };
            this.emitReserved("packetCreate", packet);
            this.writeBuffer.push(packet);
            if (fn)
                this.once("flush", fn);
            this.flush();
        }
        /**
         * Closes the connection.
         *
         * @api public
         */
        close() {
            const close = () => {
                this.onClose("forced close");
                this.transport.close();
            };
            const cleanupAndClose = () => {
                this.off("upgrade", cleanupAndClose);
                this.off("upgradeError", cleanupAndClose);
                close();
            };
            const waitForUpgrade = () => {
                // wait for upgrade to finish since we can't send packets while pausing a transport
                this.once("upgrade", cleanupAndClose);
                this.once("upgradeError", cleanupAndClose);
            };
            if ("opening" === this.readyState || "open" === this.readyState) {
                this.readyState = "closing";
                if (this.writeBuffer.length) {
                    this.once("drain", () => {
                        if (this.upgrading) {
                            waitForUpgrade();
                        }
                        else {
                            close();
                        }
                    });
                }
                else if (this.upgrading) {
                    waitForUpgrade();
                }
                else {
                    close();
                }
            }
            return this;
        }
        /**
         * Called upon transport error
         *
         * @api private
         */
        onError(err) {
            Socket$1.priorWebsocketSuccess = false;
            this.emitReserved("error", err);
            this.onClose("transport error", err);
        }
        /**
         * Called upon transport close.
         *
         * @api private
         */
        onClose(reason, description) {
            if ("opening" === this.readyState ||
                "open" === this.readyState ||
                "closing" === this.readyState) {
                // clear timers
                this.clearTimeoutFn(this.pingTimeoutTimer);
                // stop event from firing again for transport
                this.transport.removeAllListeners("close");
                // ensure transport won't stay open
                this.transport.close();
                // ignore further transport communication
                this.transport.removeAllListeners();
                if (typeof removeEventListener === "function") {
                    removeEventListener("beforeunload", this.beforeunloadEventListener, false);
                    removeEventListener("offline", this.offlineEventListener, false);
                }
                // set ready state
                this.readyState = "closed";
                // clear session id
                this.id = null;
                // emit close event
                this.emitReserved("close", reason, description);
                // clean buffers after, so users can still
                // grab the buffers on `close` event
                this.writeBuffer = [];
                this.prevBufferLen = 0;
            }
        }
        /**
         * Filters upgrades, returning only those matching client transports.
         *
         * @param {Array} server upgrades
         * @api private
         *
         */
        filterUpgrades(upgrades) {
            const filteredUpgrades = [];
            let i = 0;
            const j = upgrades.length;
            for (; i < j; i++) {
                if (~this.transports.indexOf(upgrades[i]))
                    filteredUpgrades.push(upgrades[i]);
            }
            return filteredUpgrades;
        }
    }
    Socket$1.protocol = protocol$1;

    /**
     * URL parser.
     *
     * @param uri - url
     * @param path - the request path of the connection
     * @param loc - An object meant to mimic window.location.
     *        Defaults to window.location.
     * @public
     */
    function url(uri, path = "", loc) {
        let obj = uri;
        // default to window.location
        loc = loc || (typeof location !== "undefined" && location);
        if (null == uri)
            uri = loc.protocol + "//" + loc.host;
        // relative path support
        if (typeof uri === "string") {
            if ("/" === uri.charAt(0)) {
                if ("/" === uri.charAt(1)) {
                    uri = loc.protocol + uri;
                }
                else {
                    uri = loc.host + uri;
                }
            }
            if (!/^(https?|wss?):\/\//.test(uri)) {
                if ("undefined" !== typeof loc) {
                    uri = loc.protocol + "//" + uri;
                }
                else {
                    uri = "https://" + uri;
                }
            }
            // parse
            obj = parse(uri);
        }
        // make sure we treat `localhost:80` and `localhost` equally
        if (!obj.port) {
            if (/^(http|ws)$/.test(obj.protocol)) {
                obj.port = "80";
            }
            else if (/^(http|ws)s$/.test(obj.protocol)) {
                obj.port = "443";
            }
        }
        obj.path = obj.path || "/";
        const ipv6 = obj.host.indexOf(":") !== -1;
        const host = ipv6 ? "[" + obj.host + "]" : obj.host;
        // define unique id
        obj.id = obj.protocol + "://" + host + ":" + obj.port + path;
        // define href
        obj.href =
            obj.protocol +
                "://" +
                host +
                (loc && loc.port === obj.port ? "" : ":" + obj.port);
        return obj;
    }

    const withNativeArrayBuffer = typeof ArrayBuffer === "function";
    const isView = (obj) => {
        return typeof ArrayBuffer.isView === "function"
            ? ArrayBuffer.isView(obj)
            : obj.buffer instanceof ArrayBuffer;
    };
    const toString = Object.prototype.toString;
    const withNativeBlob = typeof Blob === "function" ||
        (typeof Blob !== "undefined" &&
            toString.call(Blob) === "[object BlobConstructor]");
    const withNativeFile = typeof File === "function" ||
        (typeof File !== "undefined" &&
            toString.call(File) === "[object FileConstructor]");
    /**
     * Returns true if obj is a Buffer, an ArrayBuffer, a Blob or a File.
     *
     * @private
     */
    function isBinary(obj) {
        return ((withNativeArrayBuffer && (obj instanceof ArrayBuffer || isView(obj))) ||
            (withNativeBlob && obj instanceof Blob) ||
            (withNativeFile && obj instanceof File));
    }
    function hasBinary(obj, toJSON) {
        if (!obj || typeof obj !== "object") {
            return false;
        }
        if (Array.isArray(obj)) {
            for (let i = 0, l = obj.length; i < l; i++) {
                if (hasBinary(obj[i])) {
                    return true;
                }
            }
            return false;
        }
        if (isBinary(obj)) {
            return true;
        }
        if (obj.toJSON &&
            typeof obj.toJSON === "function" &&
            arguments.length === 1) {
            return hasBinary(obj.toJSON(), true);
        }
        for (const key in obj) {
            if (Object.prototype.hasOwnProperty.call(obj, key) && hasBinary(obj[key])) {
                return true;
            }
        }
        return false;
    }

    /**
     * Replaces every Buffer | ArrayBuffer | Blob | File in packet with a numbered placeholder.
     *
     * @param {Object} packet - socket.io event packet
     * @return {Object} with deconstructed packet and list of buffers
     * @public
     */
    function deconstructPacket(packet) {
        const buffers = [];
        const packetData = packet.data;
        const pack = packet;
        pack.data = _deconstructPacket(packetData, buffers);
        pack.attachments = buffers.length; // number of binary 'attachments'
        return { packet: pack, buffers: buffers };
    }
    function _deconstructPacket(data, buffers) {
        if (!data)
            return data;
        if (isBinary(data)) {
            const placeholder = { _placeholder: true, num: buffers.length };
            buffers.push(data);
            return placeholder;
        }
        else if (Array.isArray(data)) {
            const newData = new Array(data.length);
            for (let i = 0; i < data.length; i++) {
                newData[i] = _deconstructPacket(data[i], buffers);
            }
            return newData;
        }
        else if (typeof data === "object" && !(data instanceof Date)) {
            const newData = {};
            for (const key in data) {
                if (Object.prototype.hasOwnProperty.call(data, key)) {
                    newData[key] = _deconstructPacket(data[key], buffers);
                }
            }
            return newData;
        }
        return data;
    }
    /**
     * Reconstructs a binary packet from its placeholder packet and buffers
     *
     * @param {Object} packet - event packet with placeholders
     * @param {Array} buffers - binary buffers to put in placeholder positions
     * @return {Object} reconstructed packet
     * @public
     */
    function reconstructPacket(packet, buffers) {
        packet.data = _reconstructPacket(packet.data, buffers);
        packet.attachments = undefined; // no longer useful
        return packet;
    }
    function _reconstructPacket(data, buffers) {
        if (!data)
            return data;
        if (data && data._placeholder === true) {
            const isIndexValid = typeof data.num === "number" &&
                data.num >= 0 &&
                data.num < buffers.length;
            if (isIndexValid) {
                return buffers[data.num]; // appropriate buffer (should be natural order anyway)
            }
            else {
                throw new Error("illegal attachments");
            }
        }
        else if (Array.isArray(data)) {
            for (let i = 0; i < data.length; i++) {
                data[i] = _reconstructPacket(data[i], buffers);
            }
        }
        else if (typeof data === "object") {
            for (const key in data) {
                if (Object.prototype.hasOwnProperty.call(data, key)) {
                    data[key] = _reconstructPacket(data[key], buffers);
                }
            }
        }
        return data;
    }

    /**
     * Protocol version.
     *
     * @public
     */
    const protocol = 5;
    var PacketType;
    (function (PacketType) {
        PacketType[PacketType["CONNECT"] = 0] = "CONNECT";
        PacketType[PacketType["DISCONNECT"] = 1] = "DISCONNECT";
        PacketType[PacketType["EVENT"] = 2] = "EVENT";
        PacketType[PacketType["ACK"] = 3] = "ACK";
        PacketType[PacketType["CONNECT_ERROR"] = 4] = "CONNECT_ERROR";
        PacketType[PacketType["BINARY_EVENT"] = 5] = "BINARY_EVENT";
        PacketType[PacketType["BINARY_ACK"] = 6] = "BINARY_ACK";
    })(PacketType || (PacketType = {}));
    /**
     * A socket.io Encoder instance
     */
    class Encoder {
        /**
         * Encoder constructor
         *
         * @param {function} replacer - custom replacer to pass down to JSON.parse
         */
        constructor(replacer) {
            this.replacer = replacer;
        }
        /**
         * Encode a packet as a single string if non-binary, or as a
         * buffer sequence, depending on packet type.
         *
         * @param {Object} obj - packet object
         */
        encode(obj) {
            if (obj.type === PacketType.EVENT || obj.type === PacketType.ACK) {
                if (hasBinary(obj)) {
                    obj.type =
                        obj.type === PacketType.EVENT
                            ? PacketType.BINARY_EVENT
                            : PacketType.BINARY_ACK;
                    return this.encodeAsBinary(obj);
                }
            }
            return [this.encodeAsString(obj)];
        }
        /**
         * Encode packet as string.
         */
        encodeAsString(obj) {
            // first is type
            let str = "" + obj.type;
            // attachments if we have them
            if (obj.type === PacketType.BINARY_EVENT ||
                obj.type === PacketType.BINARY_ACK) {
                str += obj.attachments + "-";
            }
            // if we have a namespace other than `/`
            // we append it followed by a comma `,`
            if (obj.nsp && "/" !== obj.nsp) {
                str += obj.nsp + ",";
            }
            // immediately followed by the id
            if (null != obj.id) {
                str += obj.id;
            }
            // json data
            if (null != obj.data) {
                str += JSON.stringify(obj.data, this.replacer);
            }
            return str;
        }
        /**
         * Encode packet as 'buffer sequence' by removing blobs, and
         * deconstructing packet into object with placeholders and
         * a list of buffers.
         */
        encodeAsBinary(obj) {
            const deconstruction = deconstructPacket(obj);
            const pack = this.encodeAsString(deconstruction.packet);
            const buffers = deconstruction.buffers;
            buffers.unshift(pack); // add packet info to beginning of data list
            return buffers; // write all the buffers
        }
    }
    /**
     * A socket.io Decoder instance
     *
     * @return {Object} decoder
     */
    class Decoder extends Emitter {
        /**
         * Decoder constructor
         *
         * @param {function} reviver - custom reviver to pass down to JSON.stringify
         */
        constructor(reviver) {
            super();
            this.reviver = reviver;
        }
        /**
         * Decodes an encoded packet string into packet JSON.
         *
         * @param {String} obj - encoded packet
         */
        add(obj) {
            let packet;
            if (typeof obj === "string") {
                if (this.reconstructor) {
                    throw new Error("got plaintext data when reconstructing a packet");
                }
                packet = this.decodeString(obj);
                if (packet.type === PacketType.BINARY_EVENT ||
                    packet.type === PacketType.BINARY_ACK) {
                    // binary packet's json
                    this.reconstructor = new BinaryReconstructor(packet);
                    // no attachments, labeled binary but no binary data to follow
                    if (packet.attachments === 0) {
                        super.emitReserved("decoded", packet);
                    }
                }
                else {
                    // non-binary full packet
                    super.emitReserved("decoded", packet);
                }
            }
            else if (isBinary(obj) || obj.base64) {
                // raw binary data
                if (!this.reconstructor) {
                    throw new Error("got binary data when not reconstructing a packet");
                }
                else {
                    packet = this.reconstructor.takeBinaryData(obj);
                    if (packet) {
                        // received final buffer
                        this.reconstructor = null;
                        super.emitReserved("decoded", packet);
                    }
                }
            }
            else {
                throw new Error("Unknown type: " + obj);
            }
        }
        /**
         * Decode a packet String (JSON data)
         *
         * @param {String} str
         * @return {Object} packet
         */
        decodeString(str) {
            let i = 0;
            // look up type
            const p = {
                type: Number(str.charAt(0)),
            };
            if (PacketType[p.type] === undefined) {
                throw new Error("unknown packet type " + p.type);
            }
            // look up attachments if type binary
            if (p.type === PacketType.BINARY_EVENT ||
                p.type === PacketType.BINARY_ACK) {
                const start = i + 1;
                while (str.charAt(++i) !== "-" && i != str.length) { }
                const buf = str.substring(start, i);
                if (buf != Number(buf) || str.charAt(i) !== "-") {
                    throw new Error("Illegal attachments");
                }
                p.attachments = Number(buf);
            }
            // look up namespace (if any)
            if ("/" === str.charAt(i + 1)) {
                const start = i + 1;
                while (++i) {
                    const c = str.charAt(i);
                    if ("," === c)
                        break;
                    if (i === str.length)
                        break;
                }
                p.nsp = str.substring(start, i);
            }
            else {
                p.nsp = "/";
            }
            // look up id
            const next = str.charAt(i + 1);
            if ("" !== next && Number(next) == next) {
                const start = i + 1;
                while (++i) {
                    const c = str.charAt(i);
                    if (null == c || Number(c) != c) {
                        --i;
                        break;
                    }
                    if (i === str.length)
                        break;
                }
                p.id = Number(str.substring(start, i + 1));
            }
            // look up json data
            if (str.charAt(++i)) {
                const payload = this.tryParse(str.substr(i));
                if (Decoder.isPayloadValid(p.type, payload)) {
                    p.data = payload;
                }
                else {
                    throw new Error("invalid payload");
                }
            }
            return p;
        }
        tryParse(str) {
            try {
                return JSON.parse(str, this.reviver);
            }
            catch (e) {
                return false;
            }
        }
        static isPayloadValid(type, payload) {
            switch (type) {
                case PacketType.CONNECT:
                    return typeof payload === "object";
                case PacketType.DISCONNECT:
                    return payload === undefined;
                case PacketType.CONNECT_ERROR:
                    return typeof payload === "string" || typeof payload === "object";
                case PacketType.EVENT:
                case PacketType.BINARY_EVENT:
                    return Array.isArray(payload) && payload.length > 0;
                case PacketType.ACK:
                case PacketType.BINARY_ACK:
                    return Array.isArray(payload);
            }
        }
        /**
         * Deallocates a parser's resources
         */
        destroy() {
            if (this.reconstructor) {
                this.reconstructor.finishedReconstruction();
            }
        }
    }
    /**
     * A manager of a binary event's 'buffer sequence'. Should
     * be constructed whenever a packet of type BINARY_EVENT is
     * decoded.
     *
     * @param {Object} packet
     * @return {BinaryReconstructor} initialized reconstructor
     */
    class BinaryReconstructor {
        constructor(packet) {
            this.packet = packet;
            this.buffers = [];
            this.reconPack = packet;
        }
        /**
         * Method to be called when binary data received from connection
         * after a BINARY_EVENT packet.
         *
         * @param {Buffer | ArrayBuffer} binData - the raw binary data received
         * @return {null | Object} returns null if more binary data is expected or
         *   a reconstructed packet object if all buffers have been received.
         */
        takeBinaryData(binData) {
            this.buffers.push(binData);
            if (this.buffers.length === this.reconPack.attachments) {
                // done with buffer list
                const packet = reconstructPacket(this.reconPack, this.buffers);
                this.finishedReconstruction();
                return packet;
            }
            return null;
        }
        /**
         * Cleans up binary packet reconstruction variables.
         */
        finishedReconstruction() {
            this.reconPack = null;
            this.buffers = [];
        }
    }

    var parser = /*#__PURE__*/Object.freeze({
        __proto__: null,
        protocol: protocol,
        get PacketType () { return PacketType; },
        Encoder: Encoder,
        Decoder: Decoder
    });

    function on(obj, ev, fn) {
        obj.on(ev, fn);
        return function subDestroy() {
            obj.off(ev, fn);
        };
    }

    /**
     * Internal events.
     * These events can't be emitted by the user.
     */
    const RESERVED_EVENTS = Object.freeze({
        connect: 1,
        connect_error: 1,
        disconnect: 1,
        disconnecting: 1,
        // EventEmitter reserved events: https://nodejs.org/api/events.html#events_event_newlistener
        newListener: 1,
        removeListener: 1,
    });
    /**
     * A Socket is the fundamental class for interacting with the server.
     *
     * A Socket belongs to a certain Namespace (by default /) and uses an underlying {@link Manager} to communicate.
     *
     * @example
     * const socket = io();
     *
     * socket.on("connect", () => {
     *   console.log("connected");
     * });
     *
     * // send an event to the server
     * socket.emit("foo", "bar");
     *
     * socket.on("foobar", () => {
     *   // an event was received from the server
     * });
     *
     * // upon disconnection
     * socket.on("disconnect", (reason) => {
     *   console.log(`disconnected due to ${reason}`);
     * });
     */
    class Socket extends Emitter {
        /**
         * `Socket` constructor.
         */
        constructor(io, nsp, opts) {
            super();
            /**
             * Whether the socket is currently connected to the server.
             *
             * @example
             * const socket = io();
             *
             * socket.on("connect", () => {
             *   console.log(socket.connected); // true
             * });
             *
             * socket.on("disconnect", () => {
             *   console.log(socket.connected); // false
             * });
             */
            this.connected = false;
            /**
             * Buffer for packets received before the CONNECT packet
             */
            this.receiveBuffer = [];
            /**
             * Buffer for packets that will be sent once the socket is connected
             */
            this.sendBuffer = [];
            this.ids = 0;
            this.acks = {};
            this.flags = {};
            this.io = io;
            this.nsp = nsp;
            if (opts && opts.auth) {
                this.auth = opts.auth;
            }
            if (this.io._autoConnect)
                this.open();
        }
        /**
         * Whether the socket is currently disconnected
         *
         * @example
         * const socket = io();
         *
         * socket.on("connect", () => {
         *   console.log(socket.disconnected); // false
         * });
         *
         * socket.on("disconnect", () => {
         *   console.log(socket.disconnected); // true
         * });
         */
        get disconnected() {
            return !this.connected;
        }
        /**
         * Subscribe to open, close and packet events
         *
         * @private
         */
        subEvents() {
            if (this.subs)
                return;
            const io = this.io;
            this.subs = [
                on(io, "open", this.onopen.bind(this)),
                on(io, "packet", this.onpacket.bind(this)),
                on(io, "error", this.onerror.bind(this)),
                on(io, "close", this.onclose.bind(this)),
            ];
        }
        /**
         * Whether the Socket will try to reconnect when its Manager connects or reconnects.
         *
         * @example
         * const socket = io();
         *
         * console.log(socket.active); // true
         *
         * socket.on("disconnect", (reason) => {
         *   if (reason === "io server disconnect") {
         *     // the disconnection was initiated by the server, you need to manually reconnect
         *     console.log(socket.active); // false
         *   }
         *   // else the socket will automatically try to reconnect
         *   console.log(socket.active); // true
         * });
         */
        get active() {
            return !!this.subs;
        }
        /**
         * "Opens" the socket.
         *
         * @example
         * const socket = io({
         *   autoConnect: false
         * });
         *
         * socket.connect();
         */
        connect() {
            if (this.connected)
                return this;
            this.subEvents();
            if (!this.io["_reconnecting"])
                this.io.open(); // ensure open
            if ("open" === this.io._readyState)
                this.onopen();
            return this;
        }
        /**
         * Alias for {@link connect()}.
         */
        open() {
            return this.connect();
        }
        /**
         * Sends a `message` event.
         *
         * This method mimics the WebSocket.send() method.
         *
         * @see https://developer.mozilla.org/en-US/docs/Web/API/WebSocket/send
         *
         * @example
         * socket.send("hello");
         *
         * // this is equivalent to
         * socket.emit("message", "hello");
         *
         * @return self
         */
        send(...args) {
            args.unshift("message");
            this.emit.apply(this, args);
            return this;
        }
        /**
         * Override `emit`.
         * If the event is in `events`, it's emitted normally.
         *
         * @example
         * socket.emit("hello", "world");
         *
         * // all serializable datastructures are supported (no need to call JSON.stringify)
         * socket.emit("hello", 1, "2", { 3: ["4"], 5: Uint8Array.from([6]) });
         *
         * // with an acknowledgement from the server
         * socket.emit("hello", "world", (val) => {
         *   // ...
         * });
         *
         * @return self
         */
        emit(ev, ...args) {
            if (RESERVED_EVENTS.hasOwnProperty(ev)) {
                throw new Error('"' + ev.toString() + '" is a reserved event name');
            }
            args.unshift(ev);
            const packet = {
                type: PacketType.EVENT,
                data: args,
            };
            packet.options = {};
            packet.options.compress = this.flags.compress !== false;
            // event ack callback
            if ("function" === typeof args[args.length - 1]) {
                const id = this.ids++;
                const ack = args.pop();
                this._registerAckCallback(id, ack);
                packet.id = id;
            }
            const isTransportWritable = this.io.engine &&
                this.io.engine.transport &&
                this.io.engine.transport.writable;
            const discardPacket = this.flags.volatile && (!isTransportWritable || !this.connected);
            if (discardPacket) ;
            else if (this.connected) {
                this.notifyOutgoingListeners(packet);
                this.packet(packet);
            }
            else {
                this.sendBuffer.push(packet);
            }
            this.flags = {};
            return this;
        }
        /**
         * @private
         */
        _registerAckCallback(id, ack) {
            const timeout = this.flags.timeout;
            if (timeout === undefined) {
                this.acks[id] = ack;
                return;
            }
            // @ts-ignore
            const timer = this.io.setTimeoutFn(() => {
                delete this.acks[id];
                for (let i = 0; i < this.sendBuffer.length; i++) {
                    if (this.sendBuffer[i].id === id) {
                        this.sendBuffer.splice(i, 1);
                    }
                }
                ack.call(this, new Error("operation has timed out"));
            }, timeout);
            this.acks[id] = (...args) => {
                // @ts-ignore
                this.io.clearTimeoutFn(timer);
                ack.apply(this, [null, ...args]);
            };
        }
        /**
         * Sends a packet.
         *
         * @param packet
         * @private
         */
        packet(packet) {
            packet.nsp = this.nsp;
            this.io._packet(packet);
        }
        /**
         * Called upon engine `open`.
         *
         * @private
         */
        onopen() {
            if (typeof this.auth == "function") {
                this.auth((data) => {
                    this.packet({ type: PacketType.CONNECT, data });
                });
            }
            else {
                this.packet({ type: PacketType.CONNECT, data: this.auth });
            }
        }
        /**
         * Called upon engine or manager `error`.
         *
         * @param err
         * @private
         */
        onerror(err) {
            if (!this.connected) {
                this.emitReserved("connect_error", err);
            }
        }
        /**
         * Called upon engine `close`.
         *
         * @param reason
         * @param description
         * @private
         */
        onclose(reason, description) {
            this.connected = false;
            delete this.id;
            this.emitReserved("disconnect", reason, description);
        }
        /**
         * Called with socket packet.
         *
         * @param packet
         * @private
         */
        onpacket(packet) {
            const sameNamespace = packet.nsp === this.nsp;
            if (!sameNamespace)
                return;
            switch (packet.type) {
                case PacketType.CONNECT:
                    if (packet.data && packet.data.sid) {
                        const id = packet.data.sid;
                        this.onconnect(id);
                    }
                    else {
                        this.emitReserved("connect_error", new Error("It seems you are trying to reach a Socket.IO server in v2.x with a v3.x client, but they are not compatible (more information here: https://socket.io/docs/v3/migrating-from-2-x-to-3-0/)"));
                    }
                    break;
                case PacketType.EVENT:
                case PacketType.BINARY_EVENT:
                    this.onevent(packet);
                    break;
                case PacketType.ACK:
                case PacketType.BINARY_ACK:
                    this.onack(packet);
                    break;
                case PacketType.DISCONNECT:
                    this.ondisconnect();
                    break;
                case PacketType.CONNECT_ERROR:
                    this.destroy();
                    const err = new Error(packet.data.message);
                    // @ts-ignore
                    err.data = packet.data.data;
                    this.emitReserved("connect_error", err);
                    break;
            }
        }
        /**
         * Called upon a server event.
         *
         * @param packet
         * @private
         */
        onevent(packet) {
            const args = packet.data || [];
            if (null != packet.id) {
                args.push(this.ack(packet.id));
            }
            if (this.connected) {
                this.emitEvent(args);
            }
            else {
                this.receiveBuffer.push(Object.freeze(args));
            }
        }
        emitEvent(args) {
            if (this._anyListeners && this._anyListeners.length) {
                const listeners = this._anyListeners.slice();
                for (const listener of listeners) {
                    listener.apply(this, args);
                }
            }
            super.emit.apply(this, args);
        }
        /**
         * Produces an ack callback to emit with an event.
         *
         * @private
         */
        ack(id) {
            const self = this;
            let sent = false;
            return function (...args) {
                // prevent double callbacks
                if (sent)
                    return;
                sent = true;
                self.packet({
                    type: PacketType.ACK,
                    id: id,
                    data: args,
                });
            };
        }
        /**
         * Called upon a server acknowlegement.
         *
         * @param packet
         * @private
         */
        onack(packet) {
            const ack = this.acks[packet.id];
            if ("function" === typeof ack) {
                ack.apply(this, packet.data);
                delete this.acks[packet.id];
            }
        }
        /**
         * Called upon server connect.
         *
         * @private
         */
        onconnect(id) {
            this.id = id;
            this.connected = true;
            this.emitBuffered();
            this.emitReserved("connect");
        }
        /**
         * Emit buffered events (received and emitted).
         *
         * @private
         */
        emitBuffered() {
            this.receiveBuffer.forEach((args) => this.emitEvent(args));
            this.receiveBuffer = [];
            this.sendBuffer.forEach((packet) => {
                this.notifyOutgoingListeners(packet);
                this.packet(packet);
            });
            this.sendBuffer = [];
        }
        /**
         * Called upon server disconnect.
         *
         * @private
         */
        ondisconnect() {
            this.destroy();
            this.onclose("io server disconnect");
        }
        /**
         * Called upon forced client/server side disconnections,
         * this method ensures the manager stops tracking us and
         * that reconnections don't get triggered for this.
         *
         * @private
         */
        destroy() {
            if (this.subs) {
                // clean subscriptions to avoid reconnections
                this.subs.forEach((subDestroy) => subDestroy());
                this.subs = undefined;
            }
            this.io["_destroy"](this);
        }
        /**
         * Disconnects the socket manually. In that case, the socket will not try to reconnect.
         *
         * If this is the last active Socket instance of the {@link Manager}, the low-level connection will be closed.
         *
         * @example
         * const socket = io();
         *
         * socket.on("disconnect", (reason) => {
         *   // console.log(reason); prints "io client disconnect"
         * });
         *
         * socket.disconnect();
         *
         * @return self
         */
        disconnect() {
            if (this.connected) {
                this.packet({ type: PacketType.DISCONNECT });
            }
            // remove socket from pool
            this.destroy();
            if (this.connected) {
                // fire events
                this.onclose("io client disconnect");
            }
            return this;
        }
        /**
         * Alias for {@link disconnect()}.
         *
         * @return self
         */
        close() {
            return this.disconnect();
        }
        /**
         * Sets the compress flag.
         *
         * @example
         * socket.compress(false).emit("hello");
         *
         * @param compress - if `true`, compresses the sending data
         * @return self
         */
        compress(compress) {
            this.flags.compress = compress;
            return this;
        }
        /**
         * Sets a modifier for a subsequent event emission that the event message will be dropped when this socket is not
         * ready to send messages.
         *
         * @example
         * socket.volatile.emit("hello"); // the server may or may not receive it
         *
         * @returns self
         */
        get volatile() {
            this.flags.volatile = true;
            return this;
        }
        /**
         * Sets a modifier for a subsequent event emission that the callback will be called with an error when the
         * given number of milliseconds have elapsed without an acknowledgement from the server:
         *
         * @example
         * socket.timeout(5000).emit("my-event", (err) => {
         *   if (err) {
         *     // the server did not acknowledge the event in the given delay
         *   }
         * });
         *
         * @returns self
         */
        timeout(timeout) {
            this.flags.timeout = timeout;
            return this;
        }
        /**
         * Adds a listener that will be fired when any event is emitted. The event name is passed as the first argument to the
         * callback.
         *
         * @example
         * socket.onAny((event, ...args) => {
         *   console.log(`got ${event}`);
         * });
         *
         * @param listener
         */
        onAny(listener) {
            this._anyListeners = this._anyListeners || [];
            this._anyListeners.push(listener);
            return this;
        }
        /**
         * Adds a listener that will be fired when any event is emitted. The event name is passed as the first argument to the
         * callback. The listener is added to the beginning of the listeners array.
         *
         * @example
         * socket.prependAny((event, ...args) => {
         *   console.log(`got event ${event}`);
         * });
         *
         * @param listener
         */
        prependAny(listener) {
            this._anyListeners = this._anyListeners || [];
            this._anyListeners.unshift(listener);
            return this;
        }
        /**
         * Removes the listener that will be fired when any event is emitted.
         *
         * @example
         * const catchAllListener = (event, ...args) => {
         *   console.log(`got event ${event}`);
         * }
         *
         * socket.onAny(catchAllListener);
         *
         * // remove a specific listener
         * socket.offAny(catchAllListener);
         *
         * // or remove all listeners
         * socket.offAny();
         *
         * @param listener
         */
        offAny(listener) {
            if (!this._anyListeners) {
                return this;
            }
            if (listener) {
                const listeners = this._anyListeners;
                for (let i = 0; i < listeners.length; i++) {
                    if (listener === listeners[i]) {
                        listeners.splice(i, 1);
                        return this;
                    }
                }
            }
            else {
                this._anyListeners = [];
            }
            return this;
        }
        /**
         * Returns an array of listeners that are listening for any event that is specified. This array can be manipulated,
         * e.g. to remove listeners.
         */
        listenersAny() {
            return this._anyListeners || [];
        }
        /**
         * Adds a listener that will be fired when any event is emitted. The event name is passed as the first argument to the
         * callback.
         *
         * Note: acknowledgements sent to the server are not included.
         *
         * @example
         * socket.onAnyOutgoing((event, ...args) => {
         *   console.log(`sent event ${event}`);
         * });
         *
         * @param listener
         */
        onAnyOutgoing(listener) {
            this._anyOutgoingListeners = this._anyOutgoingListeners || [];
            this._anyOutgoingListeners.push(listener);
            return this;
        }
        /**
         * Adds a listener that will be fired when any event is emitted. The event name is passed as the first argument to the
         * callback. The listener is added to the beginning of the listeners array.
         *
         * Note: acknowledgements sent to the server are not included.
         *
         * @example
         * socket.prependAnyOutgoing((event, ...args) => {
         *   console.log(`sent event ${event}`);
         * });
         *
         * @param listener
         */
        prependAnyOutgoing(listener) {
            this._anyOutgoingListeners = this._anyOutgoingListeners || [];
            this._anyOutgoingListeners.unshift(listener);
            return this;
        }
        /**
         * Removes the listener that will be fired when any event is emitted.
         *
         * @example
         * const catchAllListener = (event, ...args) => {
         *   console.log(`sent event ${event}`);
         * }
         *
         * socket.onAnyOutgoing(catchAllListener);
         *
         * // remove a specific listener
         * socket.offAnyOutgoing(catchAllListener);
         *
         * // or remove all listeners
         * socket.offAnyOutgoing();
         *
         * @param [listener] - the catch-all listener (optional)
         */
        offAnyOutgoing(listener) {
            if (!this._anyOutgoingListeners) {
                return this;
            }
            if (listener) {
                const listeners = this._anyOutgoingListeners;
                for (let i = 0; i < listeners.length; i++) {
                    if (listener === listeners[i]) {
                        listeners.splice(i, 1);
                        return this;
                    }
                }
            }
            else {
                this._anyOutgoingListeners = [];
            }
            return this;
        }
        /**
         * Returns an array of listeners that are listening for any event that is specified. This array can be manipulated,
         * e.g. to remove listeners.
         */
        listenersAnyOutgoing() {
            return this._anyOutgoingListeners || [];
        }
        /**
         * Notify the listeners for each packet sent
         *
         * @param packet
         *
         * @private
         */
        notifyOutgoingListeners(packet) {
            if (this._anyOutgoingListeners && this._anyOutgoingListeners.length) {
                const listeners = this._anyOutgoingListeners.slice();
                for (const listener of listeners) {
                    listener.apply(this, packet.data);
                }
            }
        }
    }

    /**
     * Initialize backoff timer with `opts`.
     *
     * - `min` initial timeout in milliseconds [100]
     * - `max` max timeout [10000]
     * - `jitter` [0]
     * - `factor` [2]
     *
     * @param {Object} opts
     * @api public
     */
    function Backoff(opts) {
        opts = opts || {};
        this.ms = opts.min || 100;
        this.max = opts.max || 10000;
        this.factor = opts.factor || 2;
        this.jitter = opts.jitter > 0 && opts.jitter <= 1 ? opts.jitter : 0;
        this.attempts = 0;
    }
    /**
     * Return the backoff duration.
     *
     * @return {Number}
     * @api public
     */
    Backoff.prototype.duration = function () {
        var ms = this.ms * Math.pow(this.factor, this.attempts++);
        if (this.jitter) {
            var rand = Math.random();
            var deviation = Math.floor(rand * this.jitter * ms);
            ms = (Math.floor(rand * 10) & 1) == 0 ? ms - deviation : ms + deviation;
        }
        return Math.min(ms, this.max) | 0;
    };
    /**
     * Reset the number of attempts.
     *
     * @api public
     */
    Backoff.prototype.reset = function () {
        this.attempts = 0;
    };
    /**
     * Set the minimum duration
     *
     * @api public
     */
    Backoff.prototype.setMin = function (min) {
        this.ms = min;
    };
    /**
     * Set the maximum duration
     *
     * @api public
     */
    Backoff.prototype.setMax = function (max) {
        this.max = max;
    };
    /**
     * Set the jitter
     *
     * @api public
     */
    Backoff.prototype.setJitter = function (jitter) {
        this.jitter = jitter;
    };

    class Manager extends Emitter {
        constructor(uri, opts) {
            var _a;
            super();
            this.nsps = {};
            this.subs = [];
            if (uri && "object" === typeof uri) {
                opts = uri;
                uri = undefined;
            }
            opts = opts || {};
            opts.path = opts.path || "/socket.io";
            this.opts = opts;
            installTimerFunctions(this, opts);
            this.reconnection(opts.reconnection !== false);
            this.reconnectionAttempts(opts.reconnectionAttempts || Infinity);
            this.reconnectionDelay(opts.reconnectionDelay || 1000);
            this.reconnectionDelayMax(opts.reconnectionDelayMax || 5000);
            this.randomizationFactor((_a = opts.randomizationFactor) !== null && _a !== void 0 ? _a : 0.5);
            this.backoff = new Backoff({
                min: this.reconnectionDelay(),
                max: this.reconnectionDelayMax(),
                jitter: this.randomizationFactor(),
            });
            this.timeout(null == opts.timeout ? 20000 : opts.timeout);
            this._readyState = "closed";
            this.uri = uri;
            const _parser = opts.parser || parser;
            this.encoder = new _parser.Encoder();
            this.decoder = new _parser.Decoder();
            this._autoConnect = opts.autoConnect !== false;
            if (this._autoConnect)
                this.open();
        }
        reconnection(v) {
            if (!arguments.length)
                return this._reconnection;
            this._reconnection = !!v;
            return this;
        }
        reconnectionAttempts(v) {
            if (v === undefined)
                return this._reconnectionAttempts;
            this._reconnectionAttempts = v;
            return this;
        }
        reconnectionDelay(v) {
            var _a;
            if (v === undefined)
                return this._reconnectionDelay;
            this._reconnectionDelay = v;
            (_a = this.backoff) === null || _a === void 0 ? void 0 : _a.setMin(v);
            return this;
        }
        randomizationFactor(v) {
            var _a;
            if (v === undefined)
                return this._randomizationFactor;
            this._randomizationFactor = v;
            (_a = this.backoff) === null || _a === void 0 ? void 0 : _a.setJitter(v);
            return this;
        }
        reconnectionDelayMax(v) {
            var _a;
            if (v === undefined)
                return this._reconnectionDelayMax;
            this._reconnectionDelayMax = v;
            (_a = this.backoff) === null || _a === void 0 ? void 0 : _a.setMax(v);
            return this;
        }
        timeout(v) {
            if (!arguments.length)
                return this._timeout;
            this._timeout = v;
            return this;
        }
        /**
         * Starts trying to reconnect if reconnection is enabled and we have not
         * started reconnecting yet
         *
         * @private
         */
        maybeReconnectOnOpen() {
            // Only try to reconnect if it's the first time we're connecting
            if (!this._reconnecting &&
                this._reconnection &&
                this.backoff.attempts === 0) {
                // keeps reconnection from firing twice for the same reconnection loop
                this.reconnect();
            }
        }
        /**
         * Sets the current transport `socket`.
         *
         * @param {Function} fn - optional, callback
         * @return self
         * @public
         */
        open(fn) {
            if (~this._readyState.indexOf("open"))
                return this;
            this.engine = new Socket$1(this.uri, this.opts);
            const socket = this.engine;
            const self = this;
            this._readyState = "opening";
            this.skipReconnect = false;
            // emit `open`
            const openSubDestroy = on(socket, "open", function () {
                self.onopen();
                fn && fn();
            });
            // emit `error`
            const errorSub = on(socket, "error", (err) => {
                self.cleanup();
                self._readyState = "closed";
                this.emitReserved("error", err);
                if (fn) {
                    fn(err);
                }
                else {
                    // Only do this if there is no fn to handle the error
                    self.maybeReconnectOnOpen();
                }
            });
            if (false !== this._timeout) {
                const timeout = this._timeout;
                if (timeout === 0) {
                    openSubDestroy(); // prevents a race condition with the 'open' event
                }
                // set timer
                const timer = this.setTimeoutFn(() => {
                    openSubDestroy();
                    socket.close();
                    // @ts-ignore
                    socket.emit("error", new Error("timeout"));
                }, timeout);
                if (this.opts.autoUnref) {
                    timer.unref();
                }
                this.subs.push(function subDestroy() {
                    clearTimeout(timer);
                });
            }
            this.subs.push(openSubDestroy);
            this.subs.push(errorSub);
            return this;
        }
        /**
         * Alias for open()
         *
         * @return self
         * @public
         */
        connect(fn) {
            return this.open(fn);
        }
        /**
         * Called upon transport open.
         *
         * @private
         */
        onopen() {
            // clear old subs
            this.cleanup();
            // mark as open
            this._readyState = "open";
            this.emitReserved("open");
            // add new subs
            const socket = this.engine;
            this.subs.push(on(socket, "ping", this.onping.bind(this)), on(socket, "data", this.ondata.bind(this)), on(socket, "error", this.onerror.bind(this)), on(socket, "close", this.onclose.bind(this)), on(this.decoder, "decoded", this.ondecoded.bind(this)));
        }
        /**
         * Called upon a ping.
         *
         * @private
         */
        onping() {
            this.emitReserved("ping");
        }
        /**
         * Called with data.
         *
         * @private
         */
        ondata(data) {
            try {
                this.decoder.add(data);
            }
            catch (e) {
                this.onclose("parse error", e);
            }
        }
        /**
         * Called when parser fully decodes a packet.
         *
         * @private
         */
        ondecoded(packet) {
            // the nextTick call prevents an exception in a user-provided event listener from triggering a disconnection due to a "parse error"
            nextTick(() => {
                this.emitReserved("packet", packet);
            }, this.setTimeoutFn);
        }
        /**
         * Called upon socket error.
         *
         * @private
         */
        onerror(err) {
            this.emitReserved("error", err);
        }
        /**
         * Creates a new socket for the given `nsp`.
         *
         * @return {Socket}
         * @public
         */
        socket(nsp, opts) {
            let socket = this.nsps[nsp];
            if (!socket) {
                socket = new Socket(this, nsp, opts);
                this.nsps[nsp] = socket;
            }
            return socket;
        }
        /**
         * Called upon a socket close.
         *
         * @param socket
         * @private
         */
        _destroy(socket) {
            const nsps = Object.keys(this.nsps);
            for (const nsp of nsps) {
                const socket = this.nsps[nsp];
                if (socket.active) {
                    return;
                }
            }
            this._close();
        }
        /**
         * Writes a packet.
         *
         * @param packet
         * @private
         */
        _packet(packet) {
            const encodedPackets = this.encoder.encode(packet);
            for (let i = 0; i < encodedPackets.length; i++) {
                this.engine.write(encodedPackets[i], packet.options);
            }
        }
        /**
         * Clean up transport subscriptions and packet buffer.
         *
         * @private
         */
        cleanup() {
            this.subs.forEach((subDestroy) => subDestroy());
            this.subs.length = 0;
            this.decoder.destroy();
        }
        /**
         * Close the current socket.
         *
         * @private
         */
        _close() {
            this.skipReconnect = true;
            this._reconnecting = false;
            this.onclose("forced close");
            if (this.engine)
                this.engine.close();
        }
        /**
         * Alias for close()
         *
         * @private
         */
        disconnect() {
            return this._close();
        }
        /**
         * Called upon engine close.
         *
         * @private
         */
        onclose(reason, description) {
            this.cleanup();
            this.backoff.reset();
            this._readyState = "closed";
            this.emitReserved("close", reason, description);
            if (this._reconnection && !this.skipReconnect) {
                this.reconnect();
            }
        }
        /**
         * Attempt a reconnection.
         *
         * @private
         */
        reconnect() {
            if (this._reconnecting || this.skipReconnect)
                return this;
            const self = this;
            if (this.backoff.attempts >= this._reconnectionAttempts) {
                this.backoff.reset();
                this.emitReserved("reconnect_failed");
                this._reconnecting = false;
            }
            else {
                const delay = this.backoff.duration();
                this._reconnecting = true;
                const timer = this.setTimeoutFn(() => {
                    if (self.skipReconnect)
                        return;
                    this.emitReserved("reconnect_attempt", self.backoff.attempts);
                    // check again for the case socket closed in above events
                    if (self.skipReconnect)
                        return;
                    self.open((err) => {
                        if (err) {
                            self._reconnecting = false;
                            self.reconnect();
                            this.emitReserved("reconnect_error", err);
                        }
                        else {
                            self.onreconnect();
                        }
                    });
                }, delay);
                if (this.opts.autoUnref) {
                    timer.unref();
                }
                this.subs.push(function subDestroy() {
                    clearTimeout(timer);
                });
            }
        }
        /**
         * Called upon successful reconnect.
         *
         * @private
         */
        onreconnect() {
            const attempt = this.backoff.attempts;
            this._reconnecting = false;
            this.backoff.reset();
            this.emitReserved("reconnect", attempt);
        }
    }

    /**
     * Managers cache.
     */
    const cache = {};
    function lookup(uri, opts) {
        if (typeof uri === "object") {
            opts = uri;
            uri = undefined;
        }
        opts = opts || {};
        const parsed = url(uri, opts.path || "/socket.io");
        const source = parsed.source;
        const id = parsed.id;
        const path = parsed.path;
        const sameNamespace = cache[id] && path in cache[id]["nsps"];
        const newConnection = opts.forceNew ||
            opts["force new connection"] ||
            false === opts.multiplex ||
            sameNamespace;
        let io;
        if (newConnection) {
            io = new Manager(source, opts);
        }
        else {
            if (!cache[id]) {
                cache[id] = new Manager(source, opts);
            }
            io = cache[id];
        }
        if (parsed.query && !opts.query) {
            opts.query = parsed.queryKey;
        }
        return io.socket(parsed.path, opts);
    }
    // so that "lookup" can be used both as a function (e.g. `io(...)`) and as a
    // namespace (e.g. `io.connect(...)`), for backward compatibility
    Object.assign(lookup, {
        Manager,
        Socket,
        io: lookup,
        connect: lookup,
    });

    function socket_events(socket) {
        socket.on('message', function (from, message) {
            console.log("received msg:", message, from);
            if (from === user.username)
                from = "me";
            msgs.update(msgs => [...msgs, { name: from, message: message }]);
        });
    }

    const address = `http://${'transcendance'}:${'8080'}`;
    async function init_socket() {
        const response = await fetch(`${address}/api/v2/user`);
        const response_data = await response.json();
        set_user(response_data);
        let socket = await lookup(address, {
            path: '/chat',
            query: {
                username: response_data.username,
            },
        });
        set_socket(socket);
        socket.on('connect', function () { console.log("socket.io connected"); });
        socket.on('disconnect', function () { console.log("socket.io disconnected"); });
        socket.on('connect_error', function () { console.log("socket.io connect_error"); });
        socket.on('connect_timeout', function () { console.log("socket.io connect_timeout"); });
        socket.on('error', function () { console.log("socket.io error"); });
        socket.on('reconnect', function () { console.log("socket.io reconnect"); });
        socket.on('reconnect_attempt', function () { console.log("socket.io reconnect_attempt"); });
        socket.on('reconnecting', function () { console.log("socket.io reconnecting"); });
        socket.on('reconnect_error', function () { console.log("socket.io reconnect_error"); });
        socket.on('reconnect_failed', function () { console.log("socket.io reconnect_failed"); });
        socket.on('ping', function () { console.log("socket.io ping"); });
        socket.on('pong', function () { console.log("socket.io pong"); });
        socket_events(socket);
    }

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

    function create_fragment$h(ctx) {
    	let layouts;
    	let current;

    	layouts = new Chat_layouts({
    			props: { color: /*color*/ ctx[0] },
    			$$inline: true
    		});

    	const block = {
    		c: function create() {
    			create_component(layouts.$$.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(layouts, target, anchor);
    			current = true;
    		},
    		p: function update(ctx, [dirty]) {
    			const layouts_changes = {};
    			if (dirty & /*color*/ 1) layouts_changes.color = /*color*/ ctx[0];
    			layouts.$set(layouts_changes);
    		},
    		i: function intro(local) {
    			if (current) return;
    			transition_in(layouts.$$.fragment, local);
    			current = true;
    		},
    		o: function outro(local) {
    			transition_out(layouts.$$.fragment, local);
    			current = false;
    		},
    		d: function destroy(detaching) {
    			destroy_component(layouts, detaching);
    		}
    	};

    	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('Chat', slots, []);
    	let { color = "transparent" } = $$props;
    	init_socket();
    	const writable_props = ['color'];

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

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

    	$$self.$capture_state = () => ({ Layouts: Chat_layouts, init_socket, color });

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

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

    	return [color];
    }

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

    		dispatch_dev("SvelteRegisterComponent", {
    			component: this,
    			tagName: "Chat",
    			options,
    			id: create_fragment$h.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$f = "src/pages/profile/ProfileDisplay.svelte";

    // (19:2) {:else}
    function create_else_block$6(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$f, 20, 4, 747);
    			add_location(div, file$f, 21, 4, 766);
    		},
    		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$6.name,
    		type: "else",
    		source: "(19:2) {:else}",
    		ctx
    	});

    	return block;
    }

    // (17:2) {#if user !== undefined}
    function create_if_block$8(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$8.name,
    		type: "if",
    		source: "(17:2) {#if user !== undefined}",
    		ctx
    	});

    	return block;
    }

    function create_fragment$g(ctx) {
    	let chat;
    	let t;
    	let div;
    	let current_block_type_index;
    	let if_block;
    	let current;

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

    	const if_block_creators = [create_if_block$8, create_else_block$6];
    	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);
    			t = space();
    			div = element("div");
    			if_block.c();
    			attr_dev(div, "class", "outer svelte-1tyjf3q");
    			add_location(div, file$f, 14, 0, 459);
    		},
    		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, t, 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);
    			}
    		},
    		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(t);
    			if (detaching) detach_dev(div);
    			if_blocks[current_block_type_index].d();
    		}
    	};

    	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('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$2(this, options, instance$g, create_fragment$g, safe_not_equal, {});

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

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

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

    function create_fragment$f(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$e, 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$f.name,
    		type: "component",
    		source: "",
    		ctx
    	});

    	return block;
    }

    function instance$f($$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$2(this, options, instance$f, create_fragment$f, safe_not_equal, {});

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

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

    const file$d = "src/pieces/Button.svelte";

    function create_fragment$e(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$d, 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$e.name,
    		type: "component",
    		source: "",
    		ctx
    	});

    	return block;
    }

    function instance$e($$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$2(this, options, instance$e, create_fragment$e, safe_not_equal, { type: 0, flat: 1, inverse: 2 });

    		dispatch_dev("SvelteRegisterComponent", {
    			component: this,
    			tagName: "Button",
    			options,
    			id: create_fragment$e.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$7 } = globals;
    const file$c = "src/pages/profile/ProfileSettings.svelte";

    // (129:8) <Button type="secondary">
    function create_default_slot_3$1(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$1.name,
    		type: "slot",
    		source: "(129:8) <Button type=\\\"secondary\\\">",
    		ctx
    	});

    	return block;
    }

    // (114:4) <Card>
    function create_default_slot_2$1(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$1] },
    				$$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$c, 116, 10, 4309);
    			attr_dev(input0, "type", "text");
    			attr_dev(input0, "placeholder", input0_placeholder_value = "current username: " + /*nameTmp*/ ctx[3]);
    			add_location(input0, file$c, 119, 10, 4543);
    			attr_dev(div1, "class", "success svelte-qtbld7");
    			add_location(div1, file$c, 120, 8, 4639);
    			attr_dev(div2, "class", "error svelte-qtbld7");
    			add_location(div2, file$c, 121, 10, 4695);
    			attr_dev(div3, "class", "form-field svelte-qtbld7");
    			add_location(div3, file$c, 115, 8, 4274);
    			attr_dev(div4, "class", "label inline-check svelte-qtbld7");
    			add_location(div4, file$c, 124, 10, 4796);
    			attr_dev(input1, "class", "inline-check svelte-qtbld7");
    			attr_dev(input1, "type", "checkbox");
    			add_location(input1, file$c, 125, 10, 4874);
    			attr_dev(div5, "class", "error svelte-qtbld7");
    			add_location(div5, file$c, 126, 10, 4952);
    			attr_dev(div6, "class", "form-field svelte-qtbld7");
    			add_location(div6, file$c, 123, 8, 4761);
    			attr_dev(form, "class", "svelte-qtbld7");
    			add_location(form, file$c, 114, 6, 4216);
    		},
    		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$1.name,
    		type: "slot",
    		source: "(114:4) <Card>",
    		ctx
    	});

    	return block;
    }

    // (135:6) {#if avatar !== undefined}
    function create_if_block$7(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$c, 135, 8, 5240);
    		},
    		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$7.name,
    		type: "if",
    		source: "(135:6) {#if avatar !== undefined}",
    		ctx
    	});

    	return block;
    }

    // (146:8) <Button type={newAvatar === undefined ? "primary" : "secondary"}>
    function create_default_slot_1$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$1.name,
    		type: "slot",
    		source: "(146:8) <Button type={newAvatar === undefined ? \\\"primary\\\" : \\\"secondary\\\"}>",
    		ctx
    	});

    	return block;
    }

    // (133: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$7(ctx);

    	button = new Button({
    			props: {
    				type: /*newAvatar*/ ctx[1] === undefined
    				? "primary"
    				: "secondary",
    				$$slots: { default: [create_default_slot_1$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$c, 141, 10, 5546);
    			attr_dev(input, "type", "file");
    			add_location(input, file$c, 142, 10, 5599);
    			attr_dev(div1, "class", "error svelte-qtbld7");
    			add_location(div1, file$c, 143, 10, 5653);
    			attr_dev(div2, "class", "form-field svelte-qtbld7");
    			add_location(div2, file$c, 140, 8, 5511);
    			attr_dev(form, "class", "svelte-qtbld7");
    			add_location(form, file$c, 137, 6, 5311);
    		},
    		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$7(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: "(133:4) <Card>",
    		ctx
    	});

    	return block;
    }

    function create_fragment$d(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$1] },
    				$$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$c, 111, 2, 4141);
    			attr_dev(div, "class", "cards svelte-qtbld7");
    			add_location(div, file$c, 112, 2, 4179);
    			attr_dev(main, "class", "svelte-qtbld7");
    			add_location(main, file$c, 110, 0, 4132);
    		},
    		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$d.name,
    		type: "component",
    		source: "",
    		ctx
    	});

    	return block;
    }

    function instance$d($$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 if (response.status === 409) $$invalidate(4, errors.username = `${set.username} is already in use, pick a different one.`, errors); 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);

    		const responseWhenChangeAvatar = fetch(`http://${'transcendance'}:${'8080'}/api/v2/user/avatar`, { method: 'POST', body: data });
    		const responseFromServer = await responseWhenChangeAvatar;

    		if (responseFromServer.ok === true) {
    			uploadAvatarSuccess = true;
    			$$invalidate(5, success.avatar = 'Your avatar has been updated', success);
    		} else {
    			$$invalidate(4, errors.avatar = responseFromServer.statusText, errors);
    		}

    		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$7.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$2(this, options, instance$d, create_fragment$d, safe_not_equal, {});

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

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

    const { console: console_1$6 } = globals;
    const file$b = "src/pieces/DisplayAUser.svelte";

    // (34:0) {:else}
    function create_else_block$5(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$b, 34, 2, 1489);
    			add_location(div, file$b, 35, 2, 1506);
    		},
    		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$5.name,
    		type: "else",
    		source: "(34:0) {:else}",
    		ctx
    	});

    	return block;
    }

    // (31:0) {#if user !== undefined}
    function create_if_block$6(ctx) {
    	let generateuserdisplay;
    	let current;

    	generateuserdisplay = new GenerateUserDisplay({
    			props: { user: /*user*/ ctx[1], primary: false },
    			$$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*/ 2) generateuserdisplay_changes.user = /*user*/ ctx[1];
    			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$6.name,
    		type: "if",
    		source: "(31:0) {#if user !== undefined}",
    		ctx
    	});

    	return block;
    }

    function create_fragment$c(ctx) {
    	let current_block_type_index;
    	let if_block;
    	let if_block_anchor;
    	let current;
    	const if_block_creators = [create_if_block$6, create_else_block$5];
    	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$1();
    		},
    		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$c.name,
    		type: "component",
    		source: "",
    		ctx
    	});

    	return block;
    }

    function instance$c($$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=NomDuUserATrouve`
    		$$invalidate(1, user = await fetch(`http://${'transcendance'}:${'8080'}/api/v2/user?username=${aUsername}`).then(x => x.json()));
    	});

    	const updateUser = async () => {
    		// console.log('Display Update aUser username: '+ aUsername)
    		// http://transcendance:8080/api/v2/user?username=NomDuUserATrouver
    		// user = await fetch(`http://transcendance:8080/api/v2/user?username=${aUsername}`)
    		$$invalidate(1, user = await fetch(`http://${'transcendance'}:${'8080'}/api/v2/user?username=${aUsername}`).then(x => x.json()));
    	};

    	$$self.$$.on_mount.push(function () {
    		if (aUsername === undefined && !('aUsername' in $$props || $$self.$$.bound[$$self.$$.props['aUsername']])) {
    			console_1$6.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$6.warn(`<DisplayAUser> was created with unknown prop '${key}'`);
    	});

    	$$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);
    	}

    	$$self.$$.update = () => {
    		if ($$self.$$.dirty & /*aUsername*/ 1) {
    			// $: aUsername, updateUser();
    			(updateUser());
    		}
    	};

    	return [aUsername, user, updateUser];
    }

    class DisplayAUser extends SvelteComponentDev {
    	constructor(options) {
    		super(options);
    		init$2(this, options, instance$c, create_fragment$c, safe_not_equal, { aUsername: 0, updateUser: 2 });

    		dispatch_dev("SvelteRegisterComponent", {
    			component: this,
    			tagName: "DisplayAUser",
    			options,
    			id: create_fragment$c.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/>'");
    	}

    	get updateUser() {
    		return this.$$.ctx[2];
    	}

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

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

    function get_each_context$4(ctx, list, i) {
    	const child_ctx = ctx.slice();
    	child_ctx[5] = list[i];
    	return child_ctx;
    }

    // (13:4) {#each items as item}
    function create_each_block$4(ctx) {
    	let li;
    	let div;
    	let t0_value = /*item*/ ctx[5] + "";
    	let t0;
    	let t1;
    	let li_class_value;
    	let mounted;
    	let dispose;

    	function click_handler() {
    		return /*click_handler*/ ctx[4](/*item*/ ctx[5]);
    	}

    	const block = {
    		c: function create() {
    			li = element("li");
    			div = element("div");
    			t0 = text(t0_value);
    			t1 = space();
    			attr_dev(div, "class", "svelte-1av1d6a");
    			toggle_class(div, "active", /*activeItem*/ ctx[1] === /*item*/ ctx[5]);
    			add_location(div, file$a, 15, 8, 536);
    			attr_dev(li, "class", li_class_value = "" + (null_to_empty(/*size*/ ctx[2]) + " svelte-1av1d6a"));
    			add_location(li, file$a, 13, 6, 393);
    		},
    		m: function mount(target, anchor) {
    			insert_dev(target, li, anchor);
    			append_dev(li, div);
    			append_dev(div, t0);
    			append_dev(li, t1);

    			if (!mounted) {
    				dispose = listen_dev(li, "click", click_handler, false, false, false);
    				mounted = true;
    			}
    		},
    		p: function update(new_ctx, dirty) {
    			ctx = new_ctx;
    			if (dirty & /*items*/ 1 && t0_value !== (t0_value = /*item*/ ctx[5] + "")) set_data_dev(t0, t0_value);

    			if (dirty & /*activeItem, items*/ 3) {
    				toggle_class(div, "active", /*activeItem*/ ctx[1] === /*item*/ ctx[5]);
    			}

    			if (dirty & /*size*/ 4 && li_class_value !== (li_class_value = "" + (null_to_empty(/*size*/ ctx[2]) + " svelte-1av1d6a"))) {
    				attr_dev(li, "class", li_class_value);
    			}
    		},
    		d: function destroy(detaching) {
    			if (detaching) detach_dev(li);
    			mounted = false;
    			dispose();
    		}
    	};

    	dispatch_dev("SvelteRegisterBlock", {
    		block,
    		id: create_each_block$4.name,
    		type: "each",
    		source: "(13:4) {#each items as item}",
    		ctx
    	});

    	return block;
    }

    function create_fragment$b(ctx) {
    	let div;
    	let ul;
    	let each_value = /*items*/ 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$4(get_each_context$4(ctx, each_value, i));
    	}

    	const block = {
    		c: function create() {
    			div = element("div");
    			ul = element("ul");

    			for (let i = 0; i < each_blocks.length; i += 1) {
    				each_blocks[i].c();
    			}

    			attr_dev(ul, "class", "svelte-1av1d6a");
    			add_location(ul, file$a, 11, 2, 356);
    			attr_dev(div, "class", "tabs");
    			toggle_class(div, "size", /*size*/ ctx[2]);
    			add_location(div, file$a, 9, 0, 267);
    		},
    		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, ul);

    			for (let i = 0; i < each_blocks.length; i += 1) {
    				each_blocks[i].m(ul, null);
    			}
    		},
    		p: function update(ctx, [dirty]) {
    			if (dirty & /*size, dispatch, items, activeItem*/ 15) {
    				each_value = /*items*/ ctx[0];
    				validate_each_argument(each_value);
    				let i;

    				for (i = 0; i < each_value.length; i += 1) {
    					const child_ctx = get_each_context$4(ctx, each_value, i);

    					if (each_blocks[i]) {
    						each_blocks[i].p(child_ctx, dirty);
    					} else {
    						each_blocks[i] = create_each_block$4(child_ctx);
    						each_blocks[i].c();
    						each_blocks[i].m(ul, null);
    					}
    				}

    				for (; i < each_blocks.length; i += 1) {
    					each_blocks[i].d(1);
    				}

    				each_blocks.length = each_value.length;
    			}

    			if (dirty & /*size*/ 4) {
    				toggle_class(div, "size", /*size*/ ctx[2]);
    			}
    		},
    		i: noop,
    		o: noop,
    		d: function destroy(detaching) {
    			if (detaching) detach_dev(div);
    			destroy_each(each_blocks, 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('Tabs', slots, []);
    	let { items } = $$props;
    	let { activeItem } = $$props;
    	let { size = 'medium' } = $$props;

    	// big, medium, small
    	const dispatch = createEventDispatcher();

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

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

    	const writable_props = ['items', 'activeItem', 'size'];

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

    	const click_handler = item => dispatch('tabChange', item);

    	$$self.$$set = $$props => {
    		if ('items' in $$props) $$invalidate(0, items = $$props.items);
    		if ('activeItem' in $$props) $$invalidate(1, activeItem = $$props.activeItem);
    		if ('size' in $$props) $$invalidate(2, size = $$props.size);
    	};

    	$$self.$capture_state = () => ({
    		createEventDispatcher,
    		items,
    		activeItem,
    		size,
    		dispatch
    	});

    	$$self.$inject_state = $$props => {
    		if ('items' in $$props) $$invalidate(0, items = $$props.items);
    		if ('activeItem' in $$props) $$invalidate(1, activeItem = $$props.activeItem);
    		if ('size' in $$props) $$invalidate(2, size = $$props.size);
    	};

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

    	return [items, activeItem, size, dispatch, click_handler];
    }

    class Tabs extends SvelteComponentDev {
    	constructor(options) {
    		super(options);
    		init$2(this, options, instance$b, create_fragment$b, safe_not_equal, { items: 0, activeItem: 1, size: 2 });

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

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

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

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

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

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

    	set size(value) {
    		throw new Error("<Tabs>: 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 { Object: Object_1, console: console_1$5 } = globals;
    const file$9 = "src/pages/profile/ProfileFriends.svelte";

    function get_each_context_3(ctx, list, i) {
    	const child_ctx = ctx.slice();
    	child_ctx[43] = list[i];
    	return child_ctx;
    }

    function get_each_context_2(ctx, list, i) {
    	const child_ctx = ctx.slice();
    	child_ctx[43] = list[i];
    	return child_ctx;
    }

    function get_each_context_1$1(ctx, list, i) {
    	const child_ctx = ctx.slice();
    	child_ctx[46] = list[i];
    	return child_ctx;
    }

    function get_each_context$3(ctx, list, i) {
    	const child_ctx = ctx.slice();
    	child_ctx[43] = list[i];
    	return child_ctx;
    }

    // (259:78) 
    function create_if_block_17(ctx) {
    	let h3;
    	let t0;
    	let t1;
    	let show_if = Object.keys(/*blockedUsers*/ ctx[4]).length === 0;
    	let t2;
    	let each_1_anchor;
    	let if_block = show_if && create_if_block_18(ctx);
    	let each_value_3 = /*blockedUsers*/ ctx[4];
    	validate_each_argument(each_value_3);
    	let each_blocks = [];

    	for (let i = 0; i < each_value_3.length; i += 1) {
    		each_blocks[i] = create_each_block_3(get_each_context_3(ctx, each_value_3, i));
    	}

    	const block = {
    		c: function create() {
    			h3 = element("h3");
    			t0 = text(/*activeTabItem*/ ctx[7]);
    			t1 = space();
    			if (if_block) if_block.c();
    			t2 = space();

    			for (let i = 0; i < each_blocks.length; i += 1) {
    				each_blocks[i].c();
    			}

    			each_1_anchor = empty$1();
    			add_location(h3, file$9, 259, 6, 11107);
    		},
    		m: function mount(target, anchor) {
    			insert_dev(target, h3, anchor);
    			append_dev(h3, t0);
    			insert_dev(target, t1, anchor);
    			if (if_block) if_block.m(target, anchor);
    			insert_dev(target, t2, 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[0] & /*activeTabItem*/ 128) set_data_dev(t0, /*activeTabItem*/ ctx[7]);
    			if (dirty[0] & /*blockedUsers*/ 16) show_if = Object.keys(/*blockedUsers*/ ctx[4]).length === 0;

    			if (show_if) {
    				if (if_block) ; else {
    					if_block = create_if_block_18(ctx);
    					if_block.c();
    					if_block.m(t2.parentNode, t2);
    				}
    			} else if (if_block) {
    				if_block.d(1);
    				if_block = null;
    			}

    			if (dirty[0] & /*blockedUsers, viewAUser*/ 1040) {
    				each_value_3 = /*blockedUsers*/ ctx[4];
    				validate_each_argument(each_value_3);
    				let i;

    				for (i = 0; i < each_value_3.length; i += 1) {
    					const child_ctx = get_each_context_3(ctx, each_value_3, i);

    					if (each_blocks[i]) {
    						each_blocks[i].p(child_ctx, dirty);
    					} else {
    						each_blocks[i] = create_each_block_3(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_3.length;
    			}
    		},
    		d: function destroy(detaching) {
    			if (detaching) detach_dev(h3);
    			if (detaching) detach_dev(t1);
    			if (if_block) if_block.d(detaching);
    			if (detaching) detach_dev(t2);
    			destroy_each(each_blocks, detaching);
    			if (detaching) detach_dev(each_1_anchor);
    		}
    	};

    	dispatch_dev("SvelteRegisterBlock", {
    		block,
    		id: create_if_block_17.name,
    		type: "if",
    		source: "(259:78) ",
    		ctx
    	});

    	return block;
    }

    // (248:84) 
    function create_if_block_15(ctx) {
    	let h3;
    	let t0;
    	let t1;
    	let show_if = Object.keys(/*requestsRecieved*/ ctx[3]).length === 0;
    	let t2;
    	let each_1_anchor;
    	let if_block = show_if && create_if_block_16(ctx);
    	let each_value_2 = /*requestsRecieved*/ ctx[3];
    	validate_each_argument(each_value_2);
    	let each_blocks = [];

    	for (let i = 0; i < each_value_2.length; i += 1) {
    		each_blocks[i] = create_each_block_2(get_each_context_2(ctx, each_value_2, i));
    	}

    	const block = {
    		c: function create() {
    			h3 = element("h3");
    			t0 = text(/*activeTabItem*/ ctx[7]);
    			t1 = space();
    			if (if_block) if_block.c();
    			t2 = space();

    			for (let i = 0; i < each_blocks.length; i += 1) {
    				each_blocks[i].c();
    			}

    			each_1_anchor = empty$1();
    			add_location(h3, file$9, 248, 6, 10563);
    		},
    		m: function mount(target, anchor) {
    			insert_dev(target, h3, anchor);
    			append_dev(h3, t0);
    			insert_dev(target, t1, anchor);
    			if (if_block) if_block.m(target, anchor);
    			insert_dev(target, t2, 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[0] & /*activeTabItem*/ 128) set_data_dev(t0, /*activeTabItem*/ ctx[7]);
    			if (dirty[0] & /*requestsRecieved*/ 8) show_if = Object.keys(/*requestsRecieved*/ ctx[3]).length === 0;

    			if (show_if) {
    				if (if_block) ; else {
    					if_block = create_if_block_16(ctx);
    					if_block.c();
    					if_block.m(t2.parentNode, t2);
    				}
    			} else if (if_block) {
    				if_block.d(1);
    				if_block = null;
    			}

    			if (dirty[0] & /*requestsRecieved, viewAUser*/ 1032) {
    				each_value_2 = /*requestsRecieved*/ ctx[3];
    				validate_each_argument(each_value_2);
    				let i;

    				for (i = 0; i < each_value_2.length; i += 1) {
    					const child_ctx = get_each_context_2(ctx, each_value_2, i);

    					if (each_blocks[i]) {
    						each_blocks[i].p(child_ctx, dirty);
    					} else {
    						each_blocks[i] = create_each_block_2(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_2.length;
    			}
    		},
    		d: function destroy(detaching) {
    			if (detaching) detach_dev(h3);
    			if (detaching) detach_dev(t1);
    			if (if_block) if_block.d(detaching);
    			if (detaching) detach_dev(t2);
    			destroy_each(each_blocks, detaching);
    			if (detaching) detach_dev(each_1_anchor);
    		}
    	};

    	dispatch_dev("SvelteRegisterBlock", {
    		block,
    		id: create_if_block_15.name,
    		type: "if",
    		source: "(248:84) ",
    		ctx
    	});

    	return block;
    }

    // (234:76) 
    function create_if_block_11$1(ctx) {
    	let h3;
    	let t0;
    	let t1;
    	let show_if = Object.keys(/*myFriendships*/ ctx[2]).length === 0;
    	let t2;
    	let each_1_anchor;
    	let if_block = show_if && create_if_block_14(ctx);
    	let each_value_1 = /*myFriendships*/ ctx[2];
    	validate_each_argument(each_value_1);
    	let each_blocks = [];

    	for (let i = 0; i < each_value_1.length; i += 1) {
    		each_blocks[i] = create_each_block_1$1(get_each_context_1$1(ctx, each_value_1, i));
    	}

    	const block = {
    		c: function create() {
    			h3 = element("h3");
    			t0 = text(/*activeTabItem*/ ctx[7]);
    			t1 = space();
    			if (if_block) if_block.c();
    			t2 = space();

    			for (let i = 0; i < each_blocks.length; i += 1) {
    				each_blocks[i].c();
    			}

    			each_1_anchor = empty$1();
    			add_location(h3, file$9, 234, 6, 9799);
    		},
    		m: function mount(target, anchor) {
    			insert_dev(target, h3, anchor);
    			append_dev(h3, t0);
    			insert_dev(target, t1, anchor);
    			if (if_block) if_block.m(target, anchor);
    			insert_dev(target, t2, 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[0] & /*activeTabItem*/ 128) set_data_dev(t0, /*activeTabItem*/ ctx[7]);
    			if (dirty[0] & /*myFriendships*/ 4) show_if = Object.keys(/*myFriendships*/ ctx[2]).length === 0;

    			if (show_if) {
    				if (if_block) ; else {
    					if_block = create_if_block_14(ctx);
    					if_block.c();
    					if_block.m(t2.parentNode, t2);
    				}
    			} else if (if_block) {
    				if_block.d(1);
    				if_block = null;
    			}

    			if (dirty[0] & /*viewAUser, myFriendships, user*/ 1029) {
    				each_value_1 = /*myFriendships*/ ctx[2];
    				validate_each_argument(each_value_1);
    				let i;

    				for (i = 0; i < each_value_1.length; i += 1) {
    					const child_ctx = get_each_context_1$1(ctx, each_value_1, i);

    					if (each_blocks[i]) {
    						each_blocks[i].p(child_ctx, dirty);
    					} else {
    						each_blocks[i] = create_each_block_1$1(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_1.length;
    			}
    		},
    		d: function destroy(detaching) {
    			if (detaching) detach_dev(h3);
    			if (detaching) detach_dev(t1);
    			if (if_block) if_block.d(detaching);
    			if (detaching) detach_dev(t2);
    			destroy_each(each_blocks, detaching);
    			if (detaching) detach_dev(each_1_anchor);
    		}
    	};

    	dispatch_dev("SvelteRegisterBlock", {
    		block,
    		id: create_if_block_11$1.name,
    		type: "if",
    		source: "(234:76) ",
    		ctx
    	});

    	return block;
    }

    // (214:4) {#if activeTabItem === 'All Users' && allUsers !== undefined}
    function create_if_block_9$1(ctx) {
    	let h3;
    	let t0;
    	let t1;
    	let show_if = Object.keys(/*allUsers*/ ctx[1]).length === 0;
    	let t2;
    	let each_1_anchor;
    	let if_block = show_if && create_if_block_10$1(ctx);
    	let each_value = /*allUsers*/ ctx[1];
    	validate_each_argument(each_value);
    	let each_blocks = [];

    	for (let i = 0; i < each_value.length; i += 1) {
    		each_blocks[i] = create_each_block$3(get_each_context$3(ctx, each_value, i));
    	}

    	const block = {
    		c: function create() {
    			h3 = element("h3");
    			t0 = text(/*activeTabItem*/ ctx[7]);
    			t1 = space();
    			if (if_block) if_block.c();
    			t2 = space();

    			for (let i = 0; i < each_blocks.length; i += 1) {
    				each_blocks[i].c();
    			}

    			each_1_anchor = empty$1();
    			add_location(h3, file$9, 214, 6, 8785);
    		},
    		m: function mount(target, anchor) {
    			insert_dev(target, h3, anchor);
    			append_dev(h3, t0);
    			insert_dev(target, t1, anchor);
    			if (if_block) if_block.m(target, anchor);
    			insert_dev(target, t2, 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[0] & /*activeTabItem*/ 128) set_data_dev(t0, /*activeTabItem*/ ctx[7]);
    			if (dirty[0] & /*allUsers*/ 2) show_if = Object.keys(/*allUsers*/ ctx[1]).length === 0;

    			if (show_if) {
    				if (if_block) ; else {
    					if_block = create_if_block_10$1(ctx);
    					if_block.c();
    					if_block.m(t2.parentNode, t2);
    				}
    			} else if (if_block) {
    				if_block.d(1);
    				if_block = null;
    			}

    			if (dirty[0] & /*allUsers, viewAUser*/ 1026) {
    				each_value = /*allUsers*/ ctx[1];
    				validate_each_argument(each_value);
    				let i;

    				for (i = 0; i < each_value.length; i += 1) {
    					const child_ctx = get_each_context$3(ctx, each_value, i);

    					if (each_blocks[i]) {
    						each_blocks[i].p(child_ctx, dirty);
    					} else {
    						each_blocks[i] = create_each_block$3(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) {
    			if (detaching) detach_dev(h3);
    			if (detaching) detach_dev(t1);
    			if (if_block) if_block.d(detaching);
    			if (detaching) detach_dev(t2);
    			destroy_each(each_blocks, detaching);
    			if (detaching) detach_dev(each_1_anchor);
    		}
    	};

    	dispatch_dev("SvelteRegisterBlock", {
    		block,
    		id: create_if_block_9$1.name,
    		type: "if",
    		source: "(214:4) {#if activeTabItem === 'All Users' && allUsers !== undefined}",
    		ctx
    	});

    	return block;
    }

    // (262:6) {#if Object.keys(blockedUsers).length === 0}
    function create_if_block_18(ctx) {
    	let div;

    	const block = {
    		c: function create() {
    			div = element("div");
    			div.textContent = "You have not Blocked any Users";
    			attr_dev(div, "class", "tip svelte-xor3eg");
    			add_location(div, file$9, 262, 8, 11348);
    		},
    		m: function mount(target, anchor) {
    			insert_dev(target, div, anchor);
    		},
    		d: function destroy(detaching) {
    			if (detaching) detach_dev(div);
    		}
    	};

    	dispatch_dev("SvelteRegisterBlock", {
    		block,
    		id: create_if_block_18.name,
    		type: "if",
    		source: "(262:6) {#if Object.keys(blockedUsers).length === 0}",
    		ctx
    	});

    	return block;
    }

    // (266:6) {#each blockedUsers as aUser}
    function create_each_block_3(ctx) {
    	let div0;
    	let t0_value = /*aUser*/ ctx[43].receiverUsername + "";
    	let t0;
    	let t1;
    	let div1;
    	let t2_value = /*aUser*/ ctx[43].status + "";
    	let t2;
    	let t3;
    	let br;
    	let mounted;
    	let dispose;

    	function click_handler_4() {
    		return /*click_handler_4*/ ctx[22](/*aUser*/ ctx[43]);
    	}

    	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", "sidebar-item svelte-xor3eg");
    			add_location(div0, file$9, 266, 8, 11514);
    			attr_dev(div1, "class", "status sidebar-item svelte-xor3eg");
    			add_location(div1, file$9, 267, 8, 11630);
    			add_location(br, file$9, 268, 8, 11692);
    		},
    		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_4, false, false, false);
    				mounted = true;
    			}
    		},
    		p: function update(new_ctx, dirty) {
    			ctx = new_ctx;
    			if (dirty[0] & /*blockedUsers*/ 16 && t0_value !== (t0_value = /*aUser*/ ctx[43].receiverUsername + "")) set_data_dev(t0, t0_value);
    			if (dirty[0] & /*blockedUsers*/ 16 && t2_value !== (t2_value = /*aUser*/ ctx[43].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_3.name,
    		type: "each",
    		source: "(266:6) {#each blockedUsers as aUser}",
    		ctx
    	});

    	return block;
    }

    // (250:6) {#if Object.keys(requestsRecieved).length === 0}
    function create_if_block_16(ctx) {
    	let div;

    	const block = {
    		c: function create() {
    			div = element("div");
    			div.textContent = "You don't have any Friend Requests";
    			attr_dev(div, "class", "tip svelte-xor3eg");
    			add_location(div, file$9, 250, 8, 10651);
    		},
    		m: function mount(target, anchor) {
    			insert_dev(target, div, anchor);
    		},
    		d: function destroy(detaching) {
    			if (detaching) detach_dev(div);
    		}
    	};

    	dispatch_dev("SvelteRegisterBlock", {
    		block,
    		id: create_if_block_16.name,
    		type: "if",
    		source: "(250:6) {#if Object.keys(requestsRecieved).length === 0}",
    		ctx
    	});

    	return block;
    }

    // (254:6) {#each requestsRecieved as aUser}
    function create_each_block_2(ctx) {
    	let div0;
    	let t0_value = /*aUser*/ ctx[43].senderUsername + "";
    	let t0;
    	let t1;
    	let div1;
    	let t2_value = /*aUser*/ ctx[43].status + "";
    	let t2;
    	let t3;
    	let br;
    	let mounted;
    	let dispose;

    	function click_handler_3() {
    		return /*click_handler_3*/ ctx[21](/*aUser*/ ctx[43]);
    	}

    	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", "sidebar-item svelte-xor3eg");
    			add_location(div0, file$9, 254, 8, 10829);
    			attr_dev(div1, "class", "status sidebar-item svelte-xor3eg");
    			add_location(div1, file$9, 255, 8, 10941);
    			add_location(br, file$9, 256, 8, 11003);
    		},
    		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_3, false, false, false);
    				mounted = true;
    			}
    		},
    		p: function update(new_ctx, dirty) {
    			ctx = new_ctx;
    			if (dirty[0] & /*requestsRecieved*/ 8 && t0_value !== (t0_value = /*aUser*/ ctx[43].senderUsername + "")) set_data_dev(t0, t0_value);
    			if (dirty[0] & /*requestsRecieved*/ 8 && t2_value !== (t2_value = /*aUser*/ ctx[43].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_2.name,
    		type: "each",
    		source: "(254:6) {#each requestsRecieved as aUser}",
    		ctx
    	});

    	return block;
    }

    // (236:6) {#if Object.keys(myFriendships).length === 0}
    function create_if_block_14(ctx) {
    	let div;

    	const block = {
    		c: function create() {
    			div = element("div");
    			div.textContent = "You don't have any Friends... Yet!";
    			attr_dev(div, "class", "tip svelte-xor3eg");
    			add_location(div, file$9, 236, 8, 9884);
    		},
    		m: function mount(target, anchor) {
    			insert_dev(target, div, anchor);
    		},
    		d: function destroy(detaching) {
    			if (detaching) detach_dev(div);
    		}
    	};

    	dispatch_dev("SvelteRegisterBlock", {
    		block,
    		id: create_if_block_14.name,
    		type: "if",
    		source: "(236:6) {#if Object.keys(myFriendships).length === 0}",
    		ctx
    	});

    	return block;
    }

    // (243:65) 
    function create_if_block_13(ctx) {
    	let div;
    	let t_value = /*aFriendship*/ ctx[46].receiverUsername + "";
    	let t;
    	let mounted;
    	let dispose;

    	function click_handler_2() {
    		return /*click_handler_2*/ ctx[20](/*aFriendship*/ ctx[46]);
    	}

    	const block = {
    		c: function create() {
    			div = element("div");
    			t = text(t_value);
    			attr_dev(div, "class", "sidebar-item svelte-xor3eg");
    			add_location(div, file$9, 243, 10, 10311);
    		},
    		m: function mount(target, anchor) {
    			insert_dev(target, div, anchor);
    			append_dev(div, t);

    			if (!mounted) {
    				dispose = listen_dev(div, "click", click_handler_2, false, false, false);
    				mounted = true;
    			}
    		},
    		p: function update(new_ctx, dirty) {
    			ctx = new_ctx;
    			if (dirty[0] & /*myFriendships*/ 4 && t_value !== (t_value = /*aFriendship*/ ctx[46].receiverUsername + "")) set_data_dev(t, t_value);
    		},
    		d: function destroy(detaching) {
    			if (detaching) detach_dev(div);
    			mounted = false;
    			dispose();
    		}
    	};

    	dispatch_dev("SvelteRegisterBlock", {
    		block,
    		id: create_if_block_13.name,
    		type: "if",
    		source: "(243:65) ",
    		ctx
    	});

    	return block;
    }

    // (241:8) {#if aFriendship.senderUsername !== user.username}
    function create_if_block_12$1(ctx) {
    	let div;
    	let t_value = /*aFriendship*/ ctx[46].senderUsername + "";
    	let t;
    	let mounted;
    	let dispose;

    	function click_handler_1() {
    		return /*click_handler_1*/ ctx[19](/*aFriendship*/ ctx[46]);
    	}

    	const block = {
    		c: function create() {
    			div = element("div");
    			t = text(t_value);
    			attr_dev(div, "class", "sidebar-item svelte-xor3eg");
    			add_location(div, file$9, 241, 10, 10119);
    		},
    		m: function mount(target, anchor) {
    			insert_dev(target, div, anchor);
    			append_dev(div, t);

    			if (!mounted) {
    				dispose = listen_dev(div, "click", click_handler_1, false, false, false);
    				mounted = true;
    			}
    		},
    		p: function update(new_ctx, dirty) {
    			ctx = new_ctx;
    			if (dirty[0] & /*myFriendships*/ 4 && t_value !== (t_value = /*aFriendship*/ ctx[46].senderUsername + "")) set_data_dev(t, t_value);
    		},
    		d: function destroy(detaching) {
    			if (detaching) detach_dev(div);
    			mounted = false;
    			dispose();
    		}
    	};

    	dispatch_dev("SvelteRegisterBlock", {
    		block,
    		id: create_if_block_12$1.name,
    		type: "if",
    		source: "(241:8) {#if aFriendship.senderUsername !== user.username}",
    		ctx
    	});

    	return block;
    }

    // (240:6) {#each myFriendships as aFriendship}
    function create_each_block_1$1(ctx) {
    	let t;
    	let br;

    	function select_block_type_1(ctx, dirty) {
    		if (/*aFriendship*/ ctx[46].senderUsername !== /*user*/ ctx[0].username) return create_if_block_12$1;
    		if (/*aFriendship*/ ctx[46].receiverUsername !== /*user*/ ctx[0].username) return create_if_block_13;
    	}

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

    	const block = {
    		c: function create() {
    			if (if_block) if_block.c();
    			t = space();
    			br = element("br");
    			add_location(br, file$9, 245, 8, 10453);
    		},
    		m: function mount(target, anchor) {
    			if (if_block) if_block.m(target, anchor);
    			insert_dev(target, t, anchor);
    			insert_dev(target, br, anchor);
    		},
    		p: function update(ctx, dirty) {
    			if (current_block_type === (current_block_type = select_block_type_1(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(t.parentNode, t);
    				}
    			}
    		},
    		d: function destroy(detaching) {
    			if (if_block) {
    				if_block.d(detaching);
    			}

    			if (detaching) detach_dev(t);
    			if (detaching) detach_dev(br);
    		}
    	};

    	dispatch_dev("SvelteRegisterBlock", {
    		block,
    		id: create_each_block_1$1.name,
    		type: "each",
    		source: "(240:6) {#each myFriendships as aFriendship}",
    		ctx
    	});

    	return block;
    }

    // (220:6) {#if Object.keys(allUsers).length === 0}
    function create_if_block_10$1(ctx) {
    	let div;

    	const block = {
    		c: function create() {
    			div = element("div");
    			div.textContent = "You are alone on this platform...";
    			attr_dev(div, "class", "tip svelte-xor3eg");
    			add_location(div, file$9, 220, 8, 9101);
    		},
    		m: function mount(target, anchor) {
    			insert_dev(target, div, anchor);
    		},
    		d: function destroy(detaching) {
    			if (detaching) detach_dev(div);
    		}
    	};

    	dispatch_dev("SvelteRegisterBlock", {
    		block,
    		id: create_if_block_10$1.name,
    		type: "if",
    		source: "(220:6) {#if Object.keys(allUsers).length === 0}",
    		ctx
    	});

    	return block;
    }

    // (226:6) {#each allUsers as aUser}
    function create_each_block$3(ctx) {
    	let div0;
    	let t0_value = /*aUser*/ ctx[43].username + "";
    	let t0;
    	let t1;
    	let div1;
    	let t2_value = /*aUser*/ ctx[43].status + "";
    	let t2;
    	let t3;
    	let br;
    	let mounted;
    	let dispose;

    	function click_handler() {
    		return /*click_handler*/ ctx[18](/*aUser*/ ctx[43]);
    	}

    	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", "sidebar-item svelte-xor3eg");
    			add_location(div0, file$9, 226, 8, 9351);
    			attr_dev(div1, "class", "status sidebar-item svelte-xor3eg");
    			add_location(div1, file$9, 230, 8, 9635);
    			add_location(br, file$9, 231, 8, 9697);
    		},
    		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[0] & /*allUsers*/ 2 && t0_value !== (t0_value = /*aUser*/ ctx[43].username + "")) set_data_dev(t0, t0_value);
    			if (dirty[0] & /*allUsers*/ 2 && t2_value !== (t2_value = /*aUser*/ ctx[43].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$3.name,
    		type: "each",
    		source: "(226:6) {#each allUsers as aUser}",
    		ctx
    	});

    	return block;
    }

    // (314:4) {:else}
    function create_else_block_3(ctx) {
    	let div;
    	let h1;
    	let t1;
    	let h4;

    	const block = {
    		c: function create() {
    			div = element("div");
    			h1 = element("h1");
    			h1.textContent = "Click on a user!";
    			t1 = space();
    			h4 = element("h4");
    			h4.textContent = "You'll see them displayed here";
    			add_location(h1, file$9, 315, 8, 14257);
    			add_location(h4, file$9, 316, 8, 14291);
    			attr_dev(div, "class", "placeholder svelte-xor3eg");
    			add_location(div, file$9, 314, 6, 14223);
    		},
    		m: function mount(target, anchor) {
    			insert_dev(target, div, anchor);
    			append_dev(div, h1);
    			append_dev(div, t1);
    			append_dev(div, h4);
    		},
    		p: noop,
    		i: noop,
    		o: noop,
    		d: function destroy(detaching) {
    			if (detaching) detach_dev(div);
    		}
    	};

    	dispatch_dev("SvelteRegisterBlock", {
    		block,
    		id: create_else_block_3.name,
    		type: "else",
    		source: "(314:4) {:else}",
    		ctx
    	});

    	return block;
    }

    // (276:4) {#if usernameBeingViewed !== undefined}
    function create_if_block$5(ctx) {
    	let displayauser;
    	let t;
    	let div;
    	let current_block_type_index;
    	let if_block;
    	let current;

    	displayauser = new DisplayAUser({
    			props: {
    				aUsername: /*usernameBeingViewed*/ ctx[5]
    			},
    			$$inline: true
    		});

    	const if_block_creators = [create_if_block_1$2, create_else_block_2];
    	const if_blocks = [];

    	function select_block_type_3(ctx, dirty) {
    		if (/*friendshipStatusFull*/ ctx[6] && /*friendshipStatusFull*/ ctx[6].id) return 0;
    		return 1;
    	}

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

    	const block = {
    		c: function create() {
    			create_component(displayauser.$$.fragment);
    			t = space();
    			div = element("div");
    			if_block.c();
    			attr_dev(div, "class", "buttons-area svelte-xor3eg");
    			add_location(div, file$9, 279, 6, 11929);
    		},
    		m: function mount(target, anchor) {
    			mount_component(displayauser, target, anchor);
    			insert_dev(target, t, anchor);
    			insert_dev(target, div, anchor);
    			if_blocks[current_block_type_index].m(div, null);
    			current = true;
    		},
    		p: function update(ctx, dirty) {
    			const displayauser_changes = {};
    			if (dirty[0] & /*usernameBeingViewed*/ 32) displayauser_changes.aUsername = /*usernameBeingViewed*/ ctx[5];
    			displayauser.$set(displayauser_changes);
    			let previous_block_index = current_block_type_index;
    			current_block_type_index = select_block_type_3(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);
    			}
    		},
    		i: function intro(local) {
    			if (current) return;
    			transition_in(displayauser.$$.fragment, local);
    			transition_in(if_block);
    			current = true;
    		},
    		o: function outro(local) {
    			transition_out(displayauser.$$.fragment, local);
    			transition_out(if_block);
    			current = false;
    		},
    		d: function destroy(detaching) {
    			destroy_component(displayauser, detaching);
    			if (detaching) detach_dev(t);
    			if (detaching) detach_dev(div);
    			if_blocks[current_block_type_index].d();
    		}
    	};

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

    	return block;
    }

    // (308:8) {:else}
    function create_else_block_2(ctx) {
    	let button0;
    	let t;
    	let button1;
    	let current;

    	button0 = new Button({
    			props: {
    				type: "secondary",
    				$$slots: { default: [create_default_slot_9] },
    				$$scope: { ctx }
    			},
    			$$inline: true
    		});

    	button0.$on("click", /*click_handler_13*/ ctx[31]);

    	button1 = new Button({
    			props: {
    				$$slots: { default: [create_default_slot_8] },
    				$$scope: { ctx }
    			},
    			$$inline: true
    		});

    	button1.$on("click", /*click_handler_14*/ ctx[32]);

    	const block = {
    		c: function create() {
    			create_component(button0.$$.fragment);
    			t = space();
    			create_component(button1.$$.fragment);
    		},
    		m: function mount(target, anchor) {
    			mount_component(button0, target, anchor);
    			insert_dev(target, t, anchor);
    			mount_component(button1, target, anchor);
    			current = true;
    		},
    		p: function update(ctx, dirty) {
    			const button0_changes = {};

    			if (dirty[1] & /*$$scope*/ 4194304) {
    				button0_changes.$$scope = { dirty, ctx };
    			}

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

    			if (dirty[1] & /*$$scope*/ 4194304) {
    				button1_changes.$$scope = { dirty, ctx };
    			}

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

    	dispatch_dev("SvelteRegisterBlock", {
    		block,
    		id: create_else_block_2.name,
    		type: "else",
    		source: "(308:8) {:else}",
    		ctx
    	});

    	return block;
    }

    // (281:8) {#if friendshipStatusFull && friendshipStatusFull.id}
    function create_if_block_1$2(ctx) {
    	let current_block_type_index;
    	let if_block;
    	let if_block_anchor;
    	let current;
    	const if_block_creators = [create_if_block_2$2, create_if_block_4$2, create_if_block_5$2, create_if_block_7$1];
    	const if_blocks = [];

    	function select_block_type_4(ctx, dirty) {
    		if (/*friendshipStatusFull*/ ctx[6].status === 'R') return 0;
    		if (/*friendshipStatusFull*/ ctx[6].status === 'A') return 1;
    		if (/*friendshipStatusFull*/ ctx[6].status === 'D') return 2;
    		if (/*friendshipStatusFull*/ ctx[6].status === 'B') return 3;
    		return -1;
    	}

    	if (~(current_block_type_index = select_block_type_4(ctx))) {
    		if_block = if_blocks[current_block_type_index] = if_block_creators[current_block_type_index](ctx);
    	}

    	const block = {
    		c: function create() {
    			if (if_block) if_block.c();
    			if_block_anchor = empty$1();
    		},
    		m: function mount(target, anchor) {
    			if (~current_block_type_index) {
    				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_4(ctx);

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

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

    					check_outros();
    				}

    				if (~current_block_type_index) {
    					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);
    				} else {
    					if_block = null;
    				}
    			}
    		},
    		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 (~current_block_type_index) {
    				if_blocks[current_block_type_index].d(detaching);
    			}

    			if (detaching) detach_dev(if_block_anchor);
    		}
    	};

    	dispatch_dev("SvelteRegisterBlock", {
    		block,
    		id: create_if_block_1$2.name,
    		type: "if",
    		source: "(281:8) {#if friendshipStatusFull && friendshipStatusFull.id}",
    		ctx
    	});

    	return block;
    }

    // (309:10) <Button type="secondary" on:click={() => sendFriendRequest(usernameBeingViewed)}>
    function create_default_slot_9(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_9.name,
    		type: "slot",
    		source: "(309:10) <Button type=\\\"secondary\\\" on:click={() => sendFriendRequest(usernameBeingViewed)}>",
    		ctx
    	});

    	return block;
    }

    // (310:10) <Button on:click={() => blockANonFriendUser(usernameBeingViewed)}>
    function create_default_slot_8(ctx) {
    	let t;

    	const block = {
    		c: function create() {
    			t = text("Block 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_8.name,
    		type: "slot",
    		source: "(310:10) <Button on:click={() => blockANonFriendUser(usernameBeingViewed)}>",
    		ctx
    	});

    	return block;
    }

    // (303:56) 
    function create_if_block_7$1(ctx) {
    	let if_block_anchor;
    	let current;
    	let if_block = /*friendshipStatusFull*/ ctx[6].senderUsername === /*user*/ ctx[0].username && create_if_block_8$1(ctx);

    	const block = {
    		c: function create() {
    			if (if_block) if_block.c();
    			if_block_anchor = empty$1();
    		},
    		m: function mount(target, anchor) {
    			if (if_block) if_block.m(target, anchor);
    			insert_dev(target, if_block_anchor, anchor);
    			current = true;
    		},
    		p: function update(ctx, dirty) {
    			if (/*friendshipStatusFull*/ ctx[6].senderUsername === /*user*/ ctx[0].username) {
    				if (if_block) {
    					if_block.p(ctx, dirty);

    					if (dirty[0] & /*friendshipStatusFull, user*/ 65) {
    						transition_in(if_block, 1);
    					}
    				} else {
    					if_block = create_if_block_8$1(ctx);
    					if_block.c();
    					transition_in(if_block, 1);
    					if_block.m(if_block_anchor.parentNode, if_block_anchor);
    				}
    			} else if (if_block) {
    				group_outros();

    				transition_out(if_block, 1, 1, () => {
    					if_block = null;
    				});

    				check_outros();
    			}
    		},
    		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 (if_block) if_block.d(detaching);
    			if (detaching) detach_dev(if_block_anchor);
    		}
    	};

    	dispatch_dev("SvelteRegisterBlock", {
    		block,
    		id: create_if_block_7$1.name,
    		type: "if",
    		source: "(303:56) ",
    		ctx
    	});

    	return block;
    }

    // (295:56) 
    function create_if_block_5$2(ctx) {
    	let current_block_type_index;
    	let if_block;
    	let t;
    	let button;
    	let current;
    	const if_block_creators = [create_if_block_6$1, create_else_block_1];
    	const if_blocks = [];

    	function select_block_type_6(ctx, dirty) {
    		if (/*friendshipStatusFull*/ ctx[6].senderUsername === /*user*/ ctx[0].username) return 0;
    		return 1;
    	}

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

    	button = new Button({
    			props: {
    				$$slots: { default: [create_default_slot_5] },
    				$$scope: { ctx }
    			},
    			$$inline: true
    		});

    	button.$on("click", /*click_handler_11*/ ctx[29]);

    	const block = {
    		c: function create() {
    			if_block.c();
    			t = space();
    			create_component(button.$$.fragment);
    		},
    		m: function mount(target, anchor) {
    			if_blocks[current_block_type_index].m(target, anchor);
    			insert_dev(target, t, anchor);
    			mount_component(button, target, anchor);
    			current = true;
    		},
    		p: function update(ctx, dirty) {
    			let previous_block_index = current_block_type_index;
    			current_block_type_index = select_block_type_6(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(t.parentNode, t);
    			}

    			const button_changes = {};

    			if (dirty[1] & /*$$scope*/ 4194304) {
    				button_changes.$$scope = { dirty, ctx };
    			}

    			button.$set(button_changes);
    		},
    		i: function intro(local) {
    			if (current) return;
    			transition_in(if_block);
    			transition_in(button.$$.fragment, local);
    			current = true;
    		},
    		o: function outro(local) {
    			transition_out(if_block);
    			transition_out(button.$$.fragment, local);
    			current = false;
    		},
    		d: function destroy(detaching) {
    			if_blocks[current_block_type_index].d(detaching);
    			if (detaching) detach_dev(t);
    			destroy_component(button, detaching);
    		}
    	};

    	dispatch_dev("SvelteRegisterBlock", {
    		block,
    		id: create_if_block_5$2.name,
    		type: "if",
    		source: "(295:56) ",
    		ctx
    	});

    	return block;
    }

    // (291:56) 
    function create_if_block_4$2(ctx) {
    	let div;
    	let t1;
    	let button0;
    	let t2;
    	let button1;
    	let current;

    	button0 = new Button({
    			props: {
    				$$slots: { default: [create_default_slot_4] },
    				$$scope: { ctx }
    			},
    			$$inline: true
    		});

    	button0.$on("click", /*click_handler_8*/ ctx[26]);

    	button1 = new Button({
    			props: {
    				$$slots: { default: [create_default_slot_3] },
    				$$scope: { ctx }
    			},
    			$$inline: true
    		});

    	button1.$on("click", /*click_handler_9*/ ctx[27]);

    	const block = {
    		c: function create() {
    			div = element("div");
    			div.textContent = "You are Friends";
    			t1 = space();
    			create_component(button0.$$.fragment);
    			t2 = space();
    			create_component(button1.$$.fragment);
    			attr_dev(div, "class", "tile");
    			add_location(div, file$9, 291, 12, 12775);
    		},
    		m: function mount(target, anchor) {
    			insert_dev(target, div, anchor);
    			insert_dev(target, t1, anchor);
    			mount_component(button0, target, anchor);
    			insert_dev(target, t2, anchor);
    			mount_component(button1, target, anchor);
    			current = true;
    		},
    		p: function update(ctx, dirty) {
    			const button0_changes = {};

    			if (dirty[1] & /*$$scope*/ 4194304) {
    				button0_changes.$$scope = { dirty, ctx };
    			}

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

    			if (dirty[1] & /*$$scope*/ 4194304) {
    				button1_changes.$$scope = { dirty, ctx };
    			}

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

    	dispatch_dev("SvelteRegisterBlock", {
    		block,
    		id: create_if_block_4$2.name,
    		type: "if",
    		source: "(291:56) ",
    		ctx
    	});

    	return block;
    }

    // (282:10) {#if friendshipStatusFull.status === 'R'}
    function create_if_block_2$2(ctx) {
    	let current_block_type_index;
    	let if_block;
    	let t;
    	let button;
    	let current;
    	const if_block_creators = [create_if_block_3$2, create_else_block$4];
    	const if_blocks = [];

    	function select_block_type_5(ctx, dirty) {
    		if (/*friendshipStatusFull*/ ctx[6].senderUsername === /*user*/ ctx[0].username) return 0;
    		return 1;
    	}

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

    	button = new Button({
    			props: {
    				$$slots: { default: [create_default_slot] },
    				$$scope: { ctx }
    			},
    			$$inline: true
    		});

    	button.$on("click", /*click_handler_7*/ ctx[25]);

    	const block = {
    		c: function create() {
    			if_block.c();
    			t = space();
    			create_component(button.$$.fragment);
    		},
    		m: function mount(target, anchor) {
    			if_blocks[current_block_type_index].m(target, anchor);
    			insert_dev(target, t, anchor);
    			mount_component(button, target, anchor);
    			current = true;
    		},
    		p: function update(ctx, dirty) {
    			let previous_block_index = current_block_type_index;
    			current_block_type_index = select_block_type_5(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(t.parentNode, t);
    			}

    			const button_changes = {};

    			if (dirty[1] & /*$$scope*/ 4194304) {
    				button_changes.$$scope = { dirty, ctx };
    			}

    			button.$set(button_changes);
    		},
    		i: function intro(local) {
    			if (current) return;
    			transition_in(if_block);
    			transition_in(button.$$.fragment, local);
    			current = true;
    		},
    		o: function outro(local) {
    			transition_out(if_block);
    			transition_out(button.$$.fragment, local);
    			current = false;
    		},
    		d: function destroy(detaching) {
    			if_blocks[current_block_type_index].d(detaching);
    			if (detaching) detach_dev(t);
    			destroy_component(button, detaching);
    		}
    	};

    	dispatch_dev("SvelteRegisterBlock", {
    		block,
    		id: create_if_block_2$2.name,
    		type: "if",
    		source: "(282:10) {#if friendshipStatusFull.status === 'R'}",
    		ctx
    	});

    	return block;
    }

    // (304:12) {#if friendshipStatusFull.senderUsername === user.username}
    function create_if_block_8$1(ctx) {
    	let button;
    	let current;

    	button = new Button({
    			props: {
    				$$slots: { default: [create_default_slot_7] },
    				$$scope: { ctx }
    			},
    			$$inline: true
    		});

    	button.$on("click", /*click_handler_12*/ ctx[30]);

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

    			if (dirty[1] & /*$$scope*/ 4194304) {
    				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) {
    			destroy_component(button, detaching);
    		}
    	};

    	dispatch_dev("SvelteRegisterBlock", {
    		block,
    		id: create_if_block_8$1.name,
    		type: "if",
    		source: "(304:12) {#if friendshipStatusFull.senderUsername === user.username}",
    		ctx
    	});

    	return block;
    }

    // (305:14) <Button on:click={() => unblockAUser(friendshipStatusFull.id)}>
    function create_default_slot_7(ctx) {
    	let t;

    	const block = {
    		c: function create() {
    			t = text("Unblock 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_7.name,
    		type: "slot",
    		source: "(305:14) <Button on:click={() => unblockAUser(friendshipStatusFull.id)}>",
    		ctx
    	});

    	return block;
    }

    // (298:12) {:else}
    function create_else_block_1(ctx) {
    	let div;
    	let t1;
    	let button;
    	let current;

    	button = new Button({
    			props: {
    				$$slots: { default: [create_default_slot_6] },
    				$$scope: { ctx }
    			},
    			$$inline: true
    		});

    	button.$on("click", /*click_handler_10*/ ctx[28]);

    	const block = {
    		c: function create() {
    			div = element("div");
    			div.textContent = "You declined the friend request, but you could still change your mind";
    			t1 = space();
    			create_component(button.$$.fragment);
    			attr_dev(div, "class", "tile");
    			add_location(div, file$9, 298, 14, 13253);
    		},
    		m: function mount(target, anchor) {
    			insert_dev(target, div, anchor);
    			insert_dev(target, t1, anchor);
    			mount_component(button, target, anchor);
    			current = true;
    		},
    		p: function update(ctx, dirty) {
    			const button_changes = {};

    			if (dirty[1] & /*$$scope*/ 4194304) {
    				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(div);
    			if (detaching) detach_dev(t1);
    			destroy_component(button, detaching);
    		}
    	};

    	dispatch_dev("SvelteRegisterBlock", {
    		block,
    		id: create_else_block_1.name,
    		type: "else",
    		source: "(298:12) {:else}",
    		ctx
    	});

    	return block;
    }

    // (296:12) {#if friendshipStatusFull.senderUsername === user.username}
    function create_if_block_6$1(ctx) {
    	let div;

    	const block = {
    		c: function create() {
    			div = element("div");
    			div.textContent = "Your friend request was declined, hang in there bud.";
    			attr_dev(div, "class", "tile");
    			add_location(div, file$9, 296, 14, 13142);
    		},
    		m: function mount(target, anchor) {
    			insert_dev(target, div, anchor);
    		},
    		p: noop,
    		i: noop,
    		o: noop,
    		d: function destroy(detaching) {
    			if (detaching) detach_dev(div);
    		}
    	};

    	dispatch_dev("SvelteRegisterBlock", {
    		block,
    		id: create_if_block_6$1.name,
    		type: "if",
    		source: "(296:12) {#if friendshipStatusFull.senderUsername === user.username}",
    		ctx
    	});

    	return block;
    }

    // (300:14) <Button on:click={() => acceptFriendRequest(friendshipStatusFull.id)}>
    function create_default_slot_6(ctx) {
    	let t;

    	const block = {
    		c: function create() {
    			t = text("Accept Friend Request");
    		},
    		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: "(300:14) <Button on:click={() => acceptFriendRequest(friendshipStatusFull.id)}>",
    		ctx
    	});

    	return block;
    }

    // (302:12) <Button on:click={() => blockAFriend(friendshipStatusFull.id)}>
    function create_default_slot_5(ctx) {
    	let t;

    	const block = {
    		c: function create() {
    			t = text("Block 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: "(302:12) <Button on:click={() => blockAFriend(friendshipStatusFull.id)}>",
    		ctx
    	});

    	return block;
    }

    // (293:12) <Button on:click={() => unfriend(friendshipStatusFull.id)}>
    function create_default_slot_4(ctx) {
    	let t;

    	const block = {
    		c: function create() {
    			t = text("Unfriend");
    		},
    		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: "(293:12) <Button on:click={() => unfriend(friendshipStatusFull.id)}>",
    		ctx
    	});

    	return block;
    }

    // (294:12) <Button on:click={() => blockAFriend(friendshipStatusFull.id)}>
    function create_default_slot_3(ctx) {
    	let t;

    	const block = {
    		c: function create() {
    			t = text("Block 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_3.name,
    		type: "slot",
    		source: "(294:12) <Button on:click={() => blockAFriend(friendshipStatusFull.id)}>",
    		ctx
    	});

    	return block;
    }

    // (285:12) {:else}
    function create_else_block$4(ctx) {
    	let button0;
    	let t;
    	let button1;
    	let current;

    	button0 = new Button({
    			props: {
    				type: "secondary",
    				$$slots: { default: [create_default_slot_2] },
    				$$scope: { ctx }
    			},
    			$$inline: true
    		});

    	button0.$on("click", /*click_handler_5*/ ctx[23]);

    	button1 = new Button({
    			props: {
    				$$slots: { default: [create_default_slot_1] },
    				$$scope: { ctx }
    			},
    			$$inline: true
    		});

    	button1.$on("click", /*click_handler_6*/ ctx[24]);

    	const block = {
    		c: function create() {
    			create_component(button0.$$.fragment);
    			t = space();
    			create_component(button1.$$.fragment);
    		},
    		m: function mount(target, anchor) {
    			mount_component(button0, target, anchor);
    			insert_dev(target, t, anchor);
    			mount_component(button1, target, anchor);
    			current = true;
    		},
    		p: function update(ctx, dirty) {
    			const button0_changes = {};

    			if (dirty[1] & /*$$scope*/ 4194304) {
    				button0_changes.$$scope = { dirty, ctx };
    			}

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

    			if (dirty[1] & /*$$scope*/ 4194304) {
    				button1_changes.$$scope = { dirty, ctx };
    			}

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

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

    	return block;
    }

    // (283:12) {#if friendshipStatusFull.senderUsername === user.username}
    function create_if_block_3$2(ctx) {
    	let div;

    	const block = {
    		c: function create() {
    			div = element("div");
    			div.textContent = "Friend Request Sent";
    			attr_dev(div, "class", "tile");
    			add_location(div, file$9, 283, 14, 12156);
    		},
    		m: function mount(target, anchor) {
    			insert_dev(target, div, anchor);
    		},
    		p: noop,
    		i: noop,
    		o: noop,
    		d: function destroy(detaching) {
    			if (detaching) detach_dev(div);
    		}
    	};

    	dispatch_dev("SvelteRegisterBlock", {
    		block,
    		id: create_if_block_3$2.name,
    		type: "if",
    		source: "(283:12) {#if friendshipStatusFull.senderUsername === user.username}",
    		ctx
    	});

    	return block;
    }

    // (287:14) <Button type="secondary" on:click={() => acceptFriendRequest(friendshipStatusFull.id)}>
    function create_default_slot_2(ctx) {
    	let t;

    	const block = {
    		c: function create() {
    			t = text("Accept Friend Request");
    		},
    		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: "(287:14) <Button type=\\\"secondary\\\" on:click={() => acceptFriendRequest(friendshipStatusFull.id)}>",
    		ctx
    	});

    	return block;
    }

    // (288:14) <Button on:click={() => declineFriendRequest(friendshipStatusFull.id)}>
    function create_default_slot_1(ctx) {
    	let t;

    	const block = {
    		c: function create() {
    			t = text("Decline Friend Request");
    		},
    		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: "(288:14) <Button on:click={() => declineFriendRequest(friendshipStatusFull.id)}>",
    		ctx
    	});

    	return block;
    }

    // (290:12) <Button on:click={() => blockAFriend(friendshipStatusFull.id)}>
    function create_default_slot(ctx) {
    	let t;

    	const block = {
    		c: function create() {
    			t = text("Block 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.name,
    		type: "slot",
    		source: "(290:12) <Button on:click={() => blockAFriend(friendshipStatusFull.id)}>",
    		ctx
    	});

    	return block;
    }

    function create_fragment$a(ctx) {
    	let div2;
    	let div0;
    	let tabs;
    	let t0;
    	let t1;
    	let div1;
    	let current_block_type_index;
    	let if_block1;
    	let current;

    	tabs = new Tabs({
    			props: {
    				items: /*tabItems*/ ctx[8],
    				activeItem: /*activeTabItem*/ ctx[7],
    				size: "small"
    			},
    			$$inline: true
    		});

    	tabs.$on("tabChange", /*switchTab*/ ctx[17]);

    	function select_block_type(ctx, dirty) {
    		if (/*activeTabItem*/ ctx[7] === 'All Users' && /*allUsers*/ ctx[1] !== undefined) return create_if_block_9$1;
    		if (/*activeTabItem*/ ctx[7] === 'My Friends' && /*myFriendships*/ ctx[2] !== undefined) return create_if_block_11$1;
    		if (/*activeTabItem*/ ctx[7] === 'Friend Requests' && /*requestsRecieved*/ ctx[3] !== undefined) return create_if_block_15;
    		if (/*activeTabItem*/ ctx[7] === 'Blocked Users' && /*blockedUsers*/ ctx[4] !== undefined) return create_if_block_17;
    	}

    	let current_block_type = select_block_type(ctx);
    	let if_block0 = current_block_type && current_block_type(ctx);
    	const if_block_creators = [create_if_block$5, create_else_block_3];
    	const if_blocks = [];

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

    	current_block_type_index = select_block_type_2(ctx);
    	if_block1 = if_blocks[current_block_type_index] = if_block_creators[current_block_type_index](ctx);

    	const block = {
    		c: function create() {
    			div2 = element("div");
    			div0 = element("div");
    			create_component(tabs.$$.fragment);
    			t0 = space();
    			if (if_block0) if_block0.c();
    			t1 = space();
    			div1 = element("div");
    			if_block1.c();
    			attr_dev(div0, "class", "sidebar-list svelte-xor3eg");
    			add_location(div0, file$9, 211, 2, 8592);
    			attr_dev(div1, "class", "main-display svelte-xor3eg");
    			add_location(div1, file$9, 274, 2, 11734);
    			attr_dev(div2, "class", "top-grid svelte-xor3eg");
    			add_location(div2, file$9, 204, 0, 8357);
    		},
    		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);
    			mount_component(tabs, div0, null);
    			append_dev(div0, t0);
    			if (if_block0) if_block0.m(div0, null);
    			append_dev(div2, t1);
    			append_dev(div2, div1);
    			if_blocks[current_block_type_index].m(div1, null);
    			current = true;
    		},
    		p: function update(ctx, dirty) {
    			const tabs_changes = {};
    			if (dirty[0] & /*activeTabItem*/ 128) tabs_changes.activeItem = /*activeTabItem*/ ctx[7];
    			tabs.$set(tabs_changes);

    			if (current_block_type === (current_block_type = select_block_type(ctx)) && if_block0) {
    				if_block0.p(ctx, dirty);
    			} else {
    				if (if_block0) if_block0.d(1);
    				if_block0 = current_block_type && current_block_type(ctx);

    				if (if_block0) {
    					if_block0.c();
    					if_block0.m(div0, null);
    				}
    			}

    			let previous_block_index = current_block_type_index;
    			current_block_type_index = select_block_type_2(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_block1 = if_blocks[current_block_type_index];

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

    				transition_in(if_block1, 1);
    				if_block1.m(div1, null);
    			}
    		},
    		i: function intro(local) {
    			if (current) return;
    			transition_in(tabs.$$.fragment, local);
    			transition_in(if_block1);
    			current = true;
    		},
    		o: function outro(local) {
    			transition_out(tabs.$$.fragment, local);
    			transition_out(if_block1);
    			current = false;
    		},
    		d: function destroy(detaching) {
    			if (detaching) detach_dev(div2);
    			destroy_component(tabs);

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

    			if_blocks[current_block_type_index].d();
    		}
    	};

    	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('ProfileFriends', slots, []);
    	let errors = { friendRequest: '' };
    	let set = { friendUsername: '' };
    	let user;
    	let allUsers;
    	let myFriendships;
    	let requestsMade, requestsRecieved;
    	let blockedUsers;
    	let usernameBeingViewed;
    	let friendshipStatusFull; // id, date, senderUsername, reveiverUsername, status

    	/**** Layout variables ****/
    	let tabItems = ['All Users', 'My Friends', 'Friend Requests', 'Blocked Users'];

    	let activeTabItem = 'All Users';

    	onMount(async () => {
    		// DO I ACTUALLY NEED TO ON MOUNT ALL THIS STUFF?
    		// ALSO I COULD JUST USE THE FUNCITONS I MADE...
    		// yea no idea what
    		// i mean do i fetch user? i will for now
    		$$invalidate(0, user = await fetch(`http://${'transcendance'}:${'8080'}/api/v2/user`).then(x => x.json()));

    		fetchAll();
    	}); // ok this shit works!
    	// const interval = setInterval(() => {
    	// 	fetchAll();
    	// }, 1000);

    	// return () => clearInterval(interval);
    	const fetchAll = async () => {
    		// no need to await i think it can load in the background
    		fetchAllUsers();

    		fetchMyFriendships();
    		fetchRequestsMade();
    		fetchRequestsReceived();
    		fetchBlockedUsers();
    	};

    	/*****  Fetch basic things  *****/
    	const fetchAllUsers = async () => {
    		$$invalidate(1, allUsers = await fetch(`http://${'transcendance'}:${'8080'}/api/v2/user/all`).then(x => x.json()));
    		console.log('got all users ');
    		console.log(Object.assign({}, allUsers));
    	};

    	// it's more like fetch friendships
    	// then i need to extract the users
    	const fetchMyFriendships = async () => {
    		$$invalidate(2, myFriendships = await fetch(`http://${'transcendance'}:${'8080'}/api/v2/network/myfriends`).then(x => x.json()));
    		console.log('got my friends ');
    		console.log(Object.assign({}, myFriendships));
    	};

    	const fetchRequestsMade = async () => {
    		requestsMade = await fetch(`http://${'transcendance'}:${'8080'}/api/v2/network/pending`).then(x => x.json());
    		console.log('got requests made ');
    		console.log(Object.assign({}, requestsMade));
    	};

    	const fetchRequestsReceived = async () => {
    		$$invalidate(3, requestsRecieved = await fetch(`http://${'transcendance'}:${'8080'}/api/v2/network/received`).then(x => x.json()));
    		console.log('got requests received ');
    		console.log(Object.assign({}, requestsRecieved));
    	};

    	const fetchBlockedUsers = async () => {
    		$$invalidate(4, blockedUsers = await fetch(`http://${'transcendance'}:${'8080'}/api/v2/network/blocked`).then(x => x.json()));
    		console.log('got blocked users, is it empty?');
    		console.log(Object.assign({}, blockedUsers));
    		console.log(Object.keys(blockedUsers));
    	};

    	/**** END OF MAIN FETCH ****/
    	// returns everything but BLOCKED
    	const fetchFriendshipFull = async aUsername => {
    		console.log('fetch friendship from a username');
    		console.log(aUsername);
    		$$invalidate(6, friendshipStatusFull = await fetch(`http://${'transcendance'}:${'8080'}/api/v2/network/myfriends?username=${aUsername}`).then(x => x.json()));
    		console.log(Object.assign({}, friendshipStatusFull));
    	};

    	const sendFriendRequest = async aUsername => {
    		console.log('sending a friend request');
    		console.log(aUsername);

    		const resp = await fetch(`http://${'transcendance'}:${'8080'}/api/v2/network/relations`, {
    			method: "POST",
    			headers: { 'Content-Type': 'application/json' },
    			body: JSON.stringify({
    				"receiverUsername": aUsername,
    				"status": "R"
    			})
    		}).then(x => x.json());

    		// .catch( x => console.log({...x}))
    		// "status": "A"
    		console.log(Object.assign({}, resp));

    		fetchFriendshipFull(aUsername);
    	};

    	const viewAUser = async aUsername => {
    		console.log('Profile Friend updating userBeingViewed');
    		$$invalidate(5, usernameBeingViewed = aUsername);

    		// friendshipStatusFull = undefined;
    		// id, date, senderUsername, reveiverUsername, status
    		await fetchFriendshipFull(aUsername);

    		console.log('Friendship Status Full');
    		console.log(Object.assign({}, friendshipStatusFull));
    	};

    	const acceptFriendRequest = async relationshipId => {
    		console.log('accept friend request');
    		const resp = await fetch(`http://${'transcendance'}:${'8080'}/api/v2/network/relations/${relationshipId}/accept`, { method: "PATCH" }).then(x => x.json());

    		// maybe not the most robust things, not super reusable cuz it depends on outside vars but works for now...
    		console.log('accepted friend request, now response');

    		console.log(Object.assign({}, resp));
    		await fetchFriendshipFull(usernameBeingViewed);

    		// will this make it reload? C'est un peu bourain... do i even need it?
    		$$invalidate(7, activeTabItem);
    	};

    	const declineFriendRequest = async relationshipId => {
    		console.log('decline friend request');
    		const resp = await fetch(`http://${'transcendance'}:${'8080'}/api/v2/network/relations/${relationshipId}/decline`, { method: "PATCH" }).then(x => x.json());

    		// maybe not the most robust things, not super reusable cuz it depends on outside vars but works for now...
    		console.log('declined friend request, now response');

    		console.log(Object.assign({}, resp));
    		await fetchFriendshipFull(usernameBeingViewed);
    	};

    	const unfriend = async relationshipId => {
    		console.log('Unfriend');
    		await fetch(`http://${'transcendance'}:${'8080'}/api/v2/network/relations/${relationshipId}`, { method: "DELETE" }).then(x => x.json());

    		// friendshipStatusFull = undefined;
    		// OR
    		await fetchFriendshipFull(usernameBeingViewed);

    		if (Object.keys(friendshipStatusFull).length === 0) $$invalidate(6, friendshipStatusFull = undefined);

    		// will this make it reload? C'est un peu bourain... do i even need it?
    		$$invalidate(7, activeTabItem);
    	};

    	const blockANonFriendUser = async aUsername => {
    		console.log('Block a non friend user, their username');
    		console.log(aUsername);

    		sentFriendRequest = await fetch(`http://${'transcendance'}:${'8080'}/api/v2/network/relations`, {
    			method: "POST",
    			headers: { 'Content-Type': 'application/json' },
    			body: JSON.stringify({
    				"receiverUsername": aUsername,
    				"status": "B"
    			})
    		}).then(x => x.json());

    		await fetchBlockedUsers();
    		await fetchAllUsers();
    		$$invalidate(5, usernameBeingViewed = undefined);
    		$$invalidate(6, friendshipStatusFull = undefined);

    		// will this make it reload?
    		$$invalidate(7, activeTabItem);
    	};

    	const blockAFriend = async relationshipId => {
    		console.log('blocking a friend, the relationshipID');
    		console.log(relationshipId);
    		const resp = await fetch(`http://${'transcendance'}:${'8080'}/api/v2/network/relations/${relationshipId}/block`, { method: "PATCH" }).then(x => x.json());
    		console.log('blocked a user response');
    		console.log(Object.assign({}, resp));
    		await fetchBlockedUsers();
    		await fetchAllUsers();
    		$$invalidate(5, usernameBeingViewed = undefined);
    		$$invalidate(6, friendshipStatusFull = undefined);

    		// will this make it reload?
    		$$invalidate(7, activeTabItem);
    	};

    	const unblockAUser = async relationshipId => {
    		// it's basically the same as unfriending someone cuz unfriending them means the relationship is deleted
    		await unfriend(relationshipId);
    	};

    	const switchTab = async e => {
    		$$invalidate(7, activeTabItem = e.detail);

    		if (activeTabItem === 'All Users') {
    			await fetchAllUsers();
    		} else if (activeTabItem === 'My Friends') {
    			await fetchMyFriendships();
    		} else if (activeTabItem === 'Friend Requests') {
    			await fetchRequestsReceived();
    		} else if (activeTabItem === 'Blocked Users') {
    			await fetchBlockedUsers();
    			console.log('blocked users: ');
    			console.log(Object.assign({}, blockedUsers));
    		}
    	};

    	const writable_props = [];

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

    	const click_handler = aUser => viewAUser(aUser.username);
    	const click_handler_1 = aFriendship => viewAUser(aFriendship.senderUsername);
    	const click_handler_2 = aFriendship => viewAUser(aFriendship.receiverUsername);
    	const click_handler_3 = aUser => viewAUser(aUser.senderUsername);
    	const click_handler_4 = aUser => viewAUser(aUser.receiverUsername);
    	const click_handler_5 = () => acceptFriendRequest(friendshipStatusFull.id);
    	const click_handler_6 = () => declineFriendRequest(friendshipStatusFull.id);
    	const click_handler_7 = () => blockAFriend(friendshipStatusFull.id);
    	const click_handler_8 = () => unfriend(friendshipStatusFull.id);
    	const click_handler_9 = () => blockAFriend(friendshipStatusFull.id);
    	const click_handler_10 = () => acceptFriendRequest(friendshipStatusFull.id);
    	const click_handler_11 = () => blockAFriend(friendshipStatusFull.id);
    	const click_handler_12 = () => unblockAUser(friendshipStatusFull.id);
    	const click_handler_13 = () => sendFriendRequest(usernameBeingViewed);
    	const click_handler_14 = () => blockANonFriendUser(usernameBeingViewed);

    	$$self.$capture_state = () => ({
    		onMount,
    		Button,
    		DisplayAUser,
    		Tabs,
    		errors,
    		set,
    		user,
    		allUsers,
    		myFriendships,
    		requestsMade,
    		requestsRecieved,
    		blockedUsers,
    		usernameBeingViewed,
    		friendshipStatusFull,
    		tabItems,
    		activeTabItem,
    		fetchAll,
    		fetchAllUsers,
    		fetchMyFriendships,
    		fetchRequestsMade,
    		fetchRequestsReceived,
    		fetchBlockedUsers,
    		fetchFriendshipFull,
    		sendFriendRequest,
    		viewAUser,
    		acceptFriendRequest,
    		declineFriendRequest,
    		unfriend,
    		blockANonFriendUser,
    		blockAFriend,
    		unblockAUser,
    		switchTab
    	});

    	$$self.$inject_state = $$props => {
    		if ('errors' in $$props) errors = $$props.errors;
    		if ('set' in $$props) set = $$props.set;
    		if ('user' in $$props) $$invalidate(0, user = $$props.user);
    		if ('allUsers' in $$props) $$invalidate(1, allUsers = $$props.allUsers);
    		if ('myFriendships' in $$props) $$invalidate(2, myFriendships = $$props.myFriendships);
    		if ('requestsMade' in $$props) requestsMade = $$props.requestsMade;
    		if ('requestsRecieved' in $$props) $$invalidate(3, requestsRecieved = $$props.requestsRecieved);
    		if ('blockedUsers' in $$props) $$invalidate(4, blockedUsers = $$props.blockedUsers);
    		if ('usernameBeingViewed' in $$props) $$invalidate(5, usernameBeingViewed = $$props.usernameBeingViewed);
    		if ('friendshipStatusFull' in $$props) $$invalidate(6, friendshipStatusFull = $$props.friendshipStatusFull);
    		if ('tabItems' in $$props) $$invalidate(8, tabItems = $$props.tabItems);
    		if ('activeTabItem' in $$props) $$invalidate(7, activeTabItem = $$props.activeTabItem);
    	};

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

    	return [
    		user,
    		allUsers,
    		myFriendships,
    		requestsRecieved,
    		blockedUsers,
    		usernameBeingViewed,
    		friendshipStatusFull,
    		activeTabItem,
    		tabItems,
    		sendFriendRequest,
    		viewAUser,
    		acceptFriendRequest,
    		declineFriendRequest,
    		unfriend,
    		blockANonFriendUser,
    		blockAFriend,
    		unblockAUser,
    		switchTab,
    		click_handler,
    		click_handler_1,
    		click_handler_2,
    		click_handler_3,
    		click_handler_4,
    		click_handler_5,
    		click_handler_6,
    		click_handler_7,
    		click_handler_8,
    		click_handler_9,
    		click_handler_10,
    		click_handler_11,
    		click_handler_12,
    		click_handler_13,
    		click_handler_14
    	];
    }

    class ProfileFriends extends SvelteComponentDev {
    	constructor(options) {
    		super(options);
    		init$2(this, options, instance$a, create_fragment$a, safe_not_equal, {}, null, [-1, -1]);

    		dispatch_dev("SvelteRegisterComponent", {
    			component: this,
    			tagName: "ProfileFriends",
    			options,
    			id: create_fragment$a.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$8 = "src/pages/profile/ProfilePage.svelte";

    function create_fragment$9(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$8, 7, 0, 201);
    		},
    		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$9.name,
    		type: "component",
    		source: "",
    		ctx
    	});

    	return block;
    }

    function instance$9($$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$2(this, options, instance$9, create_fragment$9, safe_not_equal, {});

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

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

    function create_fragment$8(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$7, 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$8.name,
    		type: "component",
    		source: "",
    		ctx
    	});

    	return block;
    }

    function instance$8($$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$2(this, options, instance$8, create_fragment$8, safe_not_equal, {});

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

    /* src/pages/SplashPage.svelte generated by Svelte v3.53.1 */

    const { console: console_1$4 } = globals;
    const file$6 = "src/pages/SplashPage.svelte";

    // (46:4) {:else}
    function create_else_block$3(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$6, 46, 6, 1943);
    		},
    		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$3.name,
    		type: "else",
    		source: "(46:4) {:else}",
    		ctx
    	});

    	return block;
    }

    // (43:4) {#if user && user.username}
    function create_if_block$4(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$6, 43, 6, 1826);
    			attr_dev(div1, "class", "svelte-7t4byu");
    			add_location(div1, file$6, 44, 6, 1889);
    		},
    		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$4.name,
    		type: "if",
    		source: "(43:4) {#if user && user.username}",
    		ctx
    	});

    	return block;
    }

    function create_fragment$7(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$4;
    		return create_else_block$3;
    	}

    	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$6, 39, 2, 1721);
    			attr_dev(nav, "class", "svelte-7t4byu");
    			add_location(nav, file$6, 40, 2, 1744);
    			attr_dev(div0, "class", "svelte-7t4byu");
    			add_location(div0, file$6, 50, 4, 2007);
    			attr_dev(div1, "class", "svelte-7t4byu");
    			add_location(div1, file$6, 51, 4, 2033);
    			attr_dev(h2, "class", "svelte-7t4byu");
    			add_location(h2, file$6, 49, 2, 1998);
    			attr_dev(header, "class", "grid-container svelte-7t4byu");
    			add_location(header, file$6, 38, 0, 1687);
    		},
    		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$7.name,
    		type: "component",
    		source: "",
    		ctx
    	});

    	return block;
    }

    function instance$7($$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$4.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$2(this, options, instance$7, create_fragment$7, safe_not_equal, {});

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

    /* src/pages/TwoFactorAuthentication.svelte generated by Svelte v3.53.1 */

    const { console: console_1$3 } = globals;
    const file$5 = "src/pages/TwoFactorAuthentication.svelte";

    // (56: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$5, 56, 4, 1777);
    		},
    		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: "(56:2) {:catch}",
    		ctx
    	});

    	return block;
    }

    // (43: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$3(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$1();
    			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$5, 44, 4, 1300);
    			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$5, 46, 6, 1452);
    			attr_dev(button, "type", "submit");
    			add_location(button, file$5, 47, 6, 1534);
    			attr_dev(form, "class", "svelte-1cznfcz");
    			add_location(form, file$5, 45, 4, 1401);
    		},
    		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$3(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: "(43:2) {:then data}",
    		ctx
    	});

    	return block;
    }

    // (50:4) {#if wrongCode}
    function create_if_block$3(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$5, 51, 6, 1699);
    		},
    		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$3.name,
    		type: "if",
    		source: "(50:4) {#if wrongCode}",
    		ctx
    	});

    	return block;
    }

    // (41: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$5, 41, 4, 1214);
    		},
    		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: "(41:25)      <p>Please Wait...</p>   {:then data}",
    		ctx
    	});

    	return block;
    }

    function create_fragment$6(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$5, 38, 2, 1129);
    			add_location(p, file$5, 39, 2, 1152);
    			attr_dev(main, "class", "svelte-1cznfcz");
    			add_location(main, file$5, 37, 0, 1120);
    		},
    		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$6.name,
    		type: "component",
    		source: "",
    		ctx
    	});

    	return block;
    }

    function instance$6($$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$3.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$2(this, options, instance$6, create_fragment$6, safe_not_equal, {});

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

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

    function create_fragment$5(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$4, 4, 2, 98);
    			add_location(button, file$4, 5, 2, 143);
    			attr_dev(div, "class", "wrapper svelte-1q8uute");
    			add_location(div, file$4, 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$5.name,
    		type: "component",
    		source: "",
    		ctx
    	});

    	return block;
    }

    function instance$5($$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$2(this, options, instance$5, create_fragment$5, safe_not_equal, {});

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

    function cubicOut(t) {
        const f = t - 1.0;
        return f * f * f + 1.0;
    }

    function fly(node, { delay = 0, duration = 400, easing = cubicOut, x = 0, y = 0, opacity = 0 } = {}) {
        const style = getComputedStyle(node);
        const target_opacity = +style.opacity;
        const transform = style.transform === 'none' ? '' : style.transform;
        const od = target_opacity * (1 - opacity);
        return {
            delay,
            duration,
            easing,
            css: (t, u) => `
			transform: ${transform} translate(${(1 - t) * x}px, ${(1 - t) * y}px);
			opacity: ${target_opacity - (od * u)}`
        };
    }

    const CanvasWidth = 1500;
    const CanvasRatio = 1.66666;
    /* ratio 5/3 (1.66) */
    const w = CanvasWidth;
    const h = CanvasWidth / CanvasRatio;
    const w_mid = Math.floor(w / 2);
    const h_mid = Math.floor(h / 2);
    const pw = Math.floor(w * 0.017);
    const ph = pw * 6;
    const ballSize = pw;
    const wallSize = Math.floor(w * 0.01);
    const racketSpeed = Math.floor(w * 0.60); // pixel per second
    const ballSpeed = Math.floor(w * 0.55); // pixel per second
    const ballSpeedIncrease = Math.floor(ballSpeed * 0.05); // pixel per second
    const matchStartDelay = 3000; // millisecond
    // Game Variantes
    const multiBallsCount = 3;
    const movingWallPosMax = Math.floor(w * 0.12);
    const movingWallSpeed = Math.floor(w * 0.08);
    // for testing, force gameSession.id in wsServer.ts->createGameSession()

    const midLineSize = Math.floor(w / 150);
    const scoreSize = Math.floor(w / 16);
    const gridSize = Math.floor(w / 500);
    // min interval on Firefox seems to be 15. Chrome can go lower.
    const handleInputIntervalMS = 15; // millisecond
    const gameLoopIntervalMS = 15; // millisecond
    const drawLoopIntervalMS = 15; // millisecond
    const fixedDeltaTime = gameLoopIntervalMS / 1000; // second
    const soundRobloxVolume = 0.3; // between 0 and 1

    var EventTypes;
    (function (EventTypes) {
        // Class Implemented
        EventTypes[EventTypes["gameUpdate"] = 1] = "gameUpdate";
        EventTypes[EventTypes["scoreUpdate"] = 2] = "scoreUpdate";
        EventTypes[EventTypes["matchEnd"] = 3] = "matchEnd";
        EventTypes[EventTypes["assignId"] = 4] = "assignId";
        EventTypes[EventTypes["matchmakingComplete"] = 5] = "matchmakingComplete";
        EventTypes[EventTypes["error"] = 6] = "error";
        // Generic
        EventTypes[EventTypes["matchmakingInProgress"] = 7] = "matchmakingInProgress";
        EventTypes[EventTypes["matchStart"] = 8] = "matchStart";
        EventTypes[EventTypes["matchAbort"] = 9] = "matchAbort";
        EventTypes[EventTypes["matchNewRound"] = 10] = "matchNewRound";
        EventTypes[EventTypes["matchPause"] = 11] = "matchPause";
        EventTypes[EventTypes["matchResume"] = 12] = "matchResume";
        // Client
        EventTypes[EventTypes["clientAnnounce"] = 13] = "clientAnnounce";
        EventTypes[EventTypes["clientPlayerReady"] = 14] = "clientPlayerReady";
        EventTypes[EventTypes["clientSpectatorReady"] = 15] = "clientSpectatorReady";
        EventTypes[EventTypes["clientInput"] = 16] = "clientInput";
    })(EventTypes || (EventTypes = {}));
    var InputEnum;
    (function (InputEnum) {
        InputEnum[InputEnum["noInput"] = 0] = "noInput";
        InputEnum[InputEnum["up"] = 1] = "up";
        InputEnum[InputEnum["down"] = 2] = "down";
    })(InputEnum || (InputEnum = {}));
    var PlayerSide;
    (function (PlayerSide) {
        PlayerSide[PlayerSide["noSide"] = 0] = "noSide";
        PlayerSide[PlayerSide["left"] = 1] = "left";
        PlayerSide[PlayerSide["right"] = 2] = "right";
    })(PlayerSide || (PlayerSide = {}));
    var ClientRole;
    (function (ClientRole) {
        ClientRole[ClientRole["player"] = 1] = "player";
        ClientRole[ClientRole["spectator"] = 2] = "spectator";
    })(ClientRole || (ClientRole = {}));
    var MatchOptions;
    (function (MatchOptions) {
        // binary flags, can be mixed
        MatchOptions[MatchOptions["noOption"] = 0] = "noOption";
        MatchOptions[MatchOptions["multiBalls"] = 1] = "multiBalls";
        MatchOptions[MatchOptions["movingWalls"] = 2] = "movingWalls";
    })(MatchOptions || (MatchOptions = {}));

    let pong$1;
    let gc;
    let matchOptions = MatchOptions.noOption;
    function setPong(value) {
        pong$1 = value;
    }
    function setGc(value) {
        gc = value;
    }
    function setMatchOptions(value) {
        matchOptions = value;
    }
    let startFunction;
    function setStartFunction(value) {
        startFunction = value;
    }

    /* From Client */
    class ClientEvent {
        constructor(type = 0) {
            this.type = type;
        }
    }
    class ClientAnnounce extends ClientEvent {
        constructor(role) {
            super(EventTypes.clientAnnounce);
            this.role = role;
        }
    }
    class ClientAnnouncePlayer extends ClientAnnounce {
        constructor(matchOptions, token, username, privateMatch = false, playerTwoUsername, isInvitedPerson) {
            super(ClientRole.player);
            this.matchOptions = matchOptions;
            this.token = token;
            this.username = username;
            this.privateMatch = privateMatch;
            if (isInvitedPerson) {
                this.isInvitedPerson = isInvitedPerson;
            }
            if (playerTwoUsername) {
                this.playerTwoUsername = playerTwoUsername;
            }
        }
    }
    class ClientAnnounceSpectator extends ClientAnnounce {
        constructor(gameSessionId) {
            super(ClientRole.spectator);
            this.gameSessionId = gameSessionId;
        }
    }
    class EventInput extends ClientEvent {
        constructor(input = InputEnum.noInput, id = 0) {
            super(EventTypes.clientInput);
            this.input = input;
            this.id = id;
        }
    }

    /*
        before game
    */
    function error(message) {
        console.log("msg.error()");
        pong$1.clear();
        const text = "error: " + message;
        console.log(text);
        gc.text2.clear();
        gc.text2.pos.assign(w * 0.2, h * 0.5);
        gc.text2.text = text;
        gc.text2.update();
    }
    function matchmaking() {
        const text = "searching...";
        console.log(text);
        gc.text1.clear();
        gc.text1.pos.assign(w * 0.2, h * 0.5);
        gc.text1.text = text;
        gc.text1.update();
    }
    function matchmakingComplete() {
        const text = "match found !";
        console.log(text);
        gc.text1.clear();
        gc.text1.pos.assign(w * 0.15, h * 0.5);
        gc.text1.text = text;
        gc.text1.update();
    }
    function matchAbort() {
        const text = "match abort";
        console.log(text);
        gc.text1.clear();
        gc.text1.pos.assign(w * 0.15, h * 0.5);
        gc.text1.text = text;
        gc.text1.update();
        setTimeout(() => {
            gc.text2.pos.assign(w * 0.44, h * 0.6);
            gc.text2.text = "pardon =(";
            const oriSize = gc.text2.size;
            gc.text2.size = w * 0.025;
            gc.text2.update();
            gc.text2.size = oriSize;
        }, 2500);
    }
    /*
        in game
    */
    function win() {
        gc.text1.pos.assign(w * 0.415, h * 0.5);
        gc.text1.text = "WIN";
    }
    function lose() {
        gc.text1.pos.assign(w * 0.383, h * 0.5);
        gc.text1.text = "LOSE";
    }
    function forfeit(playerSide) {
        if (playerSide === PlayerSide.left) {
            gc.text2.pos.assign(w * 0.65, h * 0.42);
            gc.text3.pos.assign(w * 0.65, h * 0.52);
        }
        else {
            gc.text2.pos.assign(w * 0.09, h * 0.42);
            gc.text3.pos.assign(w * 0.09, h * 0.52);
        }
        setTimeout(() => {
            gc.text2.text = "par forfait";
        }, 1500);
        setTimeout(() => {
            gc.text3.text = "calme ta joie";
        }, 3500);
    }

    // export const soundPongArr: HTMLAudioElement[] = [];
    let muteFlag;
    const soundPongArr = [];
    let soundRoblox;
    function initAudio(sound) {
        soundPongArr.length = 0;
        soundRoblox = null;
        if (sound === "on") {
            muteFlag = false;
        }
        else {
            muteFlag = true;
            return; // Could be changed
            /*
                Stop initAudio() here because in the current state of the game
                there no way to change muteFlag after game start.
                If it becomes an option,
                we should continue initAudio() regardless of the muteFlag.
            */
        }
        soundPongArr.push(new Audio("http://" + 'transcendance' + ":" + '8080' + "/sound/pong/" + 1 + ".ogg"));
        soundPongArr.push(new Audio("http://" + 'transcendance' + ":" + '8080' + "/sound/pong/" + 2 + ".ogg"));
        soundPongArr.forEach((value) => {
            value.volume = soundRobloxVolume;
            value.muted = muteFlag;
        });
        soundRoblox = new Audio("http://" + 'transcendance' + ":" + '8080' + "/sound/roblox-oof.ogg");
        soundRoblox.volume = soundRobloxVolume;
        soundRoblox.muted = muteFlag;
    }

    function random(min = 0, max = 1) {
        return Math.random() * (max - min) + min;
    }

    function countdown(count, step, callback, endCallback) {
        const timeoutArr = [];
        if (endCallback) {
            timeoutArr.push(window.setTimeout(endCallback, count));
        }
        let reverseCount = 0;
        while (count > 0) {
            timeoutArr.push(window.setTimeout((count) => {
                console.log("countdown ", count);
                callback(count);
            }, reverseCount, count));
            count -= step;
            reverseCount += step;
        }
        return timeoutArr;
    }

    class Vector {
        constructor(x = 0, y = 0) {
            this.x = x;
            this.y = y;
        }
        assign(x, y) {
            this.x = x;
            this.y = y;
        }
        normalized() {
            const normalizationFactor = Math.abs(this.x) + Math.abs(this.y);
            return new Vector(this.x / normalizationFactor, this.y / normalizationFactor);
        }
    }
    class VectorInteger extends Vector {
    }
    /*
    export class VectorInteger {
        // private _x: number = 0;
        // private _y: number = 0;
        // constructor(x: number = 0, y: number = 0) {
        // 	this._x = x;
        // 	this._y = y;
        // }
        // get x(): number {
        // 	return this._x;
        // }
        // set x(v: number) {
        // 	// this._x = Math.floor(v);
        // 	this._x = v;
        // }
        // get y(): number {
        // 	return this._y;
        // }
        // set y(v: number) {
        // 	// this._y = Math.floor(v);
        // 	this._y = v;
        // }
    }
    */

    const gameState = {
        matchStarted: false,
        matchEnded: false,
        matchAborted: false
    };
    function resetGameState() {
        gameState.matchStarted = false;
        gameState.matchEnded = false;
        gameState.matchAborted = false;
    }
    class ClientInfo {
        constructor() {
            this.id = "";
        }
    }
    class ClientInfoSpectator {
    }
    const wsUrl = "ws://" + 'transcendance' + ":" + '8080' + "/pong";
    let socket;
    const clientInfo = new ClientInfo();
    const clientInfoSpectator = new ClientInfoSpectator(); // WIP, could refactor this
    function initWebSocket(options, token, username, privateMatch = false, playerTwoUsername, isInvitedPerson) {
        socket = new WebSocket(wsUrl, "json");
        console.log("Infos from ws.ts : options => " + options + " token => " + token + " username => " + username + " priavte match => " + privateMatch
            + " player two => " + playerTwoUsername);
        socket.addEventListener("open", (event) => {
            if (privateMatch) {
                socket.send(JSON.stringify(new ClientAnnouncePlayer(options, token, username, privateMatch, playerTwoUsername, isInvitedPerson)));
            }
            else {
                socket.send(JSON.stringify(new ClientAnnouncePlayer(options, token, username)));
            }
        });
        // socket.addEventListener("message", logListener); // for testing purpose
        socket.addEventListener("message", errorListener);
        socket.addEventListener("message", preMatchListener);
    }
    function errorListener(event) {
        const data = JSON.parse(event.data);
        if (data.type === EventTypes.error) {
            console.log("actual Error");
            error(data.message);
        }
    }
    function preMatchListener(event) {
        const data = JSON.parse(event.data);
        switch (data.type) {
            case EventTypes.assignId:
                clientInfo.id = data.id;
                break;
            case EventTypes.matchmakingInProgress:
                matchmaking();
                break;
            case EventTypes.matchmakingComplete:
                clientInfo.side = data.side;
                if (clientInfo.side === PlayerSide.left) {
                    clientInfo.racket = gc.playerLeft;
                    clientInfo.opponent = gc.playerRight;
                }
                else if (clientInfo.side === PlayerSide.right) {
                    clientInfo.racket = gc.playerRight;
                    clientInfo.opponent = gc.playerLeft;
                }
                clientInfo.opponentNextPos = new VectorInteger(clientInfo.opponent.pos.x, clientInfo.opponent.pos.y);
                clientInfo.racket.color = "darkgreen"; // for testing purpose
                socket.send(JSON.stringify(new ClientEvent(EventTypes.clientPlayerReady))); // TODO: set an interval/timeout to resend until matchStart response (in case of network problem)
                matchmakingComplete();
                break;
            case EventTypes.matchStart:
                gameState.matchStarted = true;
                socket.removeEventListener("message", preMatchListener);
                socket.addEventListener("message", inGameListener);
                startFunction();
                break;
            case EventTypes.matchAbort:
                gameState.matchAborted = true;
                socket.removeEventListener("message", preMatchListener);
                matchAbort();
                break;
        }
    }
    function inGameListener(event) {
        const data = JSON.parse(event.data);
        switch (data.type) {
            case EventTypes.gameUpdate:
                // setTimeout(gameUpdate, 500, data as ev.EventGameUpdate); // artificial latency for testing purpose
                gameUpdate(data);
                break;
            case EventTypes.scoreUpdate:
                scoreUpdate(data);
                break;
            case EventTypes.matchEnd:
                matchEnd(data);
                break;
        }
    }
    function gameUpdate(data) {
        console.log("gameUpdate");
        if (matchOptions & MatchOptions.movingWalls) {
            gc.wallTop.pos.y = data.wallTop.y;
            gc.wallBottom.pos.y = data.wallBottom.y;
        }
        data.ballsArr.forEach((ball, i) => {
            gc.ballsArr[i].pos.assign(ball.x, ball.y);
            gc.ballsArr[i].dir.assign(ball.dirX, ball.dirY);
            gc.ballsArr[i].speed = ball.speed;
        });
        /* // Equivalent to
        gc.ballsArr.forEach((ball, i) => {
            ball.pos.assign(data.ballsArr[i].x, data.ballsArr[i].y);
            ball.dir.assign(data.ballsArr[i].dirX, data.ballsArr[i].dirY);
            ball.speed = data.ballsArr[i].speed;
        }); */
        const predictionPos = new VectorInteger(clientInfo.racket.pos.x, clientInfo.racket.pos.y); // debug
        if (clientInfo.side === PlayerSide.left) {
            clientInfo.racket.pos.assign(clientInfo.racket.pos.x, data.playerLeft.y);
        }
        else if (clientInfo.side === PlayerSide.right) {
            clientInfo.racket.pos.assign(clientInfo.racket.pos.x, data.playerRight.y);
        }
        // interpolation
        clientInfo.opponent.pos.assign(clientInfo.opponentNextPos.x, clientInfo.opponentNextPos.y);
        if (clientInfo.side === PlayerSide.left) {
            clientInfo.opponentNextPos.assign(clientInfo.opponent.pos.x, data.playerRight.y);
        }
        else if (clientInfo.side === PlayerSide.right) {
            clientInfo.opponentNextPos.assign(clientInfo.opponent.pos.x, data.playerLeft.y);
        }
        clientInfo.opponent.dir = new Vector(clientInfo.opponentNextPos.x - clientInfo.opponent.pos.x, clientInfo.opponentNextPos.y - clientInfo.opponent.pos.y);
        if (Math.abs(clientInfo.opponent.dir.x) + Math.abs(clientInfo.opponent.dir.y) !== 0) {
            clientInfo.opponent.dir = clientInfo.opponent.dir.normalized();
        }
        // server reconciliation
        repeatInput(data.lastInputId);
        // debug
        if (clientInfo.racket.pos.y > predictionPos.y + 1
            || clientInfo.racket.pos.y < predictionPos.y - 1) {
            console.log(`Reconciliation error:
			server y:         ${data.playerLeft.y}
			reconciliation y: ${clientInfo.racket.pos.y}
			prediction y:     ${predictionPos.y}`);
        }
    }
    function scoreUpdate(data) {
        // console.log("scoreUpdate");
        if (!muteFlag) {
            if (clientInfo.side === PlayerSide.left && data.scoreRight > gc.scoreRight.value) {
                soundRoblox.play();
            }
            else if (clientInfo.side === PlayerSide.right && data.scoreLeft > gc.scoreLeft.value) {
                soundRoblox.play();
            }
        }
        gc.scoreLeft.value = data.scoreLeft;
        gc.scoreRight.value = data.scoreRight;
    }
    function matchEnd(data) {
        gameState.matchEnded = true;
        socket.close();
        if (data.winner === clientInfo.side) {
            win();
            if (data.forfeit) {
                forfeit(clientInfo.side);
            }
        }
        else {
            lose();
        }
    }
    /* Spectator */
    function initWebSocketSpectator(gameSessionId) {
        socket = new WebSocket(wsUrl, "json");
        socket.addEventListener("open", (event) => {
            socket.send(JSON.stringify(new ClientAnnounceSpectator(gameSessionId)));
        });
        // socket.addEventListener("message", logListener); // for testing purpose
        socket.addEventListener("message", errorListener);
        socket.addEventListener("message", preMatchListenerSpectator);
        clientInfoSpectator.playerLeftNextPos = new VectorInteger(gc.playerLeft.pos.x, gc.playerLeft.pos.y);
        clientInfoSpectator.playerRightNextPos = new VectorInteger(gc.playerRight.pos.x, gc.playerRight.pos.y);
    }
    function preMatchListenerSpectator(event) {
        const data = JSON.parse(event.data);
        if (data.type === EventTypes.matchStart) {
            gameState.matchStarted = true;
            socket.removeEventListener("message", preMatchListenerSpectator);
            socket.addEventListener("message", inGameListenerSpectator);
            socket.send(JSON.stringify(new ClientEvent(EventTypes.clientSpectatorReady)));
            startFunction();
        }
    }
    function inGameListenerSpectator(event) {
        const data = JSON.parse(event.data);
        switch (data.type) {
            case EventTypes.gameUpdate:
                gameUpdateSpectator(data);
                break;
            case EventTypes.scoreUpdate:
                scoreUpdateSpectator(data);
                break;
            case EventTypes.matchEnd:
                matchEndSpectator();
                break;
        }
    }
    function gameUpdateSpectator(data) {
        console.log("gameUpdateSpectator");
        if (matchOptions & MatchOptions.movingWalls) {
            gc.wallTop.pos.y = data.wallTop.y;
            gc.wallBottom.pos.y = data.wallBottom.y;
        }
        data.ballsArr.forEach((ball, i) => {
            gc.ballsArr[i].pos.assign(ball.x, ball.y);
            gc.ballsArr[i].dir.assign(ball.dirX, ball.dirY);
            gc.ballsArr[i].speed = ball.speed;
        });
        // interpolation
        for (const racket of [gc.playerLeft, gc.playerRight]) {
            let nextPos;
            if (racket === gc.playerLeft) {
                nextPos = clientInfoSpectator.playerLeftNextPos;
            }
            else {
                nextPos = clientInfoSpectator.playerRightNextPos;
            }
            racket.pos.assign(nextPos.x, nextPos.y);
            if (racket === gc.playerLeft) {
                nextPos.assign(racket.pos.x, data.playerLeft.y);
            }
            else {
                nextPos.assign(racket.pos.x, data.playerRight.y);
            }
            racket.dir = new Vector(nextPos.x - racket.pos.x, nextPos.y - racket.pos.y);
            if (Math.abs(racket.dir.x) + Math.abs(racket.dir.y) !== 0) {
                racket.dir = racket.dir.normalized();
            }
        }
    }
    function scoreUpdateSpectator(data) {
        console.log("scoreUpdateSpectator");
        gc.scoreLeft.value = data.scoreLeft;
        gc.scoreRight.value = data.scoreRight;
    }
    function matchEndSpectator(data) {
        console.log("matchEndSpectator");
        gameState.matchEnded = true;
        socket.close();
    }

    class InputHistory {
        constructor(inputState, deltaTime) {
            this.input = inputState.input;
            this.id = inputState.id;
            this.deltaTime = deltaTime;
        }
    }

    let gridDisplay = false;
    let delta_time$1;
    const inputState = new EventInput();
    const inputHistoryArr = [];
    // test
    /* export function sendLoop()
    {
        socket.send(JSON.stringify(inputState));
    } */
    function handleInput() {
        /* last_time = actual_time;
        actual_time = Date.now();
        delta_time = (actual_time - last_time) / 1000; */
        delta_time$1 = fixedDeltaTime;
        // console.log(`delta_time: ${delta_time}`);
        inputState.id = Date.now();
        inputState.input = InputEnum.noInput;
        const keys = pong$1.keys;
        if (keys.length !== 0) {
            if (keys.indexOf("g") != -1) {
                gridDisplay = !gridDisplay;
                pong$1.deleteKey("g");
            }
            playerMovements(delta_time$1, keys);
        }
        if (!gameState.matchEnded) {
            socket.send(JSON.stringify(inputState));
        }
        // setTimeout(testInputDelay, 100);
        inputHistoryArr.push(new InputHistory(inputState, delta_time$1));
        // client prediction
        if (inputState.input !== InputEnum.noInput) {
            // TODO: peut-etre le mettre dans game loop ?
            // Attention au delta time dans ce cas !
            playerMovePrediction(delta_time$1, inputState.input);
        }
    }
    function playerMovements(delta, keys) {
        if (keys.indexOf("w") !== -1 || keys.indexOf("ArrowUp".toLowerCase()) !== -1) {
            if (keys.indexOf("s") === -1 && keys.indexOf("ArrowDown".toLowerCase()) === -1) {
                inputState.input = InputEnum.up;
            }
        }
        else if (keys.indexOf("s") !== -1 || keys.indexOf("ArrowDown".toLowerCase()) !== -1) {
            inputState.input = InputEnum.down;
        }
    }
    function playerMovePrediction(delta, input) {
        // client prediction
        const racket = clientInfo.racket;
        if (input === InputEnum.up) {
            racket.dir.y = -1;
        }
        else if (input === InputEnum.down) {
            racket.dir.y = 1;
        }
        racket.moveAndCollide(delta, [gc.wallTop, gc.wallBottom]);
    }
    function repeatInput(lastInputId) {
        // server reconciliation
        let i = inputHistoryArr.findIndex((value) => {
            if (value.id === lastInputId) {
                return true;
            }
            return false;
        });
        // console.log(`inputHistory total: ${inputHistoryArr.length}` );
        inputHistoryArr.splice(0, i + 1);
        // console.log(`inputHistory left: ${inputHistoryArr.length}` );
        inputHistoryArr.forEach((value) => {
            if (value.input !== InputEnum.noInput) {
                playerMovePrediction(value.deltaTime, value.input);
            }
        });
    }

    function wallsMovements(delta, gc) {
        const wallTop = gc.wallTop;
        const wallBottom = gc.wallBottom;
        if (wallTop.pos.y <= 0 || wallTop.pos.y >= movingWallPosMax) {
            wallTop.dir.y *= -1;
        }
        if (wallBottom.pos.y >= h - wallSize || wallBottom.pos.y <= h - movingWallPosMax) {
            wallBottom.dir.y *= -1;
        }
        wallTop.moveAndCollide(delta, [gc.playerLeft, gc.playerRight]);
        wallBottom.moveAndCollide(delta, [gc.playerLeft, gc.playerRight]);
    }

    let delta_time;
    function gameLoop() {
        /* last_time = actual_time;
        actual_time = Date.now();
        delta_time = (actual_time - last_time) / 1000; */
        delta_time = fixedDeltaTime;
        // console.log(`delta_gameLoop: ${delta_time}`);
        // interpolation
        // console.log(`dir.y: ${clientInfo.opponent.dir.y}, pos.y: ${clientInfo.opponent.pos.y}, opponentNextPos.y: ${clientInfo.opponentNextPos.y}`);
        if (clientInfo.opponent.dir.y != 0) {
            racketInterpolation(delta_time, clientInfo.opponent, clientInfo.opponentNextPos);
        }
        // client prediction
        gc.ballsArr.forEach((ball) => {
            ball.moveAndBounce(delta_time, [gc.wallTop, gc.wallBottom, gc.playerLeft, gc.playerRight]);
        });
        if (matchOptions & MatchOptions.movingWalls) {
            wallsMovements(delta_time, gc);
        }
    }
    function gameLoopSpectator() {
        delta_time = fixedDeltaTime;
        // interpolation
        if (gc.playerLeft.dir.y != 0) {
            racketInterpolation(delta_time, gc.playerLeft, clientInfoSpectator.playerLeftNextPos);
        }
        if (gc.playerRight.dir.y != 0) {
            racketInterpolation(delta_time, gc.playerRight, clientInfoSpectator.playerRightNextPos);
        }
        // client prediction
        gc.ballsArr.forEach((ball) => {
            ball.moveAndBounce(delta_time, [gc.wallTop, gc.wallBottom, gc.playerLeft, gc.playerRight]);
        });
        if (matchOptions & MatchOptions.movingWalls) {
            wallsMovements(delta_time, gc);
        }
    }
    function racketInterpolation(delta, racket, nextPos) {
        // interpolation
        racket.moveAndCollide(delta, [gc.wallTop, gc.wallBottom]);
        if ((racket.dir.y > 0 && racket.pos.y > nextPos.y)
            || (racket.dir.y < 0 && racket.pos.y < nextPos.y)) {
            racket.dir.y = 0;
            racket.pos.y = nextPos.y;
        }
    }

    function drawLoop() {
        pong$1.clear();
        if (gridDisplay) {
            drawGrid();
        }
        drawStatic();
        gc.text1.update();
        gc.text2.update();
        gc.text3.update();
        drawDynamic();
    }
    function drawDynamic() {
        gc.scoreLeft.update();
        gc.scoreRight.update();
        gc.playerLeft.update();
        gc.playerRight.update();
        gc.ballsArr.forEach((ball) => {
            ball.update();
        });
    }
    function drawStatic() {
        gc.midLine.update();
        gc.wallTop.update();
        gc.wallBottom.update();
    }
    function drawGrid() {
        gc.w_grid_mid.update();
        gc.w_grid_u1.update();
        gc.w_grid_d1.update();
        gc.h_grid_mid.update();
        gc.h_grid_u1.update();
        gc.h_grid_d1.update();
    }

    class InitOptions {
        constructor() {
            this.sound = "off";
            this.multi_balls = false;
            this.moving_walls = false;
            this.isSomeoneIsInvited = false;
            this.isInvitedPerson = false;
            this.playerOneUsername = "";
            this.playerTwoUsername = "";
        }
        reset(playerOneUsername) {
            this.sound = "off";
            this.multi_balls = false;
            this.moving_walls = false;
            this.isSomeoneIsInvited = false;
            this.isInvitedPerson = false;
            this.playerOneUsername = playerOneUsername;
            this.playerTwoUsername = "";
        }
    }

    class GameArea {
        constructor(canvas_id) {
            this.keys = [];
            this.handleInputInterval = 0;
            this.gameLoopInterval = 0;
            this.drawLoopInterval = 0;
            this.timeoutArr = [];
            const canvas = document.getElementById("game_area");
            if (canvas && canvas instanceof HTMLCanvasElement) {
                this.canvas = canvas;
            }
            else {
                console.log("GameArea init error, invalid canvas_id");
                return;
            }
            this.ctx = this.canvas.getContext("2d");
            this.canvas.width = CanvasWidth;
            this.canvas.height = CanvasWidth / CanvasRatio;
        }
        addKey(key) {
            key = key.toLowerCase();
            var i = this.keys.indexOf(key);
            if (i == -1)
                this.keys.push(key);
        }
        deleteKey(key) {
            key = key.toLowerCase();
            var i = this.keys.indexOf(key);
            if (i != -1) {
                this.keys.splice(i, 1);
            }
        }
        clear() {
            this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
        }
    }

    // conflict with Text
    class TextElem {
        constructor(pos, size, ctx, color, font = "Bit5x3") {
            this.text = "";
            // this.pos = Object.assign({}, pos); // create bug, Uncaught TypeError: X is not a function
            this.pos = new VectorInteger(pos.x, pos.y);
            this.size = size;
            this.ctx = ctx;
            this.color = color;
            this.font = font;
        }
        update() {
            this.ctx.font = this.size + "px" + " " + this.font;
            this.ctx.fillStyle = this.color;
            this.ctx.fillText(this.text, this.pos.x, this.pos.y);
        }
        clear() {
            // clear no very accurate for Text 
            // https://developer.mozilla.org/en-US/docs/Web/API/TextMetrics
            let textMetric = this.ctx.measureText(this.text);
            // console.log("textMetric.width = "+textMetric.width);
            // console.log("size = "+this.size);
            // console.log("x = "+this.pos.x);
            // console.log("y = "+this.pos.y);
            this.ctx.clearRect(this.pos.x - 1, this.pos.y - this.size + 1, textMetric.width, this.size);
            // +1 and -1 because float imprecision (and Math.floor() with VectorInteger dont work for the moment)
            // (or maybe its textMetric imprecision ?)
        }
    }
    class TextNumericValue extends TextElem {
        constructor(pos, size, ctx, color, font) {
            super(pos, size, ctx, color, font);
            this._value = 0;
        }
        get value() {
            return this._value;
        }
        set value(v) {
            this._value = v;
            this.text = v.toString();
        }
    }

    class Rectangle {
        constructor(pos, width, height) {
            this.pos = new VectorInteger(pos.x, pos.y);
            this.width = width;
            this.height = height;
        }
        collision(collider) {
            const thisLeft = this.pos.x;
            const thisRight = this.pos.x + this.width;
            const thisTop = this.pos.y;
            const thisBottom = this.pos.y + this.height;
            const colliderLeft = collider.pos.x;
            const colliderRight = collider.pos.x + collider.width;
            const colliderTop = collider.pos.y;
            const colliderBottom = collider.pos.y + collider.height;
            if ((thisBottom < colliderTop)
                || (thisTop > colliderBottom)
                || (thisRight < colliderLeft)
                || (thisLeft > colliderRight)) {
                return false;
            }
            else {
                return true;
            }
        }
    }
    class MovingRectangle extends Rectangle {
        constructor(pos, width, height, baseSpeed) {
            super(pos, width, height);
            this.dir = new Vector(0, 0);
            this.baseSpeed = baseSpeed;
            this.speed = baseSpeed;
        }
        move(delta) {
            // console.log(`delta: ${delta}, speed: ${this.speed}, speed*delta: ${this.speed * delta}`);
            // this.pos.x += Math.floor(this.dir.x * this.speed * delta);
            // this.pos.y += Math.floor(this.dir.y * this.speed * delta);
            this.pos.x += this.dir.x * this.speed * delta;
            this.pos.y += this.dir.y * this.speed * delta;
        }
        moveAndCollide(delta, colliderArr) {
            this._moveAndCollideAlgo(delta, colliderArr);
        }
        _moveAndCollideAlgo(delta, colliderArr) {
            let oldPos = new VectorInteger(this.pos.x, this.pos.y);
            this.move(delta);
            if (colliderArr.some(this.collision, this)) {
                this.pos = oldPos;
            }
        }
    }
    class Racket extends MovingRectangle {
        constructor(pos, width, height, baseSpeed) {
            super(pos, width, height, baseSpeed);
        }
        moveAndCollide(delta, colliderArr) {
            // let oldPos = new VectorInteger(this.pos.x, this.pos.y); // debug
            this._moveAndCollideAlgo(delta, colliderArr);
            // console.log(`y change: ${this.pos.y - oldPos.y}`);
        }
    }
    class Ball extends MovingRectangle {
        constructor(pos, size, baseSpeed, speedIncrease) {
            super(pos, size, size, baseSpeed);
            this.ballInPlay = false;
            this.speedIncrease = speedIncrease;
        }
        moveAndBounce(delta, colliderArr) {
            this.move(delta);
            let i = colliderArr.findIndex(this.collision, this);
            if (i != -1) {
                this.bounce(colliderArr[i]);
                this.move(delta);
            }
        }
        bounce(collider) {
            this._bounceAlgo(collider);
        }
        _bounceAlgo(collider) {
            /* Could be more generic, but testing only Racket is enough,
            because in Pong collider can only be Racket or Wall. */
            if (collider instanceof Racket) {
                this._bounceRacket(collider);
            }
            else {
                this._bounceWall();
            }
        }
        _bounceWall() {
            this.dir.y = this.dir.y * -1;
        }
        _bounceRacket(racket) {
            this._bounceRacketAlgo(racket);
        }
        _bounceRacketAlgo(racket) {
            this.speed += this.speedIncrease;
            let x = this.dir.x * -1;
            const angleFactorDegree = 60;
            const angleFactor = angleFactorDegree / 90;
            const racketHalf = racket.height / 2;
            const ballMid = this.pos.y + this.height / 2;
            const racketMid = racket.pos.y + racketHalf;
            let impact = ballMid - racketMid;
            const horizontalMargin = racketHalf * 0.15;
            if (impact < horizontalMargin && impact > -horizontalMargin) {
                impact = 0;
            }
            else if (impact > 0) {
                impact = impact - horizontalMargin;
            }
            else if (impact < 0) {
                impact = impact + horizontalMargin;
            }
            let y = impact / (racketHalf - horizontalMargin) * angleFactor;
            this.dir.assign(x, y);
            // console.log(`x: ${this.dir.x}, y: ${this.dir.y}`);
        }
    }

    function updateRectangle() {
        this.ctx.fillStyle = this.color;
        this.ctx.fillRect(this.pos.x, this.pos.y, this.width, this.height);
    }
    function clearRectangle(pos) {
        if (pos)
            this.ctx.clearRect(pos.x, pos.y, this.width, this.height);
        else
            this.ctx.clearRect(this.pos.x, this.pos.y, this.width, this.height);
    }
    class RectangleClient extends Rectangle {
        constructor(pos, width, height, ctx, color) {
            super(pos, width, height);
            this.ctx = ctx;
            this.color = color;
            this.update = updateRectangle;
            this.clear = clearRectangle;
        }
    }
    class MovingRectangleClient extends MovingRectangle {
        constructor(pos, width, height, baseSpeed, ctx, color) {
            super(pos, width, height, baseSpeed);
            this.ctx = ctx;
            this.color = color;
            this.update = updateRectangle;
            this.clear = clearRectangle;
        }
    }
    class RacketClient extends Racket {
        constructor(pos, width, height, baseSpeed, ctx, color) {
            super(pos, width, height, baseSpeed);
            this.ctx = ctx;
            this.color = color;
            this.update = updateRectangle;
            this.clear = clearRectangle;
        }
    }
    class BallClient extends Ball {
        constructor(pos, size, baseSpeed, speedIncrease, ctx, color) {
            super(pos, size, baseSpeed, speedIncrease);
            this.soundSwitch = false;
            this.ctx = ctx;
            this.color = color;
            this.update = updateRectangle;
            this.clear = clearRectangle;
        }
        bounce(collider) {
            this._bounceAlgo(collider);
            if (!muteFlag) {
                this.soundSwitch = !this.soundSwitch;
                soundPongArr[this.soundSwitch ? 1 : 0].play();
                // let i = Math.floor(random(0, soundPongArr.length));
                // soundPongArr[ i ].play();
                // console.log(`sound_i=${i}`); // debug log
            }
        }
    }
    function updateLine() {
        this.ctx.fillStyle = this.color;
        let pos = new VectorInteger;
        let i = 0;
        while (i < this.segmentCount) {
            /* Horizontal Line */
            // pos.y = this.pos.y;
            // pos.x = this.pos.x + this.segmentWidth * i;
            /* Vertical Line */
            pos.x = this.pos.x;
            pos.y = this.pos.y + this.segmentHeight * i;
            this.ctx.fillRect(pos.x, pos.y, this.segmentWidth, this.segmentHeight);
            i += 2;
        }
    }
    class Line extends RectangleClient {
        constructor(pos, width, height, ctx, color, gapeCount) {
            super(pos, width, height, ctx, color);
            this.gapeCount = 0;
            this.update = updateLine;
            if (gapeCount)
                this.gapeCount = gapeCount;
            this.segmentCount = this.gapeCount * 2 + 1;
            /* Vertical Line */
            this.segmentWidth = this.width;
            this.segmentHeight = this.height / this.segmentCount;
            /* Horizontal Line */
            // this.segmentWidth = this.width / this.segmentCount;
            // this.segmentHeight = this.height;
        }
    }

    class GameComponents {
        constructor(options) {
            this.ballsArr = [];
            const pos = new VectorInteger;
            // Rackets
            pos.assign(0 + pw, h_mid - ph / 2);
            this.playerLeft = new Racket(pos, pw, ph, racketSpeed);
            pos.assign(w - pw - pw, h_mid - ph / 2);
            this.playerRight = new Racket(pos, pw, ph, racketSpeed);
            // Balls
            let ballsCount = 1;
            if (options & MatchOptions.multiBalls) {
                ballsCount = multiBallsCount;
            }
            pos.assign(-ballSize, -ballSize); // ball out =)
            while (this.ballsArr.length < ballsCount) {
                this.ballsArr.push(new Ball(pos, ballSize, ballSpeed, ballSpeedIncrease));
            }
            this.ballsArr.forEach((ball) => {
                ball.dir.x = 1;
                if (random() > 0.5) {
                    ball.dir.x *= -1;
                }
                ball.dir.y = random(0, 0.2);
                if (random() > 0.5) {
                    ball.dir.y *= -1;
                }
                ball.dir = ball.dir.normalized();
            });
            // Walls
            if (options & MatchOptions.movingWalls) {
                pos.assign(0, 0);
                this.wallTop = new MovingRectangle(pos, w, wallSize, movingWallSpeed);
                this.wallTop.dir.y = -1;
                pos.assign(0, h - wallSize);
                this.wallBottom = new MovingRectangle(pos, w, wallSize, movingWallSpeed);
                this.wallBottom.dir.y = 1;
            }
            else {
                pos.assign(0, 0);
                this.wallTop = new Rectangle(pos, w, wallSize);
                pos.assign(0, h - wallSize);
                this.wallBottom = new Rectangle(pos, w, wallSize);
            }
        }
    }

    class GameComponentsExtensionForClient extends GameComponents {
        constructor(options, ctx) {
            super(options);
            // Rackets
            const basePL = this.playerLeft;
            const basePR = this.playerRight;
            this.playerLeft = new RacketClient(basePL.pos, basePL.width, basePL.height, basePL.baseSpeed, ctx, "white");
            this.playerRight = new RacketClient(basePR.pos, basePR.width, basePR.height, basePR.baseSpeed, ctx, "white");
            // Balls
            const newBallsArr = [];
            this.ballsArr.forEach((ball) => {
                newBallsArr.push(new BallClient(ball.pos, ball.width, ball.baseSpeed, ball.speedIncrease, ctx, "white"));
            });
            this.ballsArr = newBallsArr;
            // Walls
            if (options & MatchOptions.movingWalls) {
                const baseWT = this.wallTop;
                const baseWB = this.wallBottom;
                this.wallTop = new MovingRectangleClient(baseWT.pos, baseWT.width, baseWT.height, baseWT.baseSpeed, ctx, "grey");
                this.wallTop.dir.assign(baseWT.dir.x, baseWT.dir.y);
                this.wallBottom = new MovingRectangleClient(baseWB.pos, baseWB.width, baseWB.height, baseWB.baseSpeed, ctx, "grey");
                this.wallBottom.dir.assign(baseWB.dir.x, baseWB.dir.y);
            }
            else {
                const baseWT = this.wallTop;
                const baseWB = this.wallBottom;
                this.wallTop = new RectangleClient(baseWT.pos, baseWT.width, baseWT.height, ctx, "grey");
                this.wallBottom = new RectangleClient(baseWB.pos, baseWB.width, baseWB.height, ctx, "grey");
            }
        }
    }
    class GameComponentsClient extends GameComponentsExtensionForClient {
        constructor(options, ctx) {
            super(options, ctx);
            let pos = new VectorInteger;
            // Scores
            pos.assign(w_mid - scoreSize * 1.6, scoreSize * 1.5);
            this.scoreLeft = new TextNumericValue(pos, scoreSize, ctx, "white");
            pos.assign(w_mid + scoreSize * 1.1, scoreSize * 1.5);
            this.scoreRight = new TextNumericValue(pos, scoreSize, ctx, "white");
            this.scoreLeft.value = 0;
            this.scoreRight.value = 0;
            // Text
            pos.assign(0, h_mid);
            this.text1 = new TextElem(pos, Math.floor(w / 8), ctx, "white");
            this.text2 = new TextElem(pos, Math.floor(w / 24), ctx, "white");
            this.text3 = new TextElem(pos, Math.floor(w / 24), ctx, "white");
            // Dotted Midline
            pos.assign(w_mid - midLineSize / 2, 0 + wallSize);
            this.midLine = new Line(pos, midLineSize, h - wallSize * 2, ctx, "white", 15);
            // Grid
            pos.assign(0, h_mid);
            this.w_grid_mid = new RectangleClient(pos, w, gridSize, ctx, "darkgreen");
            pos.assign(0, h / 4);
            this.w_grid_u1 = new RectangleClient(pos, w, gridSize, ctx, "darkgreen");
            pos.assign(0, h - h / 4);
            this.w_grid_d1 = new RectangleClient(pos, w, gridSize, ctx, "darkgreen");
            pos.assign(w_mid, 0);
            this.h_grid_mid = new RectangleClient(pos, gridSize, h, ctx, "darkgreen");
            pos.assign(w / 4, 0);
            this.h_grid_u1 = new RectangleClient(pos, gridSize, h, ctx, "darkgreen");
            pos.assign(w - w / 4, 0);
            this.h_grid_d1 = new RectangleClient(pos, gridSize, h, ctx, "darkgreen");
        }
    }

    function computeMatchOptions(options) {
        let matchOptions = MatchOptions.noOption;
        if (options.multi_balls === true) {
            matchOptions |= MatchOptions.multiBalls;
        }
        if (options.moving_walls === true) {
            matchOptions |= MatchOptions.movingWalls;
        }
        return matchOptions;
    }
    function initBase(matchOptions, sound, gameAreaId) {
        initAudio(sound);
        setMatchOptions(matchOptions);
        setPong(new GameArea(gameAreaId));
        setGc(new GameComponentsClient(matchOptions, pong$1.ctx));
    }
    function destroyBase() {
        if (socket && (socket.OPEN || socket.CONNECTING)) {
            socket.close();
        }
        if (pong$1) {
            pong$1.timeoutArr.forEach((value) => {
                clearTimeout(value);
            });
            pong$1.timeoutArr = [];
            clearInterval(pong$1.handleInputInterval);
            pong$1.handleInputInterval = null;
            clearInterval(pong$1.gameLoopInterval);
            pong$1.gameLoopInterval = null;
            clearInterval(pong$1.drawLoopInterval);
            pong$1.drawLoopInterval = null;
            setPong(null);
        }
        setGc(null);
        setMatchOptions(null);
        resetGameState();
    }

    let abortControllerKeydown;
    let abortControllerKeyup;
    function init$1(matchOptions, options, gameAreaId, token) {
        initBase(matchOptions, options.sound, gameAreaId);
        setStartFunction(start$1);
        if (options.isSomeoneIsInvited) {
            initWebSocket(matchOptions, token, options.playerOneUsername, true, options.playerTwoUsername, options.isInvitedPerson);
        }
        else {
            initWebSocket(matchOptions, token, options.playerOneUsername);
        }
    }
    function destroy$1() {
        destroyBase();
        if (abortControllerKeydown) {
            abortControllerKeydown.abort();
            abortControllerKeydown = null;
        }
        if (abortControllerKeyup) {
            abortControllerKeyup.abort();
            abortControllerKeyup = null;
        }
    }
    function start$1() {
        gc.text1.pos.assign(w * 0.5, h * 0.75);
        const countdownArr = countdown(matchStartDelay, 1000, (count) => {
            gc.text1.clear();
            gc.text1.text = `${count / 1000}`;
            gc.text1.update();
        }, start_after_countdown);
        pong$1.timeoutArr = pong$1.timeoutArr.concat(countdownArr);
    }
    function start_after_countdown() {
        abortControllerKeydown = new AbortController();
        window.addEventListener('keydown', (e) => { pong$1.addKey(e.key); }, { signal: abortControllerKeydown.signal });
        abortControllerKeyup = new AbortController();
        window.addEventListener('keyup', (e) => { pong$1.deleteKey(e.key); }, { signal: abortControllerKeyup.signal });
        resume$1();
    }
    function resume$1() {
        gc.text1.text = "";
        pong$1.handleInputInterval = window.setInterval(handleInput, handleInputIntervalMS);
        // pong.handleInputInterval = window.setInterval(sendLoop, c.sendLoopIntervalMS);
        pong$1.gameLoopInterval = window.setInterval(gameLoop, gameLoopIntervalMS);
        pong$1.drawLoopInterval = window.setInterval(drawLoop, drawLoopIntervalMS);
    }

    var pong = /*#__PURE__*/Object.freeze({
        __proto__: null,
        init: init$1,
        destroy: destroy$1,
        InitOptions: InitOptions,
        computeMatchOptions: computeMatchOptions
    });

    /* src/pages/game/Game.svelte generated by Svelte v3.53.1 */

    const { console: console_1$2 } = globals;
    const file$3 = "src/pages/game/Game.svelte";

    function get_each_context$2(ctx, list, i) {
    	const child_ctx = ctx.slice();
    	child_ctx[31] = list[i];
    	return child_ctx;
    }

    function get_each_context_1(ctx, list, i) {
    	const child_ctx = ctx.slice();
    	child_ctx[11] = list[i];
    	return child_ctx;
    }

    // (165:1) {#if showError}
    function create_if_block_12(ctx) {
    	let div;
    	let fieldset;
    	let legend;
    	let t1;
    	let p;
    	let t2;
    	let div_intro;

    	const block = {
    		c: function create() {
    			div = element("div");
    			fieldset = element("fieldset");
    			legend = element("legend");
    			legend.textContent = "Error";
    			t1 = space();
    			p = element("p");
    			t2 = text(/*errorMessage*/ ctx[8]);
    			add_location(legend, file$3, 167, 4, 5622);
    			add_location(p, file$3, 168, 4, 5649);
    			attr_dev(fieldset, "class", "svelte-1mjngvy");
    			add_location(fieldset, file$3, 166, 3, 5607);
    			attr_dev(div, "class", "div_game svelte-1mjngvy");
    			add_location(div, file$3, 165, 2, 5544);
    		},
    		m: function mount(target, anchor) {
    			insert_dev(target, div, anchor);
    			append_dev(div, fieldset);
    			append_dev(fieldset, legend);
    			append_dev(fieldset, t1);
    			append_dev(fieldset, p);
    			append_dev(p, t2);
    		},
    		p: function update(ctx, dirty) {
    			if (dirty[0] & /*errorMessage*/ 256) set_data_dev(t2, /*errorMessage*/ ctx[8]);
    		},
    		i: function intro(local) {
    			if (!div_intro) {
    				add_render_callback(() => {
    					div_intro = create_in_transition(div, fly, { y: 10, duration: 1000 });
    					div_intro.start();
    				});
    			}
    		},
    		o: noop,
    		d: function destroy(detaching) {
    			if (detaching) detach_dev(div);
    		}
    	};

    	dispatch_dev("SvelteRegisterBlock", {
    		block,
    		id: create_if_block_12.name,
    		type: "if",
    		source: "(165:1) {#if showError}",
    		ctx
    	});

    	return block;
    }

    // (174:1) {#if !hiddenGame}
    function create_if_block_9(ctx) {
    	let if_block_anchor;

    	function select_block_type(ctx, dirty) {
    		if (/*gameState*/ ctx[0].matchEnded) return create_if_block_10;
    		if (/*gameState*/ ctx[0].matchAborted) return create_if_block_11;
    	}

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

    	const block = {
    		c: function create() {
    			if (if_block) if_block.c();
    			if_block_anchor = empty$1();
    		},
    		m: function mount(target, anchor) {
    			if (if_block) if_block.m(target, anchor);
    			insert_dev(target, if_block_anchor, anchor);
    		},
    		p: function update(ctx, dirty) {
    			if (current_block_type !== (current_block_type = select_block_type(ctx))) {
    				if (if_block) if_block.d(1);
    				if_block = current_block_type && current_block_type(ctx);

    				if (if_block) {
    					if_block.c();
    					transition_in(if_block, 1);
    					if_block.m(if_block_anchor.parentNode, if_block_anchor);
    				}
    			}
    		},
    		i: function intro(local) {
    			transition_in(if_block);
    		},
    		o: noop,
    		d: function destroy(detaching) {
    			if (if_block) {
    				if_block.d(detaching);
    			}

    			if (detaching) detach_dev(if_block_anchor);
    		}
    	};

    	dispatch_dev("SvelteRegisterBlock", {
    		block,
    		id: create_if_block_9.name,
    		type: "if",
    		source: "(174:1) {#if !hiddenGame}",
    		ctx
    	});

    	return block;
    }

    // (179:35) 
    function create_if_block_11(ctx) {
    	let div;
    	let p;
    	let div_intro;

    	const block = {
    		c: function create() {
    			div = element("div");
    			p = element("p");
    			p.textContent = "The match has been aborted";
    			add_location(p, file$3, 180, 4, 5962);
    			attr_dev(div, "class", "div_game svelte-1mjngvy");
    			add_location(div, file$3, 179, 3, 5898);
    		},
    		m: function mount(target, anchor) {
    			insert_dev(target, div, anchor);
    			append_dev(div, p);
    		},
    		i: function intro(local) {
    			if (!div_intro) {
    				add_render_callback(() => {
    					div_intro = create_in_transition(div, fly, { y: 10, duration: 1000 });
    					div_intro.start();
    				});
    			}
    		},
    		o: noop,
    		d: function destroy(detaching) {
    			if (detaching) detach_dev(div);
    		}
    	};

    	dispatch_dev("SvelteRegisterBlock", {
    		block,
    		id: create_if_block_11.name,
    		type: "if",
    		source: "(179:35) ",
    		ctx
    	});

    	return block;
    }

    // (175:2) {#if gameState.matchEnded}
    function create_if_block_10(ctx) {
    	let div;
    	let p;
    	let div_intro;

    	const block = {
    		c: function create() {
    			div = element("div");
    			p = element("p");
    			p.textContent = "The match is finished !";
    			add_location(p, file$3, 176, 4, 5818);
    			attr_dev(div, "class", "div_game svelte-1mjngvy");
    			add_location(div, file$3, 175, 3, 5754);
    		},
    		m: function mount(target, anchor) {
    			insert_dev(target, div, anchor);
    			append_dev(div, p);
    		},
    		i: function intro(local) {
    			if (!div_intro) {
    				add_render_callback(() => {
    					div_intro = create_in_transition(div, fly, { y: 10, duration: 1000 });
    					div_intro.start();
    				});
    			}
    		},
    		o: noop,
    		d: function destroy(detaching) {
    			if (detaching) detach_dev(div);
    		}
    	};

    	dispatch_dev("SvelteRegisterBlock", {
    		block,
    		id: create_if_block_10.name,
    		type: "if",
    		source: "(175:2) {#if gameState.matchEnded}",
    		ctx
    	});

    	return block;
    }

    // (190:1) {#if !hiddenGame}
    function create_if_block_6(ctx) {
    	let if_block_anchor;

    	function select_block_type_1(ctx, dirty) {
    		if (/*gameState*/ ctx[0].matchStarted && !/*gameState*/ ctx[0].matchEnded) return create_if_block_7;
    		if (!/*gameState*/ ctx[0].matchStarted) return create_if_block_8;
    	}

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

    	const block = {
    		c: function create() {
    			if (if_block) if_block.c();
    			if_block_anchor = empty$1();
    		},
    		m: function mount(target, anchor) {
    			if (if_block) if_block.m(target, anchor);
    			insert_dev(target, if_block_anchor, anchor);
    		},
    		p: function update(ctx, dirty) {
    			if (current_block_type === (current_block_type = select_block_type_1(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(if_block_anchor.parentNode, if_block_anchor);
    				}
    			}
    		},
    		d: function destroy(detaching) {
    			if (if_block) {
    				if_block.d(detaching);
    			}

    			if (detaching) detach_dev(if_block_anchor);
    		}
    	};

    	dispatch_dev("SvelteRegisterBlock", {
    		block,
    		id: create_if_block_6.name,
    		type: "if",
    		source: "(190:1) {#if !hiddenGame}",
    		ctx
    	});

    	return block;
    }

    // (195:36) 
    function create_if_block_8(ctx) {
    	let div;
    	let button;
    	let mounted;
    	let dispose;

    	const block = {
    		c: function create() {
    			div = element("div");
    			button = element("button");
    			button.textContent = "leave matchmaking";
    			attr_dev(button, "class", "pong_button svelte-1mjngvy");
    			add_location(button, file$3, 196, 4, 6357);
    			attr_dev(div, "class", "div_game svelte-1mjngvy");
    			add_location(div, file$3, 195, 3, 6330);
    		},
    		m: function mount(target, anchor) {
    			insert_dev(target, div, anchor);
    			append_dev(div, button);

    			if (!mounted) {
    				dispose = listen_dev(button, "click", /*leaveMatch*/ ctx[17], 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_if_block_8.name,
    		type: "if",
    		source: "(195:36) ",
    		ctx
    	});

    	return block;
    }

    // (191:2) {#if gameState.matchStarted && !gameState.matchEnded}
    function create_if_block_7(ctx) {
    	let div;
    	let button;
    	let mounted;
    	let dispose;

    	const block = {
    		c: function create() {
    			div = element("div");
    			button = element("button");
    			button.textContent = "forfeit";
    			attr_dev(button, "class", "pong_button svelte-1mjngvy");
    			add_location(button, file$3, 192, 4, 6213);
    			attr_dev(div, "class", "div_game svelte-1mjngvy");
    			add_location(div, file$3, 191, 3, 6186);
    		},
    		m: function mount(target, anchor) {
    			insert_dev(target, div, anchor);
    			append_dev(div, button);

    			if (!mounted) {
    				dispose = listen_dev(button, "click", /*leaveMatch*/ ctx[17], 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_if_block_7.name,
    		type: "if",
    		source: "(191:2) {#if gameState.matchStarted && !gameState.matchEnded}",
    		ctx
    	});

    	return block;
    }

    // (203:1) {#if showWaitPage}
    function create_if_block_5$1(ctx) {
    	let div;
    	let fieldset;
    	let legend;
    	let t1;
    	let p;
    	let div_intro;

    	const block = {
    		c: function create() {
    			div = element("div");
    			fieldset = element("fieldset");
    			legend = element("legend");
    			legend.textContent = "Connecting to the game...";
    			t1 = space();
    			p = element("p");
    			p.textContent = "Please wait...";
    			add_location(legend, file$3, 205, 4, 6561);
    			add_location(p, file$3, 206, 4, 6608);
    			attr_dev(fieldset, "class", "svelte-1mjngvy");
    			add_location(fieldset, file$3, 204, 3, 6546);
    			attr_dev(div, "class", "div_game svelte-1mjngvy");
    			add_location(div, file$3, 203, 2, 6483);
    		},
    		m: function mount(target, anchor) {
    			insert_dev(target, div, anchor);
    			append_dev(div, fieldset);
    			append_dev(fieldset, legend);
    			append_dev(fieldset, t1);
    			append_dev(fieldset, p);
    		},
    		i: function intro(local) {
    			if (!div_intro) {
    				add_render_callback(() => {
    					div_intro = create_in_transition(div, fly, { y: 10, duration: 1000 });
    					div_intro.start();
    				});
    			}
    		},
    		o: noop,
    		d: function destroy(detaching) {
    			if (detaching) detach_dev(div);
    		}
    	};

    	dispatch_dev("SvelteRegisterBlock", {
    		block,
    		id: create_if_block_5$1.name,
    		type: "if",
    		source: "(203:1) {#if showWaitPage}",
    		ctx
    	});

    	return block;
    }

    // (214:1) {#if optionsAreNotSet}
    function create_if_block$2(ctx) {
    	let t;
    	let if_block1_anchor;
    	let if_block0 = /*showGameOptions*/ ctx[5] && create_if_block_3$1(ctx);
    	let if_block1 = /*showInvitations*/ ctx[6] && create_if_block_1$1(ctx);

    	const block = {
    		c: function create() {
    			if (if_block0) if_block0.c();
    			t = space();
    			if (if_block1) if_block1.c();
    			if_block1_anchor = empty$1();
    		},
    		m: function mount(target, anchor) {
    			if (if_block0) if_block0.m(target, anchor);
    			insert_dev(target, t, anchor);
    			if (if_block1) if_block1.m(target, anchor);
    			insert_dev(target, if_block1_anchor, anchor);
    		},
    		p: function update(ctx, dirty) {
    			if (/*showGameOptions*/ ctx[5]) {
    				if (if_block0) {
    					if_block0.p(ctx, dirty);

    					if (dirty[0] & /*showGameOptions*/ 32) {
    						transition_in(if_block0, 1);
    					}
    				} else {
    					if_block0 = create_if_block_3$1(ctx);
    					if_block0.c();
    					transition_in(if_block0, 1);
    					if_block0.m(t.parentNode, t);
    				}
    			} else if (if_block0) {
    				if_block0.d(1);
    				if_block0 = null;
    			}

    			if (/*showInvitations*/ ctx[6]) {
    				if (if_block1) {
    					if_block1.p(ctx, dirty);

    					if (dirty[0] & /*showInvitations*/ 64) {
    						transition_in(if_block1, 1);
    					}
    				} else {
    					if_block1 = create_if_block_1$1(ctx);
    					if_block1.c();
    					transition_in(if_block1, 1);
    					if_block1.m(if_block1_anchor.parentNode, if_block1_anchor);
    				}
    			} else if (if_block1) {
    				if_block1.d(1);
    				if_block1 = null;
    			}
    		},
    		i: function intro(local) {
    			transition_in(if_block0);
    			transition_in(if_block1);
    		},
    		o: noop,
    		d: function destroy(detaching) {
    			if (if_block0) if_block0.d(detaching);
    			if (detaching) detach_dev(t);
    			if (if_block1) if_block1.d(detaching);
    			if (detaching) detach_dev(if_block1_anchor);
    		}
    	};

    	dispatch_dev("SvelteRegisterBlock", {
    		block,
    		id: create_if_block$2.name,
    		type: "if",
    		source: "(214:1) {#if optionsAreNotSet}",
    		ctx
    	});

    	return block;
    }

    // (215:2) {#if showGameOptions}
    function create_if_block_3$1(ctx) {
    	let div6;
    	let div5;
    	let button0;
    	let t1;
    	let fieldset;
    	let legend;
    	let t3;
    	let div0;
    	let input0;
    	let t4;
    	let label0;
    	let t6;
    	let div1;
    	let input1;
    	let t7;
    	let label1;
    	let t9;
    	let div2;
    	let p;
    	let t11;
    	let input2;
    	let t12;
    	let label2;
    	let t14;
    	let input3;
    	let t15;
    	let label3;
    	let t17;
    	let div3;
    	let input4;
    	let t18;
    	let label4;
    	let t20;
    	let t21;
    	let div4;
    	let button1;
    	let fieldset_intro;
    	let mounted;
    	let dispose;
    	let if_block = /*options*/ ctx[2].isSomeoneIsInvited && create_if_block_4$1(ctx);

    	const block = {
    		c: function create() {
    			div6 = element("div");
    			div5 = element("div");
    			button0 = element("button");
    			button0.textContent = "Show invitations";
    			t1 = space();
    			fieldset = element("fieldset");
    			legend = element("legend");
    			legend.textContent = "game options";
    			t3 = space();
    			div0 = element("div");
    			input0 = element("input");
    			t4 = space();
    			label0 = element("label");
    			label0.textContent = "Multiples balls";
    			t6 = space();
    			div1 = element("div");
    			input1 = element("input");
    			t7 = space();
    			label1 = element("label");
    			label1.textContent = "Moving walls";
    			t9 = space();
    			div2 = element("div");
    			p = element("p");
    			p.textContent = "sound :";
    			t11 = space();
    			input2 = element("input");
    			t12 = space();
    			label2 = element("label");
    			label2.textContent = "on";
    			t14 = space();
    			input3 = element("input");
    			t15 = space();
    			label3 = element("label");
    			label3.textContent = "off";
    			t17 = space();
    			div3 = element("div");
    			input4 = element("input");
    			t18 = space();
    			label4 = element("label");
    			label4.textContent = "Invite a friend";
    			t20 = space();
    			if (if_block) if_block.c();
    			t21 = space();
    			div4 = element("div");
    			button1 = element("button");
    			button1.textContent = "PLAY";
    			attr_dev(button0, "class", "pong_button svelte-1mjngvy");
    			add_location(button0, file$3, 217, 5, 6779);
    			add_location(legend, file$3, 219, 6, 6920);
    			attr_dev(input0, "type", "checkbox");
    			attr_dev(input0, "id", "multi_balls");
    			attr_dev(input0, "name", "multi_balls");
    			add_location(input0, file$3, 221, 7, 6969);
    			attr_dev(label0, "for", "multi_balls");
    			add_location(label0, file$3, 222, 7, 7071);
    			attr_dev(div0, "class", "svelte-1mjngvy");
    			add_location(div0, file$3, 220, 6, 6956);
    			attr_dev(input1, "type", "checkbox");
    			attr_dev(input1, "id", "moving_walls");
    			attr_dev(input1, "name", "moving_walls");
    			add_location(input1, file$3, 225, 7, 7152);
    			attr_dev(label1, "for", "moving_walls");
    			add_location(label1, file$3, 226, 7, 7257);
    			attr_dev(div1, "class", "svelte-1mjngvy");
    			add_location(div1, file$3, 224, 6, 7139);
    			add_location(p, file$3, 229, 7, 7336);
    			attr_dev(input2, "type", "radio");
    			attr_dev(input2, "id", "sound_on");
    			attr_dev(input2, "name", "sound_selector");
    			input2.__value = "on";
    			input2.value = input2.__value;
    			/*$$binding_groups*/ ctx[21][0].push(input2);
    			add_location(input2, file$3, 230, 7, 7358);
    			attr_dev(label2, "for", "sound_on");
    			add_location(label2, file$3, 231, 7, 7460);
    			attr_dev(input3, "type", "radio");
    			attr_dev(input3, "id", "sound_off");
    			attr_dev(input3, "name", "sound_selector");
    			input3.__value = "off";
    			input3.value = input3.__value;
    			/*$$binding_groups*/ ctx[21][0].push(input3);
    			add_location(input3, file$3, 232, 7, 7500);
    			attr_dev(label3, "for", "sound_off");
    			add_location(label3, file$3, 233, 7, 7604);
    			attr_dev(div2, "class", "svelte-1mjngvy");
    			add_location(div2, file$3, 228, 6, 7323);
    			attr_dev(input4, "type", "checkbox");
    			attr_dev(input4, "id", "isSomeoneIsInvited");
    			add_location(input4, file$3, 236, 7, 7671);
    			attr_dev(label4, "for", "moving_walls");
    			add_location(label4, file$3, 237, 7, 7768);
    			attr_dev(div3, "class", "svelte-1mjngvy");
    			add_location(div3, file$3, 235, 6, 7658);
    			attr_dev(button1, "class", "pong_button svelte-1mjngvy");
    			add_location(button1, file$3, 247, 7, 8087);
    			attr_dev(div4, "class", "svelte-1mjngvy");
    			add_location(div4, file$3, 246, 6, 8074);
    			attr_dev(fieldset, "class", "svelte-1mjngvy");
    			add_location(fieldset, file$3, 218, 5, 6866);
    			attr_dev(div5, "class", "div_game svelte-1mjngvy");
    			add_location(div5, file$3, 216, 4, 6751);
    			attr_dev(div6, "id", "game_option");
    			add_location(div6, file$3, 215, 3, 6724);
    		},
    		m: function mount(target, anchor) {
    			insert_dev(target, div6, anchor);
    			append_dev(div6, div5);
    			append_dev(div5, button0);
    			append_dev(div5, t1);
    			append_dev(div5, fieldset);
    			append_dev(fieldset, legend);
    			append_dev(fieldset, t3);
    			append_dev(fieldset, div0);
    			append_dev(div0, input0);
    			input0.checked = /*options*/ ctx[2].multi_balls;
    			append_dev(div0, t4);
    			append_dev(div0, label0);
    			append_dev(fieldset, t6);
    			append_dev(fieldset, div1);
    			append_dev(div1, input1);
    			input1.checked = /*options*/ ctx[2].moving_walls;
    			append_dev(div1, t7);
    			append_dev(div1, label1);
    			append_dev(fieldset, t9);
    			append_dev(fieldset, div2);
    			append_dev(div2, p);
    			append_dev(div2, t11);
    			append_dev(div2, input2);
    			input2.checked = input2.__value === /*options*/ ctx[2].sound;
    			append_dev(div2, t12);
    			append_dev(div2, label2);
    			append_dev(div2, t14);
    			append_dev(div2, input3);
    			input3.checked = input3.__value === /*options*/ ctx[2].sound;
    			append_dev(div2, t15);
    			append_dev(div2, label3);
    			append_dev(fieldset, t17);
    			append_dev(fieldset, div3);
    			append_dev(div3, input4);
    			input4.checked = /*options*/ ctx[2].isSomeoneIsInvited;
    			append_dev(div3, t18);
    			append_dev(div3, label4);
    			append_dev(fieldset, t20);
    			if (if_block) if_block.m(fieldset, null);
    			append_dev(fieldset, t21);
    			append_dev(fieldset, div4);
    			append_dev(div4, button1);

    			if (!mounted) {
    				dispose = [
    					listen_dev(button0, "click", /*fetchInvitations*/ ctx[14], false, false, false),
    					listen_dev(input0, "change", /*input0_change_handler*/ ctx[18]),
    					listen_dev(input1, "change", /*input1_change_handler*/ ctx[19]),
    					listen_dev(input2, "change", /*input2_change_handler*/ ctx[20]),
    					listen_dev(input3, "change", /*input3_change_handler*/ ctx[22]),
    					listen_dev(input4, "change", /*input4_change_handler*/ ctx[23]),
    					listen_dev(button1, "click", /*initGame*/ ctx[12], false, false, false)
    				];

    				mounted = true;
    			}
    		},
    		p: function update(ctx, dirty) {
    			if (dirty[0] & /*options, allUsers*/ 6) {
    				input0.checked = /*options*/ ctx[2].multi_balls;
    			}

    			if (dirty[0] & /*options, allUsers*/ 6) {
    				input1.checked = /*options*/ ctx[2].moving_walls;
    			}

    			if (dirty[0] & /*options, allUsers*/ 6) {
    				input2.checked = input2.__value === /*options*/ ctx[2].sound;
    			}

    			if (dirty[0] & /*options, allUsers*/ 6) {
    				input3.checked = input3.__value === /*options*/ ctx[2].sound;
    			}

    			if (dirty[0] & /*options, allUsers*/ 6) {
    				input4.checked = /*options*/ ctx[2].isSomeoneIsInvited;
    			}

    			if (/*options*/ ctx[2].isSomeoneIsInvited) {
    				if (if_block) {
    					if_block.p(ctx, dirty);
    				} else {
    					if_block = create_if_block_4$1(ctx);
    					if_block.c();
    					if_block.m(fieldset, t21);
    				}
    			} else if (if_block) {
    				if_block.d(1);
    				if_block = null;
    			}
    		},
    		i: function intro(local) {
    			if (!fieldset_intro) {
    				add_render_callback(() => {
    					fieldset_intro = create_in_transition(fieldset, fly, { y: 10, duration: 1000 });
    					fieldset_intro.start();
    				});
    			}
    		},
    		o: noop,
    		d: function destroy(detaching) {
    			if (detaching) detach_dev(div6);
    			/*$$binding_groups*/ ctx[21][0].splice(/*$$binding_groups*/ ctx[21][0].indexOf(input2), 1);
    			/*$$binding_groups*/ ctx[21][0].splice(/*$$binding_groups*/ ctx[21][0].indexOf(input3), 1);
    			if (if_block) if_block.d();
    			mounted = false;
    			run_all(dispose);
    		}
    	};

    	dispatch_dev("SvelteRegisterBlock", {
    		block,
    		id: create_if_block_3$1.name,
    		type: "if",
    		source: "(215:2) {#if showGameOptions}",
    		ctx
    	});

    	return block;
    }

    // (240:6) {#if options.isSomeoneIsInvited}
    function create_if_block_4$1(ctx) {
    	let select;
    	let mounted;
    	let dispose;
    	let each_value_1 = /*allUsers*/ ctx[1];
    	validate_each_argument(each_value_1);
    	let each_blocks = [];

    	for (let i = 0; i < each_value_1.length; i += 1) {
    		each_blocks[i] = create_each_block_1(get_each_context_1(ctx, each_value_1, i));
    	}

    	const block = {
    		c: function create() {
    			select = element("select");

    			for (let i = 0; i < each_blocks.length; i += 1) {
    				each_blocks[i].c();
    			}

    			if (/*options*/ ctx[2].playerTwoUsername === void 0) add_render_callback(() => /*select_change_handler*/ ctx[24].call(select));
    			add_location(select, file$3, 240, 7, 7877);
    		},
    		m: function mount(target, anchor) {
    			insert_dev(target, select, anchor);

    			for (let i = 0; i < each_blocks.length; i += 1) {
    				each_blocks[i].m(select, null);
    			}

    			select_option(select, /*options*/ ctx[2].playerTwoUsername);

    			if (!mounted) {
    				dispose = listen_dev(select, "change", /*select_change_handler*/ ctx[24]);
    				mounted = true;
    			}
    		},
    		p: function update(ctx, dirty) {
    			if (dirty[0] & /*allUsers*/ 2) {
    				each_value_1 = /*allUsers*/ ctx[1];
    				validate_each_argument(each_value_1);
    				let i;

    				for (i = 0; i < each_value_1.length; i += 1) {
    					const child_ctx = get_each_context_1(ctx, each_value_1, i);

    					if (each_blocks[i]) {
    						each_blocks[i].p(child_ctx, dirty);
    					} else {
    						each_blocks[i] = create_each_block_1(child_ctx);
    						each_blocks[i].c();
    						each_blocks[i].m(select, null);
    					}
    				}

    				for (; i < each_blocks.length; i += 1) {
    					each_blocks[i].d(1);
    				}

    				each_blocks.length = each_value_1.length;
    			}

    			if (dirty[0] & /*options, allUsers*/ 6) {
    				select_option(select, /*options*/ ctx[2].playerTwoUsername);
    			}
    		},
    		d: function destroy(detaching) {
    			if (detaching) detach_dev(select);
    			destroy_each(each_blocks, detaching);
    			mounted = false;
    			dispose();
    		}
    	};

    	dispatch_dev("SvelteRegisterBlock", {
    		block,
    		id: create_if_block_4$1.name,
    		type: "if",
    		source: "(240:6) {#if options.isSomeoneIsInvited}",
    		ctx
    	});

    	return block;
    }

    // (242:8) {#each allUsers as user }
    function create_each_block_1(ctx) {
    	let option;
    	let t_value = /*user*/ ctx[11].username + "";
    	let t;
    	let option_value_value;

    	const block = {
    		c: function create() {
    			option = element("option");
    			t = text(t_value);
    			option.__value = option_value_value = /*user*/ ctx[11].username;
    			option.value = option.__value;
    			add_location(option, file$3, 242, 9, 7968);
    		},
    		m: function mount(target, anchor) {
    			insert_dev(target, option, anchor);
    			append_dev(option, t);
    		},
    		p: function update(ctx, dirty) {
    			if (dirty[0] & /*allUsers*/ 2 && t_value !== (t_value = /*user*/ ctx[11].username + "")) set_data_dev(t, t_value);

    			if (dirty[0] & /*allUsers*/ 2 && option_value_value !== (option_value_value = /*user*/ ctx[11].username)) {
    				prop_dev(option, "__value", option_value_value);
    				option.value = option.__value;
    			}
    		},
    		d: function destroy(detaching) {
    			if (detaching) detach_dev(option);
    		}
    	};

    	dispatch_dev("SvelteRegisterBlock", {
    		block,
    		id: create_each_block_1.name,
    		type: "each",
    		source: "(242:8) {#each allUsers as user }",
    		ctx
    	});

    	return block;
    }

    // (255:2) {#if showInvitations}
    function create_if_block_1$1(ctx) {
    	let div;
    	let button0;
    	let t1;
    	let fieldset;
    	let legend;
    	let t3;
    	let button1;
    	let t5;
    	let fieldset_intro;
    	let mounted;
    	let dispose;

    	function select_block_type_2(ctx, dirty) {
    		if (/*invitations*/ ctx[10].length !== 0) return create_if_block_2$1;
    		return create_else_block$2;
    	}

    	let current_block_type = select_block_type_2(ctx);
    	let if_block = current_block_type(ctx);

    	const block = {
    		c: function create() {
    			div = element("div");
    			button0 = element("button");
    			button0.textContent = "Play a Game";
    			t1 = space();
    			fieldset = element("fieldset");
    			legend = element("legend");
    			legend.textContent = "invitations";
    			t3 = space();
    			button1 = element("button");
    			button1.textContent = "Reload";
    			t5 = space();
    			if_block.c();
    			attr_dev(button0, "class", "pong_button svelte-1mjngvy");
    			add_location(button0, file$3, 256, 4, 8263);
    			add_location(legend, file$3, 258, 5, 8400);
    			attr_dev(button1, "class", "pong_button svelte-1mjngvy");
    			add_location(button1, file$3, 259, 5, 8434);
    			attr_dev(fieldset, "class", "svelte-1mjngvy");
    			add_location(fieldset, file$3, 257, 4, 8347);
    			attr_dev(div, "class", "div_game svelte-1mjngvy");
    			add_location(div, file$3, 255, 3, 8236);
    		},
    		m: function mount(target, anchor) {
    			insert_dev(target, div, anchor);
    			append_dev(div, button0);
    			append_dev(div, t1);
    			append_dev(div, fieldset);
    			append_dev(fieldset, legend);
    			append_dev(fieldset, t3);
    			append_dev(fieldset, button1);
    			append_dev(fieldset, t5);
    			if_block.m(fieldset, null);

    			if (!mounted) {
    				dispose = [
    					listen_dev(button0, "click", /*switchToGameOptions*/ ctx[13], false, false, false),
    					listen_dev(button1, "click", /*fetchInvitations*/ ctx[14], false, false, false)
    				];

    				mounted = true;
    			}
    		},
    		p: function update(ctx, dirty) {
    			if (current_block_type === (current_block_type = select_block_type_2(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(fieldset, null);
    				}
    			}
    		},
    		i: function intro(local) {
    			if (!fieldset_intro) {
    				add_render_callback(() => {
    					fieldset_intro = create_in_transition(fieldset, fly, { y: 10, duration: 1000 });
    					fieldset_intro.start();
    				});
    			}
    		},
    		o: noop,
    		d: function destroy(detaching) {
    			if (detaching) detach_dev(div);
    			if_block.d();
    			mounted = false;
    			run_all(dispose);
    		}
    	};

    	dispatch_dev("SvelteRegisterBlock", {
    		block,
    		id: create_if_block_1$1.name,
    		type: "if",
    		source: "(255:2) {#if showInvitations}",
    		ctx
    	});

    	return block;
    }

    // (269:5) {:else}
    function create_else_block$2(ctx) {
    	let p;

    	const block = {
    		c: function create() {
    			p = element("p");
    			p.textContent = "Currently, no one asked to play with you.";
    			add_location(p, file$3, 269, 6, 8900);
    		},
    		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_else_block$2.name,
    		type: "else",
    		source: "(269:5) {:else}",
    		ctx
    	});

    	return block;
    }

    // (261:5) {#if invitations.length !== 0}
    function create_if_block_2$1(ctx) {
    	let each_1_anchor;
    	let each_value = /*invitations*/ ctx[10];
    	validate_each_argument(each_value);
    	let each_blocks = [];

    	for (let i = 0; i < each_value.length; i += 1) {
    		each_blocks[i] = create_each_block$2(get_each_context$2(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$1();
    		},
    		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[0] & /*rejectInvitation, invitations, acceptInvitation*/ 99328) {
    				each_value = /*invitations*/ ctx[10];
    				validate_each_argument(each_value);
    				let i;

    				for (i = 0; i < each_value.length; i += 1) {
    					const child_ctx = get_each_context$2(ctx, each_value, i);

    					if (each_blocks[i]) {
    						each_blocks[i].p(child_ctx, dirty);
    					} else {
    						each_blocks[i] = create_each_block$2(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_if_block_2$1.name,
    		type: "if",
    		source: "(261:5) {#if invitations.length !== 0}",
    		ctx
    	});

    	return block;
    }

    // (262:6) {#each invitations as invitation}
    function create_each_block$2(ctx) {
    	let div;
    	let t0_value = /*invitation*/ ctx[31].playerOneUsername + "";
    	let t0;
    	let t1;
    	let button0;
    	let t3;
    	let button1;
    	let t5;
    	let mounted;
    	let dispose;

    	function click_handler() {
    		return /*click_handler*/ ctx[25](/*invitation*/ ctx[31]);
    	}

    	function click_handler_1() {
    		return /*click_handler_1*/ ctx[26](/*invitation*/ ctx[31]);
    	}

    	const block = {
    		c: function create() {
    			div = element("div");
    			t0 = text(t0_value);
    			t1 = text(" has invited you to play a pong !\n\t\t\t\t\t\t\t\t");
    			button0 = element("button");
    			button0.textContent = "V";
    			t3 = space();
    			button1 = element("button");
    			button1.textContent = "X";
    			t5 = space();
    			attr_dev(button0, "class", "pong_button svelte-1mjngvy");
    			add_location(button0, file$3, 264, 8, 8675);
    			attr_dev(button1, "class", "pong_button svelte-1mjngvy");
    			add_location(button1, file$3, 265, 8, 8768);
    			attr_dev(div, "class", "svelte-1mjngvy");
    			add_location(div, file$3, 262, 7, 8589);
    		},
    		m: function mount(target, anchor) {
    			insert_dev(target, div, anchor);
    			append_dev(div, t0);
    			append_dev(div, t1);
    			append_dev(div, button0);
    			append_dev(div, t3);
    			append_dev(div, button1);
    			append_dev(div, t5);

    			if (!mounted) {
    				dispose = [
    					listen_dev(button0, "click", click_handler, false, false, false),
    					listen_dev(button1, "click", click_handler_1, false, false, false)
    				];

    				mounted = true;
    			}
    		},
    		p: function update(new_ctx, dirty) {
    			ctx = new_ctx;
    			if (dirty[0] & /*invitations*/ 1024 && t0_value !== (t0_value = /*invitation*/ ctx[31].playerOneUsername + "")) set_data_dev(t0, t0_value);
    		},
    		d: function destroy(detaching) {
    			if (detaching) detach_dev(div);
    			mounted = false;
    			run_all(dispose);
    		}
    	};

    	dispatch_dev("SvelteRegisterBlock", {
    		block,
    		id: create_each_block$2.name,
    		type: "each",
    		source: "(262:6) {#each invitations as invitation}",
    		ctx
    	});

    	return block;
    }

    function create_fragment$4(ctx) {
    	let header;
    	let t0;
    	let div1;
    	let t1;
    	let t2;
    	let div0;
    	let canvas;
    	let t3;
    	let t4;
    	let t5;
    	let current;
    	header = new Header({ $$inline: true });
    	let if_block0 = /*showError*/ ctx[7] && create_if_block_12(ctx);
    	let if_block1 = !/*hiddenGame*/ ctx[3] && create_if_block_9(ctx);
    	let if_block2 = !/*hiddenGame*/ ctx[3] && create_if_block_6(ctx);
    	let if_block3 = /*showWaitPage*/ ctx[9] && create_if_block_5$1(ctx);
    	let if_block4 = /*optionsAreNotSet*/ ctx[4] && create_if_block$2(ctx);

    	const block = {
    		c: function create() {
    			create_component(header.$$.fragment);
    			t0 = space();
    			div1 = element("div");
    			if (if_block0) if_block0.c();
    			t1 = space();
    			if (if_block1) if_block1.c();
    			t2 = space();
    			div0 = element("div");
    			canvas = element("canvas");
    			t3 = space();
    			if (if_block2) if_block2.c();
    			t4 = space();
    			if (if_block3) if_block3.c();
    			t5 = space();
    			if (if_block4) if_block4.c();
    			attr_dev(canvas, "id", gameAreaId$1);
    			attr_dev(canvas, "class", "svelte-1mjngvy");
    			add_location(canvas, file$3, 186, 2, 6073);
    			attr_dev(div0, "id", "canvas_container");
    			div0.hidden = /*hiddenGame*/ ctx[3];
    			attr_dev(div0, "class", "svelte-1mjngvy");
    			add_location(div0, file$3, 185, 1, 6023);
    			attr_dev(div1, "id", "game_page");
    			attr_dev(div1, "class", "svelte-1mjngvy");
    			add_location(div1, file$3, 162, 0, 5503);
    		},
    		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, t0, anchor);
    			insert_dev(target, div1, anchor);
    			if (if_block0) if_block0.m(div1, null);
    			append_dev(div1, t1);
    			if (if_block1) if_block1.m(div1, null);
    			append_dev(div1, t2);
    			append_dev(div1, div0);
    			append_dev(div0, canvas);
    			append_dev(div1, t3);
    			if (if_block2) if_block2.m(div1, null);
    			append_dev(div1, t4);
    			if (if_block3) if_block3.m(div1, null);
    			append_dev(div1, t5);
    			if (if_block4) if_block4.m(div1, null);
    			current = true;
    		},
    		p: function update(ctx, dirty) {
    			if (/*showError*/ ctx[7]) {
    				if (if_block0) {
    					if_block0.p(ctx, dirty);

    					if (dirty[0] & /*showError*/ 128) {
    						transition_in(if_block0, 1);
    					}
    				} else {
    					if_block0 = create_if_block_12(ctx);
    					if_block0.c();
    					transition_in(if_block0, 1);
    					if_block0.m(div1, t1);
    				}
    			} else if (if_block0) {
    				if_block0.d(1);
    				if_block0 = null;
    			}

    			if (!/*hiddenGame*/ ctx[3]) {
    				if (if_block1) {
    					if_block1.p(ctx, dirty);

    					if (dirty[0] & /*hiddenGame*/ 8) {
    						transition_in(if_block1, 1);
    					}
    				} else {
    					if_block1 = create_if_block_9(ctx);
    					if_block1.c();
    					transition_in(if_block1, 1);
    					if_block1.m(div1, t2);
    				}
    			} else if (if_block1) {
    				if_block1.d(1);
    				if_block1 = null;
    			}

    			if (!current || dirty[0] & /*hiddenGame*/ 8) {
    				prop_dev(div0, "hidden", /*hiddenGame*/ ctx[3]);
    			}

    			if (!/*hiddenGame*/ ctx[3]) {
    				if (if_block2) {
    					if_block2.p(ctx, dirty);
    				} else {
    					if_block2 = create_if_block_6(ctx);
    					if_block2.c();
    					if_block2.m(div1, t4);
    				}
    			} else if (if_block2) {
    				if_block2.d(1);
    				if_block2 = null;
    			}

    			if (/*showWaitPage*/ ctx[9]) {
    				if (if_block3) {
    					if (dirty[0] & /*showWaitPage*/ 512) {
    						transition_in(if_block3, 1);
    					}
    				} else {
    					if_block3 = create_if_block_5$1(ctx);
    					if_block3.c();
    					transition_in(if_block3, 1);
    					if_block3.m(div1, t5);
    				}
    			} else if (if_block3) {
    				if_block3.d(1);
    				if_block3 = null;
    			}

    			if (/*optionsAreNotSet*/ ctx[4]) {
    				if (if_block4) {
    					if_block4.p(ctx, dirty);

    					if (dirty[0] & /*optionsAreNotSet*/ 16) {
    						transition_in(if_block4, 1);
    					}
    				} else {
    					if_block4 = create_if_block$2(ctx);
    					if_block4.c();
    					transition_in(if_block4, 1);
    					if_block4.m(div1, null);
    				}
    			} else if (if_block4) {
    				if_block4.d(1);
    				if_block4 = null;
    			}
    		},
    		i: function intro(local) {
    			if (current) return;
    			transition_in(header.$$.fragment, local);
    			transition_in(if_block0);
    			transition_in(if_block1);
    			transition_in(if_block3);
    			transition_in(if_block4);
    			current = true;
    		},
    		o: function outro(local) {
    			transition_out(header.$$.fragment, local);
    			current = false;
    		},
    		d: function destroy(detaching) {
    			destroy_component(header, detaching);
    			if (detaching) detach_dev(t0);
    			if (detaching) detach_dev(div1);
    			if (if_block0) if_block0.d();
    			if (if_block1) if_block1.d();
    			if (if_block2) if_block2.d();
    			if (if_block3) if_block3.d();
    			if (if_block4) if_block4.d();
    		}
    	};

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

    	return block;
    }

    const gameAreaId$1 = "game_area";
    const watchGameStateIntervalRate$1 = 142;

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

    	//Game's stuff
    	const options = new InitOptions();

    	//boolean for html page
    	let hiddenGame = true;

    	let optionsAreNotSet = true;
    	let showGameOptions = true;
    	let showInvitations = false;
    	let showError = false;
    	let errorMessage = "";
    	let showWaitPage = false;
    	let invitations = [];
    	let watchGameStateInterval;

    	onMount(async () => {
    		$$invalidate(11, user = await fetch(`http://${'transcendance'}:${'8080'}/api/v2/user`).then(x => x.json()));
    		$$invalidate(1, allUsers = await fetch(`http://${'transcendance'}:${'8080'}/api/v2/user/all`).then(x => x.json()));
    		$$invalidate(2, options.playerOneUsername = user.username, options);
    	});

    	onDestroy(async () => {
    		clearInterval(watchGameStateInterval);
    		destroy$1();
    	});

    	function resetPage() {
    		$$invalidate(3, hiddenGame = true);
    		$$invalidate(4, optionsAreNotSet = true);
    		$$invalidate(5, showGameOptions = true);
    		$$invalidate(6, showInvitations = false);
    		$$invalidate(7, showError = false);
    		$$invalidate(9, showWaitPage = false);
    		options.reset(user.username);
    		destroy$1();
    	}

    	const initGame = async () => {
    		$$invalidate(4, optionsAreNotSet = false);
    		$$invalidate(9, showWaitPage = true);
    		const matchOptions = computeMatchOptions(options);

    		try {
    			const response = await fetch(`http://${'transcendance'}:${'8080'}/api/v2/game/ticket`, {
    				method: "POST",
    				headers: { 'Content-Type': 'application/json' },
    				body: JSON.stringify({
    					playerOneUsername: options.playerOneUsername,
    					playerTwoUsername: options.playerTwoUsername,
    					gameOptions: matchOptions,
    					isGameIsWithInvitation: options.isSomeoneIsInvited
    				})
    			});

    			console.log("status : " + response.status);
    			const responseBody = await response.json();
    			const token = responseBody.token;
    			$$invalidate(9, showWaitPage = false);

    			if (response.ok && token) {
    				watchGameStateInterval = setInterval(watchGameState, watchGameStateIntervalRate$1);
    				init$1(matchOptions, options, gameAreaId$1, token);
    				$$invalidate(3, hiddenGame = false);
    			} else {
    				console.log(responseBody);
    				console.log("On refuse le ticket");
    				$$invalidate(8, errorMessage = responseBody.message);
    				$$invalidate(7, showError = true);
    				options.reset(user.username);

    				setTimeout(
    					() => {
    						$$invalidate(4, optionsAreNotSet = true);
    						$$invalidate(7, showError = false);
    						$$invalidate(8, errorMessage = "");
    					},
    					5000
    				);
    			}
    		} catch(e) {
    			console.log(e);
    		}
    	};

    	const initGameForInvitedPlayer = async invitation => {
    		$$invalidate(4, optionsAreNotSet = false);
    		$$invalidate(9, showWaitPage = true);
    		console.log("invitation : ");
    		console.log(invitation);

    		if (invitation.token) {
    			watchGameStateInterval = setInterval(watchGameState, watchGameStateIntervalRate$1);
    			$$invalidate(2, options.playerOneUsername = invitation.playerOneUsername, options);
    			$$invalidate(2, options.playerTwoUsername = invitation.playerTwoUsername, options);
    			$$invalidate(2, options.isSomeoneIsInvited = true, options);
    			$$invalidate(2, options.isInvitedPerson = true, options);
    			init$1(invitation.gameOptions, options, gameAreaId$1, invitation.token);
    			$$invalidate(9, showWaitPage = false);
    			$$invalidate(3, hiddenGame = false);
    		}
    	};

    	const watchGameState = () => {
    		console.log("watchGameState");

    		if (gameState) {
    			// trigger Svelte reactivity
    			$$invalidate(0, gameState);

    			$$invalidate(0, gameState);
    			$$invalidate(0, gameState);
    		}

    		if (gameState.matchAborted || gameState.matchEnded) {
    			clearInterval(watchGameStateInterval);
    			console.log("watchGameState, end");

    			setTimeout(
    				() => {
    					resetPage();
    					console.log("watchGameState : setTimeout");
    				},
    				5000
    			);
    		}
    	};

    	const switchToGameOptions = () => {
    		$$invalidate(5, showGameOptions = true);
    		$$invalidate(6, showInvitations = false);
    	};

    	const fetchInvitations = async () => {
    		$$invalidate(5, showGameOptions = false);
    		$$invalidate(6, showInvitations = true);
    		$$invalidate(10, invitations = await fetch(`http://${'transcendance'}:${'8080'}/api/v2/game/invitations`).then(x => x.json()));
    	};

    	const rejectInvitation = async invitation => {
    		await fetch(`http://${'transcendance'}:${'8080'}/api/v2/game/decline`, {
    			method: "POST",
    			headers: { 'Content-Type': 'application/json' },
    			body: JSON.stringify({ token: invitation.token })
    		}).then(x => x.json()).catch(error => console.log(error));

    		fetchInvitations();
    	};

    	const acceptInvitation = async invitation => {
    		const res = await fetch(`http://${'transcendance'}:${'8080'}/api/v2/game/accept`, {
    			method: "POST",
    			headers: { 'Content-Type': 'application/json' },
    			body: JSON.stringify({ token: invitation.token })
    		}).catch(error => console.log(error));

    		if (res && res.ok) {
    			initGameForInvitedPlayer(invitation);
    		}
    	};

    	function leaveMatch() {
    		clearInterval(watchGameStateInterval);
    		resetPage();
    	}
    	const writable_props = [];

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

    	const $$binding_groups = [[]];

    	function input0_change_handler() {
    		options.multi_balls = this.checked;
    		$$invalidate(2, options);
    		$$invalidate(1, allUsers);
    	}

    	function input1_change_handler() {
    		options.moving_walls = this.checked;
    		$$invalidate(2, options);
    		$$invalidate(1, allUsers);
    	}

    	function input2_change_handler() {
    		options.sound = this.__value;
    		$$invalidate(2, options);
    		$$invalidate(1, allUsers);
    	}

    	function input3_change_handler() {
    		options.sound = this.__value;
    		$$invalidate(2, options);
    		$$invalidate(1, allUsers);
    	}

    	function input4_change_handler() {
    		options.isSomeoneIsInvited = this.checked;
    		$$invalidate(2, options);
    		$$invalidate(1, allUsers);
    	}

    	function select_change_handler() {
    		options.playerTwoUsername = select_value(this);
    		$$invalidate(2, options);
    		$$invalidate(1, allUsers);
    	}

    	const click_handler = invitation => acceptInvitation(invitation);
    	const click_handler_1 = invitation => rejectInvitation(invitation);

    	$$self.$capture_state = () => ({
    		onMount,
    		onDestroy,
    		Header,
    		fly,
    		pong,
    		gameState,
    		user,
    		allUsers,
    		options,
    		gameAreaId: gameAreaId$1,
    		hiddenGame,
    		optionsAreNotSet,
    		showGameOptions,
    		showInvitations,
    		showError,
    		errorMessage,
    		showWaitPage,
    		invitations,
    		watchGameStateInterval,
    		watchGameStateIntervalRate: watchGameStateIntervalRate$1,
    		resetPage,
    		initGame,
    		initGameForInvitedPlayer,
    		watchGameState,
    		switchToGameOptions,
    		fetchInvitations,
    		rejectInvitation,
    		acceptInvitation,
    		leaveMatch
    	});

    	$$self.$inject_state = $$props => {
    		if ('user' in $$props) $$invalidate(11, user = $$props.user);
    		if ('allUsers' in $$props) $$invalidate(1, allUsers = $$props.allUsers);
    		if ('hiddenGame' in $$props) $$invalidate(3, hiddenGame = $$props.hiddenGame);
    		if ('optionsAreNotSet' in $$props) $$invalidate(4, optionsAreNotSet = $$props.optionsAreNotSet);
    		if ('showGameOptions' in $$props) $$invalidate(5, showGameOptions = $$props.showGameOptions);
    		if ('showInvitations' in $$props) $$invalidate(6, showInvitations = $$props.showInvitations);
    		if ('showError' in $$props) $$invalidate(7, showError = $$props.showError);
    		if ('errorMessage' in $$props) $$invalidate(8, errorMessage = $$props.errorMessage);
    		if ('showWaitPage' in $$props) $$invalidate(9, showWaitPage = $$props.showWaitPage);
    		if ('invitations' in $$props) $$invalidate(10, invitations = $$props.invitations);
    		if ('watchGameStateInterval' in $$props) watchGameStateInterval = $$props.watchGameStateInterval;
    	};

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

    	return [
    		gameState,
    		allUsers,
    		options,
    		hiddenGame,
    		optionsAreNotSet,
    		showGameOptions,
    		showInvitations,
    		showError,
    		errorMessage,
    		showWaitPage,
    		invitations,
    		user,
    		initGame,
    		switchToGameOptions,
    		fetchInvitations,
    		rejectInvitation,
    		acceptInvitation,
    		leaveMatch,
    		input0_change_handler,
    		input1_change_handler,
    		input2_change_handler,
    		$$binding_groups,
    		input3_change_handler,
    		input4_change_handler,
    		select_change_handler,
    		click_handler,
    		click_handler_1
    	];
    }

    class Game extends SvelteComponentDev {
    	constructor(options) {
    		super(options);
    		init$2(this, options, instance$4, create_fragment$4, safe_not_equal, {}, null, [-1, -1]);

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

    /* src/pages/game/Ranking.svelte generated by Svelte v3.53.1 */
    const file$2 = "src/pages/game/Ranking.svelte";

    function get_each_context$1(ctx, list, i) {
    	const child_ctx = ctx.slice();
    	child_ctx[4] = list[i];
    	child_ctx[6] = i;
    	return child_ctx;
    }

    // (45:5) {:else}
    function create_else_block$1(ctx) {
    	let td;
    	let t_value = /*user*/ ctx[4].username + "";
    	let t;

    	const block = {
    		c: function create() {
    			td = element("td");
    			t = text(t_value);
    			attr_dev(td, "class", "svelte-i4zdir");
    			add_location(td, file$2, 45, 5, 1206);
    		},
    		m: function mount(target, anchor) {
    			insert_dev(target, td, anchor);
    			append_dev(td, t);
    		},
    		p: function update(ctx, dirty) {
    			if (dirty & /*allUsers*/ 2 && t_value !== (t_value = /*user*/ ctx[4].username + "")) set_data_dev(t, t_value);
    		},
    		d: function destroy(detaching) {
    			if (detaching) detach_dev(td);
    		}
    	};

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

    	return block;
    }

    // (43:5) {#if user.username === currentUser.username}
    function create_if_block$1(ctx) {
    	let td;
    	let b;
    	let t0;
    	let t1_value = /*user*/ ctx[4].username + "";
    	let t1;
    	let t2;

    	const block = {
    		c: function create() {
    			td = element("td");
    			b = element("b");
    			t0 = text("You (");
    			t1 = text(t1_value);
    			t2 = text(")");
    			add_location(b, file$2, 43, 10, 1154);
    			attr_dev(td, "class", "svelte-i4zdir");
    			add_location(td, file$2, 43, 6, 1150);
    		},
    		m: function mount(target, anchor) {
    			insert_dev(target, td, anchor);
    			append_dev(td, b);
    			append_dev(b, t0);
    			append_dev(b, t1);
    			append_dev(b, t2);
    		},
    		p: function update(ctx, dirty) {
    			if (dirty & /*allUsers*/ 2 && t1_value !== (t1_value = /*user*/ ctx[4].username + "")) set_data_dev(t1, t1_value);
    		},
    		d: function destroy(detaching) {
    			if (detaching) detach_dev(td);
    		}
    	};

    	dispatch_dev("SvelteRegisterBlock", {
    		block,
    		id: create_if_block$1.name,
    		type: "if",
    		source: "(43:5) {#if user.username === currentUser.username}",
    		ctx
    	});

    	return block;
    }

    // (40:3) {#each allUsers as user, i}
    function create_each_block$1(ctx) {
    	let tr;
    	let th;
    	let t0_value = /*i*/ ctx[6] + 1 + "";
    	let t0;
    	let t1;
    	let t2;
    	let td0;
    	let t3_value = /*user*/ ctx[4].stats.winGame + "";
    	let t3;
    	let t4;
    	let td1;
    	let t5_value = /*user*/ ctx[4].stats.loseGame + "";
    	let t5;
    	let t6;
    	let td2;
    	let t7_value = /*user*/ ctx[4].stats.drawGame + "";
    	let t7;
    	let t8;
    	let td3;
    	let t9_value = /*user*/ ctx[4].stats.totalGame + "";
    	let t9;
    	let t10;

    	function select_block_type(ctx, dirty) {
    		if (/*user*/ ctx[4].username === /*currentUser*/ ctx[0].username) return create_if_block$1;
    		return create_else_block$1;
    	}

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

    	const block = {
    		c: function create() {
    			tr = element("tr");
    			th = element("th");
    			t0 = text(t0_value);
    			t1 = space();
    			if_block.c();
    			t2 = space();
    			td0 = element("td");
    			t3 = text(t3_value);
    			t4 = space();
    			td1 = element("td");
    			t5 = text(t5_value);
    			t6 = space();
    			td2 = element("td");
    			t7 = text(t7_value);
    			t8 = space();
    			td3 = element("td");
    			t9 = text(t9_value);
    			t10 = space();
    			attr_dev(th, "class", "svelte-i4zdir");
    			add_location(th, file$2, 41, 5, 1077);
    			attr_dev(td0, "class", "svelte-i4zdir");
    			add_location(td0, file$2, 47, 5, 1247);
    			attr_dev(td1, "class", "svelte-i4zdir");
    			add_location(td1, file$2, 48, 5, 1282);
    			attr_dev(td2, "class", "svelte-i4zdir");
    			add_location(td2, file$2, 49, 5, 1318);
    			attr_dev(td3, "class", "svelte-i4zdir");
    			add_location(td3, file$2, 50, 5, 1354);
    			attr_dev(tr, "class", "svelte-i4zdir");
    			add_location(tr, file$2, 40, 4, 1067);
    		},
    		m: function mount(target, anchor) {
    			insert_dev(target, tr, anchor);
    			append_dev(tr, th);
    			append_dev(th, t0);
    			append_dev(tr, t1);
    			if_block.m(tr, null);
    			append_dev(tr, t2);
    			append_dev(tr, td0);
    			append_dev(td0, t3);
    			append_dev(tr, t4);
    			append_dev(tr, td1);
    			append_dev(td1, t5);
    			append_dev(tr, t6);
    			append_dev(tr, td2);
    			append_dev(td2, t7);
    			append_dev(tr, t8);
    			append_dev(tr, td3);
    			append_dev(td3, t9);
    			append_dev(tr, t10);
    		},
    		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(tr, t2);
    				}
    			}

    			if (dirty & /*allUsers*/ 2 && t3_value !== (t3_value = /*user*/ ctx[4].stats.winGame + "")) set_data_dev(t3, t3_value);
    			if (dirty & /*allUsers*/ 2 && t5_value !== (t5_value = /*user*/ ctx[4].stats.loseGame + "")) set_data_dev(t5, t5_value);
    			if (dirty & /*allUsers*/ 2 && t7_value !== (t7_value = /*user*/ ctx[4].stats.drawGame + "")) set_data_dev(t7, t7_value);
    			if (dirty & /*allUsers*/ 2 && t9_value !== (t9_value = /*user*/ ctx[4].stats.totalGame + "")) set_data_dev(t9, t9_value);
    		},
    		d: function destroy(detaching) {
    			if (detaching) detach_dev(tr);
    			if_block.d();
    		}
    	};

    	dispatch_dev("SvelteRegisterBlock", {
    		block,
    		id: create_each_block$1.name,
    		type: "each",
    		source: "(40:3) {#each allUsers as user, i}",
    		ctx
    	});

    	return block;
    }

    function create_fragment$3(ctx) {
    	let header;
    	let t0;
    	let br;
    	let t1;
    	let div;
    	let table;
    	let thead;
    	let tr;
    	let th0;
    	let t3;
    	let th1;
    	let t5;
    	let th2;
    	let t7;
    	let th3;
    	let t9;
    	let th4;
    	let t11;
    	let th5;
    	let t13;
    	let tbody;
    	let current;
    	header = new Header({ $$inline: true });
    	let each_value = /*allUsers*/ ctx[1];
    	validate_each_argument(each_value);
    	let each_blocks = [];

    	for (let i = 0; i < each_value.length; i += 1) {
    		each_blocks[i] = create_each_block$1(get_each_context$1(ctx, each_value, i));
    	}

    	const block = {
    		c: function create() {
    			create_component(header.$$.fragment);
    			t0 = space();
    			br = element("br");
    			t1 = space();
    			div = element("div");
    			table = element("table");
    			thead = element("thead");
    			tr = element("tr");
    			th0 = element("th");
    			th0.textContent = "#";
    			t3 = space();
    			th1 = element("th");
    			th1.textContent = "Username";
    			t5 = space();
    			th2 = element("th");
    			th2.textContent = "Win";
    			t7 = space();
    			th3 = element("th");
    			th3.textContent = "Lose";
    			t9 = space();
    			th4 = element("th");
    			th4.textContent = "Draw";
    			t11 = space();
    			th5 = element("th");
    			th5.textContent = "Games Played";
    			t13 = space();
    			tbody = element("tbody");

    			for (let i = 0; i < each_blocks.length; i += 1) {
    				each_blocks[i].c();
    			}

    			add_location(br, file$2, 24, 0, 803);
    			attr_dev(th0, "class", "svelte-i4zdir");
    			add_location(th0, file$2, 30, 4, 890);
    			attr_dev(th1, "class", "svelte-i4zdir");
    			add_location(th1, file$2, 31, 4, 905);
    			attr_dev(th2, "class", "svelte-i4zdir");
    			add_location(th2, file$2, 32, 4, 927);
    			attr_dev(th3, "class", "svelte-i4zdir");
    			add_location(th3, file$2, 33, 4, 944);
    			attr_dev(th4, "class", "svelte-i4zdir");
    			add_location(th4, file$2, 34, 4, 962);
    			attr_dev(th5, "class", "svelte-i4zdir");
    			add_location(th5, file$2, 35, 4, 980);
    			attr_dev(tr, "class", "svelte-i4zdir");
    			add_location(tr, file$2, 29, 3, 881);
    			add_location(thead, file$2, 28, 2, 870);
    			add_location(tbody, file$2, 38, 2, 1024);
    			attr_dev(table, "class", "stats-table svelte-i4zdir");
    			add_location(table, file$2, 27, 1, 840);
    			attr_dev(div, "class", "principal-div svelte-i4zdir");
    			add_location(div, file$2, 26, 0, 811);
    		},
    		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, t0, anchor);
    			insert_dev(target, br, anchor);
    			insert_dev(target, t1, anchor);
    			insert_dev(target, div, anchor);
    			append_dev(div, table);
    			append_dev(table, thead);
    			append_dev(thead, tr);
    			append_dev(tr, th0);
    			append_dev(tr, t3);
    			append_dev(tr, th1);
    			append_dev(tr, t5);
    			append_dev(tr, th2);
    			append_dev(tr, t7);
    			append_dev(tr, th3);
    			append_dev(tr, t9);
    			append_dev(tr, th4);
    			append_dev(tr, t11);
    			append_dev(tr, th5);
    			append_dev(table, t13);
    			append_dev(table, tbody);

    			for (let i = 0; i < each_blocks.length; i += 1) {
    				each_blocks[i].m(tbody, null);
    			}

    			current = true;
    		},
    		p: function update(ctx, [dirty]) {
    			if (dirty & /*allUsers, currentUser*/ 3) {
    				each_value = /*allUsers*/ ctx[1];
    				validate_each_argument(each_value);
    				let i;

    				for (i = 0; i < each_value.length; i += 1) {
    					const child_ctx = get_each_context$1(ctx, each_value, i);

    					if (each_blocks[i]) {
    						each_blocks[i].p(child_ctx, dirty);
    					} else {
    						each_blocks[i] = create_each_block$1(child_ctx);
    						each_blocks[i].c();
    						each_blocks[i].m(tbody, null);
    					}
    				}

    				for (; i < each_blocks.length; i += 1) {
    					each_blocks[i].d(1);
    				}

    				each_blocks.length = each_value.length;
    			}
    		},
    		i: function intro(local) {
    			if (current) return;
    			transition_in(header.$$.fragment, local);
    			current = true;
    		},
    		o: function outro(local) {
    			transition_out(header.$$.fragment, local);
    			current = false;
    		},
    		d: function destroy(detaching) {
    			destroy_component(header, detaching);
    			if (detaching) detach_dev(t0);
    			if (detaching) detach_dev(br);
    			if (detaching) detach_dev(t1);
    			if (detaching) detach_dev(div);
    			destroy_each(each_blocks, detaching);
    		}
    	};

    	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('Ranking', slots, []);
    	let currentUser;
    	let allUsers = [];
    	let idInterval;

    	onMount(async () => {
    		$$invalidate(0, currentUser = await fetch(`http://${'transcendance'}:${'8080'}/api/v2/user`).then(x => x.json()));
    		$$invalidate(1, allUsers = await fetch(`http://${'transcendance'}:${'8080'}/api/v2/game/ranking`).then(x => x.json()));
    		idInterval = setInterval(fetchScores, 10000);
    	});

    	onDestroy(async () => {
    		clearInterval(idInterval);
    	});

    	function fetchScores() {
    		fetch(`http://${'transcendance'}:${'8080'}/api/v2/game/ranking`).then(x => x.json()).then(x => $$invalidate(1, allUsers = x));
    	}

    	const writable_props = [];

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

    	$$self.$capture_state = () => ({
    		onMount,
    		onDestroy,
    		Header,
    		currentUser,
    		allUsers,
    		idInterval,
    		fetchScores
    	});

    	$$self.$inject_state = $$props => {
    		if ('currentUser' in $$props) $$invalidate(0, currentUser = $$props.currentUser);
    		if ('allUsers' in $$props) $$invalidate(1, allUsers = $$props.allUsers);
    		if ('idInterval' in $$props) idInterval = $$props.idInterval;
    	};

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

    	return [currentUser, allUsers];
    }

    class Ranking extends SvelteComponentDev {
    	constructor(options) {
    		super(options);
    		init$2(this, options, instance$3, create_fragment$3, safe_not_equal, {});

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

    function init(matchOptions, sound, gameAreaId, gameSessionId) {
        initBase(matchOptions, sound, gameAreaId);
        setStartFunction(start);
        initWebSocketSpectator(gameSessionId);
    }
    function destroy() {
        destroyBase();
    }
    function start() {
        resume();
    }
    function resume() {
        pong$1.gameLoopInterval = window.setInterval(gameLoopSpectator, gameLoopIntervalMS);
        pong$1.drawLoopInterval = window.setInterval(drawLoop, drawLoopIntervalMS);
    }

    var pongSpectator = /*#__PURE__*/Object.freeze({
        __proto__: null,
        init: init,
        destroy: destroy,
        computeMatchOptions: computeMatchOptions,
        get MatchOptions () { return MatchOptions; }
    });

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

    function create_fragment$2(ctx) {
    	let li;
    	let button;
    	let t0;
    	let t1_value = /*match*/ ctx[0].playerOneUsername + "";
    	let t1;
    	let t2;
    	let t3_value = /*match*/ ctx[0].playerTwoUsername + "";
    	let t3;
    	let t4;
    	let br;
    	let t5;
    	let t6;
    	let t7;
    	let mounted;
    	let dispose;

    	const block = {
    		c: function create() {
    			li = element("li");
    			button = element("button");
    			t0 = text("\"");
    			t1 = text(t1_value);
    			t2 = text("\" VS \"");
    			t3 = text(t3_value);
    			t4 = text("\"\n\t\t");
    			br = element("br");
    			t5 = text(" [");
    			t6 = text(/*matchOptionsString*/ ctx[1]);
    			t7 = text("]");
    			add_location(br, file$1, 27, 2, 754);
    			add_location(button, file$1, 25, 1, 673);
    			add_location(li, file$1, 24, 0, 667);
    		},
    		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, li, anchor);
    			append_dev(li, button);
    			append_dev(button, t0);
    			append_dev(button, t1);
    			append_dev(button, t2);
    			append_dev(button, t3);
    			append_dev(button, t4);
    			append_dev(button, br);
    			append_dev(button, t5);
    			append_dev(button, t6);
    			append_dev(button, t7);

    			if (!mounted) {
    				dispose = listen_dev(button, "click", /*click_handler*/ ctx[2], false, false, false);
    				mounted = true;
    			}
    		},
    		p: function update(ctx, [dirty]) {
    			if (dirty & /*match*/ 1 && t1_value !== (t1_value = /*match*/ ctx[0].playerOneUsername + "")) set_data_dev(t1, t1_value);
    			if (dirty & /*match*/ 1 && t3_value !== (t3_value = /*match*/ ctx[0].playerTwoUsername + "")) set_data_dev(t3, t3_value);
    			if (dirty & /*matchOptionsString*/ 2) set_data_dev(t6, /*matchOptionsString*/ ctx[1]);
    		},
    		i: noop,
    		o: noop,
    		d: function destroy(detaching) {
    			if (detaching) detach_dev(li);
    			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('MatchListElem', slots, []);
    	let { match } = $$props;
    	let matchOptionsString = "";

    	onMount(async () => {
    		if (match.gameOptions === MatchOptions.noOption) {
    			$$invalidate(1, matchOptionsString = "standard");
    		} else {
    			if (match.gameOptions & MatchOptions.multiBalls) {
    				$$invalidate(1, matchOptionsString += "multi balls");
    			}

    			if (match.gameOptions & MatchOptions.movingWalls) {
    				if (matchOptionsString) {
    					$$invalidate(1, matchOptionsString += ", ");
    				}

    				$$invalidate(1, matchOptionsString += "moving walls");
    			}
    		}
    	});

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

    	const writable_props = ['match'];

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

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

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

    	$$self.$capture_state = () => ({
    		onMount,
    		MatchOptions,
    		match,
    		matchOptionsString
    	});

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

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

    	return [match, matchOptionsString, click_handler];
    }

    class MatchListElem extends SvelteComponentDev {
    	constructor(options) {
    		super(options);
    		init$2(this, options, instance$2, create_fragment$2, safe_not_equal, { match: 0 });

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

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

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

    /* src/pages/game/GameSpectator.svelte generated by Svelte v3.53.1 */

    const { console: console_1$1 } = globals;
    const file = "src/pages/game/GameSpectator.svelte";

    function get_each_context(ctx, list, i) {
    	const child_ctx = ctx.slice();
    	child_ctx[16] = list[i];
    	return child_ctx;
    }

    // (78:1) {#if !hiddenGame}
    function create_if_block_4(ctx) {
    	let if_block_anchor;
    	let if_block = /*gameState*/ ctx[0].matchEnded && create_if_block_5(ctx);

    	const block = {
    		c: function create() {
    			if (if_block) if_block.c();
    			if_block_anchor = empty$1();
    		},
    		m: function mount(target, anchor) {
    			if (if_block) if_block.m(target, anchor);
    			insert_dev(target, if_block_anchor, anchor);
    		},
    		p: function update(ctx, dirty) {
    			if (/*gameState*/ ctx[0].matchEnded) {
    				if (if_block) {
    					if (dirty & /*gameState*/ 1) {
    						transition_in(if_block, 1);
    					}
    				} else {
    					if_block = create_if_block_5(ctx);
    					if_block.c();
    					transition_in(if_block, 1);
    					if_block.m(if_block_anchor.parentNode, if_block_anchor);
    				}
    			} else if (if_block) {
    				if_block.d(1);
    				if_block = null;
    			}
    		},
    		i: function intro(local) {
    			transition_in(if_block);
    		},
    		o: noop,
    		d: function destroy(detaching) {
    			if (if_block) if_block.d(detaching);
    			if (detaching) detach_dev(if_block_anchor);
    		}
    	};

    	dispatch_dev("SvelteRegisterBlock", {
    		block,
    		id: create_if_block_4.name,
    		type: "if",
    		source: "(78:1) {#if !hiddenGame}",
    		ctx
    	});

    	return block;
    }

    // (79:2) {#if gameState.matchEnded}
    function create_if_block_5(ctx) {
    	let div;
    	let p;
    	let div_intro;

    	const block = {
    		c: function create() {
    			div = element("div");
    			p = element("p");
    			p.textContent = "The match is finished !";
    			add_location(p, file, 80, 4, 2666);
    			attr_dev(div, "class", "div_game svelte-gdg3py");
    			add_location(div, file, 79, 3, 2602);
    		},
    		m: function mount(target, anchor) {
    			insert_dev(target, div, anchor);
    			append_dev(div, p);
    		},
    		i: function intro(local) {
    			if (!div_intro) {
    				add_render_callback(() => {
    					div_intro = create_in_transition(div, fly, { y: 10, duration: 1000 });
    					div_intro.start();
    				});
    			}
    		},
    		o: noop,
    		d: function destroy(detaching) {
    			if (detaching) detach_dev(div);
    		}
    	};

    	dispatch_dev("SvelteRegisterBlock", {
    		block,
    		id: create_if_block_5.name,
    		type: "if",
    		source: "(79:2) {#if gameState.matchEnded}",
    		ctx
    	});

    	return block;
    }

    // (90:1) {#if !hiddenGame}
    function create_if_block_2(ctx) {
    	let if_block_anchor;
    	let if_block = !/*gameState*/ ctx[0].matchEnded && create_if_block_3(ctx);

    	const block = {
    		c: function create() {
    			if (if_block) if_block.c();
    			if_block_anchor = empty$1();
    		},
    		m: function mount(target, anchor) {
    			if (if_block) if_block.m(target, anchor);
    			insert_dev(target, if_block_anchor, anchor);
    		},
    		p: function update(ctx, dirty) {
    			if (!/*gameState*/ ctx[0].matchEnded) {
    				if (if_block) {
    					if_block.p(ctx, dirty);
    				} else {
    					if_block = create_if_block_3(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 (if_block) if_block.d(detaching);
    			if (detaching) detach_dev(if_block_anchor);
    		}
    	};

    	dispatch_dev("SvelteRegisterBlock", {
    		block,
    		id: create_if_block_2.name,
    		type: "if",
    		source: "(90:1) {#if !hiddenGame}",
    		ctx
    	});

    	return block;
    }

    // (91:2) {#if !gameState.matchEnded}
    function create_if_block_3(ctx) {
    	let div;
    	let button;
    	let mounted;
    	let dispose;

    	const block = {
    		c: function create() {
    			div = element("div");
    			button = element("button");
    			button.textContent = "leave";
    			attr_dev(button, "class", "pong_button svelte-gdg3py");
    			add_location(button, file, 92, 4, 2888);
    			attr_dev(div, "class", "div_game svelte-gdg3py");
    			add_location(div, file, 91, 3, 2861);
    		},
    		m: function mount(target, anchor) {
    			insert_dev(target, div, anchor);
    			append_dev(div, button);

    			if (!mounted) {
    				dispose = listen_dev(button, "click", /*leaveMatch*/ ctx[5], 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_if_block_3.name,
    		type: "if",
    		source: "(91:2) {#if !gameState.matchEnded}",
    		ctx
    	});

    	return block;
    }

    // (100:1) {#if hiddenGame}
    function create_if_block(ctx) {
    	let div1;
    	let fieldset;
    	let legend;
    	let t1;
    	let button;
    	let t3;
    	let div0;
    	let p;
    	let t5;
    	let input0;
    	let t6;
    	let label0;
    	let t8;
    	let input1;
    	let t9;
    	let label1;
    	let t11;
    	let current_block_type_index;
    	let if_block;
    	let div1_intro;
    	let current;
    	let mounted;
    	let dispose;
    	const if_block_creators = [create_if_block_1, create_else_block];
    	const if_blocks = [];

    	function select_block_type(ctx, dirty) {
    		if (/*matchList*/ ctx[2].length !== 0) 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() {
    			div1 = element("div");
    			fieldset = element("fieldset");
    			legend = element("legend");
    			legend.textContent = "options";
    			t1 = space();
    			button = element("button");
    			button.textContent = "Reload";
    			t3 = space();
    			div0 = element("div");
    			p = element("p");
    			p.textContent = "sound :";
    			t5 = space();
    			input0 = element("input");
    			t6 = space();
    			label0 = element("label");
    			label0.textContent = "on";
    			t8 = space();
    			input1 = element("input");
    			t9 = space();
    			label1 = element("label");
    			label1.textContent = "off";
    			t11 = space();
    			if_block.c();
    			add_location(legend, file, 102, 4, 3088);
    			attr_dev(button, "class", "pong_button svelte-gdg3py");
    			add_location(button, file, 103, 4, 3117);
    			add_location(p, file, 105, 5, 3202);
    			attr_dev(input0, "type", "radio");
    			attr_dev(input0, "id", "sound_on");
    			attr_dev(input0, "name", "sound_selector");
    			input0.__value = "on";
    			input0.value = input0.__value;
    			/*$$binding_groups*/ ctx[8][0].push(input0);
    			add_location(input0, file, 106, 5, 3222);
    			attr_dev(label0, "for", "sound_on");
    			add_location(label0, file, 107, 5, 3314);
    			attr_dev(input1, "type", "radio");
    			attr_dev(input1, "id", "sound_off");
    			attr_dev(input1, "name", "sound_selector");
    			input1.__value = "off";
    			input1.value = input1.__value;
    			/*$$binding_groups*/ ctx[8][0].push(input1);
    			add_location(input1, file, 108, 5, 3352);
    			attr_dev(label1, "for", "sound_off");
    			add_location(label1, file, 109, 5, 3446);
    			attr_dev(div0, "class", "svelte-gdg3py");
    			add_location(div0, file, 104, 4, 3191);
    			attr_dev(fieldset, "class", "svelte-gdg3py");
    			add_location(fieldset, file, 101, 3, 3073);
    			attr_dev(div1, "class", "div_game svelte-gdg3py");
    			add_location(div1, file, 100, 2, 3010);
    		},
    		m: function mount(target, anchor) {
    			insert_dev(target, div1, anchor);
    			append_dev(div1, fieldset);
    			append_dev(fieldset, legend);
    			append_dev(fieldset, t1);
    			append_dev(fieldset, button);
    			append_dev(fieldset, t3);
    			append_dev(fieldset, div0);
    			append_dev(div0, p);
    			append_dev(div0, t5);
    			append_dev(div0, input0);
    			input0.checked = input0.__value === /*sound*/ ctx[1];
    			append_dev(div0, t6);
    			append_dev(div0, label0);
    			append_dev(div0, t8);
    			append_dev(div0, input1);
    			input1.checked = input1.__value === /*sound*/ ctx[1];
    			append_dev(div0, t9);
    			append_dev(div0, label1);
    			append_dev(div1, t11);
    			if_blocks[current_block_type_index].m(div1, null);
    			current = true;

    			if (!mounted) {
    				dispose = [
    					listen_dev(button, "click", /*fetchMatchList*/ ctx[6], false, false, false),
    					listen_dev(input0, "change", /*input0_change_handler*/ ctx[7]),
    					listen_dev(input1, "change", /*input1_change_handler*/ ctx[9])
    				];

    				mounted = true;
    			}
    		},
    		p: function update(ctx, dirty) {
    			if (dirty & /*sound*/ 2) {
    				input0.checked = input0.__value === /*sound*/ ctx[1];
    			}

    			if (dirty & /*sound*/ 2) {
    				input1.checked = input1.__value === /*sound*/ ctx[1];
    			}

    			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(div1, null);
    			}
    		},
    		i: function intro(local) {
    			if (current) return;
    			transition_in(if_block);

    			if (!div1_intro) {
    				add_render_callback(() => {
    					div1_intro = create_in_transition(div1, fly, { y: 10, duration: 1000 });
    					div1_intro.start();
    				});
    			}

    			current = true;
    		},
    		o: function outro(local) {
    			transition_out(if_block);
    			current = false;
    		},
    		d: function destroy(detaching) {
    			if (detaching) detach_dev(div1);
    			/*$$binding_groups*/ ctx[8][0].splice(/*$$binding_groups*/ ctx[8][0].indexOf(input0), 1);
    			/*$$binding_groups*/ ctx[8][0].splice(/*$$binding_groups*/ ctx[8][0].indexOf(input1), 1);
    			if_blocks[current_block_type_index].d();
    			mounted = false;
    			run_all(dispose);
    		}
    	};

    	dispatch_dev("SvelteRegisterBlock", {
    		block,
    		id: create_if_block.name,
    		type: "if",
    		source: "(100:1) {#if hiddenGame}",
    		ctx
    	});

    	return block;
    }

    // (119:3) {:else}
    function create_else_block(ctx) {
    	let p;

    	const block = {
    		c: function create() {
    			p = element("p");
    			p.textContent = "no match ongoing";
    			add_location(p, file, 119, 4, 3761);
    		},
    		m: function mount(target, anchor) {
    			insert_dev(target, p, anchor);
    		},
    		p: noop,
    		i: noop,
    		o: noop,
    		d: function destroy(detaching) {
    			if (detaching) detach_dev(p);
    		}
    	};

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

    	return block;
    }

    // (113:3) {#if matchList.length !== 0}
    function create_if_block_1(ctx) {
    	let menu;
    	let current;
    	let each_value = /*matchList*/ ctx[2];
    	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 out = i => transition_out(each_blocks[i], 1, 1, () => {
    		each_blocks[i] = null;
    	});

    	const block = {
    		c: function create() {
    			menu = element("menu");

    			for (let i = 0; i < each_blocks.length; i += 1) {
    				each_blocks[i].c();
    			}

    			attr_dev(menu, "id", "match_list");
    			attr_dev(menu, "class", "svelte-gdg3py");
    			add_location(menu, file, 113, 4, 3543);
    		},
    		m: function mount(target, anchor) {
    			insert_dev(target, menu, anchor);

    			for (let i = 0; i < each_blocks.length; i += 1) {
    				each_blocks[i].m(menu, null);
    			}

    			current = true;
    		},
    		p: function update(ctx, dirty) {
    			if (dirty & /*matchList, initGameSpectator*/ 20) {
    				each_value = /*matchList*/ ctx[2];
    				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);
    						transition_in(each_blocks[i], 1);
    					} else {
    						each_blocks[i] = create_each_block(child_ctx);
    						each_blocks[i].c();
    						transition_in(each_blocks[i], 1);
    						each_blocks[i].m(menu, null);
    					}
    				}

    				group_outros();

    				for (i = each_value.length; i < each_blocks.length; i += 1) {
    					out(i);
    				}

    				check_outros();
    			}
    		},
    		i: function intro(local) {
    			if (current) return;

    			for (let i = 0; i < each_value.length; i += 1) {
    				transition_in(each_blocks[i]);
    			}

    			current = true;
    		},
    		o: function outro(local) {
    			each_blocks = each_blocks.filter(Boolean);

    			for (let i = 0; i < each_blocks.length; i += 1) {
    				transition_out(each_blocks[i]);
    			}

    			current = false;
    		},
    		d: function destroy(detaching) {
    			if (detaching) detach_dev(menu);
    			destroy_each(each_blocks, detaching);
    		}
    	};

    	dispatch_dev("SvelteRegisterBlock", {
    		block,
    		id: create_if_block_1.name,
    		type: "if",
    		source: "(113:3) {#if matchList.length !== 0}",
    		ctx
    	});

    	return block;
    }

    // (115:5) {#each matchList as match}
    function create_each_block(ctx) {
    	let matchlistelem;
    	let current;

    	function click_handler(...args) {
    		return /*click_handler*/ ctx[10](/*match*/ ctx[16], ...args);
    	}

    	matchlistelem = new MatchListElem({
    			props: { match: /*match*/ ctx[16] },
    			$$inline: true
    		});

    	matchlistelem.$on("click", click_handler);

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

    	dispatch_dev("SvelteRegisterBlock", {
    		block,
    		id: create_each_block.name,
    		type: "each",
    		source: "(115:5) {#each matchList as match}",
    		ctx
    	});

    	return block;
    }

    function create_fragment$1(ctx) {
    	let header;
    	let t0;
    	let div1;
    	let t1;
    	let div0;
    	let canvas;
    	let t2;
    	let t3;
    	let current;
    	header = new Header({ $$inline: true });
    	let if_block0 = !/*hiddenGame*/ ctx[3] && create_if_block_4(ctx);
    	let if_block1 = !/*hiddenGame*/ ctx[3] && create_if_block_2(ctx);
    	let if_block2 = /*hiddenGame*/ ctx[3] && create_if_block(ctx);

    	const block = {
    		c: function create() {
    			create_component(header.$$.fragment);
    			t0 = space();
    			div1 = element("div");
    			if (if_block0) if_block0.c();
    			t1 = space();
    			div0 = element("div");
    			canvas = element("canvas");
    			t2 = space();
    			if (if_block1) if_block1.c();
    			t3 = space();
    			if (if_block2) if_block2.c();
    			attr_dev(canvas, "id", gameAreaId);
    			attr_dev(canvas, "class", "svelte-gdg3py");
    			add_location(canvas, file, 86, 2, 2774);
    			attr_dev(div0, "id", "canvas_container");
    			div0.hidden = /*hiddenGame*/ ctx[3];
    			attr_dev(div0, "class", "svelte-gdg3py");
    			add_location(div0, file, 85, 1, 2724);
    			attr_dev(div1, "id", "game_page");
    			attr_dev(div1, "class", "svelte-gdg3py");
    			add_location(div1, file, 75, 0, 2529);
    		},
    		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, t0, anchor);
    			insert_dev(target, div1, anchor);
    			if (if_block0) if_block0.m(div1, null);
    			append_dev(div1, t1);
    			append_dev(div1, div0);
    			append_dev(div0, canvas);
    			append_dev(div1, t2);
    			if (if_block1) if_block1.m(div1, null);
    			append_dev(div1, t3);
    			if (if_block2) if_block2.m(div1, null);
    			current = true;
    		},
    		p: function update(ctx, [dirty]) {
    			if (!/*hiddenGame*/ ctx[3]) {
    				if (if_block0) {
    					if_block0.p(ctx, dirty);

    					if (dirty & /*hiddenGame*/ 8) {
    						transition_in(if_block0, 1);
    					}
    				} else {
    					if_block0 = create_if_block_4(ctx);
    					if_block0.c();
    					transition_in(if_block0, 1);
    					if_block0.m(div1, t1);
    				}
    			} else if (if_block0) {
    				if_block0.d(1);
    				if_block0 = null;
    			}

    			if (!current || dirty & /*hiddenGame*/ 8) {
    				prop_dev(div0, "hidden", /*hiddenGame*/ ctx[3]);
    			}

    			if (!/*hiddenGame*/ ctx[3]) {
    				if (if_block1) {
    					if_block1.p(ctx, dirty);
    				} else {
    					if_block1 = create_if_block_2(ctx);
    					if_block1.c();
    					if_block1.m(div1, t3);
    				}
    			} else if (if_block1) {
    				if_block1.d(1);
    				if_block1 = null;
    			}

    			if (/*hiddenGame*/ ctx[3]) {
    				if (if_block2) {
    					if_block2.p(ctx, dirty);

    					if (dirty & /*hiddenGame*/ 8) {
    						transition_in(if_block2, 1);
    					}
    				} else {
    					if_block2 = create_if_block(ctx);
    					if_block2.c();
    					transition_in(if_block2, 1);
    					if_block2.m(div1, null);
    				}
    			} else if (if_block2) {
    				group_outros();

    				transition_out(if_block2, 1, 1, () => {
    					if_block2 = null;
    				});

    				check_outros();
    			}
    		},
    		i: function intro(local) {
    			if (current) return;
    			transition_in(header.$$.fragment, local);
    			transition_in(if_block0);
    			transition_in(if_block2);
    			current = true;
    		},
    		o: function outro(local) {
    			transition_out(header.$$.fragment, local);
    			transition_out(if_block2);
    			current = false;
    		},
    		d: function destroy(detaching) {
    			destroy_component(header, detaching);
    			if (detaching) detach_dev(t0);
    			if (detaching) detach_dev(div1);
    			if (if_block0) if_block0.d();
    			if (if_block1) if_block1.d();
    			if (if_block2) if_block2.d();
    		}
    	};

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

    	return block;
    }

    const gameAreaId = "game_area";
    const watchGameStateIntervalRate = 142;

    function instance$1($$self, $$props, $$invalidate) {
    	let { $$slots: slots = {}, $$scope } = $$props;
    	validate_slots('GameSpectator', slots, []);
    	let user;
    	let allUsers;
    	let sound = "off";
    	let matchList = [];

    	//html boolean for pages
    	let hiddenGame = true;

    	let watchGameStateInterval;

    	onMount(async () => {
    		user = await fetch(`http://${'transcendance'}:${'8080'}/api/v2/user`).then(x => x.json());
    		allUsers = await fetch(`http://${'transcendance'}:${'8080'}/api/v2/user/all`).then(x => x.json());
    		const responseForMatchList = await fetch(`http://${'transcendance'}:${'8080'}/api/v2/game/match/all`);
    		const jsonForMatchList = await responseForMatchList.json();
    		$$invalidate(2, matchList = jsonForMatchList);
    	});

    	onDestroy(async () => {
    		clearInterval(watchGameStateInterval);
    		destroy();
    	});

    	async function initGameSpectator(gameSessionId, matchOptions) {
    		watchGameStateInterval = setInterval(watchGameState, watchGameStateIntervalRate);
    		init(matchOptions, sound, gameAreaId, gameSessionId);
    		$$invalidate(3, hiddenGame = false);
    	}

    	const watchGameState = () => {
    		console.log("watchGameState");

    		if (gameState) {
    			// trigger Svelte reactivity
    			$$invalidate(0, gameState);

    			$$invalidate(0, gameState);
    			$$invalidate(0, gameState);
    		}

    		if (gameState.matchAborted || gameState.matchEnded) {
    			clearInterval(watchGameStateInterval);
    			console.log("watchGameState, end");

    			setTimeout(
    				() => {
    					resetPage();
    					console.log("watchGameState : setTimeout");
    				},
    				5000
    			);
    		}
    	};

    	function leaveMatch() {
    		clearInterval(watchGameStateInterval);
    		resetPage();
    	}

    	async function resetPage() {
    		$$invalidate(3, hiddenGame = true);
    		destroy();
    		fetchMatchList();
    	}

    	async function fetchMatchList() {
    		$$invalidate(2, matchList = await fetch(`http://${'transcendance'}:${'8080'}/api/v2/game/match/all`).then(x => x.json()));
    	}
    	const writable_props = [];

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

    	const $$binding_groups = [[]];

    	function input0_change_handler() {
    		sound = this.__value;
    		$$invalidate(1, sound);
    	}

    	function input1_change_handler() {
    		sound = this.__value;
    		$$invalidate(1, sound);
    	}

    	const click_handler = (match, e) => initGameSpectator(match.gameServerIdOfTheMatch, match.gameOptions);

    	$$self.$capture_state = () => ({
    		onMount,
    		onDestroy,
    		Header,
    		MatchListElem,
    		fly,
    		pongSpectator,
    		gameState,
    		user,
    		allUsers,
    		gameAreaId,
    		sound,
    		matchList,
    		hiddenGame,
    		watchGameStateInterval,
    		watchGameStateIntervalRate,
    		initGameSpectator,
    		watchGameState,
    		leaveMatch,
    		resetPage,
    		fetchMatchList
    	});

    	$$self.$inject_state = $$props => {
    		if ('user' in $$props) user = $$props.user;
    		if ('allUsers' in $$props) allUsers = $$props.allUsers;
    		if ('sound' in $$props) $$invalidate(1, sound = $$props.sound);
    		if ('matchList' in $$props) $$invalidate(2, matchList = $$props.matchList);
    		if ('hiddenGame' in $$props) $$invalidate(3, hiddenGame = $$props.hiddenGame);
    		if ('watchGameStateInterval' in $$props) watchGameStateInterval = $$props.watchGameStateInterval;
    	};

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

    	return [
    		gameState,
    		sound,
    		matchList,
    		hiddenGame,
    		initGameSpectator,
    		leaveMatch,
    		fetchMatchList,
    		input0_change_handler,
    		$$binding_groups,
    		input1_change_handler,
    		click_handler
    	];
    }

    class GameSpectator extends SvelteComponentDev {
    	constructor(options) {
    		super(options);
    		init$2(this, options, instance$1, create_fragment$1, safe_not_equal, {});

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

    const primaryRoutes = {
      '/': SplashPage,
      '/2fa': TwoFactorAuthentication,
      '/game': wrap$1({
        component: Game,
        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;
          }
        ]
      }),
      '/spectator': wrap$1({
        component: GameSpectator,
        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;
          }
        ]
      }),
      '/ranking': wrap$1({
        component: Ranking,
        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;
          }
        ]
      }),
      '/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;
          }
        ]
      }),
      '/unauthorized-access': UnauthorizedAccessPage,
      '*': 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');
    		replace('/');
    	};

    	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$2(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
