diff --git "a/bundle.js" "b/bundle.js"
--- "a/bundle.js"
+++ "b/bundle.js"
@@ -98,6 +98,9 @@ var app = (function () {
         else if (node.getAttribute(attribute) !== value)
             node.setAttribute(attribute, value);
     }
+    function to_number(value) {
+        return value === '' ? null : +value;
+    }
     function children(element) {
         return Array.from(element.childNodes);
     }
@@ -660,17 +663,17 @@ var app = (function () {
 
     /* src\VideoGradioComponentBrainstorming.svelte generated by Svelte v3.59.2 */
 
-    const { console: console_1$5 } = globals;
-    const file$9 = "src\\VideoGradioComponentBrainstorming.svelte";
+    const { console: console_1$6 } = globals;
+    const file$b = "src\\VideoGradioComponentBrainstorming.svelte";
 
-    function get_each_context$5(ctx, list, i) {
+    function get_each_context$6(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$6(ctx) {
     	let option;
     	let t_value = /*option*/ ctx[15] + "";
     	let t;
@@ -681,7 +684,7 @@ var app = (function () {
     			t = text(t_value);
     			option.__value = /*option*/ ctx[15];
     			option.value = option.__value;
-    			add_location(option, file$9, 85, 6, 2561);
+    			add_location(option, file$b, 85, 6, 2561);
     		},
     		m: function mount(target, anchor) {
     			insert_dev(target, option, anchor);
@@ -695,7 +698,7 @@ var app = (function () {
 
     	dispatch_dev("SvelteRegisterBlock", {
     		block,
-    		id: create_each_block$5.name,
+    		id: create_each_block$6.name,
     		type: "each",
     		source: "(85:4) {#each kitchenOptions as option}",
     		ctx
@@ -704,7 +707,7 @@ var app = (function () {
     	return block;
     }
 
-    function create_fragment$9(ctx) {
+    function create_fragment$b(ctx) {
     	let h1;
     	let t1;
     	let div1;
@@ -731,7 +734,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$6(get_each_context$6(ctx, each_value, i));
     	}
 
     	const block = {
@@ -761,34 +764,34 @@ var app = (function () {
     				each_blocks[i].c();
     			}
 
-    			add_location(h1, file$9, 66, 0, 1800);
+    			add_location(h1, file$b, 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$9, 72, 4, 2006);
+    			add_location(track, file$b, 72, 4, 2006);
     			attr_dev(video, "id", "videoCanvas");
     			video.autoplay = true;
     			attr_dev(video, "class", "svelte-ufd3fo");
-    			add_location(video, file$9, 70, 2, 1965);
+    			add_location(video, file$b, 70, 2, 1965);
     			attr_dev(div0, "id", "overlayText");
     			attr_dev(div0, "class", "svelte-ufd3fo");
-    			add_location(div0, file$9, 74, 2, 2111);
+    			add_location(div0, file$b, 74, 2, 2111);
     			attr_dev(div1, "id", "videoContainer");
     			attr_dev(div1, "class", "svelte-ufd3fo");
-    			add_location(div1, file$9, 68, 0, 1911);
+    			add_location(div1, file$b, 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$9, 77, 0, 2186);
+    			add_location(canvas_1, file$b, 77, 0, 2186);
     			attr_dev(input, "type", "text");
-    			add_location(input, file$9, 78, 0, 2294);
-    			add_location(button, file$9, 82, 2, 2429);
+    			add_location(input, file$b, 78, 0, 2294);
+    			add_location(button, file$b, 82, 2, 2429);
     			if (/*selectedOption*/ ctx[0] === void 0) add_render_callback(() => /*select_change_handler*/ ctx[9].call(select));
-    			add_location(select, file$9, 83, 2, 2479);
+    			add_location(select, file$b, 83, 2, 2479);
     			attr_dev(div2, "id", "frameForButtons");
-    			add_location(div2, file$9, 81, 0, 2399);
+    			add_location(div2, file$b, 81, 0, 2399);
     		},
     		l: function claim(nodes) {
     			throw new Error("options.hydrate only works if the component was compiled with the `hydratable: true` option");
@@ -847,12 +850,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$6(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$6(child_ctx);
     						each_blocks[i].c();
     						each_blocks[i].m(select, null);
     					}
@@ -890,7 +893,7 @@ var app = (function () {
 
     	dispatch_dev("SvelteRegisterBlock", {
     		block,
-    		id: create_fragment$9.name,
+    		id: create_fragment$b.name,
     		type: "component",
     		source: "",
     		ctx
@@ -903,7 +906,7 @@ var app = (function () {
     	
     } // Logic for 'Test OCR' button
 
-    function instance$9($$self, $$props, $$invalidate) {
+    function instance$b($$self, $$props, $$invalidate) {
     	let { $$slots: slots = {}, $$scope } = $$props;
     	validate_slots('VideoGradioComponentBrainstorming', slots, []);
     	let selectedOption = 'Stove - lu'; // default value
@@ -965,7 +968,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$5.warn(`<VideoGradioComponentBrainstorming> was created with unknown prop '${key}'`);
+    		if (!~writable_props.indexOf(key) && key.slice(0, 2) !== '$$' && key !== 'slot') console_1$6.warn(`<VideoGradioComponentBrainstorming> was created with unknown prop '${key}'`);
     	});
 
     	function canvas_1_binding($$value) {
@@ -1036,13 +1039,13 @@ var app = (function () {
     class VideoGradioComponentBrainstorming extends SvelteComponentDev {
     	constructor(options) {
     		super(options);
-    		init(this, options, instance$9, create_fragment$9, safe_not_equal, {});
+    		init(this, options, instance$b, create_fragment$b, safe_not_equal, {});
 
     		dispatch_dev("SvelteRegisterComponent", {
     			component: this,
     			tagName: "VideoGradioComponentBrainstorming",
     			options,
-    			id: create_fragment$9.name
+    			id: create_fragment$b.name
     		});
     	}
     }
@@ -1096,9 +1099,9 @@ var app = (function () {
     }
 
     /* src\MovingDotPortfromReact.svelte generated by Svelte v3.59.2 */
-    const file$8 = "src\\MovingDotPortfromReact.svelte";
+    const file$a = "src\\MovingDotPortfromReact.svelte";
 
-    function create_fragment$8(ctx) {
+    function create_fragment$a(ctx) {
     	let button;
 
     	const block = {
@@ -1108,7 +1111,7 @@ var app = (function () {
     			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$8, 48, 0, 1573);
+    			add_location(button, file$a, 48, 0, 1573);
     		},
     		l: function claim(nodes) {
     			throw new Error("options.hydrate only works if the component was compiled with the `hydratable: true` option");
@@ -1136,7 +1139,7 @@ var app = (function () {
 
     	dispatch_dev("SvelteRegisterBlock", {
     		block,
-    		id: create_fragment$8.name,
+    		id: create_fragment$a.name,
     		type: "component",
     		source: "",
     		ctx
@@ -1147,7 +1150,7 @@ var app = (function () {
 
     const step = 10;
 
-    function instance$8($$self, $$props, $$invalidate) {
+    function instance$a($$self, $$props, $$invalidate) {
     	let { $$slots: slots = {}, $$scope } = $$props;
     	validate_slots('MovingDotPortfromReact', slots, []);
     	let { position = { x: 0, y: 0 } } = $$props;
@@ -1252,13 +1255,13 @@ var app = (function () {
     class MovingDotPortfromReact extends SvelteComponentDev {
     	constructor(options) {
     		super(options);
-    		init(this, options, instance$8, create_fragment$8, safe_not_equal, { position: 0, boundaries: 2, focusDot: 3 });
+    		init(this, options, instance$a, create_fragment$a, safe_not_equal, { position: 0, boundaries: 2, focusDot: 3 });
 
     		dispatch_dev("SvelteRegisterComponent", {
     			component: this,
     			tagName: "MovingDotPortfromReact",
     			options,
-    			id: create_fragment$8.name
+    			id: create_fragment$a.name
     		});
     	}
 
@@ -1289,9 +1292,9 @@ var app = (function () {
 
     /* src\MovingDotTargetPortfromReact.svelte generated by Svelte v3.59.2 */
 
-    const file$7 = "src\\MovingDotTargetPortfromReact.svelte";
+    const file$9 = "src\\MovingDotTargetPortfromReact.svelte";
 
-    function create_fragment$7(ctx) {
+    function create_fragment$9(ctx) {
     	let div;
 
     	const block = {
@@ -1300,7 +1303,7 @@ var app = (function () {
     			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$7, 4, 0, 49);
+    			add_location(div, file$9, 4, 0, 49);
     		},
     		l: function claim(nodes) {
     			throw new Error("options.hydrate only works if the component was compiled with the `hydratable: true` option");
@@ -1326,7 +1329,7 @@ var app = (function () {
 
     	dispatch_dev("SvelteRegisterBlock", {
     		block,
-    		id: create_fragment$7.name,
+    		id: create_fragment$9.name,
     		type: "component",
     		source: "",
     		ctx
@@ -1335,7 +1338,7 @@ var app = (function () {
     	return block;
     }
 
-    function instance$7($$self, $$props, $$invalidate) {
+    function instance$9($$self, $$props, $$invalidate) {
     	let { $$slots: slots = {}, $$scope } = $$props;
     	validate_slots('MovingDotTargetPortfromReact', slots, []);
     	let { position } = $$props;
@@ -1372,13 +1375,13 @@ var app = (function () {
     class MovingDotTargetPortfromReact extends SvelteComponentDev {
     	constructor(options) {
     		super(options);
-    		init(this, options, instance$7, create_fragment$7, safe_not_equal, { position: 0 });
+    		init(this, options, instance$9, create_fragment$9, safe_not_equal, { position: 0 });
 
     		dispatch_dev("SvelteRegisterComponent", {
     			component: this,
     			tagName: "MovingDotTargetPortfromReact",
     			options,
-    			id: create_fragment$7.name
+    			id: create_fragment$9.name
     		});
     	}
 
@@ -1391,19 +1394,19 @@ var app = (function () {
     	}
     }
 
-    /* src\SimpleModal.svelte generated by Svelte v3.59.2 */
+    /* src\MovingDotSpaceSimpleModal.svelte generated by Svelte v3.59.2 */
 
-    const { console: console_1$4 } = globals;
-    const file$6 = "src\\SimpleModal.svelte";
+    const { console: console_1$5 } = globals;
+    const file$8 = "src\\MovingDotSpaceSimpleModal.svelte";
 
-    function get_each_context$4(ctx, list, i) {
+    function get_each_context$5(ctx, list, i) {
     	const child_ctx = ctx.slice();
     	child_ctx[8] = list[i];
     	return child_ctx;
     }
 
-    // (22:0) {#if isOpen}
-    function create_if_block$3(ctx) {
+    // (32:0) {#if isOpen}
+    function create_if_block$4(ctx) {
     	let div3;
     	let div2;
     	let div0;
@@ -1423,7 +1426,7 @@ var app = (function () {
     	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));
+    		each_blocks[i] = create_each_block$5(get_each_context$5(ctx, each_value, i));
     	}
 
     	const block = {
@@ -1446,18 +1449,18 @@ var app = (function () {
     				each_blocks[i].c();
     			}
 
-    			add_location(h2, file$6, 25, 8, 651);
-    			add_location(button, file$6, 26, 8, 677);
+    			add_location(h2, file$8, 35, 8, 882);
+    			add_location(button, file$8, 36, 8, 908);
     			attr_dev(div0, "class", "modal-header svelte-m51ous");
-    			add_location(div0, file$6, 24, 6, 615);
+    			add_location(div0, file$8, 34, 6, 846);
     			attr_dev(ul, "class", "modal-items");
-    			add_location(ul, file$6, 30, 8, 801);
+    			add_location(ul, file$8, 40, 8, 1032);
     			attr_dev(div1, "class", "modal-content svelte-m51ous");
-    			add_location(div1, file$6, 28, 6, 745);
+    			add_location(div1, file$8, 38, 6, 976);
     			attr_dev(div2, "class", "modal svelte-m51ous");
-    			add_location(div2, file$6, 23, 4, 588);
+    			add_location(div2, file$8, 33, 4, 819);
     			attr_dev(div3, "class", "modal-overlay svelte-m51ous");
-    			add_location(div3, file$6, 22, 2, 555);
+    			add_location(div3, file$8, 32, 2, 786);
     		},
     		m: function mount(target, anchor) {
     			insert_dev(target, div3, anchor);
@@ -1494,12 +1497,12 @@ var app = (function () {
     				let i;
 
     				for (i = 0; i < each_value.length; i += 1) {
-    					const child_ctx = get_each_context$4(ctx, each_value, i);
+    					const child_ctx = get_each_context$5(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] = create_each_block$5(child_ctx);
     						each_blocks[i].c();
     						each_blocks[i].m(ul, null);
     					}
@@ -1522,17 +1525,17 @@ var app = (function () {
 
     	dispatch_dev("SvelteRegisterBlock", {
     		block,
-    		id: create_if_block$3.name,
+    		id: create_if_block$4.name,
     		type: "if",
-    		source: "(22:0) {#if isOpen}",
+    		source: "(32:0) {#if isOpen}",
     		ctx
     	});
 
     	return block;
     }
 
-    // (32:10) {#each items as item}
-    function create_each_block$4(ctx) {
+    // (42:10) {#each items as item}
+    function create_each_block$5(ctx) {
     	let button;
     	let t_value = /*item*/ ctx[8].label + "";
     	let t;
@@ -1547,7 +1550,7 @@ var app = (function () {
     		c: function create() {
     			button = element("button");
     			t = text(t_value);
-    			add_location(button, file$6, 32, 12, 872);
+    			add_location(button, file$8, 42, 12, 1103);
     		},
     		m: function mount(target, anchor) {
     			insert_dev(target, button, anchor);
@@ -1571,18 +1574,18 @@ var app = (function () {
 
     	dispatch_dev("SvelteRegisterBlock", {
     		block,
-    		id: create_each_block$4.name,
+    		id: create_each_block$5.name,
     		type: "each",
-    		source: "(32:10) {#each items as item}",
+    		source: "(42:10) {#each items as item}",
     		ctx
     	});
 
     	return block;
     }
 
-    function create_fragment$6(ctx) {
+    function create_fragment$8(ctx) {
     	let if_block_anchor;
-    	let if_block = /*isOpen*/ ctx[0] && create_if_block$3(ctx);
+    	let if_block = /*isOpen*/ ctx[0] && create_if_block$4(ctx);
 
     	const block = {
     		c: function create() {
@@ -1601,7 +1604,7 @@ var app = (function () {
     				if (if_block) {
     					if_block.p(ctx, dirty);
     				} else {
-    					if_block = create_if_block$3(ctx);
+    					if_block = create_if_block$4(ctx);
     					if_block.c();
     					if_block.m(if_block_anchor.parentNode, if_block_anchor);
     				}
@@ -1620,7 +1623,7 @@ var app = (function () {
 
     	dispatch_dev("SvelteRegisterBlock", {
     		block,
-    		id: create_fragment$6.name,
+    		id: create_fragment$8.name,
     		type: "component",
     		source: "",
     		ctx
@@ -1629,9 +1632,9 @@ var app = (function () {
     	return block;
     }
 
-    function instance$6($$self, $$props, $$invalidate) {
+    function instance$8($$self, $$props, $$invalidate) {
     	let { $$slots: slots = {}, $$scope } = $$props;
-    	validate_slots('SimpleModal', slots, []);
+    	validate_slots('MovingDotSpaceSimpleModal', slots, []);
     	let { isOpen = false } = $$props;
     	let { title = '' } = $$props;
     	let { content = '' } = $$props;
@@ -1649,18 +1652,31 @@ var app = (function () {
     		console.log("Item clicked:", item);
 
     		closeModal();
+
+    		switch (item.action) {
+    			case "revealCaveLocation":
+    				{
+    					alert("The cave is revealed");
+    					break;
+    				}
+    			case "giveHistory":
+    				{
+    					alert("The History is revealed");
+    					break;
+    				}
+    		}
     	}
 
     	$$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'");
+    			console_1$5.warn("<MovingDotSpaceSimpleModal> 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}'`);
+    		if (!~writable_props.indexOf(key) && key.slice(0, 2) !== '$$' && key !== 'slot') console_1$5.warn(`<MovingDotSpaceSimpleModal> was created with unknown prop '${key}'`);
     	});
 
     	const click_handler = item => handleItemClick(item);
@@ -1707,11 +1723,11 @@ var app = (function () {
     	];
     }
 
-    class SimpleModal extends SvelteComponentDev {
+    class MovingDotSpaceSimpleModal extends SvelteComponentDev {
     	constructor(options) {
     		super(options);
 
-    		init(this, options, instance$6, create_fragment$6, safe_not_equal, {
+    		init(this, options, instance$8, create_fragment$8, safe_not_equal, {
     			isOpen: 0,
     			title: 1,
     			content: 2,
@@ -1721,385 +1737,444 @@ var app = (function () {
 
     		dispatch_dev("SvelteRegisterComponent", {
     			component: this,
-    			tagName: "SimpleModal",
+    			tagName: "MovingDotSpaceSimpleModal",
     			options,
-    			id: create_fragment$6.name
+    			id: create_fragment$8.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/>'");
+    		throw new Error("<MovingDotSpaceSimpleModal>: 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/>'");
+    		throw new Error("<MovingDotSpaceSimpleModal>: 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/>'");
+    		throw new Error("<MovingDotSpaceSimpleModal>: 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/>'");
+    		throw new Error("<MovingDotSpaceSimpleModal>: 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/>'");
+    		throw new Error("<MovingDotSpaceSimpleModal>: 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/>'");
+    		throw new Error("<MovingDotSpaceSimpleModal>: 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/>'");
+    		throw new Error("<MovingDotSpaceSimpleModal>: 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/>'");
+    		throw new Error("<MovingDotSpaceSimpleModal>: 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/>'");
+    		throw new Error("<MovingDotSpaceSimpleModal>: 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/>'");
+    		throw new Error("<MovingDotSpaceSimpleModal>: 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 health = writable(100);
+    const mana = writable(50);
+    const strength = writable(10);
+    const agility = writable(10);
+    const intelligence = writable(10);
+    const charisma = writable(10);
+    const luck = writable(10);
+
+    const inventory = writable([
+        // Sample inventory items
+        { type: "weapon", name: "Sword", description: "A sharp blade." },
+        { type: "armor", name: "Shield", description: "Protects against attacks." },
+        { type: "consumable", name: "Health Potion", description: "Restores health." },
+        // Add more items as needed
+    ]);
+
+    const skills = writable([
+        // Sample skills
+        { branch: "Combat", name: "Basic Attack", learned: false },
+        { branch: "Magic", name: "Fireball", learned: false },
+        { branch: "Stealth", name: "Sneak", learned: false },
+        // Add more skills as needed
+    ]);
+
+    /* src\MovingDotStatStoreandDisplay.svelte generated by Svelte v3.59.2 */
+
+    const file$7 = "src\\MovingDotStatStoreandDisplay.svelte";
 
-    const { console: console_1$3 } = globals;
-    const file$5 = "src\\MovingDotSpacePortfromReact.svelte";
+    function get_each_context$4(ctx, list, i) {
+    	const child_ctx = ctx.slice();
+    	child_ctx[11] = list[i];
+    	return child_ctx;
+    }
 
-    function get_each_context$3(ctx, list, i) {
+    function get_each_context_1(ctx, list, i) {
     	const child_ctx = ctx.slice();
-    	child_ctx[19] = list[i];
+    	child_ctx[14] = list[i];
     	return child_ctx;
     }
 
-    // (155:4) {#each $targets as target (target.name)}
-    function create_each_block$3(key_1, ctx) {
-    	let first;
-    	let target;
+    // (23:8) {#each $inventory as item}
+    function create_each_block_1(ctx) {
+    	let li;
+    	let t0_value = /*item*/ ctx[14].name + "";
     	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
-    		});
+    	let t2_value = /*item*/ ctx[14].description + "";
+    	let t2;
 
     	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$5, 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");
-    			}
+    			li = element("li");
+    			t0 = text(t0_value);
+    			t1 = text(": ");
+    			t2 = text(t2_value);
+    			add_location(li, file$7, 23, 10, 705);
     		},
-    		i: function intro(local) {
-    			if (current) return;
-    			transition_in(target.$$.fragment, local);
-    			current = true;
+    		m: function mount(target, anchor) {
+    			insert_dev(target, li, anchor);
+    			append_dev(li, t0);
+    			append_dev(li, t1);
+    			append_dev(li, t2);
     		},
-    		o: function outro(local) {
-    			transition_out(target.$$.fragment, local);
-    			current = false;
+    		p: function update(ctx, dirty) {
+    			if (dirty & /*$inventory*/ 128 && t0_value !== (t0_value = /*item*/ ctx[14].name + "")) set_data_dev(t0, t0_value);
+    			if (dirty & /*$inventory*/ 128 && t2_value !== (t2_value = /*item*/ ctx[14].description + "")) set_data_dev(t2, t2_value);
     		},
     		d: function destroy(detaching) {
-    			if (detaching) detach_dev(first);
-    			destroy_component(target, detaching);
-    			if (detaching) detach_dev(t0);
-    			if (detaching) detach_dev(span);
+    			if (detaching) detach_dev(li);
     		}
     	};
 
     	dispatch_dev("SvelteRegisterBlock", {
     		block,
-    		id: create_each_block$3.name,
+    		id: create_each_block_1.name,
     		type: "each",
-    		source: "(155:4) {#each $targets as target (target.name)}",
+    		source: "(23:8) {#each $inventory as item}",
     		ctx
     	});
 
     	return block;
     }
 
-    // (161:4) {#if isModalOpen}
-    function create_if_block$2(ctx) {
-    	let modal;
-    	let current;
+    // (33:6) {#each $skills as skill}
+    function create_each_block$4(ctx) {
+    	let button;
+    	let t0_value = /*skill*/ ctx[11].name + "";
+    	let t0;
+    	let t1;
+    	let t2_value = /*skill*/ ctx[11].branch + "";
+    	let t2;
+    	let t3;
+    	let t4_value = (/*skill*/ ctx[11].learned ? 'Yes' : 'No') + "";
+    	let t4;
+    	let t5;
+    	let mounted;
+    	let dispose;
 
-    	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
-    		});
+    	function click_handler() {
+    		return /*click_handler*/ ctx[10](/*skill*/ ctx[11]);
+    	}
 
     	const block = {
     		c: function create() {
-    			create_component(modal.$$.fragment);
+    			button = element("button");
+    			t0 = text(t0_value);
+    			t1 = text(" - ");
+    			t2 = text(t2_value);
+    			t3 = text(" - Learned: ");
+    			t4 = text(t4_value);
+    			t5 = space();
+    			attr_dev(button, "class", "skill");
+    			add_location(button, file$7, 33, 8, 932);
     		},
     		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;
+    			insert_dev(target, button, anchor);
+    			append_dev(button, t0);
+    			append_dev(button, t1);
+    			append_dev(button, t2);
+    			append_dev(button, t3);
+    			append_dev(button, t4);
+    			append_dev(button, t5);
+
+    			if (!mounted) {
+    				dispose = listen_dev(button, "click", click_handler, false, false, false, false);
+    				mounted = true;
+    			}
     		},
-    		o: function outro(local) {
-    			transition_out(modal.$$.fragment, local);
-    			current = false;
+    		p: function update(new_ctx, dirty) {
+    			ctx = new_ctx;
+    			if (dirty & /*$skills*/ 256 && t0_value !== (t0_value = /*skill*/ ctx[11].name + "")) set_data_dev(t0, t0_value);
+    			if (dirty & /*$skills*/ 256 && t2_value !== (t2_value = /*skill*/ ctx[11].branch + "")) set_data_dev(t2, t2_value);
+    			if (dirty & /*$skills*/ 256 && t4_value !== (t4_value = (/*skill*/ ctx[11].learned ? 'Yes' : 'No') + "")) set_data_dev(t4, t4_value);
     		},
     		d: function destroy(detaching) {
-    			destroy_component(modal, detaching);
+    			if (detaching) detach_dev(button);
+    			mounted = false;
+    			dispose();
     		}
     	};
 
     	dispatch_dev("SvelteRegisterBlock", {
     		block,
-    		id: create_if_block$2.name,
-    		type: "if",
-    		source: "(161:4) {#if isModalOpen}",
+    		id: create_each_block$4.name,
+    		type: "each",
+    		source: "(33:6) {#each $skills as skill}",
     		ctx
     	});
 
     	return block;
     }
 
-    function create_fragment$5(ctx) {
-    	let div1;
-    	let canvas_1;
-    	let t0;
-    	let movingdot;
+    function create_fragment$7(ctx) {
+    	let div8;
+    	let div3;
+    	let div2;
+    	let h20;
     	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 t8;
+    	let t9;
+    	let t10;
+    	let t11;
+    	let t12;
+    	let t13;
+    	let t14;
+    	let div1;
+    	let t15;
+    	let t16;
+    	let t17;
+    	let div5;
+    	let div4;
+    	let h21;
+    	let t19;
+    	let ul;
+    	let t20;
+    	let div7;
+    	let div6;
+    	let h22;
+    	let t22;
+    	let each_value_1 = /*$inventory*/ ctx[7];
+    	validate_each_argument(each_value_1);
+    	let each_blocks_1 = [];
 
-    	let movingdot_props = {
-    		position: /*$dotPosition*/ ctx[0],
-    		boundaries: /*boundaries*/ ctx[9]
-    	};
+    	for (let i = 0; i < each_value_1.length; i += 1) {
+    		each_blocks_1[i] = create_each_block_1(get_each_context_1(ctx, each_value_1, i));
+    	}
 
-    	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];
+    	let each_value = /*$skills*/ ctx[8];
     	validate_each_argument(each_value);
-    	const get_key = ctx => /*target*/ ctx[19].name;
-    	validate_each_keys(ctx, each_value, get_each_context$3, get_key);
+    	let each_blocks = [];
 
     	for (let i = 0; i < each_value.length; i += 1) {
-    		let child_ctx = get_each_context$3(ctx, each_value, i);
-    		let key = get_key(child_ctx);
-    		each_1_lookup.set(key, each_blocks[i] = create_each_block$3(key, child_ctx));
+    		each_blocks[i] = create_each_block$4(get_each_context$4(ctx, each_value, i));
     	}
 
-    	let if_block = /*isModalOpen*/ ctx[2] && create_if_block$2(ctx);
-
     	const block = {
     		c: function create() {
-    			div1 = element("div");
-    			canvas_1 = element("canvas");
-    			t0 = space();
-    			create_component(movingdot.$$.fragment);
+    			div8 = element("div");
+    			div3 = element("div");
+    			div2 = element("div");
+    			h20 = element("h2");
+    			h20.textContent = "Player Stats";
     			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();
+    			t2 = text("Health: ");
+    			t3 = text(/*$health*/ ctx[0]);
+    			t4 = text(" Mana: ");
+    			t5 = text(/*$mana*/ ctx[1]);
+    			t6 = text(" Strength: ");
+    			t7 = text(/*$strength*/ ctx[2]);
+    			t8 = text(" Agility: ");
+    			t9 = text(/*$agility*/ ctx[3]);
+    			t10 = text(" Intelligence: ");
+    			t11 = text(/*$intelligence*/ ctx[4]);
+    			t12 = text(" Charisma: ");
+    			t13 = text(/*$charisma*/ ctx[5]);
+    			t14 = space();
+    			div1 = element("div");
+    			t15 = text("Luck: ");
+    			t16 = text(/*$luck*/ ctx[6]);
+    			t17 = space();
+    			div5 = element("div");
+    			div4 = element("div");
+    			h21 = element("h2");
+    			h21.textContent = "Inventory";
+    			t19 = space();
+    			ul = element("ul");
+
+    			for (let i = 0; i < each_blocks_1.length; i += 1) {
+    				each_blocks_1[i].c();
+    			}
+
+    			t20 = space();
+    			div7 = element("div");
+    			div6 = element("div");
+    			h22 = element("h2");
+    			h22.textContent = "Skill Tree";
+    			t22 = 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$5, 151, 4, 7167);
-    			attr_dev(div0, "id", "overlayText");
-    			attr_dev(div0, "class", "svelte-c2nwl9");
-    			add_location(div0, file$5, 153, 4, 7425);
-    			attr_dev(div1, "id", "game-container");
-    			attr_dev(div1, "style", /*spaceStyle*/ ctx[13]);
-    			add_location(div1, file$5, 150, 0, 7081);
+    			add_location(h20, file$7, 12, 6, 337);
+    			add_location(div0, file$7, 13, 6, 366);
+    			add_location(div1, file$7, 14, 6, 510);
+    			attr_dev(div2, "class", "stats svelte-10basrm");
+    			add_location(div2, file$7, 11, 4, 310);
+    			attr_dev(div3, "class", "grid-statsitem svelte-10basrm");
+    			add_location(div3, file$7, 10, 2, 276);
+    			add_location(h21, file$7, 20, 6, 627);
+    			add_location(ul, file$7, 21, 6, 653);
+    			attr_dev(div4, "class", "inventory svelte-10basrm");
+    			add_location(div4, file$7, 19, 4, 596);
+    			attr_dev(div5, "class", "grid-statsitem svelte-10basrm");
+    			add_location(div5, file$7, 18, 2, 562);
+    			add_location(h22, file$7, 31, 6, 871);
+    			attr_dev(div6, "class", "skill-tree svelte-10basrm");
+    			add_location(div6, file$7, 30, 4, 839);
+    			attr_dev(div7, "class", "grid-statsitem svelte-10basrm");
+    			add_location(div7, file$7, 29, 2, 805);
+    			attr_dev(div8, "class", "grid-statsContainer svelte-10basrm");
+    			add_location(div8, file$7, 9, 0, 239);
     		},
     		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);
+    			insert_dev(target, div8, anchor);
+    			append_dev(div8, div3);
+    			append_dev(div3, div2);
+    			append_dev(div2, h20);
+    			append_dev(div2, t1);
+    			append_dev(div2, 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(div0, t6);
+    			append_dev(div0, t7);
+    			append_dev(div0, t8);
+    			append_dev(div0, t9);
+    			append_dev(div0, t10);
+    			append_dev(div0, t11);
+    			append_dev(div0, t12);
+    			append_dev(div0, t13);
+    			append_dev(div2, t14);
+    			append_dev(div2, div1);
+    			append_dev(div1, t15);
+    			append_dev(div1, t16);
+    			append_dev(div8, t17);
+    			append_dev(div8, div5);
+    			append_dev(div5, div4);
+    			append_dev(div4, h21);
+    			append_dev(div4, t19);
+    			append_dev(div4, ul);
+
+    			for (let i = 0; i < each_blocks_1.length; i += 1) {
+    				if (each_blocks_1[i]) {
+    					each_blocks_1[i].m(ul, null);
     				}
     			}
 
-    			append_dev(div1, t7);
-    			if (if_block) if_block.m(div1, null);
-    			current = true;
+    			append_dev(div8, t20);
+    			append_dev(div8, div7);
+    			append_dev(div7, div6);
+    			append_dev(div6, h22);
+    			append_dev(div6, t22);
 
-    			if (!mounted) {
-    				dispose = listen_dev(canvas_1, "click", /*handleSpaceClick*/ ctx[10], false, false, false, false);
-    				mounted = true;
+    			for (let i = 0; i < each_blocks.length; i += 1) {
+    				if (each_blocks[i]) {
+    					each_blocks[i].m(div6, null);
+    				}
     			}
     		},
     		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$3, 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$3, t7, get_each_context$3);
-    				check_outros();
-    			}
+    			if (dirty & /*$health*/ 1) set_data_dev(t3, /*$health*/ ctx[0]);
+    			if (dirty & /*$mana*/ 2) set_data_dev(t5, /*$mana*/ ctx[1]);
+    			if (dirty & /*$strength*/ 4) set_data_dev(t7, /*$strength*/ ctx[2]);
+    			if (dirty & /*$agility*/ 8) set_data_dev(t9, /*$agility*/ ctx[3]);
+    			if (dirty & /*$intelligence*/ 16) set_data_dev(t11, /*$intelligence*/ ctx[4]);
+    			if (dirty & /*$charisma*/ 32) set_data_dev(t13, /*$charisma*/ ctx[5]);
+    			if (dirty & /*$luck*/ 64) set_data_dev(t16, /*$luck*/ ctx[6]);
+
+    			if (dirty & /*$inventory*/ 128) {
+    				each_value_1 = /*$inventory*/ ctx[7];
+    				validate_each_argument(each_value_1);
+    				let i;
 
-    			if (/*isModalOpen*/ ctx[2]) {
-    				if (if_block) {
-    					if_block.p(ctx, dirty);
+    				for (i = 0; i < each_value_1.length; i += 1) {
+    					const child_ctx = get_each_context_1(ctx, each_value_1, i);
 
-    					if (dirty & /*isModalOpen*/ 4) {
-    						transition_in(if_block, 1);
+    					if (each_blocks_1[i]) {
+    						each_blocks_1[i].p(child_ctx, dirty);
+    					} else {
+    						each_blocks_1[i] = create_each_block_1(child_ctx);
+    						each_blocks_1[i].c();
+    						each_blocks_1[i].m(ul, null);
     					}
-    				} else {
-    					if_block = create_if_block$2(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;
-    				});
+    				for (; i < each_blocks_1.length; i += 1) {
+    					each_blocks_1[i].d(1);
+    				}
 
-    				check_outros();
+    				each_blocks_1.length = each_value_1.length;
     			}
-    		},
-    		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]);
-    			}
+    			if (dirty & /*toggleSkill, $skills*/ 768) {
+    				each_value = /*$skills*/ ctx[8];
+    				validate_each_argument(each_value);
+    				let i;
 
-    			transition_in(if_block);
-    			current = true;
-    		},
-    		o: function outro(local) {
-    			transition_out(movingdot.$$.fragment, local);
+    				for (i = 0; i < each_value.length; i += 1) {
+    					const child_ctx = get_each_context$4(ctx, each_value, i);
 
-    			for (let i = 0; i < each_blocks.length; i += 1) {
-    				transition_out(each_blocks[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(div6, null);
+    					}
+    				}
 
-    			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 (; i < each_blocks.length; i += 1) {
+    					each_blocks[i].d(1);
+    				}
 
-    			for (let i = 0; i < each_blocks.length; i += 1) {
-    				each_blocks[i].d();
+    				each_blocks.length = each_value.length;
     			}
-
-    			if (if_block) if_block.d();
-    			mounted = false;
-    			dispose();
+    		},
+    		i: noop,
+    		o: noop,
+    		d: function destroy(detaching) {
+    			if (detaching) detach_dev(div8);
+    			destroy_each(each_blocks_1, detaching);
+    			destroy_each(each_blocks, detaching);
     		}
     	};
 
     	dispatch_dev("SvelteRegisterBlock", {
     		block,
-    		id: create_fragment$5.name,
+    		id: create_fragment$7.name,
     		type: "component",
     		source: "",
     		ctx
@@ -2108,688 +2183,1735 @@ var app = (function () {
     	return block;
     }
 
-    function instance$5($$self, $$props, $$invalidate) {
-    	let $dotPosition;
-    	let $targets;
+    function instance$7($$self, $$props, $$invalidate) {
+    	let $health;
+    	let $mana;
+    	let $strength;
+    	let $agility;
+    	let $intelligence;
+    	let $charisma;
+    	let $luck;
+    	let $inventory;
+    	let $skills;
+    	validate_store(health, 'health');
+    	component_subscribe($$self, health, $$value => $$invalidate(0, $health = $$value));
+    	validate_store(mana, 'mana');
+    	component_subscribe($$self, mana, $$value => $$invalidate(1, $mana = $$value));
+    	validate_store(strength, 'strength');
+    	component_subscribe($$self, strength, $$value => $$invalidate(2, $strength = $$value));
+    	validate_store(agility, 'agility');
+    	component_subscribe($$self, agility, $$value => $$invalidate(3, $agility = $$value));
+    	validate_store(intelligence, 'intelligence');
+    	component_subscribe($$self, intelligence, $$value => $$invalidate(4, $intelligence = $$value));
+    	validate_store(charisma, 'charisma');
+    	component_subscribe($$self, charisma, $$value => $$invalidate(5, $charisma = $$value));
+    	validate_store(luck, 'luck');
+    	component_subscribe($$self, luck, $$value => $$invalidate(6, $luck = $$value));
+    	validate_store(inventory, 'inventory');
+    	component_subscribe($$self, inventory, $$value => $$invalidate(7, $inventory = $$value));
+    	validate_store(skills, 'skills');
+    	component_subscribe($$self, skills, $$value => $$invalidate(8, $skills = $$value));
     	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));
+    	validate_slots('MovingDotStatStoreandDisplay', slots, []);
 
-    	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" },
+    	function toggleSkill(skill) {
+    		skill.learned = !skill.learned;
+    		skills.update(n => n);
+    	}
 
-    	validate_store(targets, 'targets');
-    	component_subscribe($$self, targets, value => $$invalidate(6, $targets = value));
+    	const writable_props = [];
 
-    	//{ 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 };
+    	Object.keys($$props).forEach(key => {
+    		if (!~writable_props.indexOf(key) && key.slice(0, 2) !== '$$' && key !== 'slot') console.warn(`<MovingDotStatStoreandDisplay> was created with unknown prop '${key}'`);
+    	});
 
-    	let isModalOpen = false;
-    	let currentcollisiontext;
-    	let currentcollisionitems = [];
-    	let movingDotElement;
+    	const click_handler = skill => toggleSkill(skill);
 
-    	function handleSpaceClick() {
-    		//console.log('Container clicked!', event);
-    		movingDotElement.focusDot();
-    	}
+    	$$self.$capture_state = () => ({
+    		health,
+    		mana,
+    		strength,
+    		agility,
+    		intelligence,
+    		charisma,
+    		luck,
+    		inventory,
+    		skills,
+    		toggleSkill,
+    		$health,
+    		$mana,
+    		$strength,
+    		$agility,
+    		$intelligence,
+    		$charisma,
+    		$luck,
+    		$inventory,
+    		$skills
+    	});
 
-    	function handleModalClose() {
-    		$$invalidate(2, isModalOpen = false);
-    		movingDotElement.focusDot();
-    	}
+    	return [
+    		$health,
+    		$mana,
+    		$strength,
+    		$agility,
+    		$intelligence,
+    		$charisma,
+    		$luck,
+    		$inventory,
+    		$skills,
+    		toggleSkill,
+    		click_handler
+    	];
+    }
 
-    	function updateDotPosition(newX, newY) {
-    		dotPosition.set({ x: newX, y: newY });
-    	}
+    class MovingDotStatStoreandDisplay extends SvelteComponentDev {
+    	constructor(options) {
+    		super(options);
+    		init(this, options, instance$7, create_fragment$7, safe_not_equal, {});
 
-    	// 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);
-    			}
+    		dispatch_dev("SvelteRegisterComponent", {
+    			component: this,
+    			tagName: "MovingDotStatStoreandDisplay",
+    			options,
+    			id: create_fragment$7.name
     		});
-    	};
+    	}
+    }
 
-    	// 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":
+    /* src\MovingDotSpacePortfromReact.svelte generated by Svelte v3.59.2 */
 
-    	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 = [];
+    const { console: console_1$4 } = globals;
+    const file$6 = "src\\MovingDotSpacePortfromReact.svelte";
 
-    	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 get_each_context$3(ctx, list, i) {
+    	const child_ctx = ctx.slice();
+    	child_ctx[19] = list[i];
+    	return child_ctx;
+    }
 
-    	function canvas_1_binding($$value) {
-    		binding_callbacks[$$value ? 'unshift' : 'push'](() => {
-    			canvas = $$value;
-    			$$invalidate(1, canvas);
-    		});
-    	}
+    // (159:4) {#each $targets as target (target.name)}
+    function create_each_block$3(key_1, ctx) {
+    	let first;
+    	let target;
+    	let t0;
+    	let span;
+    	let t1_value = /*target*/ ctx[19].name + "";
+    	let t1;
+    	let current;
 
-    	function movingdot_binding($$value) {
-    		binding_callbacks[$$value ? 'unshift' : 'push'](() => {
-    			movingDotElement = $$value;
-    			$$invalidate(5, movingDotElement);
+    	target = new MovingDotTargetPortfromReact({
+    			props: { position: /*target*/ ctx[19] },
+    			$$inline: true
     		});
-    	}
-
-    	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);
-    	};
+    	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$6, 160, 8, 7871);
+    			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 ($$props && "$$inject" in $$props) {
-    		$$self.$inject_state($$props.$$inject);
-    	}
+    			if (!current || dirty & /*$targets*/ 64) {
+    				set_style(span, "left", /*target*/ ctx[19].x + "px");
+    			}
 
-    	$$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);
+    			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);
     		}
     	};
 
-    	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$5, create_fragment$5, safe_not_equal, {});
+    	dispatch_dev("SvelteRegisterBlock", {
+    		block,
+    		id: create_each_block$3.name,
+    		type: "each",
+    		source: "(159:4) {#each $targets as target (target.name)}",
+    		ctx
+    	});
 
-    		dispatch_dev("SvelteRegisterComponent", {
-    			component: this,
-    			tagName: "MovingDotSpacePortfromReact",
-    			options,
-    			id: create_fragment$5.name
-    		});
-    	}
+    	return block;
     }
 
-    /* src\YoutubeIframeAPICustomInterface.svelte generated by Svelte v3.59.2 */
+    // (165:4) {#if isModalOpen}
+    function create_if_block$3(ctx) {
+    	let modal;
+    	let current;
 
-    const { console: console_1$2 } = globals;
-    const file$4 = "src\\YoutubeIframeAPICustomInterface.svelte";
+    	modal = new MovingDotSpaceSimpleModal({
+    			props: {
+    				isOpen: /*isModalOpen*/ ctx[2],
+    				onClose: /*handleModalClose*/ ctx[11],
+    				title: "Test Collision",
+    				content: /*currentcollisiontext*/ ctx[3],
+    				items: /*currentcollisionitems*/ ctx[4]
+    			},
+    			$$inline: true
+    		});
 
-    function create_fragment$4(ctx) {
-    	let h1;
-    	let t1;
-    	let label;
-    	let t2;
-    	let input0;
-    	let t3;
-    	let input1;
-    	let t4;
-    	let div3;
-    	let div0;
-    	let t5;
-    	let div1;
-    	let t6;
-    	let t7_value = /*currentTime*/ ctx[3].toFixed(2) + "";
+    	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$3.name,
+    		type: "if",
+    		source: "(165:4) {#if isModalOpen}",
+    		ctx
+    	});
+
+    	return block;
+    }
+
+    function create_fragment$6(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 t8;
-    	let t9;
-    	let div2;
-    	let t10;
-    	let t11;
-    	let br0;
-    	let t12;
-    	let t13;
-    	let t14;
-    	let button0;
-    	let t18;
-    	let button1;
-    	let t22;
-    	let t23;
-    	let t24;
-    	let t25_value = /*timestamps*/ ctx[8].length + "";
-    	let t25;
-    	let t26;
-    	let br1;
-    	let t27;
-    	let button2;
-    	let t29;
-    	let button3;
-    	let t30;
-    	let button3_class_value;
-    	let button3_disabled_value;
-    	let t31;
-    	let button4;
-    	let t32;
-    	let button4_class_value;
-    	let button4_disabled_value;
-    	let t33;
-    	let button5;
-    	let t34;
-    	let button5_class_value;
-    	let button5_disabled_value;
-    	let t35;
-    	let t36;
-    	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 movingdotstats;
+    	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$3, get_key);
+
+    	for (let i = 0; i < each_value.length; i += 1) {
+    		let child_ctx = get_each_context$3(ctx, each_value, i);
+    		let key = get_key(child_ctx);
+    		each_1_lookup.set(key, each_blocks[i] = create_each_block$3(key, child_ctx));
+    	}
+
+    	let if_block = /*isModalOpen*/ ctx[2] && create_if_block$3(ctx);
+    	movingdotstats = new MovingDotStatStoreandDisplay({ $$inline: true });
+
     	const block = {
     		c: function create() {
-    			h1 = element("h1");
-    			h1.textContent = "Custom Youtube Player for learning Video and music";
+    			div1 = element("div");
+    			canvas_1 = element("canvas");
+    			t0 = space();
+    			create_component(movingdot.$$.fragment);
     			t1 = space();
-    			label = element("label");
-    			t2 = text("Current Video Id (mwO6v4BlgZQ | IVJkOHTBPn0 ) (test - qEpmiA3XkX8 hardcoded)\r\n    ");
-    			input0 = element("input");
-    			t3 = text("\r\n    Start/Stop Word Update (Dummy Transcript for now)\r\n    ");
-    			input1 = element("input");
-    			t4 = space();
-    			div3 = element("div");
     			div0 = element("div");
-    			t5 = space();
-    			div1 = element("div");
-    			t6 = text("Current Time: ");
-    			t7 = text(t7_value);
-    			t8 = text(" seconds");
-    			t9 = space();
-    			div2 = element("div");
-    			t10 = text(/*line*/ ctx[5]);
-    			t11 = space();
-    			br0 = element("br");
-    			t12 = space();
-    			t13 = text(/*currentWord*/ ctx[4]);
-    			t14 = space();
-    			button0 = element("button");
-    			button0.textContent = `Previous Auto Timestamp - ${/*interval*/ ctx[13]}s`;
-    			t18 = space();
-    			button1 = element("button");
-    			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";
-    			t29 = space();
-    			button3 = element("button");
-    			t30 = text("Current User Timestamp (incomplete)");
-    			t31 = space();
-    			button4 = element("button");
-    			t32 = text("Previous User Timestamp");
-    			t33 = space();
-    			button5 = element("button");
-    			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 Timestamps";
-    			t48 = space();
-    			button7 = element("button");
-    			button7.textContent = "Export Round 2 Timestamps";
-    			t50 = text(" Import Timestamps (Incomplete) ");
-    			input2 = element("input");
-    			add_location(h1, file$4, 286, 0, 9769);
-    			attr_dev(input0, "type", "text");
-    			add_location(input0, file$4, 290, 4, 9927);
-    			attr_dev(input1, "type", "checkbox");
-    			add_location(input1, file$4, 292, 4, 10035);
-    			add_location(label, file$4, 288, 0, 9832);
-    			attr_dev(div0, "id", "youtube-player");
-    			set_style(div0, "height", "90vh");
-    			set_style(div0, "width", "90%");
-    			add_location(div0, file$4, 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$4, 301, 4, 10475);
-    			add_location(br0, file$4, 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$4, 304, 4, 10654);
-    			set_style(div3, "position", "relative");
-    			add_location(div3, file$4, 299, 0, 10366);
-    			add_location(button0, file$4, 311, 0, 10921);
-    			add_location(button1, file$4, 312, 0, 11014);
-    			add_location(br1, file$4, 315, 0, 11156);
-    			add_location(button2, file$4, 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$4, 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$4, 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$4, 319, 0, 11522);
-    			add_location(br2, file$4, 322, 0, 11745);
-    			add_location(br3, file$4, 322, 82, 11827);
-    			add_location(br4, file$4, 322, 192, 11937);
-    			add_location(button6, file$4, 323, 0, 11943);
-    			add_location(button7, file$4, 323, 63, 12006);
-    			attr_dev(input2, "type", "file");
-    			attr_dev(input2, "accept", ".json");
-    			add_location(input2, file$4, 323, 167, 12110);
+    			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();
+    			t8 = space();
+    			create_component(movingdotstats.$$.fragment);
+    			set_style(canvas_1, "width", "100%");
+    			set_style(canvas_1, "height", "100%");
+    			attr_dev(canvas_1, "tabindex", "0");
+    			add_location(canvas_1, file$6, 155, 4, 7397);
+    			attr_dev(div0, "id", "overlayText");
+    			attr_dev(div0, "class", "svelte-c2nwl9");
+    			add_location(div0, file$6, 157, 4, 7655);
+    			attr_dev(div1, "id", "game-container");
+    			attr_dev(div1, "style", /*spaceStyle*/ ctx[13]);
+    			add_location(div1, file$6, 154, 0, 7311);
     		},
     		l: function claim(nodes) {
     			throw new Error("options.hydrate only works if the component was compiled with the `hydratable: true` option");
     		},
     		m: function mount(target, anchor) {
-    			insert_dev(target, h1, anchor);
-    			insert_dev(target, t1, anchor);
-    			insert_dev(target, label, anchor);
-    			append_dev(label, t2);
-    			append_dev(label, input0);
-    			set_input_value(input0, /*currentvideoId*/ ctx[2]);
-    			append_dev(label, t3);
-    			append_dev(label, input1);
-    			input1.checked = /*isUpdating*/ ctx[6];
-    			insert_dev(target, t4, anchor);
-    			insert_dev(target, div3, anchor);
-    			append_dev(div3, div0);
-    			append_dev(div3, t5);
-    			append_dev(div3, div1);
+    			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);
-    			append_dev(div1, t8);
-    			append_dev(div3, t9);
-    			append_dev(div3, div2);
-    			append_dev(div2, t10);
-    			append_dev(div2, t11);
-    			append_dev(div2, br0);
-    			append_dev(div2, t12);
-    			append_dev(div2, t13);
-    			insert_dev(target, t14, anchor);
-    			insert_dev(target, button0, anchor);
-    			insert_dev(target, t18, anchor);
-    			insert_dev(target, button1, anchor);
-    			insert_dev(target, t22, anchor);
-    			insert_dev(target, t23, anchor);
-    			insert_dev(target, t24, anchor);
-    			insert_dev(target, t25, anchor);
-    			insert_dev(target, t26, anchor);
-    			insert_dev(target, br1, anchor);
-    			insert_dev(target, t27, anchor);
-    			insert_dev(target, button2, anchor);
-    			insert_dev(target, t29, anchor);
-    			insert_dev(target, button3, anchor);
-    			append_dev(button3, t30);
-    			insert_dev(target, t31, anchor);
-    			insert_dev(target, button4, anchor);
-    			append_dev(button4, t32);
-    			insert_dev(target, t33, anchor);
-    			insert_dev(target, button5, anchor);
-    			append_dev(button5, t34);
-    			insert_dev(target, t35, anchor);
-    			insert_dev(target, t36, 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 (if_block) if_block.m(div1, null);
+    			insert_dev(target, t8, anchor);
+    			mount_component(movingdotstats, target, anchor);
+    			current = true;
 
     			if (!mounted) {
-    				dispose = [
-    					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)
-    				];
-
+    				dispose = listen_dev(canvas_1, "click", /*handleSpaceClick*/ ctx[10], false, false, false, false);
     				mounted = true;
     			}
     		},
-    		p: function update(ctx, dirty) {
-    			if (dirty[0] & /*currentvideoId*/ 4 && input0.value !== /*currentvideoId*/ ctx[2]) {
-    				set_input_value(input0, /*currentvideoId*/ ctx[2]);
-    			}
+    		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[0] & /*isUpdating*/ 64) {
-    				input1.checked = /*isUpdating*/ ctx[6];
+    			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$3, 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$3, t7, get_each_context$3);
+    				check_outros();
     			}
 
-    			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 (/*isModalOpen*/ ctx[2]) {
+    				if (if_block) {
+    					if_block.p(ctx, dirty);
 
-    			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);
-    			}
+    					if (dirty & /*isModalOpen*/ 4) {
+    						transition_in(if_block, 1);
+    					}
+    				} else {
+    					if_block = create_if_block$3(ctx);
+    					if_block.c();
+    					transition_in(if_block, 1);
+    					if_block.m(div1, null);
+    				}
+    			} else if (if_block) {
+    				group_outros();
 
-    			if (dirty[0] & /*currentuserIndex*/ 1 && button3_disabled_value !== (button3_disabled_value = /*currentuserIndex*/ ctx[0] <= 0)) {
-    				prop_dev(button3, "disabled", button3_disabled_value);
-    			}
+    				transition_out(if_block, 1, 1, () => {
+    					if_block = null;
+    				});
 
-    			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);
+    				check_outros();
     			}
+    		},
+    		i: function intro(local) {
+    			if (current) return;
+    			transition_in(movingdot.$$.fragment, local);
 
-    			if (dirty[0] & /*currentuserIndex*/ 1 && button4_disabled_value !== (button4_disabled_value = /*currentuserIndex*/ ctx[0] <= 0)) {
-    				prop_dev(button4, "disabled", button4_disabled_value);
+    			for (let i = 0; i < each_value.length; i += 1) {
+    				transition_in(each_blocks[i]);
     			}
 
-    			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);
-    			}
+    			transition_in(if_block);
+    			transition_in(movingdotstats.$$.fragment, local);
+    			current = true;
+    		},
+    		o: function outro(local) {
+    			transition_out(movingdot.$$.fragment, local);
 
-    			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);
+    			for (let i = 0; i < each_blocks.length; i += 1) {
+    				transition_out(each_blocks[i]);
     			}
 
-    			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);
+    			transition_out(if_block);
+    			transition_out(movingdotstats.$$.fragment, local);
+    			current = false;
     		},
-    		i: noop,
-    		o: noop,
     		d: function destroy(detaching) {
-    			if (detaching) detach_dev(h1);
-    			if (detaching) detach_dev(t1);
-    			if (detaching) detach_dev(label);
-    			if (detaching) detach_dev(t4);
-    			if (detaching) detach_dev(div3);
-    			if (detaching) detach_dev(t14);
-    			if (detaching) detach_dev(button0);
-    			if (detaching) detach_dev(t18);
-    			if (detaching) detach_dev(button1);
-    			if (detaching) detach_dev(t22);
-    			if (detaching) detach_dev(t23);
-    			if (detaching) detach_dev(t24);
-    			if (detaching) detach_dev(t25);
-    			if (detaching) detach_dev(t26);
-    			if (detaching) detach_dev(br1);
-    			if (detaching) detach_dev(t27);
-    			if (detaching) detach_dev(button2);
-    			if (detaching) detach_dev(t29);
-    			if (detaching) detach_dev(button3);
-    			if (detaching) detach_dev(t31);
-    			if (detaching) detach_dev(button4);
-    			if (detaching) detach_dev(t33);
-    			if (detaching) detach_dev(button5);
-    			if (detaching) detach_dev(t35);
-    			if (detaching) detach_dev(t36);
-    			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);
+    			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();
+    			if (detaching) detach_dev(t8);
+    			destroy_component(movingdotstats, detaching);
+    			mounted = false;
+    			dispose();
+    		}
+    	};
+
+    	dispatch_dev("SvelteRegisterBlock", {
+    		block,
+    		id: create_fragment$6.name,
+    		type: "component",
+    		source: "",
+    		ctx
+    	});
+
+    	return block;
+    }
+
+    function instance$6($$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);
+    				health.update(h => h - 10 > 0 ? h - 10 : 0);
+    				$$invalidate(3, currentcollisiontext = target.collisiontext);
+    				$$invalidate(4, currentcollisionitems = [
+    					{
+    						label: "Ask about the hidden cave", // Decreases health but never below 0
+    						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$4.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: MovingDotSpaceSimpleModal,
+    		MovingDotStats: MovingDotStatStoreandDisplay,
+    		health,
+    		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$6, create_fragment$6, safe_not_equal, {});
+
+    		dispatch_dev("SvelteRegisterComponent", {
+    			component: this,
+    			tagName: "MovingDotSpacePortfromReact",
+    			options,
+    			id: create_fragment$6.name
+    		});
+    	}
+    }
+
+    /* src\YoutubeIframeAPICustomInterface.svelte generated by Svelte v3.59.2 */
+
+    const { console: console_1$3 } = globals;
+    const file$5 = "src\\YoutubeIframeAPICustomInterface.svelte";
+
+    function create_fragment$5(ctx) {
+    	let h1;
+    	let t1;
+    	let label;
+    	let t2;
+    	let input0;
+    	let t3;
+    	let input1;
+    	let t4;
+    	let div3;
+    	let div0;
+    	let t5;
+    	let div1;
+    	let t6;
+    	let t7_value = /*currentTime*/ ctx[3].toFixed(2) + "";
+    	let t7;
+    	let t8;
+    	let t9;
+    	let div2;
+    	let t10;
+    	let t11;
+    	let br0;
+    	let t12;
+    	let t13;
+    	let t14;
+    	let button0;
+    	let t18;
+    	let button1;
+    	let t22;
+    	let t23;
+    	let t24;
+    	let t25_value = /*timestamps*/ ctx[8].length + "";
+    	let t25;
+    	let t26;
+    	let br1;
+    	let t27;
+    	let button2;
+    	let t29;
+    	let button3;
+    	let t30;
+    	let button3_class_value;
+    	let button3_disabled_value;
+    	let t31;
+    	let button4;
+    	let t32;
+    	let button4_class_value;
+    	let button4_disabled_value;
+    	let t33;
+    	let button5;
+    	let t34;
+    	let button5_class_value;
+    	let button5_disabled_value;
+    	let t35;
+    	let t36;
+    	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;
+
+    	const block = {
+    		c: function create() {
+    			h1 = element("h1");
+    			h1.textContent = "Custom Youtube Player for learning Video and music";
+    			t1 = space();
+    			label = element("label");
+    			t2 = text("Current Video Id (mwO6v4BlgZQ | IVJkOHTBPn0 ) (test - qEpmiA3XkX8 hardcoded)\r\n    ");
+    			input0 = element("input");
+    			t3 = text("\r\n    Start/Stop Word Update (Dummy Transcript for now)\r\n    ");
+    			input1 = element("input");
+    			t4 = space();
+    			div3 = element("div");
+    			div0 = element("div");
+    			t5 = space();
+    			div1 = element("div");
+    			t6 = text("Current Time: ");
+    			t7 = text(t7_value);
+    			t8 = text(" seconds");
+    			t9 = space();
+    			div2 = element("div");
+    			t10 = text(/*line*/ ctx[5]);
+    			t11 = space();
+    			br0 = element("br");
+    			t12 = space();
+    			t13 = text(/*currentWord*/ ctx[4]);
+    			t14 = space();
+    			button0 = element("button");
+    			button0.textContent = `Previous Auto Timestamp - ${/*interval*/ ctx[13]}s`;
+    			t18 = space();
+    			button1 = element("button");
+    			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";
+    			t29 = space();
+    			button3 = element("button");
+    			t30 = text("Current User Timestamp (incomplete)");
+    			t31 = space();
+    			button4 = element("button");
+    			t32 = text("Previous User Timestamp");
+    			t33 = space();
+    			button5 = element("button");
+    			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 Timestamps";
+    			t48 = space();
+    			button7 = element("button");
+    			button7.textContent = "Export Round 2 Timestamps";
+    			t50 = text(" Import Timestamps (Incomplete) ");
+    			input2 = element("input");
+    			add_location(h1, file$5, 286, 0, 9769);
+    			attr_dev(input0, "type", "text");
+    			add_location(input0, file$5, 290, 4, 9927);
+    			attr_dev(input1, "type", "checkbox");
+    			add_location(input1, file$5, 292, 4, 10035);
+    			add_location(label, file$5, 288, 0, 9832);
+    			attr_dev(div0, "id", "youtube-player");
+    			set_style(div0, "height", "90vh");
+    			set_style(div0, "width", "90%");
+    			add_location(div0, file$5, 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$5, 301, 4, 10475);
+    			add_location(br0, file$5, 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$5, 304, 4, 10654);
+    			set_style(div3, "position", "relative");
+    			add_location(div3, file$5, 299, 0, 10366);
+    			add_location(button0, file$5, 311, 0, 10921);
+    			add_location(button1, file$5, 312, 0, 11014);
+    			add_location(br1, file$5, 315, 0, 11156);
+    			add_location(button2, file$5, 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$5, 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$5, 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$5, 319, 0, 11522);
+    			add_location(br2, file$5, 322, 0, 11745);
+    			add_location(br3, file$5, 322, 82, 11827);
+    			add_location(br4, file$5, 322, 192, 11937);
+    			add_location(button6, file$5, 323, 0, 11943);
+    			add_location(button7, file$5, 323, 63, 12006);
+    			attr_dev(input2, "type", "file");
+    			attr_dev(input2, "accept", ".json");
+    			add_location(input2, file$5, 323, 167, 12110);
+    		},
+    		l: function claim(nodes) {
+    			throw new Error("options.hydrate only works if the component was compiled with the `hydratable: true` option");
+    		},
+    		m: function mount(target, anchor) {
+    			insert_dev(target, h1, anchor);
+    			insert_dev(target, t1, anchor);
+    			insert_dev(target, label, anchor);
+    			append_dev(label, t2);
+    			append_dev(label, input0);
+    			set_input_value(input0, /*currentvideoId*/ ctx[2]);
+    			append_dev(label, t3);
+    			append_dev(label, input1);
+    			input1.checked = /*isUpdating*/ ctx[6];
+    			insert_dev(target, t4, anchor);
+    			insert_dev(target, div3, anchor);
+    			append_dev(div3, div0);
+    			append_dev(div3, t5);
+    			append_dev(div3, div1);
+    			append_dev(div1, t6);
+    			append_dev(div1, t7);
+    			append_dev(div1, t8);
+    			append_dev(div3, t9);
+    			append_dev(div3, div2);
+    			append_dev(div2, t10);
+    			append_dev(div2, t11);
+    			append_dev(div2, br0);
+    			append_dev(div2, t12);
+    			append_dev(div2, t13);
+    			insert_dev(target, t14, anchor);
+    			insert_dev(target, button0, anchor);
+    			insert_dev(target, t18, anchor);
+    			insert_dev(target, button1, anchor);
+    			insert_dev(target, t22, anchor);
+    			insert_dev(target, t23, anchor);
+    			insert_dev(target, t24, anchor);
+    			insert_dev(target, t25, anchor);
+    			insert_dev(target, t26, anchor);
+    			insert_dev(target, br1, anchor);
+    			insert_dev(target, t27, anchor);
+    			insert_dev(target, button2, anchor);
+    			insert_dev(target, t29, anchor);
+    			insert_dev(target, button3, anchor);
+    			append_dev(button3, t30);
+    			insert_dev(target, t31, anchor);
+    			insert_dev(target, button4, anchor);
+    			append_dev(button4, t32);
+    			insert_dev(target, t33, anchor);
+    			insert_dev(target, button5, anchor);
+    			append_dev(button5, t34);
+    			insert_dev(target, t35, anchor);
+    			insert_dev(target, t36, 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[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*/ 4 && input0.value !== /*currentvideoId*/ ctx[2]) {
+    				set_input_value(input0, /*currentvideoId*/ ctx[2]);
+    			}
+
+    			if (dirty[0] & /*isUpdating*/ 64) {
+    				input1.checked = /*isUpdating*/ ctx[6];
+    			}
+
+    			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] & /*currentindexButtonClass*/ 1024 && button3_class_value !== (button3_class_value = "" + (null_to_empty(/*currentindexButtonClass*/ ctx[10]) + " svelte-cpjgti"))) {
+    				attr_dev(button3, "class", button3_class_value);
+    			}
+
+    			if (dirty[0] & /*currentuserIndex*/ 1 && button3_disabled_value !== (button3_disabled_value = /*currentuserIndex*/ ctx[0] <= 0)) {
+    				prop_dev(button3, "disabled", button3_disabled_value);
+    			}
+
+    			if (dirty[0] & /*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*/ 1 && button4_disabled_value !== (button4_disabled_value = /*currentuserIndex*/ ctx[0] <= 0)) {
+    				prop_dev(button4, "disabled", button4_disabled_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,
+    		d: function destroy(detaching) {
+    			if (detaching) detach_dev(h1);
+    			if (detaching) detach_dev(t1);
+    			if (detaching) detach_dev(label);
+    			if (detaching) detach_dev(t4);
+    			if (detaching) detach_dev(div3);
+    			if (detaching) detach_dev(t14);
+    			if (detaching) detach_dev(button0);
+    			if (detaching) detach_dev(t18);
+    			if (detaching) detach_dev(button1);
+    			if (detaching) detach_dev(t22);
+    			if (detaching) detach_dev(t23);
+    			if (detaching) detach_dev(t24);
+    			if (detaching) detach_dev(t25);
+    			if (detaching) detach_dev(t26);
+    			if (detaching) detach_dev(br1);
+    			if (detaching) detach_dev(t27);
+    			if (detaching) detach_dev(button2);
+    			if (detaching) detach_dev(t29);
+    			if (detaching) detach_dev(button3);
+    			if (detaching) detach_dev(t31);
+    			if (detaching) detach_dev(button4);
+    			if (detaching) detach_dev(t33);
+    			if (detaching) detach_dev(button5);
+    			if (detaching) detach_dev(t35);
+    			if (detaching) detach_dev(t36);
+    			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);
+    		}
+    	};
+
+    	dispatch_dev("SvelteRegisterBlock", {
+    		block,
+    		id: create_fragment$5.name,
+    		type: "component",
+    		source: "",
+    		ctx
+    	});
+
+    	return block;
+    }
+
+    function getRandomWord(line) {
+    	let words = line.split(" ");
+    	return words[Math.floor(Math.random() * words.length)];
+    }
+
+    function instance$5($$self, $$props, $$invalidate) {
+    	let nextindexButtonClass;
+    	let previousindexButtonClass;
+    	let currentindexButtonClass;
+    	let { $$slots: slots = {}, $$scope } = $$props;
+    	validate_slots('YoutubeIframeAPICustomInterface', slots, []);
+    	let player;
+    	let interval = 20; // Define your interval
+    	let currentTime = 0;
+    	let timeUpdateInterval;
+
+    	// Assuming 'transcript' contains your video transcript
+    	let transcript = `Line 1 of the transcript.
+    Line 2 of the transcript.
+    Line 3 food
+    Line 4 foodest
+    Line 5 foods
+    Line 6 fooder
+    Line 7 foodz
+    Line 8 fooding
+    ...`; // Replace with your actual transcript
+
+    	let lines = transcript.split("\n");
+    	let currentWord = "";
+    	let line = "";
+    	let isUpdating = false;
+    	let updateInterval;
+    	let currentIndex = 0; // Assuming this is initialized appropriately
+    	let currentuserIndex = 0; // Assuming this is initialized appropriately
+    	let timestamps = []; // Array of timestamps
+    	let userTimestamps = []; // Array of user timestamps
+    	let 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
+    					}
+    				});
+    		}
+
+    		// Reset and start the interval to update current time
+    		timeUpdateInterval = setInterval(updateCurrentTime, 1000);
+    	}
+
+    	onMount(() => {
+    		// Load the YouTube IFrame Player API
+    		const tag = document.createElement('script');
+
+    		tag.src = "https://www.youtube.com/iframe_api";
+    		const firstScriptTag = document.getElementsByTagName('script')[0];
+    		firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
+
+    		// Update the current time every second
+    		timeUpdateInterval = setInterval(updateCurrentTime, 1000);
+    	});
+
+    	function autogeneratedtimestamps() {
+    		currentvideoduration = player.getDuration();
+
+    		//console.log("Video Duration: ", currentvideoduration);
+    		const generatedTimestamps = [];
+
+    		for (let i = interval; i < currentvideoduration; i += interval) {
+    			generatedTimestamps.push(i);
+    		}
+
+    		$$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() {
+    		const currentTime = player.getCurrentTime();
+
+    		// Find the closest timestamp
+    		let closest = timestamps.reduce((prev, curr) => Math.abs(curr - currentTime) < Math.abs(prev - currentTime)
+    		? curr
+    		: prev);
+
+    		$$invalidate(7, currentIndex = timestamps.indexOf(closest));
+    	}
+
+    	function updateCurrentTime() {
+    		if (player && player.getCurrentTime) {
+    			$$invalidate(3, currentTime = player.getCurrentTime());
+    		}
+    	}
+
+    	onDestroy(() => {
+    		clearInterval(timeUpdateInterval);
+    	});
+
+    	function updateWord() {
+    		if (isUpdating) {
+    			$$invalidate(5, line = lines[Math.floor(Math.random() * lines.length)]);
+    			$$invalidate(4, currentWord = getRandomWord(line));
+    		}
+    	}
+
+    	function toggleUpdate() {
+    		$$invalidate(6, isUpdating = !isUpdating);
+
+    		if (isUpdating) {
+    			updateWord(); // Immediately update once
+    			updateInterval = setInterval(updateWord, 3000); // Update every 3 seconds
+    		} else {
+    			clearInterval(updateInterval);
+    			$$invalidate(5, line = '');
+    			$$invalidate(4, currentWord = '');
+    		}
+    	}
+
+    	function goToNextAutoTimestamp() {
+    		if (currentIndex < timestamps.length - 1) {
+    			$$invalidate(7, currentIndex += 1);
+    			player.seekTo(timestamps[currentIndex], true);
+    		}
+    	}
+
+    	function goToPreviousAutoTimestamp() {
+    		if (currentIndex > 0) {
+    			$$invalidate(7, currentIndex -= 1);
+    			player.seekTo(timestamps[currentIndex], true);
+    		}
+    	}
+
+    	function addUserTimestamp() {
+    		const currentTime = Math.floor(player.getCurrentTime());
+    		$$invalidate(1, userTimestamps = [...userTimestamps, currentTime].sort((a, b) => a - b));
+    	}
+
+    	function addr2UserTimestamp() {
+    		const currentTime = Math.floor(player.getCurrentTime());
+    		$$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() {
+    		if (currentuserIndex < userTimestamps.length - 1) {
+    			$$invalidate(0, currentuserIndex += 1);
+    			player.seekTo(userTimestamps[currentuserIndex], true);
+    		} else {
+    			// Handle the end of the list here
+    			console.log("Reached the end of user timestamps.");
+    		} // You can also disable the "next" button or loop to the start if needed.
+    	}
+
+    	function goToPreviousUserTimestamp() {
+    		if (currentuserIndex > 0) {
+    			$$invalidate(0, currentuserIndex -= 1);
+    			player.seekTo(userTimestamps[currentuserIndex], true);
+    		} else {
+    			// Handle the beginning of the list here
+    			console.log("Reached the start of user timestamps.");
+    		} // You can also disable the "previous" button or loop to the end if needed.
+    	}
+
+    	function exportTimestamps() {
+    		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 = `${currentvideoId}_timestamps.json`;
+    		a.href = url;
+    		a.download = filename;
+    		document.body.appendChild(a);
+    		a.click();
+    		window.URL.revokeObjectURL(url);
+    	}
+
+    	function exportr2Timestamps() {
+    		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 = `${currentvideoId}_round2timestamps.json`;
+    		a.href = url;
+    		a.download = filename;
+    		document.body.appendChild(a);
+    		a.click();
+    		window.URL.revokeObjectURL(url);
+    	}
+
+    	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 => {
+    			try {
+    				const data = JSON.parse(e.target.result);
+
+    				if (!Array.isArray(data.timestamps)) {
+    					alert('Invalid file structure: timestamps should be an array.');
+    					return;
+    				}
+
+    				$$invalidate(2, currentvideoId = data.currentvideoId || '');
+    				$$invalidate(1, userTimestamps = data.timestamps);
+    			} catch(error) {
+    				alert('An error occurred while importing timestamps.'); //regeneratedautotimestamps = false; = true
+    			}
+    		};
+
+    		reader.readAsText(file);
+    	}
+
+    	const writable_props = [];
+
+    	Object.keys($$props).forEach(key => {
+    		if (!~writable_props.indexOf(key) && key.slice(0, 2) !== '$$' && key !== 'slot') console_1$3.warn(`<YoutubeIframeAPICustomInterface> was created with unknown prop '${key}'`);
+    	});
+
+    	function input0_input_handler() {
+    		currentvideoId = this.value;
+    		$$invalidate(2, currentvideoId);
+    	}
+
+    	function input1_change_handler() {
+    		isUpdating = this.checked;
+    		$$invalidate(6, isUpdating);
+    	}
+
+    	$$self.$capture_state = () => ({
+    		onMount,
+    		onDestroy,
+    		player,
+    		interval,
+    		currentTime,
+    		timeUpdateInterval,
+    		transcript,
+    		lines,
+    		currentWord,
+    		line,
+    		isUpdating,
+    		updateInterval,
+    		currentIndex,
+    		currentuserIndex,
+    		timestamps,
+    		userTimestamps,
+    		r2userTimestamps,
+    		currentvideoId,
+    		youTubeApiLoaded,
+    		currentvideoduration,
+    		regeneratedautotimestamps,
+    		initYouTubePlayer,
+    		autogeneratedtimestamps,
+    		onPlayerReady,
+    		onPlayerStateChange,
+    		updateCurrentIndex,
+    		updateCurrentTime,
+    		getRandomWord,
+    		updateWord,
+    		toggleUpdate,
+    		goToNextAutoTimestamp,
+    		goToPreviousAutoTimestamp,
+    		addUserTimestamp,
+    		addr2UserTimestamp,
+    		goToCurrentUserTimestamp,
+    		goToNextUserTimestamp,
+    		goToPreviousUserTimestamp,
+    		exportTimestamps,
+    		exportr2Timestamps,
+    		importTimestamps,
+    		currentindexButtonClass,
+    		previousindexButtonClass,
+    		nextindexButtonClass
+    	});
+
+    	$$self.$inject_state = $$props => {
+    		if ('player' in $$props) player = $$props.player;
+    		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(4, currentWord = $$props.currentWord);
+    		if ('line' in $$props) $$invalidate(5, line = $$props.line);
+    		if ('isUpdating' in $$props) $$invalidate(6, isUpdating = $$props.isUpdating);
+    		if ('updateInterval' in $$props) updateInterval = $$props.updateInterval;
+    		if ('currentIndex' in $$props) $$invalidate(7, currentIndex = $$props.currentIndex);
+    		if ('currentuserIndex' in $$props) $$invalidate(0, currentuserIndex = $$props.currentuserIndex);
+    		if ('timestamps' in $$props) $$invalidate(8, timestamps = $$props.timestamps);
+    		if ('userTimestamps' in $$props) $$invalidate(1, userTimestamps = $$props.userTimestamps);
+    		if ('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) {
+    		$$self.$inject_state($$props.$$inject);
+    	}
+
+    	$$self.$$.update = () => {
+    		if ($$self.$$.dirty[0] & /*currentvideoId*/ 4) {
+    			if (currentvideoId) {
+    				initYouTubePlayer();
+    			}
+    		}
+
+    		if ($$self.$$.dirty[0] & /*currentuserIndex, userTimestamps*/ 3) {
+    			$$invalidate(12, nextindexButtonClass = currentuserIndex >= userTimestamps.length - 1
+    			? 'button-at-end'
+    			: 'button');
+    		}
+
+    		if ($$self.$$.dirty[0] & /*currentuserIndex*/ 1) {
+    			$$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,
+    		r2userTimestamps,
+    		currentindexButtonClass,
+    		previousindexButtonClass,
+    		nextindexButtonClass,
+    		interval,
+    		toggleUpdate,
+    		goToNextAutoTimestamp,
+    		goToPreviousAutoTimestamp,
+    		addUserTimestamp,
+    		goToCurrentUserTimestamp,
+    		goToNextUserTimestamp,
+    		goToPreviousUserTimestamp,
+    		exportTimestamps,
+    		exportr2Timestamps,
+    		importTimestamps,
+    		input0_input_handler,
+    		input1_change_handler
+    	];
+    }
+
+    class YoutubeIframeAPICustomInterface extends SvelteComponentDev {
+    	constructor(options) {
+    		super(options);
+    		init(this, options, instance$5, create_fragment$5, safe_not_equal, {}, null, [-1, -1]);
+
+    		dispatch_dev("SvelteRegisterComponent", {
+    			component: this,
+    			tagName: "YoutubeIframeAPICustomInterface",
+    			options,
+    			id: create_fragment$5.name
+    		});
+    	}
+    }
+
+    // Unique ID creation requires a high quality random # generator. In the browser we therefore
+    // require the crypto API and do not support built-in fallback to lower quality random number
+    // generators (like Math.random()).
+    let getRandomValues;
+    const rnds8 = new Uint8Array(16);
+    function rng() {
+      // lazy load so that environments that need to polyfill have a chance to do so
+      if (!getRandomValues) {
+        // getRandomValues needs to be invoked in a context where "this" is a Crypto implementation.
+        getRandomValues = typeof crypto !== 'undefined' && crypto.getRandomValues && crypto.getRandomValues.bind(crypto);
+
+        if (!getRandomValues) {
+          throw new Error('crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported');
+        }
+      }
+
+      return getRandomValues(rnds8);
+    }
+
+    /**
+     * Convert array of 16 byte values to UUID string format of the form:
+     * XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX
+     */
+
+    const byteToHex = [];
+
+    for (let i = 0; i < 256; ++i) {
+      byteToHex.push((i + 0x100).toString(16).slice(1));
+    }
+
+    function unsafeStringify(arr, offset = 0) {
+      // Note: Be careful editing this code!  It's been tuned for performance
+      // and works in ways you may not expect. See https://github.com/uuidjs/uuid/pull/434
+      return byteToHex[arr[offset + 0]] + byteToHex[arr[offset + 1]] + byteToHex[arr[offset + 2]] + byteToHex[arr[offset + 3]] + '-' + byteToHex[arr[offset + 4]] + byteToHex[arr[offset + 5]] + '-' + byteToHex[arr[offset + 6]] + byteToHex[arr[offset + 7]] + '-' + byteToHex[arr[offset + 8]] + byteToHex[arr[offset + 9]] + '-' + byteToHex[arr[offset + 10]] + byteToHex[arr[offset + 11]] + byteToHex[arr[offset + 12]] + byteToHex[arr[offset + 13]] + byteToHex[arr[offset + 14]] + byteToHex[arr[offset + 15]];
+    }
+
+    const randomUUID = typeof crypto !== 'undefined' && crypto.randomUUID && crypto.randomUUID.bind(crypto);
+    var native = {
+      randomUUID
+    };
+
+    function v4(options, buf, offset) {
+      if (native.randomUUID && !buf && !options) {
+        return native.randomUUID();
+      }
+
+      options = options || {};
+      const rnds = options.random || (options.rng || rng)(); // Per 4.4, set bits for version and `clock_seq_hi_and_reserved`
+
+      rnds[6] = rnds[6] & 0x0f | 0x40;
+      rnds[8] = rnds[8] & 0x3f | 0x80; // Copy bytes to buffer, if provided
+
+      if (buf) {
+        offset = offset || 0;
+
+        for (let i = 0; i < 16; ++i) {
+          buf[offset + i] = rnds[i];
+        }
+
+        return buf;
+      }
+
+      return unsafeStringify(rnds);
+    }
+
+    /* src\RecursiveNestedCommentsElement.svelte generated by Svelte v3.59.2 */
+
+    const { console: console_1$2 } = globals;
+    const file$4 = "src\\RecursiveNestedCommentsElement.svelte";
+
+    function get_each_context$2(ctx, list, i) {
+    	const child_ctx = ctx.slice();
+    	child_ctx[14] = list[i];
+    	child_ctx[15] = list;
+    	child_ctx[16] = i;
+    	return child_ctx;
+    }
+
+    // (123:16) {#if showReplyInput[comment.id]}
+    function create_if_block$2(ctx) {
+    	let div;
+    	let input;
+    	let t0;
+    	let button;
+    	let mounted;
+    	let dispose;
+
+    	function input_input_handler() {
+    		/*input_input_handler*/ ctx[11].call(input, /*comment*/ ctx[14]);
+    	}
+
+    	function click_handler_1() {
+    		return /*click_handler_1*/ ctx[12](/*comment*/ ctx[14]);
+    	}
+
+    	const block = {
+    		c: function create() {
+    			div = element("div");
+    			input = element("input");
+    			t0 = space();
+    			button = element("button");
+    			button.textContent = "Post Reply";
+    			attr_dev(input, "placeholder", "Write a reply...");
+    			add_location(input, file$4, 124, 24, 4690);
+    			add_location(button, file$4, 125, 24, 4791);
+    			attr_dev(div, "class", "reply-input");
+    			add_location(div, file$4, 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[14].id]);
+    			append_dev(div, t0);
+    			append_dev(div, button);
+
+    			if (!mounted) {
+    				dispose = [
+    					listen_dev(input, "input", input_input_handler),
+    					listen_dev(button, "click", click_handler_1, false, false, false, false)
+    				];
+
+    				mounted = true;
+    			}
+    		},
+    		p: function update(new_ctx, dirty) {
+    			ctx = new_ctx;
+
+    			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) {
+    			if (detaching) detach_dev(div);
     			mounted = false;
     			run_all(dispose);
     		}
@@ -2797,301 +3919,377 @@ var app = (function () {
 
     	dispatch_dev("SvelteRegisterBlock", {
     		block,
-    		id: create_fragment$4.name,
-    		type: "component",
-    		source: "",
+    		id: create_if_block$2.name,
+    		type: "if",
+    		source: "(123:16) {#if showReplyInput[comment.id]}",
     		ctx
     	});
 
     	return block;
     }
 
-    function getRandomWord(line) {
-    	let words = line.split(" ");
-    	return words[Math.floor(Math.random() * words.length)];
-    }
+    // (119:8) {#each flattenedComments as comment}
+    function create_each_block$2(ctx) {
+    	let div;
+    	let span;
+    	let t0_value = /*comment*/ ctx[14].title + "";
+    	let t0;
+    	let t1;
+    	let button;
+    	let t3;
+    	let t4;
+    	let div_class_value;
+    	let mounted;
+    	let dispose;
 
-    function instance$4($$self, $$props, $$invalidate) {
-    	let nextindexButtonClass;
-    	let previousindexButtonClass;
-    	let currentindexButtonClass;
-    	let { $$slots: slots = {}, $$scope } = $$props;
-    	validate_slots('YoutubeIframeAPICustomInterface', slots, []);
-    	let player;
-    	let interval = 20; // Define your interval
-    	let currentTime = 0;
-    	let timeUpdateInterval;
+    	function click_handler() {
+    		return /*click_handler*/ ctx[10](/*comment*/ ctx[14]);
+    	}
 
-    	// Assuming 'transcript' contains your video transcript
-    	let transcript = `Line 1 of the transcript.
-    Line 2 of the transcript.
-    Line 3 food
-    Line 4 foodest
-    Line 5 foods
-    Line 6 fooder
-    Line 7 foodz
-    Line 8 fooding
-    ...`; // Replace with your actual transcript
+    	let if_block = /*showReplyInput*/ ctx[3][/*comment*/ ctx[14].id] && create_if_block$2(ctx);
 
-    	let lines = transcript.split("\n");
-    	let currentWord = "";
-    	let line = "";
-    	let isUpdating = false;
-    	let updateInterval;
-    	let currentIndex = 0; // Assuming this is initialized appropriately
-    	let currentuserIndex = 0; // Assuming this is initialized appropriately
-    	let timestamps = []; // Array of timestamps
-    	let userTimestamps = []; // Array of user timestamps
-    	let r2userTimestamps = []; // Array of user timestamps
-    	let currentvideoId = 'qEpmiA3XkX8';
-    	let youTubeApiLoaded = false;
-    	let currentvideoduration;
-    	let regeneratedautotimestamps = false;
+    	const block = {
+    		c: function create() {
+    			div = element("div");
+    			span = element("span");
+    			t0 = text(t0_value);
+    			t1 = space();
+    			button = element("button");
+    			button.textContent = "Reply";
+    			t3 = space();
+    			if (if_block) if_block.c();
+    			t4 = space();
+    			add_location(span, file$4, 120, 16, 4453);
+    			add_location(button, file$4, 121, 16, 4499);
 
-    	window.onYouTubeIframeAPIReady = function () {
-    		youTubeApiLoaded = true;
-    		initYouTubePlayer();
-    	};
+    			attr_dev(div, "class", div_class_value = "" + (null_to_empty(/*comment*/ ctx[14].level === 0
+    			? 'top-level-comment'
+    			: 'comment') + " svelte-bsj1sx"));
 
-    	// Function to initialize the YouTube player
-    	function initYouTubePlayer() {
-    		if (!youTubeApiLoaded) {
-    			console.error("YouTube API is not ready yet.");
-    			return;
-    		}
+    			set_style(div, "margin-left", /*comment*/ ctx[14].level * 20 + "px");
+    			add_location(div, file$4, 119, 12, 4323);
+    		},
+    		m: function mount(target, anchor) {
+    			insert_dev(target, div, anchor);
+    			append_dev(div, span);
+    			append_dev(span, t0);
+    			append_dev(div, t1);
+    			append_dev(div, button);
+    			append_dev(div, t3);
+    			if (if_block) if_block.m(div, null);
+    			append_dev(div, t4);
 
-    		regeneratedautotimestamps = false;
+    			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 & /*flattenedComments*/ 2 && t0_value !== (t0_value = /*comment*/ ctx[14].title + "")) set_data_dev(t0, t0_value);
 
-    		// Clear existing interval
-    		clearInterval(timeUpdateInterval);
+    			if (/*showReplyInput*/ ctx[3][/*comment*/ ctx[14].id]) {
+    				if (if_block) {
+    					if_block.p(ctx, dirty);
+    				} else {
+    					if_block = create_if_block$2(ctx);
+    					if_block.c();
+    					if_block.m(div, t4);
+    				}
+    			} else if (if_block) {
+    				if_block.d(1);
+    				if_block = null;
+    			}
 
-    		// 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
-    					}
-    				});
-    		}
+    			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);
+    			}
 
-    		// Reset and start the interval to update current time
-    		timeUpdateInterval = setInterval(updateCurrentTime, 1000);
-    	}
+    			if (dirty & /*flattenedComments*/ 2) {
+    				set_style(div, "margin-left", /*comment*/ ctx[14].level * 20 + "px");
+    			}
+    		},
+    		d: function destroy(detaching) {
+    			if (detaching) detach_dev(div);
+    			if (if_block) if_block.d();
+    			mounted = false;
+    			dispose();
+    		}
+    	};
 
-    	onMount(() => {
-    		// Load the YouTube IFrame Player API
-    		const tag = document.createElement('script');
+    	dispatch_dev("SvelteRegisterBlock", {
+    		block,
+    		id: create_each_block$2.name,
+    		type: "each",
+    		source: "(119:8) {#each flattenedComments as comment}",
+    		ctx
+    	});
 
-    		tag.src = "https://www.youtube.com/iframe_api";
-    		const firstScriptTag = document.getElementsByTagName('script')[0];
-    		firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
+    	return block;
+    }
 
-    		// Update the current time every second
-    		timeUpdateInterval = setInterval(updateCurrentTime, 1000);
-    	});
+    function create_fragment$4(ctx) {
+    	let h1;
+    	let t1;
+    	let h4;
+    	let t3;
+    	let div2;
+    	let div0;
+    	let button0;
+    	let t5;
+    	let input0;
+    	let t6;
+    	let input1;
+    	let t7;
+    	let button1;
+    	let t9;
+    	let br;
+    	let t10;
+    	let div1;
+    	let mounted;
+    	let dispose;
+    	let each_value = /*flattenedComments*/ ctx[1];
+    	validate_each_argument(each_value);
+    	let each_blocks = [];
 
-    	function autogeneratedtimestamps() {
-    		currentvideoduration = player.getDuration();
+    	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));
+    	}
 
-    		//console.log("Video Duration: ", currentvideoduration);
-    		const generatedTimestamps = [];
+    	const block = {
+    		c: function create() {
+    			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";
+    			t5 = text("\r\n        | Import Exported Comments \r\n        ");
+    			input0 = element("input");
+    			t6 = text("\r\n        | \r\n        ");
+    			input1 = element("input");
+    			t7 = space();
+    			button1 = element("button");
+    			button1.textContent = "Post Comment";
+    			t9 = space();
+    			br = element("br");
+    			t10 = space();
+    			div1 = element("div");
 
-    		for (let i = interval; i < currentvideoduration; i += interval) {
-    			generatedTimestamps.push(i);
-    		}
+    			for (let i = 0; i < each_blocks.length; i += 1) {
+    				each_blocks[i].c();
+    			}
 
-    		$$invalidate(8, timestamps = generatedTimestamps);
+    			add_location(h1, file$4, 104, 0, 3512);
+    			add_location(h4, file$4, 105, 0, 3614);
+    			add_location(button0, file$4, 108, 8, 3897);
+    			attr_dev(input0, "type", "file");
+    			add_location(input0, file$4, 110, 8, 4000);
+    			attr_dev(input1, "placeholder", "Add a comment...");
+    			add_location(input1, file$4, 112, 8, 4072);
+    			add_location(button1, file$4, 113, 8, 4146);
+    			add_location(div0, file$4, 107, 4, 3882);
+    			add_location(br, file$4, 116, 4, 4225);
+    			attr_dev(div1, "id", "comment-container");
+    			add_location(div1, file$4, 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$4, 106, 0, 3795);
+    		},
+    		l: function claim(nodes) {
+    			throw new Error("options.hydrate only works if the component was compiled with the `hydratable: true` option");
+    		},
+    		m: function mount(target, anchor) {
+    			insert_dev(target, h1, anchor);
+    			insert_dev(target, t1, anchor);
+    			insert_dev(target, h4, anchor);
+    			insert_dev(target, t3, anchor);
+    			insert_dev(target, div2, anchor);
+    			append_dev(div2, div0);
+    			append_dev(div0, button0);
+    			append_dev(div0, t5);
+    			append_dev(div0, input0);
+    			append_dev(div0, t6);
+    			append_dev(div0, input1);
+    			set_input_value(input1, /*newComment*/ ctx[0]);
+    			append_dev(div0, t7);
+    			append_dev(div0, button1);
+    			append_dev(div2, t9);
+    			append_dev(div2, br);
+    			append_dev(div2, t10);
+    			append_dev(div2, div1);
 
-    		// Do something with the timestamps
-    		//console.log("Generated Timestamps: ", generatedTimestamps);
-    		regeneratedautotimestamps = true;
-    	}
+    			for (let i = 0; i < each_blocks.length; i += 1) {
+    				if (each_blocks[i]) {
+    					each_blocks[i].m(div1, null);
+    				}
+    			}
 
-    	// Event handler for when the player is ready
-    	function onPlayerReady(event) {
-    		autogeneratedtimestamps();
-    	}
+    			if (!mounted) {
+    				dispose = [
+    					listen_dev(button0, "click", /*exportToJson*/ ctx[7], false, false, false, false),
+    					listen_dev(input0, "change", /*handleFileUpload*/ ctx[8], false, false, false, false),
+    					listen_dev(input1, "input", /*input1_input_handler*/ ctx[9]),
+    					listen_dev(button1, "click", /*addComment*/ ctx[4], false, false, false, false)
+    				];
 
-    	function onPlayerStateChange(event) {
-    		if (event.data === YT.PlayerState.PLAYING || event.data === YT.PlayerState.PAUSED) {
-    			updateCurrentIndex();
-    		}
+    				mounted = true;
+    			}
+    		},
+    		p: function update(ctx, [dirty]) {
+    			if (dirty & /*newComment*/ 1 && input1.value !== /*newComment*/ ctx[0]) {
+    				set_input_value(input1, /*newComment*/ ctx[0]);
+    			}
 
-    		// Check if the video has just started playing
-    		if (event.data === YT.PlayerState.PLAYING && !regeneratedautotimestamps) {
-    			autogeneratedtimestamps();
-    		}
-    	}
+    			if (dirty & /*flattenedComments, addReply, replyText, toggleReplyInput, showReplyInput*/ 110) {
+    				each_value = /*flattenedComments*/ ctx[1];
+    				validate_each_argument(each_value);
+    				let i;
 
-    	function updateCurrentIndex() {
-    		const currentTime = player.getCurrentTime();
+    				for (i = 0; i < each_value.length; i += 1) {
+    					const child_ctx = get_each_context$2(ctx, each_value, i);
 
-    		// Find the closest timestamp
-    		let closest = timestamps.reduce((prev, curr) => Math.abs(curr - currentTime) < Math.abs(prev - currentTime)
-    		? curr
-    		: prev);
+    					if (each_blocks[i]) {
+    						each_blocks[i].p(child_ctx, dirty);
+    					} else {
+    						each_blocks[i] = create_each_block$2(child_ctx);
+    						each_blocks[i].c();
+    						each_blocks[i].m(div1, null);
+    					}
+    				}
 
-    		$$invalidate(7, currentIndex = timestamps.indexOf(closest));
-    	}
+    				for (; i < each_blocks.length; i += 1) {
+    					each_blocks[i].d(1);
+    				}
 
-    	function updateCurrentTime() {
-    		if (player && player.getCurrentTime) {
-    			$$invalidate(3, currentTime = player.getCurrentTime());
+    				each_blocks.length = each_value.length;
+    			}
+    		},
+    		i: noop,
+    		o: noop,
+    		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;
+    			run_all(dispose);
     		}
-    	}
+    	};
 
-    	onDestroy(() => {
-    		clearInterval(timeUpdateInterval);
+    	dispatch_dev("SvelteRegisterBlock", {
+    		block,
+    		id: create_fragment$4.name,
+    		type: "component",
+    		source: "",
+    		ctx
     	});
 
-    	function updateWord() {
-    		if (isUpdating) {
-    			$$invalidate(5, line = lines[Math.floor(Math.random() * lines.length)]);
-    			$$invalidate(4, currentWord = getRandomWord(line));
-    		}
-    	}
-
-    	function toggleUpdate() {
-    		$$invalidate(6, isUpdating = !isUpdating);
+    	return block;
+    }
 
-    		if (isUpdating) {
-    			updateWord(); // Immediately update once
-    			updateInterval = setInterval(updateWord, 3000); // Update every 3 seconds
-    		} else {
-    			clearInterval(updateInterval);
-    			$$invalidate(5, line = '');
-    			$$invalidate(4, currentWord = '');
-    		}
-    	}
+    function flattenStructure(items, level = 0, parentId = null, processedIds = new Set()) {
+    	let result = [];
 
-    	function goToNextAutoTimestamp() {
-    		if (currentIndex < timestamps.length - 1) {
-    			$$invalidate(7, currentIndex += 1);
-    			player.seekTo(timestamps[currentIndex], true);
-    		}
-    	}
+    	items.forEach(item => {
+    		if (processedIds.has(item.id)) return;
+    		result.push({ ...item, level, parentId });
+    		processedIds.add(item.id);
 
-    	function goToPreviousAutoTimestamp() {
-    		if (currentIndex > 0) {
-    			$$invalidate(7, currentIndex -= 1);
-    			player.seekTo(timestamps[currentIndex], true);
+    		if (item.items && Array.isArray(item.items)) {
+    			const childItems = flattenStructure(item.items, level + 1, item.id, processedIds);
+    			result = result.concat(childItems);
     		}
-    	}
-
-    	function addUserTimestamp() {
-    		const currentTime = Math.floor(player.getCurrentTime());
-    		$$invalidate(1, userTimestamps = [...userTimestamps, currentTime].sort((a, b) => a - b));
-    	}
-
-    	function addr2UserTimestamp() {
-    		const currentTime = Math.floor(player.getCurrentTime());
-    		$$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.
-    	}
+    	return result;
+    }
 
-    	function goToNextUserTimestamp() {
-    		if (currentuserIndex < userTimestamps.length - 1) {
-    			$$invalidate(0, currentuserIndex += 1);
-    			player.seekTo(userTimestamps[currentuserIndex], true);
-    		} else {
-    			// Handle the end of the list here
-    			console.log("Reached the end of user timestamps.");
-    		} // You can also disable the "next" button or loop to the start if needed.
-    	}
+    function instance$4($$self, $$props, $$invalidate) {
+    	let { $$slots: slots = {}, $$scope } = $$props;
+    	validate_slots('RecursiveNestedCommentsElement', slots, []);
+    	let comments = [];
+    	let newComment = '';
+    	let flattenedComments = [];
+    	let replyText = {};
+    	let showReplyInput = {};
 
-    	function goToPreviousUserTimestamp() {
-    		if (currentuserIndex > 0) {
-    			$$invalidate(0, currentuserIndex -= 1);
-    			player.seekTo(userTimestamps[currentuserIndex], true);
-    		} else {
-    			// Handle the beginning of the list here
-    			console.log("Reached the start of user timestamps.");
-    		} // You can also disable the "previous" button or loop to the end if needed.
-    	}
+    	const addComment = () => {
+    		comments = [
+    			...comments,
+    			{
+    				id: v4(),
+    				title: newComment,
+    				items: []
+    			}
+    		];
 
-    	function exportTimestamps() {
-    		const data = JSON.stringify({
-    			currentvideoId,
-    			timestamps: userTimestamps
-    		});
+    		$$invalidate(0, newComment = '');
+    		$$invalidate(1, flattenedComments = flattenStructure(comments));
+    	};
 
-    		const blob = new Blob([data], { type: 'application/json' });
-    		const url = URL.createObjectURL(blob);
-    		const a = document.createElement('a');
-    		a.style.display = 'none';
-    		const filename = `${currentvideoId}_timestamps.json`;
-    		a.href = url;
-    		a.download = filename;
-    		document.body.appendChild(a);
-    		a.click();
-    		window.URL.revokeObjectURL(url);
-    	}
+    	const addReply = (parentId, replyText) => {
+    		const findAndAddReply = (items, id) => {
+    			for (let item of items) {
+    				if (item.id === id) {
+    					item.items.push({
+    						id: v4(),
+    						title: replyText,
+    						items: []
+    					});
 
-    	function exportr2Timestamps() {
-    		const data = JSON.stringify({
-    			currentvideoId,
-    			timestamps: r2userTimestamps
-    		});
+    					return true;
+    				}
 
-    		const blob = new Blob([data], { type: 'application/json' });
-    		const url = URL.createObjectURL(blob);
-    		const a = document.createElement('a');
-    		a.style.display = 'none';
-    		const filename = `${currentvideoId}_round2timestamps.json`;
-    		a.href = url;
-    		a.download = filename;
-    		document.body.appendChild(a);
-    		a.click();
-    		window.URL.revokeObjectURL(url);
-    	}
+    				if (item.items.length && findAndAddReply(item.items, id)) {
+    					return true;
+    				}
+    			}
 
-    	function importTimestamps(event) {
-    		// Check if the file input is not empty
-    		const file = event.target.files[0];
+    			return false;
+    		};
 
-    		if (!event.target.files || event.target.files.length === 0) {
-    			alert('No file selected.');
-    			return;
-    		}
+    		findAndAddReply(comments, parentId);
+    		$$invalidate(1, flattenedComments = flattenStructure(comments));
+    	};
 
-    		// Check if the file is a Blob (File objects inherit from Blob)
-    		if (!(file instanceof Blob)) {
-    			alert('Selected item is not a file.');
-    			return;
-    		}
+    	// Function to toggle reply input
+    	function toggleReplyInput(commentId) {
+    		$$invalidate(3, showReplyInput[commentId] = !showReplyInput[commentId], showReplyInput);
+    	}
 
+    	function exportToJson() {
+    		const dataStr = "data:text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(comments));
+    		const downloadAnchorNode = document.createElement('a');
+    		downloadAnchorNode.setAttribute("href", dataStr);
+    		downloadAnchorNode.setAttribute("download", "comments.json");
+    		document.body.appendChild(downloadAnchorNode);
+    		downloadAnchorNode.click();
+    		downloadAnchorNode.remove();
+    	}
+
+    	function handleFileUpload(event) {
+    		const file = event.target.files[0];
+    		if (!file) return;
     		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;
-    				}
+    			const text = e.target.result;
 
-    				$$invalidate(2, currentvideoId = data.currentvideoId || '');
-    				$$invalidate(1, userTimestamps = data.timestamps);
+    			try {
+    				comments = JSON.parse(text);
+    				$$invalidate(1, flattenedComments = flattenStructure(comments));
     			} catch(error) {
-    				alert('An error occurred while importing timestamps.'); //regeneratedautotimestamps = false; = true
+    				console.error("Error parsing JSON:", error);
     			}
     		};
 
@@ -3101,295 +4299,172 @@ var app = (function () {
     	const writable_props = [];
 
     	Object.keys($$props).forEach(key => {
-    		if (!~writable_props.indexOf(key) && key.slice(0, 2) !== '$$' && key !== 'slot') console_1$2.warn(`<YoutubeIframeAPICustomInterface> was created with unknown prop '${key}'`);
+    		if (!~writable_props.indexOf(key) && key.slice(0, 2) !== '$$' && key !== 'slot') console_1$2.warn(`<RecursiveNestedCommentsElement> was created with unknown prop '${key}'`);
     	});
 
-    	function input0_input_handler() {
-    		currentvideoId = this.value;
-    		$$invalidate(2, currentvideoId);
-    	}
-
-    	function input1_change_handler() {
-    		isUpdating = this.checked;
-    		$$invalidate(6, isUpdating);
+    	function input1_input_handler() {
+    		newComment = this.value;
+    		$$invalidate(0, newComment);
     	}
 
-    	$$self.$capture_state = () => ({
-    		onMount,
-    		onDestroy,
-    		player,
-    		interval,
-    		currentTime,
-    		timeUpdateInterval,
-    		transcript,
-    		lines,
-    		currentWord,
-    		line,
-    		isUpdating,
-    		updateInterval,
-    		currentIndex,
-    		currentuserIndex,
-    		timestamps,
-    		userTimestamps,
-    		r2userTimestamps,
-    		currentvideoId,
-    		youTubeApiLoaded,
-    		currentvideoduration,
-    		regeneratedautotimestamps,
-    		initYouTubePlayer,
-    		autogeneratedtimestamps,
-    		onPlayerReady,
-    		onPlayerStateChange,
-    		updateCurrentIndex,
-    		updateCurrentTime,
-    		getRandomWord,
-    		updateWord,
-    		toggleUpdate,
-    		goToNextAutoTimestamp,
-    		goToPreviousAutoTimestamp,
-    		addUserTimestamp,
-    		addr2UserTimestamp,
-    		goToCurrentUserTimestamp,
-    		goToNextUserTimestamp,
-    		goToPreviousUserTimestamp,
-    		exportTimestamps,
-    		exportr2Timestamps,
-    		importTimestamps,
-    		currentindexButtonClass,
-    		previousindexButtonClass,
-    		nextindexButtonClass
-    	});
-
-    	$$self.$inject_state = $$props => {
-    		if ('player' in $$props) player = $$props.player;
-    		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(4, currentWord = $$props.currentWord);
-    		if ('line' in $$props) $$invalidate(5, line = $$props.line);
-    		if ('isUpdating' in $$props) $$invalidate(6, isUpdating = $$props.isUpdating);
-    		if ('updateInterval' in $$props) updateInterval = $$props.updateInterval;
-    		if ('currentIndex' in $$props) $$invalidate(7, currentIndex = $$props.currentIndex);
-    		if ('currentuserIndex' in $$props) $$invalidate(0, currentuserIndex = $$props.currentuserIndex);
-    		if ('timestamps' in $$props) $$invalidate(8, timestamps = $$props.timestamps);
-    		if ('userTimestamps' in $$props) $$invalidate(1, userTimestamps = $$props.userTimestamps);
-    		if ('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);
-    	};
+    	const click_handler = comment => toggleReplyInput(comment.id);
 
-    	if ($$props && "$$inject" in $$props) {
-    		$$self.$inject_state($$props.$$inject);
+    	function input_input_handler(comment) {
+    		replyText[comment.id] = this.value;
+    		$$invalidate(2, replyText);
     	}
 
-    	$$self.$$.update = () => {
-    		if ($$self.$$.dirty[0] & /*currentvideoId*/ 4) {
-    			if (currentvideoId) {
-    				initYouTubePlayer();
-    			}
-    		}
-
-    		if ($$self.$$.dirty[0] & /*currentuserIndex, userTimestamps*/ 3) {
-    			$$invalidate(12, nextindexButtonClass = currentuserIndex >= userTimestamps.length - 1
-    			? 'button-at-end'
-    			: 'button');
-    		}
-
-    		if ($$self.$$.dirty[0] & /*currentuserIndex*/ 1) {
-    			$$invalidate(11, previousindexButtonClass = currentuserIndex <= 0 ? 'button-at-end' : 'button');
-    		}
-
-    		if ($$self.$$.dirty[0] & /*currentuserIndex*/ 1) {
-    			$$invalidate(10, currentindexButtonClass = currentuserIndex <= 0 ? 'button-at-end' : 'button');
-    		}
+    	const click_handler_1 = comment => {
+    		addReply(comment.id, replyText[comment.id]);
+    		toggleReplyInput(comment.id);
     	};
 
-    	return [
-    		currentuserIndex,
-    		userTimestamps,
-    		currentvideoId,
-    		currentTime,
-    		currentWord,
-    		line,
-    		isUpdating,
-    		currentIndex,
-    		timestamps,
-    		r2userTimestamps,
-    		currentindexButtonClass,
-    		previousindexButtonClass,
-    		nextindexButtonClass,
-    		interval,
-    		toggleUpdate,
-    		goToNextAutoTimestamp,
-    		goToPreviousAutoTimestamp,
-    		addUserTimestamp,
-    		goToCurrentUserTimestamp,
-    		goToNextUserTimestamp,
-    		goToPreviousUserTimestamp,
-    		exportTimestamps,
-    		exportr2Timestamps,
-    		importTimestamps,
-    		input0_input_handler,
-    		input1_change_handler
-    	];
-    }
-
-    class YoutubeIframeAPICustomInterface extends SvelteComponentDev {
-    	constructor(options) {
-    		super(options);
-    		init(this, options, instance$4, create_fragment$4, safe_not_equal, {}, null, [-1, -1]);
-
-    		dispatch_dev("SvelteRegisterComponent", {
-    			component: this,
-    			tagName: "YoutubeIframeAPICustomInterface",
-    			options,
-    			id: create_fragment$4.name
-    		});
-    	}
-    }
-
-    // Unique ID creation requires a high quality random # generator. In the browser we therefore
-    // require the crypto API and do not support built-in fallback to lower quality random number
-    // generators (like Math.random()).
-    let getRandomValues;
-    const rnds8 = new Uint8Array(16);
-    function rng() {
-      // lazy load so that environments that need to polyfill have a chance to do so
-      if (!getRandomValues) {
-        // getRandomValues needs to be invoked in a context where "this" is a Crypto implementation.
-        getRandomValues = typeof crypto !== 'undefined' && crypto.getRandomValues && crypto.getRandomValues.bind(crypto);
-
-        if (!getRandomValues) {
-          throw new Error('crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported');
-        }
-      }
-
-      return getRandomValues(rnds8);
-    }
-
-    /**
-     * Convert array of 16 byte values to UUID string format of the form:
-     * XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX
-     */
-
-    const byteToHex = [];
-
-    for (let i = 0; i < 256; ++i) {
-      byteToHex.push((i + 0x100).toString(16).slice(1));
-    }
-
-    function unsafeStringify(arr, offset = 0) {
-      // Note: Be careful editing this code!  It's been tuned for performance
-      // and works in ways you may not expect. See https://github.com/uuidjs/uuid/pull/434
-      return byteToHex[arr[offset + 0]] + byteToHex[arr[offset + 1]] + byteToHex[arr[offset + 2]] + byteToHex[arr[offset + 3]] + '-' + byteToHex[arr[offset + 4]] + byteToHex[arr[offset + 5]] + '-' + byteToHex[arr[offset + 6]] + byteToHex[arr[offset + 7]] + '-' + byteToHex[arr[offset + 8]] + byteToHex[arr[offset + 9]] + '-' + byteToHex[arr[offset + 10]] + byteToHex[arr[offset + 11]] + byteToHex[arr[offset + 12]] + byteToHex[arr[offset + 13]] + byteToHex[arr[offset + 14]] + byteToHex[arr[offset + 15]];
-    }
-
-    const randomUUID = typeof crypto !== 'undefined' && crypto.randomUUID && crypto.randomUUID.bind(crypto);
-    var native = {
-      randomUUID
-    };
-
-    function v4(options, buf, offset) {
-      if (native.randomUUID && !buf && !options) {
-        return native.randomUUID();
-      }
-
-      options = options || {};
-      const rnds = options.random || (options.rng || rng)(); // Per 4.4, set bits for version and `clock_seq_hi_and_reserved`
+    	$$self.$capture_state = () => ({
+    		uuidv4: v4,
+    		comments,
+    		newComment,
+    		flattenedComments,
+    		replyText,
+    		showReplyInput,
+    		flattenStructure,
+    		addComment,
+    		addReply,
+    		toggleReplyInput,
+    		exportToJson,
+    		handleFileUpload
+    	});
 
-      rnds[6] = rnds[6] & 0x0f | 0x40;
-      rnds[8] = rnds[8] & 0x3f | 0x80; // Copy bytes to buffer, if provided
+    	$$self.$inject_state = $$props => {
+    		if ('comments' in $$props) comments = $$props.comments;
+    		if ('newComment' in $$props) $$invalidate(0, newComment = $$props.newComment);
+    		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 (buf) {
-        offset = offset || 0;
+    	if ($$props && "$$inject" in $$props) {
+    		$$self.$inject_state($$props.$$inject);
+    	}
 
-        for (let i = 0; i < 16; ++i) {
-          buf[offset + i] = rnds[i];
-        }
+    	return [
+    		newComment,
+    		flattenedComments,
+    		replyText,
+    		showReplyInput,
+    		addComment,
+    		addReply,
+    		toggleReplyInput,
+    		exportToJson,
+    		handleFileUpload,
+    		input1_input_handler,
+    		click_handler,
+    		input_input_handler,
+    		click_handler_1
+    	];
+    }
 
-        return buf;
-      }
+    class RecursiveNestedCommentsElement extends SvelteComponentDev {
+    	constructor(options) {
+    		super(options);
+    		init(this, options, instance$4, create_fragment$4, safe_not_equal, {});
 
-      return unsafeStringify(rnds);
+    		dispatch_dev("SvelteRegisterComponent", {
+    			component: this,
+    			tagName: "RecursiveNestedCommentsElement",
+    			options,
+    			id: create_fragment$4.name
+    		});
+    	}
     }
 
-    /* src\RecursiveNestedCommentsElement.svelte generated by Svelte v3.59.2 */
+    /* src\CopyandRemoveListComponent.svelte generated by Svelte v3.59.2 */
 
     const { console: console_1$1 } = globals;
-    const file$3 = "src\\RecursiveNestedCommentsElement.svelte";
+    const file$3 = "src\\CopyandRemoveListComponent.svelte";
 
-    function get_each_context$2(ctx, list, i) {
+    function get_each_context$1(ctx, list, i) {
     	const child_ctx = ctx.slice();
-    	child_ctx[14] = list[i];
-    	child_ctx[15] = list;
-    	child_ctx[16] = i;
+    	child_ctx[6] = list[i];
     	return child_ctx;
     }
 
-    // (123:16) {#if showReplyInput[comment.id]}
-    function create_if_block$1(ctx) {
-    	let div;
-    	let input;
-    	let t0;
-    	let button;
-    	let mounted;
-    	let dispose;
-
-    	function input_input_handler() {
-    		/*input_input_handler*/ ctx[11].call(input, /*comment*/ ctx[14]);
-    	}
+    // (26:0) {:else}
+    function create_else_block(ctx) {
+    	let each_blocks = [];
+    	let each_1_lookup = new Map();
+    	let each_1_anchor;
+    	let each_value = /*items*/ ctx[1];
+    	validate_each_argument(each_value);
+    	const get_key = ctx => /*item*/ ctx[6].id;
+    	validate_each_keys(ctx, each_value, get_each_context$1, get_key);
 
-    	function click_handler_1() {
-    		return /*click_handler_1*/ ctx[12](/*comment*/ ctx[14]);
+    	for (let i = 0; i < each_value.length; i += 1) {
+    		let child_ctx = get_each_context$1(ctx, each_value, i);
+    		let key = get_key(child_ctx);
+    		each_1_lookup.set(key, each_blocks[i] = create_each_block$1(key, child_ctx));
     	}
 
     	const block = {
     		c: function create() {
-    			div = element("div");
-    			input = element("input");
-    			t0 = space();
-    			button = element("button");
-    			button.textContent = "Post Reply";
-    			attr_dev(input, "placeholder", "Write a reply...");
-    			add_location(input, file$3, 124, 24, 4690);
-    			add_location(button, file$3, 125, 24, 4791);
-    			attr_dev(div, "class", "reply-input");
-    			add_location(div, file$3, 123, 20, 4639);
+    			for (let i = 0; i < each_blocks.length; i += 1) {
+    				each_blocks[i].c();
+    			}
+
+    			each_1_anchor = empty();
     		},
     		m: function mount(target, anchor) {
-    			insert_dev(target, div, anchor);
-    			append_dev(div, input);
-    			set_input_value(input, /*replyText*/ ctx[2][/*comment*/ ctx[14].id]);
-    			append_dev(div, t0);
-    			append_dev(div, button);
-
-    			if (!mounted) {
-    				dispose = [
-    					listen_dev(input, "input", input_input_handler),
-    					listen_dev(button, "click", click_handler_1, false, false, false, false)
-    				];
+    			for (let i = 0; i < each_blocks.length; i += 1) {
+    				if (each_blocks[i]) {
+    					each_blocks[i].m(target, anchor);
+    				}
+    			}
 
-    				mounted = true;
+    			insert_dev(target, each_1_anchor, anchor);
+    		},
+    		p: function update(ctx, dirty) {
+    			if (dirty & /*copyAndRemoveItem, items*/ 10) {
+    				each_value = /*items*/ ctx[1];
+    				validate_each_argument(each_value);
+    				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, each_1_anchor.parentNode, destroy_block, create_each_block$1, each_1_anchor, get_each_context$1);
     			}
     		},
-    		p: function update(new_ctx, dirty) {
-    			ctx = new_ctx;
-
-    			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) {
+    			for (let i = 0; i < each_blocks.length; i += 1) {
+    				each_blocks[i].d(detaching);
     			}
+
+    			if (detaching) detach_dev(each_1_anchor);
+    		}
+    	};
+
+    	dispatch_dev("SvelteRegisterBlock", {
+    		block,
+    		id: create_else_block.name,
+    		type: "else",
+    		source: "(26:0) {:else}",
+    		ctx
+    	});
+
+    	return block;
+    }
+
+    // (24:0) {#if items.length === 0}
+    function create_if_block$1(ctx) {
+    	let p;
+
+    	const block = {
+    		c: function create() {
+    			p = element("p");
+    			p.textContent = "All items have been copied! (or none entered yet)";
+    			add_location(p, file$3, 24, 4, 732);
+    		},
+    		m: function mount(target, anchor) {
+    			insert_dev(target, p, anchor);
     		},
+    		p: noop,
     		d: function destroy(detaching) {
-    			if (detaching) detach_dev(div);
-    			mounted = false;
-    			run_all(dispose);
+    			if (detaching) detach_dev(p);
     		}
     	};
 
@@ -3397,63 +4472,41 @@ var app = (function () {
     		block,
     		id: create_if_block$1.name,
     		type: "if",
-    		source: "(123:16) {#if showReplyInput[comment.id]}",
+    		source: "(24:0) {#if items.length === 0}",
     		ctx
     	});
 
     	return block;
     }
 
-    // (119:8) {#each flattenedComments as comment}
-    function create_each_block$2(ctx) {
-    	let div;
-    	let span;
-    	let t0_value = /*comment*/ ctx[14].title + "";
+    // (27:4) {#each items as item (item.id)}
+    function create_each_block$1(key_1, ctx) {
+    	let button;
+    	let t0_value = /*item*/ ctx[6].text + "";
     	let t0;
     	let t1;
-    	let button;
-    	let t3;
-    	let t4;
-    	let div_class_value;
     	let mounted;
     	let dispose;
 
     	function click_handler() {
-    		return /*click_handler*/ ctx[10](/*comment*/ ctx[14]);
+    		return /*click_handler*/ ctx[5](/*item*/ ctx[6]);
     	}
 
-    	let if_block = /*showReplyInput*/ ctx[3][/*comment*/ ctx[14].id] && create_if_block$1(ctx);
-
     	const block = {
+    		key: key_1,
+    		first: null,
     		c: function create() {
-    			div = element("div");
-    			span = element("span");
+    			button = element("button");
     			t0 = text(t0_value);
     			t1 = space();
-    			button = element("button");
-    			button.textContent = "Reply";
-    			t3 = space();
-    			if (if_block) if_block.c();
-    			t4 = space();
-    			add_location(span, file$3, 120, 16, 4453);
-    			add_location(button, file$3, 121, 16, 4499);
-
-    			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[14].level * 20 + "px");
-    			add_location(div, file$3, 119, 12, 4323);
+    			attr_dev(button, "class", "item svelte-bmbf24");
+    			add_location(button, file$3, 27, 8, 844);
+    			this.first = button;
     		},
     		m: function mount(target, anchor) {
-    			insert_dev(target, div, anchor);
-    			append_dev(div, span);
-    			append_dev(span, t0);
-    			append_dev(div, t1);
-    			append_dev(div, button);
-    			append_dev(div, t3);
-    			if (if_block) if_block.m(div, null);
-    			append_dev(div, t4);
+    			insert_dev(target, button, anchor);
+    			append_dev(button, t0);
+    			append_dev(button, t1);
 
     			if (!mounted) {
     				dispose = listen_dev(button, "click", click_handler, false, false, false, false);
@@ -3462,34 +4515,10 @@ var app = (function () {
     		},
     		p: function update(new_ctx, dirty) {
     			ctx = new_ctx;
-    			if (dirty & /*flattenedComments*/ 2 && t0_value !== (t0_value = /*comment*/ ctx[14].title + "")) set_data_dev(t0, t0_value);
-
-    			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.c();
-    					if_block.m(div, t4);
-    				}
-    			} else if (if_block) {
-    				if_block.d(1);
-    				if_block = null;
-    			}
-
-    			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[14].level * 20 + "px");
-    			}
+    			if (dirty & /*items*/ 2 && t0_value !== (t0_value = /*item*/ ctx[6].text + "")) set_data_dev(t0, t0_value);
     		},
     		d: function destroy(detaching) {
-    			if (detaching) detach_dev(div);
-    			if (if_block) if_block.d();
+    			if (detaching) detach_dev(button);
     			mounted = false;
     			dispose();
     		}
@@ -3497,9 +4526,9 @@ var app = (function () {
 
     	dispatch_dev("SvelteRegisterBlock", {
     		block,
-    		id: create_each_block$2.name,
+    		id: create_each_block$1.name,
     		type: "each",
-    		source: "(119:8) {#each flattenedComments as comment}",
+    		source: "(27:4) {#each items as item (item.id)}",
     		ctx
     	});
 
@@ -3509,75 +4538,33 @@ var app = (function () {
     function create_fragment$3(ctx) {
     	let h1;
     	let t1;
-    	let h4;
-    	let t3;
-    	let div2;
-    	let div0;
-    	let button0;
-    	let t5;
-    	let input0;
-    	let t6;
-    	let input1;
-    	let t7;
-    	let button1;
-    	let t9;
-    	let br;
-    	let t10;
-    	let div1;
+    	let textarea;
+    	let t2;
+    	let if_block_anchor;
     	let mounted;
     	let dispose;
-    	let each_value = /*flattenedComments*/ ctx[1];
-    	validate_each_argument(each_value);
-    	let each_blocks = [];
 
-    	for (let i = 0; i < each_value.length; i += 1) {
-    		each_blocks[i] = create_each_block$2(get_each_context$2(ctx, each_value, i));
+    	function select_block_type(ctx, dirty) {
+    		if (/*items*/ ctx[1].length === 0) return create_if_block$1;
+    		return create_else_block;
     	}
 
+    	let current_block_type = select_block_type(ctx);
+    	let if_block = current_block_type(ctx);
+
     	const block = {
     		c: function create() {
     			h1 = element("h1");
-    			h1.textContent = "Reddit based Nested Comments Idea for LMM responses that need further branching responses";
+    			h1.textContent = "Copy items for prompts by clicking buttons below";
     			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";
-    			t5 = text("\r\n        | Import Exported Comments \r\n        ");
-    			input0 = element("input");
-    			t6 = text("\r\n        | \r\n        ");
-    			input1 = element("input");
-    			t7 = space();
-    			button1 = element("button");
-    			button1.textContent = "Post Comment";
-    			t9 = space();
-    			br = element("br");
-    			t10 = space();
-    			div1 = element("div");
-
-    			for (let i = 0; i < each_blocks.length; i += 1) {
-    				each_blocks[i].c();
-    			}
-
-    			add_location(h1, file$3, 104, 0, 3512);
-    			add_location(h4, file$3, 105, 0, 3614);
-    			add_location(button0, file$3, 108, 8, 3897);
-    			attr_dev(input0, "type", "file");
-    			add_location(input0, file$3, 110, 8, 4000);
-    			attr_dev(input1, "placeholder", "Add a comment...");
-    			add_location(input1, file$3, 112, 8, 4072);
-    			add_location(button1, file$3, 113, 8, 4146);
-    			add_location(div0, file$3, 107, 4, 3882);
-    			add_location(br, file$3, 116, 4, 4225);
-    			attr_dev(div1, "id", "comment-container");
-    			add_location(div1, file$3, 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$3, 106, 0, 3795);
+    			textarea = element("textarea");
+    			t2 = space();
+    			if_block.c();
+    			if_block_anchor = empty();
+    			add_location(h1, file$3, 19, 0, 537);
+    			attr_dev(textarea, "placeholder", "Enter text here...");
+    			attr_dev(textarea, "class", "svelte-bmbf24");
+    			add_location(textarea, file$3, 21, 0, 598);
     		},
     		l: function claim(nodes) {
     			throw new Error("options.hydrate only works if the component was compiled with the `hydratable: true` option");
@@ -3585,67 +4572,36 @@ 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, t5);
-    			append_dev(div0, input0);
-    			append_dev(div0, t6);
-    			append_dev(div0, input1);
-    			set_input_value(input1, /*newComment*/ ctx[0]);
-    			append_dev(div0, t7);
-    			append_dev(div0, button1);
-    			append_dev(div2, t9);
-    			append_dev(div2, br);
-    			append_dev(div2, t10);
-    			append_dev(div2, div1);
-
-    			for (let i = 0; i < each_blocks.length; i += 1) {
-    				if (each_blocks[i]) {
-    					each_blocks[i].m(div1, null);
-    				}
-    			}
+    			insert_dev(target, textarea, anchor);
+    			set_input_value(textarea, /*textInput*/ ctx[0]);
+    			insert_dev(target, t2, anchor);
+    			if_block.m(target, anchor);
+    			insert_dev(target, if_block_anchor, anchor);
 
     			if (!mounted) {
     				dispose = [
-    					listen_dev(button0, "click", /*exportToJson*/ ctx[7], false, false, false, false),
-    					listen_dev(input0, "change", /*handleFileUpload*/ ctx[8], false, false, false, false),
-    					listen_dev(input1, "input", /*input1_input_handler*/ ctx[9]),
-    					listen_dev(button1, "click", /*addComment*/ ctx[4], false, false, false, false)
+    					listen_dev(textarea, "input", /*textarea_input_handler*/ ctx[4]),
+    					listen_dev(textarea, "input", /*updateItems*/ ctx[2], false, false, false, false)
     				];
 
     				mounted = true;
     			}
     		},
     		p: function update(ctx, [dirty]) {
-    			if (dirty & /*newComment*/ 1 && input1.value !== /*newComment*/ ctx[0]) {
-    				set_input_value(input1, /*newComment*/ ctx[0]);
+    			if (dirty & /*textInput*/ 1) {
+    				set_input_value(textarea, /*textInput*/ ctx[0]);
     			}
 
-    			if (dirty & /*flattenedComments, addReply, replyText, toggleReplyInput, showReplyInput*/ 110) {
-    				each_value = /*flattenedComments*/ ctx[1];
-    				validate_each_argument(each_value);
-    				let i;
-
-    				for (i = 0; i < each_value.length; i += 1) {
-    					const child_ctx = get_each_context$2(ctx, each_value, i);
-
-    					if (each_blocks[i]) {
-    						each_blocks[i].p(child_ctx, dirty);
-    					} else {
-    						each_blocks[i] = create_each_block$2(child_ctx);
-    						each_blocks[i].c();
-    						each_blocks[i].m(div1, null);
-    					}
-    				}
+    			if (current_block_type === (current_block_type = select_block_type(ctx)) && if_block) {
+    				if_block.p(ctx, dirty);
+    			} else {
+    				if_block.d(1);
+    				if_block = current_block_type(ctx);
 
-    				for (; i < each_blocks.length; i += 1) {
-    					each_blocks[i].d(1);
+    				if (if_block) {
+    					if_block.c();
+    					if_block.m(if_block_anchor.parentNode, if_block_anchor);
     				}
-
-    				each_blocks.length = each_value.length;
     			}
     		},
     		i: noop,
@@ -3653,10 +4609,10 @@ 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);
+    			if (detaching) detach_dev(textarea);
+    			if (detaching) detach_dev(t2);
+    			if_block.d(detaching);
+    			if (detaching) detach_dev(if_block_anchor);
     			mounted = false;
     			run_all(dispose);
     		}
@@ -3673,149 +4629,48 @@ var app = (function () {
     	return block;
     }
 
-    function flattenStructure(items, level = 0, parentId = null, processedIds = new Set()) {
-    	let result = [];
-
-    	items.forEach(item => {
-    		if (processedIds.has(item.id)) return;
-    		result.push({ ...item, level, parentId });
-    		processedIds.add(item.id);
-
-    		if (item.items && Array.isArray(item.items)) {
-    			const childItems = flattenStructure(item.items, level + 1, item.id, processedIds);
-    			result = result.concat(childItems);
-    		}
-    	});
-
-    	return result;
-    }
-
     function instance$3($$self, $$props, $$invalidate) {
     	let { $$slots: slots = {}, $$scope } = $$props;
-    	validate_slots('RecursiveNestedCommentsElement', slots, []);
-    	let comments = [];
-    	let newComment = '';
-    	let flattenedComments = [];
-    	let replyText = {};
-    	let showReplyInput = {};
-
-    	const addComment = () => {
-    		comments = [
-    			...comments,
-    			{
-    				id: v4(),
-    				title: newComment,
-    				items: []
-    			}
-    		];
-
-    		$$invalidate(0, newComment = '');
-    		$$invalidate(1, flattenedComments = flattenStructure(comments));
-    	};
-
-    	const addReply = (parentId, replyText) => {
-    		const findAndAddReply = (items, id) => {
-    			for (let item of items) {
-    				if (item.id === id) {
-    					item.items.push({
-    						id: v4(),
-    						title: replyText,
-    						items: []
-    					});
-
-    					return true;
-    				}
-
-    				if (item.items.length && findAndAddReply(item.items, id)) {
-    					return true;
-    				}
-    			}
-
-    			return false;
-    		};
-
-    		findAndAddReply(comments, parentId);
-    		$$invalidate(1, flattenedComments = flattenStructure(comments));
-    	};
-
-    	// Function to toggle reply input
-    	function toggleReplyInput(commentId) {
-    		$$invalidate(3, showReplyInput[commentId] = !showReplyInput[commentId], showReplyInput);
-    	}
+    	validate_slots('CopyandRemoveListComponent', slots, []);
+    	let textInput = '';
+    	let items = [];
 
-    	function exportToJson() {
-    		const dataStr = "data:text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(comments));
-    		const downloadAnchorNode = document.createElement('a');
-    		downloadAnchorNode.setAttribute("href", dataStr);
-    		downloadAnchorNode.setAttribute("download", "comments.json");
-    		document.body.appendChild(downloadAnchorNode);
-    		downloadAnchorNode.click();
-    		downloadAnchorNode.remove();
+    	function updateItems() {
+    		$$invalidate(1, items = textInput.split('\n').filter(line => line.trim() !== '').map((line, index) => ({ id: index + line, text: line })));
     	}
 
-    	function handleFileUpload(event) {
-    		const file = event.target.files[0];
-    		if (!file) return;
-    		const reader = new FileReader();
-
-    		reader.onload = e => {
-    			const text = e.target.result;
-
-    			try {
-    				comments = JSON.parse(text);
-    				$$invalidate(1, flattenedComments = flattenStructure(comments));
-    			} catch(error) {
-    				console.error("Error parsing JSON:", error);
-    			}
-    		};
-
-    		reader.readAsText(file);
+    	async function copyAndRemoveItem(item) {
+    		try {
+    			await navigator.clipboard.writeText(item.text);
+    			$$invalidate(1, items = items.filter(i => i.id !== item.id));
+    		} catch(err) {
+    			console.error('Failed to copy text: ', err);
+    		}
     	}
 
     	const writable_props = [];
 
     	Object.keys($$props).forEach(key => {
-    		if (!~writable_props.indexOf(key) && key.slice(0, 2) !== '$$' && key !== 'slot') console_1$1.warn(`<RecursiveNestedCommentsElement> was created with unknown prop '${key}'`);
+    		if (!~writable_props.indexOf(key) && key.slice(0, 2) !== '$$' && key !== 'slot') console_1$1.warn(`<CopyandRemoveListComponent> was created with unknown prop '${key}'`);
     	});
 
-    	function input1_input_handler() {
-    		newComment = this.value;
-    		$$invalidate(0, newComment);
-    	}
-
-    	const click_handler = comment => toggleReplyInput(comment.id);
-
-    	function input_input_handler(comment) {
-    		replyText[comment.id] = this.value;
-    		$$invalidate(2, replyText);
+    	function textarea_input_handler() {
+    		textInput = this.value;
+    		$$invalidate(0, textInput);
     	}
 
-    	const click_handler_1 = comment => {
-    		addReply(comment.id, replyText[comment.id]);
-    		toggleReplyInput(comment.id);
-    	};
-
-    	$$self.$capture_state = () => ({
-    		uuidv4: v4,
-    		comments,
-    		newComment,
-    		flattenedComments,
-    		replyText,
-    		showReplyInput,
-    		flattenStructure,
-    		addComment,
-    		addReply,
-    		toggleReplyInput,
-    		exportToJson,
-    		handleFileUpload
+    	const click_handler = item => copyAndRemoveItem(item);
+
+    	$$self.$capture_state = () => ({
+    		textInput,
+    		items,
+    		updateItems,
+    		copyAndRemoveItem
     	});
 
     	$$self.$inject_state = $$props => {
-    		if ('comments' in $$props) comments = $$props.comments;
-    		if ('newComment' in $$props) $$invalidate(0, newComment = $$props.newComment);
-    		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 ('textInput' in $$props) $$invalidate(0, textInput = $$props.textInput);
+    		if ('items' in $$props) $$invalidate(1, items = $$props.items);
     	};
 
     	if ($$props && "$$inject" in $$props) {
@@ -3823,149 +4678,54 @@ var app = (function () {
     	}
 
     	return [
-    		newComment,
-    		flattenedComments,
-    		replyText,
-    		showReplyInput,
-    		addComment,
-    		addReply,
-    		toggleReplyInput,
-    		exportToJson,
-    		handleFileUpload,
-    		input1_input_handler,
-    		click_handler,
-    		input_input_handler,
-    		click_handler_1
+    		textInput,
+    		items,
+    		updateItems,
+    		copyAndRemoveItem,
+    		textarea_input_handler,
+    		click_handler
     	];
     }
 
-    class RecursiveNestedCommentsElement extends SvelteComponentDev {
+    class CopyandRemoveListComponent extends SvelteComponentDev {
     	constructor(options) {
     		super(options);
     		init(this, options, instance$3, create_fragment$3, safe_not_equal, {});
 
     		dispatch_dev("SvelteRegisterComponent", {
     			component: this,
-    			tagName: "RecursiveNestedCommentsElement",
+    			tagName: "CopyandRemoveListComponent",
     			options,
     			id: create_fragment$3.name
     		});
     	}
     }
 
-    /* src\CopyandRemoveListComponent.svelte generated by Svelte v3.59.2 */
+    /* src\ReadingStateCounter.svelte generated by Svelte v3.59.2 */
 
-    const { console: console_1 } = globals;
-    const file$2 = "src\\CopyandRemoveListComponent.svelte";
+    const file$2 = "src\\ReadingStateCounter.svelte";
 
-    function get_each_context$1(ctx, list, i) {
+    function get_each_context(ctx, list, i) {
     	const child_ctx = ctx.slice();
-    	child_ctx[6] = list[i];
+    	child_ctx[8] = list[i];
+    	child_ctx[10] = i;
     	return child_ctx;
     }
 
-    // (26:0) {:else}
-    function create_else_block(ctx) {
-    	let each_blocks = [];
-    	let each_1_lookup = new Map();
-    	let each_1_anchor;
-    	let each_value = /*items*/ ctx[1];
-    	validate_each_argument(each_value);
-    	const get_key = ctx => /*item*/ ctx[6].id;
-    	validate_each_keys(ctx, each_value, get_each_context$1, get_key);
-
-    	for (let i = 0; i < each_value.length; i += 1) {
-    		let child_ctx = get_each_context$1(ctx, each_value, i);
-    		let key = get_key(child_ctx);
-    		each_1_lookup.set(key, each_blocks[i] = create_each_block$1(key, child_ctx));
-    	}
-
-    	const block = {
-    		c: function create() {
-    			for (let i = 0; i < each_blocks.length; i += 1) {
-    				each_blocks[i].c();
-    			}
-
-    			each_1_anchor = empty();
-    		},
-    		m: function mount(target, anchor) {
-    			for (let i = 0; i < each_blocks.length; i += 1) {
-    				if (each_blocks[i]) {
-    					each_blocks[i].m(target, anchor);
-    				}
-    			}
-
-    			insert_dev(target, each_1_anchor, anchor);
-    		},
-    		p: function update(ctx, dirty) {
-    			if (dirty & /*copyAndRemoveItem, items*/ 10) {
-    				each_value = /*items*/ ctx[1];
-    				validate_each_argument(each_value);
-    				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, each_1_anchor.parentNode, destroy_block, create_each_block$1, each_1_anchor, get_each_context$1);
-    			}
-    		},
-    		d: function destroy(detaching) {
-    			for (let i = 0; i < each_blocks.length; i += 1) {
-    				each_blocks[i].d(detaching);
-    			}
-
-    			if (detaching) detach_dev(each_1_anchor);
-    		}
-    	};
-
-    	dispatch_dev("SvelteRegisterBlock", {
-    		block,
-    		id: create_else_block.name,
-    		type: "else",
-    		source: "(26:0) {:else}",
-    		ctx
-    	});
-
-    	return block;
-    }
-
-    // (24:0) {#if items.length === 0}
-    function create_if_block(ctx) {
-    	let p;
-
-    	const block = {
-    		c: function create() {
-    			p = element("p");
-    			p.textContent = "All items have been copied! (or none entered yet)";
-    			add_location(p, file$2, 24, 4, 732);
-    		},
-    		m: function mount(target, anchor) {
-    			insert_dev(target, p, anchor);
-    		},
-    		p: noop,
-    		d: function destroy(detaching) {
-    			if (detaching) detach_dev(p);
-    		}
-    	};
-
-    	dispatch_dev("SvelteRegisterBlock", {
-    		block,
-    		id: create_if_block.name,
-    		type: "if",
-    		source: "(24:0) {#if items.length === 0}",
-    		ctx
-    	});
-
-    	return block;
-    }
-
-    // (27:4) {#each items as item (item.id)}
-    function create_each_block$1(key_1, ctx) {
+    // (66:4) {#each words as wordObj, index (wordObj.word)}
+    function create_each_block(key_1, ctx) {
     	let button;
-    	let t0_value = /*item*/ ctx[6].text + "";
+    	let t0_value = /*wordObj*/ ctx[8].word + "";
     	let t0;
     	let t1;
+    	let t2_value = /*wordObj*/ ctx[8].count + "";
+    	let t2;
+    	let t3;
     	let mounted;
     	let dispose;
 
     	function click_handler() {
-    		return /*click_handler*/ ctx[5](/*item*/ ctx[6]);
+    		return /*click_handler*/ ctx[7](/*index*/ ctx[10]);
     	}
 
     	const block = {
@@ -3974,15 +4734,20 @@ var app = (function () {
     		c: function create() {
     			button = element("button");
     			t0 = text(t0_value);
-    			t1 = space();
-    			attr_dev(button, "class", "item svelte-bmbf24");
-    			add_location(button, file$2, 27, 8, 844);
+    			t1 = text(" (");
+    			t2 = text(t2_value);
+    			t3 = text(")\r\n        ");
+    			attr_dev(button, "class", "word-button svelte-13vjncp");
+    			set_style(button, "background-color", getColor(/*wordObj*/ ctx[8].count));
+    			add_location(button, file$2, 66, 8, 1940);
     			this.first = button;
     		},
     		m: function mount(target, anchor) {
     			insert_dev(target, button, anchor);
     			append_dev(button, t0);
     			append_dev(button, t1);
+    			append_dev(button, t2);
+    			append_dev(button, t3);
 
     			if (!mounted) {
     				dispose = listen_dev(button, "click", click_handler, false, false, false, false);
@@ -3991,7 +4756,12 @@ var app = (function () {
     		},
     		p: function update(new_ctx, dirty) {
     			ctx = new_ctx;
-    			if (dirty & /*items*/ 2 && t0_value !== (t0_value = /*item*/ ctx[6].text + "")) set_data_dev(t0, t0_value);
+    			if (dirty & /*words*/ 2 && t0_value !== (t0_value = /*wordObj*/ ctx[8].word + "")) set_data_dev(t0, t0_value);
+    			if (dirty & /*words*/ 2 && t2_value !== (t2_value = /*wordObj*/ ctx[8].count + "")) set_data_dev(t2, t2_value);
+
+    			if (dirty & /*words*/ 2) {
+    				set_style(button, "background-color", getColor(/*wordObj*/ ctx[8].count));
+    			}
     		},
     		d: function destroy(detaching) {
     			if (detaching) detach_dev(button);
@@ -4002,9 +4772,9 @@ var app = (function () {
 
     	dispatch_dev("SvelteRegisterBlock", {
     		block,
-    		id: create_each_block$1.name,
+    		id: create_each_block.name,
     		type: "each",
-    		source: "(27:4) {#each items as item (item.id)}",
+    		source: "(66:4) {#each words as wordObj, index (wordObj.word)}",
     		ctx
     	});
 
@@ -4012,83 +4782,128 @@ var app = (function () {
     }
 
     function create_fragment$2(ctx) {
+    	let div0;
     	let h1;
     	let t1;
-    	let textarea;
+    	let input0;
     	let t2;
-    	let if_block_anchor;
+    	let button0;
+    	let t4;
+    	let button1;
+    	let t6;
+    	let input1;
+    	let t7;
+    	let div1;
+    	let each_blocks = [];
+    	let each_1_lookup = new Map();
     	let mounted;
     	let dispose;
+    	let each_value = /*words*/ ctx[1];
+    	validate_each_argument(each_value);
+    	const get_key = ctx => /*wordObj*/ ctx[8].word;
+    	validate_each_keys(ctx, each_value, get_each_context, get_key);
 
-    	function select_block_type(ctx, dirty) {
-    		if (/*items*/ ctx[1].length === 0) return create_if_block;
-    		return create_else_block;
+    	for (let i = 0; i < each_value.length; i += 1) {
+    		let child_ctx = get_each_context(ctx, each_value, i);
+    		let key = get_key(child_ctx);
+    		each_1_lookup.set(key, each_blocks[i] = create_each_block(key, child_ctx));
     	}
 
-    	let current_block_type = select_block_type(ctx);
-    	let if_block = current_block_type(ctx);
-
     	const block = {
     		c: function create() {
+    			div0 = element("div");
     			h1 = element("h1");
-    			h1.textContent = "Copy items for prompts by clicking buttons below";
+    			h1.textContent = "Stateful Reader Brainstorm";
     			t1 = space();
-    			textarea = element("textarea");
+    			input0 = element("input");
     			t2 = space();
-    			if_block.c();
-    			if_block_anchor = empty();
-    			add_location(h1, file$2, 19, 0, 537);
-    			attr_dev(textarea, "placeholder", "Enter text here...");
-    			attr_dev(textarea, "class", "svelte-bmbf24");
-    			add_location(textarea, file$2, 21, 0, 598);
+    			button0 = element("button");
+    			button0.textContent = "Submit Text";
+    			t4 = space();
+    			button1 = element("button");
+    			button1.textContent = "Export to JSON";
+    			t6 = space();
+    			input1 = element("input");
+    			t7 = space();
+    			div1 = element("div");
+
+    			for (let i = 0; i < each_blocks.length; i += 1) {
+    				each_blocks[i].c();
+    			}
+
+    			add_location(h1, file$2, 57, 4, 1576);
+    			attr_dev(input0, "type", "text");
+    			attr_dev(input0, "placeholder", "Enter text here");
+    			attr_dev(input0, "class", "svelte-13vjncp");
+    			add_location(input0, file$2, 58, 4, 1617);
+    			attr_dev(button0, "class", "svelte-13vjncp");
+    			add_location(button0, file$2, 59, 4, 1696);
+    			attr_dev(button1, "class", "svelte-13vjncp");
+    			add_location(button1, file$2, 60, 4, 1752);
+    			attr_dev(input1, "type", "file");
+    			attr_dev(input1, "class", "svelte-13vjncp");
+    			add_location(input1, file$2, 61, 4, 1813);
+    			add_location(div0, file$2, 56, 0, 1565);
+    			add_location(div1, file$2, 64, 0, 1873);
     		},
     		l: function claim(nodes) {
     			throw new Error("options.hydrate only works if the component was compiled with the `hydratable: true` option");
     		},
     		m: function mount(target, anchor) {
-    			insert_dev(target, h1, anchor);
-    			insert_dev(target, t1, anchor);
-    			insert_dev(target, textarea, anchor);
-    			set_input_value(textarea, /*textInput*/ ctx[0]);
-    			insert_dev(target, t2, anchor);
-    			if_block.m(target, anchor);
-    			insert_dev(target, if_block_anchor, anchor);
+    			insert_dev(target, div0, anchor);
+    			append_dev(div0, h1);
+    			append_dev(div0, t1);
+    			append_dev(div0, input0);
+    			set_input_value(input0, /*inputText*/ ctx[0]);
+    			append_dev(div0, t2);
+    			append_dev(div0, button0);
+    			append_dev(div0, t4);
+    			append_dev(div0, button1);
+    			append_dev(div0, t6);
+    			append_dev(div0, input1);
+    			insert_dev(target, t7, anchor);
+    			insert_dev(target, div1, anchor);
+
+    			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(textarea, "input", /*textarea_input_handler*/ ctx[4]),
-    					listen_dev(textarea, "input", /*updateItems*/ ctx[2], false, false, false, false)
+    					listen_dev(input0, "input", /*input0_input_handler*/ ctx[6]),
+    					listen_dev(button0, "click", /*submitText*/ ctx[2], false, false, false, false),
+    					listen_dev(button1, "click", /*exportToJson*/ ctx[4], false, false, false, false),
+    					listen_dev(input1, "change", /*importFromJson*/ ctx[5], false, false, false, false)
     				];
 
     				mounted = true;
     			}
     		},
-    		p: function update(ctx, [dirty]) {
-    			if (dirty & /*textInput*/ 1) {
-    				set_input_value(textarea, /*textInput*/ ctx[0]);
+    		p: function update(ctx, [dirty]) {
+    			if (dirty & /*inputText*/ 1 && input0.value !== /*inputText*/ ctx[0]) {
+    				set_input_value(input0, /*inputText*/ ctx[0]);
     			}
 
-    			if (current_block_type === (current_block_type = select_block_type(ctx)) && if_block) {
-    				if_block.p(ctx, dirty);
-    			} else {
-    				if_block.d(1);
-    				if_block = current_block_type(ctx);
-
-    				if (if_block) {
-    					if_block.c();
-    					if_block.m(if_block_anchor.parentNode, if_block_anchor);
-    				}
+    			if (dirty & /*getColor, words, handleClick*/ 10) {
+    				each_value = /*words*/ ctx[1];
+    				validate_each_argument(each_value);
+    				validate_each_keys(ctx, each_value, get_each_context, get_key);
+    				each_blocks = update_keyed_each(each_blocks, dirty, get_key, 1, ctx, each_value, each_1_lookup, div1, destroy_block, create_each_block, null, get_each_context);
     			}
     		},
     		i: noop,
     		o: noop,
     		d: function destroy(detaching) {
-    			if (detaching) detach_dev(h1);
-    			if (detaching) detach_dev(t1);
-    			if (detaching) detach_dev(textarea);
-    			if (detaching) detach_dev(t2);
-    			if_block.d(detaching);
-    			if (detaching) detach_dev(if_block_anchor);
+    			if (detaching) detach_dev(div0);
+    			if (detaching) detach_dev(t7);
+    			if (detaching) detach_dev(div1);
+
+    			for (let i = 0; i < each_blocks.length; i += 1) {
+    				each_blocks[i].d();
+    			}
+
     			mounted = false;
     			run_all(dispose);
     		}
@@ -4105,48 +4920,92 @@ var app = (function () {
     	return block;
     }
 
+    function getColor(count) {
+    	const colors = [
+    		'#1a1a1a',
+    		'#333333',
+    		'#4d4d4d',
+    		'#666666',
+    		'#808080',
+    		'#999999',
+    		'#b3b3b3',
+    		'#cccccc',
+    		'#e6e6e6',
+    		'#ffffff'
+    	];
+
+    	return colors[Math.min(Math.floor(count / 10), 9)];
+    }
+
     function instance$2($$self, $$props, $$invalidate) {
     	let { $$slots: slots = {}, $$scope } = $$props;
-    	validate_slots('CopyandRemoveListComponent', slots, []);
-    	let textInput = '';
-    	let items = [];
+    	validate_slots('ReadingStateCounter', slots, []);
+    	let inputText = "";
+    	let words = [];
 
-    	function updateItems() {
-    		$$invalidate(1, items = textInput.split('\n').filter(line => line.trim() !== '').map((line, index) => ({ id: index + line, text: line })));
+    	function submitText() {
+    		$$invalidate(1, words = inputText.split(/\s+/).map(word => ({ word, count: 0 })));
     	}
 
-    	async function copyAndRemoveItem(item) {
-    		try {
-    			await navigator.clipboard.writeText(item.text);
-    			$$invalidate(1, items = items.filter(i => i.id !== item.id));
-    		} catch(err) {
-    			console.error('Failed to copy text: ', err);
+    	function handleClick(index) {
+    		$$invalidate(1, words[index].count += 1, words);
+    		$$invalidate(1, words = [...words]); // Ensures Svelte detects the change
+    	}
+
+    	// Function to export data to JSON
+    	function exportToJson() {
+    		const jsonData = JSON.stringify(words);
+    		const blob = new Blob([jsonData], { type: "application/json" });
+    		const url = URL.createObjectURL(blob);
+    		const a = document.createElement('a');
+    		a.href = url;
+    		a.download = 'statefulwords.json';
+    		a.click();
+    		URL.revokeObjectURL(url);
+    	}
+
+    	// Function to handle file import
+    	function importFromJson(event) {
+    		const file = event.target.files[0];
+
+    		if (file) {
+    			const reader = new FileReader();
+
+    			reader.onload = e => {
+    				const json = e.target.result;
+    				$$invalidate(1, words = JSON.parse(json));
+    			};
+
+    			reader.readAsText(file);
     		}
     	}
 
     	const writable_props = [];
 
     	Object.keys($$props).forEach(key => {
-    		if (!~writable_props.indexOf(key) && key.slice(0, 2) !== '$$' && key !== 'slot') console_1.warn(`<CopyandRemoveListComponent> was created with unknown prop '${key}'`);
+    		if (!~writable_props.indexOf(key) && key.slice(0, 2) !== '$$' && key !== 'slot') console.warn(`<ReadingStateCounter> was created with unknown prop '${key}'`);
     	});
 
-    	function textarea_input_handler() {
-    		textInput = this.value;
-    		$$invalidate(0, textInput);
+    	function input0_input_handler() {
+    		inputText = this.value;
+    		$$invalidate(0, inputText);
     	}
 
-    	const click_handler = item => copyAndRemoveItem(item);
+    	const click_handler = index => handleClick(index);
 
     	$$self.$capture_state = () => ({
-    		textInput,
-    		items,
-    		updateItems,
-    		copyAndRemoveItem
+    		inputText,
+    		words,
+    		submitText,
+    		handleClick,
+    		getColor,
+    		exportToJson,
+    		importFromJson
     	});
 
     	$$self.$inject_state = $$props => {
-    		if ('textInput' in $$props) $$invalidate(0, textInput = $$props.textInput);
-    		if ('items' in $$props) $$invalidate(1, items = $$props.items);
+    		if ('inputText' in $$props) $$invalidate(0, inputText = $$props.inputText);
+    		if ('words' in $$props) $$invalidate(1, words = $$props.words);
     	};
 
     	if ($$props && "$$inject" in $$props) {
@@ -4154,103 +5013,119 @@ var app = (function () {
     	}
 
     	return [
-    		textInput,
-    		items,
-    		updateItems,
-    		copyAndRemoveItem,
-    		textarea_input_handler,
+    		inputText,
+    		words,
+    		submitText,
+    		handleClick,
+    		exportToJson,
+    		importFromJson,
+    		input0_input_handler,
     		click_handler
     	];
     }
 
-    class CopyandRemoveListComponent extends SvelteComponentDev {
+    class ReadingStateCounter extends SvelteComponentDev {
     	constructor(options) {
     		super(options);
     		init(this, options, instance$2, create_fragment$2, safe_not_equal, {});
 
     		dispatch_dev("SvelteRegisterComponent", {
     			component: this,
-    			tagName: "CopyandRemoveListComponent",
+    			tagName: "ReadingStateCounter",
     			options,
     			id: create_fragment$2.name
     		});
     	}
     }
 
-    /* src\ReadingStateCounter.svelte generated by Svelte v3.59.2 */
-
-    const file$1 = "src\\ReadingStateCounter.svelte";
+    /* src\DeliberateSubconciousRepititionPractice.svelte generated by Svelte v3.59.2 */
 
-    function get_each_context(ctx, list, i) {
-    	const child_ctx = ctx.slice();
-    	child_ctx[8] = list[i];
-    	child_ctx[10] = i;
-    	return child_ctx;
-    }
+    const { Object: Object_1, console: console_1 } = globals;
+    const file$1 = "src\\DeliberateSubconciousRepititionPractice.svelte";
 
-    // (66:4) {#each words as wordObj, index (wordObj.word)}
-    function create_each_block(key_1, ctx) {
-    	let button;
-    	let t0_value = /*wordObj*/ ctx[8].word + "";
-    	let t0;
+    // (156:0) {#if selectedItem}
+    function create_if_block_1(ctx) {
+    	let div;
+    	let strong0;
     	let t1;
-    	let t2_value = /*wordObj*/ ctx[8].count + "";
+    	let t2_value = /*selectedItem*/ ctx[1].text + "";
     	let t2;
     	let t3;
-    	let mounted;
-    	let dispose;
-
-    	function click_handler() {
-    		return /*click_handler*/ ctx[7](/*index*/ ctx[10]);
-    	}
+    	let strong1;
+    	let t5;
+    	let t6_value = /*counts*/ ctx[2][/*selectedItem*/ ctx[1].id] + "";
+    	let t6;
 
     	const block = {
-    		key: key_1,
-    		first: null,
     		c: function create() {
-    			button = element("button");
-    			t0 = text(t0_value);
-    			t1 = text(" (");
+    			div = element("div");
+    			strong0 = element("strong");
+    			strong0.textContent = "Current Word:";
+    			t1 = space();
     			t2 = text(t2_value);
-    			t3 = text(")\r\n        ");
-    			attr_dev(button, "class", "word-button svelte-13vjncp");
-    			set_style(button, "background-color", getColor(/*wordObj*/ ctx[8].count));
-    			add_location(button, file$1, 66, 8, 1940);
-    			this.first = button;
+    			t3 = space();
+    			strong1 = element("strong");
+    			strong1.textContent = "Count:";
+    			t5 = space();
+    			t6 = text(t6_value);
+    			add_location(strong0, file$1, 157, 8, 5744);
+    			add_location(strong1, file$1, 158, 8, 5805);
+    			add_location(div, file$1, 156, 4, 5729);
     		},
     		m: function mount(target, anchor) {
-    			insert_dev(target, button, anchor);
-    			append_dev(button, t0);
-    			append_dev(button, t1);
-    			append_dev(button, t2);
-    			append_dev(button, t3);
-
-    			if (!mounted) {
-    				dispose = listen_dev(button, "click", click_handler, false, false, false, false);
-    				mounted = true;
-    			}
+    			insert_dev(target, div, anchor);
+    			append_dev(div, strong0);
+    			append_dev(div, t1);
+    			append_dev(div, t2);
+    			append_dev(div, t3);
+    			append_dev(div, strong1);
+    			append_dev(div, t5);
+    			append_dev(div, t6);
     		},
-    		p: function update(new_ctx, dirty) {
-    			ctx = new_ctx;
-    			if (dirty & /*words*/ 2 && t0_value !== (t0_value = /*wordObj*/ ctx[8].word + "")) set_data_dev(t0, t0_value);
-    			if (dirty & /*words*/ 2 && t2_value !== (t2_value = /*wordObj*/ ctx[8].count + "")) set_data_dev(t2, t2_value);
+    		p: function update(ctx, dirty) {
+    			if (dirty & /*selectedItem*/ 2 && t2_value !== (t2_value = /*selectedItem*/ ctx[1].text + "")) set_data_dev(t2, t2_value);
+    			if (dirty & /*counts, selectedItem*/ 6 && t6_value !== (t6_value = /*counts*/ ctx[2][/*selectedItem*/ ctx[1].id] + "")) set_data_dev(t6, t6_value);
+    		},
+    		d: function destroy(detaching) {
+    			if (detaching) detach_dev(div);
+    		}
+    	};
 
-    			if (dirty & /*words*/ 2) {
-    				set_style(button, "background-color", getColor(/*wordObj*/ ctx[8].count));
-    			}
+    	dispatch_dev("SvelteRegisterBlock", {
+    		block,
+    		id: create_if_block_1.name,
+    		type: "if",
+    		source: "(156:0) {#if selectedItem}",
+    		ctx
+    	});
+
+    	return block;
+    }
+
+    // (163:0) {#if allWordsLimitReached}
+    function create_if_block(ctx) {
+    	let div;
+
+    	const block = {
+    		c: function create() {
+    			div = element("div");
+    			div.textContent = "All words have reached the count limit.";
+    			attr_dev(div, "class", "alert svelte-fb2ql8");
+    			add_location(div, file$1, 163, 4, 5910);
+    		},
+    		m: function mount(target, anchor) {
+    			insert_dev(target, div, anchor);
     		},
     		d: function destroy(detaching) {
-    			if (detaching) detach_dev(button);
-    			mounted = false;
-    			dispose();
+    			if (detaching) detach_dev(div);
     		}
     	};
 
     	dispatch_dev("SvelteRegisterBlock", {
     		block,
-    		id: create_each_block.name,
-    		type: "each",
-    		source: "(66:4) {#each words as wordObj, index (wordObj.word)}",
+    		id: create_if_block.name,
+    		type: "if",
+    		source: "(163:0) {#if allWordsLimitReached}",
     		ctx
     	});
 
@@ -4258,128 +5133,221 @@ var app = (function () {
     }
 
     function create_fragment$1(ctx) {
-    	let div0;
     	let h1;
     	let t1;
     	let input0;
     	let t2;
     	let button0;
     	let t4;
-    	let button1;
+    	let br;
+    	let t5;
+    	let textarea0;
     	let t6;
-    	let input1;
+    	let hr0;
     	let t7;
-    	let div1;
-    	let each_blocks = [];
-    	let each_1_lookup = new Map();
+    	let div;
+    	let label;
+    	let t9;
+    	let input1;
+    	let t10;
+    	let t11;
+    	let t12;
+    	let button1;
+    	let t14;
+    	let button2;
+    	let t16;
+    	let hr1;
+    	let t17;
+    	let button3;
+    	let t19;
+    	let textarea1;
     	let mounted;
     	let dispose;
-    	let each_value = /*words*/ ctx[1];
-    	validate_each_argument(each_value);
-    	const get_key = ctx => /*wordObj*/ ctx[8].word;
-    	validate_each_keys(ctx, each_value, get_each_context, get_key);
-
-    	for (let i = 0; i < each_value.length; i += 1) {
-    		let child_ctx = get_each_context(ctx, each_value, i);
-    		let key = get_key(child_ctx);
-    		each_1_lookup.set(key, each_blocks[i] = create_each_block(key, child_ctx));
-    	}
+    	let if_block0 = /*selectedItem*/ ctx[1] && create_if_block_1(ctx);
+    	let if_block1 = /*allWordsLimitReached*/ ctx[4] && create_if_block(ctx);
 
     	const block = {
     		c: function create() {
-    			div0 = element("div");
     			h1 = element("h1");
-    			h1.textContent = "Stateful Reader Brainstorm";
+    			h1.textContent = "Random Word till appearance count reached for TTS";
     			t1 = space();
     			input0 = element("input");
     			t2 = space();
     			button0 = element("button");
-    			button0.textContent = "Submit Text";
+    			button0.textContent = "Export Counts";
     			t4 = space();
-    			button1 = element("button");
-    			button1.textContent = "Export to JSON";
+    			br = element("br");
+    			t5 = space();
+    			textarea0 = element("textarea");
     			t6 = space();
-    			input1 = element("input");
+    			hr0 = element("hr");
     			t7 = space();
-    			div1 = element("div");
-
-    			for (let i = 0; i < each_blocks.length; i += 1) {
-    				each_blocks[i].c();
-    			}
-
-    			add_location(h1, file$1, 57, 4, 1576);
-    			attr_dev(input0, "type", "text");
-    			attr_dev(input0, "placeholder", "Enter text here");
-    			attr_dev(input0, "class", "svelte-13vjncp");
-    			add_location(input0, file$1, 58, 4, 1617);
-    			attr_dev(button0, "class", "svelte-13vjncp");
-    			add_location(button0, file$1, 59, 4, 1696);
-    			attr_dev(button1, "class", "svelte-13vjncp");
-    			add_location(button1, file$1, 60, 4, 1752);
-    			attr_dev(input1, "type", "file");
-    			attr_dev(input1, "class", "svelte-13vjncp");
-    			add_location(input1, file$1, 61, 4, 1813);
-    			add_location(div0, file$1, 56, 0, 1565);
-    			add_location(div1, file$1, 64, 0, 1873);
+    			div = element("div");
+    			label = element("label");
+    			label.textContent = "Total Count Limit:";
+    			t9 = space();
+    			input1 = element("input");
+    			t10 = space();
+    			if (if_block0) if_block0.c();
+    			t11 = space();
+    			if (if_block1) if_block1.c();
+    			t12 = space();
+    			button1 = element("button");
+    			button1.textContent = "Start";
+    			t14 = space();
+    			button2 = element("button");
+    			button2.textContent = "Stop";
+    			t16 = space();
+    			hr1 = element("hr");
+    			t17 = space();
+    			button3 = element("button");
+    			button3.textContent = "Simulate one hour or limit Counts";
+    			t19 = space();
+    			textarea1 = element("textarea");
+    			add_location(h1, file$1, 141, 0, 5255);
+    			attr_dev(input0, "type", "file");
+    			add_location(input0, file$1, 143, 0, 5317);
+    			add_location(button0, file$1, 144, 0, 5365);
+    			add_location(br, file$1, 145, 0, 5421);
+    			attr_dev(textarea0, "placeholder", "Enter text here...");
+    			add_location(textarea0, file$1, 146, 0, 5427);
+    			add_location(hr0, file$1, 148, 0, 5531);
+    			attr_dev(label, "for", "totalCountLimit");
+    			add_location(label, file$1, 151, 4, 5550);
+    			attr_dev(input1, "type", "number");
+    			attr_dev(input1, "min", "1");
+    			attr_dev(input1, "id", "totalCountLimit");
+    			add_location(input1, file$1, 152, 4, 5612);
+    			add_location(div, file$1, 150, 0, 5539);
+    			add_location(button1, file$1, 168, 0, 6001);
+    			add_location(button2, file$1, 169, 0, 6042);
+    			add_location(hr1, file$1, 171, 0, 6083);
+    			add_location(button3, file$1, 173, 0, 6091);
+    			textarea1.readOnly = true;
+    			attr_dev(textarea1, "placeholder", "Simulation result will be shown here...");
+    			add_location(textarea1, file$1, 174, 0, 6168);
     		},
     		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, div0, anchor);
-    			append_dev(div0, h1);
-    			append_dev(div0, t1);
-    			append_dev(div0, input0);
-    			set_input_value(input0, /*inputText*/ ctx[0]);
-    			append_dev(div0, t2);
-    			append_dev(div0, button0);
-    			append_dev(div0, t4);
-    			append_dev(div0, button1);
-    			append_dev(div0, t6);
-    			append_dev(div0, input1);
+    			insert_dev(target, h1, anchor);
+    			insert_dev(target, t1, anchor);
+    			insert_dev(target, input0, anchor);
+    			insert_dev(target, t2, anchor);
+    			insert_dev(target, button0, anchor);
+    			insert_dev(target, t4, anchor);
+    			insert_dev(target, br, anchor);
+    			insert_dev(target, t5, anchor);
+    			insert_dev(target, textarea0, anchor);
+    			set_input_value(textarea0, /*textInput*/ ctx[0]);
+    			insert_dev(target, t6, anchor);
+    			insert_dev(target, hr0, anchor);
     			insert_dev(target, t7, anchor);
-    			insert_dev(target, div1, anchor);
-
-    			for (let i = 0; i < each_blocks.length; i += 1) {
-    				if (each_blocks[i]) {
-    					each_blocks[i].m(div1, null);
-    				}
-    			}
+    			insert_dev(target, div, anchor);
+    			append_dev(div, label);
+    			append_dev(div, t9);
+    			append_dev(div, input1);
+    			set_input_value(input1, /*totalCountLimit*/ ctx[3]);
+    			insert_dev(target, t10, anchor);
+    			if (if_block0) if_block0.m(target, anchor);
+    			insert_dev(target, t11, anchor);
+    			if (if_block1) if_block1.m(target, anchor);
+    			insert_dev(target, t12, anchor);
+    			insert_dev(target, button1, anchor);
+    			insert_dev(target, t14, anchor);
+    			insert_dev(target, button2, anchor);
+    			insert_dev(target, t16, anchor);
+    			insert_dev(target, hr1, anchor);
+    			insert_dev(target, t17, anchor);
+    			insert_dev(target, button3, anchor);
+    			insert_dev(target, t19, anchor);
+    			insert_dev(target, textarea1, anchor);
+    			set_input_value(textarea1, /*simulationResult*/ ctx[5]);
 
     			if (!mounted) {
     				dispose = [
-    					listen_dev(input0, "input", /*input0_input_handler*/ ctx[6]),
-    					listen_dev(button0, "click", /*submitText*/ ctx[2], false, false, false, false),
-    					listen_dev(button1, "click", /*exportToJson*/ ctx[4], false, false, false, false),
-    					listen_dev(input1, "change", /*importFromJson*/ ctx[5], false, false, false, false)
+    					listen_dev(input0, "change", /*importCounts*/ ctx[10], false, false, false, false),
+    					listen_dev(button0, "click", /*exportCounts*/ ctx[9], false, false, false, false),
+    					listen_dev(textarea0, "input", /*textarea0_input_handler*/ ctx[12]),
+    					listen_dev(textarea0, "input", /*updateItems*/ ctx[6], false, false, false, false),
+    					listen_dev(input1, "input", /*input1_input_handler*/ ctx[13]),
+    					listen_dev(button1, "click", /*start*/ ctx[7], false, false, false, false),
+    					listen_dev(button2, "click", /*stop*/ ctx[8], false, false, false, false),
+    					listen_dev(button3, "click", /*simulateCount*/ ctx[11], false, false, false, false),
+    					listen_dev(textarea1, "input", /*textarea1_input_handler*/ ctx[14])
     				];
 
     				mounted = true;
     			}
     		},
     		p: function update(ctx, [dirty]) {
-    			if (dirty & /*inputText*/ 1 && input0.value !== /*inputText*/ ctx[0]) {
-    				set_input_value(input0, /*inputText*/ ctx[0]);
+    			if (dirty & /*textInput*/ 1) {
+    				set_input_value(textarea0, /*textInput*/ ctx[0]);
     			}
 
-    			if (dirty & /*getColor, words, handleClick*/ 10) {
-    				each_value = /*words*/ ctx[1];
-    				validate_each_argument(each_value);
-    				validate_each_keys(ctx, each_value, get_each_context, get_key);
-    				each_blocks = update_keyed_each(each_blocks, dirty, get_key, 1, ctx, each_value, each_1_lookup, div1, destroy_block, create_each_block, null, get_each_context);
+    			if (dirty & /*totalCountLimit*/ 8 && to_number(input1.value) !== /*totalCountLimit*/ ctx[3]) {
+    				set_input_value(input1, /*totalCountLimit*/ ctx[3]);
+    			}
+
+    			if (/*selectedItem*/ ctx[1]) {
+    				if (if_block0) {
+    					if_block0.p(ctx, dirty);
+    				} else {
+    					if_block0 = create_if_block_1(ctx);
+    					if_block0.c();
+    					if_block0.m(t11.parentNode, t11);
+    				}
+    			} else if (if_block0) {
+    				if_block0.d(1);
+    				if_block0 = null;
+    			}
+
+    			if (/*allWordsLimitReached*/ ctx[4]) {
+    				if (if_block1) ; else {
+    					if_block1 = create_if_block(ctx);
+    					if_block1.c();
+    					if_block1.m(t12.parentNode, t12);
+    				}
+    			} else if (if_block1) {
+    				if_block1.d(1);
+    				if_block1 = null;
+    			}
+
+    			if (dirty & /*simulationResult*/ 32) {
+    				set_input_value(textarea1, /*simulationResult*/ ctx[5]);
     			}
     		},
     		i: noop,
     		o: noop,
     		d: function destroy(detaching) {
-    			if (detaching) detach_dev(div0);
+    			if (detaching) detach_dev(h1);
+    			if (detaching) detach_dev(t1);
+    			if (detaching) detach_dev(input0);
+    			if (detaching) detach_dev(t2);
+    			if (detaching) detach_dev(button0);
+    			if (detaching) detach_dev(t4);
+    			if (detaching) detach_dev(br);
+    			if (detaching) detach_dev(t5);
+    			if (detaching) detach_dev(textarea0);
+    			if (detaching) detach_dev(t6);
+    			if (detaching) detach_dev(hr0);
     			if (detaching) detach_dev(t7);
-    			if (detaching) detach_dev(div1);
-
-    			for (let i = 0; i < each_blocks.length; i += 1) {
-    				each_blocks[i].d();
-    			}
-
+    			if (detaching) detach_dev(div);
+    			if (detaching) detach_dev(t10);
+    			if (if_block0) if_block0.d(detaching);
+    			if (detaching) detach_dev(t11);
+    			if (if_block1) if_block1.d(detaching);
+    			if (detaching) detach_dev(t12);
+    			if (detaching) detach_dev(button1);
+    			if (detaching) detach_dev(t14);
+    			if (detaching) detach_dev(button2);
+    			if (detaching) detach_dev(t16);
+    			if (detaching) detach_dev(hr1);
+    			if (detaching) detach_dev(t17);
+    			if (detaching) detach_dev(button3);
+    			if (detaching) detach_dev(t19);
+    			if (detaching) detach_dev(textarea1);
     			mounted = false;
     			run_all(dispose);
     		}
@@ -4396,92 +5364,205 @@ var app = (function () {
     	return block;
     }
 
-    function getColor(count) {
-    	const colors = [
-    		'#1a1a1a',
-    		'#333333',
-    		'#4d4d4d',
-    		'#666666',
-    		'#808080',
-    		'#999999',
-    		'#b3b3b3',
-    		'#cccccc',
-    		'#e6e6e6',
-    		'#ffffff'
-    	];
-
-    	return colors[Math.min(Math.floor(count / 10), 9)];
-    }
-
     function instance$1($$self, $$props, $$invalidate) {
     	let { $$slots: slots = {}, $$scope } = $$props;
-    	validate_slots('ReadingStateCounter', slots, []);
-    	let inputText = "";
-    	let words = [];
+    	validate_slots('DeliberateSubconciousRepititionPractice', slots, []);
+    	let textInput = '';
+    	let items = [];
+    	let running = false;
+    	let selectedItem = null;
+    	let intervalId = null;
+    	let counts = {};
+    	let totalCountLimit = 10; // Default limit, can be changed by the user
+    	let allWordsLimitReached = false;
+    	let simulationResult = ''; // Variable to hold the result of the simulation
 
-    	function submitText() {
-    		$$invalidate(1, words = inputText.split(/\s+/).map(word => ({ word, count: 0 })));
+    	function updateItems() {
+    		items = textInput.split(/\W+/).filter(word => word.trim() !== '').map(word => ({ id: word, text: word })); // Use word itself as the ID
+    		$$invalidate(2, counts = items.reduce((acc, item) => ({ ...acc, [item.id]: 0 }), {}));
     	}
 
-    	function handleClick(index) {
-    		$$invalidate(1, words[index].count += 1, words);
-    		$$invalidate(1, words = [...words]); // Ensures Svelte detects the change
+    	function start() {
+    		if (!running && items.length > 0) {
+    			running = true;
+
+    			intervalId = setInterval(
+    				() => {
+    					// Filter out items that have reached the totalCountLimit
+    					const eligibleItems = items.filter(item => counts[item.id] < totalCountLimit);
+
+    					// If there are no eligible items left, stop the timer
+    					if (eligibleItems.length === 0) {
+    						stop();
+    						$$invalidate(4, allWordsLimitReached = true); // Set when all words reach the limit
+    						return;
+    					}
+
+    					// Select a random item from the eligible items
+    					const randomIndex = Math.floor(Math.random() * eligibleItems.length);
+
+    					$$invalidate(1, selectedItem = eligibleItems[randomIndex]);
+    					$$invalidate(2, counts[selectedItem.id]++, counts);
+    				},
+    				1000
+    			);
+    		}
     	}
 
-    	// Function to export data to JSON
-    	function exportToJson() {
-    		const jsonData = JSON.stringify(words);
-    		const blob = new Blob([jsonData], { type: "application/json" });
+    	function stop() {
+    		if (running) {
+    			clearInterval(intervalId);
+    			running = false;
+    			intervalId = null;
+    		}
+    	}
+
+    	function exportCounts() {
+    		const dataStr = JSON.stringify(counts);
+    		const blob = new Blob([dataStr], { type: "application/json" });
     		const url = URL.createObjectURL(blob);
-    		const a = document.createElement('a');
-    		a.href = url;
-    		a.download = 'statefulwords.json';
-    		a.click();
-    		URL.revokeObjectURL(url);
+    		const link = document.createElement("a");
+    		link.download = "counts.json";
+    		link.href = url;
+    		link.click();
     	}
 
-    	// Function to handle file import
-    	function importFromJson(event) {
-    		const file = event.target.files[0];
+    	function importCounts(event) {
+    		const fileReader = new FileReader();
 
-    		if (file) {
-    			const reader = new FileReader();
+    		fileReader.onload = e => {
+    			const data = JSON.parse(e.target.result);
+    			$$invalidate(2, counts = { ...counts, ...data });
 
-    			reader.onload = e => {
-    				const json = e.target.result;
-    				$$invalidate(1, words = JSON.parse(json));
-    			};
+    			items = Object.keys(data).map((word, index) => ({
+    				id: word, // Use word itself as the ID
+    				text: word
+    			}));
 
-    			reader.readAsText(file);
+    			// Ensure existing items are updated if they are not in the imported data
+    			items.forEach(item => {
+    				if (!counts[item.id]) {
+    					$$invalidate(2, counts[item.id] = 0, counts);
+    				}
+    			});
+    		};
+
+    		fileReader.readAsText(event.target.files[0]);
+    	}
+
+    	// ... (other variables and functions remain unchanged)
+    	function simulateCount() {
+    		let simulatedTime = 0;
+    		let maxSimulatedSeconds = 3600; // 3600 seconds = 1 hour
+    		let simulationOutput = ""; // Accumulate output here
+
+    		// Reset the allWordsLimitReached flag and simulationResult
+    		$$invalidate(4, allWordsLimitReached = false);
+
+    		$$invalidate(5, simulationResult = '');
+
+    		// Simulate until max time is reached or all words hit the limit
+    		while (simulatedTime < maxSimulatedSeconds && !allWordsLimitReached) {
+    			const eligibleItems = items.filter(item => counts[item.id] < totalCountLimit);
+
+    			if (eligibleItems.length === 0) {
+    				$$invalidate(4, allWordsLimitReached = true); // Set when all words reach the limit
+    				break; // Exit the loop if all words hit the limit
+    			}
+
+    			// Select a random item and increment its count
+    			const randomIndex = Math.floor(Math.random() * eligibleItems.length);
+
+    			$$invalidate(1, selectedItem = eligibleItems[randomIndex]);
+    			$$invalidate(2, counts[selectedItem.id]++, counts);
+    			simulationOutput += selectedItem.text + " "; // Append selected word to output
+
+    			// Increment simulated time (equivalent to the time between iterations in the real scenario)
+    			simulatedTime++;
+    		}
+
+    		// Update simulationResult with a message
+    		if (allWordsLimitReached) {
+    			$$invalidate(5, simulationResult = "All words have reached the count limit during simulation.");
+    		} else {
+    			$$invalidate(5, simulationResult = `Simulation finished after ${simulatedTime} seconds.`);
+    		}
+
+    		// Export the simulation output to a text file
+    		exportSimulationOutput(simulationOutput);
+    	}
+
+    	function exportSimulationOutput(output) {
+    		if (output) {
+    			const blob = new Blob([output], { type: "text/plain" });
+    			const url = URL.createObjectURL(blob);
+    			const link = document.createElement("a");
+    			link.download = "simulation_output.txt";
+    			link.href = url;
+    			link.click();
+    		} else {
+    			console.error("No simulation output to export.");
+    			$$invalidate(5, simulationResult = "No simulation output to export.");
     		}
     	}
 
+    	onDestroy(() => {
+    		if (intervalId) {
+    			clearInterval(intervalId);
+    		}
+    	});
+
     	const writable_props = [];
 
-    	Object.keys($$props).forEach(key => {
-    		if (!~writable_props.indexOf(key) && key.slice(0, 2) !== '$$' && key !== 'slot') console.warn(`<ReadingStateCounter> was created with unknown prop '${key}'`);
+    	Object_1.keys($$props).forEach(key => {
+    		if (!~writable_props.indexOf(key) && key.slice(0, 2) !== '$$' && key !== 'slot') console_1.warn(`<DeliberateSubconciousRepititionPractice> was created with unknown prop '${key}'`);
     	});
 
-    	function input0_input_handler() {
-    		inputText = this.value;
-    		$$invalidate(0, inputText);
+    	function textarea0_input_handler() {
+    		textInput = this.value;
+    		$$invalidate(0, textInput);
     	}
 
-    	const click_handler = index => handleClick(index);
+    	function input1_input_handler() {
+    		totalCountLimit = to_number(this.value);
+    		$$invalidate(3, totalCountLimit);
+    	}
+
+    	function textarea1_input_handler() {
+    		simulationResult = this.value;
+    		$$invalidate(5, simulationResult);
+    	}
 
     	$$self.$capture_state = () => ({
-    		inputText,
-    		words,
-    		submitText,
-    		handleClick,
-    		getColor,
-    		exportToJson,
-    		importFromJson
+    		onDestroy,
+    		textInput,
+    		items,
+    		running,
+    		selectedItem,
+    		intervalId,
+    		counts,
+    		totalCountLimit,
+    		allWordsLimitReached,
+    		simulationResult,
+    		updateItems,
+    		start,
+    		stop,
+    		exportCounts,
+    		importCounts,
+    		simulateCount,
+    		exportSimulationOutput
     	});
 
     	$$self.$inject_state = $$props => {
-    		if ('inputText' in $$props) $$invalidate(0, inputText = $$props.inputText);
-    		if ('words' in $$props) $$invalidate(1, words = $$props.words);
+    		if ('textInput' in $$props) $$invalidate(0, textInput = $$props.textInput);
+    		if ('items' in $$props) items = $$props.items;
+    		if ('running' in $$props) running = $$props.running;
+    		if ('selectedItem' in $$props) $$invalidate(1, selectedItem = $$props.selectedItem);
+    		if ('intervalId' in $$props) intervalId = $$props.intervalId;
+    		if ('counts' in $$props) $$invalidate(2, counts = $$props.counts);
+    		if ('totalCountLimit' in $$props) $$invalidate(3, totalCountLimit = $$props.totalCountLimit);
+    		if ('allWordsLimitReached' in $$props) $$invalidate(4, allWordsLimitReached = $$props.allWordsLimitReached);
+    		if ('simulationResult' in $$props) $$invalidate(5, simulationResult = $$props.simulationResult);
     	};
 
     	if ($$props && "$$inject" in $$props) {
@@ -4489,25 +5570,32 @@ var app = (function () {
     	}
 
     	return [
-    		inputText,
-    		words,
-    		submitText,
-    		handleClick,
-    		exportToJson,
-    		importFromJson,
-    		input0_input_handler,
-    		click_handler
+    		textInput,
+    		selectedItem,
+    		counts,
+    		totalCountLimit,
+    		allWordsLimitReached,
+    		simulationResult,
+    		updateItems,
+    		start,
+    		stop,
+    		exportCounts,
+    		importCounts,
+    		simulateCount,
+    		textarea0_input_handler,
+    		input1_input_handler,
+    		textarea1_input_handler
     	];
     }
 
-    class ReadingStateCounter extends SvelteComponentDev {
+    class DeliberateSubconciousRepititionPractice extends SvelteComponentDev {
     	constructor(options) {
     		super(options);
     		init(this, options, instance$1, create_fragment$1, safe_not_equal, {});
 
     		dispatch_dev("SvelteRegisterComponent", {
     			component: this,
-    			tagName: "ReadingStateCounter",
+    			tagName: "DeliberateSubconciousRepititionPractice",
     			options,
     			id: create_fragment$1.name
     		});
@@ -4535,18 +5623,24 @@ var app = (function () {
     	let t11;
     	let h31;
     	let t13;
-    	let readingstatecounter;
+    	let div0;
+    	let subrepprac;
     	let t14;
-    	let copyremove;
+    	let div1;
+    	let readingstatecounter;
     	let t15;
-    	let nestedcommentssvelte;
+    	let div2;
+    	let copyremove;
     	let t16;
-    	let myyoutube;
+    	let nestedcommentssvelte;
     	let t17;
+    	let myyoutube;
+    	let t18;
     	let h12;
-    	let t19;
+    	let t20;
     	let dotgame;
     	let current;
+    	subrepprac = new DeliberateSubconciousRepititionPractice({ $$inline: true });
     	readingstatecounter = new ReadingStateCounter({ $$inline: true });
     	copyremove = new CopyandRemoveListComponent({ $$inline: true });
     	nestedcommentssvelte = new RecursiveNestedCommentsElement({ $$inline: true });
@@ -4576,31 +5670,42 @@ var app = (function () {
     			h31 = element("h3");
     			h31.textContent = "Gradio client Test in another space due to incompatabilitiess with default svelte and @gradio/client";
     			t13 = space();
-    			create_component(readingstatecounter.$$.fragment);
+    			div0 = element("div");
+    			create_component(subrepprac.$$.fragment);
     			t14 = space();
-    			create_component(copyremove.$$.fragment);
+    			div1 = element("div");
+    			create_component(readingstatecounter.$$.fragment);
     			t15 = space();
-    			create_component(nestedcommentssvelte.$$.fragment);
+    			div2 = element("div");
+    			create_component(copyremove.$$.fragment);
     			t16 = space();
-    			create_component(myyoutube.$$.fragment);
+    			create_component(nestedcommentssvelte.$$.fragment);
     			t17 = space();
+    			create_component(myyoutube.$$.fragment);
+    			t18 = space();
     			h12 = element("h1");
     			h12.textContent = "Themeable Game Brainstorm - Image + Lists";
-    			t19 = space();
+    			t20 = space();
     			create_component(dotgame.$$.fragment);
-    			attr_dev(h10, "class", "svelte-1tky8bj");
-    			add_location(h10, file, 24, 1, 651);
+    			attr_dev(h10, "class", "svelte-1gz1mpc");
+    			add_location(h10, file, 24, 1, 668);
     			attr_dev(a, "href", "https://svelte.dev/tutorial");
-    			add_location(a, file, 25, 14, 688);
-    			add_location(p, file, 25, 1, 675);
-    			attr_dev(h11, "class", "svelte-1tky8bj");
-    			add_location(h11, file, 27, 1, 787);
-    			add_location(h30, file, 28, 1, 870);
-    			add_location(h31, file, 30, 1, 922);
-    			attr_dev(h12, "class", "svelte-1tky8bj");
-    			add_location(h12, file, 41, 1, 1170);
-    			attr_dev(main, "class", "svelte-1tky8bj");
-    			add_location(main, file, 22, 0, 642);
+    			add_location(a, file, 25, 14, 705);
+    			add_location(p, file, 25, 1, 692);
+    			attr_dev(h11, "class", "svelte-1gz1mpc");
+    			add_location(h11, file, 27, 1, 804);
+    			add_location(h30, file, 28, 1, 887);
+    			add_location(h31, file, 30, 1, 939);
+    			attr_dev(div0, "class", "componentborder svelte-1gz1mpc");
+    			add_location(div0, file, 32, 1, 1052);
+    			attr_dev(div1, "class", "componentborder svelte-1gz1mpc");
+    			add_location(div1, file, 34, 1, 1104);
+    			attr_dev(div2, "class", "componentborder svelte-1gz1mpc");
+    			add_location(div2, file, 36, 1, 1166);
+    			attr_dev(h12, "class", "svelte-1gz1mpc");
+    			add_location(h12, file, 43, 1, 1310);
+    			attr_dev(main, "class", "svelte-1gz1mpc");
+    			add_location(main, file, 22, 0, 659);
     		},
     		l: function claim(nodes) {
     			throw new Error("options.hydrate only works if the component was compiled with the `hydratable: true` option");
@@ -4623,16 +5728,21 @@ var app = (function () {
     			append_dev(main, t11);
     			append_dev(main, h31);
     			append_dev(main, t13);
-    			mount_component(readingstatecounter, main, null);
+    			append_dev(main, div0);
+    			mount_component(subrepprac, div0, null);
     			append_dev(main, t14);
-    			mount_component(copyremove, main, null);
+    			append_dev(main, div1);
+    			mount_component(readingstatecounter, div1, null);
     			append_dev(main, t15);
-    			mount_component(nestedcommentssvelte, main, null);
+    			append_dev(main, div2);
+    			mount_component(copyremove, div2, null);
     			append_dev(main, t16);
-    			mount_component(myyoutube, main, null);
+    			mount_component(nestedcommentssvelte, main, null);
     			append_dev(main, t17);
+    			mount_component(myyoutube, main, null);
+    			append_dev(main, t18);
     			append_dev(main, h12);
-    			append_dev(main, t19);
+    			append_dev(main, t20);
     			mount_component(dotgame, main, null);
     			current = true;
     		},
@@ -4641,6 +5751,7 @@ var app = (function () {
     		},
     		i: function intro(local) {
     			if (current) return;
+    			transition_in(subrepprac.$$.fragment, local);
     			transition_in(readingstatecounter.$$.fragment, local);
     			transition_in(copyremove.$$.fragment, local);
     			transition_in(nestedcommentssvelte.$$.fragment, local);
@@ -4649,6 +5760,7 @@ var app = (function () {
     			current = true;
     		},
     		o: function outro(local) {
+    			transition_out(subrepprac.$$.fragment, local);
     			transition_out(readingstatecounter.$$.fragment, local);
     			transition_out(copyremove.$$.fragment, local);
     			transition_out(nestedcommentssvelte.$$.fragment, local);
@@ -4658,6 +5770,7 @@ var app = (function () {
     		},
     		d: function destroy(detaching) {
     			if (detaching) detach_dev(main);
+    			destroy_component(subrepprac);
     			destroy_component(readingstatecounter);
     			destroy_component(copyremove);
     			destroy_component(nestedcommentssvelte);
@@ -4714,8 +5827,8 @@ var app = (function () {
     		MyYoutube: YoutubeIframeAPICustomInterface,
     		NestedCommentsSvelte: RecursiveNestedCommentsElement,
     		CopyRemove: CopyandRemoveListComponent,
-    		ReadingState: ReadingStateCounter,
     		ReadingStateCounter,
+    		SubRepPrac: DeliberateSubconciousRepititionPractice,
     		showModal,
     		openModal,
     		closeModal