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(`<VideoGradioComponentBrainstorming> was created with unknown prop '${key}'`);
+ if (!~writable_props.indexOf(key) && key.slice(0, 2) !== '$$' && key !== 'slot') console_1$4.warn(`<VideoGradioComponentBrainstorming> 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(`<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$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(`<MovingDotPortfromReact> 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("<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/>'");
- }
-
- get focusDot() {
- return this.$$.ctx[3];
- }
-
- set focusDot(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$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("<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$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("<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\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("<SimpleModal> 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(`<SimpleModal> 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("<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/>'");
- }
-
- get items() {
- throw new Error("<SimpleModal>: Props cannot be read directly from the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
- }
-
- set items(value) {
- throw new Error("<SimpleModal>: Props cannot be set directly on the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
- }
-
- get onClose() {
- throw new Error("<SimpleModal>: Props cannot be read directly from the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
- }
-
- set onClose(value) {
- throw new Error("<SimpleModal>: 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$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(`<MovingDotSpacePortfromReact> 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("<Button> was created without expected prop 'isCustomPlayButton'");
- }
+ onDestroy(() => {
+ dotElement.removeEventListener('keydown', handleKeyPress);
});
- const writable_props = ['isCustomPlayButton'];
+ const writable_props = ['position', 'boundaries'];
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}'`);
+ if (!~writable_props.indexOf(key) && key.slice(0, 2) !== '$$' && key !== 'slot') console.warn(`<MovingDotPortfromReact> 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
+ function button_binding($$value) {
+ binding_callbacks[$$value ? 'unshift' : 'push'](() => {
+ dotElement = $$value;
+ $$invalidate(1, dotElement);
});
}
- 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);
+ if ('position' in $$props) $$invalidate(0, position = $$props.position);
+ if ('boundaries' in $$props) $$invalidate(2, boundaries = $$props.boundaries);
};
- $$self.$capture_state = () => ({ scale, title, id, animations });
+ $$self.$capture_state = () => ({
+ onMount,
+ onDestroy,
+ createEventDispatcher,
+ position,
+ boundaries,
+ step,
+ dispatch,
+ dotElement,
+ moveDot,
+ handleKeyPress,
+ focusDot
+ });
$$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 ('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 [title, id, animations];
+ return [position, dotElement, boundaries, focusDot, button_binding];
}
- class Iframe extends SvelteComponentDev {
+ class MovingDotPortfromReact extends SvelteComponentDev {
constructor(options) {
super(options);
- init(this, options, instance$6, create_fragment$6, safe_not_equal, { title: 0, id: 1, animations: 2 });
+ init(this, options, instance$6, create_fragment$6, safe_not_equal, { position: 0, boundaries: 2, focusDot: 3 });
dispatch_dev("SvelteRegisterComponent", {
component: this,
- tagName: "Iframe",
+ tagName: "MovingDotPortfromReact",
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/>'");
+ 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 title(value) {
- throw new Error("<Iframe>: Props cannot be set directly on 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 id() {
- throw new Error("<Iframe>: Props cannot be read directly from 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 id(value) {
- throw new Error("<Iframe>: Props cannot be set directly on 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/>'");
}
- get animations() {
- throw new Error("<Iframe>: Props cannot be read directly from the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
+ get focusDot() {
+ return this.$$.ctx[3];
}
- 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/>'");
+ set focusDot(value) {
+ throw new Error("<MovingDotPortfromReact>: 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
- });
+ /* src\MovingDotTargetPortfromReact.svelte generated by Svelte v3.59.2 */
- return block;
- }
+ const file$5 = "src\\MovingDotTargetPortfromReact.svelte";
function create_fragment$5(ctx) {
- let previous_key = /*play*/ ctx[3];
- let key_block_anchor;
- let key_block = create_key_block(ctx);
+ let div;
const block = {
c: function create() {
- key_block.c();
- key_block_anchor = empty();
+ 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$5, 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) {
- key_block.m(target, anchor);
- insert_dev(target, key_block_anchor, anchor);
+ insert_dev(target, div, 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);
+ 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(key_block_anchor);
- key_block.d(detaching);
+ if (detaching) detach_dev(div);
}
};
@@ -3716,465 +1332,243 @@ var app = (function () {
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'];
+ 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(`<Image> was created with unknown prop '${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 ('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 ('position' in $$props) $$invalidate(0, position = $$props.position);
};
- $$self.$capture_state = () => ({ id, title, altThumb, play });
+ $$self.$capture_state = () => ({ position });
$$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 ('position' in $$props) $$invalidate(0, position = $$props.position);
};
if ($$props && "$$inject" in $$props) {
$$self.$inject_state($$props.$$inject);
}
- return [id, title, altThumb, play];
+ return [position];
}
- class Image extends SvelteComponentDev {
+ class MovingDotTargetPortfromReact 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 });
+ init(this, options, instance$5, create_fragment$5, safe_not_equal, { position: 0 });
dispatch_dev("SvelteRegisterComponent", {
component: this,
- tagName: "Image",
+ tagName: "MovingDotTargetPortfromReact",
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 position() {
+ throw new Error("<MovingDotTargetPortfromReact>: Props cannot be read directly from 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 position(value) {
+ throw new Error("<MovingDotTargetPortfromReact>: Props cannot be set directly on 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/>'");
- }
+ /* src\SimpleModal.svelte generated by Svelte v3.59.2 */
- get play() {
- throw new Error("<Image>: Props cannot be read directly from the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
- }
+ const { console: console_1$3 } = globals;
+ const file$4 = "src\\SimpleModal.svelte";
- 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/>'");
- }
+ function get_each_context$2(ctx, list, i) {
+ const child_ctx = ctx.slice();
+ child_ctx[8] = list[i];
+ return child_ctx;
}
- /* 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;
+ // (22:0) {#if isOpen}
+ function create_if_block$2(ctx) {
+ let div3;
+ let div2;
let div0;
+ let h2;
+ let t0;
let t1;
+ let button;
+ let t3;
let div1;
- let h3;
- let t2;
- let current;
+ let t4;
+ let t5;
+ let ul;
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;
- }
+ let each_value = /*items*/ ctx[3];
+ validate_each_argument(each_value);
+ let each_blocks = [];
- // (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);
+ 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() {
- if (thumbnail_slot) thumbnail_slot.c();
- },
- m: function mount(target, anchor) {
- if (thumbnail_slot) {
- thumbnail_slot.m(target, anchor);
+ 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();
}
- current = true;
+ add_location(h2, file$4, 25, 8, 651);
+ add_location(button, file$4, 26, 8, 677);
+ attr_dev(div0, "class", "modal-header svelte-m51ous");
+ add_location(div0, file$4, 24, 6, 615);
+ attr_dev(ul, "class", "modal-items");
+ add_location(ul, file$4, 30, 8, 801);
+ attr_dev(div1, "class", "modal-content svelte-m51ous");
+ add_location(div1, file$4, 28, 6, 745);
+ attr_dev(div2, "class", "modal svelte-m51ous");
+ add_location(div2, file$4, 23, 4, 588);
+ attr_dev(div3, "class", "modal-overlay svelte-m51ous");
+ add_location(div3, file$4, 22, 2, 555);
},
- 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
- );
+ 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);
}
}
- },
- 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;
- }
+ 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]);
- // (47:2) {#if !play}
- function create_if_block$3(ctx) {
- let button;
- let current;
+ if (dirty & /*handleItemClick, items*/ 40) {
+ each_value = /*items*/ ctx[3];
+ validate_each_argument(each_value);
+ let i;
- button = new Button({
- props: {
- isCustomPlayButton: /*isCustomPlayButton*/ ctx[7],
- $$slots: { default: [create_default_slot] },
- $$scope: { ctx }
- },
- $$inline: true
- });
+ for (i = 0; i < each_value.length; i += 1) {
+ const child_ctx = get_each_context$2(ctx, each_value, i);
- button.$on("click", /*click_handler_1*/ ctx[12]);
+ 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(ul, null);
+ }
+ }
- 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 = {};
+ for (; i < each_blocks.length; i += 1) {
+ each_blocks[i].d(1);
+ }
- if (dirty & /*$$scope*/ 8192) {
- button_changes.$$scope = { dirty, ctx };
+ each_blocks.length = each_value.length;
}
-
- 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);
+ if (detaching) detach_dev(div3);
+ destroy_each(each_blocks, detaching);
+ mounted = false;
+ dispose();
}
};
dispatch_dev("SvelteRegisterBlock", {
block,
- id: create_if_block$3.name,
+ id: create_if_block$2.name,
type: "if",
- source: "(47:2) {#if !play}",
+ source: "(22:0) {#if isOpen}",
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);
+ // (32:10) {#each items as item}
+ function create_each_block$2(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() {
- if (default_slot) default_slot.c();
+ button = element("button");
+ t = text(t_value);
+ add_location(button, file$4, 32, 12, 872);
},
m: function mount(target, anchor) {
- if (default_slot) {
- default_slot.m(target, anchor);
- }
+ insert_dev(target, button, anchor);
+ append_dev(button, t);
- 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
- );
- }
+ if (!mounted) {
+ dispose = listen_dev(button, "click", click_handler, false, false, false, false);
+ mounted = true;
}
},
- 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;
+ 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 (default_slot) default_slot.d(detaching);
+ if (detaching) detach_dev(button);
+ mounted = false;
+ dispose();
}
};
dispatch_dev("SvelteRegisterBlock", {
block,
- id: create_default_slot.name,
- type: "slot",
- source: "(48:4) <Button on:click={() => (play = true)} {isCustomPlayButton}>",
+ id: create_each_block$2.name,
+ type: "each",
+ source: "(32:10) {#each items as item}",
ctx
});
@@ -4182,117 +1576,40 @@ var app = (function () {
}
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);
+ let if_block_anchor;
+ let if_block = /*isOpen*/ ctx[0] && create_if_block$2(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);
+ 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) {
- 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;
+ if (if_block) if_block.m(target, anchor);
+ insert_dev(target, if_block_anchor, anchor);
},
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);
- }
+ if (/*isOpen*/ ctx[0]) {
+ if (if_block) {
+ if_block.p(ctx, dirty);
} else {
- if_block1 = create_if_block$3(ctx);
- if_block1.c();
- transition_in(if_block1, 1);
- if_block1.m(div, null);
+ if_block = create_if_block$2(ctx);
+ if_block.c();
+ if_block.m(if_block_anchor.parentNode, if_block_anchor);
}
- } 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]);
+ } else if (if_block) {
+ if_block.d(1);
+ if_block = null;
}
},
- 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;
- },
+ i: noop,
+ o: noop,
d: function destroy(detaching) {
- if (detaching) detach_dev(div);
- if_blocks[current_block_type_index].d();
- if (if_block1) if_block1.d();
+ if (if_block) if_block.d(detaching);
+ if (detaching) detach_dev(if_block_anchor);
}
};
@@ -4309,70 +1626,64 @@ var app = (function () {
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);
+ 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$3.warn("<SimpleModal> was created without expected prop 'onClose'");
+ }
});
- let play = false;
- const isCustomPlayButton = $$slots.default;
- const isCustomThumbnail = $$slots.thumbnail;
- const writable_props = ['id', 'altThumb', 'animations'];
+ 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.warn(`<Youtube> was created with unknown prop '${key}'`);
+ if (!~writable_props.indexOf(key) && key.slice(0, 2) !== '$$' && key !== 'slot') console_1$3.warn(`<SimpleModal> 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);
+ const click_handler = item => handleItemClick(item);
$$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);
+ 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 = () => ({
- onMount,
- Button,
- Iframe,
- Image,
- id,
- altThumb,
- animations,
+ isOpen,
title,
- width,
- height,
- videoInfo,
- play,
- isCustomPlayButton,
- isCustomThumbnail
+ content,
+ items,
+ onClose,
+ closeModal,
+ handleItemClick
});
$$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 ('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) {
@@ -4380,208 +1691,220 @@ var app = (function () {
}
return [
- id,
- altThumb,
- animations,
+ isOpen,
title,
- width,
- height,
- play,
- isCustomPlayButton,
- isCustomThumbnail,
- slots,
- click_handler,
- keypress_handler,
- click_handler_1,
- $$scope
+ content,
+ items,
+ closeModal,
+ handleItemClick,
+ onClose,
+ click_handler
];
}
- class Youtube extends SvelteComponentDev {
+ class SimpleModal extends SvelteComponentDev {
constructor(options) {
super(options);
- init(this, options, instance$4, create_fragment$4, safe_not_equal, { id: 0, altThumb: 1, animations: 2 });
+
+ init(this, options, instance$4, create_fragment$4, safe_not_equal, {
+ isOpen: 0,
+ title: 1,
+ content: 2,
+ items: 3,
+ onClose: 6
+ });
dispatch_dev("SvelteRegisterComponent", {
component: this,
- tagName: "Youtube",
+ tagName: "SimpleModal",
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/>'");
+ 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 id(value) {
- throw new Error("<Youtube>: Props cannot be set directly on 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/>'");
}
- get altThumb() {
- throw new Error("<Youtube>: Props cannot be read directly from the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
+ get items() {
+ throw new Error("<SimpleModal>: 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/>'");
+ set items(value) {
+ throw new Error("<SimpleModal>: 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/>'");
+ get onClose() {
+ throw new Error("<SimpleModal>: 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/>'");
+ set onClose(value) {
+ throw new Error("<SimpleModal>: 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 */
+ /* src\MovingDotSpacePortfromReact.svelte generated by Svelte v3.59.2 */
const { console: console_1$2 } = globals;
- const file$3 = "src\\YoutubeBookmarksfromReact.svelte";
+ const file$3 = "src\\MovingDotSpacePortfromReact.svelte";
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;
- }
-
- function get_each_context_1(ctx, list, i) {
- const child_ctx = ctx.slice();
- child_ctx[22] = list[i];
- child_ctx[24] = i;
+ child_ctx[19] = list[i];
return child_ctx;
}
- // (145:4) {#if videoId}
- function create_if_block$2(ctx) {
- let youtube;
+ // (155: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[19].name + "";
+ let t1;
let current;
- youtube = new Youtube({
- props: { id: /*videoId*/ ctx[0] },
+ target = new MovingDotTargetPortfromReact({
+ props: { position: /*target*/ ctx[19] },
$$inline: true
});
- youtube.$on("ready", /*onReady*/ ctx[5]);
-
const block = {
+ key: key_1,
+ first: null,
c: function create() {
- create_component(youtube.$$.fragment);
+ 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$3, 156, 8, 7641);
+ this.first = first;
},
- m: function mount(target, anchor) {
- mount_component(youtube, target, anchor);
+ 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(ctx, dirty) {
- const youtube_changes = {};
- if (dirty & /*videoId*/ 1) youtube_changes.id = /*videoId*/ ctx[0];
- youtube.$set(youtube_changes);
+ 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(youtube.$$.fragment, local);
+ transition_in(target.$$.fragment, local);
current = true;
},
o: function outro(local) {
- transition_out(youtube.$$.fragment, local);
+ transition_out(target.$$.fragment, local);
current = false;
},
d: function destroy(detaching) {
- destroy_component(youtube, 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_if_block$2.name,
- type: "if",
- source: "(145:4) {#if videoId}",
+ id: create_each_block$1.name,
+ type: "each",
+ source: "(155:4) {#each $targets as target (target.name)}",
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;
+ // (161:4) {#if isModalOpen}
+ function create_if_block$1(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 = {
- 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;
+ create_component(modal.$$.fragment);
},
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);
+ mount_component(modal, target, anchor);
+ current = true;
},
- 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$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, 171, 12, 7032);
- this.first = li;
+ 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);
},
- m: function mount(target, anchor) {
- insert_dev(target, li, anchor);
- append_dev(li, t0);
- append_dev(li, t1);
+ i: function intro(local) {
+ if (current) return;
+ transition_in(modal.$$.fragment, local);
+ current = true;
},
- 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);
+ o: function outro(local) {
+ transition_out(modal.$$.fragment, local);
+ current = false;
},
d: function destroy(detaching) {
- if (detaching) detach_dev(li);
+ destroy_component(modal, detaching);
}
};
dispatch_dev("SvelteRegisterBlock", {
block,
- id: create_each_block$1.name,
- type: "each",
- source: "(171:12) {#each r2userTimestamps as time, index (time)}",
+ id: create_if_block$1.name,
+ type: "if",
+ source: "(161:4) {#if isModalOpen}",
ctx
});
@@ -4589,305 +1912,138 @@ var app = (function () {
}
function create_fragment$3(ctx) {
- let div2;
+ let div1;
+ let canvas_1;
let t0;
- let input0;
+ let movingdot;
let t1;
- let t2;
let div0;
- let span;
+ let t2;
+ let t3_value = /*$dotPosition*/ ctx[0].x + "";
+ let t3;
let t4;
- let br0;
+ let t5_value = /*$dotPosition*/ ctx[0].y + "";
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 each_1_lookup = new Map();
+ let t7;
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];
+ 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_1 = ctx => /*time*/ ctx[22];
- validate_each_keys(ctx, each_value, get_each_context$1, get_key_1);
+ const get_key = ctx => /*target*/ ctx[19].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_1(child_ctx);
- each1_lookup.set(key, each_blocks[i] = create_each_block$1(key, child_ctx));
+ let key = get_key(child_ctx);
+ each_1_lookup.set(key, each_blocks[i] = create_each_block$1(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();
- }
+ let if_block = /*isModalOpen*/ ctx[2] && create_if_block$1(ctx);
- t39 = space();
- h41 = element("h4");
- h41.textContent = "Round 2 Timestamps";
- t41 = space();
- ul1 = element("ul");
+ 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();
}
- 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);
+ 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$3, 151, 4, 7167);
+ attr_dev(div0, "id", "overlayText");
+ attr_dev(div0, "class", "svelte-c2nwl9");
+ add_location(div0, file$3, 153, 4, 7425);
+ attr_dev(div1, "id", "game-container");
+ attr_dev(div1, "style", /*spaceStyle*/ ctx[13]);
+ add_location(div1, file$3, 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, 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);
+ 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, 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);
+ append_dev(div1, t6);
for (let i = 0; i < each_blocks.length; i += 1) {
if (each_blocks[i]) {
- each_blocks[i].m(ul1, null);
+ 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(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)
- ];
-
+ dispose = listen_dev(canvas_1, "click", /*handleSpaceClick*/ ctx[10], 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]);
+ 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$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 (/*videoId*/ ctx[0]) {
+ if (/*isModalOpen*/ ctx[2]) {
if (if_block) {
if_block.p(ctx, dirty);
- if (dirty & /*videoId*/ 1) {
+ if (dirty & /*isModalOpen*/ 4) {
transition_in(if_block, 1);
}
} else {
- if_block = create_if_block$2(ctx);
+ if_block = create_if_block$1(ctx);
if_block.c();
transition_in(if_block, 1);
- if_block.m(div2, t2);
+ if_block.m(div1, null);
}
} else if (if_block) {
group_outros();
@@ -4898,47 +2054,41 @@ var app = (function () {
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$1, 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$1, null, get_each_context$1);
- }
},
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(div2);
- if (if_block) if_block.d();
-
- for (let i = 0; i < each_blocks_1.length; i += 1) {
- each_blocks_1[i].d();
- }
+ 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;
- run_all(dispose);
+ dispose();
}
};
@@ -4954,218 +2104,301 @@ var app = (function () {
}
function instance$3($$self, $$props, $$invalidate) {
+ let $dotPosition;
+ let $targets;
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 = [];
+ 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));
- for (let i = interval; i < duration; i += interval) {
- generatedTimestamps.push(i);
+ 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" },
- 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]);
- }
- }
+ validate_store(targets, 'targets');
+ component_subscribe($$self, targets, value => $$invalidate(6, $targets = value));
- function goToPreviousTimestamp() {
- if (currentIndex > 0) {
- currentIndex -= 1;
- player.seekTo(timestamps[currentIndex]);
- }
- }
+ //{ 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 };
- function goToUserNextTimestamp() {
- if (currentUserIndex < userTimestamps.length - 1) {
- $$invalidate(1, currentUserIndex += 1);
- player.seekTo(userTimestamps[currentUserIndex]);
- }
- }
+ let isModalOpen = false;
+ let currentcollisiontext;
+ let currentcollisionitems = [];
+ let movingDotElement;
- function goToUserPreviousTimestamp() {
- if (currentUserIndex > 0) {
- $$invalidate(1, currentUserIndex -= 1);
- player.seekTo(userTimestamps[currentUserIndex]);
- }
+ function handleSpaceClick() {
+ //console.log('Container clicked!', event);
+ movingDotElement.focusDot();
}
- function addUserTimestamp() {
- const currentTime = Math.floor(player.getCurrentTime());
- $$invalidate(2, userTimestamps = [...userTimestamps, currentTime].sort((a, b) => a - b));
+ function handleModalClose() {
+ $$invalidate(2, isModalOpen = false);
+ movingDotElement.focusDot();
}
- function addUserTimestampminus5() {
- const currentTime = Math.floor(player.getCurrentTime() - 5);
- $$invalidate(2, userTimestamps = [...userTimestamps, currentTime].sort((a, b) => a - b));
+ function updateDotPosition(newX, newY) {
+ dotPosition.set({ x: newX, y: newY });
}
- function removeUserTimestamp() {
- const currentTime = Math.floor(player.getCurrentTime());
- $$invalidate(2, userTimestamps = userTimestamps.filter(time => time !== currentTime));
- }
+ // 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);
+ }
+ });
+ };
- function addr2UserTimestampminus5() {
- const currentTime = Math.floor(player.getCurrentTime() - 5);
- $$invalidate(3, r2userTimestamps = [...r2userTimestamps, currentTime].sort((a, b) => a - b));
- }
+ // 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$2.warn(`<YoutubeBookmarksfromReact> was created with unknown prop '${key}'`);
+ if (!~writable_props.indexOf(key) && key.slice(0, 2) !== '$$' && key !== 'slot') console_1$2.warn(`<MovingDotSpacePortfromReact> was created with unknown prop '${key}'`);
});
- function input0_input_handler() {
- videoId = this.value;
- $$invalidate(0, videoId);
+ 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,
- YouTube: Youtube,
- videoId,
- currentIndex,
- currentUserIndex,
- timestamps,
- userTimestamps,
- r2userTimestamps,
- player,
- interval,
- opts,
- onReady,
- exportTimestamps,
- exportr2Timestamps,
- importTimestamps,
- goToNextTimestamp,
- goToPreviousTimestamp,
- goToUserNextTimestamp,
- goToUserPreviousTimestamp,
- addUserTimestamp,
- addUserTimestampminus5,
- removeUserTimestamp,
- addr2UserTimestampminus5
+ 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 ('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 ('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 [
- videoId,
- currentUserIndex,
- userTimestamps,
- r2userTimestamps,
- interval,
- onReady,
- exportTimestamps,
- exportr2Timestamps,
- importTimestamps,
- goToNextTimestamp,
- goToPreviousTimestamp,
- goToUserNextTimestamp,
- goToUserPreviousTimestamp,
- addUserTimestamp,
- addUserTimestampminus5,
- removeUserTimestamp,
- addr2UserTimestampminus5,
- input0_input_handler
+ $dotPosition,
+ canvas,
+ isModalOpen,
+ currentcollisiontext,
+ currentcollisionitems,
+ movingDotElement,
+ $targets,
+ dotPosition,
+ targets,
+ boundaries,
+ handleSpaceClick,
+ handleModalClose,
+ updateDotPosition,
+ spaceStyle,
+ canvas_1_binding,
+ movingdot_binding,
+ move_handler
];
}
- class YoutubeBookmarksfromReact extends SvelteComponentDev {
+ class MovingDotSpacePortfromReact extends SvelteComponentDev {
constructor(options) {
super(options);
init(this, options, instance$3, create_fragment$3, safe_not_equal, {});
dispatch_dev("SvelteRegisterComponent", {
component: this,
- tagName: "YoutubeBookmarksfromReact",
+ tagName: "MovingDotSpacePortfromReact",
options,
id: create_fragment$3.name
});
@@ -5191,7 +2424,7 @@ var app = (function () {
let t5;
let div1;
let t6;
- let t7_value = /*currentTime*/ ctx[2].toFixed(2) + "";
+ let t7_value = /*currentTime*/ ctx[3].toFixed(2) + "";
let t7;
let t8;
let t9;
@@ -5203,40 +2436,54 @@ var app = (function () {
let t13;
let t14;
let button0;
- let t16;
- let button1;
let t18;
- let t19;
- let t20;
- let t21_value = /*timestamps*/ ctx[7].length + "";
- let t21;
+ let button1;
let t22;
- let button2;
+ let t23;
let t24;
- let button3;
+ let t25_value = /*timestamps*/ ctx[8].length + "";
let t25;
- let button3_class_value;
- let button3_disabled_value;
let t26;
- let button4;
+ let br1;
let t27;
- let button4_class_value;
- let button4_disabled_value;
- let t28;
+ let button2;
let t29;
+ let button3;
let t30;
- let t31_value = /*userTimestamps*/ ctx[1].length + "";
+ let button3_class_value;
+ let button3_disabled_value;
let t31;
+ let button4;
let t32;
- let br1;
+ let button4_class_value;
+ let button4_disabled_value;
let t33;
- let br2;
- let t34;
let button5;
+ let t34;
+ let button5_class_value;
+ let button5_disabled_value;
+ let t35;
let t36;
- let button6;
+ let t37;
+ let t38_value = /*userTimestamps*/ ctx[1].length + "";
let t38;
+ let t39;
+ let br2;
+ let t40;
+ let t41;
+ let t42;
+ let t43_value = /*r2userTimestamps*/ ctx[9].length + "";
+ let t43;
+ let t44;
+ let br3;
+ let t45;
+ let br4;
+ let t46;
+ let button6;
+ let t48;
let button7;
+ let t50;
+ let input2;
let mounted;
let dispose;
@@ -5246,9 +2493,9 @@ var app = (function () {
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 ");
+ t2 = text("Current Video Id (mwO6v4BlgZQ | IVJkOHTBPn0 ) (test - qEpmiA3XkX8 hardcoded)\r\n ");
input0 = element("input");
- t3 = text("\r\n Start/Stop Word Update\r\n ");
+ t3 = text("\r\n Start/Stop Word Update (Dummy Transcript for now)\r\n ");
input1 = element("input");
t4 = space();
div3 = element("div");
@@ -5260,87 +2507,104 @@ var app = (function () {
t8 = text(" seconds");
t9 = space();
div2 = element("div");
- t10 = text(/*line*/ ctx[4]);
+ t10 = text(/*line*/ ctx[5]);
t11 = space();
br0 = element("br");
t12 = space();
- t13 = text(/*currentWord*/ ctx[3]);
+ t13 = text(/*currentWord*/ ctx[4]);
t14 = space();
button0 = element("button");
- button0.textContent = "Previous Auto Timestamp";
- t16 = space();
+ button0.textContent = `Previous Auto Timestamp - ${/*interval*/ ctx[13]}s`;
+ t18 = space();
button1 = element("button");
- button1.textContent = "Next Auto Timestamp";
- t18 = text("\r\nAuto Timestamps: ");
- t19 = text(/*currentIndex*/ ctx[6]);
- t20 = text(" / ");
- t21 = text(t21_value);
- t22 = text(" ||| \r\n");
+ button1.textContent = `Next Auto Timestamp - ${/*interval*/ ctx[13]}s`;
+ t22 = text("\r\nAuto Timestamps: ");
+ t23 = text(/*currentIndex*/ ctx[7]);
+ t24 = text(" / ");
+ t25 = text(t25_value);
+ t26 = space();
+ br1 = element("br");
+ t27 = space();
button2 = element("button");
button2.textContent = "Add Timestamp";
- t24 = space();
+ t29 = space();
button3 = element("button");
- t25 = text("Previous User Timestamp");
- t26 = space();
+ t30 = text("Current User Timestamp (incomplete)");
+ t31 = space();
button4 = element("button");
- t27 = text("Next User Timestamp");
- t28 = text("\r\nUser Timestamps: ");
- t29 = text(/*currentuserIndex*/ ctx[0]);
- t30 = text(" / ");
- t31 = text(t31_value);
- t32 = space();
- br1 = element("br");
- t33 = text("A list of one messes up the logic for the counter in conjuction with the user timestamp button reactivity ");
- br2 = element("br");
- t34 = space();
+ t32 = text("Previous User Timestamp");
+ t33 = space();
button5 = element("button");
- button5.textContent = "Export Timestamps (Incomplete)";
- t36 = space();
+ t34 = text("Next User Timestamp");
+ t35 = text("\r\nUser Timestamps: ");
+ t36 = text(/*currentuserIndex*/ ctx[0]);
+ t37 = text(" / ");
+ t38 = text(t38_value);
+ t39 = space();
+ br2 = element("br");
+ t40 = text(" Round 2 (/n) User Timestamps: ");
+ t41 = text(/*currentuserIndex*/ ctx[0]);
+ t42 = text(" / ");
+ t43 = text(t43_value);
+ t44 = space();
+ br3 = element("br");
+ t45 = text("A list of one messes up the logic for the counter in conjuction with the user timestamp button reactivity ");
+ br4 = element("br");
+ t46 = space();
button6 = element("button");
- button6.textContent = "Export Round 2 Timestamps (Incomplete)";
- t38 = space();
+ button6.textContent = "Export Timestamps";
+ t48 = space();
button7 = element("button");
- button7.textContent = "Import Timestamps (Incomplete)";
- add_location(h1, file$2, 225, 0, 7476);
+ button7.textContent = "Export Round 2 Timestamps";
+ t50 = text(" Import Timestamps (Incomplete) ");
+ input2 = element("input");
+ add_location(h1, file$2, 286, 0, 9769);
attr_dev(input0, "type", "text");
- add_location(input0, file$2, 229, 4, 7605);
+ add_location(input0, file$2, 290, 4, 9927);
attr_dev(input1, "type", "checkbox");
- add_location(input1, file$2, 231, 4, 7686);
- add_location(label, file$2, 227, 0, 7539);
+ add_location(input1, file$2, 292, 4, 10035);
+ add_location(label, file$2, 288, 0, 9832);
attr_dev(div0, "id", "youtube-player");
set_style(div0, "height", "90vh");
set_style(div0, "width", "90%");
- add_location(div0, file$2, 239, 4, 8056);
+ add_location(div0, file$2, 300, 4, 10405);
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$2, 240, 4, 8126);
- add_location(br0, file$2, 244, 15, 8446);
+ add_location(div1, file$2, 301, 4, 10475);
+ add_location(br0, file$2, 305, 15, 10795);
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$2, 243, 4, 8305);
+ add_location(div2, file$2, 304, 4, 10654);
set_style(div3, "position", "relative");
- add_location(div3, file$2, 238, 0, 8017);
- add_location(button0, file$2, 250, 0, 8572);
- add_location(button1, file$2, 251, 0, 8651);
- add_location(button2, file$2, 253, 0, 8783);
- attr_dev(button3, "class", button3_class_value = "" + (null_to_empty(/*previousButtonClass*/ ctx[9]) + " svelte-cpjgti"));
+ add_location(div3, file$2, 299, 0, 10366);
+ add_location(button0, file$2, 311, 0, 10921);
+ add_location(button1, file$2, 312, 0, 11014);
+ add_location(br1, file$2, 315, 0, 11156);
+ add_location(button2, file$2, 316, 0, 11162);
+ attr_dev(button3, "class", button3_class_value = "" + (null_to_empty(/*currentindexButtonClass*/ ctx[10]) + " svelte-cpjgti"));
button3.disabled = button3_disabled_value = /*currentuserIndex*/ ctx[0] <= 0;
- add_location(button3, file$2, 254, 0, 8843);
- attr_dev(button4, "class", button4_class_value = "" + (null_to_empty(/*nextButtonClass*/ ctx[10]) + " svelte-cpjgti"));
- button4.disabled = button4_disabled_value = /*currentuserIndex*/ ctx[0] >= /*userTimestamps*/ ctx[1].length - 1;
- add_location(button4, file$2, 255, 0, 8983);
- add_location(br1, file$2, 256, 62, 9197);
- add_location(br2, file$2, 256, 172, 9307);
- add_location(button5, file$2, 257, 0, 9313);
- add_location(button6, file$2, 257, 48, 9361);
- add_location(button7, file$2, 257, 104, 9417);
+ add_location(button3, file$2, 317, 0, 11222);
+ attr_dev(button4, "class", button4_class_value = "" + (null_to_empty(/*previousindexButtonClass*/ ctx[11]) + " svelte-cpjgti"));
+ button4.disabled = button4_disabled_value = /*currentuserIndex*/ ctx[0] <= 0;
+ add_location(button4, file$2, 318, 0, 11377);
+ attr_dev(button5, "class", button5_class_value = "" + (null_to_empty(/*nextindexButtonClass*/ ctx[12]) + " svelte-cpjgti"));
+ button5.disabled = button5_disabled_value = /*currentuserIndex*/ ctx[0] >= /*userTimestamps*/ ctx[1].length - 1;
+ add_location(button5, file$2, 319, 0, 11522);
+ add_location(br2, file$2, 322, 0, 11745);
+ add_location(br3, file$2, 322, 82, 11827);
+ add_location(br4, file$2, 322, 192, 11937);
+ add_location(button6, file$2, 323, 0, 11943);
+ add_location(button7, file$2, 323, 63, 12006);
+ attr_dev(input2, "type", "file");
+ attr_dev(input2, "accept", ".json");
+ add_location(input2, file$2, 323, 167, 12110);
},
l: function claim(nodes) {
throw new Error("options.hydrate only works if the component was compiled with the `hydratable: true` option");
@@ -5351,10 +2615,10 @@ var app = (function () {
insert_dev(target, label, anchor);
append_dev(label, t2);
append_dev(label, input0);
- set_input_value(input0, /*currentvideoId*/ ctx[8]);
+ set_input_value(input0, /*currentvideoId*/ ctx[2]);
append_dev(label, t3);
append_dev(label, input1);
- input1.checked = /*isUpdating*/ ctx[5];
+ input1.checked = /*isUpdating*/ ctx[6];
insert_dev(target, t4, anchor);
insert_dev(target, div3, anchor);
append_dev(div3, div0);
@@ -5372,66 +2636,81 @@ var app = (function () {
append_dev(div2, t13);
insert_dev(target, t14, anchor);
insert_dev(target, button0, anchor);
- insert_dev(target, t16, anchor);
- insert_dev(target, button1, anchor);
insert_dev(target, t18, anchor);
- insert_dev(target, t19, anchor);
- insert_dev(target, t20, anchor);
- insert_dev(target, t21, anchor);
+ insert_dev(target, button1, anchor);
insert_dev(target, t22, anchor);
- insert_dev(target, button2, anchor);
+ insert_dev(target, t23, anchor);
insert_dev(target, t24, anchor);
- insert_dev(target, button3, anchor);
- append_dev(button3, t25);
+ insert_dev(target, t25, anchor);
insert_dev(target, t26, anchor);
- insert_dev(target, button4, anchor);
- append_dev(button4, t27);
- insert_dev(target, t28, anchor);
+ insert_dev(target, br1, anchor);
+ insert_dev(target, t27, anchor);
+ insert_dev(target, button2, anchor);
insert_dev(target, t29, anchor);
- insert_dev(target, t30, anchor);
+ insert_dev(target, button3, anchor);
+ append_dev(button3, t30);
insert_dev(target, t31, anchor);
- insert_dev(target, t32, anchor);
- insert_dev(target, br1, anchor);
+ insert_dev(target, button4, anchor);
+ append_dev(button4, t32);
insert_dev(target, t33, anchor);
- insert_dev(target, br2, anchor);
- insert_dev(target, t34, anchor);
insert_dev(target, button5, anchor);
+ append_dev(button5, t34);
+ insert_dev(target, t35, anchor);
insert_dev(target, t36, anchor);
- insert_dev(target, button6, anchor);
+ insert_dev(target, t37, anchor);
insert_dev(target, t38, anchor);
+ insert_dev(target, t39, anchor);
+ insert_dev(target, br2, anchor);
+ insert_dev(target, t40, anchor);
+ insert_dev(target, t41, anchor);
+ insert_dev(target, t42, anchor);
+ insert_dev(target, t43, anchor);
+ insert_dev(target, t44, anchor);
+ insert_dev(target, br3, anchor);
+ insert_dev(target, t45, anchor);
+ insert_dev(target, br4, anchor);
+ insert_dev(target, t46, anchor);
+ insert_dev(target, button6, anchor);
+ insert_dev(target, t48, anchor);
insert_dev(target, button7, anchor);
+ insert_dev(target, t50, anchor);
+ insert_dev(target, input2, anchor);
if (!mounted) {
dispose = [
- listen_dev(input0, "input", /*input0_input_handler*/ ctx[17]),
- listen_dev(input1, "change", /*input1_change_handler*/ ctx[18]),
- listen_dev(input1, "click", /*toggleUpdate*/ ctx[11], false, false, false, false),
- listen_dev(button0, "click", /*goToPreviousAutoTimestamp*/ ctx[13], false, false, false, false),
- listen_dev(button1, "click", /*goToNextAutoTimestamp*/ ctx[12], false, false, false, false),
- listen_dev(button2, "click", /*addUserTimestamp*/ ctx[14], false, false, false, false),
- listen_dev(button3, "click", /*goToPreviousUserTimestamp*/ ctx[16], false, false, false, false),
- listen_dev(button4, "click", /*goToNextUserTimestamp*/ ctx[15], false, false, false, false)
+ listen_dev(input0, "input", /*input0_input_handler*/ ctx[24]),
+ listen_dev(input1, "change", /*input1_change_handler*/ ctx[25]),
+ listen_dev(input1, "click", /*toggleUpdate*/ ctx[14], false, false, false, false),
+ listen_dev(button0, "click", /*goToPreviousAutoTimestamp*/ ctx[16], false, false, false, false),
+ listen_dev(button1, "click", /*goToNextAutoTimestamp*/ ctx[15], false, false, false, false),
+ listen_dev(button2, "click", /*addUserTimestamp*/ ctx[17], false, false, false, false),
+ listen_dev(button3, "click", /*goToCurrentUserTimestamp*/ ctx[18], false, false, false, false),
+ listen_dev(button4, "click", /*goToPreviousUserTimestamp*/ ctx[20], false, false, false, false),
+ listen_dev(button5, "click", /*goToNextUserTimestamp*/ ctx[19], false, false, false, false),
+ listen_dev(button6, "click", /*exportTimestamps*/ ctx[21], false, false, false, false),
+ listen_dev(button7, "click", /*exportr2Timestamps*/ ctx[22], false, false, false, false),
+ listen_dev(input2, "change", /*importTimestamps*/ ctx[23], false, false, false, false)
];
mounted = true;
}
},
p: function update(ctx, dirty) {
- if (dirty[0] & /*currentvideoId*/ 256 && input0.value !== /*currentvideoId*/ ctx[8]) {
- set_input_value(input0, /*currentvideoId*/ ctx[8]);
+ if (dirty[0] & /*currentvideoId*/ 4 && input0.value !== /*currentvideoId*/ ctx[2]) {
+ set_input_value(input0, /*currentvideoId*/ ctx[2]);
}
- if (dirty[0] & /*isUpdating*/ 32) {
- input1.checked = /*isUpdating*/ ctx[5];
+ if (dirty[0] & /*isUpdating*/ 64) {
+ input1.checked = /*isUpdating*/ ctx[6];
}
- if (dirty[0] & /*currentTime*/ 4 && t7_value !== (t7_value = /*currentTime*/ ctx[2].toFixed(2) + "")) set_data_dev(t7, t7_value);
- if (dirty[0] & /*line*/ 16) set_data_dev(t10, /*line*/ ctx[4]);
- if (dirty[0] & /*currentWord*/ 8) set_data_dev(t13, /*currentWord*/ ctx[3]);
- if (dirty[0] & /*currentIndex*/ 64) set_data_dev(t19, /*currentIndex*/ ctx[6]);
- if (dirty[0] & /*timestamps*/ 128 && t21_value !== (t21_value = /*timestamps*/ ctx[7].length + "")) set_data_dev(t21, t21_value);
+ if (dirty[0] & /*currentTime*/ 8 && t7_value !== (t7_value = /*currentTime*/ ctx[3].toFixed(2) + "")) set_data_dev(t7, t7_value);
+ if (dirty[0] & /*line*/ 32) set_data_dev(t10, /*line*/ ctx[5]);
+ if (dirty[0] & /*currentWord*/ 16) set_data_dev(t13, /*currentWord*/ ctx[4]);
+ if (dirty[0] & /*currentIndex*/ 128) set_data_dev(t23, /*currentIndex*/ ctx[7]);
+ if (dirty[0] & /*timestamps*/ 256 && t25_value !== (t25_value = /*timestamps*/ ctx[8].length + "")) set_data_dev(t25, t25_value);
- if (dirty[0] & /*previousButtonClass*/ 512 && button3_class_value !== (button3_class_value = "" + (null_to_empty(/*previousButtonClass*/ ctx[9]) + " svelte-cpjgti"))) {
+ if (dirty[0] & /*currentindexButtonClass*/ 1024 && button3_class_value !== (button3_class_value = "" + (null_to_empty(/*currentindexButtonClass*/ ctx[10]) + " svelte-cpjgti"))) {
attr_dev(button3, "class", button3_class_value);
}
@@ -5439,16 +2718,26 @@ var app = (function () {
prop_dev(button3, "disabled", button3_disabled_value);
}
- if (dirty[0] & /*nextButtonClass*/ 1024 && button4_class_value !== (button4_class_value = "" + (null_to_empty(/*nextButtonClass*/ ctx[10]) + " svelte-cpjgti"))) {
+ if (dirty[0] & /*previousindexButtonClass*/ 2048 && button4_class_value !== (button4_class_value = "" + (null_to_empty(/*previousindexButtonClass*/ ctx[11]) + " svelte-cpjgti"))) {
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)) {
+ if (dirty[0] & /*currentuserIndex*/ 1 && button4_disabled_value !== (button4_disabled_value = /*currentuserIndex*/ ctx[0] <= 0)) {
prop_dev(button4, "disabled", button4_disabled_value);
}
- if (dirty[0] & /*currentuserIndex*/ 1) set_data_dev(t29, /*currentuserIndex*/ ctx[0]);
- if (dirty[0] & /*userTimestamps*/ 2 && t31_value !== (t31_value = /*userTimestamps*/ ctx[1].length + "")) set_data_dev(t31, t31_value);
+ if (dirty[0] & /*nextindexButtonClass*/ 4096 && button5_class_value !== (button5_class_value = "" + (null_to_empty(/*nextindexButtonClass*/ ctx[12]) + " svelte-cpjgti"))) {
+ attr_dev(button5, "class", button5_class_value);
+ }
+
+ if (dirty[0] & /*currentuserIndex, userTimestamps*/ 3 && button5_disabled_value !== (button5_disabled_value = /*currentuserIndex*/ ctx[0] >= /*userTimestamps*/ ctx[1].length - 1)) {
+ prop_dev(button5, "disabled", button5_disabled_value);
+ }
+
+ if (dirty[0] & /*currentuserIndex*/ 1) set_data_dev(t36, /*currentuserIndex*/ ctx[0]);
+ if (dirty[0] & /*userTimestamps*/ 2 && t38_value !== (t38_value = /*userTimestamps*/ ctx[1].length + "")) set_data_dev(t38, t38_value);
+ if (dirty[0] & /*currentuserIndex*/ 1) set_data_dev(t41, /*currentuserIndex*/ ctx[0]);
+ if (dirty[0] & /*r2userTimestamps*/ 512 && t43_value !== (t43_value = /*r2userTimestamps*/ ctx[9].length + "")) set_data_dev(t43, t43_value);
},
i: noop,
o: noop,
@@ -5460,32 +2749,42 @@ var app = (function () {
if (detaching) detach_dev(div3);
if (detaching) detach_dev(t14);
if (detaching) detach_dev(button0);
- if (detaching) detach_dev(t16);
- if (detaching) detach_dev(button1);
if (detaching) detach_dev(t18);
- if (detaching) detach_dev(t19);
- if (detaching) detach_dev(t20);
- if (detaching) detach_dev(t21);
+ if (detaching) detach_dev(button1);
if (detaching) detach_dev(t22);
- if (detaching) detach_dev(button2);
+ if (detaching) detach_dev(t23);
if (detaching) detach_dev(t24);
- if (detaching) detach_dev(button3);
+ if (detaching) detach_dev(t25);
if (detaching) detach_dev(t26);
- if (detaching) detach_dev(button4);
- if (detaching) detach_dev(t28);
+ if (detaching) detach_dev(br1);
+ if (detaching) detach_dev(t27);
+ if (detaching) detach_dev(button2);
if (detaching) detach_dev(t29);
- if (detaching) detach_dev(t30);
+ if (detaching) detach_dev(button3);
if (detaching) detach_dev(t31);
- if (detaching) detach_dev(t32);
- if (detaching) detach_dev(br1);
+ if (detaching) detach_dev(button4);
if (detaching) detach_dev(t33);
- if (detaching) detach_dev(br2);
- if (detaching) detach_dev(t34);
if (detaching) detach_dev(button5);
+ if (detaching) detach_dev(t35);
if (detaching) detach_dev(t36);
- if (detaching) detach_dev(button6);
+ if (detaching) detach_dev(t37);
if (detaching) detach_dev(t38);
+ if (detaching) detach_dev(t39);
+ if (detaching) detach_dev(br2);
+ if (detaching) detach_dev(t40);
+ if (detaching) detach_dev(t41);
+ if (detaching) detach_dev(t42);
+ if (detaching) detach_dev(t43);
+ if (detaching) detach_dev(t44);
+ if (detaching) detach_dev(br3);
+ if (detaching) detach_dev(t45);
+ if (detaching) detach_dev(br4);
+ if (detaching) detach_dev(t46);
+ if (detaching) detach_dev(button6);
+ if (detaching) detach_dev(t48);
if (detaching) detach_dev(button7);
+ if (detaching) detach_dev(t50);
+ if (detaching) detach_dev(input2);
mounted = false;
run_all(dispose);
}
@@ -5508,8 +2807,9 @@ var app = (function () {
}
function instance$2($$self, $$props, $$invalidate) {
- let nextButtonClass;
- let previousButtonClass;
+ let nextindexButtonClass;
+ let previousindexButtonClass;
+ let currentindexButtonClass;
let { $$slots: slots = {}, $$scope } = $$props;
validate_slots('YoutubeIframeAPICustomInterface', slots, []);
let player;
@@ -5539,19 +2839,45 @@ var app = (function () {
let userTimestamps = []; // Array of user timestamps
let r2userTimestamps = []; // Array of user timestamps
let currentvideoId = 'qEpmiA3XkX8';
+ let youTubeApiLoaded = false;
+ let currentvideoduration;
+ let regeneratedautotimestamps = false;
+
+ window.onYouTubeIframeAPIReady = function () {
+ youTubeApiLoaded = true;
+ initYouTubePlayer();
+ };
+
+ // Function to initialize the YouTube player
+ function initYouTubePlayer() {
+ if (!youTubeApiLoaded) {
+ console.error("YouTube API is not ready yet.");
+ return;
+ }
+
+ regeneratedautotimestamps = false;
+
+ // Clear existing interval
+ clearInterval(timeUpdateInterval);
+
+ // Reinitialize player with new video ID
+ if (player) {
+ player.loadVideoById(currentvideoId);
+ } else {
+ player = new YT.Player('youtube-player',
+ {
+ height: '360',
+ width: '640',
+ videoId: currentvideoId,
+ events: {
+ 'onReady': onPlayerReady,
+ 'onStateChange': onPlayerStateChange
+ }
+ });
+ }
- // 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
- }
- });
+ // Reset and start the interval to update current time
+ timeUpdateInterval = setInterval(updateCurrentTime, 1000);
}
onMount(() => {
@@ -5562,32 +2888,41 @@ var app = (function () {
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();
+ function autogeneratedtimestamps() {
+ currentvideoduration = player.getDuration();
- //console.log("Video Duration: ", duration);
+ //console.log("Video Duration: ", currentvideoduration);
const generatedTimestamps = [];
- for (let i = interval; i < duration; i += interval) {
+ for (let i = interval; i < currentvideoduration; i += interval) {
generatedTimestamps.push(i);
}
- $$invalidate(7, timestamps = generatedTimestamps);
- } // Do something with the timestamps
- //console.log("Generated Timestamps: ", generatedTimestamps);
+ $$invalidate(8, timestamps = generatedTimestamps);
+
+ // Do something with the timestamps
+ //console.log("Generated Timestamps: ", generatedTimestamps);
+ regeneratedautotimestamps = true;
+ }
+
+ // Event handler for when the player is ready
+ function onPlayerReady(event) {
+ autogeneratedtimestamps();
+ }
function onPlayerStateChange(event) {
if (event.data === YT.PlayerState.PLAYING || event.data === YT.PlayerState.PAUSED) {
updateCurrentIndex();
}
+
+ // Check if the video has just started playing
+ if (event.data === YT.PlayerState.PLAYING && !regeneratedautotimestamps) {
+ autogeneratedtimestamps();
+ }
}
function updateCurrentIndex() {
@@ -5598,12 +2933,12 @@ var app = (function () {
? curr
: prev);
- $$invalidate(6, currentIndex = timestamps.indexOf(closest));
+ $$invalidate(7, currentIndex = timestamps.indexOf(closest));
}
function updateCurrentTime() {
if (player && player.getCurrentTime) {
- $$invalidate(2, currentTime = player.getCurrentTime());
+ $$invalidate(3, currentTime = player.getCurrentTime());
}
}
@@ -5613,34 +2948,34 @@ var app = (function () {
function updateWord() {
if (isUpdating) {
- $$invalidate(4, line = lines[Math.floor(Math.random() * lines.length)]);
- $$invalidate(3, currentWord = getRandomWord(line));
+ $$invalidate(5, line = lines[Math.floor(Math.random() * lines.length)]);
+ $$invalidate(4, currentWord = getRandomWord(line));
}
}
function toggleUpdate() {
- $$invalidate(5, isUpdating = !isUpdating);
+ $$invalidate(6, isUpdating = !isUpdating);
if (isUpdating) {
updateWord(); // Immediately update once
updateInterval = setInterval(updateWord, 3000); // Update every 3 seconds
} else {
clearInterval(updateInterval);
- $$invalidate(4, line = '');
- $$invalidate(3, currentWord = '');
+ $$invalidate(5, line = '');
+ $$invalidate(4, currentWord = '');
}
}
function goToNextAutoTimestamp() {
if (currentIndex < timestamps.length - 1) {
- $$invalidate(6, currentIndex += 1);
+ $$invalidate(7, currentIndex += 1);
player.seekTo(timestamps[currentIndex], true);
}
}
function goToPreviousAutoTimestamp() {
if (currentIndex > 0) {
- $$invalidate(6, currentIndex -= 1);
+ $$invalidate(7, currentIndex -= 1);
player.seekTo(timestamps[currentIndex], true);
}
}
@@ -5652,7 +2987,18 @@ var app = (function () {
function addr2UserTimestamp() {
const currentTime = Math.floor(player.getCurrentTime());
- r2userTimestamps = [...r2userTimestamps, currentTime].sort((a, b) => a - b);
+ $$invalidate(9, r2userTimestamps = [...r2userTimestamps, currentTime].sort((a, b) => a - b));
+ }
+
+ function goToCurrentUserTimestamp() {
+ if (currentuserIndex === 0 && currentIndex < 0) {
+ player.seekTo(userTimestamps[currentIndex], true);
+ } else if (currentuserIndex < 0) {
+ player.seekTo(userTimestamps[currentuserIndex], true);
+ } else {
+ // Handle the end of the list here
+ console.log("No selected user timestamp.");
+ } // You can also disable the "next" button or loop to the start if needed.
}
function goToNextUserTimestamp() {
@@ -5676,12 +3022,16 @@ var app = (function () {
}
function exportTimestamps() {
- const data = JSON.stringify({ videoId, timestamps: userTimestamps });
+ const data = JSON.stringify({
+ currentvideoId,
+ 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`;
+ const filename = `${currentvideoId}_timestamps.json`;
a.href = url;
a.download = filename;
document.body.appendChild(a);
@@ -5690,12 +3040,16 @@ var app = (function () {
}
function exportr2Timestamps() {
- const data = JSON.stringify({ videoId, timestamps: r2userTimestamps });
+ const data = JSON.stringify({
+ currentvideoId,
+ 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`;
+ const filename = `${currentvideoId}_round2timestamps.json`;
a.href = url;
a.download = filename;
document.body.appendChild(a);
@@ -5704,7 +3058,20 @@ var app = (function () {
}
function importTimestamps(event) {
+ // Check if the file input is not empty
const file = event.target.files[0];
+
+ if (!event.target.files || event.target.files.length === 0) {
+ alert('No file selected.');
+ return;
+ }
+
+ // Check if the file is a Blob (File objects inherit from Blob)
+ if (!(file instanceof Blob)) {
+ alert('Selected item is not a file.');
+ return;
+ }
+
const reader = new FileReader();
reader.onload = e => {
@@ -5716,10 +3083,10 @@ var app = (function () {
return;
}
- videoId = data.videoId || '';
+ $$invalidate(2, currentvideoId = data.currentvideoId || '');
$$invalidate(1, userTimestamps = data.timestamps);
} catch(error) {
- alert('An error occurred while importing timestamps.');
+ alert('An error occurred while importing timestamps.'); //regeneratedautotimestamps = false; = true
}
};
@@ -5734,12 +3101,12 @@ var app = (function () {
function input0_input_handler() {
currentvideoId = this.value;
- $$invalidate(8, currentvideoId);
+ $$invalidate(2, currentvideoId);
}
function input1_change_handler() {
isUpdating = this.checked;
- $$invalidate(5, isUpdating);
+ $$invalidate(6, isUpdating);
}
$$self.$capture_state = () => ({
@@ -5761,7 +3128,11 @@ var app = (function () {
userTimestamps,
r2userTimestamps,
currentvideoId,
+ youTubeApiLoaded,
+ currentvideoduration,
+ regeneratedautotimestamps,
initYouTubePlayer,
+ autogeneratedtimestamps,
onPlayerReady,
onPlayerStateChange,
updateCurrentIndex,
@@ -5773,34 +3144,40 @@ var app = (function () {
goToPreviousAutoTimestamp,
addUserTimestamp,
addr2UserTimestamp,
+ goToCurrentUserTimestamp,
goToNextUserTimestamp,
goToPreviousUserTimestamp,
exportTimestamps,
exportr2Timestamps,
importTimestamps,
- previousButtonClass,
- nextButtonClass
+ currentindexButtonClass,
+ previousindexButtonClass,
+ nextindexButtonClass
});
$$self.$inject_state = $$props => {
if ('player' in $$props) player = $$props.player;
- if ('interval' in $$props) interval = $$props.interval;
- if ('currentTime' in $$props) $$invalidate(2, currentTime = $$props.currentTime);
+ if ('interval' in $$props) $$invalidate(13, 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(3, currentWord = $$props.currentWord);
- if ('line' in $$props) $$invalidate(4, line = $$props.line);
- if ('isUpdating' in $$props) $$invalidate(5, isUpdating = $$props.isUpdating);
+ 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(6, currentIndex = $$props.currentIndex);
+ if ('currentIndex' in $$props) $$invalidate(7, currentIndex = $$props.currentIndex);
if ('currentuserIndex' in $$props) $$invalidate(0, currentuserIndex = $$props.currentuserIndex);
- if ('timestamps' in $$props) $$invalidate(7, timestamps = $$props.timestamps);
+ if ('timestamps' in $$props) $$invalidate(8, timestamps = $$props.timestamps);
if ('userTimestamps' in $$props) $$invalidate(1, userTimestamps = $$props.userTimestamps);
- if ('r2userTimestamps' in $$props) r2userTimestamps = $$props.r2userTimestamps;
- if ('currentvideoId' in $$props) $$invalidate(8, currentvideoId = $$props.currentvideoId);
- if ('previousButtonClass' in $$props) $$invalidate(9, previousButtonClass = $$props.previousButtonClass);
- if ('nextButtonClass' in $$props) $$invalidate(10, nextButtonClass = $$props.nextButtonClass);
+ if ('r2userTimestamps' in $$props) $$invalidate(9, r2userTimestamps = $$props.r2userTimestamps);
+ if ('currentvideoId' in $$props) $$invalidate(2, currentvideoId = $$props.currentvideoId);
+ if ('youTubeApiLoaded' in $$props) youTubeApiLoaded = $$props.youTubeApiLoaded;
+ if ('currentvideoduration' in $$props) currentvideoduration = $$props.currentvideoduration;
+ if ('regeneratedautotimestamps' in $$props) regeneratedautotimestamps = $$props.regeneratedautotimestamps;
+ if ('currentindexButtonClass' in $$props) $$invalidate(10, currentindexButtonClass = $$props.currentindexButtonClass);
+ if ('previousindexButtonClass' in $$props) $$invalidate(11, previousindexButtonClass = $$props.previousindexButtonClass);
+ if ('nextindexButtonClass' in $$props) $$invalidate(12, nextindexButtonClass = $$props.nextindexButtonClass);
};
if ($$props && "$$inject" in $$props) {
@@ -5808,35 +3185,52 @@ var app = (function () {
}
$$self.$$.update = () => {
+ if ($$self.$$.dirty[0] & /*currentvideoId*/ 4) {
+ if (currentvideoId) {
+ initYouTubePlayer();
+ }
+ }
+
if ($$self.$$.dirty[0] & /*currentuserIndex, userTimestamps*/ 3) {
- $$invalidate(10, nextButtonClass = currentuserIndex >= userTimestamps.length - 1
+ $$invalidate(12, nextindexButtonClass = currentuserIndex >= userTimestamps.length - 1
? 'button-at-end'
: 'button');
}
if ($$self.$$.dirty[0] & /*currentuserIndex*/ 1) {
- $$invalidate(9, previousButtonClass = currentuserIndex <= 0 ? 'button-at-end' : 'button');
+ $$invalidate(11, previousindexButtonClass = currentuserIndex <= 0 ? 'button-at-end' : 'button');
+ }
+
+ if ($$self.$$.dirty[0] & /*currentuserIndex*/ 1) {
+ $$invalidate(10, currentindexButtonClass = currentuserIndex <= 0 ? 'button-at-end' : 'button');
}
};
return [
currentuserIndex,
userTimestamps,
+ currentvideoId,
currentTime,
currentWord,
line,
isUpdating,
currentIndex,
timestamps,
- currentvideoId,
- previousButtonClass,
- nextButtonClass,
+ r2userTimestamps,
+ currentindexButtonClass,
+ previousindexButtonClass,
+ nextindexButtonClass,
+ interval,
toggleUpdate,
goToNextAutoTimestamp,
goToPreviousAutoTimestamp,
addUserTimestamp,
+ goToCurrentUserTimestamp,
goToNextUserTimestamp,
goToPreviousUserTimestamp,
+ exportTimestamps,
+ exportr2Timestamps,
+ importTimestamps,
input0_input_handler,
input1_change_handler
];
@@ -5856,6 +3250,71 @@ var app = (function () {
}
}
+ // 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\RecursiveNestedCommentsElement.svelte generated by Svelte v3.59.2 */
const { console: console_1 } = globals;
@@ -5863,14 +3322,14 @@ var app = (function () {
function get_each_context(ctx, list, i) {
const child_ctx = ctx.slice();
- child_ctx[16] = list[i];
- child_ctx[17] = list;
- child_ctx[18] = i;
+ child_ctx[14] = list[i];
+ child_ctx[15] = list;
+ child_ctx[16] = i;
return child_ctx;
}
- // (119:16) {#if showReplyInput[comment.id]}
- function create_if_block$1(ctx) {
+ // (123:16) {#if showReplyInput[comment.id]}
+ function create_if_block(ctx) {
let div;
let input;
let t0;
@@ -5879,11 +3338,11 @@ var app = (function () {
let dispose;
function input_input_handler() {
- /*input_input_handler*/ ctx[11].call(input, /*comment*/ ctx[16]);
+ /*input_input_handler*/ ctx[11].call(input, /*comment*/ ctx[14]);
}
function click_handler_1() {
- return /*click_handler_1*/ ctx[12](/*comment*/ ctx[16]);
+ return /*click_handler_1*/ ctx[12](/*comment*/ ctx[14]);
}
const block = {
@@ -5894,15 +3353,15 @@ var app = (function () {
button = element("button");
button.textContent = "Post Reply";
attr_dev(input, "placeholder", "Write a reply...");
- add_location(input, file$1, 120, 24, 4285);
- add_location(button, file$1, 121, 24, 4386);
+ add_location(input, file$1, 124, 24, 4690);
+ add_location(button, file$1, 125, 24, 4791);
attr_dev(div, "class", "reply-input");
- add_location(div, file$1, 119, 20, 4234);
+ add_location(div, file$1, 123, 20, 4639);
},
m: function mount(target, anchor) {
insert_dev(target, div, anchor);
append_dev(div, input);
- set_input_value(input, /*replyText*/ ctx[2][/*comment*/ ctx[16].id]);
+ set_input_value(input, /*replyText*/ ctx[2][/*comment*/ ctx[14].id]);
append_dev(div, t0);
append_dev(div, button);
@@ -5918,8 +3377,8 @@ var app = (function () {
p: function update(new_ctx, dirty) {
ctx = new_ctx;
- if (dirty & /*replyText, flattenedComments*/ 6 && input.value !== /*replyText*/ ctx[2][/*comment*/ ctx[16].id]) {
- set_input_value(input, /*replyText*/ ctx[2][/*comment*/ ctx[16].id]);
+ if (dirty & /*replyText, flattenedComments*/ 6 && input.value !== /*replyText*/ ctx[2][/*comment*/ ctx[14].id]) {
+ set_input_value(input, /*replyText*/ ctx[2][/*comment*/ ctx[14].id]);
}
},
d: function destroy(detaching) {
@@ -5931,20 +3390,20 @@ var app = (function () {
dispatch_dev("SvelteRegisterBlock", {
block,
- id: create_if_block$1.name,
+ id: create_if_block.name,
type: "if",
- source: "(119:16) {#if showReplyInput[comment.id]}",
+ source: "(123:16) {#if showReplyInput[comment.id]}",
ctx
});
return block;
}
- // (115:8) {#each flattenedComments as comment}
+ // (119:8) {#each flattenedComments as comment}
function create_each_block(ctx) {
let div;
let span;
- let t0_value = /*comment*/ ctx[16].title + "";
+ let t0_value = /*comment*/ ctx[14].title + "";
let t0;
let t1;
let button;
@@ -5955,10 +3414,10 @@ var app = (function () {
let dispose;
function click_handler() {
- return /*click_handler*/ ctx[10](/*comment*/ ctx[16]);
+ return /*click_handler*/ ctx[10](/*comment*/ ctx[14]);
}
- let if_block = /*showReplyInput*/ ctx[3][/*comment*/ ctx[16].id] && create_if_block$1(ctx);
+ let if_block = /*showReplyInput*/ ctx[3][/*comment*/ ctx[14].id] && create_if_block(ctx);
const block = {
c: function create() {
@@ -5971,15 +3430,15 @@ var app = (function () {
t3 = space();
if (if_block) if_block.c();
t4 = space();
- add_location(span, file$1, 116, 16, 4048);
- add_location(button, file$1, 117, 16, 4094);
+ add_location(span, file$1, 120, 16, 4453);
+ add_location(button, file$1, 121, 16, 4499);
- attr_dev(div, "class", div_class_value = "" + (null_to_empty(/*comment*/ ctx[16].level === 0
+ attr_dev(div, "class", div_class_value = "" + (null_to_empty(/*comment*/ ctx[14].level === 0
? 'top-level-comment'
: 'comment') + " svelte-bsj1sx"));
- set_style(div, "margin-left", /*comment*/ ctx[16].level * 20 + "px");
- add_location(div, file$1, 115, 12, 3918);
+ set_style(div, "margin-left", /*comment*/ ctx[14].level * 20 + "px");
+ add_location(div, file$1, 119, 12, 4323);
},
m: function mount(target, anchor) {
insert_dev(target, div, anchor);
@@ -5998,13 +3457,13 @@ var app = (function () {
},
p: function update(new_ctx, dirty) {
ctx = new_ctx;
- if (dirty & /*flattenedComments*/ 2 && t0_value !== (t0_value = /*comment*/ ctx[16].title + "")) set_data_dev(t0, t0_value);
+ if (dirty & /*flattenedComments*/ 2 && t0_value !== (t0_value = /*comment*/ ctx[14].title + "")) set_data_dev(t0, t0_value);
- if (/*showReplyInput*/ ctx[3][/*comment*/ ctx[16].id]) {
+ if (/*showReplyInput*/ ctx[3][/*comment*/ ctx[14].id]) {
if (if_block) {
if_block.p(ctx, dirty);
} else {
- if_block = create_if_block$1(ctx);
+ if_block = create_if_block(ctx);
if_block.c();
if_block.m(div, t4);
}
@@ -6013,14 +3472,14 @@ var app = (function () {
if_block = null;
}
- if (dirty & /*flattenedComments*/ 2 && div_class_value !== (div_class_value = "" + (null_to_empty(/*comment*/ ctx[16].level === 0
+ if (dirty & /*flattenedComments*/ 2 && div_class_value !== (div_class_value = "" + (null_to_empty(/*comment*/ ctx[14].level === 0
? 'top-level-comment'
: 'comment') + " svelte-bsj1sx"))) {
attr_dev(div, "class", div_class_value);
}
if (dirty & /*flattenedComments*/ 2) {
- set_style(div, "margin-left", /*comment*/ ctx[16].level * 20 + "px");
+ set_style(div, "margin-left", /*comment*/ ctx[14].level * 20 + "px");
}
},
d: function destroy(detaching) {
@@ -6035,7 +3494,7 @@ var app = (function () {
block,
id: create_each_block.name,
type: "each",
- source: "(115:8) {#each flattenedComments as comment}",
+ source: "(119:8) {#each flattenedComments as comment}",
ctx
});
@@ -6045,18 +3504,20 @@ var app = (function () {
function create_fragment$1(ctx) {
let h1;
let t1;
+ let h4;
+ let t3;
let div2;
let div0;
let button0;
- let t3;
+ let t5;
let input0;
- let t4;
+ let t6;
let input1;
- let t5;
- let button1;
let t7;
+ let button1;
+ let t9;
let br;
- let t8;
+ let t10;
let div1;
let mounted;
let dispose;
@@ -6073,41 +3534,45 @@ var app = (function () {
h1 = element("h1");
h1.textContent = "Reddit based Nested Comments Idea for LMM responses that need further branching responses";
t1 = space();
+ h4 = element("h4");
+ h4.textContent = "Inspired by Vijay Bhati - https://github.com/vj98/Frontend-Machine-Coding/tree/main/nested-comments https://youtu.be/a4OA7QbHEho?list=PLBygUld3s6x8sI_H8UYROVMIVcuxUre1e";
+ t3 = space();
div2 = element("div");
div0 = element("div");
button0 = element("button");
button0.textContent = "Export Comments";
- t3 = space();
+ t5 = text("\r\n | Import Exported Comments \r\n ");
input0 = element("input");
- t4 = text("\r\n | \r\n ");
+ t6 = text("\r\n | \r\n ");
input1 = element("input");
- t5 = space();
+ t7 = space();
button1 = element("button");
button1.textContent = "Post Comment";
- t7 = space();
+ t9 = space();
br = element("br");
- t8 = space();
+ t10 = space();
div1 = element("div");
for (let i = 0; i < each_blocks.length; i += 1) {
each_blocks[i].c();
}
- add_location(h1, file$1, 102, 0, 3326);
- add_location(button0, file$1, 105, 8, 3529);
+ add_location(h1, file$1, 104, 0, 3512);
+ add_location(h4, file$1, 105, 0, 3614);
+ add_location(button0, file$1, 108, 8, 3897);
attr_dev(input0, "type", "file");
- add_location(input0, file$1, 106, 8, 3595);
+ add_location(input0, file$1, 110, 8, 4000);
attr_dev(input1, "placeholder", "Add a comment...");
- add_location(input1, file$1, 108, 8, 3667);
- add_location(button1, file$1, 109, 8, 3741);
- add_location(div0, file$1, 104, 4, 3514);
- add_location(br, file$1, 112, 4, 3820);
+ add_location(input1, file$1, 112, 8, 4072);
+ add_location(button1, file$1, 113, 8, 4146);
+ add_location(div0, file$1, 107, 4, 3882);
+ add_location(br, file$1, 116, 4, 4225);
attr_dev(div1, "id", "comment-container");
- add_location(div1, file$1, 113, 4, 3830);
+ add_location(div1, file$1, 117, 4, 4235);
attr_dev(div2, "class", "component-containter svelte-bsj1sx");
set_style(div2, "border", "1px solid black");
set_style(div2, "padding", "4px");
- add_location(div2, file$1, 103, 0, 3427);
+ add_location(div2, file$1, 106, 0, 3795);
},
l: function claim(nodes) {
throw new Error("options.hydrate only works if the component was compiled with the `hydratable: true` option");
@@ -6115,19 +3580,21 @@ var app = (function () {
m: function mount(target, anchor) {
insert_dev(target, h1, anchor);
insert_dev(target, t1, anchor);
+ insert_dev(target, h4, anchor);
+ insert_dev(target, t3, anchor);
insert_dev(target, div2, anchor);
append_dev(div2, div0);
append_dev(div0, button0);
- append_dev(div0, t3);
+ append_dev(div0, t5);
append_dev(div0, input0);
- append_dev(div0, t4);
+ append_dev(div0, t6);
append_dev(div0, input1);
set_input_value(input1, /*newComment*/ ctx[0]);
- append_dev(div0, t5);
+ append_dev(div0, t7);
append_dev(div0, button1);
- append_dev(div2, t7);
+ append_dev(div2, t9);
append_dev(div2, br);
- append_dev(div2, t8);
+ append_dev(div2, t10);
append_dev(div2, div1);
for (let i = 0; i < each_blocks.length; i += 1) {
@@ -6181,6 +3648,8 @@ var app = (function () {
d: function destroy(detaching) {
if (detaching) detach_dev(h1);
if (detaching) detach_dev(t1);
+ if (detaching) detach_dev(h4);
+ if (detaching) detach_dev(t3);
if (detaching) detach_dev(div2);
destroy_each(each_blocks, detaching);
mounted = false;
@@ -6224,8 +3693,6 @@ var app = (function () {
let flattenedComments = [];
let replyText = {};
let showReplyInput = {};
- let editingCommentId = null;
- let editedText = '';
const addComment = () => {
comments = [
@@ -6330,8 +3797,6 @@ var app = (function () {
flattenedComments,
replyText,
showReplyInput,
- editingCommentId,
- editedText,
flattenStructure,
addComment,
addReply,
@@ -6346,8 +3811,6 @@ var app = (function () {
if ('flattenedComments' in $$props) $$invalidate(1, flattenedComments = $$props.flattenedComments);
if ('replyText' in $$props) $$invalidate(2, replyText = $$props.replyText);
if ('showReplyInput' in $$props) $$invalidate(3, showReplyInput = $$props.showReplyInput);
- if ('editingCommentId' in $$props) editingCommentId = $$props.editingCommentId;
- if ('editedText' in $$props) editedText = $$props.editedText;
};
if ($$props && "$$inject" in $$props) {
@@ -6388,60 +3851,6 @@ var app = (function () {
/* src\App.svelte generated by Svelte v3.59.2 */
const file = "src\\App.svelte";
- // (29:1) {#if showModal}
- function create_if_block(ctx) {
- let modal;
- let current;
-
- modal = new SimpleModal({
- props: {
- isOpen: /*showModal*/ ctx[1],
- onClose: /*func*/ ctx[3],
- 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];
- if (dirty & /*showModal*/ 2) modal_changes.onClose = /*func*/ ctx[3];
- 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: "(29:1) {#if showModal}",
- ctx
- });
-
- return block;
- }
-
function create_fragment(ctx) {
let main;
let h10;
@@ -6454,25 +3863,18 @@ var app = (function () {
let a;
let t6;
let t7;
- let button;
- let t9;
- let t10;
let h11;
- let t12;
- let nestedcommentstestfromreact;
- let t13;
+ let t9;
+ let h3;
+ let t11;
let nestedcommentssvelte;
- let t14;
+ let t12;
let myyoutube;
- let t15;
+ let t13;
let h12;
- let t17;
+ let t15;
let dotgame;
let current;
- let mounted;
- let dispose;
- let if_block = /*showModal*/ ctx[1] && create_if_block(ctx);
- nestedcommentstestfromreact = new NestedCommentsTestfromReact({ $$inline: true });
nestedcommentssvelte = new RecursiveNestedCommentsElement({ $$inline: true });
myyoutube = new YoutubeIframeAPICustomInterface({ $$inline: true });
dotgame = new MovingDotSpacePortfromReact({ $$inline: true });
@@ -6491,36 +3893,32 @@ var app = (function () {
a.textContent = "Svelte tutorial";
t6 = text(" to learn how to build Svelte apps.");
t7 = space();
- button = element("button");
- button.textContent = "Open Modal - Fix break first modal close";
- t9 = space();
- if (if_block) if_block.c();
- t10 = space();
h11 = element("h1");
- h11.textContent = "My new component tests - ideas for custom components once I understand them";
- t12 = space();
- create_component(nestedcommentstestfromreact.$$.fragment);
- t13 = space();
+ h11.textContent = "Brainstorm for Educational Interfaces to add LLM and other models into";
+ t9 = space();
+ h3 = element("h3");
+ h3.textContent = "(Through Gradio and Custom Components)";
+ t11 = space();
create_component(nestedcommentssvelte.$$.fragment);
- t14 = space();
+ t12 = space();
create_component(myyoutube.$$.fragment);
- t15 = space();
+ t13 = space();
h12 = element("h1");
- h12.textContent = "The End Goal is A themeable game using just one LLM prompt";
- t17 = space();
+ h12.textContent = "Themeable Game Brainstorm - Image + Lists";
+ t15 = space();
create_component(dotgame.$$.fragment);
attr_dev(h10, "class", "svelte-1tky8bj");
- add_location(h10, file, 24, 1, 659);
+ add_location(h10, file, 21, 1, 467);
attr_dev(a, "href", "https://svelte.dev/tutorial");
- add_location(a, file, 25, 14, 696);
- add_location(p, file, 25, 1, 683);
- add_location(button, file, 27, 1, 795);
+ add_location(a, file, 22, 14, 504);
+ add_location(p, file, 22, 1, 491);
attr_dev(h11, "class", "svelte-1tky8bj");
- add_location(h11, file, 32, 1, 1018);
+ add_location(h11, file, 24, 1, 603);
+ add_location(h3, file, 25, 1, 686);
attr_dev(h12, "class", "svelte-1tky8bj");
- add_location(h12, file, 42, 1, 1295);
+ add_location(h12, file, 32, 1, 830);
attr_dev(main, "class", "svelte-1tky8bj");
- add_location(main, file, 22, 0, 650);
+ add_location(main, file, 19, 0, 458);
},
l: function claim(nodes) {
throw new Error("options.hydrate only works if the component was compiled with the `hydratable: true` option");
@@ -6537,66 +3935,30 @@ var app = (function () {
append_dev(p, a);
append_dev(p, t6);
append_dev(main, t7);
- append_dev(main, button);
- append_dev(main, t9);
- if (if_block) if_block.m(main, null);
- append_dev(main, t10);
append_dev(main, h11);
- append_dev(main, t12);
- mount_component(nestedcommentstestfromreact, main, null);
- append_dev(main, t13);
+ append_dev(main, t9);
+ append_dev(main, h3);
+ append_dev(main, t11);
mount_component(nestedcommentssvelte, main, null);
- append_dev(main, t14);
+ append_dev(main, t12);
mount_component(myyoutube, main, null);
- append_dev(main, t15);
+ append_dev(main, t13);
append_dev(main, h12);
- append_dev(main, t17);
+ append_dev(main, t15);
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(t1, /*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, t10);
- }
- } else if (if_block) {
- group_outros();
-
- transition_out(if_block, 1, 1, () => {
- if_block = null;
- });
-
- check_outros();
- }
},
i: function intro(local) {
if (current) return;
- transition_in(if_block);
- transition_in(nestedcommentstestfromreact.$$.fragment, local);
transition_in(nestedcommentssvelte.$$.fragment, local);
transition_in(myyoutube.$$.fragment, local);
transition_in(dotgame.$$.fragment, local);
current = true;
},
o: function outro(local) {
- transition_out(if_block);
- transition_out(nestedcommentstestfromreact.$$.fragment, local);
transition_out(nestedcommentssvelte.$$.fragment, local);
transition_out(myyoutube.$$.fragment, local);
transition_out(dotgame.$$.fragment, local);
@@ -6604,13 +3966,9 @@ var app = (function () {
},
d: function destroy(detaching) {
if (detaching) detach_dev(main);
- if (if_block) if_block.d();
- destroy_component(nestedcommentstestfromreact);
destroy_component(nestedcommentssvelte);
destroy_component(myyoutube);
destroy_component(dotgame);
- mounted = false;
- dispose();
}
};
@@ -6632,11 +3990,11 @@ var app = (function () {
let showModal = false;
function openModal() {
- $$invalidate(1, showModal = true);
+ showModal = true;
}
function closeModal() {
- $$invalidate(1, showModal = false);
+ showModal = false;
}
$$self.$$.on_mount.push(function () {
@@ -6651,8 +4009,6 @@ var app = (function () {
if (!~writable_props.indexOf(key) && key.slice(0, 2) !== '$$' && key !== 'slot') console.warn(`<App> was created with unknown prop '${key}'`);
});
- const func = () => $$invalidate(1, showModal = false);
-
$$self.$$set = $$props => {
if ('name' in $$props) $$invalidate(0, name = $$props.name);
};
@@ -6660,10 +4016,7 @@ var app = (function () {
$$self.$capture_state = () => ({
name,
VideoGradioComponentBrainstorming,
- NestedCommentsTestfromReact,
DotGame: MovingDotSpacePortfromReact,
- YoutubeBookmarker: YoutubeBookmarksfromReact,
- Modal: SimpleModal,
MyYoutube: YoutubeIframeAPICustomInterface,
NestedCommentsSvelte: RecursiveNestedCommentsElement,
showModal,
@@ -6673,14 +4026,14 @@ var app = (function () {
$$self.$inject_state = $$props => {
if ('name' in $$props) $$invalidate(0, name = $$props.name);
- if ('showModal' in $$props) $$invalidate(1, showModal = $$props.showModal);
+ if ('showModal' in $$props) showModal = $$props.showModal;
};
if ($$props && "$$inject" in $$props) {
$$self.$inject_state($$props.$$inject);
}
- return [name, showModal, openModal, func];
+ return [name];
}
class App extends SvelteComponentDev {