(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 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 compute_slots(slots) {
        const result = {};
        for (const key in slots) {
            result[key] = true;
        }
        return result;
    }
    function null_to_empty(value) {
        return value == null ? '' : value;
    }

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

    const globals = (typeof window !== 'undefined'
        ? window
        : typeof globalThis !== 'undefined'
            ? globalThis
            : global);
    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() {
        return text('');
    }
    function comment(content) {
        return document.createComment(content);
    }
    function listen(node, event, handler, options) {
        node.addEventListener(event, handler, options);
        return () => node.removeEventListener(event, handler, options);
    }
    function attr(node, attribute, value) {
        if (value == null)
            node.removeAttribute(attribute);
        else if (node.getAttribute(attribute) !== value)
            node.setAttribute(attribute, value);
    }
    function to_number(value) {
        return value === '' ? null : +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, mounting) {
        for (let i = 0; i < select.options.length; i += 1) {
            const option = select.options[i];
            if (option.__value === value) {
                option.selected = true;
                return;
            }
        }
        if (!mounting || value !== undefined) {
            select.selectedIndex = -1; // no option should be selected
        }
    }
    function select_value(select) {
        const selected_option = select.querySelector(':checked');
        return selected_option && selected_option.__value;
    }
    function custom_event(type, detail, { bubbles = false, cancelable = false } = {}) {
        const e = document.createEvent('CustomEvent');
        e.initCustomEvent(type, bubbles, cancelable, detail);
        return e;
    }

    // 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 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 = [];
    let render_callbacks = [];
    const flush_callbacks = [];
    const resolved_promise = /* @__PURE__ */ Promise.resolve();
    let update_scheduled = false;
    function schedule_update() {
        if (!update_scheduled) {
            update_scheduled = true;
            resolved_promise.then(flush);
        }
    }
    function add_render_callback(fn) {
        render_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() {
        // Do not reenter flush while dirty components are updated, as this can
        // result in an infinite loop. Instead, let the inner flush handle it.
        // Reentrancy is ok afterwards for bindings etc.
        if (flushidx !== 0) {
            return;
        }
        const saved_component = current_component;
        do {
            // first, call beforeUpdate functions
            // and update components
            try {
                while (flushidx < dirty_components.length) {
                    const component = dirty_components[flushidx];
                    flushidx++;
                    set_current_component(component);
                    update(component.$$);
                }
            }
            catch (e) {
                // reset dirty state to not end up in a deadlocked state and then rethrow
                dirty_components.length = 0;
                flushidx = 0;
                throw e;
            }
            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);
        }
    }
    /**
     * Useful for example to execute remaining `afterUpdate` callbacks before executing `destroy`.
     */
    function flush_render_callbacks(fns) {
        const filtered = [];
        const targets = [];
        render_callbacks.forEach((c) => fns.indexOf(c) === -1 ? filtered.push(c) : targets.push(c));
        targets.forEach((c) => c());
        render_callbacks = filtered;
    }

    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) {
        const options = { direction: 'in' };
        let config = fn(node, params, options);
        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(options);
                    wait().then(go);
                }
                else {
                    go();
                }
            },
            invalidate() {
                started = false;
            },
            end() {
                if (running) {
                    cleanup();
                    running = false;
                }
            }
        };
    }

    function destroy_block(block, lookup) {
        block.d(1);
        lookup.delete(block.key);
    }
    function outro_and_destroy_block(block, lookup) {
        transition_out(block, 1, 1, () => {
            lookup.delete(block.key);
        });
    }
    function update_keyed_each(old_blocks, dirty, get_key, dynamic, ctx, list, lookup, node, destroy, create_each_block, next, get_context) {
        let o = old_blocks.length;
        let n = list.length;
        let i = o;
        const old_indexes = {};
        while (i--)
            old_indexes[old_blocks[i].key] = i;
        const new_blocks = [];
        const new_lookup = new Map();
        const deltas = new Map();
        const updates = [];
        i = n;
        while (i--) {
            const child_ctx = get_context(ctx, list, i);
            const key = get_key(child_ctx);
            let block = lookup.get(key);
            if (!block) {
                block = create_each_block(key, child_ctx);
                block.c();
            }
            else if (dynamic) {
                // defer updates until all the DOM shuffling is done
                updates.push(() => block.p(child_ctx, dirty));
            }
            new_lookup.set(key, new_blocks[i] = block);
            if (key in old_indexes)
                deltas.set(key, Math.abs(i - old_indexes[key]));
        }
        const will_move = new Set();
        const did_move = new Set();
        function insert(block) {
            transition_in(block, 1);
            block.m(node, next);
            lookup.set(block.key, block);
            next = block.first;
            n--;
        }
        while (o && n) {
            const new_block = new_blocks[n - 1];
            const old_block = old_blocks[o - 1];
            const new_key = new_block.key;
            const old_key = old_block.key;
            if (new_block === old_block) {
                // do nothing
                next = new_block.first;
                o--;
                n--;
            }
            else if (!new_lookup.has(old_key)) {
                // remove old block
                destroy(old_block, lookup);
                o--;
            }
            else if (!lookup.has(new_key) || will_move.has(new_key)) {
                insert(new_block);
            }
            else if (did_move.has(old_key)) {
                o--;
            }
            else if (deltas.get(new_key) > deltas.get(old_key)) {
                did_move.add(new_key);
                insert(new_block);
            }
            else {
                will_move.add(old_key);
                o--;
            }
        }
        while (o--) {
            const old_block = old_blocks[o];
            if (!new_lookup.has(old_block.key))
                destroy(old_block, lookup);
        }
        while (n)
            insert(new_blocks[n - 1]);
        run_all(updates);
        return new_blocks;
    }
    function validate_each_keys(ctx, list, get_context, get_key) {
        const keys = new Set();
        for (let i = 0; i < list.length; i++) {
            const key = get_key(get_context(ctx, list, i));
            if (keys.has(key)) {
                throw new Error('Cannot have duplicate keys in a keyed each');
            }
            keys.add(key);
        }
    }
    function 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) {
            flush_render_callbacks($$.after_update);
            run_all($$.on_destroy);
            $$.fragment && $$.fragment.d(detaching);
            // TODO null out other refs, including component.$$ (but need to
            // preserve final state?)
            $$.on_destroy = $$.fragment = null;
            $$.ctx = [];
        }
    }
    function make_dirty(component, i) {
        if (component.$$.dirty[0] === -1) {
            dirty_components.push(component);
            schedule_update();
            component.$$.dirty.fill(0);
        }
        component.$$.dirty[(i / 31) | 0] |= (1 << (i % 31));
    }
    function init(component, options, instance, create_fragment, not_equal, props, append_styles, dirty = [-1]) {
        const parent_component = current_component;
        set_current_component(component);
        const $$ = component.$$ = {
            fragment: null,
            ctx: [],
            // state
            props,
            update: noop,
            not_equal,
            bound: blank_object(),
            // lifecycle
            on_mount: [],
            on_destroy: [],
            on_disconnect: [],
            before_update: [],
            after_update: [],
            context: new Map(options.context || (parent_component ? parent_component.$$.context : [])),
            // everything else
            callbacks: blank_object(),
            dirty,
            skip_bound: false,
            root: options.target || parent_component.$$.root
        };
        append_styles && append_styles($$.root);
        let ready = false;
        $$.ctx = instance
            ? instance(component, options.props || {}, (i, ret, ...rest) => {
                const value = rest.length ? rest[0] : ret;
                if ($$.ctx && not_equal($$.ctx[i], $$.ctx[i] = value)) {
                    if (!$$.skip_bound && $$.bound[i])
                        $$.bound[i](value);
                    if (ready)
                        make_dirty(component, i);
                }
                return ret;
            })
            : [];
        $$.update();
        ready = true;
        run_all($$.before_update);
        // `false` as a special case of no DOM component
        $$.fragment = create_fragment ? create_fragment($$.ctx) : false;
        if (options.target) {
            if (options.hydrate) {
                const nodes = children(options.target);
                // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
                $$.fragment && $$.fragment.l(nodes);
                nodes.forEach(detach);
            }
            else {
                // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
                $$.fragment && $$.fragment.c();
            }
            if (options.intro)
                transition_in(component.$$.fragment);
            mount_component(component, options.target, options.anchor, options.customElement);
            flush();
        }
        set_current_component(parent_component);
    }
    /**
     * Base class for Svelte components. Used when dev=false.
     */
    class SvelteComponent {
        $destroy() {
            destroy_component(this, 1);
            this.$destroy = noop;
        }
        $on(type, callback) {
            if (!is_function(callback)) {
                return noop;
            }
            const callbacks = (this.$$.callbacks[type] || (this.$$.callbacks[type] = []));
            callbacks.push(callback);
            return () => {
                const index = callbacks.indexOf(callback);
                if (index !== -1)
                    callbacks.splice(index, 1);
            };
        }
        $set($$props) {
            if (this.$$set && !is_empty($$props)) {
                this.$$.skip_bound = true;
                this.$$set($$props);
                this.$$.skip_bound = false;
            }
        }
    }

    function dispatch_dev(type, detail) {
        document.dispatchEvent(custom_event(type, Object.assign({ version: '3.59.2' }, 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, has_stop_immediate_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');
        if (has_stop_immediate_propagation)
            modifiers.push('stopImmediatePropagation');
        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.data === 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}".`);
            }
        }
    }
    /**
     * 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() { }
    }

    /* src\VideoGradioComponentBrainstorming.svelte generated by Svelte v3.59.2 */

    const { console: console_1$3 } = globals;
    const file$c = "src\\VideoGradioComponentBrainstorming.svelte";

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

    // (85:4) {#each kitchenOptions as option}
    function create_each_block$3(ctx) {
    	let option;
    	let t_value = /*option*/ ctx[15] + "";
    	let t;

    	const block = {
    		c: function create() {
    			option = element("option");
    			t = text(t_value);
    			option.__value = /*option*/ ctx[15];
    			option.value = option.__value;
    			add_location(option, file$c, 85, 6, 2561);
    		},
    		m: function mount(target, anchor) {
    			insert_dev(target, option, anchor);
    			append_dev(option, t);
    		},
    		p: noop,
    		d: function destroy(detaching) {
    			if (detaching) detach_dev(option);
    		}
    	};

    	dispatch_dev("SvelteRegisterBlock", {
    		block,
    		id: create_each_block$3.name,
    		type: "each",
    		source: "(85:4) {#each kitchenOptions as option}",
    		ctx
    	});

    	return block;
    }

    function create_fragment$c(ctx) {
    	let h1;
    	let t1;
    	let div1;
    	let video;
    	let track;
    	let track_src_value;
    	let t2;
    	let div0;
    	let t3;
    	let t4;
    	let t5;
    	let canvas_1;
    	let t6;
    	let input;
    	let t7;
    	let div2;
    	let button;
    	let t9;
    	let select;
    	let mounted;
    	let dispose;
    	let each_value = /*kitchenOptions*/ ctx[4];
    	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() {
    			h1 = element("h1");
    			h1.textContent = "AI Vision Assistant - Auto prompt HF agent + Cohere + Object detection - Text write on screen test";
    			t1 = space();
    			div1 = element("div");
    			video = element("video");
    			track = element("track");
    			t2 = space();
    			div0 = element("div");
    			t3 = text("Text Overlay Test and ");
    			t4 = text(/*TestVerb*/ ctx[3]);
    			t5 = space();
    			canvas_1 = element("canvas");
    			t6 = space();
    			input = element("input");
    			t7 = space();
    			div2 = element("div");
    			button = element("button");
    			button.textContent = "Verb Test";
    			t9 = space();
    			select = element("select");

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

    			add_location(h1, file$c, 66, 0, 1800);
    			attr_dev(track, "kind", "captions");
    			if (!src_url_equal(track.src, track_src_value = "path/to/your/captions/file.vtt")) attr_dev(track, "src", track_src_value);
    			attr_dev(track, "srclang", "en");
    			attr_dev(track, "label", "English");
    			add_location(track, file$c, 72, 4, 2006);
    			attr_dev(video, "id", "videoCanvas");
    			video.autoplay = true;
    			attr_dev(video, "class", "svelte-ufd3fo");
    			add_location(video, file$c, 70, 2, 1965);
    			attr_dev(div0, "id", "overlayText");
    			attr_dev(div0, "class", "svelte-ufd3fo");
    			add_location(div0, file$c, 74, 2, 2111);
    			attr_dev(div1, "id", "videoContainer");
    			attr_dev(div1, "class", "svelte-ufd3fo");
    			add_location(div1, file$c, 68, 0, 1911);
    			attr_dev(canvas_1, "id", "myCanvas");
    			set_style(canvas_1, "border", "2px solid black");
    			attr_dev(canvas_1, "width", "500");
    			attr_dev(canvas_1, "height", "500");
    			add_location(canvas_1, file$c, 77, 0, 2186);
    			attr_dev(input, "type", "text");
    			add_location(input, file$c, 78, 0, 2294);
    			add_location(button, file$c, 82, 2, 2429);
    			if (/*selectedOption*/ ctx[0] === void 0) add_render_callback(() => /*select_change_handler*/ ctx[9].call(select));
    			add_location(select, file$c, 83, 2, 2479);
    			attr_dev(div2, "id", "frameForButtons");
    			add_location(div2, file$c, 81, 0, 2399);
    		},
    		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, div1, anchor);
    			append_dev(div1, video);
    			append_dev(video, track);
    			append_dev(div1, t2);
    			append_dev(div1, div0);
    			append_dev(div0, t3);
    			append_dev(div0, t4);
    			insert_dev(target, t5, anchor);
    			insert_dev(target, canvas_1, anchor);
    			/*canvas_1_binding*/ ctx[7](canvas_1);
    			insert_dev(target, t6, anchor);
    			insert_dev(target, input, anchor);
    			set_input_value(input, /*textToDisplay*/ ctx[2]);
    			insert_dev(target, t7, anchor);
    			insert_dev(target, div2, anchor);
    			append_dev(div2, button);
    			append_dev(div2, t9);
    			append_dev(div2, select);

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

    			select_option(select, /*selectedOption*/ ctx[0], true);

    			if (!mounted) {
    				dispose = [
    					listen_dev(input, "input", /*input_input_handler*/ ctx[8]),
    					listen_dev(input, "input", /*updateText*/ ctx[6], false, false, false, false),
    					listen_dev(button, "click", /*testText*/ ctx[5], false, false, false, false),
    					listen_dev(select, "change", /*select_change_handler*/ ctx[9])
    				];

    				mounted = true;
    			}
    		},
    		p: function update(ctx, [dirty]) {
    			if (dirty & /*TestVerb*/ 8) set_data_dev(t4, /*TestVerb*/ ctx[3]);

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

    			if (dirty & /*kitchenOptions*/ 16) {
    				each_value = /*kitchenOptions*/ ctx[4];
    				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(select, null);
    					}
    				}

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

    				each_blocks.length = each_value.length;
    			}

    			if (dirty & /*selectedOption, kitchenOptions*/ 17) {
    				select_option(select, /*selectedOption*/ ctx[0]);
    			}
    		},
    		i: noop,
    		o: noop,
    		d: function destroy(detaching) {
    			if (detaching) detach_dev(h1);
    			if (detaching) detach_dev(t1);
    			if (detaching) detach_dev(div1);
    			if (detaching) detach_dev(t5);
    			if (detaching) detach_dev(canvas_1);
    			/*canvas_1_binding*/ ctx[7](null);
    			if (detaching) detach_dev(t6);
    			if (detaching) detach_dev(input);
    			if (detaching) detach_dev(t7);
    			if (detaching) detach_dev(div2);
    			destroy_each(each_blocks, detaching);
    			mounted = false;
    			run_all(dispose);
    		}
    	};

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

    	return block;
    }

    function ocrTest() {
    	
    } // Logic for 'Test OCR' button

    function instance$c($$self, $$props, $$invalidate) {
    	let { $$slots: slots = {}, $$scope } = $$props;
    	validate_slots('VideoGradioComponentBrainstorming', slots, []);
    	let selectedOption = 'Stove - lu'; // default value
    	let kitchenOptions = ['Stove - lu', 'Refrigerator - bingxiang', 'Spoon - shao']; /* ... other options ... */
    	let canvas;
    	let ctx;
    	let textToDisplay = 'Initial Text';
    	let counter = 0;
    	let hud_text;
    	let TestVerb = "|Test verb|";

    	// Functions for button commands
    	function testText() {
    		// Logic for 'verb test' button
    		const randomIndex = Math.floor(Math.random() * kitchenOptions.length);

    		$$invalidate(3, TestVerb = kitchenOptions[randomIndex]);
    	}

    	// Image source
    	let imageSrc = 'path_to_your_image/Blooms-Taxonomy-650x366.jpg';

    	// Video stream setup
    	onMount(() => {
    		// Initialize video stream here
    		ctx = canvas.getContext('2d');

    		setInterval(
    			() => {
    				drawText(textToDisplay);
    			},
    			1000
    		); // Update every second
    	});

    	function drawText(hud_info) {
    		if (ctx) {
    			hud_text = "HUD Info Update: " + counter++ + " " + hud_info;
    			ctx.clearRect(0, 0, canvas.width, canvas.height); // Clear the canvas
    			ctx.font = '30px Arial';
    			ctx.fillStyle = 'black';
    			ctx.fillText(hud_text, 50, 50);
    		}
    	}

    	function updateText(event) {
    		$$invalidate(2, textToDisplay = event.target.value);
    		drawText();
    	}

    	// Camera as Video Stream
    	navigator.mediaDevices.getUserMedia({ video: true }).then(stream => {
    		const video = document.getElementById('videoCanvas');
    		video.srcObject = stream;
    	}).catch(err => {
    		console.error("Error accessing the camera: ", err);
    	});

    	const writable_props = [];

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

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

    	function input_input_handler() {
    		textToDisplay = this.value;
    		$$invalidate(2, textToDisplay);
    	}

    	function select_change_handler() {
    		selectedOption = select_value(this);
    		$$invalidate(0, selectedOption);
    		$$invalidate(4, kitchenOptions);
    	}

    	$$self.$capture_state = () => ({
    		onMount,
    		selectedOption,
    		kitchenOptions,
    		canvas,
    		ctx,
    		textToDisplay,
    		counter,
    		hud_text,
    		TestVerb,
    		testText,
    		ocrTest,
    		imageSrc,
    		drawText,
    		updateText
    	});

    	$$self.$inject_state = $$props => {
    		if ('selectedOption' in $$props) $$invalidate(0, selectedOption = $$props.selectedOption);
    		if ('kitchenOptions' in $$props) $$invalidate(4, kitchenOptions = $$props.kitchenOptions);
    		if ('canvas' in $$props) $$invalidate(1, canvas = $$props.canvas);
    		if ('ctx' in $$props) ctx = $$props.ctx;
    		if ('textToDisplay' in $$props) $$invalidate(2, textToDisplay = $$props.textToDisplay);
    		if ('counter' in $$props) counter = $$props.counter;
    		if ('hud_text' in $$props) hud_text = $$props.hud_text;
    		if ('TestVerb' in $$props) $$invalidate(3, TestVerb = $$props.TestVerb);
    		if ('imageSrc' in $$props) imageSrc = $$props.imageSrc;
    	};

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

    	return [
    		selectedOption,
    		canvas,
    		textToDisplay,
    		TestVerb,
    		kitchenOptions,
    		testText,
    		updateText,
    		canvas_1_binding,
    		input_input_handler,
    		select_change_handler
    	];
    }

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

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

    // Unique ID creation requires a high quality random # generator. In the browser we therefore
    // require the crypto API and do not support built-in fallback to lower quality random number
    // generators (like Math.random()).
    let getRandomValues;
    const rnds8 = new Uint8Array(16);
    function rng() {
      // lazy load so that environments that need to polyfill have a chance to do so
      if (!getRandomValues) {
        // getRandomValues needs to be invoked in a context where "this" is a Crypto implementation.
        getRandomValues = typeof crypto !== 'undefined' && crypto.getRandomValues && crypto.getRandomValues.bind(crypto);

        if (!getRandomValues) {
          throw new Error('crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported');
        }
      }

      return getRandomValues(rnds8);
    }

    /**
     * Convert array of 16 byte values to UUID string format of the form:
     * XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX
     */

    const byteToHex = [];

    for (let i = 0; i < 256; ++i) {
      byteToHex.push((i + 0x100).toString(16).slice(1));
    }

    function unsafeStringify(arr, offset = 0) {
      // Note: Be careful editing this code!  It's been tuned for performance
      // and works in ways you may not expect. See https://github.com/uuidjs/uuid/pull/434
      return byteToHex[arr[offset + 0]] + byteToHex[arr[offset + 1]] + byteToHex[arr[offset + 2]] + byteToHex[arr[offset + 3]] + '-' + byteToHex[arr[offset + 4]] + byteToHex[arr[offset + 5]] + '-' + byteToHex[arr[offset + 6]] + byteToHex[arr[offset + 7]] + '-' + byteToHex[arr[offset + 8]] + byteToHex[arr[offset + 9]] + '-' + byteToHex[arr[offset + 10]] + byteToHex[arr[offset + 11]] + byteToHex[arr[offset + 12]] + byteToHex[arr[offset + 13]] + byteToHex[arr[offset + 14]] + byteToHex[arr[offset + 15]];
    }

    const randomUUID = typeof crypto !== 'undefined' && crypto.randomUUID && crypto.randomUUID.bind(crypto);
    var native = {
      randomUUID
    };

    function v4(options, buf, offset) {
      if (native.randomUUID && !buf && !options) {
        return native.randomUUID();
      }

      options = options || {};
      const rnds = options.random || (options.rng || rng)(); // Per 4.4, set bits for version and `clock_seq_hi_and_reserved`

      rnds[6] = rnds[6] & 0x0f | 0x40;
      rnds[8] = rnds[8] & 0x3f | 0x80; // Copy bytes to buffer, if provided

      if (buf) {
        offset = offset || 0;

        for (let i = 0; i < 16; ++i) {
          buf[offset + i] = rnds[i];
        }

        return buf;
      }

      return unsafeStringify(rnds);
    }

    /* src\NestedCommentsTestfromReact.svelte generated by Svelte v3.59.2 */
    const file$b = "src\\NestedCommentsTestfromReact.svelte";

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

    function get_each_context_1$1(ctx, list, i) {
    	const child_ctx = ctx.slice();
    	child_ctx[9] = list[i];
    	return child_ctx;
    }

    // (29:12) {#if comment.items}
    function create_if_block$6(ctx) {
    	let each_1_anchor;
    	let each_value_1 = /*comment*/ ctx[6].items;
    	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() {
    			for (let i = 0; i < each_blocks.length; i += 1) {
    				each_blocks[i].c();
    			}

    			each_1_anchor = empty();
    		},
    		m: function mount(target, anchor) {
    			for (let i = 0; i < each_blocks.length; i += 1) {
    				if (each_blocks[i]) {
    					each_blocks[i].m(target, anchor);
    				}
    			}

    			insert_dev(target, each_1_anchor, anchor);
    		},
    		p: function update(ctx, dirty) {
    			if (dirty & /*comments*/ 1) {
    				each_value_1 = /*comment*/ ctx[6].items;
    				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) {
    			destroy_each(each_blocks, detaching);
    			if (detaching) detach_dev(each_1_anchor);
    		}
    	};

    	dispatch_dev("SvelteRegisterBlock", {
    		block,
    		id: create_if_block$6.name,
    		type: "if",
    		source: "(29:12) {#if comment.items}",
    		ctx
    	});

    	return block;
    }

    // (30:16) {#each comment.items as item}
    function create_each_block_1$1(ctx) {
    	let t0_value = /*item*/ ctx[9].title + "";
    	let t0;
    	let t1;

    	const block = {
    		c: function create() {
    			t0 = text(t0_value);
    			t1 = text(" | \r\n                    ");
    		},
    		m: function mount(target, anchor) {
    			insert_dev(target, t0, anchor);
    			insert_dev(target, t1, anchor);
    		},
    		p: function update(ctx, dirty) {
    			if (dirty & /*comments*/ 1 && t0_value !== (t0_value = /*item*/ ctx[9].title + "")) set_data_dev(t0, t0_value);
    		},
    		d: function destroy(detaching) {
    			if (detaching) detach_dev(t0);
    			if (detaching) detach_dev(t1);
    		}
    	};

    	dispatch_dev("SvelteRegisterBlock", {
    		block,
    		id: create_each_block_1$1.name,
    		type: "each",
    		source: "(30:16) {#each comment.items as item}",
    		ctx
    	});

    	return block;
    }

    // (23:4) {#each comments as comment}
    function create_each_block$2(ctx) {
    	let div1;
    	let div0;
    	let span;
    	let t0_value = /*comment*/ ctx[6].title + "";
    	let t0;
    	let t1;
    	let button;
    	let t3;
    	let t4;
    	let div1_key_value;
    	let mounted;
    	let dispose;

    	function click_handler() {
    		return /*click_handler*/ ctx[5](/*comment*/ ctx[6]);
    	}

    	let if_block = /*comment*/ ctx[6].items && create_if_block$6(ctx);

    	const block = {
    		c: function create() {
    			div1 = element("div");
    			div0 = element("div");
    			span = element("span");
    			t0 = text(t0_value);
    			t1 = space();
    			button = element("button");
    			button.textContent = "Add Reply";
    			t3 = space();
    			if (if_block) if_block.c();
    			t4 = space();
    			attr_dev(span, "class", "text");
    			add_location(span, file$b, 25, 16, 818);
    			add_location(button, file$b, 26, 16, 877);
    			attr_dev(div0, "class", "card");
    			add_location(div0, file$b, 24, 12, 782);
    			attr_dev(div1, "key", div1_key_value = /*comment*/ ctx[6].id);
    			set_style(div1, "margin-left", "20px");
    			add_location(div1, file$b, 23, 8, 719);
    		},
    		m: function mount(target, anchor) {
    			insert_dev(target, div1, anchor);
    			append_dev(div1, div0);
    			append_dev(div0, span);
    			append_dev(span, t0);
    			append_dev(div0, t1);
    			append_dev(div0, button);
    			append_dev(div1, t3);
    			if (if_block) if_block.m(div1, null);
    			append_dev(div1, t4);

    			if (!mounted) {
    				dispose = listen_dev(button, "click", click_handler, false, false, false, false);
    				mounted = true;
    			}
    		},
    		p: function update(new_ctx, dirty) {
    			ctx = new_ctx;
    			if (dirty & /*comments*/ 1 && t0_value !== (t0_value = /*comment*/ ctx[6].title + "")) set_data_dev(t0, t0_value);

    			if (/*comment*/ ctx[6].items) {
    				if (if_block) {
    					if_block.p(ctx, dirty);
    				} else {
    					if_block = create_if_block$6(ctx);
    					if_block.c();
    					if_block.m(div1, t4);
    				}
    			} else if (if_block) {
    				if_block.d(1);
    				if_block = null;
    			}

    			if (dirty & /*comments*/ 1 && div1_key_value !== (div1_key_value = /*comment*/ ctx[6].id)) {
    				attr_dev(div1, "key", div1_key_value);
    			}
    		},
    		d: function destroy(detaching) {
    			if (detaching) detach_dev(div1);
    			if (if_block) if_block.d();
    			mounted = false;
    			dispose();
    		}
    	};

    	dispatch_dev("SvelteRegisterBlock", {
    		block,
    		id: create_each_block$2.name,
    		type: "each",
    		source: "(23:4) {#each comments as comment}",
    		ctx
    	});

    	return block;
    }

    function create_fragment$b(ctx) {
    	let div1;
    	let div0;
    	let input;
    	let t0;
    	let button;
    	let t2;
    	let mounted;
    	let dispose;
    	let each_value = /*comments*/ 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$2(get_each_context$2(ctx, each_value, i));
    	}

    	const block = {
    		c: function create() {
    			div1 = element("div");
    			div0 = element("div");
    			input = element("input");
    			t0 = space();
    			button = element("button");
    			button.textContent = "Post Comment";
    			t2 = space();

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

    			attr_dev(input, "type", "text");
    			attr_dev(input, "placeholder", "Add a comment");
    			add_location(input, file$b, 19, 8, 530);
    			add_location(button, file$b, 20, 8, 613);
    			add_location(div0, file$b, 18, 4, 515);
    			attr_dev(div1, "id", "comment-container");
    			add_location(div1, file$b, 17, 0, 481);
    		},
    		l: function claim(nodes) {
    			throw new Error("options.hydrate only works if the component was compiled with the `hydratable: true` option");
    		},
    		m: function mount(target, anchor) {
    			insert_dev(target, div1, anchor);
    			append_dev(div1, div0);
    			append_dev(div0, input);
    			set_input_value(input, /*newComment*/ ctx[1]);
    			append_dev(div0, t0);
    			append_dev(div0, button);
    			append_dev(div1, t2);

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

    			if (!mounted) {
    				dispose = [
    					listen_dev(input, "input", /*input_input_handler*/ ctx[4]),
    					listen_dev(button, "click", /*addComment*/ ctx[2], false, false, false, false)
    				];

    				mounted = true;
    			}
    		},
    		p: function update(ctx, [dirty]) {
    			if (dirty & /*newComment*/ 2 && input.value !== /*newComment*/ ctx[1]) {
    				set_input_value(input, /*newComment*/ ctx[1]);
    			}

    			if (dirty & /*comments, addReply, prompt*/ 9) {
    				each_value = /*comments*/ ctx[0];
    				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(div1, null);
    					}
    				}

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

    				each_blocks.length = each_value.length;
    			}
    		},
    		i: noop,
    		o: noop,
    		d: function destroy(detaching) {
    			if (detaching) detach_dev(div1);
    			destroy_each(each_blocks, detaching);
    			mounted = false;
    			run_all(dispose);
    		}
    	};

    	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('NestedCommentsTestfromReact', slots, []);
    	let comments = [];
    	let newComment = '';

    	const addComment = () => {
    		$$invalidate(0, comments = [
    			...comments,
    			{
    				id: v4(),
    				title: newComment,
    				items: []
    			}
    		]);

    		$$invalidate(1, newComment = '');
    	};

    	const addReply = (comment, replyText) => {
    		comment.items.push({
    			id: v4(),
    			title: replyText,
    			items: []
    		});

    		$$invalidate(0, comments = [...comments]);
    	};

    	const writable_props = [];

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

    	function input_input_handler() {
    		newComment = this.value;
    		$$invalidate(1, newComment);
    	}

    	const click_handler = comment => addReply(comment, prompt('Enter your reply'));

    	$$self.$capture_state = () => ({
    		comment,
    		uuidv4: v4,
    		comments,
    		newComment,
    		addComment,
    		addReply
    	});

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

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

    	return [comments, newComment, addComment, addReply, input_input_handler, click_handler];
    }

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

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

    const subscriber_queue = [];
    /**
     * Create a `Writable` store that allows both updating and reading by subscription.
     * @param {*=}value initial value
     * @param {StartStopNotifier=} start
     */
    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();
                    stop = null;
                }
            };
        }
        return { set, update, subscribe };
    }

    /* src\MovingDotPortfromReact.svelte generated by Svelte v3.59.2 */
    const file$a = "src\\MovingDotPortfromReact.svelte";

    function create_fragment$a(ctx) {
    	let div;

    	const block = {
    		c: function create() {
    			div = element("div");
    			attr_dev(div, "class", "MovingDot svelte-12o76ak");
    			set_style(div, "left", /*position*/ ctx[0].x + "px");
    			set_style(div, "top", /*position*/ ctx[0].y + "px");
    			add_location(div, file$a, 47, 0, 1709);
    		},
    		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);
    		},
    		p: function update(ctx, [dirty]) {
    			if (dirty & /*position*/ 1) {
    				set_style(div, "left", /*position*/ ctx[0].x + "px");
    			}

    			if (dirty & /*position*/ 1) {
    				set_style(div, "top", /*position*/ ctx[0].y + "px");
    			}
    		},
    		i: noop,
    		o: noop,
    		d: function destroy(detaching) {
    			if (detaching) detach_dev(div);
    		}
    	};

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

    	return block;
    }

    const step = 10;

    function instance$a($$self, $$props, $$invalidate) {
    	let { $$slots: slots = {}, $$scope } = $$props;
    	validate_slots('MovingDotPortfromReact', slots, []);
    	let { position = { x: 0, y: 0 } } = $$props;
    	let { boundaries = { minX: 0, maxX: 100, minY: 0, maxY: 100 } } = $$props;
    	const dispatch = createEventDispatcher();

    	function moveDot(newX, newY) {
    		// Calculate new position here
    		let newPosition = { x: newX, y: newY };

    		// Update position with a new object for Svelte reactivity
    		let boundedX = Math.max(boundaries.minX, Math.min(newX, boundaries.maxX));

    		let boundedY = Math.max(boundaries.minY, Math.min(newY, boundaries.maxY));

    		// Update position
    		$$invalidate(0, position = { x: boundedX, y: boundedY });

    		// Dispatch the move event with the new position
    		dispatch('move', newPosition);
    	}

    	const handleKeyPress = e => {
    		e.preventDefault();
    		let newX = position.x;
    		let newY = position.y;

    		switch (e.key) {
    			case 'ArrowLeft':
    				newX -= step;
    				break;
    			case 'ArrowRight':
    				newX += step;
    				break;
    			case 'ArrowUp':
    				newY -= step;
    				break;
    			case 'ArrowDown':
    				newY += step;
    				break;
    		}

    		moveDot(newX, newY);
    	}; // // Restrict movement within boundaries
    	// if (newX >= boundaries.minX && newX <= boundaries.maxX) position.x = newX;
    	// if (newY >= boundaries.minY && newY <= boundaries.maxY) position.y = newY;

    	onMount(() => {
    		window.addEventListener('keydown', handleKeyPress);

    		return () => {
    			window.removeEventListener('keydown', handleKeyPress);
    		};
    	});

    	const writable_props = ['position', 'boundaries'];

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

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

    	$$self.$capture_state = () => ({
    		onMount,
    		createEventDispatcher,
    		position,
    		boundaries,
    		step,
    		dispatch,
    		moveDot,
    		handleKeyPress
    	});

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

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

    	return [position, boundaries];
    }

    class MovingDotPortfromReact extends SvelteComponentDev {
    	constructor(options) {
    		super(options);
    		init(this, options, instance$a, create_fragment$a, safe_not_equal, { position: 0, boundaries: 1 });

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

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

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

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

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

    /* src\MovingDotTargetPortfromReact.svelte generated by Svelte v3.59.2 */

    const file$9 = "src\\MovingDotTargetPortfromReact.svelte";

    function create_fragment$9(ctx) {
    	let div;

    	const block = {
    		c: function create() {
    			div = element("div");
    			attr_dev(div, "class", "target svelte-4yc66h");
    			set_style(div, "left", /*position*/ ctx[0].x + "px");
    			set_style(div, "top", /*position*/ ctx[0].y + "px");
    			add_location(div, file$9, 4, 0, 49);
    		},
    		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);
    		},
    		p: function update(ctx, [dirty]) {
    			if (dirty & /*position*/ 1) {
    				set_style(div, "left", /*position*/ ctx[0].x + "px");
    			}

    			if (dirty & /*position*/ 1) {
    				set_style(div, "top", /*position*/ ctx[0].y + "px");
    			}
    		},
    		i: noop,
    		o: noop,
    		d: function destroy(detaching) {
    			if (detaching) detach_dev(div);
    		}
    	};

    	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('MovingDotTargetPortfromReact', slots, []);
    	let { position } = $$props;

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

    	const writable_props = ['position'];

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

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

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

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

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

    	return [position];
    }

    class MovingDotTargetPortfromReact extends SvelteComponentDev {
    	constructor(options) {
    		super(options);
    		init(this, options, instance$9, create_fragment$9, safe_not_equal, { position: 0 });

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

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

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

    /* src\MovingDotSpacePortfromReact.svelte generated by Svelte v3.59.2 */

    const { console: console_1$2 } = globals;
    const file$8 = "src\\MovingDotSpacePortfromReact.svelte";

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

    // (70:4) {#each $targets as target (target.name)}
    function create_each_block$1(key_1, ctx) {
    	let first;
    	let target;
    	let t0;
    	let span;
    	let t1_value = /*target*/ ctx[13].name + "";
    	let t1;
    	let current;

    	target = new MovingDotTargetPortfromReact({
    			props: { position: /*target*/ ctx[13] },
    			$$inline: true
    		});

    	const block = {
    		key: key_1,
    		first: null,
    		c: function create() {
    			first = empty();
    			create_component(target.$$.fragment);
    			t0 = space();
    			span = element("span");
    			t1 = text(t1_value);
    			set_style(span, "position", "absolute");
    			set_style(span, "left", /*target*/ ctx[13].x + "px");
    			set_style(span, "top", /*target*/ ctx[13].y + "px");
    			add_location(span, file$8, 71, 8, 3555);
    			this.first = first;
    		},
    		m: function mount(target$1, anchor) {
    			insert_dev(target$1, first, anchor);
    			mount_component(target, target$1, anchor);
    			insert_dev(target$1, t0, anchor);
    			insert_dev(target$1, span, anchor);
    			append_dev(span, t1);
    			current = true;
    		},
    		p: function update(new_ctx, dirty) {
    			ctx = new_ctx;
    			const target_changes = {};
    			if (dirty & /*$targets*/ 8) target_changes.position = /*target*/ ctx[13];
    			target.$set(target_changes);
    			if ((!current || dirty & /*$targets*/ 8) && t1_value !== (t1_value = /*target*/ ctx[13].name + "")) set_data_dev(t1, t1_value);

    			if (!current || dirty & /*$targets*/ 8) {
    				set_style(span, "left", /*target*/ ctx[13].x + "px");
    			}

    			if (!current || dirty & /*$targets*/ 8) {
    				set_style(span, "top", /*target*/ ctx[13].y + "px");
    			}
    		},
    		i: function intro(local) {
    			if (current) return;
    			transition_in(target.$$.fragment, local);
    			current = true;
    		},
    		o: function outro(local) {
    			transition_out(target.$$.fragment, local);
    			current = false;
    		},
    		d: function destroy(detaching) {
    			if (detaching) detach_dev(first);
    			destroy_component(target, detaching);
    			if (detaching) detach_dev(t0);
    			if (detaching) detach_dev(span);
    		}
    	};

    	dispatch_dev("SvelteRegisterBlock", {
    		block,
    		id: create_each_block$1.name,
    		type: "each",
    		source: "(70:4) {#each $targets as target (target.name)}",
    		ctx
    	});

    	return block;
    }

    // (76:4) {#if isModalOpen}
    function create_if_block$5(ctx) {
    	const block = { c: noop, m: noop, d: noop };

    	dispatch_dev("SvelteRegisterBlock", {
    		block,
    		id: create_if_block$5.name,
    		type: "if",
    		source: "(76:4) {#if isModalOpen}",
    		ctx
    	});

    	return block;
    }

    function create_fragment$8(ctx) {
    	let div1;
    	let div0;
    	let t0;
    	let t1_value = /*$dotPosition*/ ctx[0].x + "";
    	let t1;
    	let t2;
    	let t3_value = /*$dotPosition*/ ctx[0].y + "";
    	let t3;
    	let t4;
    	let canvas_1;
    	let t5;
    	let movingdot;
    	let t6;
    	let each_blocks = [];
    	let each_1_lookup = new Map();
    	let t7;
    	let current;

    	movingdot = new MovingDotPortfromReact({
    			props: {
    				position: /*$dotPosition*/ ctx[0],
    				boundaries: /*boundaries*/ ctx[6]
    			},
    			$$inline: true
    		});

    	movingdot.$on("move", /*move_handler*/ ctx[10]);
    	let each_value = /*$targets*/ ctx[3];
    	validate_each_argument(each_value);
    	const get_key = ctx => /*target*/ ctx[13].name;
    	validate_each_keys(ctx, each_value, get_each_context$1, get_key);

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

    	let if_block = /*isModalOpen*/ ctx[2] && create_if_block$5(ctx);

    	const block = {
    		c: function create() {
    			div1 = element("div");
    			div0 = element("div");
    			t0 = text("Minor Game Events Log for player ||| Position for Developer ");
    			t1 = text(t1_value);
    			t2 = space();
    			t3 = text(t3_value);
    			t4 = space();
    			canvas_1 = element("canvas");
    			t5 = space();
    			create_component(movingdot.$$.fragment);
    			t6 = space();

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

    			t7 = space();
    			if (if_block) if_block.c();
    			attr_dev(div0, "id", "overlayText");
    			attr_dev(div0, "class", "svelte-e0peue");
    			add_location(div0, file$8, 66, 4, 3145);
    			attr_dev(canvas_1, "width", "100%");
    			attr_dev(canvas_1, "height", "100%");
    			attr_dev(canvas_1, "tabindex", "0");
    			add_location(canvas_1, file$8, 67, 4, 3273);
    			attr_dev(div1, "style", /*spaceStyle*/ ctx[8]);
    			add_location(div1, file$8, 65, 0, 3115);
    		},
    		l: function claim(nodes) {
    			throw new Error("options.hydrate only works if the component was compiled with the `hydratable: true` option");
    		},
    		m: function mount(target, anchor) {
    			insert_dev(target, div1, anchor);
    			append_dev(div1, div0);
    			append_dev(div0, t0);
    			append_dev(div0, t1);
    			append_dev(div0, t2);
    			append_dev(div0, t3);
    			append_dev(div1, t4);
    			append_dev(div1, canvas_1);
    			/*canvas_1_binding*/ ctx[9](canvas_1);
    			append_dev(div1, t5);
    			mount_component(movingdot, div1, null);
    			append_dev(div1, t6);

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

    			append_dev(div1, t7);
    			if (if_block) if_block.m(div1, null);
    			current = true;
    		},
    		p: function update(ctx, [dirty]) {
    			if ((!current || dirty & /*$dotPosition*/ 1) && t1_value !== (t1_value = /*$dotPosition*/ ctx[0].x + "")) set_data_dev(t1, t1_value);
    			if ((!current || dirty & /*$dotPosition*/ 1) && t3_value !== (t3_value = /*$dotPosition*/ ctx[0].y + "")) set_data_dev(t3, t3_value);
    			const movingdot_changes = {};
    			if (dirty & /*$dotPosition*/ 1) movingdot_changes.position = /*$dotPosition*/ ctx[0];
    			movingdot.$set(movingdot_changes);

    			if (dirty & /*$targets*/ 8) {
    				each_value = /*$targets*/ ctx[3];
    				validate_each_argument(each_value);
    				group_outros();
    				validate_each_keys(ctx, each_value, get_each_context$1, get_key);
    				each_blocks = update_keyed_each(each_blocks, dirty, get_key, 1, ctx, each_value, each_1_lookup, div1, outro_and_destroy_block, create_each_block$1, t7, get_each_context$1);
    				check_outros();
    			}

    			if (/*isModalOpen*/ ctx[2]) {
    				if (if_block) ; else {
    					if_block = create_if_block$5(ctx);
    					if_block.c();
    					if_block.m(div1, null);
    				}
    			} else if (if_block) {
    				if_block.d(1);
    				if_block = null;
    			}
    		},
    		i: function intro(local) {
    			if (current) return;
    			transition_in(movingdot.$$.fragment, local);

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

    			current = true;
    		},
    		o: function outro(local) {
    			transition_out(movingdot.$$.fragment, local);

    			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(div1);
    			/*canvas_1_binding*/ ctx[9](null);
    			destroy_component(movingdot);

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

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

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

    	return block;
    }

    function instance$8($$self, $$props, $$invalidate) {
    	let $dotPosition;
    	let $targets;
    	let { $$slots: slots = {}, $$scope } = $$props;
    	validate_slots('MovingDotSpacePortfromReact', slots, []);
    	let canvas;
    	let dotPosition = writable({ x: 900, y: 450 });
    	validate_store(dotPosition, 'dotPosition');
    	component_subscribe($$self, dotPosition, value => $$invalidate(0, $dotPosition = value));

    	let targets = writable([
    		{
    			name: "Target 1",
    			x: 50,
    			y: 50,
    			collisionType: "alert",
    			collisiontext: "First Test"
    		},
    		{
    			name: "Target 2",
    			x: 100,
    			y: 100,
    			collisionType: "",
    			collisiontext: ""
    		},
    		{
    			name: "Entrance",
    			x: 995,
    			y: 660,
    			collisionType: "",
    			collisiontext: ""
    		},
    		// Add more targets as needed
    		{
    			name: "Market Stall",
    			x: 200,
    			y: 300,
    			collisionType: "",
    			collisiontext: ""
    		},
    		{
    			name: "Inn Entrance", // A market stall in the bustling market area.
    			x: 400,
    			y: 450,
    			collisionType: "",
    			collisiontext: ""
    		},
    		{
    			name: "Town Hall", // The entrance to the inn for rest or information.
    			x: 600,
    			y: 350,
    			collisionType: "",
    			collisiontext: ""
    		},
    		{
    			name: "Fountain", // The entrance to the town hall for quests.
    			x: 500,
    			y: 500,
    			collisionType: "",
    			collisiontext: ""
    		},
    		{
    			name: "Bridge", // A fountain in the town square as a meeting point.
    			x: 1100,
    			y: 700,
    			collisionType: "",
    			collisiontext: ""
    		},
    		{
    			name: "Waterfall", // A bridge in the mystical forest area.
    			x: 1300,
    			y: 800,
    			collisionType: "",
    			collisiontext: ""
    		},
    		{
    			name: "Mountain Peak", // A waterfall that could hide secrets or treasures.
    			x: 1500,
    			y: 100,
    			collisionType: "",
    			collisiontext: ""
    		}
    	]);

    	validate_store(targets, 'targets');
    	component_subscribe($$self, targets, value => $$invalidate(3, $targets = value));
    	let boundaries = { maxX: 1885, maxY: 900, minX: 0, minY: 0 };
    	let isModalOpen = false;

    	function updateDotPosition(newX, newY) {
    		dotPosition.set({ x: newX, y: newY });
    	}

    	// Collision check function
    	const checkCollision = dotPos => {
    		$targets.forEach(target => {
    			if (dotPos.x < target.x + 10 && dotPos.x + 10 > target.x && dotPos.y < target.y + 10 && dotPos.y + 10 > target.y) {
    				handleCollision(target);
    			}
    		});
    	};

    	// Handle collision based on the target object
    	const handleCollision = target => {
    		switch (target.collisionType) {
    			case "":
    				console.log("Nothing Happenedddd");
    				break;
    			case "alert":
    				alert(target.collisiontext);
    				break;
    			case "modal":
    				$$invalidate(2, isModalOpen = true);
    				break;
    		} // Handle other permanent UI elements here
    	}; // ...

    	const spaceStyle = `position: relative; width: 100%; height: 100vh; border: 1px solid black; overflow: hidden; background-image: url('/AutoGameBackgrounds/1stGameLoc123.png'); background-size: cover; background-position: center;`;
    	const writable_props = [];

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

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

    	const move_handler = e => updateDotPosition(e.detail.x, e.detail.y);

    	$$self.$capture_state = () => ({
    		onMount,
    		writable,
    		MovingDot: MovingDotPortfromReact,
    		Target: MovingDotTargetPortfromReact,
    		canvas,
    		dotPosition,
    		targets,
    		boundaries,
    		isModalOpen,
    		updateDotPosition,
    		checkCollision,
    		handleCollision,
    		spaceStyle,
    		$dotPosition,
    		$targets
    	});

    	$$self.$inject_state = $$props => {
    		if ('canvas' in $$props) $$invalidate(1, canvas = $$props.canvas);
    		if ('dotPosition' in $$props) $$invalidate(4, dotPosition = $$props.dotPosition);
    		if ('targets' in $$props) $$invalidate(5, targets = $$props.targets);
    		if ('boundaries' in $$props) $$invalidate(6, boundaries = $$props.boundaries);
    		if ('isModalOpen' in $$props) $$invalidate(2, isModalOpen = $$props.isModalOpen);
    	};

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

    	$$self.$$.update = () => {
    		if ($$self.$$.dirty & /*$dotPosition*/ 1) {
    			// Reactive statement to check collision whenever dotPosition changes
    			$dotPosition && checkCollision($dotPosition);
    		}
    	};

    	return [
    		$dotPosition,
    		canvas,
    		isModalOpen,
    		$targets,
    		dotPosition,
    		targets,
    		boundaries,
    		updateDotPosition,
    		spaceStyle,
    		canvas_1_binding,
    		move_handler
    	];
    }

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

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

    /* node_modules\svelte-youtube-embed\Button.svelte generated by Svelte v3.59.2 */

    const file$7 = "node_modules\\svelte-youtube-embed\\Button.svelte";

    // (9:0) {:else}
    function create_else_block$1(ctx) {
    	let button;
    	let svg;
    	let path;
    	let mounted;
    	let dispose;

    	const block = {
    		c: function create() {
    			button = element("button");
    			svg = svg_element("svg");
    			path = svg_element("path");
    			attr_dev(path, "fill", "#ff4e45");
    			attr_dev(path, "d", "m10 15 5.19-3L10 9v6m11.56-7.83c.13.47.22 1.1.28 1.9.07.8.1 1.49.1 2.09L22 12c0 2.19-.16 3.8-.44 4.83-.25.9-.83 1.48-1.73 1.73-.47.13-1.33.22-2.65.28-1.3.07-2.49.1-3.59.1L12 19c-4.19 0-6.8-.16-7.83-.44-.9-.25-1.48-.83-1.73-1.73-.13-.47-.22-1.1-.28-1.9-.07-.8-.1-1.49-.1-2.09L2 12c0-2.19.16-3.8.44-4.83.25-.9.83-1.48 1.73-1.73.47-.13 1.33-.22 2.65-.28 1.3-.07 2.49-.1 3.59-.1L12 5c4.19 0 6.8.16 7.83.44.9.25 1.48.83 1.73 1.73Z");
    			add_location(path, file$7, 16, 6, 407);
    			attr_dev(svg, "xmlns", "http://www.w3.org/2000/svg");
    			attr_dev(svg, "aria-hidden", "true");
    			attr_dev(svg, "class", "iconify iconify--mdi");
    			attr_dev(svg, "viewBox", "0 0 24 24");
    			add_location(svg, file$7, 10, 5, 263);
    			attr_dev(button, "class", "play__btn svelte-1srk8gt");
    			attr_dev(button, "aria-label", "Play YouTube video");
    			add_location(button, file$7, 9, 2, 191);
    		},
    		m: function mount(target, anchor) {
    			insert_dev(target, button, anchor);
    			append_dev(button, svg);
    			append_dev(svg, path);

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

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

    	return block;
    }

    // (5:0) {#if isCustomPlayButton}
    function create_if_block$4(ctx) {
    	let button;
    	let current;
    	let mounted;
    	let dispose;
    	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() {
    			button = element("button");
    			if (default_slot) default_slot.c();
    			attr_dev(button, "class", "custom__play__btn svelte-1srk8gt");
    			attr_dev(button, "aria-label", "Play YouTube video");
    			add_location(button, file$7, 5, 2, 80);
    		},
    		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[3], false, false, false, false);
    				mounted = true;
    			}
    		},
    		p: function update(ctx, dirty) {
    			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
    					);
    				}
    			}
    		},
    		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_if_block$4.name,
    		type: "if",
    		source: "(5:0) {#if isCustomPlayButton}",
    		ctx
    	});

    	return block;
    }

    function create_fragment$7(ctx) {
    	let current_block_type_index;
    	let if_block;
    	let if_block_anchor;
    	let current;
    	const if_block_creators = [create_if_block$4, create_else_block$1];
    	const if_blocks = [];

    	function select_block_type(ctx, dirty) {
    		if (/*isCustomPlayButton*/ ctx[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() {
    			if_block.c();
    			if_block_anchor = empty();
    		},
    		l: function claim(nodes) {
    			throw new Error("options.hydrate only works if the component was compiled with the `hydratable: true` option");
    		},
    		m: function mount(target, anchor) {
    			if_blocks[current_block_type_index].m(target, anchor);
    			insert_dev(target, if_block_anchor, anchor);
    			current = true;
    		},
    		p: function update(ctx, [dirty]) {
    			let previous_block_index = current_block_type_index;
    			current_block_type_index = select_block_type(ctx);

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

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

    				check_outros();
    				if_block = if_blocks[current_block_type_index];

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

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

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

    	return block;
    }

    function instance$7($$self, $$props, $$invalidate) {
    	let { $$slots: slots = {}, $$scope } = $$props;
    	validate_slots('Button', slots, ['default']);
    	let { isCustomPlayButton } = $$props;

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

    	const writable_props = ['isCustomPlayButton'];

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

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

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

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

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

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

    	return [isCustomPlayButton, $$scope, slots, click_handler, click_handler_1];
    }

    class Button extends SvelteComponentDev {
    	constructor(options) {
    		super(options);
    		init(this, options, instance$7, create_fragment$7, safe_not_equal, { isCustomPlayButton: 0 });

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

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

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

    function cubicOut(t) {
        const f = t - 1.0;
        return f * f * f + 1.0;
    }

    function scale(node, { delay = 0, duration = 400, easing = cubicOut, start = 0, opacity = 0 } = {}) {
        const style = getComputedStyle(node);
        const target_opacity = +style.opacity;
        const transform = style.transform === 'none' ? '' : style.transform;
        const sd = 1 - start;
        const od = target_opacity * (1 - opacity);
        return {
            delay,
            duration,
            easing,
            css: (_t, u) => `
			transform: ${transform} scale(${1 - (sd * u)});
			opacity: ${target_opacity - (od * u)}
		`
        };
    }

    /* node_modules\svelte-youtube-embed\Iframe.svelte generated by Svelte v3.59.2 */
    const file$6 = "node_modules\\svelte-youtube-embed\\Iframe.svelte";

    function create_fragment$6(ctx) {
    	let iframe;
    	let iframe_src_value;
    	let iframe_intro;

    	const block = {
    		c: function create() {
    			iframe = element("iframe");
    			if (!src_url_equal(iframe.src, iframe_src_value = "https://www.youtube.com/embed/" + /*id*/ ctx[1] + "?autoplay=1&rel=0")) attr_dev(iframe, "src", iframe_src_value);
    			attr_dev(iframe, "title", /*title*/ ctx[0]);
    			attr_dev(iframe, "frameborder", "0");
    			attr_dev(iframe, "allow", "autoplay; picture-in-picture; clipboard-write");
    			iframe.allowFullscreen = true;
    			attr_dev(iframe, "class", "svelte-11gebsu");
    			add_location(iframe, file$6, 7, 0, 137);
    		},
    		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, iframe, anchor);
    		},
    		p: function update(new_ctx, [dirty]) {
    			ctx = new_ctx;

    			if (dirty & /*id*/ 2 && !src_url_equal(iframe.src, iframe_src_value = "https://www.youtube.com/embed/" + /*id*/ ctx[1] + "?autoplay=1&rel=0")) {
    				attr_dev(iframe, "src", iframe_src_value);
    			}

    			if (dirty & /*title*/ 1) {
    				attr_dev(iframe, "title", /*title*/ ctx[0]);
    			}
    		},
    		i: function intro(local) {
    			if (!iframe_intro) {
    				add_render_callback(() => {
    					iframe_intro = create_in_transition(iframe, scale, /*animations*/ ctx[2]
    					? { delay: 500, duration: 800 }
    					: {});

    					iframe_intro.start();
    				});
    			}
    		},
    		o: noop,
    		d: function destroy(detaching) {
    			if (detaching) detach_dev(iframe);
    		}
    	};

    	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('Iframe', slots, []);
    	let { title = "" } = $$props;
    	let { id = "" } = $$props;
    	let { animations } = $$props;

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

    	const writable_props = ['title', 'id', 'animations'];

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

    	$$self.$$set = $$props => {
    		if ('title' in $$props) $$invalidate(0, title = $$props.title);
    		if ('id' in $$props) $$invalidate(1, id = $$props.id);
    		if ('animations' in $$props) $$invalidate(2, animations = $$props.animations);
    	};

    	$$self.$capture_state = () => ({ scale, title, id, animations });

    	$$self.$inject_state = $$props => {
    		if ('title' in $$props) $$invalidate(0, title = $$props.title);
    		if ('id' in $$props) $$invalidate(1, id = $$props.id);
    		if ('animations' in $$props) $$invalidate(2, animations = $$props.animations);
    	};

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

    	return [title, id, animations];
    }

    class Iframe extends SvelteComponentDev {
    	constructor(options) {
    		super(options);
    		init(this, options, instance$6, create_fragment$6, safe_not_equal, { title: 0, id: 1, animations: 2 });

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

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

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

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

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

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

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

    /* node_modules\svelte-youtube-embed\Image.svelte generated by Svelte v3.59.2 */

    const file$5 = "node_modules\\svelte-youtube-embed\\Image.svelte";

    // (8:0) {#key play}
    function create_key_block(ctx) {
    	let img;
    	let img_src_value;
    	let img_alt_value;

    	const block = {
    		c: function create() {
    			img = element("img");
    			if (!src_url_equal(img.src, img_src_value = "https://i.ytimg.com/vi/" + /*id*/ ctx[0] + "/" + (/*altThumb*/ ctx[2] ? 'hqdefault' : 'maxresdefault') + ".jpg")) attr_dev(img, "src", img_src_value);
    			attr_dev(img, "title", /*title*/ ctx[1]);
    			attr_dev(img, "alt", img_alt_value = "Youtube video: " + /*title*/ ctx[1]);
    			attr_dev(img, "referrerpolicy", "no-referrer");
    			attr_dev(img, "class", "svelte-hw9fhp");
    			add_location(img, file$5, 8, 2, 136);
    		},
    		m: function mount(target, anchor) {
    			insert_dev(target, img, anchor);
    		},
    		p: function update(ctx, dirty) {
    			if (dirty & /*id, altThumb*/ 5 && !src_url_equal(img.src, img_src_value = "https://i.ytimg.com/vi/" + /*id*/ ctx[0] + "/" + (/*altThumb*/ ctx[2] ? 'hqdefault' : 'maxresdefault') + ".jpg")) {
    				attr_dev(img, "src", img_src_value);
    			}

    			if (dirty & /*title*/ 2) {
    				attr_dev(img, "title", /*title*/ ctx[1]);
    			}

    			if (dirty & /*title*/ 2 && img_alt_value !== (img_alt_value = "Youtube video: " + /*title*/ ctx[1])) {
    				attr_dev(img, "alt", img_alt_value);
    			}
    		},
    		d: function destroy(detaching) {
    			if (detaching) detach_dev(img);
    		}
    	};

    	dispatch_dev("SvelteRegisterBlock", {
    		block,
    		id: create_key_block.name,
    		type: "key",
    		source: "(8:0) {#key play}",
    		ctx
    	});

    	return block;
    }

    function create_fragment$5(ctx) {
    	let previous_key = /*play*/ ctx[3];
    	let key_block_anchor;
    	let key_block = create_key_block(ctx);

    	const block = {
    		c: function create() {
    			key_block.c();
    			key_block_anchor = empty();
    		},
    		l: function claim(nodes) {
    			throw new Error("options.hydrate only works if the component was compiled with the `hydratable: true` option");
    		},
    		m: function mount(target, anchor) {
    			key_block.m(target, anchor);
    			insert_dev(target, key_block_anchor, anchor);
    		},
    		p: function update(ctx, [dirty]) {
    			if (dirty & /*play*/ 8 && safe_not_equal(previous_key, previous_key = /*play*/ ctx[3])) {
    				key_block.d(1);
    				key_block = create_key_block(ctx);
    				key_block.c();
    				key_block.m(key_block_anchor.parentNode, key_block_anchor);
    			} else {
    				key_block.p(ctx, dirty);
    			}
    		},
    		i: noop,
    		o: noop,
    		d: function destroy(detaching) {
    			if (detaching) detach_dev(key_block_anchor);
    			key_block.d(detaching);
    		}
    	};

    	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('Image', slots, []);
    	let { id = "" } = $$props;
    	let { title = "" } = $$props;
    	let { altThumb = "" } = $$props;
    	let { play = false } = $$props;
    	const writable_props = ['id', 'title', 'altThumb', 'play'];

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

    	$$self.$$set = $$props => {
    		if ('id' in $$props) $$invalidate(0, id = $$props.id);
    		if ('title' in $$props) $$invalidate(1, title = $$props.title);
    		if ('altThumb' in $$props) $$invalidate(2, altThumb = $$props.altThumb);
    		if ('play' in $$props) $$invalidate(3, play = $$props.play);
    	};

    	$$self.$capture_state = () => ({ id, title, altThumb, play });

    	$$self.$inject_state = $$props => {
    		if ('id' in $$props) $$invalidate(0, id = $$props.id);
    		if ('title' in $$props) $$invalidate(1, title = $$props.title);
    		if ('altThumb' in $$props) $$invalidate(2, altThumb = $$props.altThumb);
    		if ('play' in $$props) $$invalidate(3, play = $$props.play);
    	};

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

    	return [id, title, altThumb, play];
    }

    class Image extends SvelteComponentDev {
    	constructor(options) {
    		super(options);
    		init(this, options, instance$5, create_fragment$5, safe_not_equal, { id: 0, title: 1, altThumb: 2, play: 3 });

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

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

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

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

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

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

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

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

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

    /* node_modules\svelte-youtube-embed\Youtube.svelte generated by Svelte v3.59.2 */
    const file$4 = "node_modules\\svelte-youtube-embed\\Youtube.svelte";
    const get_thumbnail_slot_changes = dirty => ({});
    const get_thumbnail_slot_context = ctx => ({});

    // (38:2) {:else}
    function create_else_block(ctx) {
    	let current_block_type_index;
    	let if_block;
    	let t0;
    	let div0;
    	let t1;
    	let div1;
    	let h3;
    	let t2;
    	let current;
    	let mounted;
    	let dispose;
    	const if_block_creators = [create_if_block_2, create_else_block_1];
    	const if_blocks = [];

    	function select_block_type_1(ctx, dirty) {
    		if (/*isCustomThumbnail*/ ctx[8]) return 0;
    		return 1;
    	}

    	current_block_type_index = select_block_type_1(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();
    			t0 = space();
    			div0 = element("div");
    			t1 = space();
    			div1 = element("div");
    			h3 = element("h3");
    			t2 = text(/*title*/ ctx[3]);
    			attr_dev(div0, "class", "b__overlay svelte-w0t24e");
    			add_location(div0, file$4, 43, 4, 1025);
    			attr_dev(h3, "class", "svelte-w0t24e");
    			add_location(h3, file$4, 44, 26, 1143);
    			attr_dev(div1, "class", "v__title svelte-w0t24e");
    			add_location(div1, file$4, 44, 4, 1121);
    		},
    		m: function mount(target, anchor) {
    			if_blocks[current_block_type_index].m(target, anchor);
    			insert_dev(target, t0, anchor);
    			insert_dev(target, div0, anchor);
    			insert_dev(target, t1, anchor);
    			insert_dev(target, div1, anchor);
    			append_dev(div1, h3);
    			append_dev(h3, t2);
    			current = true;

    			if (!mounted) {
    				dispose = [
    					listen_dev(div0, "click", /*click_handler*/ ctx[10], false, false, false, false),
    					listen_dev(div0, "keypress", /*keypress_handler*/ ctx[11], false, false, false, false)
    				];

    				mounted = true;
    			}
    		},
    		p: function update(ctx, dirty) {
    			if_block.p(ctx, dirty);
    			if (!current || dirty & /*title*/ 8) set_data_dev(t2, /*title*/ ctx[3]);
    		},
    		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(t0);
    			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_else_block.name,
    		type: "else",
    		source: "(38:2) {:else}",
    		ctx
    	});

    	return block;
    }

    // (36:2) {#if play}
    function create_if_block_1(ctx) {
    	let iframe;
    	let current;

    	iframe = new Iframe({
    			props: {
    				play: /*play*/ ctx[6],
    				id: /*id*/ ctx[0],
    				title: /*title*/ ctx[3],
    				animations: /*animations*/ ctx[2]
    			},
    			$$inline: true
    		});

    	const block = {
    		c: function create() {
    			create_component(iframe.$$.fragment);
    		},
    		m: function mount(target, anchor) {
    			mount_component(iframe, target, anchor);
    			current = true;
    		},
    		p: function update(ctx, dirty) {
    			const iframe_changes = {};
    			if (dirty & /*play*/ 64) iframe_changes.play = /*play*/ ctx[6];
    			if (dirty & /*id*/ 1) iframe_changes.id = /*id*/ ctx[0];
    			if (dirty & /*title*/ 8) iframe_changes.title = /*title*/ ctx[3];
    			if (dirty & /*animations*/ 4) iframe_changes.animations = /*animations*/ ctx[2];
    			iframe.$set(iframe_changes);
    		},
    		i: function intro(local) {
    			if (current) return;
    			transition_in(iframe.$$.fragment, local);
    			current = true;
    		},
    		o: function outro(local) {
    			transition_out(iframe.$$.fragment, local);
    			current = false;
    		},
    		d: function destroy(detaching) {
    			destroy_component(iframe, detaching);
    		}
    	};

    	dispatch_dev("SvelteRegisterBlock", {
    		block,
    		id: create_if_block_1.name,
    		type: "if",
    		source: "(36:2) {#if play}",
    		ctx
    	});

    	return block;
    }

    // (41:4) {:else}
    function create_else_block_1(ctx) {
    	let image;
    	let current;

    	image = new Image({
    			props: {
    				id: /*id*/ ctx[0],
    				title: /*title*/ ctx[3],
    				altThumb: /*altThumb*/ ctx[1],
    				play: /*play*/ ctx[6]
    			},
    			$$inline: true
    		});

    	const block = {
    		c: function create() {
    			create_component(image.$$.fragment);
    		},
    		m: function mount(target, anchor) {
    			mount_component(image, target, anchor);
    			current = true;
    		},
    		p: function update(ctx, dirty) {
    			const image_changes = {};
    			if (dirty & /*id*/ 1) image_changes.id = /*id*/ ctx[0];
    			if (dirty & /*title*/ 8) image_changes.title = /*title*/ ctx[3];
    			if (dirty & /*altThumb*/ 2) image_changes.altThumb = /*altThumb*/ ctx[1];
    			if (dirty & /*play*/ 64) image_changes.play = /*play*/ ctx[6];
    			image.$set(image_changes);
    		},
    		i: function intro(local) {
    			if (current) return;
    			transition_in(image.$$.fragment, local);
    			current = true;
    		},
    		o: function outro(local) {
    			transition_out(image.$$.fragment, local);
    			current = false;
    		},
    		d: function destroy(detaching) {
    			destroy_component(image, detaching);
    		}
    	};

    	dispatch_dev("SvelteRegisterBlock", {
    		block,
    		id: create_else_block_1.name,
    		type: "else",
    		source: "(41:4) {:else}",
    		ctx
    	});

    	return block;
    }

    // (39:4) {#if isCustomThumbnail}
    function create_if_block_2(ctx) {
    	let current;
    	const thumbnail_slot_template = /*#slots*/ ctx[9].thumbnail;
    	const thumbnail_slot = create_slot(thumbnail_slot_template, ctx, /*$$scope*/ ctx[13], get_thumbnail_slot_context);

    	const block = {
    		c: function create() {
    			if (thumbnail_slot) thumbnail_slot.c();
    		},
    		m: function mount(target, anchor) {
    			if (thumbnail_slot) {
    				thumbnail_slot.m(target, anchor);
    			}

    			current = true;
    		},
    		p: function update(ctx, dirty) {
    			if (thumbnail_slot) {
    				if (thumbnail_slot.p && (!current || dirty & /*$$scope*/ 8192)) {
    					update_slot_base(
    						thumbnail_slot,
    						thumbnail_slot_template,
    						ctx,
    						/*$$scope*/ ctx[13],
    						!current
    						? get_all_dirty_from_scope(/*$$scope*/ ctx[13])
    						: get_slot_changes(thumbnail_slot_template, /*$$scope*/ ctx[13], dirty, get_thumbnail_slot_changes),
    						get_thumbnail_slot_context
    					);
    				}
    			}
    		},
    		i: function intro(local) {
    			if (current) return;
    			transition_in(thumbnail_slot, local);
    			current = true;
    		},
    		o: function outro(local) {
    			transition_out(thumbnail_slot, local);
    			current = false;
    		},
    		d: function destroy(detaching) {
    			if (thumbnail_slot) thumbnail_slot.d(detaching);
    		}
    	};

    	dispatch_dev("SvelteRegisterBlock", {
    		block,
    		id: create_if_block_2.name,
    		type: "if",
    		source: "(39:4) {#if isCustomThumbnail}",
    		ctx
    	});

    	return block;
    }

    // (47:2) {#if !play}
    function create_if_block$3(ctx) {
    	let button;
    	let current;

    	button = new Button({
    			props: {
    				isCustomPlayButton: /*isCustomPlayButton*/ ctx[7],
    				$$slots: { default: [create_default_slot] },
    				$$scope: { ctx }
    			},
    			$$inline: true
    		});

    	button.$on("click", /*click_handler_1*/ ctx[12]);

    	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*/ 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) {
    			destroy_component(button, detaching);
    		}
    	};

    	dispatch_dev("SvelteRegisterBlock", {
    		block,
    		id: create_if_block$3.name,
    		type: "if",
    		source: "(47:2) {#if !play}",
    		ctx
    	});

    	return block;
    }

    // (48:4) <Button on:click={() => (play = true)} {isCustomPlayButton}>
    function create_default_slot(ctx) {
    	let current;
    	const default_slot_template = /*#slots*/ ctx[9].default;
    	const default_slot = create_slot(default_slot_template, ctx, /*$$scope*/ ctx[13], null);

    	const block = {
    		c: function create() {
    			if (default_slot) default_slot.c();
    		},
    		m: function mount(target, anchor) {
    			if (default_slot) {
    				default_slot.m(target, anchor);
    			}

    			current = true;
    		},
    		p: function update(ctx, dirty) {
    			if (default_slot) {
    				if (default_slot.p && (!current || dirty & /*$$scope*/ 8192)) {
    					update_slot_base(
    						default_slot,
    						default_slot_template,
    						ctx,
    						/*$$scope*/ ctx[13],
    						!current
    						? get_all_dirty_from_scope(/*$$scope*/ ctx[13])
    						: get_slot_changes(default_slot_template, /*$$scope*/ ctx[13], 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 (default_slot) default_slot.d(detaching);
    		}
    	};

    	dispatch_dev("SvelteRegisterBlock", {
    		block,
    		id: create_default_slot.name,
    		type: "slot",
    		source: "(48:4) <Button on:click={() => (play = true)} {isCustomPlayButton}>",
    		ctx
    	});

    	return block;
    }

    function create_fragment$4(ctx) {
    	let div;
    	let current_block_type_index;
    	let if_block0;
    	let t;
    	let current;
    	const if_block_creators = [create_if_block_1, create_else_block];
    	const if_blocks = [];

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

    	current_block_type_index = select_block_type(ctx);
    	if_block0 = if_blocks[current_block_type_index] = if_block_creators[current_block_type_index](ctx);
    	let if_block1 = !/*play*/ ctx[6] && create_if_block$3(ctx);

    	const block = {
    		c: function create() {
    			div = element("div");
    			if_block0.c();
    			t = space();
    			if (if_block1) if_block1.c();
    			attr_dev(div, "class", "you__tube svelte-w0t24e");
    			set_style(div, "--aspect-ratio", /*width*/ ctx[4] / /*height*/ ctx[5] || '16/9');
    			attr_dev(div, "title", /*title*/ ctx[3]);
    			add_location(div, file$4, 30, 0, 732);
    		},
    		l: function claim(nodes) {
    			throw new Error("options.hydrate only works if the component was compiled with the `hydratable: true` option");
    		},
    		m: function mount(target, anchor) {
    			insert_dev(target, div, anchor);
    			if_blocks[current_block_type_index].m(div, null);
    			append_dev(div, t);
    			if (if_block1) if_block1.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_block0 = if_blocks[current_block_type_index];

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

    				transition_in(if_block0, 1);
    				if_block0.m(div, t);
    			}

    			if (!/*play*/ ctx[6]) {
    				if (if_block1) {
    					if_block1.p(ctx, dirty);

    					if (dirty & /*play*/ 64) {
    						transition_in(if_block1, 1);
    					}
    				} else {
    					if_block1 = create_if_block$3(ctx);
    					if_block1.c();
    					transition_in(if_block1, 1);
    					if_block1.m(div, null);
    				}
    			} else if (if_block1) {
    				group_outros();

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

    				check_outros();
    			}

    			if (!current || dirty & /*width, height*/ 48) {
    				set_style(div, "--aspect-ratio", /*width*/ ctx[4] / /*height*/ ctx[5] || '16/9');
    			}

    			if (!current || dirty & /*title*/ 8) {
    				attr_dev(div, "title", /*title*/ ctx[3]);
    			}
    		},
    		i: function intro(local) {
    			if (current) return;
    			transition_in(if_block0);
    			transition_in(if_block1);
    			current = true;
    		},
    		o: function outro(local) {
    			transition_out(if_block0);
    			transition_out(if_block1);
    			current = false;
    		},
    		d: function destroy(detaching) {
    			if (detaching) detach_dev(div);
    			if_blocks[current_block_type_index].d();
    			if (if_block1) if_block1.d();
    		}
    	};

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

    	return block;
    }

    function instance$4($$self, $$props, $$invalidate) {
    	let { $$slots: slots = {}, $$scope } = $$props;
    	validate_slots('Youtube', slots, ['thumbnail','default']);
    	const $$slots = compute_slots(slots);
    	let { id = null } = $$props;
    	let { altThumb = false } = $$props;
    	let { animations = true } = $$props;
    	let title = "";
    	let width = 0;
    	let height = 0;
    	let videoInfo = {};

    	onMount(async () => {
    		const res = await fetch(`//www.youtube.com/oembed?url=https://www.youtube.com/watch?v=${id}&format=json`);
    		videoInfo = await res.json();
    		$$invalidate(3, title = videoInfo?.title);
    		$$invalidate(4, width = videoInfo?.width);
    		$$invalidate(5, height = videoInfo?.height);
    	});

    	let play = false;
    	const isCustomPlayButton = $$slots.default;
    	const isCustomThumbnail = $$slots.thumbnail;
    	const writable_props = ['id', 'altThumb', 'animations'];

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

    	const click_handler = () => $$invalidate(6, play = true);
    	const keypress_handler = () => $$invalidate(6, play = true);
    	const click_handler_1 = () => $$invalidate(6, play = true);

    	$$self.$$set = $$props => {
    		if ('id' in $$props) $$invalidate(0, id = $$props.id);
    		if ('altThumb' in $$props) $$invalidate(1, altThumb = $$props.altThumb);
    		if ('animations' in $$props) $$invalidate(2, animations = $$props.animations);
    		if ('$$scope' in $$props) $$invalidate(13, $$scope = $$props.$$scope);
    	};

    	$$self.$capture_state = () => ({
    		onMount,
    		Button,
    		Iframe,
    		Image,
    		id,
    		altThumb,
    		animations,
    		title,
    		width,
    		height,
    		videoInfo,
    		play,
    		isCustomPlayButton,
    		isCustomThumbnail
    	});

    	$$self.$inject_state = $$props => {
    		if ('id' in $$props) $$invalidate(0, id = $$props.id);
    		if ('altThumb' in $$props) $$invalidate(1, altThumb = $$props.altThumb);
    		if ('animations' in $$props) $$invalidate(2, animations = $$props.animations);
    		if ('title' in $$props) $$invalidate(3, title = $$props.title);
    		if ('width' in $$props) $$invalidate(4, width = $$props.width);
    		if ('height' in $$props) $$invalidate(5, height = $$props.height);
    		if ('videoInfo' in $$props) videoInfo = $$props.videoInfo;
    		if ('play' in $$props) $$invalidate(6, play = $$props.play);
    	};

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

    	return [
    		id,
    		altThumb,
    		animations,
    		title,
    		width,
    		height,
    		play,
    		isCustomPlayButton,
    		isCustomThumbnail,
    		slots,
    		click_handler,
    		keypress_handler,
    		click_handler_1,
    		$$scope
    	];
    }

    class Youtube extends SvelteComponentDev {
    	constructor(options) {
    		super(options);
    		init(this, options, instance$4, create_fragment$4, safe_not_equal, { id: 0, altThumb: 1, animations: 2 });

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

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

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

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

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

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

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

    /* src\YoutubeBookmarksfromReact.svelte generated by Svelte v3.59.2 */

    const { console: console_1$1 } = globals;
    const file$3 = "src\\YoutubeBookmarksfromReact.svelte";

    function get_each_context(ctx, list, i) {
    	const child_ctx = ctx.slice();
    	child_ctx[22] = list[i];
    	child_ctx[24] = i;
    	return child_ctx;
    }

    function get_each_context_1(ctx, list, i) {
    	const child_ctx = ctx.slice();
    	child_ctx[22] = list[i];
    	child_ctx[24] = i;
    	return child_ctx;
    }

    // (145:4) {#if videoId}
    function create_if_block$2(ctx) {
    	let youtube;
    	let current;

    	youtube = new Youtube({
    			props: { id: /*videoId*/ ctx[0] },
    			$$inline: true
    		});

    	youtube.$on("ready", /*onReady*/ ctx[5]);

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

    	dispatch_dev("SvelteRegisterBlock", {
    		block,
    		id: create_if_block$2.name,
    		type: "if",
    		source: "(145:4) {#if videoId}",
    		ctx
    	});

    	return block;
    }

    // (165:12) {#each userTimestamps as time, index (time)}
    function create_each_block_1(key_1, ctx) {
    	let li;
    	let t0_value = /*time*/ ctx[22] + "";
    	let t0;
    	let t1;

    	const block = {
    		key: key_1,
    		first: null,
    		c: function create() {
    			li = element("li");
    			t0 = text(t0_value);
    			t1 = text(" s");
    			add_location(li, file$3, 165, 12, 6828);
    			this.first = li;
    		},
    		m: function mount(target, anchor) {
    			insert_dev(target, li, anchor);
    			append_dev(li, t0);
    			append_dev(li, t1);
    		},
    		p: function update(new_ctx, dirty) {
    			ctx = new_ctx;
    			if (dirty & /*userTimestamps*/ 4 && t0_value !== (t0_value = /*time*/ ctx[22] + "")) set_data_dev(t0, t0_value);
    		},
    		d: function destroy(detaching) {
    			if (detaching) detach_dev(li);
    		}
    	};

    	dispatch_dev("SvelteRegisterBlock", {
    		block,
    		id: create_each_block_1.name,
    		type: "each",
    		source: "(165:12) {#each userTimestamps as time, index (time)}",
    		ctx
    	});

    	return block;
    }

    // (171:12) {#each r2userTimestamps as time, index (time)}
    function create_each_block(key_1, ctx) {
    	let li;
    	let t0_value = /*time*/ ctx[22] + "";
    	let t0;
    	let t1;

    	const block = {
    		key: key_1,
    		first: null,
    		c: function create() {
    			li = element("li");
    			t0 = text(t0_value);
    			t1 = text(" s");
    			add_location(li, file$3, 171, 12, 7032);
    			this.first = li;
    		},
    		m: function mount(target, anchor) {
    			insert_dev(target, li, anchor);
    			append_dev(li, t0);
    			append_dev(li, t1);
    		},
    		p: function update(new_ctx, dirty) {
    			ctx = new_ctx;
    			if (dirty & /*r2userTimestamps*/ 8 && t0_value !== (t0_value = /*time*/ ctx[22] + "")) set_data_dev(t0, t0_value);
    		},
    		d: function destroy(detaching) {
    			if (detaching) detach_dev(li);
    		}
    	};

    	dispatch_dev("SvelteRegisterBlock", {
    		block,
    		id: create_each_block.name,
    		type: "each",
    		source: "(171:12) {#each r2userTimestamps as time, index (time)}",
    		ctx
    	});

    	return block;
    }

    function create_fragment$3(ctx) {
    	let div2;
    	let t0;
    	let input0;
    	let t1;
    	let t2;
    	let div0;
    	let span;
    	let t4;
    	let br0;
    	let t5;
    	let t6_value = /*currentUserIndex*/ ctx[1] + 1 + "";
    	let t6;
    	let t7;
    	let t8_value = /*userTimestamps*/ ctx[2].length + "";
    	let t8;
    	let t9;
    	let t10;
    	let button0;
    	let t14;
    	let button1;
    	let t18;
    	let button2;
    	let t20;
    	let button3;
    	let t22;
    	let button4;
    	let t24;
    	let button5;
    	let t26;
    	let button6;
    	let t28;
    	let button7;
    	let t30;
    	let input1;
    	let t31;
    	let br1;
    	let t32;
    	let button8;
    	let t34;
    	let button9;
    	let t36;
    	let div1;
    	let h40;
    	let t38;
    	let ul0;
    	let each_blocks_1 = [];
    	let each0_lookup = new Map();
    	let t39;
    	let h41;
    	let t41;
    	let ul1;
    	let each_blocks = [];
    	let each1_lookup = new Map();
    	let current;
    	let mounted;
    	let dispose;
    	let if_block = /*videoId*/ ctx[0] && create_if_block$2(ctx);
    	let each_value_1 = /*userTimestamps*/ ctx[2];
    	validate_each_argument(each_value_1);
    	const get_key = ctx => /*time*/ ctx[22];
    	validate_each_keys(ctx, each_value_1, get_each_context_1, get_key);

    	for (let i = 0; i < each_value_1.length; i += 1) {
    		let child_ctx = get_each_context_1(ctx, each_value_1, i);
    		let key = get_key(child_ctx);
    		each0_lookup.set(key, each_blocks_1[i] = create_each_block_1(key, child_ctx));
    	}

    	let each_value = /*r2userTimestamps*/ ctx[3];
    	validate_each_argument(each_value);
    	const get_key_1 = ctx => /*time*/ ctx[22];
    	validate_each_keys(ctx, each_value, get_each_context, get_key_1);

    	for (let i = 0; i < each_value.length; i += 1) {
    		let child_ctx = get_each_context(ctx, each_value, i);
    		let key = get_key_1(child_ctx);
    		each1_lookup.set(key, each_blocks[i] = create_each_block(key, child_ctx));
    	}

    	const block = {
    		c: function create() {
    			div2 = element("div");
    			t0 = text("(Select All and Paste to change) Test - 4SrHKXxdI0k | qEpmiA3XkX8\r\n    ");
    			input0 = element("input");
    			t1 = space();
    			if (if_block) if_block.c();
    			t2 = space();
    			div0 = element("div");
    			span = element("span");
    			span.textContent = "For course content - ask chatgpt to show you the bash version. For QB In the last day before the test if you are still on the incorrect ones take screenshot and write on them with iPad";
    			t4 = space();
    			br0 = element("br");
    			t5 = space();
    			t6 = text(t6_value);
    			t7 = text(" / ");
    			t8 = text(t8_value);
    			t9 = text(" (Update this number on Add Current or Add current - 5) Display Total timestamp count here as well");
    			t10 = space();
    			button0 = element("button");
    			button0.textContent = `Previous (${/*interval*/ ctx[4]}s)`;
    			t14 = space();
    			button1 = element("button");
    			button1.textContent = `Next (${/*interval*/ ctx[4]}s)`;
    			t18 = space();
    			button2 = element("button");
    			button2.textContent = "Add Current Time";
    			t20 = space();
    			button3 = element("button");
    			button3.textContent = "Add Current Time - 5";
    			t22 = space();
    			button4 = element("button");
    			button4.textContent = "Remove Current Time";
    			t24 = space();
    			button5 = element("button");
    			button5.textContent = "User Previous";
    			t26 = space();
    			button6 = element("button");
    			button6.textContent = "User Next";
    			t28 = space();
    			button7 = element("button");
    			button7.textContent = "Export Timestamps";
    			t30 = space();
    			input1 = element("input");
    			t31 = space();
    			br1 = element("br");
    			t32 = space();
    			button8 = element("button");
    			button8.textContent = "Round 2 Add Current Time - 5";
    			t34 = space();
    			button9 = element("button");
    			button9.textContent = "Export Round 2 Timestamps";
    			t36 = space();
    			div1 = element("div");
    			h40 = element("h4");
    			h40.textContent = "User Timestamps";
    			t38 = space();
    			ul0 = element("ul");

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

    			t39 = space();
    			h41 = element("h4");
    			h41.textContent = "Round 2 Timestamps";
    			t41 = space();
    			ul1 = element("ul");

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

    			attr_dev(input0, "type", "text");
    			attr_dev(input0, "placeholder", "Enter YouTube Video ID");
    			add_location(input0, file$3, 139, 4, 4430);
    			attr_dev(span, "class", "bg-red-600 font-bold");
    			add_location(span, file$3, 148, 10, 4657);
    			add_location(br0, file$3, 148, 238, 4885);
    			add_location(div0, file$3, 148, 4, 4651);
    			attr_dev(button0, "class", "VideoUIButton svelte-17r32ez");
    			add_location(button0, file$3, 149, 4, 5055);
    			attr_dev(button1, "class", "border border-double border-black rounded-md font-bold bg-red-300 p-1 mx-1");
    			add_location(button1, file$3, 150, 4, 5155);
    			attr_dev(button2, "class", "border border-double border-black rounded-md font-bold bg-red-300 p-1 mx-1");
    			add_location(button2, file$3, 151, 4, 5308);
    			attr_dev(button3, "class", "border border-double border-black rounded-md font-bold bg-red-300 p-1 mx-1");
    			add_location(button3, file$3, 152, 4, 5458);
    			attr_dev(button4, "class", "border border-double border-black rounded-md font-bold bg-red-300 p-1 mx-1");
    			add_location(button4, file$3, 153, 4, 5618);
    			attr_dev(button5, "class", "border border-double border-black rounded-md font-bold bg-red-300 p-1 mx-1");
    			add_location(button5, file$3, 154, 4, 5774);
    			attr_dev(button6, "class", "border border-double border-black rounded-md font-bold bg-red-300 p-1 mx-1");
    			add_location(button6, file$3, 155, 4, 5930);
    			attr_dev(button7, "class", "border border-double border-black rounded-md font-bold bg-red-300 p-1 mx-1");
    			add_location(button7, file$3, 156, 4, 6078);
    			attr_dev(input1, "type", "file");
    			attr_dev(input1, "accept", ".json");
    			add_location(input1, file$3, 157, 4, 6229);
    			add_location(br1, file$3, 158, 4, 6300);
    			attr_dev(button8, "class", "border border-double border-black rounded-md font-bold bg-green-300 p-1 mx-1");
    			add_location(button8, file$3, 159, 4, 6312);
    			attr_dev(button9, "class", "border border-double border-black rounded-md font-bold bg-green-300 p-1 mx-1");
    			add_location(button9, file$3, 160, 4, 6485);
    			add_location(h40, file$3, 162, 8, 6692);
    			attr_dev(ul0, "class", "grid grid-cols-12");
    			add_location(ul0, file$3, 163, 8, 6726);
    			add_location(h41, file$3, 168, 8, 6891);
    			attr_dev(ul1, "class", "grid grid-cols-12");
    			add_location(ul1, file$3, 169, 8, 6928);
    			attr_dev(div1, "class", "h-32 overflow-y-auto");
    			add_location(div1, file$3, 161, 4, 6648);
    			attr_dev(div2, "class", "border border-double border-width-4 border-red-800");
    			add_location(div2, file$3, 137, 0, 4289);
    		},
    		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, t0);
    			append_dev(div2, input0);
    			set_input_value(input0, /*videoId*/ ctx[0]);
    			append_dev(div2, t1);
    			if (if_block) if_block.m(div2, null);
    			append_dev(div2, t2);
    			append_dev(div2, div0);
    			append_dev(div0, span);
    			append_dev(div0, t4);
    			append_dev(div0, br0);
    			append_dev(div0, t5);
    			append_dev(div0, t6);
    			append_dev(div0, t7);
    			append_dev(div0, t8);
    			append_dev(div0, t9);
    			append_dev(div2, t10);
    			append_dev(div2, button0);
    			append_dev(div2, t14);
    			append_dev(div2, button1);
    			append_dev(div2, t18);
    			append_dev(div2, button2);
    			append_dev(div2, t20);
    			append_dev(div2, button3);
    			append_dev(div2, t22);
    			append_dev(div2, button4);
    			append_dev(div2, t24);
    			append_dev(div2, button5);
    			append_dev(div2, t26);
    			append_dev(div2, button6);
    			append_dev(div2, t28);
    			append_dev(div2, button7);
    			append_dev(div2, t30);
    			append_dev(div2, input1);
    			append_dev(div2, t31);
    			append_dev(div2, br1);
    			append_dev(div2, t32);
    			append_dev(div2, button8);
    			append_dev(div2, t34);
    			append_dev(div2, button9);
    			append_dev(div2, t36);
    			append_dev(div2, div1);
    			append_dev(div1, h40);
    			append_dev(div1, t38);
    			append_dev(div1, ul0);

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

    			append_dev(div1, t39);
    			append_dev(div1, h41);
    			append_dev(div1, t41);
    			append_dev(div1, ul1);

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

    			current = true;

    			if (!mounted) {
    				dispose = [
    					listen_dev(input0, "input", /*input0_input_handler*/ ctx[17]),
    					listen_dev(button0, "click", /*goToPreviousTimestamp*/ ctx[10], false, false, false, false),
    					listen_dev(button1, "click", /*goToNextTimestamp*/ ctx[9], false, false, false, false),
    					listen_dev(button2, "click", /*addUserTimestamp*/ ctx[13], false, false, false, false),
    					listen_dev(button3, "click", /*addUserTimestampminus5*/ ctx[14], false, false, false, false),
    					listen_dev(button4, "click", /*removeUserTimestamp*/ ctx[15], false, false, false, false),
    					listen_dev(button5, "click", /*goToUserPreviousTimestamp*/ ctx[12], false, false, false, false),
    					listen_dev(button6, "click", /*goToUserNextTimestamp*/ ctx[11], false, false, false, false),
    					listen_dev(button7, "click", /*exportTimestamps*/ ctx[6], false, false, false, false),
    					listen_dev(input1, "change", /*importTimestamps*/ ctx[8], false, false, false, false),
    					listen_dev(button8, "click", /*addr2UserTimestampminus5*/ ctx[16], false, false, false, false),
    					listen_dev(button9, "click", /*exportr2Timestamps*/ ctx[7], false, false, false, false)
    				];

    				mounted = true;
    			}
    		},
    		p: function update(ctx, [dirty]) {
    			if (dirty & /*videoId*/ 1 && input0.value !== /*videoId*/ ctx[0]) {
    				set_input_value(input0, /*videoId*/ ctx[0]);
    			}

    			if (/*videoId*/ ctx[0]) {
    				if (if_block) {
    					if_block.p(ctx, dirty);

    					if (dirty & /*videoId*/ 1) {
    						transition_in(if_block, 1);
    					}
    				} else {
    					if_block = create_if_block$2(ctx);
    					if_block.c();
    					transition_in(if_block, 1);
    					if_block.m(div2, t2);
    				}
    			} else if (if_block) {
    				group_outros();

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

    				check_outros();
    			}

    			if ((!current || dirty & /*currentUserIndex*/ 2) && t6_value !== (t6_value = /*currentUserIndex*/ ctx[1] + 1 + "")) set_data_dev(t6, t6_value);
    			if ((!current || dirty & /*userTimestamps*/ 4) && t8_value !== (t8_value = /*userTimestamps*/ ctx[2].length + "")) set_data_dev(t8, t8_value);

    			if (dirty & /*userTimestamps*/ 4) {
    				each_value_1 = /*userTimestamps*/ ctx[2];
    				validate_each_argument(each_value_1);
    				validate_each_keys(ctx, each_value_1, get_each_context_1, get_key);
    				each_blocks_1 = update_keyed_each(each_blocks_1, dirty, get_key, 1, ctx, each_value_1, each0_lookup, ul0, destroy_block, create_each_block_1, null, get_each_context_1);
    			}

    			if (dirty & /*r2userTimestamps*/ 8) {
    				each_value = /*r2userTimestamps*/ ctx[3];
    				validate_each_argument(each_value);
    				validate_each_keys(ctx, each_value, get_each_context, get_key_1);
    				each_blocks = update_keyed_each(each_blocks, dirty, get_key_1, 1, ctx, each_value, each1_lookup, ul1, destroy_block, create_each_block, null, get_each_context);
    			}
    		},
    		i: function intro(local) {
    			if (current) return;
    			transition_in(if_block);
    			current = true;
    		},
    		o: function outro(local) {
    			transition_out(if_block);
    			current = false;
    		},
    		d: function destroy(detaching) {
    			if (detaching) detach_dev(div2);
    			if (if_block) if_block.d();

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

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

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

    	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('YoutubeBookmarksfromReact', slots, []);
    	let videoId = '';
    	let currentIndex = 0;
    	let currentUserIndex = 0;
    	let timestamps = [];
    	let userTimestamps = [];
    	let r2userTimestamps = [];
    	let player = null;
    	let interval = 20;

    	const opts = {
    		height: '560',
    		width: '100%',
    		playerVars: { autoplay: 1 }
    	};

    	function onReady(event) {
    		player = event.target;
    		console.log(player);
    		const duration = player.getDuration();
    		console.log(duration);
    		const generatedTimestamps = [];

    		for (let i = interval; i < duration; i += interval) {
    			generatedTimestamps.push(i);
    		}

    		timestamps = generatedTimestamps;
    	}

    	function exportTimestamps() {
    		const data = JSON.stringify({ videoId, timestamps: userTimestamps });
    		const blob = new Blob([data], { type: 'application/json' });
    		const url = URL.createObjectURL(blob);
    		const a = document.createElement('a');
    		a.style.display = 'none';
    		const filename = `${videoId}_timestamps.json`;
    		a.href = url;
    		a.download = filename;
    		document.body.appendChild(a);
    		a.click();
    		window.URL.revokeObjectURL(url);
    	}

    	function exportr2Timestamps() {
    		const data = JSON.stringify({ videoId, timestamps: r2userTimestamps });
    		const blob = new Blob([data], { type: 'application/json' });
    		const url = URL.createObjectURL(blob);
    		const a = document.createElement('a');
    		a.style.display = 'none';
    		const filename = `${videoId}_round2timestamps.json`;
    		a.href = url;
    		a.download = filename;
    		document.body.appendChild(a);
    		a.click();
    		window.URL.revokeObjectURL(url);
    	}

    	function importTimestamps(event) {
    		const file = event.target.files[0];
    		const reader = new FileReader();

    		reader.onload = e => {
    			try {
    				const data = JSON.parse(e.target.result);

    				if (!Array.isArray(data.timestamps)) {
    					alert('Invalid file structure: timestamps should be an array.');
    					return;
    				}

    				$$invalidate(0, videoId = data.videoId || '');
    				$$invalidate(2, userTimestamps = data.timestamps);
    			} catch(error) {
    				alert('An error occurred while importing timestamps.');
    			}
    		};

    		reader.readAsText(file);
    	}

    	function goToNextTimestamp() {
    		if (currentIndex < timestamps.length - 1) {
    			currentIndex += 1;
    			player.seekTo(timestamps[currentIndex]);
    		}
    	}

    	function goToPreviousTimestamp() {
    		if (currentIndex > 0) {
    			currentIndex -= 1;
    			player.seekTo(timestamps[currentIndex]);
    		}
    	}

    	function goToUserNextTimestamp() {
    		if (currentUserIndex < userTimestamps.length - 1) {
    			$$invalidate(1, currentUserIndex += 1);
    			player.seekTo(userTimestamps[currentUserIndex]);
    		}
    	}

    	function goToUserPreviousTimestamp() {
    		if (currentUserIndex > 0) {
    			$$invalidate(1, currentUserIndex -= 1);
    			player.seekTo(userTimestamps[currentUserIndex]);
    		}
    	}

    	function addUserTimestamp() {
    		const currentTime = Math.floor(player.getCurrentTime());
    		$$invalidate(2, userTimestamps = [...userTimestamps, currentTime].sort((a, b) => a - b));
    	}

    	function addUserTimestampminus5() {
    		const currentTime = Math.floor(player.getCurrentTime() - 5);
    		$$invalidate(2, userTimestamps = [...userTimestamps, currentTime].sort((a, b) => a - b));
    	}

    	function removeUserTimestamp() {
    		const currentTime = Math.floor(player.getCurrentTime());
    		$$invalidate(2, userTimestamps = userTimestamps.filter(time => time !== currentTime));
    	}

    	function addr2UserTimestampminus5() {
    		const currentTime = Math.floor(player.getCurrentTime() - 5);
    		$$invalidate(3, r2userTimestamps = [...r2userTimestamps, currentTime].sort((a, b) => a - b));
    	}

    	const writable_props = [];

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

    	function input0_input_handler() {
    		videoId = this.value;
    		$$invalidate(0, videoId);
    	}

    	$$self.$capture_state = () => ({
    		onMount,
    		YouTube: Youtube,
    		videoId,
    		currentIndex,
    		currentUserIndex,
    		timestamps,
    		userTimestamps,
    		r2userTimestamps,
    		player,
    		interval,
    		opts,
    		onReady,
    		exportTimestamps,
    		exportr2Timestamps,
    		importTimestamps,
    		goToNextTimestamp,
    		goToPreviousTimestamp,
    		goToUserNextTimestamp,
    		goToUserPreviousTimestamp,
    		addUserTimestamp,
    		addUserTimestampminus5,
    		removeUserTimestamp,
    		addr2UserTimestampminus5
    	});

    	$$self.$inject_state = $$props => {
    		if ('videoId' in $$props) $$invalidate(0, videoId = $$props.videoId);
    		if ('currentIndex' in $$props) currentIndex = $$props.currentIndex;
    		if ('currentUserIndex' in $$props) $$invalidate(1, currentUserIndex = $$props.currentUserIndex);
    		if ('timestamps' in $$props) timestamps = $$props.timestamps;
    		if ('userTimestamps' in $$props) $$invalidate(2, userTimestamps = $$props.userTimestamps);
    		if ('r2userTimestamps' in $$props) $$invalidate(3, r2userTimestamps = $$props.r2userTimestamps);
    		if ('player' in $$props) player = $$props.player;
    		if ('interval' in $$props) $$invalidate(4, interval = $$props.interval);
    	};

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

    	return [
    		videoId,
    		currentUserIndex,
    		userTimestamps,
    		r2userTimestamps,
    		interval,
    		onReady,
    		exportTimestamps,
    		exportr2Timestamps,
    		importTimestamps,
    		goToNextTimestamp,
    		goToPreviousTimestamp,
    		goToUserNextTimestamp,
    		goToUserPreviousTimestamp,
    		addUserTimestamp,
    		addUserTimestampminus5,
    		removeUserTimestamp,
    		addr2UserTimestampminus5,
    		input0_input_handler
    	];
    }

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

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

    /* src\SimpleModal.svelte generated by Svelte v3.59.2 */

    const file$2 = "src\\SimpleModal.svelte";

    // (11:2) {#if isOpen}
    function create_if_block$1(ctx) {
    	let div3;
    	let div2;
    	let div0;
    	let h2;
    	let t0;
    	let t1;
    	let button;
    	let t3;
    	let div1;
    	let t4;
    	let mounted;
    	let dispose;

    	const block = {
    		c: function create() {
    			div3 = element("div");
    			div2 = element("div");
    			div0 = element("div");
    			h2 = element("h2");
    			t0 = text(/*title*/ ctx[1]);
    			t1 = space();
    			button = element("button");
    			button.textContent = "×";
    			t3 = space();
    			div1 = element("div");
    			t4 = text(/*content*/ ctx[2]);
    			add_location(h2, file$2, 14, 10, 302);
    			add_location(button, file$2, 15, 10, 330);
    			attr_dev(div0, "class", "modal-header svelte-1qa8urn");
    			add_location(div0, file$2, 13, 8, 264);
    			attr_dev(div1, "class", "modal-content svelte-1qa8urn");
    			add_location(div1, file$2, 17, 8, 402);
    			attr_dev(div2, "class", "modal svelte-1qa8urn");
    			add_location(div2, file$2, 12, 6, 235);
    			attr_dev(div3, "class", "modal-overlay svelte-1qa8urn");
    			add_location(div3, file$2, 11, 4, 200);
    		},
    		m: function mount(target, anchor) {
    			insert_dev(target, div3, anchor);
    			append_dev(div3, div2);
    			append_dev(div2, div0);
    			append_dev(div0, h2);
    			append_dev(h2, t0);
    			append_dev(div0, t1);
    			append_dev(div0, button);
    			append_dev(div2, t3);
    			append_dev(div2, div1);
    			append_dev(div1, t4);

    			if (!mounted) {
    				dispose = listen_dev(button, "click", /*closeModal*/ ctx[3], false, false, false, false);
    				mounted = true;
    			}
    		},
    		p: function update(ctx, dirty) {
    			if (dirty & /*title*/ 2) set_data_dev(t0, /*title*/ ctx[1]);
    			if (dirty & /*content*/ 4) set_data_dev(t4, /*content*/ ctx[2]);
    		},
    		d: function destroy(detaching) {
    			if (detaching) detach_dev(div3);
    			mounted = false;
    			dispose();
    		}
    	};

    	dispatch_dev("SvelteRegisterBlock", {
    		block,
    		id: create_if_block$1.name,
    		type: "if",
    		source: "(11:2) {#if isOpen}",
    		ctx
    	});

    	return block;
    }

    function create_fragment$2(ctx) {
    	let if_block_anchor;
    	let if_block = /*isOpen*/ ctx[0] && create_if_block$1(ctx);

    	const block = {
    		c: function create() {
    			if (if_block) if_block.c();
    			if_block_anchor = empty();
    		},
    		l: function claim(nodes) {
    			throw new Error("options.hydrate only works if the component was compiled with the `hydratable: true` option");
    		},
    		m: function mount(target, anchor) {
    			if (if_block) if_block.m(target, anchor);
    			insert_dev(target, if_block_anchor, anchor);
    		},
    		p: function update(ctx, [dirty]) {
    			if (/*isOpen*/ ctx[0]) {
    				if (if_block) {
    					if_block.p(ctx, dirty);
    				} else {
    					if_block = create_if_block$1(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;
    			}
    		},
    		i: noop,
    		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_fragment$2.name,
    		type: "component",
    		source: "",
    		ctx
    	});

    	return block;
    }

    function instance$2($$self, $$props, $$invalidate) {
    	let { $$slots: slots = {}, $$scope } = $$props;
    	validate_slots('SimpleModal', slots, []);
    	let { isOpen = false } = $$props;
    	let { title = '' } = $$props;
    	let { content = '' } = $$props;

    	function closeModal() {
    		$$invalidate(0, isOpen = false);
    	}

    	const writable_props = ['isOpen', 'title', 'content'];

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

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

    	$$self.$capture_state = () => ({ isOpen, title, content, closeModal });

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

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

    	return [isOpen, title, content, closeModal];
    }

    class SimpleModal extends SvelteComponentDev {
    	constructor(options) {
    		super(options);
    		init(this, options, instance$2, create_fragment$2, safe_not_equal, { isOpen: 0, title: 1, content: 2 });

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

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

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

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

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

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

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

    /* src\YoutubeIframeAPICustomInterface.svelte generated by Svelte v3.59.2 */

    const { console: console_1 } = globals;
    const file$1 = "src\\YoutubeIframeAPICustomInterface.svelte";

    function create_fragment$1(ctx) {
    	let h1;
    	let t1;
    	let label;
    	let t2;
    	let input0;
    	let t3;
    	let input1;
    	let t4;
    	let textarea0;
    	let t5;
    	let textarea1;
    	let t6;
    	let div3;
    	let div0;
    	let t7;
    	let div1;
    	let t8;
    	let t9_value = /*currentTime*/ ctx[3].toFixed(2) + "";
    	let t9;
    	let t10;
    	let t11;
    	let div2;
    	let t12;
    	let t13;
    	let br0;
    	let t14;
    	let t15;
    	let t16;
    	let input2;
    	let t17;
    	let button0;
    	let t19;
    	let button1;
    	let t21;
    	let t22;
    	let t23;
    	let t24_value = /*timestamps*/ ctx[8].length + "";
    	let t24;
    	let t25;
    	let button2;
    	let t27;
    	let button3;
    	let t28;
    	let button3_class_value;
    	let button3_disabled_value;
    	let t29;
    	let button4;
    	let t30;
    	let button4_class_value;
    	let button4_disabled_value;
    	let t31;
    	let t32;
    	let t33;
    	let t34_value = /*userTimestamps*/ ctx[1].length + "";
    	let t34;
    	let t35;
    	let br1;
    	let t36;
    	let mounted;
    	let dispose;

    	const block = {
    		c: function create() {
    			h1 = element("h1");
    			h1.textContent = "Custom Youtube Player for learning Video and music";
    			t1 = space();
    			label = element("label");
    			t2 = text("Current Video Id (test - qEpmiA3XkX8 hardcoded)\r\n    ");
    			input0 = element("input");
    			t3 = text("\r\n    Start/Stop Word Update\r\n    ");
    			input1 = element("input");
    			t4 = text("\r\n    VideoIDs\r\n    ");
    			textarea0 = element("textarea");
    			t5 = text("\r\n    MusicIDs\r\n    ");
    			textarea1 = element("textarea");
    			t6 = space();
    			div3 = element("div");
    			div0 = element("div");
    			t7 = space();
    			div1 = element("div");
    			t8 = text("Current Time: ");
    			t9 = text(t9_value);
    			t10 = text(" seconds");
    			t11 = space();
    			div2 = element("div");
    			t12 = text(/*line*/ ctx[5]);
    			t13 = space();
    			br0 = element("br");
    			t14 = space();
    			t15 = text(/*currentWord*/ ctx[4]);
    			t16 = space();
    			input2 = element("input");
    			t17 = space();
    			button0 = element("button");
    			button0.textContent = "Previous Auto Timestamp";
    			t19 = space();
    			button1 = element("button");
    			button1.textContent = "Next Auto Timestamp";
    			t21 = text("\r\nAuto Timestamps: ");
    			t22 = text(/*currentIndex*/ ctx[7]);
    			t23 = text(" / ");
    			t24 = text(t24_value);
    			t25 = text("  ||| \r\n");
    			button2 = element("button");
    			button2.textContent = "Add Timestamp";
    			t27 = space();
    			button3 = element("button");
    			t28 = text("Previous User Timestamp");
    			t29 = space();
    			button4 = element("button");
    			t30 = text("Next User Timestamp");
    			t31 = text("\r\nUser Timestamps: ");
    			t32 = text(/*currentuserIndex*/ ctx[0]);
    			t33 = text(" / ");
    			t34 = text(t34_value);
    			t35 = space();
    			br1 = element("br");
    			t36 = text("A list of one messes up the logic for the counter in conjuction with the user timestamp button reactivity");
    			add_location(h1, file$1, 166, 0, 5475);
    			attr_dev(input0, "type", "text");
    			add_location(input0, file$1, 170, 4, 5604);
    			attr_dev(input1, "type", "checkbox");
    			add_location(input1, file$1, 172, 4, 5685);
    			attr_dev(textarea0, "id", "ytvideoids");
    			attr_dev(textarea0, "cols", "40");
    			attr_dev(textarea0, "rows", "1");
    			attr_dev(textarea0, "placeholder", "Put video ids to learn here");
    			add_location(textarea0, file$1, 174, 4, 5778);
    			attr_dev(textarea1, "id", "ytmusicids");
    			attr_dev(textarea1, "cols", "40");
    			attr_dev(textarea1, "rows", "1");
    			attr_dev(textarea1, "placeholder", "Put song ids to learn here");
    			add_location(textarea1, file$1, 176, 4, 5896);
    			add_location(label, file$1, 168, 0, 5538);
    			attr_dev(div0, "id", "youtube-player");
    			set_style(div0, "height", "90vh");
    			set_style(div0, "width", "90%");
    			add_location(div0, file$1, 180, 4, 6046);
    			set_style(div1, "position", "absolute");
    			set_style(div1, "top", "0%");
    			set_style(div1, "left", "40%");
    			set_style(div1, "color", "white");
    			set_style(div1, "background-color", "rgba(0, 0, 0, 0.5)");
    			add_location(div1, file$1, 181, 4, 6116);
    			add_location(br0, file$1, 185, 15, 6436);
    			set_style(div2, "position", "absolute");
    			set_style(div2, "top", "50%");
    			set_style(div2, "left", "20%");
    			set_style(div2, "color", "white");
    			set_style(div2, "background-color", "rgba(0, 0, 0, 0.5)");
    			set_style(div2, "font-size", "100px");
    			add_location(div2, file$1, 184, 4, 6295);
    			set_style(div3, "position", "relative");
    			add_location(div3, file$1, 179, 0, 6007);
    			set_style(input2, "width", "30px");
    			attr_dev(input2, "type", "number");
    			add_location(input2, file$1, 190, 0, 6487);
    			add_location(button0, file$1, 191, 0, 6553);
    			add_location(button1, file$1, 192, 0, 6632);
    			add_location(button2, file$1, 194, 0, 6764);
    			attr_dev(button3, "class", button3_class_value = "" + (null_to_empty(/*previousButtonClass*/ ctx[10]) + " svelte-1g3vo12"));
    			button3.disabled = button3_disabled_value = /*currentuserIndex*/ ctx[0] <= 0;
    			add_location(button3, file$1, 195, 0, 6824);
    			attr_dev(button4, "class", button4_class_value = "" + (null_to_empty(/*nextButtonClass*/ ctx[11]) + " svelte-1g3vo12"));
    			button4.disabled = button4_disabled_value = /*currentuserIndex*/ ctx[0] >= /*userTimestamps*/ ctx[1].length - 1;
    			add_location(button4, file$1, 196, 0, 6964);
    			add_location(br1, file$1, 197, 62, 7178);
    		},
    		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, label, anchor);
    			append_dev(label, t2);
    			append_dev(label, input0);
    			set_input_value(input0, /*currentvideoId*/ ctx[9]);
    			append_dev(label, t3);
    			append_dev(label, input1);
    			input1.checked = /*isUpdating*/ ctx[6];
    			append_dev(label, t4);
    			append_dev(label, textarea0);
    			append_dev(label, t5);
    			append_dev(label, textarea1);
    			insert_dev(target, t6, anchor);
    			insert_dev(target, div3, anchor);
    			append_dev(div3, div0);
    			append_dev(div3, t7);
    			append_dev(div3, div1);
    			append_dev(div1, t8);
    			append_dev(div1, t9);
    			append_dev(div1, t10);
    			append_dev(div3, t11);
    			append_dev(div3, div2);
    			append_dev(div2, t12);
    			append_dev(div2, t13);
    			append_dev(div2, br0);
    			append_dev(div2, t14);
    			append_dev(div2, t15);
    			insert_dev(target, t16, anchor);
    			insert_dev(target, input2, anchor);
    			set_input_value(input2, /*interval*/ ctx[2]);
    			insert_dev(target, t17, anchor);
    			insert_dev(target, button0, anchor);
    			insert_dev(target, t19, anchor);
    			insert_dev(target, button1, anchor);
    			insert_dev(target, t21, anchor);
    			insert_dev(target, t22, anchor);
    			insert_dev(target, t23, anchor);
    			insert_dev(target, t24, anchor);
    			insert_dev(target, t25, anchor);
    			insert_dev(target, button2, anchor);
    			insert_dev(target, t27, anchor);
    			insert_dev(target, button3, anchor);
    			append_dev(button3, t28);
    			insert_dev(target, t29, anchor);
    			insert_dev(target, button4, anchor);
    			append_dev(button4, t30);
    			insert_dev(target, t31, anchor);
    			insert_dev(target, t32, anchor);
    			insert_dev(target, t33, anchor);
    			insert_dev(target, t34, anchor);
    			insert_dev(target, t35, anchor);
    			insert_dev(target, br1, anchor);
    			insert_dev(target, t36, anchor);

    			if (!mounted) {
    				dispose = [
    					listen_dev(input0, "input", /*input0_input_handler*/ ctx[18]),
    					listen_dev(input1, "change", /*input1_change_handler*/ ctx[19]),
    					listen_dev(input1, "click", /*toggleUpdate*/ ctx[12], false, false, false, false),
    					listen_dev(input2, "input", /*input2_input_handler*/ ctx[20]),
    					listen_dev(button0, "click", /*goToPreviousAutoTimestamp*/ ctx[14], false, false, false, false),
    					listen_dev(button1, "click", /*goToNextAutoTimestamp*/ ctx[13], false, false, false, false),
    					listen_dev(button2, "click", /*addUserTimestamp*/ ctx[15], false, false, false, false),
    					listen_dev(button3, "click", /*goToPreviousUserTimestamp*/ ctx[17], false, false, false, false),
    					listen_dev(button4, "click", /*goToNextUserTimestamp*/ ctx[16], false, false, false, false)
    				];

    				mounted = true;
    			}
    		},
    		p: function update(ctx, dirty) {
    			if (dirty[0] & /*currentvideoId*/ 512 && input0.value !== /*currentvideoId*/ ctx[9]) {
    				set_input_value(input0, /*currentvideoId*/ ctx[9]);
    			}

    			if (dirty[0] & /*isUpdating*/ 64) {
    				input1.checked = /*isUpdating*/ ctx[6];
    			}

    			if (dirty[0] & /*currentTime*/ 8 && t9_value !== (t9_value = /*currentTime*/ ctx[3].toFixed(2) + "")) set_data_dev(t9, t9_value);
    			if (dirty[0] & /*line*/ 32) set_data_dev(t12, /*line*/ ctx[5]);
    			if (dirty[0] & /*currentWord*/ 16) set_data_dev(t15, /*currentWord*/ ctx[4]);

    			if (dirty[0] & /*interval*/ 4 && to_number(input2.value) !== /*interval*/ ctx[2]) {
    				set_input_value(input2, /*interval*/ ctx[2]);
    			}

    			if (dirty[0] & /*currentIndex*/ 128) set_data_dev(t22, /*currentIndex*/ ctx[7]);
    			if (dirty[0] & /*timestamps*/ 256 && t24_value !== (t24_value = /*timestamps*/ ctx[8].length + "")) set_data_dev(t24, t24_value);

    			if (dirty[0] & /*previousButtonClass*/ 1024 && button3_class_value !== (button3_class_value = "" + (null_to_empty(/*previousButtonClass*/ ctx[10]) + " svelte-1g3vo12"))) {
    				attr_dev(button3, "class", button3_class_value);
    			}

    			if (dirty[0] & /*currentuserIndex*/ 1 && button3_disabled_value !== (button3_disabled_value = /*currentuserIndex*/ ctx[0] <= 0)) {
    				prop_dev(button3, "disabled", button3_disabled_value);
    			}

    			if (dirty[0] & /*nextButtonClass*/ 2048 && button4_class_value !== (button4_class_value = "" + (null_to_empty(/*nextButtonClass*/ ctx[11]) + " svelte-1g3vo12"))) {
    				attr_dev(button4, "class", button4_class_value);
    			}

    			if (dirty[0] & /*currentuserIndex, userTimestamps*/ 3 && button4_disabled_value !== (button4_disabled_value = /*currentuserIndex*/ ctx[0] >= /*userTimestamps*/ ctx[1].length - 1)) {
    				prop_dev(button4, "disabled", button4_disabled_value);
    			}

    			if (dirty[0] & /*currentuserIndex*/ 1) set_data_dev(t32, /*currentuserIndex*/ ctx[0]);
    			if (dirty[0] & /*userTimestamps*/ 2 && t34_value !== (t34_value = /*userTimestamps*/ ctx[1].length + "")) set_data_dev(t34, t34_value);
    		},
    		i: noop,
    		o: noop,
    		d: function destroy(detaching) {
    			if (detaching) detach_dev(h1);
    			if (detaching) detach_dev(t1);
    			if (detaching) detach_dev(label);
    			if (detaching) detach_dev(t6);
    			if (detaching) detach_dev(div3);
    			if (detaching) detach_dev(t16);
    			if (detaching) detach_dev(input2);
    			if (detaching) detach_dev(t17);
    			if (detaching) detach_dev(button0);
    			if (detaching) detach_dev(t19);
    			if (detaching) detach_dev(button1);
    			if (detaching) detach_dev(t21);
    			if (detaching) detach_dev(t22);
    			if (detaching) detach_dev(t23);
    			if (detaching) detach_dev(t24);
    			if (detaching) detach_dev(t25);
    			if (detaching) detach_dev(button2);
    			if (detaching) detach_dev(t27);
    			if (detaching) detach_dev(button3);
    			if (detaching) detach_dev(t29);
    			if (detaching) detach_dev(button4);
    			if (detaching) detach_dev(t31);
    			if (detaching) detach_dev(t32);
    			if (detaching) detach_dev(t33);
    			if (detaching) detach_dev(t34);
    			if (detaching) detach_dev(t35);
    			if (detaching) detach_dev(br1);
    			if (detaching) detach_dev(t36);
    			mounted = false;
    			run_all(dispose);
    		}
    	};

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

    	return block;
    }

    function getRandomWord(line) {
    	let words = line.split(" ");
    	return words[Math.floor(Math.random() * words.length)];
    }

    function instance$1($$self, $$props, $$invalidate) {
    	let nextButtonClass;
    	let previousButtonClass;
    	let { $$slots: slots = {}, $$scope } = $$props;
    	validate_slots('YoutubeIframeAPICustomInterface', slots, []);
    	let player;
    	let interval = 10; // Define your interval
    	let currentTime = 0;
    	let timeUpdateInterval;

    	// Assuming 'transcript' contains your video transcript
    	let transcript = `Line 1 of the transcript.
    Line 2 of the transcript.
    Line 3 food
    Line 4 foodest
    Line 5 foods
    Line 6 fooder
    Line 7 foodz
    Line 8 fooding
    ...`; // Replace with your actual transcript

    	let lines = transcript.split("\n");
    	let currentWord = "";
    	let line = "";
    	let isUpdating = false;
    	let updateInterval;
    	let currentIndex = 0; // Assuming this is initialized appropriately
    	let currentuserIndex = 0; // Assuming this is initialized appropriately
    	let timestamps = []; // Array of timestamps
    	let userTimestamps = []; // Array of user timestamps
    	let currentvideoId = 'qEpmiA3XkX8';

    	// Function to initialize the YouTube player
    	function initYouTubePlayer() {
    		player = new YT.Player('youtube-player',
    		{
    				height: '360',
    				width: '640',
    				videoId: currentvideoId, //'YOUR_VIDEO_ID',
    				events: {
    					'onReady': onPlayerReady,
    					'onStateChange': onPlayerStateChange
    				}
    			});
    	}

    	onMount(() => {
    		// Load the YouTube IFrame Player API
    		const tag = document.createElement('script');

    		tag.src = "https://www.youtube.com/iframe_api";
    		const firstScriptTag = document.getElementsByTagName('script')[0];
    		firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

    		// Set up the API ready callback
    		window.onYouTubeIframeAPIReady = initYouTubePlayer;

    		// Update the current time every second
    		timeUpdateInterval = setInterval(updateCurrentTime, 1000);
    	});

    	// Event handler for when the player is ready
    	function onPlayerReady(event) {
    		const duration = player.getDuration();

    		//console.log("Video Duration: ", duration);
    		const generatedTimestamps = [];

    		for (let i = interval; i < duration; i += interval) {
    			generatedTimestamps.push(i);
    		}

    		$$invalidate(8, timestamps = generatedTimestamps);
    	} // Do something with the timestamps
    	//console.log("Generated Timestamps: ", generatedTimestamps);

    	function onPlayerStateChange(event) {
    		if (event.data === YT.PlayerState.PLAYING || event.data === YT.PlayerState.PAUSED) {
    			updateCurrentIndex();
    		}
    	}

    	function updateCurrentIndex() {
    		const currentTime = player.getCurrentTime();

    		// Find the closest timestamp
    		let closest = timestamps.reduce((prev, curr) => Math.abs(curr - currentTime) < Math.abs(prev - currentTime)
    		? curr
    		: prev);

    		$$invalidate(7, currentIndex = timestamps.indexOf(closest));
    	}

    	function updateCurrentTime() {
    		if (player && player.getCurrentTime) {
    			$$invalidate(3, currentTime = player.getCurrentTime());
    		}
    	}

    	onDestroy(() => {
    		clearInterval(timeUpdateInterval);
    	});

    	function updateWord() {
    		if (isUpdating) {
    			$$invalidate(5, line = lines[Math.floor(Math.random() * lines.length)]);
    			$$invalidate(4, currentWord = getRandomWord(line));
    		}
    	}

    	function toggleUpdate() {
    		$$invalidate(6, isUpdating = !isUpdating);

    		if (isUpdating) {
    			updateWord(); // Immediately update once
    			updateInterval = setInterval(updateWord, 3000); // Update every 3 seconds
    		} else {
    			clearInterval(updateInterval);
    			$$invalidate(5, line = '');
    			$$invalidate(4, currentWord = '');
    		}
    	}

    	function goToNextAutoTimestamp() {
    		if (currentIndex < timestamps.length - 1) {
    			$$invalidate(7, currentIndex += 1);
    			player.seekTo(timestamps[currentIndex], true);
    		}
    	}

    	function goToPreviousAutoTimestamp() {
    		if (currentIndex > 0) {
    			$$invalidate(7, currentIndex -= 1);
    			player.seekTo(timestamps[currentIndex], true);
    		}
    	}

    	function addUserTimestamp() {
    		const currentTime = Math.floor(player.getCurrentTime());
    		$$invalidate(1, userTimestamps = [...userTimestamps, currentTime].sort((a, b) => a - b));
    	}

    	function goToNextUserTimestamp() {
    		if (currentuserIndex < userTimestamps.length - 1) {
    			$$invalidate(0, currentuserIndex += 1);
    			player.seekTo(userTimestamps[currentuserIndex], true);
    		} else {
    			// Handle the end of the list here
    			console.log("Reached the end of user timestamps.");
    		} // You can also disable the "next" button or loop to the start if needed.
    	}

    	function goToPreviousUserTimestamp() {
    		if (currentuserIndex > 0) {
    			$$invalidate(0, currentuserIndex -= 1);
    			player.seekTo(userTimestamps[currentuserIndex], true);
    		} else {
    			// Handle the beginning of the list here
    			console.log("Reached the start of user timestamps.");
    		} // You can also disable the "previous" button or loop to the end if needed.
    	}

    	const writable_props = [];

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

    	function input0_input_handler() {
    		currentvideoId = this.value;
    		$$invalidate(9, currentvideoId);
    	}

    	function input1_change_handler() {
    		isUpdating = this.checked;
    		$$invalidate(6, isUpdating);
    	}

    	function input2_input_handler() {
    		interval = to_number(this.value);
    		$$invalidate(2, interval);
    	}

    	$$self.$capture_state = () => ({
    		onMount,
    		onDestroy,
    		player,
    		interval,
    		currentTime,
    		timeUpdateInterval,
    		transcript,
    		lines,
    		currentWord,
    		line,
    		isUpdating,
    		updateInterval,
    		currentIndex,
    		currentuserIndex,
    		timestamps,
    		userTimestamps,
    		currentvideoId,
    		initYouTubePlayer,
    		onPlayerReady,
    		onPlayerStateChange,
    		updateCurrentIndex,
    		updateCurrentTime,
    		getRandomWord,
    		updateWord,
    		toggleUpdate,
    		goToNextAutoTimestamp,
    		goToPreviousAutoTimestamp,
    		addUserTimestamp,
    		goToNextUserTimestamp,
    		goToPreviousUserTimestamp,
    		previousButtonClass,
    		nextButtonClass
    	});

    	$$self.$inject_state = $$props => {
    		if ('player' in $$props) player = $$props.player;
    		if ('interval' in $$props) $$invalidate(2, interval = $$props.interval);
    		if ('currentTime' in $$props) $$invalidate(3, currentTime = $$props.currentTime);
    		if ('timeUpdateInterval' in $$props) timeUpdateInterval = $$props.timeUpdateInterval;
    		if ('transcript' in $$props) transcript = $$props.transcript;
    		if ('lines' in $$props) lines = $$props.lines;
    		if ('currentWord' in $$props) $$invalidate(4, currentWord = $$props.currentWord);
    		if ('line' in $$props) $$invalidate(5, line = $$props.line);
    		if ('isUpdating' in $$props) $$invalidate(6, isUpdating = $$props.isUpdating);
    		if ('updateInterval' in $$props) updateInterval = $$props.updateInterval;
    		if ('currentIndex' in $$props) $$invalidate(7, currentIndex = $$props.currentIndex);
    		if ('currentuserIndex' in $$props) $$invalidate(0, currentuserIndex = $$props.currentuserIndex);
    		if ('timestamps' in $$props) $$invalidate(8, timestamps = $$props.timestamps);
    		if ('userTimestamps' in $$props) $$invalidate(1, userTimestamps = $$props.userTimestamps);
    		if ('currentvideoId' in $$props) $$invalidate(9, currentvideoId = $$props.currentvideoId);
    		if ('previousButtonClass' in $$props) $$invalidate(10, previousButtonClass = $$props.previousButtonClass);
    		if ('nextButtonClass' in $$props) $$invalidate(11, nextButtonClass = $$props.nextButtonClass);
    	};

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

    	$$self.$$.update = () => {
    		if ($$self.$$.dirty[0] & /*currentuserIndex, userTimestamps*/ 3) {
    			$$invalidate(11, nextButtonClass = currentuserIndex >= userTimestamps.length - 1
    			? 'button-at-end'
    			: 'button');
    		}

    		if ($$self.$$.dirty[0] & /*currentuserIndex*/ 1) {
    			$$invalidate(10, previousButtonClass = currentuserIndex <= 0 ? 'button-at-end' : 'button');
    		}
    	};

    	return [
    		currentuserIndex,
    		userTimestamps,
    		interval,
    		currentTime,
    		currentWord,
    		line,
    		isUpdating,
    		currentIndex,
    		timestamps,
    		currentvideoId,
    		previousButtonClass,
    		nextButtonClass,
    		toggleUpdate,
    		goToNextAutoTimestamp,
    		goToPreviousAutoTimestamp,
    		addUserTimestamp,
    		goToNextUserTimestamp,
    		goToPreviousUserTimestamp,
    		input0_input_handler,
    		input1_change_handler,
    		input2_input_handler
    	];
    }

    class YoutubeIframeAPICustomInterface extends SvelteComponentDev {
    	constructor(options) {
    		super(options);
    		init(this, options, instance$1, create_fragment$1, safe_not_equal, {}, null, [-1, -1]);

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

    /* src\App.svelte generated by Svelte v3.59.2 */
    const file = "src\\App.svelte";

    // (38:1) {#if showModal}
    function create_if_block(ctx) {
    	let modal;
    	let current;

    	modal = new SimpleModal({
    			props: {
    				isOpen: /*showModal*/ ctx[1],
    				title: "My Modal",
    				content: "This is the modal content."
    			},
    			$$inline: true
    		});

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

    	dispatch_dev("SvelteRegisterBlock", {
    		block,
    		id: create_if_block.name,
    		type: "if",
    		source: "(38:1) {#if showModal}",
    		ctx
    	});

    	return block;
    }

    function create_fragment(ctx) {
    	let main;
    	let myyoutube;
    	let t0;
    	let h10;
    	let t1;
    	let t2;
    	let t3;
    	let t4;
    	let p;
    	let t5;
    	let a;
    	let t7;
    	let t8;
    	let h11;
    	let t10;
    	let nestedcommentstestfromreact;
    	let t11;
    	let h12;
    	let t13;
    	let button;
    	let t15;
    	let t16;
    	let h13;
    	let t18;
    	let dotgame;
    	let current;
    	let mounted;
    	let dispose;
    	myyoutube = new YoutubeIframeAPICustomInterface({ $$inline: true });
    	nestedcommentstestfromreact = new NestedCommentsTestfromReact({ $$inline: true });
    	let if_block = /*showModal*/ ctx[1] && create_if_block(ctx);
    	dotgame = new MovingDotSpacePortfromReact({ $$inline: true });

    	const block = {
    		c: function create() {
    			main = element("main");
    			create_component(myyoutube.$$.fragment);
    			t0 = space();
    			h10 = element("h1");
    			t1 = text("Hello ");
    			t2 = text(/*name*/ ctx[0]);
    			t3 = text("!");
    			t4 = space();
    			p = element("p");
    			t5 = text("Visit the ");
    			a = element("a");
    			a.textContent = "Svelte tutorial";
    			t7 = text(" to learn how to build Svelte apps.");
    			t8 = space();
    			h11 = element("h1");
    			h11.textContent = "My new component test";
    			t10 = space();
    			create_component(nestedcommentstestfromreact.$$.fragment);
    			t11 = space();
    			h12 = element("h1");
    			h12.textContent = "Modal for events in game and maybe inventory";
    			t13 = space();
    			button = element("button");
    			button.textContent = "Open Modal - Fix break first modal close";
    			t15 = space();
    			if (if_block) if_block.c();
    			t16 = space();
    			h13 = element("h1");
    			h13.textContent = "The End Goal is A themeable game using just one LLM prompt";
    			t18 = space();
    			create_component(dotgame.$$.fragment);
    			attr_dev(h10, "class", "svelte-1tky8bj");
    			add_location(h10, file, 25, 1, 599);
    			attr_dev(a, "href", "https://svelte.dev/tutorial");
    			add_location(a, file, 26, 14, 636);
    			add_location(p, file, 26, 1, 623);
    			attr_dev(h11, "class", "svelte-1tky8bj");
    			add_location(h11, file, 28, 1, 735);
    			attr_dev(h12, "class", "svelte-1tky8bj");
    			add_location(h12, file, 35, 1, 916);
    			add_location(button, file, 36, 1, 971);
    			attr_dev(h13, "class", "svelte-1tky8bj");
    			add_location(h13, file, 40, 1, 1159);
    			attr_dev(main, "class", "svelte-1tky8bj");
    			add_location(main, file, 21, 0, 574);
    		},
    		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);
    			mount_component(myyoutube, main, null);
    			append_dev(main, t0);
    			append_dev(main, h10);
    			append_dev(h10, t1);
    			append_dev(h10, t2);
    			append_dev(h10, t3);
    			append_dev(main, t4);
    			append_dev(main, p);
    			append_dev(p, t5);
    			append_dev(p, a);
    			append_dev(p, t7);
    			append_dev(main, t8);
    			append_dev(main, h11);
    			append_dev(main, t10);
    			mount_component(nestedcommentstestfromreact, main, null);
    			append_dev(main, t11);
    			append_dev(main, h12);
    			append_dev(main, t13);
    			append_dev(main, button);
    			append_dev(main, t15);
    			if (if_block) if_block.m(main, null);
    			append_dev(main, t16);
    			append_dev(main, h13);
    			append_dev(main, t18);
    			mount_component(dotgame, main, null);
    			current = true;

    			if (!mounted) {
    				dispose = listen_dev(button, "click", /*openModal*/ ctx[2], false, false, false, false);
    				mounted = true;
    			}
    		},
    		p: function update(ctx, [dirty]) {
    			if (!current || dirty & /*name*/ 1) set_data_dev(t2, /*name*/ ctx[0]);

    			if (/*showModal*/ ctx[1]) {
    				if (if_block) {
    					if_block.p(ctx, dirty);

    					if (dirty & /*showModal*/ 2) {
    						transition_in(if_block, 1);
    					}
    				} else {
    					if_block = create_if_block(ctx);
    					if_block.c();
    					transition_in(if_block, 1);
    					if_block.m(main, t16);
    				}
    			} 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(myyoutube.$$.fragment, local);
    			transition_in(nestedcommentstestfromreact.$$.fragment, local);
    			transition_in(if_block);
    			transition_in(dotgame.$$.fragment, local);
    			current = true;
    		},
    		o: function outro(local) {
    			transition_out(myyoutube.$$.fragment, local);
    			transition_out(nestedcommentstestfromreact.$$.fragment, local);
    			transition_out(if_block);
    			transition_out(dotgame.$$.fragment, local);
    			current = false;
    		},
    		d: function destroy(detaching) {
    			if (detaching) detach_dev(main);
    			destroy_component(myyoutube);
    			destroy_component(nestedcommentstestfromreact);
    			if (if_block) if_block.d();
    			destroy_component(dotgame);
    			mounted = false;
    			dispose();
    		}
    	};

    	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, []);
    	let { name } = $$props;
    	let showModal = false;

    	function openModal() {
    		$$invalidate(1, showModal = true);
    	}

    	function closeModal() {
    		$$invalidate(1, showModal = false);
    	}

    	$$self.$$.on_mount.push(function () {
    		if (name === undefined && !('name' in $$props || $$self.$$.bound[$$self.$$.props['name']])) {
    			console.warn("<App> 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(`<App> was created with unknown prop '${key}'`);
    	});

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

    	$$self.$capture_state = () => ({
    		name,
    		VideoGradioComponentBrainstorming,
    		NestedCommentsTestfromReact,
    		DotGame: MovingDotSpacePortfromReact,
    		YoutubeBookmarker: YoutubeBookmarksfromReact,
    		Modal: SimpleModal,
    		MyYoutube: YoutubeIframeAPICustomInterface,
    		showModal,
    		openModal,
    		closeModal
    	});

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

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

    	return [name, showModal, openModal];
    }

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

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

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

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

    const app = new App({
    	target: document.body,
    	props: {
    		name: 'world'
    	}
    });

    return app;

})();
//# sourceMappingURL=bundle.js.map