diff --git "a/bundle.js" "b/bundle.js"
--- "a/bundle.js"
+++ "b/bundle.js"
@@ -92,6 +92,13 @@ var app = (function () {
         node.addEventListener(event, handler, options);
         return () => node.removeEventListener(event, handler, options);
     }
+    function prevent_default(fn) {
+        return function (event) {
+            event.preventDefault();
+            // @ts-ignore
+            return fn.call(this, event);
+        };
+    }
     function attr(node, attribute, value) {
         if (value == null)
             node.removeAttribute(attribute);
@@ -664,7 +671,7 @@ var app = (function () {
     /* src\VideoGradioComponentBrainstorming.svelte generated by Svelte v3.59.2 */
 
     const { console: console_1$6 } = globals;
-    const file$b = "src\\VideoGradioComponentBrainstorming.svelte";
+    const file$c = "src\\VideoGradioComponentBrainstorming.svelte";
 
     function get_each_context$6(ctx, list, i) {
     	const child_ctx = ctx.slice();
@@ -684,7 +691,7 @@ var app = (function () {
     			t = text(t_value);
     			option.__value = /*option*/ ctx[15];
     			option.value = option.__value;
-    			add_location(option, file$b, 85, 6, 2561);
+    			add_location(option, file$c, 85, 6, 2561);
     		},
     		m: function mount(target, anchor) {
     			insert_dev(target, option, anchor);
@@ -707,7 +714,7 @@ var app = (function () {
     	return block;
     }
 
-    function create_fragment$b(ctx) {
+    function create_fragment$c(ctx) {
     	let h1;
     	let t1;
     	let div1;
@@ -764,34 +771,34 @@ var app = (function () {
     				each_blocks[i].c();
     			}
 
-    			add_location(h1, file$b, 66, 0, 1800);
+    			add_location(h1, file$c, 66, 0, 1800);
     			attr_dev(track, "kind", "captions");
     			if (!src_url_equal(track.src, track_src_value = "path/to/your/captions/file.vtt")) attr_dev(track, "src", track_src_value);
     			attr_dev(track, "srclang", "en");
     			attr_dev(track, "label", "English");
-    			add_location(track, file$b, 72, 4, 2006);
+    			add_location(track, file$c, 72, 4, 2006);
     			attr_dev(video, "id", "videoCanvas");
     			video.autoplay = true;
     			attr_dev(video, "class", "svelte-ufd3fo");
-    			add_location(video, file$b, 70, 2, 1965);
+    			add_location(video, file$c, 70, 2, 1965);
     			attr_dev(div0, "id", "overlayText");
     			attr_dev(div0, "class", "svelte-ufd3fo");
-    			add_location(div0, file$b, 74, 2, 2111);
+    			add_location(div0, file$c, 74, 2, 2111);
     			attr_dev(div1, "id", "videoContainer");
     			attr_dev(div1, "class", "svelte-ufd3fo");
-    			add_location(div1, file$b, 68, 0, 1911);
+    			add_location(div1, file$c, 68, 0, 1911);
     			attr_dev(canvas_1, "id", "myCanvas");
     			set_style(canvas_1, "border", "2px solid black");
     			attr_dev(canvas_1, "width", "500");
     			attr_dev(canvas_1, "height", "500");
-    			add_location(canvas_1, file$b, 77, 0, 2186);
+    			add_location(canvas_1, file$c, 77, 0, 2186);
     			attr_dev(input, "type", "text");
-    			add_location(input, file$b, 78, 0, 2294);
-    			add_location(button, file$b, 82, 2, 2429);
+    			add_location(input, file$c, 78, 0, 2294);
+    			add_location(button, file$c, 82, 2, 2429);
     			if (/*selectedOption*/ ctx[0] === void 0) add_render_callback(() => /*select_change_handler*/ ctx[9].call(select));
-    			add_location(select, file$b, 83, 2, 2479);
+    			add_location(select, file$c, 83, 2, 2479);
     			attr_dev(div2, "id", "frameForButtons");
-    			add_location(div2, file$b, 81, 0, 2399);
+    			add_location(div2, file$c, 81, 0, 2399);
     		},
     		l: function claim(nodes) {
     			throw new Error("options.hydrate only works if the component was compiled with the `hydratable: true` option");
@@ -893,7 +900,7 @@ var app = (function () {
 
     	dispatch_dev("SvelteRegisterBlock", {
     		block,
-    		id: create_fragment$b.name,
+    		id: create_fragment$c.name,
     		type: "component",
     		source: "",
     		ctx
@@ -906,7 +913,7 @@ var app = (function () {
     	
     } // Logic for 'Test OCR' button
 
-    function instance$b($$self, $$props, $$invalidate) {
+    function instance$c($$self, $$props, $$invalidate) {
     	let { $$slots: slots = {}, $$scope } = $$props;
     	validate_slots('VideoGradioComponentBrainstorming', slots, []);
     	let selectedOption = 'Stove - lu'; // default value
@@ -1039,13 +1046,13 @@ var app = (function () {
     class VideoGradioComponentBrainstorming extends SvelteComponentDev {
     	constructor(options) {
     		super(options);
-    		init(this, options, instance$b, create_fragment$b, safe_not_equal, {});
+    		init(this, options, instance$c, create_fragment$c, safe_not_equal, {});
 
     		dispatch_dev("SvelteRegisterComponent", {
     			component: this,
     			tagName: "VideoGradioComponentBrainstorming",
     			options,
-    			id: create_fragment$b.name
+    			id: create_fragment$c.name
     		});
     	}
     }
@@ -1099,9 +1106,9 @@ var app = (function () {
     }
 
     /* src\MovingDotPortfromReact.svelte generated by Svelte v3.59.2 */
-    const file$a = "src\\MovingDotPortfromReact.svelte";
+    const file$b = "src\\MovingDotPortfromReact.svelte";
 
-    function create_fragment$a(ctx) {
+    function create_fragment$b(ctx) {
     	let button;
 
     	const block = {
@@ -1111,7 +1118,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$a, 48, 0, 1573);
+    			add_location(button, file$b, 48, 0, 1573);
     		},
     		l: function claim(nodes) {
     			throw new Error("options.hydrate only works if the component was compiled with the `hydratable: true` option");
@@ -1139,7 +1146,7 @@ var app = (function () {
 
     	dispatch_dev("SvelteRegisterBlock", {
     		block,
-    		id: create_fragment$a.name,
+    		id: create_fragment$b.name,
     		type: "component",
     		source: "",
     		ctx
@@ -1150,7 +1157,7 @@ var app = (function () {
 
     const step = 10;
 
-    function instance$a($$self, $$props, $$invalidate) {
+    function instance$b($$self, $$props, $$invalidate) {
     	let { $$slots: slots = {}, $$scope } = $$props;
     	validate_slots('MovingDotPortfromReact', slots, []);
     	let { position = { x: 0, y: 0 } } = $$props;
@@ -1255,13 +1262,13 @@ var app = (function () {
     class MovingDotPortfromReact extends SvelteComponentDev {
     	constructor(options) {
     		super(options);
-    		init(this, options, instance$a, create_fragment$a, safe_not_equal, { position: 0, boundaries: 2, focusDot: 3 });
+    		init(this, options, instance$b, create_fragment$b, safe_not_equal, { position: 0, boundaries: 2, focusDot: 3 });
 
     		dispatch_dev("SvelteRegisterComponent", {
     			component: this,
     			tagName: "MovingDotPortfromReact",
     			options,
-    			id: create_fragment$a.name
+    			id: create_fragment$b.name
     		});
     	}
 
@@ -1292,9 +1299,9 @@ var app = (function () {
 
     /* src\MovingDotTargetPortfromReact.svelte generated by Svelte v3.59.2 */
 
-    const file$9 = "src\\MovingDotTargetPortfromReact.svelte";
+    const file$a = "src\\MovingDotTargetPortfromReact.svelte";
 
-    function create_fragment$9(ctx) {
+    function create_fragment$a(ctx) {
     	let div;
 
     	const block = {
@@ -1303,7 +1310,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$9, 4, 0, 49);
+    			add_location(div, file$a, 4, 0, 49);
     		},
     		l: function claim(nodes) {
     			throw new Error("options.hydrate only works if the component was compiled with the `hydratable: true` option");
@@ -1329,7 +1336,7 @@ var app = (function () {
 
     	dispatch_dev("SvelteRegisterBlock", {
     		block,
-    		id: create_fragment$9.name,
+    		id: create_fragment$a.name,
     		type: "component",
     		source: "",
     		ctx
@@ -1338,7 +1345,7 @@ var app = (function () {
     	return block;
     }
 
-    function instance$9($$self, $$props, $$invalidate) {
+    function instance$a($$self, $$props, $$invalidate) {
     	let { $$slots: slots = {}, $$scope } = $$props;
     	validate_slots('MovingDotTargetPortfromReact', slots, []);
     	let { position } = $$props;
@@ -1375,13 +1382,13 @@ var app = (function () {
     class MovingDotTargetPortfromReact extends SvelteComponentDev {
     	constructor(options) {
     		super(options);
-    		init(this, options, instance$9, create_fragment$9, safe_not_equal, { position: 0 });
+    		init(this, options, instance$a, create_fragment$a, safe_not_equal, { position: 0 });
 
     		dispatch_dev("SvelteRegisterComponent", {
     			component: this,
     			tagName: "MovingDotTargetPortfromReact",
     			options,
-    			id: create_fragment$9.name
+    			id: create_fragment$a.name
     		});
     	}
 
@@ -1394,18 +1401,128 @@ var app = (function () {
     	}
     }
 
+    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 money = writable(1000);
+
+    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
+    ]);
+
+    const objectives = writable([
+        // Sample objectives
+        { branch: "Seperate", name: "Visit Mountain Peak", complete: false },
+        { branch: "Mission 1", name: "Intercept The Courier (Search the Locations)", complete: false },
+        { branch: "Mission 1", name: "Deliver the package to Market Stall", complete: false },
+        // Add more objectives as needed
+    ]);
+
+    const 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", modalConfig: {
+            title: "Entrance",
+                content: "You've reached the Entrance. What's your next step?",
+                actions: [
+                    {
+                        label: "Ask for guidance on next move",
+                        action: "askforDirections"
+                    },
+                    {
+                        label: "Buy an Axe",
+                        action: "buyAxeAlert"
+                    }
+                    // ... more actions if necessary
+                ]},
+        },
+        { name: "Market Stall", x: 200, y: 300, collisionType: "", collisiontext: "" },   // A market stall in the bustling market area.
+        { name: "Inn Entrance", x: 400, y: 450, collisionType: "", collisiontext: "" },   // The entrance to the inn for rest or information.
+        { name: "Town Hall", x: 600, y: 350, collisionType: "", collisiontext: "" },      // The entrance to the town hall for quests.
+        { name: "Fountain", x: 500, y: 500, collisionType: "", collisiontext: "" },       // A fountain in the town square as a meeting point.
+        { name: "Bridge", x: 1100, y: 700, collisionType: "", collisiontext: "" },        // A bridge in the mystical forest area.
+        { name: "Waterfall", x: 1300, y: 800, collisionType: "", collisiontext: "" },     // A waterfall that could hide secrets or treasures.
+        { name: "Mountain Peak", x: 1500, y: 100, collisionType: "", collisiontext: "" },
+    ]);
+
+    function addInventoryItem(item) {
+        inventory.update(items => {
+            return [...items, item];
+        });
+    }
+
+    // actions.js
+
+    const themeActions = {
+        'Default': {
+            buyAxeAlert() {
+                money.update(h => h - 10 > 0 ? h - 10 : 0); // Decreases health but never below 0
+                const newItem = {type: "weapon", name: "Axe", description: "A heavy, sharp axe."};
+                addInventoryItem(newItem);  
+            },
+            askforDirections() {
+                alert("Stranger: Go back to the fountain");
+            }
+        },
+        'Space Odyssey': {
+            refuelShip() {
+                // Logic to refuel the ship
+            },
+            tradeGoods() {
+                // Logic to trade goods
+            },
+            // ... add more space-specific actions
+        },
+        'Medieval Fantasy': {
+            defendCastle() {
+                // Logic to defend the castle
+            },
+            slayDragon() {
+                // Logic to slay the dragon
+            },
+            // ... add more medieval-specific actions
+        },
+        'Cyberpunk': {
+            hackSystem() {
+                // Logic to hack a system
+                alert("it worked");
+            },
+            navigateNeonStreets() {
+                // Logic for navigating neon streets
+            },
+            // ... add more cyberpunk-specific actions
+        }
+        // ... other themes with their specific actions
+    };
+
     /* src\MovingDotSpaceSimpleModal.svelte generated by Svelte v3.59.2 */
 
     const { console: console_1$5 } = globals;
-    const file$8 = "src\\MovingDotSpaceSimpleModal.svelte";
+    const file$9 = "src\\MovingDotSpaceSimpleModal.svelte";
 
     function get_each_context$5(ctx, list, i) {
     	const child_ctx = ctx.slice();
-    	child_ctx[8] = list[i];
+    	child_ctx[9] = list[i];
     	return child_ctx;
     }
 
-    // (32:0) {#if isOpen}
+    // (49:0) {#if isOpen}
     function create_if_block$4(ctx) {
     	let div3;
     	let div2;
@@ -1449,18 +1566,18 @@ var app = (function () {
     				each_blocks[i].c();
     			}
 
-    			add_location(h2, file$8, 35, 8, 882);
-    			add_location(button, file$8, 36, 8, 908);
+    			add_location(h2, file$9, 52, 8, 1640);
+    			add_location(button, file$9, 53, 8, 1666);
     			attr_dev(div0, "class", "modal-header svelte-m51ous");
-    			add_location(div0, file$8, 34, 6, 846);
+    			add_location(div0, file$9, 51, 6, 1604);
     			attr_dev(ul, "class", "modal-items");
-    			add_location(ul, file$8, 40, 8, 1032);
+    			add_location(ul, file$9, 57, 8, 1790);
     			attr_dev(div1, "class", "modal-content svelte-m51ous");
-    			add_location(div1, file$8, 38, 6, 976);
+    			add_location(div1, file$9, 55, 6, 1734);
     			attr_dev(div2, "class", "modal svelte-m51ous");
-    			add_location(div2, file$8, 33, 4, 819);
+    			add_location(div2, file$9, 50, 4, 1577);
     			attr_dev(div3, "class", "modal-overlay svelte-m51ous");
-    			add_location(div3, file$8, 32, 2, 786);
+    			add_location(div3, file$9, 49, 2, 1544);
     		},
     		m: function mount(target, anchor) {
     			insert_dev(target, div3, anchor);
@@ -1527,30 +1644,30 @@ var app = (function () {
     		block,
     		id: create_if_block$4.name,
     		type: "if",
-    		source: "(32:0) {#if isOpen}",
+    		source: "(49:0) {#if isOpen}",
     		ctx
     	});
 
     	return block;
     }
 
-    // (42:10) {#each items as item}
+    // (59:10) {#each items as item}
     function create_each_block$5(ctx) {
     	let button;
-    	let t_value = /*item*/ ctx[8].label + "";
+    	let t_value = /*item*/ ctx[9].label + "";
     	let t;
     	let mounted;
     	let dispose;
 
     	function click_handler() {
-    		return /*click_handler*/ ctx[7](/*item*/ ctx[8]);
+    		return /*click_handler*/ ctx[8](/*item*/ ctx[9]);
     	}
 
     	const block = {
     		c: function create() {
     			button = element("button");
     			t = text(t_value);
-    			add_location(button, file$8, 42, 12, 1103);
+    			add_location(button, file$9, 59, 12, 1861);
     		},
     		m: function mount(target, anchor) {
     			insert_dev(target, button, anchor);
@@ -1563,7 +1680,7 @@ var app = (function () {
     		},
     		p: function update(new_ctx, dirty) {
     			ctx = new_ctx;
-    			if (dirty & /*items*/ 8 && t_value !== (t_value = /*item*/ ctx[8].label + "")) set_data_dev(t, t_value);
+    			if (dirty & /*items*/ 8 && t_value !== (t_value = /*item*/ ctx[9].label + "")) set_data_dev(t, t_value);
     		},
     		d: function destroy(detaching) {
     			if (detaching) detach_dev(button);
@@ -1576,14 +1693,14 @@ var app = (function () {
     		block,
     		id: create_each_block$5.name,
     		type: "each",
-    		source: "(42:10) {#each items as item}",
+    		source: "(59:10) {#each items as item}",
     		ctx
     	});
 
     	return block;
     }
 
-    function create_fragment$8(ctx) {
+    function create_fragment$9(ctx) {
     	let if_block_anchor;
     	let if_block = /*isOpen*/ ctx[0] && create_if_block$4(ctx);
 
@@ -1623,7 +1740,7 @@ var app = (function () {
 
     	dispatch_dev("SvelteRegisterBlock", {
     		block,
-    		id: create_fragment$8.name,
+    		id: create_fragment$9.name,
     		type: "component",
     		source: "",
     		ctx
@@ -1632,7 +1749,7 @@ var app = (function () {
     	return block;
     }
 
-    function instance$8($$self, $$props, $$invalidate) {
+    function instance$9($$self, $$props, $$invalidate) {
     	let { $$slots: slots = {}, $$scope } = $$props;
     	validate_slots('MovingDotSpaceSimpleModal', slots, []);
     	let { isOpen = false } = $$props;
@@ -1640,6 +1757,7 @@ var app = (function () {
     	let { content = '' } = $$props;
     	let { items = [] } = $$props;
     	let { onClose } = $$props;
+    	let { currentTheme = '' } = $$props;
 
     	function closeModal() {
     		if (onClose) {
@@ -1653,17 +1771,36 @@ var app = (function () {
 
     		closeModal();
 
-    		switch (item.action) {
-    			case "revealCaveLocation":
-    				{
-    					alert("The cave is revealed");
-    					break;
-    				}
-    			case "giveHistory":
-    				{
-    					alert("The History is revealed");
+    		if (themeActions[currentTheme] && themeActions[currentTheme][item.action]) {
+    			themeActions[currentTheme][item.action]();
+    		} else {
+    			switch (item.action) {
+    				case "revealCaveLocation":
+    					{
+    						alert("The cave is revealed");
+    						break;
+    					}
+    				case "giveHistory":
+    					{
+    						alert("The History is revealed");
+    						break;
+    					}
+    				case "buyAxe":
+    					{
+    						money.update(h => h - 10 > 0 ? h - 10 : 0); // Decreases health but never below 0
+
+    						const newItem = {
+    							type: "weapon",
+    							name: "Axe",
+    							description: "A heavy, sharp axe."
+    						};
+
+    						addInventoryItem(newItem);
+    					}
+    				default:
+    					console.error(`Action "${item.action}" not found for theme "${currentTheme}".`);
     					break;
-    				}
+    			}
     		}
     	}
 
@@ -1673,7 +1810,7 @@ var app = (function () {
     		}
     	});
 
-    	const writable_props = ['isOpen', 'title', 'content', 'items', 'onClose'];
+    	const writable_props = ['isOpen', 'title', 'content', 'items', 'onClose', 'currentTheme'];
 
     	Object.keys($$props).forEach(key => {
     		if (!~writable_props.indexOf(key) && key.slice(0, 2) !== '$$' && key !== 'slot') console_1$5.warn(`<MovingDotSpaceSimpleModal> was created with unknown prop '${key}'`);
@@ -1687,6 +1824,7 @@ var app = (function () {
     		if ('content' in $$props) $$invalidate(2, content = $$props.content);
     		if ('items' in $$props) $$invalidate(3, items = $$props.items);
     		if ('onClose' in $$props) $$invalidate(6, onClose = $$props.onClose);
+    		if ('currentTheme' in $$props) $$invalidate(7, currentTheme = $$props.currentTheme);
     	};
 
     	$$self.$capture_state = () => ({
@@ -1695,6 +1833,10 @@ var app = (function () {
     		content,
     		items,
     		onClose,
+    		currentTheme,
+    		themeActions,
+    		money,
+    		addInventoryItem,
     		closeModal,
     		handleItemClick
     	});
@@ -1705,6 +1847,7 @@ var app = (function () {
     		if ('content' in $$props) $$invalidate(2, content = $$props.content);
     		if ('items' in $$props) $$invalidate(3, items = $$props.items);
     		if ('onClose' in $$props) $$invalidate(6, onClose = $$props.onClose);
+    		if ('currentTheme' in $$props) $$invalidate(7, currentTheme = $$props.currentTheme);
     	};
 
     	if ($$props && "$$inject" in $$props) {
@@ -1719,6 +1862,7 @@ var app = (function () {
     		closeModal,
     		handleItemClick,
     		onClose,
+    		currentTheme,
     		click_handler
     	];
     }
@@ -1727,19 +1871,20 @@ var app = (function () {
     	constructor(options) {
     		super(options);
 
-    		init(this, options, instance$8, create_fragment$8, safe_not_equal, {
+    		init(this, options, instance$9, create_fragment$9, safe_not_equal, {
     			isOpen: 0,
     			title: 1,
     			content: 2,
     			items: 3,
-    			onClose: 6
+    			onClose: 6,
+    			currentTheme: 7
     		});
 
     		dispatch_dev("SvelteRegisterComponent", {
     			component: this,
     			tagName: "MovingDotSpaceSimpleModal",
     			options,
-    			id: create_fragment$8.name
+    			id: create_fragment$9.name
     		});
     	}
 
@@ -1782,55 +1927,45 @@ var app = (function () {
     	set onClose(value) {
     		throw new Error("<MovingDotSpaceSimpleModal>: Props cannot be set directly on the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
     	}
-    }
-
-    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
-    ]);
+    	get currentTheme() {
+    		throw new Error("<MovingDotSpaceSimpleModal>: Props cannot be read directly from the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
+    	}
 
-    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
-    ]);
+    	set currentTheme(value) {
+    		throw new Error("<MovingDotSpaceSimpleModal>: Props cannot be set directly on the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
+    	}
+    }
 
     /* src\MovingDotStatStoreandDisplay.svelte generated by Svelte v3.59.2 */
 
-    const file$7 = "src\\MovingDotStatStoreandDisplay.svelte";
+    const file$8 = "src\\MovingDotStatStoreandDisplay.svelte";
 
     function get_each_context$4(ctx, list, i) {
     	const child_ctx = ctx.slice();
-    	child_ctx[11] = list[i];
+    	child_ctx[13] = list[i];
     	return child_ctx;
     }
 
-    function get_each_context_1(ctx, list, i) {
+    function get_each_context_1$1(ctx, list, i) {
     	const child_ctx = ctx.slice();
-    	child_ctx[14] = list[i];
+    	child_ctx[16] = list[i];
     	return child_ctx;
     }
 
-    // (23:8) {#each $inventory as item}
-    function create_each_block_1(ctx) {
+    function get_each_context_2(ctx, list, i) {
+    	const child_ctx = ctx.slice();
+    	child_ctx[16] = list[i];
+    	return child_ctx;
+    }
+
+    // (22:6) {#each $objectives as item}
+    function create_each_block_2(ctx) {
     	let li;
-    	let t0_value = /*item*/ ctx[14].name + "";
+    	let t0_value = /*item*/ ctx[16].id + "";
     	let t0;
     	let t1;
-    	let t2_value = /*item*/ ctx[14].description + "";
+    	let t2_value = /*item*/ ctx[16].name + "";
     	let t2;
 
     	const block = {
@@ -1839,7 +1974,7 @@ var app = (function () {
     			t0 = text(t0_value);
     			t1 = text(": ");
     			t2 = text(t2_value);
-    			add_location(li, file$7, 23, 10, 705);
+    			add_location(li, file$8, 22, 8, 712);
     		},
     		m: function mount(target, anchor) {
     			insert_dev(target, li, anchor);
@@ -1848,8 +1983,8 @@ var app = (function () {
     			append_dev(li, t2);
     		},
     		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);
+    			if (dirty & /*$objectives*/ 256 && t0_value !== (t0_value = /*item*/ ctx[16].id + "")) set_data_dev(t0, t0_value);
+    			if (dirty & /*$objectives*/ 256 && t2_value !== (t2_value = /*item*/ ctx[16].name + "")) set_data_dev(t2, t2_value);
     		},
     		d: function destroy(detaching) {
     			if (detaching) detach_dev(li);
@@ -1858,32 +1993,75 @@ var app = (function () {
 
     	dispatch_dev("SvelteRegisterBlock", {
     		block,
-    		id: create_each_block_1.name,
+    		id: create_each_block_2.name,
+    		type: "each",
+    		source: "(22:6) {#each $objectives as item}",
+    		ctx
+    	});
+
+    	return block;
+    }
+
+    // (32:8) {#each $inventory as item}
+    function create_each_block_1$1(ctx) {
+    	let li;
+    	let t0_value = /*item*/ ctx[16].name + "";
+    	let t0;
+    	let t1;
+    	let t2_value = /*item*/ ctx[16].description + "";
+    	let t2;
+
+    	const block = {
+    		c: function create() {
+    			li = element("li");
+    			t0 = text(t0_value);
+    			t1 = text(": ");
+    			t2 = text(t2_value);
+    			add_location(li, file$8, 32, 10, 928);
+    		},
+    		m: function mount(target, anchor) {
+    			insert_dev(target, li, anchor);
+    			append_dev(li, t0);
+    			append_dev(li, t1);
+    			append_dev(li, t2);
+    		},
+    		p: function update(ctx, dirty) {
+    			if (dirty & /*$inventory*/ 512 && t0_value !== (t0_value = /*item*/ ctx[16].name + "")) set_data_dev(t0, t0_value);
+    			if (dirty & /*$inventory*/ 512 && t2_value !== (t2_value = /*item*/ ctx[16].description + "")) set_data_dev(t2, t2_value);
+    		},
+    		d: function destroy(detaching) {
+    			if (detaching) detach_dev(li);
+    		}
+    	};
+
+    	dispatch_dev("SvelteRegisterBlock", {
+    		block,
+    		id: create_each_block_1$1.name,
     		type: "each",
-    		source: "(23:8) {#each $inventory as item}",
+    		source: "(32:8) {#each $inventory as item}",
     		ctx
     	});
 
     	return block;
     }
 
-    // (33:6) {#each $skills as skill}
+    // (42:6) {#each $skills as skill}
     function create_each_block$4(ctx) {
     	let button;
-    	let t0_value = /*skill*/ ctx[11].name + "";
+    	let t0_value = /*skill*/ ctx[13].name + "";
     	let t0;
     	let t1;
-    	let t2_value = /*skill*/ ctx[11].branch + "";
+    	let t2_value = /*skill*/ ctx[13].branch + "";
     	let t2;
     	let t3;
-    	let t4_value = (/*skill*/ ctx[11].learned ? 'Yes' : 'No') + "";
+    	let t4_value = (/*skill*/ ctx[13].learned ? 'Yes' : 'No') + "";
     	let t4;
     	let t5;
     	let mounted;
     	let dispose;
 
     	function click_handler() {
-    		return /*click_handler*/ ctx[10](/*skill*/ ctx[11]);
+    		return /*click_handler*/ ctx[12](/*skill*/ ctx[13]);
     	}
 
     	const block = {
@@ -1896,7 +2074,7 @@ var app = (function () {
     			t4 = text(t4_value);
     			t5 = space();
     			attr_dev(button, "class", "skill");
-    			add_location(button, file$7, 33, 8, 932);
+    			add_location(button, file$8, 42, 8, 1167);
     		},
     		m: function mount(target, anchor) {
     			insert_dev(target, button, anchor);
@@ -1914,9 +2092,9 @@ var app = (function () {
     		},
     		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);
+    			if (dirty & /*$skills*/ 1024 && t0_value !== (t0_value = /*skill*/ ctx[13].name + "")) set_data_dev(t0, t0_value);
+    			if (dirty & /*$skills*/ 1024 && t2_value !== (t2_value = /*skill*/ ctx[13].branch + "")) set_data_dev(t2, t2_value);
+    			if (dirty & /*$skills*/ 1024 && t4_value !== (t4_value = (/*skill*/ ctx[13].learned ? 'Yes' : 'No') + "")) set_data_dev(t4, t4_value);
     		},
     		d: function destroy(detaching) {
     			if (detaching) detach_dev(button);
@@ -1929,18 +2107,19 @@ var app = (function () {
     		block,
     		id: create_each_block$4.name,
     		type: "each",
-    		source: "(33:6) {#each $skills as skill}",
+    		source: "(42:6) {#each $skills as skill}",
     		ctx
     	});
 
     	return block;
     }
 
-    function create_fragment$7(ctx) {
-    	let div8;
+    function create_fragment$8(ctx) {
+    	let div10;
+    	let div4;
     	let div3;
-    	let div2;
-    	let h20;
+    	let span;
+    	let b;
     	let t1;
     	let div0;
     	let t2;
@@ -1960,25 +2139,40 @@ var app = (function () {
     	let t15;
     	let t16;
     	let t17;
-    	let div5;
-    	let div4;
-    	let h21;
+    	let div2;
+    	let t18;
     	let t19;
-    	let ul;
     	let t20;
+    	let div5;
+    	let ul0;
+    	let t21;
     	let div7;
     	let div6;
-    	let h22;
-    	let t22;
-    	let each_value_1 = /*$inventory*/ ctx[7];
+    	let h20;
+    	let t23;
+    	let ul1;
+    	let t24;
+    	let div9;
+    	let div8;
+    	let h21;
+    	let t26;
+    	let each_value_2 = /*$objectives*/ ctx[8];
+    	validate_each_argument(each_value_2);
+    	let each_blocks_2 = [];
+
+    	for (let i = 0; i < each_value_2.length; i += 1) {
+    		each_blocks_2[i] = create_each_block_2(get_each_context_2(ctx, each_value_2, i));
+    	}
+
+    	let each_value_1 = /*$inventory*/ ctx[9];
     	validate_each_argument(each_value_1);
     	let each_blocks_1 = [];
 
     	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));
+    		each_blocks_1[i] = create_each_block_1$1(get_each_context_1$1(ctx, each_value_1, i));
     	}
 
-    	let each_value = /*$skills*/ ctx[8];
+    	let each_value = /*$skills*/ ctx[10];
     	validate_each_argument(each_value);
     	let each_blocks = [];
 
@@ -1988,11 +2182,12 @@ var app = (function () {
 
     	const block = {
     		c: function create() {
-    			div8 = element("div");
+    			div10 = element("div");
+    			div4 = element("div");
     			div3 = element("div");
-    			div2 = element("div");
-    			h20 = element("h2");
-    			h20.textContent = "Player Stats";
+    			span = element("span");
+    			b = element("b");
+    			b.textContent = "Player Stats";
     			t1 = space();
     			div0 = element("div");
     			t2 = text("Health: ");
@@ -2012,59 +2207,77 @@ var app = (function () {
     			t15 = text("Luck: ");
     			t16 = text(/*$luck*/ ctx[6]);
     			t17 = space();
+    			div2 = element("div");
+    			t18 = text("Money: ");
+    			t19 = text(/*$money*/ ctx[7]);
+    			t20 = space();
     			div5 = element("div");
-    			div4 = element("div");
-    			h21 = element("h2");
-    			h21.textContent = "Inventory";
-    			t19 = space();
-    			ul = element("ul");
+    			ul0 = element("ul");
 
-    			for (let i = 0; i < each_blocks_1.length; i += 1) {
-    				each_blocks_1[i].c();
+    			for (let i = 0; i < each_blocks_2.length; i += 1) {
+    				each_blocks_2[i].c();
     			}
 
-    			t20 = space();
+    			t21 = space();
     			div7 = element("div");
     			div6 = element("div");
-    			h22 = element("h2");
-    			h22.textContent = "Skill Tree";
-    			t22 = space();
+    			h20 = element("h2");
+    			h20.textContent = "Inventory";
+    			t23 = space();
+    			ul1 = element("ul");
+
+    			for (let i = 0; i < each_blocks_1.length; i += 1) {
+    				each_blocks_1[i].c();
+    			}
+
+    			t24 = space();
+    			div9 = element("div");
+    			div8 = element("div");
+    			h21 = element("h2");
+    			h21.textContent = "Skill Tree / Abilities";
+    			t26 = space();
 
     			for (let i = 0; i < each_blocks.length; i += 1) {
     				each_blocks[i].c();
     			}
 
-    			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);
+    			add_location(b, file$8, 12, 13, 363);
+    			add_location(span, file$8, 12, 6, 356);
+    			add_location(div0, file$8, 13, 6, 399);
+    			add_location(div1, file$8, 14, 6, 543);
+    			add_location(div2, file$8, 15, 6, 575);
+    			attr_dev(div3, "class", "stats svelte-1d8rshd");
+    			add_location(div3, file$8, 11, 4, 329);
+    			attr_dev(div4, "class", "grid-statsitem svelte-1d8rshd");
+    			add_location(div4, file$8, 10, 2, 295);
+    			add_location(ul0, file$8, 20, 4, 663);
+    			attr_dev(div5, "class", "grid-statsitem svelte-1d8rshd");
+    			add_location(div5, file$8, 19, 2, 629);
+    			add_location(h20, file$8, 29, 6, 850);
+    			add_location(ul1, file$8, 30, 6, 876);
+    			attr_dev(div6, "class", "inventory svelte-1d8rshd");
+    			add_location(div6, file$8, 28, 4, 819);
+    			attr_dev(div7, "class", "grid-statsitem svelte-1d8rshd");
+    			add_location(div7, file$8, 27, 2, 785);
+    			add_location(h21, file$8, 40, 6, 1094);
+    			attr_dev(div8, "class", "skill-tree svelte-1d8rshd");
+    			add_location(div8, file$8, 39, 4, 1062);
+    			attr_dev(div9, "class", "grid-statsitem svelte-1d8rshd");
+    			add_location(div9, file$8, 38, 2, 1028);
+    			attr_dev(div10, "class", "grid-statsContainer svelte-1d8rshd");
+    			add_location(div10, file$8, 9, 0, 258);
     		},
     		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, div8, anchor);
-    			append_dev(div8, div3);
-    			append_dev(div3, div2);
-    			append_dev(div2, h20);
-    			append_dev(div2, t1);
-    			append_dev(div2, div0);
+    			insert_dev(target, div10, anchor);
+    			append_dev(div10, div4);
+    			append_dev(div4, div3);
+    			append_dev(div3, span);
+    			append_dev(span, b);
+    			append_dev(div3, t1);
+    			append_dev(div3, div0);
     			append_dev(div0, t2);
     			append_dev(div0, t3);
     			append_dev(div0, t4);
@@ -2077,32 +2290,46 @@ var app = (function () {
     			append_dev(div0, t11);
     			append_dev(div0, t12);
     			append_dev(div0, t13);
-    			append_dev(div2, t14);
-    			append_dev(div2, div1);
+    			append_dev(div3, t14);
+    			append_dev(div3, 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);
+    			append_dev(div3, t17);
+    			append_dev(div3, div2);
+    			append_dev(div2, t18);
+    			append_dev(div2, t19);
+    			append_dev(div10, t20);
+    			append_dev(div10, div5);
+    			append_dev(div5, ul0);
+
+    			for (let i = 0; i < each_blocks_2.length; i += 1) {
+    				if (each_blocks_2[i]) {
+    					each_blocks_2[i].m(ul0, null);
+    				}
+    			}
+
+    			append_dev(div10, t21);
+    			append_dev(div10, div7);
+    			append_dev(div7, div6);
+    			append_dev(div6, h20);
+    			append_dev(div6, t23);
+    			append_dev(div6, ul1);
 
     			for (let i = 0; i < each_blocks_1.length; i += 1) {
     				if (each_blocks_1[i]) {
-    					each_blocks_1[i].m(ul, null);
+    					each_blocks_1[i].m(ul1, null);
     				}
     			}
 
-    			append_dev(div8, t20);
-    			append_dev(div8, div7);
-    			append_dev(div7, div6);
-    			append_dev(div6, h22);
-    			append_dev(div6, t22);
+    			append_dev(div10, t24);
+    			append_dev(div10, div9);
+    			append_dev(div9, div8);
+    			append_dev(div8, h21);
+    			append_dev(div8, t26);
 
     			for (let i = 0; i < each_blocks.length; i += 1) {
     				if (each_blocks[i]) {
-    					each_blocks[i].m(div6, null);
+    					each_blocks[i].m(div8, null);
     				}
     			}
     		},
@@ -2114,21 +2341,46 @@ var app = (function () {
     			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 & /*$money*/ 128) set_data_dev(t19, /*$money*/ ctx[7]);
+
+    			if (dirty & /*$objectives*/ 256) {
+    				each_value_2 = /*$objectives*/ ctx[8];
+    				validate_each_argument(each_value_2);
+    				let i;
+
+    				for (i = 0; i < each_value_2.length; i += 1) {
+    					const child_ctx = get_each_context_2(ctx, each_value_2, i);
+
+    					if (each_blocks_2[i]) {
+    						each_blocks_2[i].p(child_ctx, dirty);
+    					} else {
+    						each_blocks_2[i] = create_each_block_2(child_ctx);
+    						each_blocks_2[i].c();
+    						each_blocks_2[i].m(ul0, null);
+    					}
+    				}
+
+    				for (; i < each_blocks_2.length; i += 1) {
+    					each_blocks_2[i].d(1);
+    				}
+
+    				each_blocks_2.length = each_value_2.length;
+    			}
 
-    			if (dirty & /*$inventory*/ 128) {
-    				each_value_1 = /*$inventory*/ ctx[7];
+    			if (dirty & /*$inventory*/ 512) {
+    				each_value_1 = /*$inventory*/ ctx[9];
     				validate_each_argument(each_value_1);
     				let i;
 
     				for (i = 0; i < each_value_1.length; i += 1) {
-    					const child_ctx = get_each_context_1(ctx, each_value_1, i);
+    					const child_ctx = get_each_context_1$1(ctx, each_value_1, i);
 
     					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] = create_each_block_1$1(child_ctx);
     						each_blocks_1[i].c();
-    						each_blocks_1[i].m(ul, null);
+    						each_blocks_1[i].m(ul1, null);
     					}
     				}
 
@@ -2139,8 +2391,8 @@ var app = (function () {
     				each_blocks_1.length = each_value_1.length;
     			}
 
-    			if (dirty & /*toggleSkill, $skills*/ 768) {
-    				each_value = /*$skills*/ ctx[8];
+    			if (dirty & /*toggleSkill, $skills*/ 3072) {
+    				each_value = /*$skills*/ ctx[10];
     				validate_each_argument(each_value);
     				let i;
 
@@ -2152,7 +2404,7 @@ var app = (function () {
     					} else {
     						each_blocks[i] = create_each_block$4(child_ctx);
     						each_blocks[i].c();
-    						each_blocks[i].m(div6, null);
+    						each_blocks[i].m(div8, null);
     					}
     				}
 
@@ -2166,7 +2418,8 @@ var app = (function () {
     		i: noop,
     		o: noop,
     		d: function destroy(detaching) {
-    			if (detaching) detach_dev(div8);
+    			if (detaching) detach_dev(div10);
+    			destroy_each(each_blocks_2, detaching);
     			destroy_each(each_blocks_1, detaching);
     			destroy_each(each_blocks, detaching);
     		}
@@ -2174,7 +2427,7 @@ var app = (function () {
 
     	dispatch_dev("SvelteRegisterBlock", {
     		block,
-    		id: create_fragment$7.name,
+    		id: create_fragment$8.name,
     		type: "component",
     		source: "",
     		ctx
@@ -2183,7 +2436,7 @@ var app = (function () {
     	return block;
     }
 
-    function instance$7($$self, $$props, $$invalidate) {
+    function instance$8($$self, $$props, $$invalidate) {
     	let $health;
     	let $mana;
     	let $strength;
@@ -2191,6 +2444,8 @@ var app = (function () {
     	let $intelligence;
     	let $charisma;
     	let $luck;
+    	let $money;
+    	let $objectives;
     	let $inventory;
     	let $skills;
     	validate_store(health, 'health');
@@ -2207,10 +2462,14 @@ var app = (function () {
     	component_subscribe($$self, charisma, $$value => $$invalidate(5, $charisma = $$value));
     	validate_store(luck, 'luck');
     	component_subscribe($$self, luck, $$value => $$invalidate(6, $luck = $$value));
+    	validate_store(money, 'money');
+    	component_subscribe($$self, money, $$value => $$invalidate(7, $money = $$value));
+    	validate_store(objectives, 'objectives');
+    	component_subscribe($$self, objectives, $$value => $$invalidate(8, $objectives = $$value));
     	validate_store(inventory, 'inventory');
-    	component_subscribe($$self, inventory, $$value => $$invalidate(7, $inventory = $$value));
+    	component_subscribe($$self, inventory, $$value => $$invalidate(9, $inventory = $$value));
     	validate_store(skills, 'skills');
-    	component_subscribe($$self, skills, $$value => $$invalidate(8, $skills = $$value));
+    	component_subscribe($$self, skills, $$value => $$invalidate(10, $skills = $$value));
     	let { $$slots: slots = {}, $$scope } = $$props;
     	validate_slots('MovingDotStatStoreandDisplay', slots, []);
 
@@ -2235,8 +2494,10 @@ var app = (function () {
     		intelligence,
     		charisma,
     		luck,
+    		money,
     		inventory,
     		skills,
+    		objectives,
     		toggleSkill,
     		$health,
     		$mana,
@@ -2245,6 +2506,8 @@ var app = (function () {
     		$intelligence,
     		$charisma,
     		$luck,
+    		$money,
+    		$objectives,
     		$inventory,
     		$skills
     	});
@@ -2257,6 +2520,8 @@ var app = (function () {
     		$intelligence,
     		$charisma,
     		$luck,
+    		$money,
+    		$objectives,
     		$inventory,
     		$skills,
     		toggleSkill,
@@ -2267,46 +2532,646 @@ var app = (function () {
     class MovingDotStatStoreandDisplay extends SvelteComponentDev {
     	constructor(options) {
     		super(options);
-    		init(this, options, instance$7, create_fragment$7, safe_not_equal, {});
+    		init(this, options, instance$8, create_fragment$8, safe_not_equal, {});
 
     		dispatch_dev("SvelteRegisterComponent", {
     			component: this,
     			tagName: "MovingDotStatStoreandDisplay",
     			options,
-    			id: create_fragment$7.name
+    			id: create_fragment$8.name
     		});
     	}
     }
 
-    /* src\MovingDotSpacePortfromReact.svelte generated by Svelte v3.59.2 */
-
-    const { console: console_1$4 } = globals;
-    const file$6 = "src\\MovingDotSpacePortfromReact.svelte";
-
-    function get_each_context$3(ctx, list, i) {
-    	const child_ctx = ctx.slice();
-    	child_ctx[19] = list[i];
-    	return child_ctx;
-    }
+    /* src\MovingDotSpaceThemeManager.svelte generated by Svelte v3.59.2 */
+    const file$7 = "src\\MovingDotSpaceThemeManager.svelte";
 
-    // (159:4) {#each $targets as target (target.name)}
-    function create_each_block$3(key_1, ctx) {
-    	let first;
-    	let target;
+    function create_fragment$7(ctx) {
+    	let form;
+    	let input0;
     	let t0;
-    	let span;
-    	let t1_value = /*target*/ ctx[19].name + "";
+    	let input1;
     	let t1;
-    	let current;
-
-    	target = new MovingDotTargetPortfromReact({
-    			props: { position: /*target*/ ctx[19] },
-    			$$inline: true
-    		});
-
-    	const block = {
-    		key: key_1,
-    		first: null,
+    	let input2;
+    	let t2;
+    	let button0;
+    	let t4;
+    	let button1;
+    	let t6;
+    	let input3;
+    	let t7;
+    	let label;
+    	let t9;
+    	let div5;
+    	let div0;
+    	let t10;
+    	let t11;
+    	let br0;
+    	let t12;
+    	let t13;
+    	let div1;
+    	let t15;
+    	let div2;
+    	let t16;
+    	let br1;
+    	let t17;
+    	let br2;
+    	let t18;
+    	let t19;
+    	let div3;
+    	let t20;
+    	let br3;
+    	let t21;
+    	let t22;
+    	let div4;
+    	let mounted;
+    	let dispose;
+
+    	const block = {
+    		c: function create() {
+    			form = element("form");
+    			input0 = element("input");
+    			t0 = space();
+    			input1 = element("input");
+    			t1 = space();
+    			input2 = element("input");
+    			t2 = space();
+    			button0 = element("button");
+    			button0.textContent = "Add Item";
+    			t4 = space();
+    			button1 = element("button");
+    			button1.textContent = "Download Configuration";
+    			t6 = space();
+    			input3 = element("input");
+    			t7 = space();
+    			label = element("label");
+    			label.textContent = "Upload Configuration";
+    			t9 = space();
+    			div5 = element("div");
+    			div0 = element("div");
+    			t10 = text(/*ChangedContentPlaceholder*/ ctx[0]);
+    			t11 = space();
+    			br0 = element("br");
+    			t12 = text("\r\n        Example - Write a story where the main event are in this order: gosomewhere getsomething makeobservation getsomething talktosomeone makeobservation getsomething talktosomeone gosomewhere fight talktosomeone fight fight talktosomeone talktosomeone talktosomeone gosomewhere talktosomeone");
+    			t13 = space();
+    			div1 = element("div");
+    			div1.textContent = "Event Trigger - Collisions\r\n        Combat Mechanics - Modal (aka anything)\r\n        objectives = boolean\r\n        Story = conflict and resolution towards solving a larger conflict\r\n        basic story elements fight getsomething gosomewhere talktosomeone makeobservation - use the random count component above";
+    			t15 = space();
+    			div2 = element("div");
+    			t16 = text("Extra Stats ");
+    			br1 = element("br");
+    			t17 = text("    \r\n        Save State ");
+    			br2 = element("br");
+    			t18 = text("\r\n        Clock System - based on the user movement?");
+    			t19 = space();
+    			div3 = element("div");
+    			t20 = text("Story Line ");
+    			br3 = element("br");
+    			t21 = text("\r\n        Hard as it combines skills, targets, inventory, objectives and player interaction = = = Give ChatGPT a sample config then ask for a story and then ask to turn that story into config format");
+    			t22 = space();
+    			div4 = element("div");
+    			div4.textContent = "Themes inside themes = storyline aka multiple situational themes = a story";
+    			attr_dev(input0, "type", "text");
+    			attr_dev(input0, "placeholder", "Type (weapon, armor, consumable)");
+    			add_location(input0, file$7, 67, 4, 2591);
+    			attr_dev(input1, "type", "text");
+    			attr_dev(input1, "placeholder", "Name");
+    			add_location(input1, file$7, 68, 4, 2691);
+    			attr_dev(input2, "type", "text");
+    			attr_dev(input2, "placeholder", "Description");
+    			add_location(input2, file$7, 69, 4, 2763);
+    			attr_dev(button0, "type", "submit");
+    			add_location(button0, file$7, 70, 4, 2849);
+    			add_location(form, file$7, 66, 0, 2544);
+    			add_location(button1, file$7, 76, 0, 3028);
+    			attr_dev(input3, "type", "file");
+    			attr_dev(input3, "id", "fileInput");
+    			set_style(input3, "display", "none");
+    			add_location(input3, file$7, 77, 0, 3102);
+    			attr_dev(label, "for", "fileInput");
+    			attr_dev(label, "class", "btn");
+    			add_location(label, file$7, 78, 0, 3191);
+    			add_location(br0, file$7, 82, 38, 3346);
+    			add_location(div0, file$7, 81, 4, 3301);
+    			add_location(div1, file$7, 86, 4, 3667);
+    			add_location(br1, file$7, 95, 20, 4040);
+    			add_location(br2, file$7, 96, 19, 4069);
+    			add_location(div2, file$7, 94, 4, 4012);
+    			add_location(br3, file$7, 101, 19, 4174);
+    			add_location(div3, file$7, 100, 4, 4148);
+    			add_location(div4, file$7, 105, 4, 4396);
+    			attr_dev(div5, "class", "grid-themegridContainer svelte-1b47i4k");
+    			add_location(div5, file$7, 80, 0, 3258);
+    		},
+    		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, form, anchor);
+    			append_dev(form, input0);
+    			set_input_value(input0, /*newItem*/ ctx[1].type);
+    			append_dev(form, t0);
+    			append_dev(form, input1);
+    			set_input_value(input1, /*newItem*/ ctx[1].name);
+    			append_dev(form, t1);
+    			append_dev(form, input2);
+    			set_input_value(input2, /*newItem*/ ctx[1].description);
+    			append_dev(form, t2);
+    			append_dev(form, button0);
+    			insert_dev(target, t4, anchor);
+    			insert_dev(target, button1, anchor);
+    			insert_dev(target, t6, anchor);
+    			insert_dev(target, input3, anchor);
+    			insert_dev(target, t7, anchor);
+    			insert_dev(target, label, anchor);
+    			insert_dev(target, t9, anchor);
+    			insert_dev(target, div5, anchor);
+    			append_dev(div5, div0);
+    			append_dev(div0, t10);
+    			append_dev(div0, t11);
+    			append_dev(div0, br0);
+    			append_dev(div0, t12);
+    			append_dev(div5, t13);
+    			append_dev(div5, div1);
+    			append_dev(div5, t15);
+    			append_dev(div5, div2);
+    			append_dev(div2, t16);
+    			append_dev(div2, br1);
+    			append_dev(div2, t17);
+    			append_dev(div2, br2);
+    			append_dev(div2, t18);
+    			append_dev(div5, t19);
+    			append_dev(div5, div3);
+    			append_dev(div3, t20);
+    			append_dev(div3, br3);
+    			append_dev(div3, t21);
+    			append_dev(div5, t22);
+    			append_dev(div5, div4);
+
+    			if (!mounted) {
+    				dispose = [
+    					listen_dev(input0, "input", /*input0_input_handler*/ ctx[5]),
+    					listen_dev(input1, "input", /*input1_input_handler*/ ctx[6]),
+    					listen_dev(input2, "input", /*input2_input_handler*/ ctx[7]),
+    					listen_dev(form, "submit", prevent_default(/*addItem*/ ctx[2]), false, true, false, false),
+    					listen_dev(button1, "click", /*downloadConfiguration*/ ctx[3], false, false, false, false),
+    					listen_dev(input3, "change", /*handleFileUpload*/ ctx[4], false, false, false, false)
+    				];
+
+    				mounted = true;
+    			}
+    		},
+    		p: function update(ctx, [dirty]) {
+    			if (dirty & /*newItem*/ 2 && input0.value !== /*newItem*/ ctx[1].type) {
+    				set_input_value(input0, /*newItem*/ ctx[1].type);
+    			}
+
+    			if (dirty & /*newItem*/ 2 && input1.value !== /*newItem*/ ctx[1].name) {
+    				set_input_value(input1, /*newItem*/ ctx[1].name);
+    			}
+
+    			if (dirty & /*newItem*/ 2 && input2.value !== /*newItem*/ ctx[1].description) {
+    				set_input_value(input2, /*newItem*/ ctx[1].description);
+    			}
+
+    			if (dirty & /*ChangedContentPlaceholder*/ 1) set_data_dev(t10, /*ChangedContentPlaceholder*/ ctx[0]);
+    		},
+    		i: noop,
+    		o: noop,
+    		d: function destroy(detaching) {
+    			if (detaching) detach_dev(form);
+    			if (detaching) detach_dev(t4);
+    			if (detaching) detach_dev(button1);
+    			if (detaching) detach_dev(t6);
+    			if (detaching) detach_dev(input3);
+    			if (detaching) detach_dev(t7);
+    			if (detaching) detach_dev(label);
+    			if (detaching) detach_dev(t9);
+    			if (detaching) detach_dev(div5);
+    			mounted = false;
+    			run_all(dispose);
+    		}
+    	};
+
+    	dispatch_dev("SvelteRegisterBlock", {
+    		block,
+    		id: create_fragment$7.name,
+    		type: "component",
+    		source: "",
+    		ctx
+    	});
+
+    	return block;
+    }
+
+    function instance$7($$self, $$props, $$invalidate) {
+    	let $targets;
+    	let $objectives;
+    	let $skills;
+    	let $inventory;
+    	validate_store(targets, 'targets');
+    	component_subscribe($$self, targets, $$value => $$invalidate(10, $targets = $$value));
+    	validate_store(objectives, 'objectives');
+    	component_subscribe($$self, objectives, $$value => $$invalidate(11, $objectives = $$value));
+    	validate_store(skills, 'skills');
+    	component_subscribe($$self, skills, $$value => $$invalidate(12, $skills = $$value));
+    	validate_store(inventory, 'inventory');
+    	component_subscribe($$self, inventory, $$value => $$invalidate(13, $inventory = $$value));
+    	let { $$slots: slots = {}, $$scope } = $$props;
+    	validate_slots('MovingDotSpaceThemeManager', slots, []);
+    	let { ChangedContentPlaceholder = "" } = $$props;
+    	let newItem = { type: "", name: "", description: "" };
+    	let newSkill = { branch: "", name: "", learned: false };
+    	let newObjective = { branch: "", name: "", complete: false };
+
+    	// ... similarly for targets
+    	function addItem() {
+    		inventory.update(items => [...items, newItem]);
+    		$$invalidate(1, newItem = { type: "", name: "", description: "" }); // Reset form
+    	}
+
+    	function addSkill() {
+    		skills.update(skills => [...skills, newSkill]);
+    		newSkill = { branch: "", name: "", learned: false }; // Reset form
+    	}
+
+    	function addObjective() {
+    		objectives.update(objectives => [...objectives, newObjective]);
+    		newObjective = { branch: "", name: "", complete: false }; // Reset form
+    	}
+
+    	// ... similarly for targets
+    	// Functions to save and load configurations to/from localStorage or a backend would also be defined here
+    	// Function to download the current configuration as a JSON file
+    	function downloadConfiguration() {
+    		const gameConfig = {
+    			inventory: $inventory,
+    			skills: $skills,
+    			objectives: $objectives,
+    			targets: $targets
+    		};
+
+    		const blob = new Blob([JSON.stringify(gameConfig, null, 2)], { type: 'application/json' });
+    		const href = URL.createObjectURL(blob);
+    		const link = document.createElement('a');
+    		link.href = href;
+    		link.download = 'gameConfig.json';
+    		document.body.appendChild(link);
+    		link.click();
+    		document.body.removeChild(link);
+    	}
+
+    	// Function to load configuration from an uploaded JSON file
+    	function handleFileUpload(event) {
+    		const file = event.target.files[0];
+
+    		if (file) {
+    			const reader = new FileReader();
+
+    			reader.onload = e => {
+    				const fileContent = e.target.result;
+    				const { inventory: loadedInventory, skills: loadedSkills, objectives: loadedObjectives, targets: loadedTargets } = JSON.parse(fileContent);
+    				inventory.set(loadedInventory);
+    				skills.set(loadedSkills);
+    				objectives.set(loadedObjectives);
+    				targets.set(loadedTargets);
+    				alert('Configuration loaded!');
+    			};
+
+    			reader.readAsText(file);
+    		}
+    	}
+
+    	const writable_props = ['ChangedContentPlaceholder'];
+
+    	Object.keys($$props).forEach(key => {
+    		if (!~writable_props.indexOf(key) && key.slice(0, 2) !== '$$' && key !== 'slot') console.warn(`<MovingDotSpaceThemeManager> was created with unknown prop '${key}'`);
+    	});
+
+    	function input0_input_handler() {
+    		newItem.type = this.value;
+    		$$invalidate(1, newItem);
+    	}
+
+    	function input1_input_handler() {
+    		newItem.name = this.value;
+    		$$invalidate(1, newItem);
+    	}
+
+    	function input2_input_handler() {
+    		newItem.description = this.value;
+    		$$invalidate(1, newItem);
+    	}
+
+    	$$self.$$set = $$props => {
+    		if ('ChangedContentPlaceholder' in $$props) $$invalidate(0, ChangedContentPlaceholder = $$props.ChangedContentPlaceholder);
+    	};
+
+    	$$self.$capture_state = () => ({
+    		ChangedContentPlaceholder,
+    		inventory,
+    		skills,
+    		objectives,
+    		targets,
+    		newItem,
+    		newSkill,
+    		newObjective,
+    		addItem,
+    		addSkill,
+    		addObjective,
+    		downloadConfiguration,
+    		handleFileUpload,
+    		$targets,
+    		$objectives,
+    		$skills,
+    		$inventory
+    	});
+
+    	$$self.$inject_state = $$props => {
+    		if ('ChangedContentPlaceholder' in $$props) $$invalidate(0, ChangedContentPlaceholder = $$props.ChangedContentPlaceholder);
+    		if ('newItem' in $$props) $$invalidate(1, newItem = $$props.newItem);
+    		if ('newSkill' in $$props) newSkill = $$props.newSkill;
+    		if ('newObjective' in $$props) newObjective = $$props.newObjective;
+    	};
+
+    	if ($$props && "$$inject" in $$props) {
+    		$$self.$inject_state($$props.$$inject);
+    	}
+
+    	return [
+    		ChangedContentPlaceholder,
+    		newItem,
+    		addItem,
+    		downloadConfiguration,
+    		handleFileUpload,
+    		input0_input_handler,
+    		input1_input_handler,
+    		input2_input_handler
+    	];
+    }
+
+    class MovingDotSpaceThemeManager extends SvelteComponentDev {
+    	constructor(options) {
+    		super(options);
+    		init(this, options, instance$7, create_fragment$7, safe_not_equal, { ChangedContentPlaceholder: 0 });
+
+    		dispatch_dev("SvelteRegisterComponent", {
+    			component: this,
+    			tagName: "MovingDotSpaceThemeManager",
+    			options,
+    			id: create_fragment$7.name
+    		});
+    	}
+
+    	get ChangedContentPlaceholder() {
+    		throw new Error("<MovingDotSpaceThemeManager>: Props cannot be read directly from the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
+    	}
+
+    	set ChangedContentPlaceholder(value) {
+    		throw new Error("<MovingDotSpaceThemeManager>: Props cannot be set directly on the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
+    	}
+    }
+
+    // themeConfig.js
+    const themes = {
+        'User Custom': {
+            background: '/path/to/space_background.png',
+            inventory: [
+                { type: "weapon", name: "Laser Gun", description: "A powerful laser weapon." },
+                // ... more space items
+            ],
+            skills: [
+                { branch: "Skill Group 1", name: "Skill One", learned: false },
+                // ... more space skills
+            ],
+            objectives: [
+                { branch: "Mission 1", name: "Mission Details", complete: false },
+                // ... more space objectives
+            ],
+            // ... and so on for targets
+            targets: [
+                { name: "Target 1", x: 50, y: 50, collisionType: "alert", collisiontext: "First Test"},
+            ],
+        },
+        'Default': {
+            background: '/AutoGameBackgrounds/1stGameLoc123.png',
+            inventory: [
+                { type: "weapon", name: "Sword", description: "A sharp blade." },
+                { type: "armor", name: "Shield", description: "Protects against attacks." },
+                { type: "consumable", name: "Health Potion", description: "Restores health." },
+                // ... more space items
+            ],
+            skills: [
+                { branch: "Combat", name: "Basic Attack", learned: false },
+                { branch: "Magic", name: "Fireball", learned: false },
+                { branch: "Stealth", name: "Sneak", learned: false },
+                // ... more space skills
+            ],
+            objectives: [
+                { branch: "Seperate", name: "Visit Mountain Peak", complete: false },
+                { branch: "Mission 1", name: "Intercept The Courier (Search the Locations)", complete: false },
+                { branch: "Mission 1", name: "Deliver the package to Market Stall", complete: false },
+                // ... more space objectives
+            ],
+            // ... and so on for targets
+            targets: [
+                { 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", modalConfig: {
+                    title: "Entrance",
+                    content: "You've reached the Entrance. What's your next step?",
+                    actions: [
+                        {
+                            label: "Ask for guidance on next move",
+                            action: "askforDirections"
+                        },
+                        {
+                            label: "Buy an Axe",
+                            action: "buyAxeAlert"
+                        }
+                        // ... more actions if necessary
+                    ]},
+                },
+                { name: "Market Stall", x: 200, y: 300, collisionType: "", collisiontext: "" },   // A market stall in the bustling market area.
+                { name: "Inn Entrance", x: 400, y: 450, collisionType: "", collisiontext: "" },   // The entrance to the inn for rest or information.
+                { name: "Town Hall", x: 600, y: 350, collisionType: "", collisiontext: "" },      // The entrance to the town hall for quests.
+                { name: "Fountain", x: 500, y: 500, collisionType: "", collisiontext: "" },       // A fountain in the town square as a meeting point.
+                { name: "Bridge", x: 1100, y: 700, collisionType: "", collisiontext: "" },        // A bridge in the mystical forest area.
+                { name: "Waterfall", x: 1300, y: 800, collisionType: "", collisiontext: "" },     // A waterfall that could hide secrets or treasures.
+                { name: "Mountain Peak", 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" },
+                //{ 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" },
+            ],
+        },
+        'Space Odyssey': {
+            background: '/AutoGameBackgrounds/SpaceOdysseyGameLoc.png',
+            inventory: [
+                { type: "weapon", name: "Laser Gun", description: "A powerful laser weapon." },
+                // ... more space items
+            ],
+            skills: [
+                { branch: "Piloting", name: "Astro Navigation", learned: false },
+                // ... more space skills
+            ],
+            objectives: [
+                { id: 1, name: "Dock at the Space Station", complete: false, progress: 0 },
+                { id: 2, name: "Repair the Communication Array", complete: false, progress: 0 },
+                { id: 3, name: "Collect Rare Asteroid Minerals", complete: false, progress: 0 },
+                { id: 4, name: "Negotiate Peace with the Alien Species", complete: false, progress: 0 },
+                { id: 5, name: "Explore the Abandoned Spaceship", complete: false, progress: 0 },
+                { id: 6, name: "Survive the Meteor Shower", complete: false, progress: 0 },
+                { id: 7, name: "Decrypt the Ancient Space Map", complete: false, progress: 0 },
+                { id: 8, name: "Win the Space Race", complete: false, progress: 0 },
+                { id: 9, name: "Defend the Colony from Space Pirates", complete: false, progress: 0 },
+                { id: 10, name: "Discover a New Lifeform", complete: false, progress: 0 }        
+                // ... more space objectives
+            ],
+            targets: [
+                { name: "Target 1", x: 50, y: 50, collisionType: "alert", collisiontext: "First Test"},
+            ],
+        },
+        'Medieval Fantasy': {
+            background: '/AutoGameBackgrounds/MedievalFantasyGameLoc.png',
+            inventory: [
+                { type: "weapon", name: "Longsword", description: "A sturdy steel blade." },
+                // ... more medieval items
+            ],
+            skills: [
+                { branch: "Piloting", name: "Astro Navigation", learned: false },
+                // ... more space skills
+            ],
+            objectives: [
+                { id: 1, name: "Rescue the Captured Knight", complete: false, progress: 0 },
+                { id: 2, name: "Find the Lost Artifact", complete: false, progress: 0 },
+                { id: 3, name: "Defeat the Dragon", complete: false, progress: 0 },
+                { id: 4, name: "Win the Archery Tournament", complete: false, progress: 0 },
+                { id: 5, name: "Break the Evil Curse", complete: false, progress: 0 },
+                { id: 6, name: "Uncover the Secret of the Ancient Ruins", complete: false, progress: 0 },
+                { id: 7, name: "Protect the Village from Bandits", complete: false, progress: 0 },
+                { id: 8, name: "Retrieve the Stolen Royal Jewels", complete: false, progress: 0 },
+                { id: 9, name: "Discover the Hidden Enchanted Forest", complete: false, progress: 0 },
+                { id: 10, name: "Master the Forbidden Magic Spell", complete: false, progress: 0 }        
+                // ... more space objectives
+            ],
+            targets: [
+                { name: "Target 1", x: 50, y: 50, collisionType: "alert", collisiontext: "First Test"},
+            ],
+            // ... skills, objectives, and targets for medieval theme
+        },
+        'Cyberpunk': {
+            background: '/AutoGameBackgrounds/CyberpunkGameLoc.png',
+            inventory: [
+                { type: "weapon", name: "Plasma Rifle", description: "A high-tech firearm with plasma rounds." },
+                { type: "armor", name: "NanoSuit", description: "Protects with reactive nano technology." },
+                { type: "consumable", name: "Stim Pack", description: "Enhances reflexes temporarily." },
+                // ... more cyberpunk items
+            ],
+            // ... skills, objectives, and targets for cyberpunk theme
+            skills: [
+                { branch: "Hacking", name: "Cyber Intrusion", learned: false },
+                { branch: "Combat", name: "Gun Kata", learned: false },
+                { branch: "Stealth", name: "Cloaking", learned: false },
+                // ... more space skills
+            ],
+            objectives: [ 
+                { id: 1, name: "Hack the Mainframe", complete: false, progress: 0 },
+                { id: 2, name: "Escape the Megacorp Security", complete: false, progress: 0 },
+                { id: 3, name: "Infiltrate the Underground Hacker Group", complete: false, progress: 0 },
+                { id: 4, name: "Negotiate a Truce with the Rival Gang", complete: false, progress: 0 },
+                { id: 5, name: "Expose the Corrupt Politician", complete: false, progress: 0 },
+                { id: 6, name: "Survive the Drone Assault", complete: false, progress: 0 },
+                { id: 7, name: "Retrieve the Stolen Cybernetic Tech", complete: false, progress: 0 },
+                { id: 8, name: "Win the Street Race in Neo-Tokyo", complete: false, progress: 0 },
+                { id: 9, name: "Decrypt the Corporate Data Files", complete: false, progress: 0 },
+                { id: 10, name: "Disarm the City-Wide Neural Bomb", complete: false, progress: 0 }
+       
+                // ... more space objectives
+            ],
+            targets: [
+                { name: "Target 1", x: 50, y: 50, collisionType: "alert", collisiontext: "First Test"},
+                { name: "MegaCorp Server", x: 200, y: 50, collisionType: "modal", collisiontext: "First Test"},
+                { name: "City Police", x: 50, y: 250, collisionType: "modal", collisiontext: "First Test"},
+                { name: "Rival Gang", x: 550, y: 550, collisionType: "modal", collisiontext: "First Test"},
+            ],
+        }
+    };
+
+    /* src\MovingDotSpacePortfromReact.svelte generated by Svelte v3.59.2 */
+
+    const { Object: Object_1$1, console: console_1$4 } = globals;
+    const file$6 = "src\\MovingDotSpacePortfromReact.svelte";
+
+    function get_each_context$3(ctx, list, i) {
+    	const child_ctx = ctx.slice();
+    	child_ctx[23] = list[i];
+    	return child_ctx;
+    }
+
+    function get_each_context_1(ctx, list, i) {
+    	const child_ctx = ctx.slice();
+    	child_ctx[26] = list[i];
+    	return child_ctx;
+    }
+
+    // (149:4) {#each themeKeys as key}
+    function create_each_block_1(ctx) {
+    	let option;
+    	let t_value = /*key*/ ctx[26] + "";
+    	let t;
+
+    	const block = {
+    		c: function create() {
+    			option = element("option");
+    			t = text(t_value);
+    			option.__value = /*key*/ ctx[26];
+    			option.value = option.__value;
+    			add_location(option, file$6, 149, 8, 5561);
+    		},
+    		m: function mount(target, anchor) {
+    			insert_dev(target, option, anchor);
+    			append_dev(option, t);
+    		},
+    		p: noop,
+    		d: function destroy(detaching) {
+    			if (detaching) detach_dev(option);
+    		}
+    	};
+
+    	dispatch_dev("SvelteRegisterBlock", {
+    		block,
+    		id: create_each_block_1.name,
+    		type: "each",
+    		source: "(149:4) {#each themeKeys as key}",
+    		ctx
+    	});
+
+    	return block;
+    }
+
+    // (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[23].name + "";
+    	let t1;
+    	let current;
+
+    	target = new MovingDotTargetPortfromReact({
+    			props: { position: /*target*/ ctx[23] },
+    			$$inline: true
+    		});
+
+    	const block = {
+    		key: key_1,
+    		first: null,
     		c: function create() {
     			first = empty();
     			create_component(target.$$.fragment);
@@ -2314,9 +3179,9 @@ var app = (function () {
     			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);
+    			set_style(span, "left", /*target*/ ctx[23].x + "px");
+    			set_style(span, "top", /*target*/ ctx[23].y + "px");
+    			add_location(span, file$6, 160, 8, 6607);
     			this.first = first;
     		},
     		m: function mount(target$1, anchor) {
@@ -2330,16 +3195,16 @@ var app = (function () {
     		p: function update(new_ctx, dirty) {
     			ctx = new_ctx;
     			const target_changes = {};
-    			if (dirty & /*$targets*/ 64) target_changes.position = /*target*/ ctx[19];
+    			if (dirty & /*$targets*/ 512) target_changes.position = /*target*/ ctx[23];
     			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*/ 512) && t1_value !== (t1_value = /*target*/ ctx[23].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*/ 512) {
+    				set_style(span, "left", /*target*/ ctx[23].x + "px");
     			}
 
-    			if (!current || dirty & /*$targets*/ 64) {
-    				set_style(span, "top", /*target*/ ctx[19].y + "px");
+    			if (!current || dirty & /*$targets*/ 512) {
+    				set_style(span, "top", /*target*/ ctx[23].y + "px");
     			}
     		},
     		i: function intro(local) {
@@ -2377,11 +3242,12 @@ var app = (function () {
 
     	modal = new MovingDotSpaceSimpleModal({
     			props: {
-    				isOpen: /*isModalOpen*/ ctx[2],
-    				onClose: /*handleModalClose*/ ctx[11],
+    				isOpen: /*isModalOpen*/ ctx[3],
+    				onClose: /*handleModalClose*/ ctx[15],
     				title: "Test Collision",
-    				content: /*currentcollisiontext*/ ctx[3],
-    				items: /*currentcollisionitems*/ ctx[4]
+    				content: /*currentcollisiontext*/ ctx[4],
+    				items: /*currentcollisionitems*/ ctx[5],
+    				currentTheme: /*currentTheme*/ ctx[7]
     			},
     			$$inline: true
     		});
@@ -2396,9 +3262,10 @@ var app = (function () {
     		},
     		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];
+    			if (dirty & /*isModalOpen*/ 8) modal_changes.isOpen = /*isModalOpen*/ ctx[3];
+    			if (dirty & /*currentcollisiontext*/ 16) modal_changes.content = /*currentcollisiontext*/ ctx[4];
+    			if (dirty & /*currentcollisionitems*/ 32) modal_changes.items = /*currentcollisionitems*/ ctx[5];
+    			if (dirty & /*currentTheme*/ 128) modal_changes.currentTheme = /*currentTheme*/ ctx[7];
     			modal.$set(modal_changes);
     		},
     		i: function intro(local) {
@@ -2427,99 +3294,150 @@ var app = (function () {
     }
 
     function create_fragment$6(ctx) {
-    	let div1;
-    	let canvas_1;
+    	let select;
     	let t0;
-    	let movingdot;
+    	let dotgamethememanager;
     	let t1;
-    	let div0;
+    	let div1;
+    	let canvas_1;
     	let t2;
-    	let t3_value = /*$dotPosition*/ ctx[0].x + "";
+    	let movingdot;
     	let t3;
+    	let div0;
     	let t4;
-    	let t5_value = /*$dotPosition*/ ctx[0].y + "";
+    	let t5_value = /*$dotPosition*/ ctx[0].x + "";
     	let t5;
     	let t6;
-    	let each_blocks = [];
-    	let each_1_lookup = new Map();
+    	let t7_value = /*$dotPosition*/ ctx[0].y + "";
     	let t7;
     	let t8;
+    	let t9;
+    	let each_blocks = [];
+    	let each1_lookup = new Map();
+    	let t10;
+    	let t11;
     	let movingdotstats;
     	let current;
     	let mounted;
     	let dispose;
+    	let each_value_1 = /*themeKeys*/ ctx[12];
+    	validate_each_argument(each_value_1);
+    	let each_blocks_1 = [];
+
+    	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));
+    	}
+
+    	dotgamethememanager = new MovingDotSpaceThemeManager({
+    			props: {
+    				ChangedContentPlaceholder: /*ChangedContentPlaceholdertoSend*/ ctx[1]
+    			},
+    			$$inline: true
+    		});
 
     	let movingdot_props = {
     		position: /*$dotPosition*/ ctx[0],
-    		boundaries: /*boundaries*/ ctx[9]
+    		boundaries: /*boundaries*/ ctx[11]
     	};
 
     	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];
+    	/*movingdot_binding*/ ctx[19](movingdot);
+    	movingdot.$on("move", /*move_handler*/ ctx[20]);
+    	let each_value = /*$targets*/ ctx[9];
     	validate_each_argument(each_value);
-    	const get_key = ctx => /*target*/ ctx[19].name;
+    	const get_key = ctx => /*target*/ ctx[23].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));
+    		each1_lookup.set(key, each_blocks[i] = create_each_block$3(key, child_ctx));
     	}
 
-    	let if_block = /*isModalOpen*/ ctx[2] && create_if_block$3(ctx);
+    	let if_block = /*isModalOpen*/ ctx[3] && create_if_block$3(ctx);
     	movingdotstats = new MovingDotStatStoreandDisplay({ $$inline: true });
 
     	const block = {
     		c: function create() {
+    			select = element("select");
+
+    			for (let i = 0; i < each_blocks_1.length; i += 1) {
+    				each_blocks_1[i].c();
+    			}
+
+    			t0 = space();
+    			create_component(dotgamethememanager.$$.fragment);
+    			t1 = space();
     			div1 = element("div");
     			canvas_1 = element("canvas");
-    			t0 = space();
+    			t2 = space();
     			create_component(movingdot.$$.fragment);
-    			t1 = space();
+    			t3 = space();
     			div0 = element("div");
-    			t2 = text("Minor Game Events Log for player ||| Position for Developer ");
-    			t3 = text(t3_value);
-    			t4 = space();
+    			t4 = text("Minor Game Events Log for player ||| Position for Developer ");
     			t5 = text(t5_value);
     			t6 = space();
+    			t7 = text(t7_value);
+    			t8 = text(" - TODO - Story Line / Avatars? / Clock System ||| For Job Experience focused Stats can be Emotions Stress Frustration Relief Tiredness Confidence (Percieved Skill) Experience (Actual Skill)");
+    			t9 = space();
 
     			for (let i = 0; i < each_blocks.length; i += 1) {
     				each_blocks[i].c();
     			}
 
-    			t7 = space();
+    			t10 = space();
     			if (if_block) if_block.c();
-    			t8 = space();
+    			t11 = space();
     			create_component(movingdotstats.$$.fragment);
+    			if (/*currentTheme*/ ctx[7] === void 0) add_render_callback(() => /*select_change_handler*/ ctx[17].call(select));
+    			add_location(select, file$6, 147, 0, 5463);
     			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);
+    			add_location(canvas_1, file$6, 155, 4, 5943);
     			attr_dev(div0, "id", "overlayText");
     			attr_dev(div0, "class", "svelte-c2nwl9");
-    			add_location(div0, file$6, 157, 4, 7655);
+    			add_location(div0, file$6, 157, 4, 6201);
     			attr_dev(div1, "id", "game-container");
-    			attr_dev(div1, "style", /*spaceStyle*/ ctx[13]);
-    			add_location(div1, file$6, 154, 0, 7311);
+    			set_style(div1, "position", "relative");
+    			set_style(div1, "width", "100%");
+    			set_style(div1, "height", "100vh");
+    			set_style(div1, "border", "1px solid black");
+    			set_style(div1, "overflow", "hidden");
+    			set_style(div1, "background-image", "url('" + /*CurrentGameBackground*/ ctx[8] + "')");
+    			set_style(div1, "background-size", "cover");
+    			set_style(div1, "background-position", "center");
+    			add_location(div1, file$6, 154, 0, 5710);
     		},
     		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, select, anchor);
+
+    			for (let i = 0; i < each_blocks_1.length; i += 1) {
+    				if (each_blocks_1[i]) {
+    					each_blocks_1[i].m(select, null);
+    				}
+    			}
+
+    			select_option(select, /*currentTheme*/ ctx[7], true);
+    			insert_dev(target, t0, anchor);
+    			mount_component(dotgamethememanager, target, anchor);
+    			insert_dev(target, t1, anchor);
     			insert_dev(target, div1, anchor);
     			append_dev(div1, canvas_1);
-    			/*canvas_1_binding*/ ctx[14](canvas_1);
-    			append_dev(div1, t0);
+    			/*canvas_1_binding*/ ctx[18](canvas_1);
+    			append_dev(div1, t2);
     			mount_component(movingdot, div1, null);
-    			append_dev(div1, t1);
+    			append_dev(div1, t3);
     			append_dev(div1, div0);
-    			append_dev(div0, t2);
-    			append_dev(div0, t3);
     			append_dev(div0, t4);
     			append_dev(div0, t5);
-    			append_dev(div1, t6);
+    			append_dev(div0, t6);
+    			append_dev(div0, t7);
+    			append_dev(div0, t8);
+    			append_dev(div1, t9);
 
     			for (let i = 0; i < each_blocks.length; i += 1) {
     				if (each_blocks[i]) {
@@ -2527,38 +3445,74 @@ var app = (function () {
     				}
     			}
 
-    			append_dev(div1, t7);
+    			append_dev(div1, t10);
     			if (if_block) if_block.m(div1, null);
-    			insert_dev(target, t8, anchor);
+    			insert_dev(target, t11, anchor);
     			mount_component(movingdotstats, target, anchor);
     			current = true;
 
     			if (!mounted) {
-    				dispose = listen_dev(canvas_1, "click", /*handleSpaceClick*/ ctx[10], false, false, false, false);
+    				dispose = [
+    					listen_dev(select, "change", /*select_change_handler*/ ctx[17]),
+    					listen_dev(select, "change", /*changeTheme*/ ctx[13], false, false, false, false),
+    					listen_dev(canvas_1, "click", /*handleSpaceClick*/ ctx[14], false, false, false, false)
+    				];
+
     				mounted = true;
     			}
     		},
     		p: function update(ctx, [dirty]) {
+    			if (dirty & /*themeKeys*/ 4096) {
+    				each_value_1 = /*themeKeys*/ ctx[12];
+    				validate_each_argument(each_value_1);
+    				let i;
+
+    				for (i = 0; i < each_value_1.length; i += 1) {
+    					const child_ctx = get_each_context_1(ctx, each_value_1, i);
+
+    					if (each_blocks_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(select, null);
+    					}
+    				}
+
+    				for (; i < each_blocks_1.length; i += 1) {
+    					each_blocks_1[i].d(1);
+    				}
+
+    				each_blocks_1.length = each_value_1.length;
+    			}
+
+    			if (dirty & /*currentTheme, themeKeys*/ 4224) {
+    				select_option(select, /*currentTheme*/ ctx[7]);
+    			}
+
+    			const dotgamethememanager_changes = {};
+    			if (dirty & /*ChangedContentPlaceholdertoSend*/ 2) dotgamethememanager_changes.ChangedContentPlaceholder = /*ChangedContentPlaceholdertoSend*/ ctx[1];
+    			dotgamethememanager.$set(dotgamethememanager_changes);
     			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 ((!current || dirty & /*$dotPosition*/ 1) && t5_value !== (t5_value = /*$dotPosition*/ ctx[0].x + "")) set_data_dev(t5, t5_value);
+    			if ((!current || dirty & /*$dotPosition*/ 1) && t7_value !== (t7_value = /*$dotPosition*/ ctx[0].y + "")) set_data_dev(t7, t7_value);
 
-    			if (dirty & /*$targets*/ 64) {
-    				each_value = /*$targets*/ ctx[6];
+    			if (dirty & /*$targets*/ 512) {
+    				each_value = /*$targets*/ ctx[9];
     				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);
+    				each_blocks = update_keyed_each(each_blocks, dirty, get_key, 1, ctx, each_value, each1_lookup, div1, outro_and_destroy_block, create_each_block$3, t10, get_each_context$3);
     				check_outros();
     			}
 
-    			if (/*isModalOpen*/ ctx[2]) {
+    			if (/*isModalOpen*/ ctx[3]) {
     				if (if_block) {
     					if_block.p(ctx, dirty);
 
-    					if (dirty & /*isModalOpen*/ 4) {
+    					if (dirty & /*isModalOpen*/ 8) {
     						transition_in(if_block, 1);
     					}
     				} else {
@@ -2576,9 +3530,14 @@ var app = (function () {
 
     				check_outros();
     			}
+
+    			if (!current || dirty & /*CurrentGameBackground*/ 256) {
+    				set_style(div1, "background-image", "url('" + /*CurrentGameBackground*/ ctx[8] + "')");
+    			}
     		},
     		i: function intro(local) {
     			if (current) return;
+    			transition_in(dotgamethememanager.$$.fragment, local);
     			transition_in(movingdot.$$.fragment, local);
 
     			for (let i = 0; i < each_value.length; i += 1) {
@@ -2590,6 +3549,7 @@ var app = (function () {
     			current = true;
     		},
     		o: function outro(local) {
+    			transition_out(dotgamethememanager.$$.fragment, local);
     			transition_out(movingdot.$$.fragment, local);
 
     			for (let i = 0; i < each_blocks.length; i += 1) {
@@ -2601,9 +3561,14 @@ var app = (function () {
     			current = false;
     		},
     		d: function destroy(detaching) {
+    			if (detaching) detach_dev(select);
+    			destroy_each(each_blocks_1, detaching);
+    			if (detaching) detach_dev(t0);
+    			destroy_component(dotgamethememanager, detaching);
+    			if (detaching) detach_dev(t1);
     			if (detaching) detach_dev(div1);
-    			/*canvas_1_binding*/ ctx[14](null);
-    			/*movingdot_binding*/ ctx[15](null);
+    			/*canvas_1_binding*/ ctx[18](null);
+    			/*movingdot_binding*/ ctx[19](null);
     			destroy_component(movingdot);
 
     			for (let i = 0; i < each_blocks.length; i += 1) {
@@ -2611,10 +3576,10 @@ var app = (function () {
     			}
 
     			if (if_block) if_block.d();
-    			if (detaching) detach_dev(t8);
+    			if (detaching) detach_dev(t11);
     			destroy_component(movingdotstats, detaching);
     			mounted = false;
-    			dispose();
+    			run_all(dispose);
     		}
     	};
 
@@ -2632,103 +3597,37 @@ var app = (function () {
     function instance$6($$self, $$props, $$invalidate) {
     	let $dotPosition;
     	let $targets;
+    	validate_store(targets, 'targets');
+    	component_subscribe($$self, targets, $$value => $$invalidate(9, $targets = $$value));
     	let { $$slots: slots = {}, $$scope } = $$props;
     	validate_slots('MovingDotSpacePortfromReact', slots, []);
+    	let ChangedContentPlaceholdertoSend = "No changes";
     	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;
+    	let currentTheme = 'Default'; // default theme
+    	let themeKeys = Object.keys(themes);
+    	let CurrentGameBackground = themes["Default"].background; //GameBackgrounds[0].url;
+
+    	function changeTheme(event) {
+    		$$invalidate(7, currentTheme = event.target.value);
+    		const theme = themes[currentTheme];
+    		inventory.set(theme.inventory);
+    		skills.set(theme.skills);
+    		objectives.set(theme.objectives);
+    		targets.set(theme.targets);
+
+    		// ... and so on for other stores
+    		$$invalidate(8, CurrentGameBackground = theme.background);
+
+    		$$invalidate(1, ChangedContentPlaceholdertoSend = "TODO is all other variables to change");
+    	}
 
     	function handleSpaceClick() {
     		//console.log('Container clicked!', event);
@@ -2736,7 +3635,7 @@ var app = (function () {
     	}
 
     	function handleModalClose() {
-    		$$invalidate(2, isModalOpen = false);
+    		$$invalidate(3, isModalOpen = false);
     		movingDotElement.focusDot();
     	}
 
@@ -2763,23 +3662,9 @@ var app = (function () {
     				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"
-    					}
-    				]);
+    				$$invalidate(3, isModalOpen = true);
+    				$$invalidate(4, currentcollisiontext = target.collisiontext);
+    				$$invalidate(5, currentcollisionitems = target.modalConfig.actions);
     				break;
     		} // Handle other permanent UI elements here
     	}; // ...
@@ -2787,24 +3672,29 @@ var app = (function () {
     	// 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 => {
+    	Object_1$1.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 select_change_handler() {
+    		currentTheme = select_value(this);
+    		$$invalidate(7, currentTheme);
+    		$$invalidate(12, themeKeys);
+    	}
+
     	function canvas_1_binding($$value) {
     		binding_callbacks[$$value ? 'unshift' : 'push'](() => {
     			canvas = $$value;
-    			$$invalidate(1, canvas);
+    			$$invalidate(2, canvas);
     		});
     	}
 
     	function movingdot_binding($$value) {
     		binding_callbacks[$$value ? 'unshift' : 'push'](() => {
     			movingDotElement = $$value;
-    			$$invalidate(5, movingDotElement);
+    			$$invalidate(6, movingDotElement);
     		});
     	}
 
@@ -2817,34 +3707,46 @@ var app = (function () {
     		Target: MovingDotTargetPortfromReact,
     		Modal: MovingDotSpaceSimpleModal,
     		MovingDotStats: MovingDotStatStoreandDisplay,
-    		health,
+    		DotGameThemeManager: MovingDotSpaceThemeManager,
+    		themes,
+    		themeActions,
+    		inventory,
+    		skills,
+    		objectives,
+    		targets,
+    		ChangedContentPlaceholdertoSend,
     		canvas,
     		dotPosition,
-    		targets,
     		boundaries,
     		isModalOpen,
     		currentcollisiontext,
     		currentcollisionitems,
     		movingDotElement,
+    		currentTheme,
+    		themeKeys,
+    		CurrentGameBackground,
+    		changeTheme,
     		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 ('ChangedContentPlaceholdertoSend' in $$props) $$invalidate(1, ChangedContentPlaceholdertoSend = $$props.ChangedContentPlaceholdertoSend);
+    		if ('canvas' in $$props) $$invalidate(2, canvas = $$props.canvas);
+    		if ('dotPosition' in $$props) $$invalidate(10, dotPosition = $$props.dotPosition);
+    		if ('boundaries' in $$props) $$invalidate(11, boundaries = $$props.boundaries);
+    		if ('isModalOpen' in $$props) $$invalidate(3, isModalOpen = $$props.isModalOpen);
+    		if ('currentcollisiontext' in $$props) $$invalidate(4, currentcollisiontext = $$props.currentcollisiontext);
+    		if ('currentcollisionitems' in $$props) $$invalidate(5, currentcollisionitems = $$props.currentcollisionitems);
+    		if ('movingDotElement' in $$props) $$invalidate(6, movingDotElement = $$props.movingDotElement);
+    		if ('currentTheme' in $$props) $$invalidate(7, currentTheme = $$props.currentTheme);
+    		if ('themeKeys' in $$props) $$invalidate(12, themeKeys = $$props.themeKeys);
+    		if ('CurrentGameBackground' in $$props) $$invalidate(8, CurrentGameBackground = $$props.CurrentGameBackground);
     	};
 
     	if ($$props && "$$inject" in $$props) {
@@ -2901,19 +3803,23 @@ var app = (function () {
 
     	return [
     		$dotPosition,
+    		ChangedContentPlaceholdertoSend,
     		canvas,
     		isModalOpen,
     		currentcollisiontext,
     		currentcollisionitems,
     		movingDotElement,
+    		currentTheme,
+    		CurrentGameBackground,
     		$targets,
     		dotPosition,
-    		targets,
     		boundaries,
+    		themeKeys,
+    		changeTheme,
     		handleSpaceClick,
     		handleModalClose,
     		updateDotPosition,
-    		spaceStyle,
+    		select_change_handler,
     		canvas_1_binding,
     		movingdot_binding,
     		move_handler
@@ -2948,71 +3854,88 @@ var app = (function () {
     	let t3;
     	let input1;
     	let t4;
-    	let div3;
-    	let div0;
+    	let textarea;
     	let t5;
-    	let div1;
-    	let t6;
-    	let t7_value = /*currentTime*/ ctx[3].toFixed(2) + "";
+    	let button0;
     	let t7;
+    	let pre;
     	let t8;
     	let t9;
-    	let div2;
+    	let div3;
+    	let div0;
     	let t10;
+    	let div1;
     	let t11;
-    	let br0;
+    	let t12_value = /*currentTime*/ ctx[4].toFixed(2) + "";
     	let t12;
     	let t13;
     	let t14;
-    	let button0;
+    	let div2;
+    	let t15;
+    	let t16;
+    	let br0;
+    	let t17;
     	let t18;
+    	let t19;
     	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 t27;
+    	let t28;
     	let t29;
-    	let button3;
+    	let t30_value = /*timestamps*/ ctx[11].length + "";
     	let t30;
-    	let button3_class_value;
-    	let button3_disabled_value;
     	let t31;
-    	let button4;
+    	let br1;
     	let t32;
+    	let button3;
+    	let t34;
+    	let button4;
+    	let t35;
     	let button4_class_value;
     	let button4_disabled_value;
-    	let t33;
+    	let t36;
     	let button5;
-    	let t34;
+    	let t37;
     	let button5_class_value;
     	let button5_disabled_value;
-    	let t35;
-    	let t36;
-    	let t37;
-    	let t38_value = /*userTimestamps*/ ctx[1].length + "";
     	let t38;
+    	let button6;
     	let t39;
-    	let br2;
+    	let button6_class_value;
+    	let button6_disabled_value;
     	let t40;
     	let t41;
     	let t42;
-    	let t43_value = /*r2userTimestamps*/ ctx[9].length + "";
+    	let t43_value = /*userTimestamps*/ ctx[1].length + "";
     	let t43;
     	let t44;
-    	let br3;
+    	let br2;
     	let t45;
-    	let br4;
     	let t46;
-    	let button6;
+    	let t47;
+    	let t48_value = /*r2userTimestamps*/ ctx[12].length + "";
     	let t48;
-    	let button7;
+    	let t49;
+    	let br3;
     	let t50;
+    	let br4;
+    	let t51;
+    	let button7;
+    	let t53;
+    	let button8;
+    	let t55;
     	let input2;
+    	let t56;
+    	let br5;
+    	let t57;
+    	let input3;
+    	let t58;
+    	let input4;
+    	let t59;
+    	let input5;
+    	let t60;
+    	let input6;
     	let mounted;
     	let dispose;
 
@@ -3024,116 +3947,154 @@ var app = (function () {
     			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    ");
+    			t3 = text("\r\n    Start/Stop Word Update (Dummy Transcript as default)\r\n    ");
     			input1 = element("input");
     			t4 = space();
+    			textarea = element("textarea");
+    			t5 = space();
+    			button0 = element("button");
+    			button0.textContent = "Convert to JSON";
+    			t7 = space();
+    			pre = element("pre");
+    			t8 = text(/*jsonOutput*/ ctx[6]);
+    			t9 = space();
     			div3 = element("div");
     			div0 = element("div");
-    			t5 = space();
+    			t10 = space();
     			div1 = element("div");
-    			t6 = text("Current Time: ");
-    			t7 = text(t7_value);
-    			t8 = text(" seconds");
-    			t9 = space();
+    			t11 = text("Current Time: ");
+    			t12 = text(t12_value);
+    			t13 = text(" seconds");
+    			t14 = space();
     			div2 = element("div");
-    			t10 = text(/*line*/ ctx[5]);
-    			t11 = space();
+    			t15 = text(/*line*/ ctx[8]);
+    			t16 = 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();
+    			t17 = space();
+    			t18 = text(/*currentWord*/ ctx[7]);
+    			t19 = 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();
+    			button1.textContent = `Previous Auto Timestamp - ${/*interval*/ ctx[19]}s`;
+    			t23 = space();
     			button2 = element("button");
-    			button2.textContent = "Add Timestamp";
-    			t29 = space();
-    			button3 = element("button");
-    			t30 = text("Current User Timestamp (incomplete)");
+    			button2.textContent = `Next Auto Timestamp - ${/*interval*/ ctx[19]}s`;
+    			t27 = text("\r\nAuto Timestamps: ");
+    			t28 = text(/*currentIndex*/ ctx[10]);
+    			t29 = text(" / ");
+    			t30 = text(t30_value);
     			t31 = space();
+    			br1 = element("br");
+    			t32 = space();
+    			button3 = element("button");
+    			button3.textContent = "Add Timestamp";
+    			t34 = space();
     			button4 = element("button");
-    			t32 = text("Previous User Timestamp");
-    			t33 = space();
+    			t35 = text("Current User Timestamp (incomplete)");
+    			t36 = 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: ");
+    			t37 = text("Previous User Timestamp");
+    			t38 = space();
+    			button6 = element("button");
+    			t39 = text("Next User Timestamp");
+    			t40 = text("\r\nUser Timestamps: ");
     			t41 = text(/*currentuserIndex*/ ctx[0]);
     			t42 = text(" / ");
     			t43 = text(t43_value);
     			t44 = space();
+    			br2 = element("br");
+    			t45 = text(" Round 2 (/n) User Timestamps: ");
+    			t46 = text(/*currentuserIndex*/ ctx[0]);
+    			t47 = text(" / ");
+    			t48 = text(t48_value);
+    			t49 = 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 ");
+    			t50 = 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();
+    			t51 = space();
     			button7 = element("button");
-    			button7.textContent = "Export Round 2 Timestamps";
-    			t50 = text(" Import Timestamps (Incomplete) ");
+    			button7.textContent = "Export Timestamps";
+    			t53 = space();
+    			button8 = element("button");
+    			button8.textContent = "Export Round 2 Timestamps";
+    			t55 = text(" Import Timestamps (Incomplete) ");
     			input2 = element("input");
-    			add_location(h1, file$5, 286, 0, 9769);
+    			t56 = space();
+    			br5 = element("br");
+    			t57 = text(" Interval Repeat ");
+    			input3 = element("input");
+    			t58 = text(" ||| Start ");
+    			input4 = element("input");
+    			t59 = text(" End ");
+    			input5 = element("input");
+    			t60 = text(" Reps ");
+    			input6 = element("input");
+    			add_location(h1, file$5, 333, 0, 11319);
     			attr_dev(input0, "type", "text");
-    			add_location(input0, file$5, 290, 4, 9927);
+    			add_location(input0, file$5, 337, 4, 11477);
     			attr_dev(input1, "type", "checkbox");
-    			add_location(input1, file$5, 292, 4, 10035);
-    			add_location(label, file$5, 288, 0, 9832);
+    			add_location(input1, file$5, 339, 4, 11588);
+    			attr_dev(textarea, "placeholder", "Enter transcript here...");
+    			add_location(textarea, file$5, 344, 4, 11911);
+    			add_location(button0, file$5, 345, 4, 12001);
+    			attr_dev(pre, "class", "transcriptpre svelte-alwc6b");
+    			add_location(pre, file$5, 346, 4, 12067);
+    			add_location(label, file$5, 335, 0, 11382);
     			attr_dev(div0, "id", "youtube-player");
     			set_style(div0, "height", "90vh");
     			set_style(div0, "width", "90%");
-    			add_location(div0, file$5, 300, 4, 10405);
+    			add_location(div0, file$5, 350, 4, 12165);
     			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);
+    			add_location(div1, file$5, 351, 4, 12235);
+    			add_location(br0, file$5, 355, 15, 12555);
     			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);
+    			add_location(div2, file$5, 354, 4, 12414);
     			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"));
+    			add_location(div3, file$5, 349, 0, 12126);
+    			add_location(button1, file$5, 361, 0, 12681);
+    			add_location(button2, file$5, 362, 0, 12774);
+    			add_location(br1, file$5, 365, 0, 12916);
+    			add_location(button3, file$5, 366, 0, 12922);
+    			attr_dev(button4, "class", button4_class_value = "" + (null_to_empty(/*currentindexButtonClass*/ ctx[16]) + " svelte-alwc6b"));
     			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);
+    			add_location(button4, file$5, 367, 0, 12982);
+    			attr_dev(button5, "class", button5_class_value = "" + (null_to_empty(/*previousindexButtonClass*/ ctx[17]) + " svelte-alwc6b"));
+    			button5.disabled = button5_disabled_value = /*currentuserIndex*/ ctx[0] <= 0;
+    			add_location(button5, file$5, 368, 0, 13137);
+    			attr_dev(button6, "class", button6_class_value = "" + (null_to_empty(/*nextindexButtonClass*/ ctx[18]) + " svelte-alwc6b"));
+    			button6.disabled = button6_disabled_value = /*currentuserIndex*/ ctx[0] >= /*userTimestamps*/ ctx[1].length - 1;
+    			add_location(button6, file$5, 369, 0, 13282);
+    			add_location(br2, file$5, 372, 0, 13505);
+    			add_location(br3, file$5, 372, 82, 13587);
+    			add_location(br4, file$5, 372, 192, 13697);
+    			add_location(button7, file$5, 373, 0, 13703);
+    			add_location(button8, file$5, 373, 63, 13766);
     			attr_dev(input2, "type", "file");
     			attr_dev(input2, "accept", ".json");
-    			add_location(input2, file$5, 323, 167, 12110);
+    			add_location(input2, file$5, 373, 167, 13870);
+    			add_location(br5, file$5, 374, 0, 13935);
+    			attr_dev(input3, "type", "checkbox");
+    			add_location(input3, file$5, 374, 21, 13956);
+    			attr_dev(input4, "type", "number");
+    			attr_dev(input4, "class", "numberinput svelte-alwc6b");
+    			attr_dev(input4, "min", "0");
+    			add_location(input4, file$5, 374, 82, 14017);
+    			attr_dev(input5, "type", "number");
+    			attr_dev(input5, "class", "numberinput svelte-alwc6b");
+    			attr_dev(input5, "min", "0");
+    			add_location(input5, file$5, 374, 162, 14097);
+    			attr_dev(input6, "type", "number");
+    			attr_dev(input6, "class", "numberinput svelte-alwc6b");
+    			attr_dev(input6, "min", "0");
+    			add_location(input6, file$5, 374, 241, 14176);
     		},
     		l: function claim(nodes) {
     			throw new Error("options.hydrate only works if the component was compiled with the `hydratable: true` option");
@@ -3147,78 +4108,106 @@ var app = (function () {
     			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);
+    			input1.checked = /*isUpdating*/ ctx[9];
+    			append_dev(label, t4);
+    			append_dev(label, textarea);
+    			set_input_value(textarea, /*transcript*/ ctx[5]);
+    			append_dev(label, t5);
+    			append_dev(label, button0);
+    			append_dev(label, t7);
+    			append_dev(label, pre);
+    			append_dev(pre, t8);
+    			insert_dev(target, t9, anchor);
     			insert_dev(target, div3, anchor);
     			append_dev(div3, div0);
-    			append_dev(div3, t5);
+    			append_dev(div3, t10);
     			append_dev(div3, div1);
-    			append_dev(div1, t6);
-    			append_dev(div1, t7);
-    			append_dev(div1, t8);
-    			append_dev(div3, t9);
+    			append_dev(div1, t11);
+    			append_dev(div1, t12);
+    			append_dev(div1, t13);
+    			append_dev(div3, t14);
     			append_dev(div3, div2);
-    			append_dev(div2, t10);
-    			append_dev(div2, t11);
+    			append_dev(div2, t15);
+    			append_dev(div2, t16);
     			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);
+    			append_dev(div2, t17);
+    			append_dev(div2, t18);
+    			insert_dev(target, t19, 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, t27, anchor);
+    			insert_dev(target, t28, anchor);
     			insert_dev(target, t29, anchor);
-    			insert_dev(target, button3, anchor);
-    			append_dev(button3, t30);
+    			insert_dev(target, t30, anchor);
     			insert_dev(target, t31, anchor);
+    			insert_dev(target, br1, anchor);
+    			insert_dev(target, t32, anchor);
+    			insert_dev(target, button3, anchor);
+    			insert_dev(target, t34, 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);
+    			append_dev(button4, t35);
     			insert_dev(target, t36, anchor);
-    			insert_dev(target, t37, anchor);
+    			insert_dev(target, button5, anchor);
+    			append_dev(button5, t37);
     			insert_dev(target, t38, anchor);
-    			insert_dev(target, t39, anchor);
-    			insert_dev(target, br2, anchor);
+    			insert_dev(target, button6, anchor);
+    			append_dev(button6, t39);
     			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, br2, anchor);
     			insert_dev(target, t45, anchor);
-    			insert_dev(target, br4, anchor);
     			insert_dev(target, t46, anchor);
-    			insert_dev(target, button6, anchor);
+    			insert_dev(target, t47, anchor);
     			insert_dev(target, t48, anchor);
-    			insert_dev(target, button7, anchor);
+    			insert_dev(target, t49, anchor);
+    			insert_dev(target, br3, anchor);
     			insert_dev(target, t50, anchor);
+    			insert_dev(target, br4, anchor);
+    			insert_dev(target, t51, anchor);
+    			insert_dev(target, button7, anchor);
+    			insert_dev(target, t53, anchor);
+    			insert_dev(target, button8, anchor);
+    			insert_dev(target, t55, anchor);
     			insert_dev(target, input2, anchor);
+    			insert_dev(target, t56, anchor);
+    			insert_dev(target, br5, anchor);
+    			insert_dev(target, t57, anchor);
+    			insert_dev(target, input3, anchor);
+    			input3.checked = /*isRepeating*/ ctx[3];
+    			insert_dev(target, t58, anchor);
+    			insert_dev(target, input4, anchor);
+    			set_input_value(input4, /*repstartTime*/ ctx[13]);
+    			insert_dev(target, t59, anchor);
+    			insert_dev(target, input5, anchor);
+    			set_input_value(input5, /*rependTime*/ ctx[14]);
+    			insert_dev(target, t60, anchor);
+    			insert_dev(target, input6, anchor);
+    			set_input_value(input6, /*repetitions*/ ctx[15]);
 
     			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)
+    					listen_dev(input0, "input", /*input0_input_handler*/ ctx[31]),
+    					listen_dev(input1, "change", /*input1_change_handler*/ ctx[32]),
+    					listen_dev(input1, "click", /*toggleUpdate*/ ctx[20], false, false, false, false),
+    					listen_dev(textarea, "input", /*textarea_input_handler*/ ctx[33]),
+    					listen_dev(button0, "click", /*transcriptToJson*/ ctx[30], false, false, false, false),
+    					listen_dev(button1, "click", /*goToPreviousAutoTimestamp*/ ctx[22], false, false, false, false),
+    					listen_dev(button2, "click", /*goToNextAutoTimestamp*/ ctx[21], false, false, false, false),
+    					listen_dev(button3, "click", /*addUserTimestamp*/ ctx[23], false, false, false, false),
+    					listen_dev(button4, "click", /*goToCurrentUserTimestamp*/ ctx[24], false, false, false, false),
+    					listen_dev(button5, "click", /*goToPreviousUserTimestamp*/ ctx[26], false, false, false, false),
+    					listen_dev(button6, "click", /*goToNextUserTimestamp*/ ctx[25], false, false, false, false),
+    					listen_dev(button7, "click", /*exportTimestamps*/ ctx[27], false, false, false, false),
+    					listen_dev(button8, "click", /*exportr2Timestamps*/ ctx[28], false, false, false, false),
+    					listen_dev(input2, "change", /*importTimestamps*/ ctx[29], false, false, false, false),
+    					listen_dev(input3, "change", /*input3_change_handler*/ ctx[34]),
+    					listen_dev(input4, "input", /*input4_input_handler*/ ctx[35]),
+    					listen_dev(input5, "input", /*input5_input_handler*/ ctx[36]),
+    					listen_dev(input6, "input", /*input6_input_handler*/ ctx[37])
     				];
 
     				mounted = true;
@@ -3229,25 +4218,22 @@ var app = (function () {
     				set_input_value(input0, /*currentvideoId*/ ctx[2]);
     			}
 
-    			if (dirty[0] & /*isUpdating*/ 64) {
-    				input1.checked = /*isUpdating*/ ctx[6];
+    			if (dirty[0] & /*isUpdating*/ 512) {
+    				input1.checked = /*isUpdating*/ ctx[9];
     			}
 
-    			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] & /*transcript*/ 32) {
+    				set_input_value(textarea, /*transcript*/ ctx[5]);
     			}
 
-    			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] & /*jsonOutput*/ 64) set_data_dev(t8, /*jsonOutput*/ ctx[6]);
+    			if (dirty[0] & /*currentTime*/ 16 && t12_value !== (t12_value = /*currentTime*/ ctx[4].toFixed(2) + "")) set_data_dev(t12, t12_value);
+    			if (dirty[0] & /*line*/ 256) set_data_dev(t15, /*line*/ ctx[8]);
+    			if (dirty[0] & /*currentWord*/ 128) set_data_dev(t18, /*currentWord*/ ctx[7]);
+    			if (dirty[0] & /*currentIndex*/ 1024) set_data_dev(t28, /*currentIndex*/ ctx[10]);
+    			if (dirty[0] & /*timestamps*/ 2048 && t30_value !== (t30_value = /*timestamps*/ ctx[11].length + "")) set_data_dev(t30, t30_value);
 
-    			if (dirty[0] & /*previousindexButtonClass*/ 2048 && button4_class_value !== (button4_class_value = "" + (null_to_empty(/*previousindexButtonClass*/ ctx[11]) + " svelte-cpjgti"))) {
+    			if (dirty[0] & /*currentindexButtonClass*/ 65536 && button4_class_value !== (button4_class_value = "" + (null_to_empty(/*currentindexButtonClass*/ ctx[16]) + " svelte-alwc6b"))) {
     				attr_dev(button4, "class", button4_class_value);
     			}
 
@@ -3255,18 +4241,42 @@ var app = (function () {
     				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"))) {
+    			if (dirty[0] & /*previousindexButtonClass*/ 131072 && button5_class_value !== (button5_class_value = "" + (null_to_empty(/*previousindexButtonClass*/ ctx[17]) + " svelte-alwc6b"))) {
     				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)) {
+    			if (dirty[0] & /*currentuserIndex*/ 1 && button5_disabled_value !== (button5_disabled_value = /*currentuserIndex*/ ctx[0] <= 0)) {
     				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] & /*nextindexButtonClass*/ 262144 && button6_class_value !== (button6_class_value = "" + (null_to_empty(/*nextindexButtonClass*/ ctx[18]) + " svelte-alwc6b"))) {
+    				attr_dev(button6, "class", button6_class_value);
+    			}
+
+    			if (dirty[0] & /*currentuserIndex, userTimestamps*/ 3 && button6_disabled_value !== (button6_disabled_value = /*currentuserIndex*/ ctx[0] >= /*userTimestamps*/ ctx[1].length - 1)) {
+    				prop_dev(button6, "disabled", button6_disabled_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);
+    			if (dirty[0] & /*userTimestamps*/ 2 && t43_value !== (t43_value = /*userTimestamps*/ ctx[1].length + "")) set_data_dev(t43, t43_value);
+    			if (dirty[0] & /*currentuserIndex*/ 1) set_data_dev(t46, /*currentuserIndex*/ ctx[0]);
+    			if (dirty[0] & /*r2userTimestamps*/ 4096 && t48_value !== (t48_value = /*r2userTimestamps*/ ctx[12].length + "")) set_data_dev(t48, t48_value);
+
+    			if (dirty[0] & /*isRepeating*/ 8) {
+    				input3.checked = /*isRepeating*/ ctx[3];
+    			}
+
+    			if (dirty[0] & /*repstartTime*/ 8192 && to_number(input4.value) !== /*repstartTime*/ ctx[13]) {
+    				set_input_value(input4, /*repstartTime*/ ctx[13]);
+    			}
+
+    			if (dirty[0] & /*rependTime*/ 16384 && to_number(input5.value) !== /*rependTime*/ ctx[14]) {
+    				set_input_value(input5, /*rependTime*/ ctx[14]);
+    			}
+
+    			if (dirty[0] & /*repetitions*/ 32768 && to_number(input6.value) !== /*repetitions*/ ctx[15]) {
+    				set_input_value(input6, /*repetitions*/ ctx[15]);
+    			}
     		},
     		i: noop,
     		o: noop,
@@ -3274,46 +4284,56 @@ var app = (function () {
     			if (detaching) detach_dev(h1);
     			if (detaching) detach_dev(t1);
     			if (detaching) detach_dev(label);
-    			if (detaching) detach_dev(t4);
+    			if (detaching) detach_dev(t9);
     			if (detaching) detach_dev(div3);
-    			if (detaching) detach_dev(t14);
-    			if (detaching) detach_dev(button0);
-    			if (detaching) detach_dev(t18);
+    			if (detaching) detach_dev(t19);
     			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(t27);
+    			if (detaching) detach_dev(t28);
     			if (detaching) detach_dev(t29);
-    			if (detaching) detach_dev(button3);
+    			if (detaching) detach_dev(t30);
     			if (detaching) detach_dev(t31);
+    			if (detaching) detach_dev(br1);
+    			if (detaching) detach_dev(t32);
+    			if (detaching) detach_dev(button3);
+    			if (detaching) detach_dev(t34);
     			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(button5);
     			if (detaching) detach_dev(t38);
-    			if (detaching) detach_dev(t39);
-    			if (detaching) detach_dev(br2);
+    			if (detaching) detach_dev(button6);
     			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(br2);
     			if (detaching) detach_dev(t45);
-    			if (detaching) detach_dev(br4);
     			if (detaching) detach_dev(t46);
-    			if (detaching) detach_dev(button6);
+    			if (detaching) detach_dev(t47);
     			if (detaching) detach_dev(t48);
-    			if (detaching) detach_dev(button7);
+    			if (detaching) detach_dev(t49);
+    			if (detaching) detach_dev(br3);
     			if (detaching) detach_dev(t50);
+    			if (detaching) detach_dev(br4);
+    			if (detaching) detach_dev(t51);
+    			if (detaching) detach_dev(button7);
+    			if (detaching) detach_dev(t53);
+    			if (detaching) detach_dev(button8);
+    			if (detaching) detach_dev(t55);
     			if (detaching) detach_dev(input2);
+    			if (detaching) detach_dev(t56);
+    			if (detaching) detach_dev(br5);
+    			if (detaching) detach_dev(t57);
+    			if (detaching) detach_dev(input3);
+    			if (detaching) detach_dev(t58);
+    			if (detaching) detach_dev(input4);
+    			if (detaching) detach_dev(t59);
+    			if (detaching) detach_dev(input5);
+    			if (detaching) detach_dev(t60);
+    			if (detaching) detach_dev(input6);
     			mounted = false;
     			run_all(dispose);
     		}
@@ -3357,6 +4377,7 @@ var app = (function () {
     Line 8 fooding
     ...`; // Replace with your actual transcript
 
+    	let jsonOutput = '';
     	let lines = transcript.split("\n");
     	let currentWord = "";
     	let line = "";
@@ -3371,6 +4392,11 @@ var app = (function () {
     	let youTubeApiLoaded = false;
     	let currentvideoduration;
     	let regeneratedautotimestamps = false;
+    	let repstartTime = 10;
+    	let rependTime = 20;
+    	let repetitions = 20;
+    	let intervalId;
+    	let isRepeating = false;
 
     	window.onYouTubeIframeAPIReady = function () {
     		youTubeApiLoaded = true;
@@ -3431,7 +4457,7 @@ var app = (function () {
     			generatedTimestamps.push(i);
     		}
 
-    		$$invalidate(8, timestamps = generatedTimestamps);
+    		$$invalidate(11, timestamps = generatedTimestamps);
 
     		// Do something with the timestamps
     		//console.log("Generated Timestamps: ", generatedTimestamps);
@@ -3462,12 +4488,12 @@ var app = (function () {
     		? curr
     		: prev);
 
-    		$$invalidate(7, currentIndex = timestamps.indexOf(closest));
+    		$$invalidate(10, currentIndex = timestamps.indexOf(closest));
     	}
 
     	function updateCurrentTime() {
     		if (player && player.getCurrentTime) {
-    			$$invalidate(3, currentTime = player.getCurrentTime());
+    			$$invalidate(4, currentTime = player.getCurrentTime());
     		}
     	}
 
@@ -3477,34 +4503,35 @@ var app = (function () {
 
     	function updateWord() {
     		if (isUpdating) {
-    			$$invalidate(5, line = lines[Math.floor(Math.random() * lines.length)]);
-    			$$invalidate(4, currentWord = getRandomWord(line));
+    			$$invalidate(8, line = lines[Math.floor(Math.random() * lines.length)]);
+    			$$invalidate(7, currentWord = getRandomWord(line));
     		}
     	}
 
     	function toggleUpdate() {
-    		$$invalidate(6, isUpdating = !isUpdating);
+    		lines = transcript.split("\n");
+    		$$invalidate(9, 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 = '');
+    			$$invalidate(8, line = '');
+    			$$invalidate(7, currentWord = '');
     		}
     	}
 
     	function goToNextAutoTimestamp() {
     		if (currentIndex < timestamps.length - 1) {
-    			$$invalidate(7, currentIndex += 1);
+    			$$invalidate(10, currentIndex += 1);
     			player.seekTo(timestamps[currentIndex], true);
     		}
     	}
 
     	function goToPreviousAutoTimestamp() {
     		if (currentIndex > 0) {
-    			$$invalidate(7, currentIndex -= 1);
+    			$$invalidate(10, currentIndex -= 1);
     			player.seekTo(timestamps[currentIndex], true);
     		}
     	}
@@ -3516,7 +4543,7 @@ var app = (function () {
 
     	function addr2UserTimestamp() {
     		const currentTime = Math.floor(player.getCurrentTime());
-    		$$invalidate(9, r2userTimestamps = [...r2userTimestamps, currentTime].sort((a, b) => a - b));
+    		$$invalidate(12, r2userTimestamps = [...r2userTimestamps, currentTime].sort((a, b) => a - b));
     	}
 
     	function goToCurrentUserTimestamp() {
@@ -3622,6 +4649,45 @@ var app = (function () {
     		reader.readAsText(file);
     	}
 
+    	function transcriptToJson() {
+    		const lines = transcript.split('\n').filter(line => line.trim() !== '');
+    		const result = [];
+
+    		for (let i = 0; i < lines.length; i += 2) {
+    			const timestampLine = lines[i];
+    			const textLine = lines[i + 1] || ''; // Ensure there's a line for text
+    			const timestampParts = timestampLine.split(' ');
+    			const timestamp = timestampParts.shift();
+    			const timeParts = timestamp.split(':');
+    			const seconds = parseInt(timeParts[0], 10) * 60 + parseInt(timeParts[1], 10);
+    			result.push({ time: seconds, text: textLine.trim() });
+    		}
+
+    		$$invalidate(6, jsonOutput = JSON.stringify(result, null, 2));
+    	}
+
+    	function startRepetition() {
+    		let count = 0;
+    		player.seekTo(repstartTime, true);
+    		player.playVideo();
+
+    		intervalId = setInterval(
+    			() => {
+    				if (count < repetitions) {
+    					player.seekTo(repstartTime, true);
+    					count++;
+    				} else {
+    					stopRepetition();
+    				}
+    			},
+    			(rependTime - repstartTime) * 1000
+    		);
+    	}
+
+    	function stopRepetition() {
+    		clearInterval(intervalId);
+    	} //player.pauseVideo();
+
     	const writable_props = [];
 
     	Object.keys($$props).forEach(key => {
@@ -3635,7 +4701,32 @@ var app = (function () {
 
     	function input1_change_handler() {
     		isUpdating = this.checked;
-    		$$invalidate(6, isUpdating);
+    		$$invalidate(9, isUpdating);
+    	}
+
+    	function textarea_input_handler() {
+    		transcript = this.value;
+    		$$invalidate(5, transcript);
+    	}
+
+    	function input3_change_handler() {
+    		isRepeating = this.checked;
+    		$$invalidate(3, isRepeating);
+    	}
+
+    	function input4_input_handler() {
+    		repstartTime = to_number(this.value);
+    		$$invalidate(13, repstartTime);
+    	}
+
+    	function input5_input_handler() {
+    		rependTime = to_number(this.value);
+    		$$invalidate(14, rependTime);
+    	}
+
+    	function input6_input_handler() {
+    		repetitions = to_number(this.value);
+    		$$invalidate(15, repetitions);
     	}
 
     	$$self.$capture_state = () => ({
@@ -3646,6 +4737,7 @@ var app = (function () {
     		currentTime,
     		timeUpdateInterval,
     		transcript,
+    		jsonOutput,
     		lines,
     		currentWord,
     		line,
@@ -3660,6 +4752,11 @@ var app = (function () {
     		youTubeApiLoaded,
     		currentvideoduration,
     		regeneratedautotimestamps,
+    		repstartTime,
+    		rependTime,
+    		repetitions,
+    		intervalId,
+    		isRepeating,
     		initYouTubePlayer,
     		autogeneratedtimestamps,
     		onPlayerReady,
@@ -3679,6 +4776,9 @@ var app = (function () {
     		exportTimestamps,
     		exportr2Timestamps,
     		importTimestamps,
+    		transcriptToJson,
+    		startRepetition,
+    		stopRepetition,
     		currentindexButtonClass,
     		previousindexButtonClass,
     		nextindexButtonClass
@@ -3686,27 +4786,33 @@ var app = (function () {
 
     	$$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 ('interval' in $$props) $$invalidate(19, interval = $$props.interval);
+    		if ('currentTime' in $$props) $$invalidate(4, currentTime = $$props.currentTime);
     		if ('timeUpdateInterval' in $$props) timeUpdateInterval = $$props.timeUpdateInterval;
-    		if ('transcript' in $$props) transcript = $$props.transcript;
+    		if ('transcript' in $$props) $$invalidate(5, transcript = $$props.transcript);
+    		if ('jsonOutput' in $$props) $$invalidate(6, jsonOutput = $$props.jsonOutput);
     		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 ('currentWord' in $$props) $$invalidate(7, currentWord = $$props.currentWord);
+    		if ('line' in $$props) $$invalidate(8, line = $$props.line);
+    		if ('isUpdating' in $$props) $$invalidate(9, isUpdating = $$props.isUpdating);
     		if ('updateInterval' in $$props) updateInterval = $$props.updateInterval;
-    		if ('currentIndex' in $$props) $$invalidate(7, currentIndex = $$props.currentIndex);
+    		if ('currentIndex' in $$props) $$invalidate(10, currentIndex = $$props.currentIndex);
     		if ('currentuserIndex' in $$props) $$invalidate(0, currentuserIndex = $$props.currentuserIndex);
-    		if ('timestamps' in $$props) $$invalidate(8, timestamps = $$props.timestamps);
+    		if ('timestamps' in $$props) $$invalidate(11, timestamps = $$props.timestamps);
     		if ('userTimestamps' in $$props) $$invalidate(1, userTimestamps = $$props.userTimestamps);
-    		if ('r2userTimestamps' in $$props) $$invalidate(9, r2userTimestamps = $$props.r2userTimestamps);
+    		if ('r2userTimestamps' in $$props) $$invalidate(12, 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 ('repstartTime' in $$props) $$invalidate(13, repstartTime = $$props.repstartTime);
+    		if ('rependTime' in $$props) $$invalidate(14, rependTime = $$props.rependTime);
+    		if ('repetitions' in $$props) $$invalidate(15, repetitions = $$props.repetitions);
+    		if ('intervalId' in $$props) intervalId = $$props.intervalId;
+    		if ('isRepeating' in $$props) $$invalidate(3, isRepeating = $$props.isRepeating);
+    		if ('currentindexButtonClass' in $$props) $$invalidate(16, currentindexButtonClass = $$props.currentindexButtonClass);
+    		if ('previousindexButtonClass' in $$props) $$invalidate(17, previousindexButtonClass = $$props.previousindexButtonClass);
+    		if ('nextindexButtonClass' in $$props) $$invalidate(18, nextindexButtonClass = $$props.nextindexButtonClass);
     	};
 
     	if ($$props && "$$inject" in $$props) {
@@ -3721,17 +4827,25 @@ var app = (function () {
     		}
 
     		if ($$self.$$.dirty[0] & /*currentuserIndex, userTimestamps*/ 3) {
-    			$$invalidate(12, nextindexButtonClass = currentuserIndex >= userTimestamps.length - 1
+    			$$invalidate(18, nextindexButtonClass = currentuserIndex >= userTimestamps.length - 1
     			? 'button-at-end'
     			: 'button');
     		}
 
     		if ($$self.$$.dirty[0] & /*currentuserIndex*/ 1) {
-    			$$invalidate(11, previousindexButtonClass = currentuserIndex <= 0 ? 'button-at-end' : 'button');
+    			$$invalidate(17, previousindexButtonClass = currentuserIndex <= 0 ? 'button-at-end' : 'button');
     		}
 
     		if ($$self.$$.dirty[0] & /*currentuserIndex*/ 1) {
-    			$$invalidate(10, currentindexButtonClass = currentuserIndex <= 0 ? 'button-at-end' : 'button');
+    			$$invalidate(16, currentindexButtonClass = currentuserIndex <= 0 ? 'button-at-end' : 'button');
+    		}
+
+    		if ($$self.$$.dirty[0] & /*isRepeating*/ 8) {
+    			if (isRepeating) {
+    				startRepetition();
+    			} else {
+    				stopRepetition();
+    			}
     		}
     	};
 
@@ -3739,13 +4853,19 @@ var app = (function () {
     		currentuserIndex,
     		userTimestamps,
     		currentvideoId,
+    		isRepeating,
     		currentTime,
+    		transcript,
+    		jsonOutput,
     		currentWord,
     		line,
     		isUpdating,
     		currentIndex,
     		timestamps,
     		r2userTimestamps,
+    		repstartTime,
+    		rependTime,
+    		repetitions,
     		currentindexButtonClass,
     		previousindexButtonClass,
     		nextindexButtonClass,
@@ -3760,8 +4880,14 @@ var app = (function () {
     		exportTimestamps,
     		exportr2Timestamps,
     		importTimestamps,
+    		transcriptToJson,
     		input0_input_handler,
-    		input1_change_handler
+    		input1_change_handler,
+    		textarea_input_handler,
+    		input3_change_handler,
+    		input4_input_handler,
+    		input5_input_handler,
+    		input6_input_handler
     	];
     }
 
@@ -5684,7 +6810,7 @@ var app = (function () {
     			create_component(myyoutube.$$.fragment);
     			t18 = space();
     			h12 = element("h1");
-    			h12.textContent = "Themeable Game Brainstorm - Image + Lists";
+    			h12.textContent = "Themeable Game Brainstorm - Image + Lists - Game as Universal Translator for any subject";
     			t20 = space();
     			create_component(dotgame.$$.fragment);
     			attr_dev(h10, "class", "svelte-1gz1mpc");