diff --git "a/bundle.js" "b/bundle.js" --- "a/bundle.js" +++ "b/bundle.js" @@ -4,13 +4,6 @@ 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 } @@ -57,98 +50,10 @@ var app = (function () { 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' @@ -157,24 +62,6 @@ var app = (function () { 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); } @@ -192,9 +79,6 @@ var app = (function () { 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); } @@ -204,9 +88,6 @@ var app = (function () { 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); @@ -253,71 +134,6 @@ var app = (function () { 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; @@ -378,16 +194,6 @@ var app = (function () { 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 = []; @@ -494,20 +300,6 @@ var app = (function () { 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() { @@ -548,76 +340,6 @@ var app = (function () { 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); @@ -933,17 +655,17 @@ var app = (function () { /* src\VideoGradioComponentBrainstorming.svelte generated by Svelte v3.59.2 */ - const { console: console_1$6 } = globals; - const file$d = "src\\VideoGradioComponentBrainstorming.svelte"; + const { console: console_1$4 } = globals; + const file$7 = "src\\VideoGradioComponentBrainstorming.svelte"; - function get_each_context$5(ctx, list, i) { + 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$5(ctx) { + function create_each_block$3(ctx) { let option; let t_value = /*option*/ ctx[15] + ""; let t; @@ -954,7 +676,7 @@ var app = (function () { t = text(t_value); option.__value = /*option*/ ctx[15]; option.value = option.__value; - add_location(option, file$d, 85, 6, 2561); + add_location(option, file$7, 85, 6, 2561); }, m: function mount(target, anchor) { insert_dev(target, option, anchor); @@ -968,7 +690,7 @@ var app = (function () { dispatch_dev("SvelteRegisterBlock", { block, - id: create_each_block$5.name, + id: create_each_block$3.name, type: "each", source: "(85:4) {#each kitchenOptions as option}", ctx @@ -977,7 +699,7 @@ var app = (function () { return block; } - function create_fragment$d(ctx) { + function create_fragment$7(ctx) { let h1; let t1; let div1; @@ -1004,7 +726,7 @@ var app = (function () { let each_blocks = []; for (let i = 0; i < each_value.length; i += 1) { - each_blocks[i] = create_each_block$5(get_each_context$5(ctx, each_value, i)); + each_blocks[i] = create_each_block$3(get_each_context$3(ctx, each_value, i)); } const block = { @@ -1034,34 +756,34 @@ var app = (function () { each_blocks[i].c(); } - add_location(h1, file$d, 66, 0, 1800); + add_location(h1, file$7, 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$d, 72, 4, 2006); + add_location(track, file$7, 72, 4, 2006); attr_dev(video, "id", "videoCanvas"); video.autoplay = true; attr_dev(video, "class", "svelte-ufd3fo"); - add_location(video, file$d, 70, 2, 1965); + add_location(video, file$7, 70, 2, 1965); attr_dev(div0, "id", "overlayText"); attr_dev(div0, "class", "svelte-ufd3fo"); - add_location(div0, file$d, 74, 2, 2111); + add_location(div0, file$7, 74, 2, 2111); attr_dev(div1, "id", "videoContainer"); attr_dev(div1, "class", "svelte-ufd3fo"); - add_location(div1, file$d, 68, 0, 1911); + add_location(div1, file$7, 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$d, 77, 0, 2186); + add_location(canvas_1, file$7, 77, 0, 2186); attr_dev(input, "type", "text"); - add_location(input, file$d, 78, 0, 2294); - add_location(button, file$d, 82, 2, 2429); + add_location(input, file$7, 78, 0, 2294); + add_location(button, file$7, 82, 2, 2429); if (/*selectedOption*/ ctx[0] === void 0) add_render_callback(() => /*select_change_handler*/ ctx[9].call(select)); - add_location(select, file$d, 83, 2, 2479); + add_location(select, file$7, 83, 2, 2479); attr_dev(div2, "id", "frameForButtons"); - add_location(div2, file$d, 81, 0, 2399); + add_location(div2, file$7, 81, 0, 2399); }, l: function claim(nodes) { throw new Error("options.hydrate only works if the component was compiled with the `hydratable: true` option"); @@ -1120,12 +842,12 @@ var app = (function () { let i; for (i = 0; i < each_value.length; i += 1) { - const child_ctx = get_each_context$5(ctx, each_value, i); + 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$5(child_ctx); + each_blocks[i] = create_each_block$3(child_ctx); each_blocks[i].c(); each_blocks[i].m(select, null); } @@ -1163,7 +885,7 @@ var app = (function () { dispatch_dev("SvelteRegisterBlock", { block, - id: create_fragment$d.name, + id: create_fragment$7.name, type: "component", source: "", ctx @@ -1176,7 +898,7 @@ var app = (function () { } // Logic for 'Test OCR' button - function instance$d($$self, $$props, $$invalidate) { + function instance$7($$self, $$props, $$invalidate) { let { $$slots: slots = {}, $$scope } = $$props; validate_slots('VideoGradioComponentBrainstorming', slots, []); let selectedOption = 'Stove - lu'; // default value @@ -1238,7 +960,7 @@ var app = (function () { const writable_props = []; Object.keys($$props).forEach(key => { - if (!~writable_props.indexOf(key) && key.slice(0, 2) !== '$$' && key !== 'slot') console_1$6.warn(` was created with unknown prop '${key}'`); + if (!~writable_props.indexOf(key) && key.slice(0, 2) !== '$$' && key !== 'slot') console_1$4.warn(` was created with unknown prop '${key}'`); }); function canvas_1_binding($$value) { @@ -1309,2397 +1031,291 @@ var app = (function () { class VideoGradioComponentBrainstorming extends SvelteComponentDev { constructor(options) { super(options); - init(this, options, instance$d, create_fragment$d, safe_not_equal, {}); + init(this, options, instance$7, create_fragment$7, safe_not_equal, {}); dispatch_dev("SvelteRegisterComponent", { component: this, tagName: "VideoGradioComponentBrainstorming", options, - id: create_fragment$d.name + id: create_fragment$7.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); - } - + const subscriber_queue = []; /** - * Convert array of 16 byte values to UUID string format of the form: - * XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX + * Create a `Writable` store that allows both updating and reading by subscription. + * @param {*=}value initial value + * @param {StartStopNotifier=} start */ - - 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]; + 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; + } + } + } } - - return buf; - } - - return unsafeStringify(rnds); - } - - /* src\NestedCommentsTestfromReact.svelte generated by Svelte v3.59.2 */ - - const { console: console_1$5 } = globals; - const file$c = "src\\NestedCommentsTestfromReact.svelte"; - - function get_each_context$4(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; + 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 }; } - // (31:12) {#if comment.items} - function create_if_block$7(ctx) { - let each_1_anchor; - let each_value_1 = /*comment*/ ctx[6].items; - validate_each_argument(each_value_1); - let each_blocks = []; + /* src\MovingDotPortfromReact.svelte generated by Svelte v3.59.2 */ + const file$6 = "src\\MovingDotPortfromReact.svelte"; - 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)); - } + function create_fragment$6(ctx) { + let button; const block = { c: function create() { - for (let i = 0; i < each_blocks.length; i += 1) { - each_blocks[i].c(); - } - - each_1_anchor = empty(); + button = element("button"); + attr_dev(button, "class", "MovingDot svelte-1mg0qyd"); + set_style(button, "left", /*position*/ ctx[0].x + "px"); + set_style(button, "top", /*position*/ ctx[0].y + "px"); + attr_dev(button, "tabindex", "0"); + add_location(button, file$6, 48, 0, 1573); + }, + 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) { - 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); + insert_dev(target, button, anchor); + /*button_binding*/ ctx[4](button); }, - 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); - } + p: function update(ctx, [dirty]) { + if (dirty & /*position*/ 1) { + set_style(button, "left", /*position*/ ctx[0].x + "px"); + } - each_blocks.length = each_value_1.length; + if (dirty & /*position*/ 1) { + set_style(button, "top", /*position*/ ctx[0].y + "px"); } }, + i: noop, + o: noop, d: function destroy(detaching) { - destroy_each(each_blocks, detaching); - if (detaching) detach_dev(each_1_anchor); + if (detaching) detach_dev(button); + /*button_binding*/ ctx[4](null); } }; dispatch_dev("SvelteRegisterBlock", { block, - id: create_if_block$7.name, - type: "if", - source: "(31:12) {#if comment.items}", + id: create_fragment$6.name, + type: "component", + source: "", ctx }); return block; } - // (32: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 step = 10; - 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: "(32:16) {#each comment.items as item}", - ctx - }); - - return block; - } - - // (25:4) {#each comments as comment} - function create_each_block$4(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$7(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$c, 27, 16, 925); - add_location(button, file$c, 28, 16, 984); - attr_dev(div0, "class", "card"); - add_location(div0, file$c, 26, 12, 889); - attr_dev(div1, "key", div1_key_value = /*comment*/ ctx[6].id); - set_style(div1, "margin-left", "20px"); - add_location(div1, file$c, 25, 8, 826); - }, - 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$7(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$4.name, - type: "each", - source: "(25:4) {#each comments as comment}", - ctx - }); - - return block; - } - - function create_fragment$c(ctx) { - let div1; - let h1; - let t1; - let div0; - let input; - let t2; - let button; - let t4; - 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$4(get_each_context$4(ctx, each_value, i)); - } - - const block = { - c: function create() { - div1 = element("div"); - h1 = element("h1"); - h1.textContent = "Nested Comments Idea for LLM Branching ideas/discussions/etc."; - t1 = space(); - div0 = element("div"); - input = element("input"); - t2 = space(); - button = element("button"); - button.textContent = "Post Comment"; - t4 = space(); - - for (let i = 0; i < each_blocks.length; i += 1) { - each_blocks[i].c(); - } - - add_location(h1, file$c, 19, 4, 546); - attr_dev(input, "type", "text"); - attr_dev(input, "placeholder", "Add a comment"); - add_location(input, file$c, 21, 8, 637); - add_location(button, file$c, 22, 8, 720); - add_location(div0, file$c, 20, 4, 622); - attr_dev(div1, "id", "comment-container"); - add_location(div1, file$c, 18, 0, 512); - }, - l: function claim(nodes) { - throw new Error("options.hydrate only works if the component was compiled with the `hydratable: true` option"); - }, - m: function mount(target, anchor) { - insert_dev(target, div1, anchor); - append_dev(div1, h1); - append_dev(div1, t1); - append_dev(div1, div0); - append_dev(div0, input); - set_input_value(input, /*newComment*/ ctx[1]); - append_dev(div0, t2); - append_dev(div0, button); - append_dev(div1, t4); - - 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$4(ctx, each_value, i); - - if (each_blocks[i]) { - each_blocks[i].p(child_ctx, dirty); - } else { - each_blocks[i] = create_each_block$4(child_ctx); - each_blocks[i].c(); - each_blocks[i].m(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$c.name, - type: "component", - source: "", - ctx - }); - - return block; - } - - function instance$c($$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 = ''); - console.log(comments); - }; - - 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_1$5.warn(` 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$c, create_fragment$c, safe_not_equal, {}); - - dispatch_dev("SvelteRegisterComponent", { - component: this, - tagName: "NestedCommentsTestfromReact", - options, - id: create_fragment$c.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$b = "src\\MovingDotPortfromReact.svelte"; - - function create_fragment$b(ctx) { - let button; - - const block = { - c: function create() { - button = element("button"); - attr_dev(button, "class", "MovingDot svelte-1mg0qyd"); - set_style(button, "left", /*position*/ ctx[0].x + "px"); - set_style(button, "top", /*position*/ ctx[0].y + "px"); - attr_dev(button, "tabindex", "0"); - add_location(button, file$b, 48, 0, 1573); - }, - l: function claim(nodes) { - throw new Error("options.hydrate only works if the component was compiled with the `hydratable: true` option"); - }, - m: function mount(target, anchor) { - insert_dev(target, button, anchor); - /*button_binding*/ ctx[4](button); - }, - p: function update(ctx, [dirty]) { - if (dirty & /*position*/ 1) { - set_style(button, "left", /*position*/ ctx[0].x + "px"); - } - - if (dirty & /*position*/ 1) { - set_style(button, "top", /*position*/ ctx[0].y + "px"); - } - }, - i: noop, - o: noop, - d: function destroy(detaching) { - if (detaching) detach_dev(button); - /*button_binding*/ ctx[4](null); - } - }; - - dispatch_dev("SvelteRegisterBlock", { - block, - id: create_fragment$b.name, - type: "component", - source: "", - ctx - }); - - return block; - } - - const step = 10; - - function instance$b($$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(); - let dotElement; // Reference to the dot element - - function moveDot(newX, 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', position); - } - - 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); - }; - - function focusDot() { - //On click for the space its imported into - dotElement.focus(); - } - - onMount(() => { - dotElement.addEventListener('keydown', handleKeyPress); - }); - - onDestroy(() => { - dotElement.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(` was created with unknown prop '${key}'`); - }); - - function button_binding($$value) { - binding_callbacks[$$value ? 'unshift' : 'push'](() => { - dotElement = $$value; - $$invalidate(1, dotElement); - }); - } - - $$self.$$set = $$props => { - if ('position' in $$props) $$invalidate(0, position = $$props.position); - if ('boundaries' in $$props) $$invalidate(2, boundaries = $$props.boundaries); - }; - - $$self.$capture_state = () => ({ - onMount, - onDestroy, - createEventDispatcher, - position, - boundaries, - step, - dispatch, - dotElement, - moveDot, - handleKeyPress, - focusDot - }); - - $$self.$inject_state = $$props => { - if ('position' in $$props) $$invalidate(0, position = $$props.position); - if ('boundaries' in $$props) $$invalidate(2, boundaries = $$props.boundaries); - if ('dotElement' in $$props) $$invalidate(1, dotElement = $$props.dotElement); - }; - - if ($$props && "$$inject" in $$props) { - $$self.$inject_state($$props.$$inject); - } - - return [position, dotElement, boundaries, focusDot, button_binding]; - } - - class MovingDotPortfromReact extends SvelteComponentDev { - constructor(options) { - super(options); - init(this, options, instance$b, create_fragment$b, safe_not_equal, { position: 0, boundaries: 2, focusDot: 3 }); - - dispatch_dev("SvelteRegisterComponent", { - component: this, - tagName: "MovingDotPortfromReact", - options, - id: create_fragment$b.name - }); - } - - get position() { - throw new Error(": Props cannot be read directly from the component instance unless compiling with 'accessors: true' or ''"); - } - - set position(value) { - throw new Error(": Props cannot be set directly on the component instance unless compiling with 'accessors: true' or ''"); - } - - get boundaries() { - throw new Error(": Props cannot be read directly from the component instance unless compiling with 'accessors: true' or ''"); - } - - set boundaries(value) { - throw new Error(": Props cannot be set directly on the component instance unless compiling with 'accessors: true' or ''"); - } - - get focusDot() { - return this.$$.ctx[3]; - } - - set focusDot(value) { - throw new Error(": Props cannot be set directly on the component instance unless compiling with 'accessors: true' or ''"); - } - } - - /* src\MovingDotTargetPortfromReact.svelte generated by Svelte v3.59.2 */ - - const file$a = "src\\MovingDotTargetPortfromReact.svelte"; - - function create_fragment$a(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$a, 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$a.name, - type: "component", - source: "", - ctx - }); - - return block; - } - - function instance$a($$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(" 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(` 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$a, create_fragment$a, safe_not_equal, { position: 0 }); - - dispatch_dev("SvelteRegisterComponent", { - component: this, - tagName: "MovingDotTargetPortfromReact", - options, - id: create_fragment$a.name - }); - } - - get position() { - throw new Error(": Props cannot be read directly from the component instance unless compiling with 'accessors: true' or ''"); - } - - set position(value) { - throw new Error(": Props cannot be set directly on the component instance unless compiling with 'accessors: true' or ''"); - } - } - - /* src\SimpleModal.svelte generated by Svelte v3.59.2 */ - - const { console: console_1$4 } = globals; - const file$9 = "src\\SimpleModal.svelte"; - - function get_each_context$3(ctx, list, i) { - const child_ctx = ctx.slice(); - child_ctx[8] = list[i]; - return child_ctx; - } - - // (22:0) {#if isOpen} - function create_if_block$6(ctx) { - let div3; - let div2; - let div0; - let h2; - let t0; - let t1; - let button; - let t3; - let div1; - let t4; - let t5; - let ul; - let mounted; - let dispose; - let each_value = /*items*/ ctx[3]; - validate_each_argument(each_value); - let each_blocks = []; - - for (let i = 0; i < each_value.length; i += 1) { - each_blocks[i] = create_each_block$3(get_each_context$3(ctx, each_value, i)); - } - - 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]); - t5 = space(); - ul = element("ul"); - - for (let i = 0; i < each_blocks.length; i += 1) { - each_blocks[i].c(); - } - - add_location(h2, file$9, 25, 8, 651); - add_location(button, file$9, 26, 8, 677); - attr_dev(div0, "class", "modal-header svelte-m51ous"); - add_location(div0, file$9, 24, 6, 615); - attr_dev(ul, "class", "modal-items"); - add_location(ul, file$9, 30, 8, 801); - attr_dev(div1, "class", "modal-content svelte-m51ous"); - add_location(div1, file$9, 28, 6, 745); - attr_dev(div2, "class", "modal svelte-m51ous"); - add_location(div2, file$9, 23, 4, 588); - attr_dev(div3, "class", "modal-overlay svelte-m51ous"); - add_location(div3, file$9, 22, 2, 555); - }, - 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); - append_dev(div1, t5); - append_dev(div1, ul); - - for (let i = 0; i < each_blocks.length; i += 1) { - if (each_blocks[i]) { - each_blocks[i].m(ul, null); - } - } - - if (!mounted) { - dispose = listen_dev(button, "click", /*closeModal*/ ctx[4], 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]); - - if (dirty & /*handleItemClick, items*/ 40) { - each_value = /*items*/ ctx[3]; - 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(ul, null); - } - } - - for (; i < each_blocks.length; i += 1) { - each_blocks[i].d(1); - } - - each_blocks.length = each_value.length; - } - }, - d: function destroy(detaching) { - if (detaching) detach_dev(div3); - destroy_each(each_blocks, detaching); - mounted = false; - dispose(); - } - }; - - dispatch_dev("SvelteRegisterBlock", { - block, - id: create_if_block$6.name, - type: "if", - source: "(22:0) {#if isOpen}", - ctx - }); - - return block; - } - - // (32:10) {#each items as item} - function create_each_block$3(ctx) { - let button; - let t_value = /*item*/ ctx[8].label + ""; - let t; - let mounted; - let dispose; - - function click_handler() { - return /*click_handler*/ ctx[7](/*item*/ ctx[8]); - } - - const block = { - c: function create() { - button = element("button"); - t = text(t_value); - add_location(button, file$9, 32, 12, 872); - }, - m: function mount(target, anchor) { - insert_dev(target, button, anchor); - append_dev(button, t); - - 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 & /*items*/ 8 && t_value !== (t_value = /*item*/ ctx[8].label + "")) set_data_dev(t, t_value); - }, - d: function destroy(detaching) { - if (detaching) detach_dev(button); - mounted = false; - dispose(); - } - }; - - dispatch_dev("SvelteRegisterBlock", { - block, - id: create_each_block$3.name, - type: "each", - source: "(32:10) {#each items as item}", - ctx - }); - - return block; - } - - function create_fragment$9(ctx) { - let if_block_anchor; - let if_block = /*isOpen*/ ctx[0] && create_if_block$6(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$6(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$9.name, - type: "component", - source: "", - ctx - }); - - return block; - } - - function instance$9($$self, $$props, $$invalidate) { - let { $$slots: slots = {}, $$scope } = $$props; - validate_slots('SimpleModal', slots, []); - let { isOpen = false } = $$props; - let { title = '' } = $$props; - let { content = '' } = $$props; - let { items = [] } = $$props; - let { onClose } = $$props; - - function closeModal() { - if (onClose) { - onClose(); - } - } - - function handleItemClick(item) { - // You can define what happens when an item is clicked, e.g., close modal, trigger an event, etc. - console.log("Item clicked:", item); - - closeModal(); - } - - $$self.$$.on_mount.push(function () { - if (onClose === undefined && !('onClose' in $$props || $$self.$$.bound[$$self.$$.props['onClose']])) { - console_1$4.warn(" was created without expected prop 'onClose'"); - } - }); - - const writable_props = ['isOpen', 'title', 'content', 'items', 'onClose']; - - Object.keys($$props).forEach(key => { - if (!~writable_props.indexOf(key) && key.slice(0, 2) !== '$$' && key !== 'slot') console_1$4.warn(` was created with unknown prop '${key}'`); - }); - - const click_handler = item => handleItemClick(item); - - $$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); - if ('items' in $$props) $$invalidate(3, items = $$props.items); - if ('onClose' in $$props) $$invalidate(6, onClose = $$props.onClose); - }; - - $$self.$capture_state = () => ({ - isOpen, - title, - content, - items, - onClose, - closeModal, - handleItemClick - }); - - $$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 ('items' in $$props) $$invalidate(3, items = $$props.items); - if ('onClose' in $$props) $$invalidate(6, onClose = $$props.onClose); - }; - - if ($$props && "$$inject" in $$props) { - $$self.$inject_state($$props.$$inject); - } - - return [ - isOpen, - title, - content, - items, - closeModal, - handleItemClick, - onClose, - click_handler - ]; - } - - class SimpleModal extends SvelteComponentDev { - constructor(options) { - super(options); - - init(this, options, instance$9, create_fragment$9, safe_not_equal, { - isOpen: 0, - title: 1, - content: 2, - items: 3, - onClose: 6 - }); - - dispatch_dev("SvelteRegisterComponent", { - component: this, - tagName: "SimpleModal", - options, - id: create_fragment$9.name - }); - } - - get isOpen() { - throw new Error(": Props cannot be read directly from the component instance unless compiling with 'accessors: true' or ''"); - } - - set isOpen(value) { - throw new Error(": Props cannot be set directly on the component instance unless compiling with 'accessors: true' or ''"); - } - - get title() { - throw new Error(": Props cannot be read directly from the component instance unless compiling with 'accessors: true' or ''"); - } - - set title(value) { - throw new Error(": Props cannot be set directly on the component instance unless compiling with 'accessors: true' or ''"); - } - - get content() { - throw new Error(": Props cannot be read directly from the component instance unless compiling with 'accessors: true' or ''"); - } - - set content(value) { - throw new Error(": Props cannot be set directly on the component instance unless compiling with 'accessors: true' or ''"); - } - - get items() { - throw new Error(": Props cannot be read directly from the component instance unless compiling with 'accessors: true' or ''"); - } - - set items(value) { - throw new Error(": Props cannot be set directly on the component instance unless compiling with 'accessors: true' or ''"); - } - - get onClose() { - throw new Error(": Props cannot be read directly from the component instance unless compiling with 'accessors: true' or ''"); - } - - set onClose(value) { - throw new Error(": Props cannot be set directly on the component instance unless compiling with 'accessors: true' or ''"); - } - } - - /* src\MovingDotSpacePortfromReact.svelte generated by Svelte v3.59.2 */ - - const { console: console_1$3 } = globals; - const file$8 = "src\\MovingDotSpacePortfromReact.svelte"; - - function get_each_context$2(ctx, list, i) { - const child_ctx = ctx.slice(); - child_ctx[19] = list[i]; - return child_ctx; - } - - // (155:4) {#each $targets as target (target.name)} - function create_each_block$2(key_1, ctx) { - let first; - let target; - let t0; - let span; - let t1_value = /*target*/ ctx[19].name + ""; - let t1; - let current; - - target = new MovingDotTargetPortfromReact({ - props: { position: /*target*/ ctx[19] }, - $$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[19].x + "px"); - set_style(span, "top", /*target*/ ctx[19].y + "px"); - add_location(span, file$8, 156, 8, 7641); - 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*/ 64) target_changes.position = /*target*/ ctx[19]; - target.$set(target_changes); - if ((!current || dirty & /*$targets*/ 64) && t1_value !== (t1_value = /*target*/ ctx[19].name + "")) set_data_dev(t1, t1_value); - - if (!current || dirty & /*$targets*/ 64) { - set_style(span, "left", /*target*/ ctx[19].x + "px"); - } - - if (!current || dirty & /*$targets*/ 64) { - set_style(span, "top", /*target*/ ctx[19].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$2.name, - type: "each", - source: "(155:4) {#each $targets as target (target.name)}", - ctx - }); - - return block; - } - - // (161:4) {#if isModalOpen} - function create_if_block$5(ctx) { - let modal; - let current; - - modal = new SimpleModal({ - props: { - isOpen: /*isModalOpen*/ ctx[2], - onClose: /*handleModalClose*/ ctx[11], - title: "Test Collision", - content: /*currentcollisiontext*/ ctx[3], - items: /*currentcollisionitems*/ ctx[4] - }, - $$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 & /*isModalOpen*/ 4) modal_changes.isOpen = /*isModalOpen*/ ctx[2]; - if (dirty & /*currentcollisiontext*/ 8) modal_changes.content = /*currentcollisiontext*/ ctx[3]; - if (dirty & /*currentcollisionitems*/ 16) modal_changes.items = /*currentcollisionitems*/ ctx[4]; - 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$5.name, - type: "if", - source: "(161:4) {#if isModalOpen}", - ctx - }); - - return block; - } - - function create_fragment$8(ctx) { - let div1; - let canvas_1; - let t0; - let movingdot; - let t1; - let div0; - let t2; - let t3_value = /*$dotPosition*/ ctx[0].x + ""; - let t3; - let t4; - let t5_value = /*$dotPosition*/ ctx[0].y + ""; - let t5; - let t6; - let each_blocks = []; - let each_1_lookup = new Map(); - let t7; - let current; - let mounted; - let dispose; - - let movingdot_props = { - position: /*$dotPosition*/ ctx[0], - boundaries: /*boundaries*/ ctx[9] - }; - - movingdot = new MovingDotPortfromReact({ props: movingdot_props, $$inline: true }); - /*movingdot_binding*/ ctx[15](movingdot); - movingdot.$on("move", /*move_handler*/ ctx[16]); - let each_value = /*$targets*/ ctx[6]; - validate_each_argument(each_value); - const get_key = ctx => /*target*/ ctx[19].name; - validate_each_keys(ctx, each_value, get_each_context$2, get_key); - - for (let i = 0; i < each_value.length; i += 1) { - let child_ctx = get_each_context$2(ctx, each_value, i); - let key = get_key(child_ctx); - each_1_lookup.set(key, each_blocks[i] = create_each_block$2(key, child_ctx)); - } - - let if_block = /*isModalOpen*/ ctx[2] && create_if_block$5(ctx); - - const block = { - c: function create() { - div1 = element("div"); - canvas_1 = element("canvas"); - t0 = space(); - create_component(movingdot.$$.fragment); - t1 = space(); - div0 = element("div"); - t2 = text("Minor Game Events Log for player ||| Position for Developer "); - t3 = text(t3_value); - t4 = space(); - t5 = text(t5_value); - t6 = space(); - - for (let i = 0; i < each_blocks.length; i += 1) { - each_blocks[i].c(); - } - - t7 = space(); - if (if_block) if_block.c(); - set_style(canvas_1, "width", "100%"); - set_style(canvas_1, "height", "100%"); - attr_dev(canvas_1, "tabindex", "0"); - add_location(canvas_1, file$8, 151, 4, 7167); - attr_dev(div0, "id", "overlayText"); - attr_dev(div0, "class", "svelte-c2nwl9"); - add_location(div0, file$8, 153, 4, 7425); - attr_dev(div1, "id", "game-container"); - attr_dev(div1, "style", /*spaceStyle*/ ctx[13]); - add_location(div1, file$8, 150, 0, 7081); - }, - 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, canvas_1); - /*canvas_1_binding*/ ctx[14](canvas_1); - append_dev(div1, t0); - mount_component(movingdot, div1, null); - append_dev(div1, t1); - append_dev(div1, div0); - append_dev(div0, t2); - append_dev(div0, t3); - append_dev(div0, t4); - append_dev(div0, t5); - 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; - - if (!mounted) { - dispose = listen_dev(canvas_1, "click", /*handleSpaceClick*/ ctx[10], false, false, false, false); - mounted = true; - } - }, - p: function update(ctx, [dirty]) { - const movingdot_changes = {}; - if (dirty & /*$dotPosition*/ 1) movingdot_changes.position = /*$dotPosition*/ ctx[0]; - movingdot.$set(movingdot_changes); - if ((!current || dirty & /*$dotPosition*/ 1) && t3_value !== (t3_value = /*$dotPosition*/ ctx[0].x + "")) set_data_dev(t3, t3_value); - if ((!current || dirty & /*$dotPosition*/ 1) && t5_value !== (t5_value = /*$dotPosition*/ ctx[0].y + "")) set_data_dev(t5, t5_value); - - if (dirty & /*$targets*/ 64) { - each_value = /*$targets*/ ctx[6]; - validate_each_argument(each_value); - group_outros(); - validate_each_keys(ctx, each_value, get_each_context$2, 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$2, t7, get_each_context$2); - check_outros(); - } - - if (/*isModalOpen*/ ctx[2]) { - if (if_block) { - if_block.p(ctx, dirty); - - if (dirty & /*isModalOpen*/ 4) { - transition_in(if_block, 1); - } - } else { - if_block = create_if_block$5(ctx); - if_block.c(); - transition_in(if_block, 1); - if_block.m(div1, null); - } - } 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(movingdot.$$.fragment, local); - - for (let i = 0; i < each_value.length; i += 1) { - transition_in(each_blocks[i]); - } - - transition_in(if_block); - 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]); - } - - transition_out(if_block); - current = false; - }, - d: function destroy(detaching) { - if (detaching) detach_dev(div1); - /*canvas_1_binding*/ ctx[14](null); - /*movingdot_binding*/ ctx[15](null); - destroy_component(movingdot); - - for (let i = 0; i < each_blocks.length; i += 1) { - each_blocks[i].d(); - } - - if (if_block) if_block.d(); - mounted = false; - dispose(); - } - }; - - 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: "modal", - collisiontext: "You arrived what now?" - }, - // 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: "" - } - ]); //{ name: "Mysterious Stranger", x: 350, y: 550, collisionType: "alert", collisiontext: "Beware the hidden caves in the north." }, - //{ name: "Hidden Cave", x: 1200, y: 400, collisionType: "changeBackgroundColor", color: "#0B3D91" }, - //{ name: "Ancient Tree", x: 300, y: 700, collisionType: "playSound", soundUrl: "tree_whisper.mp3" }, - //{ name: "Forgotten Monument", x: 700, y: 800, collisionType: "startAnimation", elementId: "monument", animationClass: "glow" }, - - validate_store(targets, 'targets'); - component_subscribe($$self, targets, value => $$invalidate(6, $targets = value)); - - //{ name: "Wizard's Tower", x: 950, y: 150, collisionType: "rotateDot" }, - //{ name: "Lakeside", x: 1400, y: 600, collisionType: "changeDotColor", color: "#00BFFF" }, - //{ name: "Dragon's Lair", x: 1600, y: 200, collisionType: "incrementScore", incrementValue: 50 }, - //{ name: "Abandoned Shipwreck", x: 1300, y: 500, collisionType: "shrinkDot" }, - let boundaries = { maxX: 1835, maxY: 890, minX: 0, minY: 0 }; - - let isModalOpen = false; - let currentcollisiontext; - let currentcollisionitems = []; - let movingDotElement; - - function handleSpaceClick() { - //console.log('Container clicked!', event); - movingDotElement.focusDot(); - } - - function handleModalClose() { - $$invalidate(2, isModalOpen = false); - movingDotElement.focusDot(); - } - - 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); - $$invalidate(3, currentcollisiontext = target.collisiontext); - $$invalidate(4, currentcollisionitems = [ - { - label: "Ask about the hidden cave", - action: "revealCaveLocation" - }, - { - label: "Inquire about the town's history", - action: "giveHistory" - }, - { - label: "Ignore and leave", - action: "closeModal" - } - ]); - break; - } // Handle other permanent UI elements here - }; // ... - //ChatGPT Suggested Options - // Change the background color of the canvas or a specific element. - // case "changeBackgroundColor": - - 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$3.warn(` was created with unknown prop '${key}'`); - }); - - function canvas_1_binding($$value) { - binding_callbacks[$$value ? 'unshift' : 'push'](() => { - canvas = $$value; - $$invalidate(1, canvas); - }); - } - - function movingdot_binding($$value) { - binding_callbacks[$$value ? 'unshift' : 'push'](() => { - movingDotElement = $$value; - $$invalidate(5, movingDotElement); - }); - } - - const move_handler = e => updateDotPosition(e.detail.x, e.detail.y); - - $$self.$capture_state = () => ({ - onMount, - writable, - MovingDot: MovingDotPortfromReact, - Target: MovingDotTargetPortfromReact, - Modal: SimpleModal, - canvas, - dotPosition, - targets, - boundaries, - isModalOpen, - currentcollisiontext, - currentcollisionitems, - movingDotElement, - handleSpaceClick, - handleModalClose, - updateDotPosition, - checkCollision, - handleCollision, - spaceStyle, - $dotPosition, - $targets - }); - - $$self.$inject_state = $$props => { - if ('canvas' in $$props) $$invalidate(1, canvas = $$props.canvas); - if ('dotPosition' in $$props) $$invalidate(7, dotPosition = $$props.dotPosition); - if ('targets' in $$props) $$invalidate(8, targets = $$props.targets); - if ('boundaries' in $$props) $$invalidate(9, boundaries = $$props.boundaries); - if ('isModalOpen' in $$props) $$invalidate(2, isModalOpen = $$props.isModalOpen); - if ('currentcollisiontext' in $$props) $$invalidate(3, currentcollisiontext = $$props.currentcollisiontext); - if ('currentcollisionitems' in $$props) $$invalidate(4, currentcollisionitems = $$props.currentcollisionitems); - if ('movingDotElement' in $$props) $$invalidate(5, movingDotElement = $$props.movingDotElement); - }; - - if ($$props && "$$inject" in $$props) { - $$self.$inject_state($$props.$$inject); - } - - $$self.$$.update = () => { - if ($$self.$$.dirty & /*$dotPosition*/ 1) { - // document.body.style.backgroundColor = target.color; - // break; - // Play a sound effect. You'll need to pre-load these sounds. - // case "playSound": - // new Audio(target.soundUrl).play(); - // break; - // Redirect the user to a different URL. - // case "redirect": - // window.location.href = target.url; - // break; - // Increase the size of the dot. - // case "enlargeDot": - // dotElement.style.transform = "scale(1.5)"; - // break; - // Decrease the size of the dot. - // case "shrinkDot": - // dotElement.style.transform = "scale(0.5)"; - // break; - // Apply a rotation to the dot. - // case "rotateDot": - // dotElement.style.transform = "rotate(45deg)"; - // break; - // Toggle the visibility of a specific element on the page. - // case "toggleVisibility": - // let elem = document.getElementById(target.elementId); - // elem.style.display = elem.style.display === 'none' ? 'block' : 'none'; - // break; - // Trigger a CSS animation on a specific element. - // case "startAnimation": - // let animElem = document.getElementById(target.elementId); - // animElem.classList.add(target.animationClass); - // break; - // Increase a score or counter displayed on the screen. - // case "incrementScore": - // score += target.incrementValue; - // updateScoreDisplay(); // Assuming you have a function to update the score display - // break; - // Change the color of the dot. - // case "changeDotColor": - // dotElement.style.backgroundColor = target.color; - // break; - // Reactive statement to check collision whenever dotPosition changes - $dotPosition && checkCollision($dotPosition); - } - }; - - return [ - $dotPosition, - canvas, - isModalOpen, - currentcollisiontext, - currentcollisionitems, - movingDotElement, - $targets, - dotPosition, - targets, - boundaries, - handleSpaceClick, - handleModalClose, - updateDotPosition, - spaceStyle, - canvas_1_binding, - movingdot_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 - }); + function instance$6($$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(); + let dotElement; // Reference to the dot element - return block; - } + function moveDot(newX, newY) { + // Update position with a new object for Svelte reactivity + let boundedX = Math.max(boundaries.minX, Math.min(newX, boundaries.maxX)); - // (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); + let boundedY = Math.max(boundaries.minY, Math.min(newY, boundaries.maxY)); - 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); + // Update position + $$invalidate(0, position = { x: boundedX, y: boundedY }); - if (default_slot) { - default_slot.m(button, null); - } + // Dispatch the move event with the new position + dispatch('move', position); + } - current = true; + const handleKeyPress = e => { + e.preventDefault(); + let newX = position.x; + let newY = position.y; - 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(); + switch (e.key) { + case 'ArrowLeft': + newX -= step; + break; + case 'ArrowRight': + newX += step; + break; + case 'ArrowUp': + newY -= step; + break; + case 'ArrowDown': + newY += step; + break; } - }; - - 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 = []; + moveDot(newX, newY); + }; - function select_block_type(ctx, dirty) { - if (/*isCustomPlayButton*/ ctx[0]) return 0; - return 1; + function focusDot() { + //On click for the space its imported into + dotElement.focus(); } - 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 + onMount(() => { + dotElement.addEventListener('keydown', handleKeyPress); }); - 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("