Moving Dot Images and LFS is hard

.gitattributes

@@ -34,3 +34,4 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
 AutoGameBackgrounds/1stGameLoc123.png filter=lfs diff=lfs merge=lfs -text
+*.png filter=lfs diff=lfs merge=lfs -text

bundle.css

@@ -1,2 +1,4 @@
 #videoContainer.svelte-ufd3fo{border:2px solid red;position:relative;width:720px;height:480px}#videoCanvas.svelte-ufd3fo{border:2px solid black;width:99.5%;height:99.5%;object-fit:cover}#overlayText.svelte-ufd3fo{position:absolute;top:50%;right:50%;color:green;font-style:bold;font-size:15}
+.MovingDot.svelte-12o76ak{position:absolute;width:20px;height:20px;background-color:lightgreen;border:2px black}
+.target.svelte-4yc66h{position:absolute;width:20px;height:20px;background-color:red}
 main.svelte-1tky8bj{text-align:center;padding:1em;max-width:240px;margin:0 auto}h1.svelte-1tky8bj{color:#ff3e00;text-transform:uppercase;font-size:4em;font-weight:100}@media(min-width: 640px){main.svelte-1tky8bj{max-width:none}}

bundle.js

@@ -248,6 +248,19 @@ var app = (function () {
     }
     const outroing = new Set();
     let outros;
+    function group_outros() {
+        outros = {
+            r: 0,
+            c: [],
+            p: outros // parent group
+        };
+    }
+    function check_outros() {
+        if (!outros.r) {
+            run_all(outros.c);
+        }
+        outros = outros.p;
+    }
     function transition_in(block, local) {
         if (block && block.i) {
             outroing.delete(block);
@@ -273,6 +286,99 @@ var app = (function () {
             callback();
         }
     }
+    function outro_and_destroy_block(block, lookup) {
+        transition_out(block, 1, 1, () => {
+            lookup.delete(block.key);
+        });
+    }
+    function update_keyed_each(old_blocks, dirty, get_key, dynamic, ctx, list, lookup, node, destroy, create_each_block, next, get_context) {
+        let o = old_blocks.length;
+        let n = list.length;
+        let i = o;
+        const old_indexes = {};
+        while (i--)
+            old_indexes[old_blocks[i].key] = i;
+        const new_blocks = [];
+        const new_lookup = new Map();
+        const deltas = new Map();
+        const updates = [];
+        i = n;
+        while (i--) {
+            const child_ctx = get_context(ctx, list, i);
+            const key = get_key(child_ctx);
+            let block = lookup.get(key);
+            if (!block) {
+                block = create_each_block(key, child_ctx);
+                block.c();
+            }
+            else if (dynamic) {
+                // defer updates until all the DOM shuffling is done
+                updates.push(() => block.p(child_ctx, dirty));
+            }
+            new_lookup.set(key, new_blocks[i] = block);
+            if (key in old_indexes)
+                deltas.set(key, Math.abs(i - old_indexes[key]));
+        }
+        const will_move = new Set();
+        const did_move = new Set();
+        function insert(block) {
+            transition_in(block, 1);
+            block.m(node, next);
+            lookup.set(block.key, block);
+            next = block.first;
+            n--;
+        }
+        while (o && n) {
+            const new_block = new_blocks[n - 1];
+            const old_block = old_blocks[o - 1];
+            const new_key = new_block.key;
+            const old_key = old_block.key;
+            if (new_block === old_block) {
+                // do nothing
+                next = new_block.first;
+                o--;
+                n--;
+            }
+            else if (!new_lookup.has(old_key)) {
+                // remove old block
+                destroy(old_block, lookup);
+                o--;
+            }
+            else if (!lookup.has(new_key) || will_move.has(new_key)) {
+                insert(new_block);
+            }
+            else if (did_move.has(old_key)) {
+                o--;
+            }
+            else if (deltas.get(new_key) > deltas.get(old_key)) {
+                did_move.add(new_key);
+                insert(new_block);
+            }
+            else {
+                will_move.add(old_key);
+                o--;
+            }
+        }
+        while (o--) {
+            const old_block = old_blocks[o];
+            if (!new_lookup.has(old_block.key))
+                destroy(old_block, lookup);
+        }
+        while (n)
+            insert(new_blocks[n - 1]);
+        run_all(updates);
+        return new_blocks;
+    }
+    function validate_each_keys(ctx, list, get_context, get_key) {
+        const keys = new Set();
+        for (let i = 0; i < list.length; i++) {
+            const key = get_key(get_context(ctx, list, i));
+            if (keys.has(key)) {
+                throw new Error('Cannot have duplicate keys in a keyed each');
+            }
+            keys.add(key);
+        }
+    }
     function create_component(block) {
         block && block.c();
     }
@@ -492,16 +598,16 @@ var app = (function () {
     /* src\VideoGradioComponentBrainstorming.svelte generated by Svelte v3.59.2 */
 
     const { console: console_1 } = globals;
-    const file$2 = "src\\VideoGradioComponentBrainstorming.svelte";
+    const file$5 = "src\\VideoGradioComponentBrainstorming.svelte";
 
-    function get_each_context$1(ctx, list, i) {
+    function get_each_context$2(ctx, list, i) {
     	const child_ctx = ctx.slice();
     	child_ctx[15] = list[i];
     	return child_ctx;
     }
 
     // (85:4) {#each kitchenOptions as option}
-    function create_each_block$1(ctx) {
+    function create_each_block$2(ctx) {
     	let option;
     	let t_value = /*option*/ ctx[15] + "";
     	let t;
@@ -512,7 +618,7 @@ var app = (function () {
     			t = text(t_value);
     			option.__value = /*option*/ ctx[15];
     			option.value = option.__value;
-    			add_location(option, file$2, 85, 6, 2561);
+    			add_location(option, file$5, 85, 6, 2561);
     		},
     		m: function mount(target, anchor) {
     			insert_dev(target, option, anchor);
@@ -526,7 +632,7 @@ var app = (function () {
 
     	dispatch_dev("SvelteRegisterBlock", {
     		block,
-    		id: create_each_block$1.name,
+    		id: create_each_block$2.name,
     		type: "each",
     		source: "(85:4) {#each kitchenOptions as option}",
     		ctx
@@ -535,7 +641,7 @@ var app = (function () {
     	return block;
     }
 
-    function create_fragment$2(ctx) {
+    function create_fragment$5(ctx) {
     	let h1;
     	let t1;
     	let div1;
@@ -562,7 +668,7 @@ var app = (function () {
     	let each_blocks = [];
 
     	for (let i = 0; i < each_value.length; i += 1) {
-    		each_blocks[i] = create_each_block$1(get_each_context$1(ctx, each_value, i));
+    		each_blocks[i] = create_each_block$2(get_each_context$2(ctx, each_value, i));
     	}
 
     	const block = {
@@ -592,34 +698,34 @@ var app = (function () {
     				each_blocks[i].c();
     			}
 
-    			add_location(h1, file$2, 66, 0, 1800);
+    			add_location(h1, file$5, 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$2, 72, 4, 2006);
+    			add_location(track, file$5, 72, 4, 2006);
     			attr_dev(video, "id", "videoCanvas");
     			video.autoplay = true;
     			attr_dev(video, "class", "svelte-ufd3fo");
-    			add_location(video, file$2, 70, 2, 1965);
+    			add_location(video, file$5, 70, 2, 1965);
     			attr_dev(div0, "id", "overlayText");
     			attr_dev(div0, "class", "svelte-ufd3fo");
-    			add_location(div0, file$2, 74, 2, 2111);
+    			add_location(div0, file$5, 74, 2, 2111);
     			attr_dev(div1, "id", "videoContainer");
     			attr_dev(div1, "class", "svelte-ufd3fo");
-    			add_location(div1, file$2, 68, 0, 1911);
+    			add_location(div1, file$5, 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$2, 77, 0, 2186);
+    			add_location(canvas_1, file$5, 77, 0, 2186);
     			attr_dev(input, "type", "text");
-    			add_location(input, file$2, 78, 0, 2294);
-    			add_location(button, file$2, 82, 2, 2429);
+    			add_location(input, file$5, 78, 0, 2294);
+    			add_location(button, file$5, 82, 2, 2429);
     			if (/*selectedOption*/ ctx[0] === void 0) add_render_callback(() => /*select_change_handler*/ ctx[9].call(select));
-    			add_location(select, file$2, 83, 2, 2479);
+    			add_location(select, file$5, 83, 2, 2479);
     			attr_dev(div2, "id", "frameForButtons");
-    			add_location(div2, file$2, 81, 0, 2399);
+    			add_location(div2, file$5, 81, 0, 2399);
     		},
     		l: function claim(nodes) {
     			throw new Error("options.hydrate only works if the component was compiled with the `hydratable: true` option");
@@ -678,12 +784,12 @@ var app = (function () {
     				let i;
 
     				for (i = 0; i < each_value.length; i += 1) {
-    					const child_ctx = get_each_context$1(ctx, each_value, i);
+    					const child_ctx = get_each_context$2(ctx, each_value, i);
 
     					if (each_blocks[i]) {
     						each_blocks[i].p(child_ctx, dirty);
     					} else {
-    						each_blocks[i] = create_each_block$1(child_ctx);
+    						each_blocks[i] = create_each_block$2(child_ctx);
     						each_blocks[i].c();
     						each_blocks[i].m(select, null);
     					}
@@ -721,7 +827,7 @@ var app = (function () {
 
     	dispatch_dev("SvelteRegisterBlock", {
     		block,
-    		id: create_fragment$2.name,
+    		id: create_fragment$5.name,
     		type: "component",
     		source: "",
     		ctx
@@ -734,7 +840,7 @@ var app = (function () {
     	
     } // Logic for 'Test OCR' button
 
-    function instance$2($$self, $$props, $$invalidate) {
+    function instance$5($$self, $$props, $$invalidate) {
     	let { $$slots: slots = {}, $$scope } = $$props;
     	validate_slots('VideoGradioComponentBrainstorming', slots, []);
     	let selectedOption = 'Stove - lu'; // default value
@@ -867,13 +973,13 @@ var app = (function () {
     class VideoGradioComponentBrainstorming extends SvelteComponentDev {
     	constructor(options) {
     		super(options);
-    		init(this, options, instance$2, create_fragment$2, safe_not_equal, {});
+    		init(this, options, instance$5, create_fragment$5, safe_not_equal, {});
 
     		dispatch_dev("SvelteRegisterComponent", {
     			component: this,
     			tagName: "VideoGradioComponentBrainstorming",
     			options,
-    			id: create_fragment$2.name
+    			id: create_fragment$5.name
     		});
     	}
     }
@@ -944,9 +1050,9 @@ var app = (function () {
     }
 
     /* src\NestedCommentsTestfromReact.svelte generated by Svelte v3.59.2 */
-    const file$1 = "src\\NestedCommentsTestfromReact.svelte";
+    const file$4 = "src\\NestedCommentsTestfromReact.svelte";
 
-    function get_each_context(ctx, list, i) {
+    function get_each_context$1(ctx, list, i) {
     	const child_ctx = ctx.slice();
     	child_ctx[6] = list[i];
     	return child_ctx;
@@ -959,7 +1065,7 @@ var app = (function () {
     }
 
     // (29:12) {#if comment.items}
-    function create_if_block(ctx) {
+    function create_if_block$1(ctx) {
     	let each_1_anchor;
     	let each_value_1 = /*comment*/ ctx[6].items;
     	validate_each_argument(each_value_1);
@@ -1019,7 +1125,7 @@ var app = (function () {
 
     	dispatch_dev("SvelteRegisterBlock", {
     		block,
-    		id: create_if_block.name,
+    		id: create_if_block$1.name,
     		type: "if",
     		source: "(29:12) {#if comment.items}",
     		ctx
@@ -1064,7 +1170,7 @@ var app = (function () {
     }
 
     // (23:4) {#each comments as comment}
-    function create_each_block(ctx) {
+    function create_each_block$1(ctx) {
     	let div1;
     	let div0;
     	let span;
@@ -1082,7 +1188,7 @@ var app = (function () {
     		return /*click_handler*/ ctx[5](/*comment*/ ctx[6]);
     	}
 
-    	let if_block = /*comment*/ ctx[6].items && create_if_block(ctx);
+    	let if_block = /*comment*/ ctx[6].items && create_if_block$1(ctx);
 
     	const block = {
     		c: function create() {
@@ -1097,13 +1203,13 @@ var app = (function () {
     			if (if_block) if_block.c();
     			t4 = space();
     			attr_dev(span, "class", "text");
-    			add_location(span, file$1, 25, 16, 818);
-    			add_location(button, file$1, 26, 16, 877);
+    			add_location(span, file$4, 25, 16, 818);
+    			add_location(button, file$4, 26, 16, 877);
     			attr_dev(div0, "class", "card");
-    			add_location(div0, file$1, 24, 12, 782);
+    			add_location(div0, file$4, 24, 12, 782);
     			attr_dev(div1, "key", div1_key_value = /*comment*/ ctx[6].id);
     			set_style(div1, "margin-left", "20px");
-    			add_location(div1, file$1, 23, 8, 719);
+    			add_location(div1, file$4, 23, 8, 719);
     		},
     		m: function mount(target, anchor) {
     			insert_dev(target, div1, anchor);
@@ -1129,7 +1235,7 @@ var app = (function () {
     				if (if_block) {
     					if_block.p(ctx, dirty);
     				} else {
-    					if_block = create_if_block(ctx);
+    					if_block = create_if_block$1(ctx);
     					if_block.c();
     					if_block.m(div1, t4);
     				}
@@ -1152,7 +1258,7 @@ var app = (function () {
 
     	dispatch_dev("SvelteRegisterBlock", {
     		block,
-    		id: create_each_block.name,
+    		id: create_each_block$1.name,
     		type: "each",
     		source: "(23:4) {#each comments as comment}",
     		ctx
@@ -1161,7 +1267,7 @@ var app = (function () {
     	return block;
     }
 
-    function create_fragment$1(ctx) {
+    function create_fragment$4(ctx) {
     	let div1;
     	let div0;
     	let input;
@@ -1175,7 +1281,7 @@ var app = (function () {
     	let each_blocks = [];
 
     	for (let i = 0; i < each_value.length; i += 1) {
-    		each_blocks[i] = create_each_block(get_each_context(ctx, each_value, i));
+    		each_blocks[i] = create_each_block$1(get_each_context$1(ctx, each_value, i));
     	}
 
     	const block = {
@@ -1194,11 +1300,11 @@ var app = (function () {
 
     			attr_dev(input, "type", "text");
     			attr_dev(input, "placeholder", "Add a comment");
-    			add_location(input, file$1, 19, 8, 530);
-    			add_location(button, file$1, 20, 8, 613);
-    			add_location(div0, file$1, 18, 4, 515);
+    			add_location(input, file$4, 19, 8, 530);
+    			add_location(button, file$4, 20, 8, 613);
+    			add_location(div0, file$4, 18, 4, 515);
     			attr_dev(div1, "id", "comment-container");
-    			add_location(div1, file$1, 17, 0, 481);
+    			add_location(div1, file$4, 17, 0, 481);
     		},
     		l: function claim(nodes) {
     			throw new Error("options.hydrate only works if the component was compiled with the `hydratable: true` option");
@@ -1238,12 +1344,12 @@ var app = (function () {
     				let i;
 
     				for (i = 0; i < each_value.length; i += 1) {
-    					const child_ctx = get_each_context(ctx, each_value, i);
+    					const child_ctx = get_each_context$1(ctx, each_value, i);
 
     					if (each_blocks[i]) {
     						each_blocks[i].p(child_ctx, dirty);
     					} else {
-    						each_blocks[i] = create_each_block(child_ctx);
+    						each_blocks[i] = create_each_block$1(child_ctx);
     						each_blocks[i].c();
     						each_blocks[i].m(div1, null);
     					}
@@ -1268,7 +1374,7 @@ var app = (function () {
 
     	dispatch_dev("SvelteRegisterBlock", {
     		block,
-    		id: create_fragment$1.name,
+    		id: create_fragment$4.name,
     		type: "component",
     		source: "",
     		ctx
@@ -1277,7 +1383,7 @@ var app = (function () {
     	return block;
     }
 
-    function instance$1($$self, $$props, $$invalidate) {
+    function instance$4($$self, $$props, $$invalidate) {
     	let { $$slots: slots = {}, $$scope } = $$props;
     	validate_slots('NestedCommentsTestfromReact', slots, []);
     	let comments = [];
@@ -1343,12 +1449,569 @@ var app = (function () {
     class NestedCommentsTestfromReact extends SvelteComponentDev {
     	constructor(options) {
     		super(options);
-    		init(this, options, instance$1, create_fragment$1, safe_not_equal, {});
+    		init(this, options, instance$4, create_fragment$4, safe_not_equal, {});
 
     		dispatch_dev("SvelteRegisterComponent", {
     			component: this,
     			tagName: "NestedCommentsTestfromReact",
     			options,
+    			id: create_fragment$4.name
+    		});
+    	}
+    }
+
+    /* src\MovingDotPortfromReact.svelte generated by Svelte v3.59.2 */
+    const file$3 = "src\\MovingDotPortfromReact.svelte";
+
+    function create_fragment$3(ctx) {
+    	let div;
+
+    	const block = {
+    		c: function create() {
+    			div = element("div");
+    			attr_dev(div, "class", "MovingDot svelte-12o76ak");
+    			set_style(div, "left", /*position*/ ctx[0].x + "px");
+    			set_style(div, "top", /*position*/ ctx[0].y + "px");
+    			add_location(div, file$3, 39, 0, 1178);
+    		},
+    		l: function claim(nodes) {
+    			throw new Error("options.hydrate only works if the component was compiled with the `hydratable: true` option");
+    		},
+    		m: function mount(target, anchor) {
+    			insert_dev(target, div, anchor);
+    		},
+    		p: function update(ctx, [dirty]) {
+    			if (dirty & /*position*/ 1) {
+    				set_style(div, "left", /*position*/ ctx[0].x + "px");
+    			}
+
+    			if (dirty & /*position*/ 1) {
+    				set_style(div, "top", /*position*/ ctx[0].y + "px");
+    			}
+    		},
+    		i: noop,
+    		o: noop,
+    		d: function destroy(detaching) {
+    			if (detaching) detach_dev(div);
+    		}
+    	};
+
+    	dispatch_dev("SvelteRegisterBlock", {
+    		block,
+    		id: create_fragment$3.name,
+    		type: "component",
+    		source: "",
+    		ctx
+    	});
+
+    	return block;
+    }
+
+    const step = 10;
+
+    function instance$3($$self, $$props, $$invalidate) {
+    	let { $$slots: slots = {}, $$scope } = $$props;
+    	validate_slots('MovingDotPortfromReact', slots, []);
+    	let { position = { x: 0, y: 0 } } = $$props;
+    	let { boundaries = { minX: 0, maxX: 100, minY: 0, maxY: 100 } } = $$props;
+
+    	const handleKeyPress = e => {
+    		e.preventDefault();
+    		let newX = position.x;
+    		let newY = position.y;
+
+    		switch (e.key) {
+    			case 'ArrowLeft':
+    				newX -= step;
+    				break;
+    			case 'ArrowRight':
+    				newX += step;
+    				break;
+    			case 'ArrowUp':
+    				newY -= step;
+    				break;
+    			case 'ArrowDown':
+    				newY += step;
+    				break;
+    		}
+
+    		// Restrict movement within boundaries
+    		if (newX >= boundaries.minX && newX <= boundaries.maxX) $$invalidate(0, position.x = newX, position);
+
+    		if (newY >= boundaries.minY && newY <= boundaries.maxY) $$invalidate(0, position.y = newY, position);
+    	};
+
+    	onMount(() => {
+    		window.addEventListener('keydown', handleKeyPress);
+
+    		return () => {
+    			window.removeEventListener('keydown', handleKeyPress);
+    		};
+    	});
+
+    	const writable_props = ['position', 'boundaries'];
+
+    	Object.keys($$props).forEach(key => {
+    		if (!~writable_props.indexOf(key) && key.slice(0, 2) !== '$$' && key !== 'slot') console.warn(`<MovingDotPortfromReact> was created with unknown prop '${key}'`);
+    	});
+
+    	$$self.$$set = $$props => {
+    		if ('position' in $$props) $$invalidate(0, position = $$props.position);
+    		if ('boundaries' in $$props) $$invalidate(1, boundaries = $$props.boundaries);
+    	};
+
+    	$$self.$capture_state = () => ({
+    		onMount,
+    		position,
+    		boundaries,
+    		step,
+    		handleKeyPress
+    	});
+
+    	$$self.$inject_state = $$props => {
+    		if ('position' in $$props) $$invalidate(0, position = $$props.position);
+    		if ('boundaries' in $$props) $$invalidate(1, boundaries = $$props.boundaries);
+    	};
+
+    	if ($$props && "$$inject" in $$props) {
+    		$$self.$inject_state($$props.$$inject);
+    	}
+
+    	return [position, boundaries];
+    }
+
+    class MovingDotPortfromReact extends SvelteComponentDev {
+    	constructor(options) {
+    		super(options);
+    		init(this, options, instance$3, create_fragment$3, safe_not_equal, { position: 0, boundaries: 1 });
+
+    		dispatch_dev("SvelteRegisterComponent", {
+    			component: this,
+    			tagName: "MovingDotPortfromReact",
+    			options,
+    			id: create_fragment$3.name
+    		});
+    	}
+
+    	get position() {
+    		throw new Error("<MovingDotPortfromReact>: Props cannot be read directly from the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
+    	}
+
+    	set position(value) {
+    		throw new Error("<MovingDotPortfromReact>: Props cannot be set directly on the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
+    	}
+
+    	get boundaries() {
+    		throw new Error("<MovingDotPortfromReact>: Props cannot be read directly from the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
+    	}
+
+    	set boundaries(value) {
+    		throw new Error("<MovingDotPortfromReact>: Props cannot be set directly on the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
+    	}
+    }
+
+    /* src\MovingDotTargetPortfromReact.svelte generated by Svelte v3.59.2 */
+
+    const file$2 = "src\\MovingDotTargetPortfromReact.svelte";
+
+    function create_fragment$2(ctx) {
+    	let div;
+
+    	const block = {
+    		c: function create() {
+    			div = element("div");
+    			attr_dev(div, "class", "target svelte-4yc66h");
+    			set_style(div, "left", /*position*/ ctx[0].x + "px");
+    			set_style(div, "top", /*position*/ ctx[0].y + "px");
+    			add_location(div, file$2, 4, 0, 49);
+    		},
+    		l: function claim(nodes) {
+    			throw new Error("options.hydrate only works if the component was compiled with the `hydratable: true` option");
+    		},
+    		m: function mount(target, anchor) {
+    			insert_dev(target, div, anchor);
+    		},
+    		p: function update(ctx, [dirty]) {
+    			if (dirty & /*position*/ 1) {
+    				set_style(div, "left", /*position*/ ctx[0].x + "px");
+    			}
+
+    			if (dirty & /*position*/ 1) {
+    				set_style(div, "top", /*position*/ ctx[0].y + "px");
+    			}
+    		},
+    		i: noop,
+    		o: noop,
+    		d: function destroy(detaching) {
+    			if (detaching) detach_dev(div);
+    		}
+    	};
+
+    	dispatch_dev("SvelteRegisterBlock", {
+    		block,
+    		id: create_fragment$2.name,
+    		type: "component",
+    		source: "",
+    		ctx
+    	});
+
+    	return block;
+    }
+
+    function instance$2($$self, $$props, $$invalidate) {
+    	let { $$slots: slots = {}, $$scope } = $$props;
+    	validate_slots('MovingDotTargetPortfromReact', slots, []);
+    	let { position } = $$props;
+
+    	$$self.$$.on_mount.push(function () {
+    		if (position === undefined && !('position' in $$props || $$self.$$.bound[$$self.$$.props['position']])) {
+    			console.warn("<MovingDotTargetPortfromReact> was created without expected prop 'position'");
+    		}
+    	});
+
+    	const writable_props = ['position'];
+
+    	Object.keys($$props).forEach(key => {
+    		if (!~writable_props.indexOf(key) && key.slice(0, 2) !== '$$' && key !== 'slot') console.warn(`<MovingDotTargetPortfromReact> was created with unknown prop '${key}'`);
+    	});
+
+    	$$self.$$set = $$props => {
+    		if ('position' in $$props) $$invalidate(0, position = $$props.position);
+    	};
+
+    	$$self.$capture_state = () => ({ position });
+
+    	$$self.$inject_state = $$props => {
+    		if ('position' in $$props) $$invalidate(0, position = $$props.position);
+    	};
+
+    	if ($$props && "$$inject" in $$props) {
+    		$$self.$inject_state($$props.$$inject);
+    	}
+
+    	return [position];
+    }
+
+    class MovingDotTargetPortfromReact extends SvelteComponentDev {
+    	constructor(options) {
+    		super(options);
+    		init(this, options, instance$2, create_fragment$2, safe_not_equal, { position: 0 });
+
+    		dispatch_dev("SvelteRegisterComponent", {
+    			component: this,
+    			tagName: "MovingDotTargetPortfromReact",
+    			options,
+    			id: create_fragment$2.name
+    		});
+    	}
+
+    	get position() {
+    		throw new Error("<MovingDotTargetPortfromReact>: Props cannot be read directly from the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
+    	}
+
+    	set position(value) {
+    		throw new Error("<MovingDotTargetPortfromReact>: Props cannot be set directly on the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
+    	}
+    }
+
+    /* src\MovingDotSpacePortfromReact.svelte generated by Svelte v3.59.2 */
+    const file$1 = "src\\MovingDotSpacePortfromReact.svelte";
+
+    function get_each_context(ctx, list, i) {
+    	const child_ctx = ctx.slice();
+    	child_ctx[7] = list[i];
+    	return child_ctx;
+    }
+
+    // (31:4) {#each targets as target (target.name)}
+    function create_each_block(key_1, ctx) {
+    	let first;
+    	let target;
+    	let t0;
+    	let span;
+    	let t1_value = /*target*/ ctx[7].name + "";
+    	let t1;
+    	let current;
+
+    	target = new MovingDotTargetPortfromReact({
+    			props: { position: /*target*/ ctx[7] },
+    			$$inline: true
+    		});
+
+    	const block = {
+    		key: key_1,
+    		first: null,
+    		c: function create() {
+    			first = empty();
+    			create_component(target.$$.fragment);
+    			t0 = space();
+    			span = element("span");
+    			t1 = text(t1_value);
+    			set_style(span, "position", "absolute");
+    			set_style(span, "left", /*target*/ ctx[7].x + "px");
+    			set_style(span, "top", /*target*/ ctx[7].y + "px");
+    			add_location(span, file$1, 32, 8, 1368);
+    			this.first = first;
+    		},
+    		m: function mount(target$1, anchor) {
+    			insert_dev(target$1, first, anchor);
+    			mount_component(target, target$1, anchor);
+    			insert_dev(target$1, t0, anchor);
+    			insert_dev(target$1, span, anchor);
+    			append_dev(span, t1);
+    			current = true;
+    		},
+    		p: function update(new_ctx, dirty) {
+    			ctx = new_ctx;
+    		},
+    		i: function intro(local) {
+    			if (current) return;
+    			transition_in(target.$$.fragment, local);
+    			current = true;
+    		},
+    		o: function outro(local) {
+    			transition_out(target.$$.fragment, local);
+    			current = false;
+    		},
+    		d: function destroy(detaching) {
+    			if (detaching) detach_dev(first);
+    			destroy_component(target, detaching);
+    			if (detaching) detach_dev(t0);
+    			if (detaching) detach_dev(span);
+    		}
+    	};
+
+    	dispatch_dev("SvelteRegisterBlock", {
+    		block,
+    		id: create_each_block.name,
+    		type: "each",
+    		source: "(31:4) {#each targets as target (target.name)}",
+    		ctx
+    	});
+
+    	return block;
+    }
+
+    // (37:4) {#if isModalOpen}
+    function create_if_block(ctx) {
+    	const block = { c: noop, m: noop, d: noop };
+
+    	dispatch_dev("SvelteRegisterBlock", {
+    		block,
+    		id: create_if_block.name,
+    		type: "if",
+    		source: "(37:4) {#if isModalOpen}",
+    		ctx
+    	});
+
+    	return block;
+    }
+
+    function create_fragment$1(ctx) {
+    	let div;
+    	let canvas_1;
+    	let t0;
+    	let movingdot;
+    	let t1;
+    	let each_blocks = [];
+    	let each_1_lookup = new Map();
+    	let t2;
+    	let current;
+
+    	movingdot = new MovingDotPortfromReact({
+    			props: {
+    				position: /*dotPosition*/ ctx[1],
+    				boundaries: /*boundaries*/ ctx[3]
+    			},
+    			$$inline: true
+    		});
+
+    	let each_value = /*targets*/ ctx[2];
+    	validate_each_argument(each_value);
+    	const get_key = ctx => /*target*/ ctx[7].name;
+    	validate_each_keys(ctx, each_value, get_each_context, get_key);
+
+    	for (let i = 0; i < each_value.length; i += 1) {
+    		let child_ctx = get_each_context(ctx, each_value, i);
+    		let key = get_key(child_ctx);
+    		each_1_lookup.set(key, each_blocks[i] = create_each_block(key, child_ctx));
+    	}
+
+    	let if_block = /*isModalOpen*/ ctx[4] && create_if_block(ctx);
+
+    	const block = {
+    		c: function create() {
+    			div = element("div");
+    			canvas_1 = element("canvas");
+    			t0 = space();
+    			create_component(movingdot.$$.fragment);
+    			t1 = space();
+
+    			for (let i = 0; i < each_blocks.length; i += 1) {
+    				each_blocks[i].c();
+    			}
+
+    			t2 = space();
+    			if (if_block) if_block.c();
+    			attr_dev(canvas_1, "width", "100%");
+    			attr_dev(canvas_1, "height", "100%");
+    			add_location(canvas_1, file$1, 28, 4, 1157);
+    			attr_dev(div, "style", /*spaceStyle*/ ctx[5]);
+    			attr_dev(div, "tabindex", "0");
+    			add_location(div, file$1, 27, 0, 1114);
+    		},
+    		l: function claim(nodes) {
+    			throw new Error("options.hydrate only works if the component was compiled with the `hydratable: true` option");
+    		},
+    		m: function mount(target, anchor) {
+    			insert_dev(target, div, anchor);
+    			append_dev(div, canvas_1);
+    			/*canvas_1_binding*/ ctx[6](canvas_1);
+    			append_dev(div, t0);
+    			mount_component(movingdot, div, null);
+    			append_dev(div, t1);
+
+    			for (let i = 0; i < each_blocks.length; i += 1) {
+    				if (each_blocks[i]) {
+    					each_blocks[i].m(div, null);
+    				}
+    			}
+
+    			append_dev(div, t2);
+    			if (if_block) if_block.m(div, null);
+    			current = true;
+    		},
+    		p: function update(ctx, [dirty]) {
+    			if (dirty & /*targets*/ 4) {
+    				each_value = /*targets*/ ctx[2];
+    				validate_each_argument(each_value);
+    				group_outros();
+    				validate_each_keys(ctx, each_value, get_each_context, get_key);
+    				each_blocks = update_keyed_each(each_blocks, dirty, get_key, 1, ctx, each_value, each_1_lookup, div, outro_and_destroy_block, create_each_block, t2, get_each_context);
+    				check_outros();
+    			}
+    		},
+    		i: function intro(local) {
+    			if (current) return;
+    			transition_in(movingdot.$$.fragment, local);
+
+    			for (let i = 0; i < each_value.length; i += 1) {
+    				transition_in(each_blocks[i]);
+    			}
+
+    			current = true;
+    		},
+    		o: function outro(local) {
+    			transition_out(movingdot.$$.fragment, local);
+
+    			for (let i = 0; i < each_blocks.length; i += 1) {
+    				transition_out(each_blocks[i]);
+    			}
+
+    			current = false;
+    		},
+    		d: function destroy(detaching) {
+    			if (detaching) detach_dev(div);
+    			/*canvas_1_binding*/ ctx[6](null);
+    			destroy_component(movingdot);
+
+    			for (let i = 0; i < each_blocks.length; i += 1) {
+    				each_blocks[i].d();
+    			}
+
+    			if (if_block) if_block.d();
+    		}
+    	};
+
+    	dispatch_dev("SvelteRegisterBlock", {
+    		block,
+    		id: create_fragment$1.name,
+    		type: "component",
+    		source: "",
+    		ctx
+    	});
+
+    	return block;
+    }
+
+    function checkCollision() {
+    	
+    } // Collision logic
+    // To open modal or adjust positions, update isModalOpen or dotPosition accordingly
+
+    function instance$1($$self, $$props, $$invalidate) {
+    	let { $$slots: slots = {}, $$scope } = $$props;
+    	validate_slots('MovingDotSpacePortfromReact', slots, []);
+    	let canvas;
+    	let dotPosition = { x: 900, y: 450 };
+
+    	let targets = [
+    		{ name: "Target 1", x: 50, y: 50 },
+    		{ name: "Target 2", x: 100, y: 100 },
+    		{ name: "Entrance", x: 995, y: 660 }
+    	]; // Add more targets as needed
+
+    	let boundaries = { maxX: 1885, maxY: 900, minX: 0, minY: 0 };
+    	let isModalOpen = false;
+    	const spaceStyle = `position: relative; width: 100%; height: 100vh; border: 1px solid black; overflow: hidden; background-image: url('/AutoGameBackgrounds/1stGameLoc123.png'); background-size: cover; background-position: center;`;
+    	const writable_props = [];
+
+    	Object.keys($$props).forEach(key => {
+    		if (!~writable_props.indexOf(key) && key.slice(0, 2) !== '$$' && key !== 'slot') console.warn(`<MovingDotSpacePortfromReact> was created with unknown prop '${key}'`);
+    	});
+
+    	function canvas_1_binding($$value) {
+    		binding_callbacks[$$value ? 'unshift' : 'push'](() => {
+    			canvas = $$value;
+    			$$invalidate(0, canvas);
+    		});
+    	}
+
+    	$$self.$capture_state = () => ({
+    		onMount,
+    		MovingDot: MovingDotPortfromReact,
+    		Target: MovingDotTargetPortfromReact,
+    		canvas,
+    		dotPosition,
+    		targets,
+    		boundaries,
+    		isModalOpen,
+    		checkCollision,
+    		spaceStyle
+    	});
+
+    	$$self.$inject_state = $$props => {
+    		if ('canvas' in $$props) $$invalidate(0, canvas = $$props.canvas);
+    		if ('dotPosition' in $$props) $$invalidate(1, dotPosition = $$props.dotPosition);
+    		if ('targets' in $$props) $$invalidate(2, targets = $$props.targets);
+    		if ('boundaries' in $$props) $$invalidate(3, boundaries = $$props.boundaries);
+    		if ('isModalOpen' in $$props) $$invalidate(4, isModalOpen = $$props.isModalOpen);
+    	};
+
+    	if ($$props && "$$inject" in $$props) {
+    		$$self.$inject_state($$props.$$inject);
+    	}
+
+    	return [
+    		canvas,
+    		dotPosition,
+    		targets,
+    		boundaries,
+    		isModalOpen,
+    		spaceStyle,
+    		canvas_1_binding
+    	];
+    }
+
+    class MovingDotSpacePortfromReact extends SvelteComponentDev {
+    	constructor(options) {
+    		super(options);
+    		init(this, options, instance$1, create_fragment$1, safe_not_equal, {});
+
+    		dispatch_dev("SvelteRegisterComponent", {
+    			component: this,
+    			tagName: "MovingDotSpacePortfromReact",
+    			options,
     			id: create_fragment$1.name
     		});
     	}
@@ -1374,9 +2037,14 @@ var app = (function () {
     	let nestedcommentstestfromreact;
     	let t10;
     	let videogradiocomponentbrainstorming;
+    	let t11;
+    	let hr;
+    	let t12;
+    	let dotgame;
     	let current;
     	nestedcommentstestfromreact = new NestedCommentsTestfromReact({ $$inline: true });
     	videogradiocomponentbrainstorming = new VideoGradioComponentBrainstorming({ $$inline: true });
+    	dotgame = new MovingDotSpacePortfromReact({ $$inline: true });
 
     	const block = {
     		c: function create() {
@@ -1398,15 +2066,20 @@ var app = (function () {
     			create_component(nestedcommentstestfromreact.$$.fragment);
     			t10 = space();
     			create_component(videogradiocomponentbrainstorming.$$.fragment);
+    			t11 = space();
+    			hr = element("hr");
+    			t12 = space();
+    			create_component(dotgame.$$.fragment);
     			attr_dev(h10, "class", "svelte-1tky8bj");
-    			add_location(h10, file, 8, 1, 221);
+    			add_location(h10, file, 9, 1, 281);
     			attr_dev(a, "href", "https://svelte.dev/tutorial");
-    			add_location(a, file, 9, 14, 258);
-    			add_location(p, file, 9, 1, 245);
+    			add_location(a, file, 10, 14, 318);
+    			add_location(p, file, 10, 1, 305);
     			attr_dev(h11, "class", "svelte-1tky8bj");
-    			add_location(h11, file, 11, 1, 357);
+    			add_location(h11, file, 12, 1, 417);
+    			add_location(hr, file, 15, 1, 521);
     			attr_dev(main, "class", "svelte-1tky8bj");
-    			add_location(main, file, 7, 0, 213);
+    			add_location(main, file, 8, 0, 273);
     		},
     		l: function claim(nodes) {
     			throw new Error("options.hydrate only works if the component was compiled with the `hydratable: true` option");
@@ -1428,6 +2101,10 @@ var app = (function () {
     			mount_component(nestedcommentstestfromreact, main, null);
     			append_dev(main, t10);
     			mount_component(videogradiocomponentbrainstorming, main, null);
+    			append_dev(main, t11);
+    			append_dev(main, hr);
+    			append_dev(main, t12);
+    			mount_component(dotgame, main, null);
     			current = true;
     		},
     		p: function update(ctx, [dirty]) {
@@ -1437,17 +2114,20 @@ var app = (function () {
     			if (current) return;
     			transition_in(nestedcommentstestfromreact.$$.fragment, local);
     			transition_in(videogradiocomponentbrainstorming.$$.fragment, local);
+    			transition_in(dotgame.$$.fragment, local);
     			current = true;
     		},
     		o: function outro(local) {
     			transition_out(nestedcommentstestfromreact.$$.fragment, local);
     			transition_out(videogradiocomponentbrainstorming.$$.fragment, local);
+    			transition_out(dotgame.$$.fragment, local);
     			current = false;
     		},
     		d: function destroy(detaching) {
     			if (detaching) detach_dev(main);
     			destroy_component(nestedcommentstestfromreact);
     			destroy_component(videogradiocomponentbrainstorming);
+    			destroy_component(dotgame);
     		}
     	};
 
@@ -1486,7 +2166,8 @@ var app = (function () {
     	$$self.$capture_state = () => ({
     		name,
     		VideoGradioComponentBrainstorming,
-    		NestedCommentsTestfromReact
+    		NestedCommentsTestfromReact,
+    		DotGame: MovingDotSpacePortfromReact
     	});
 
     	$$self.$inject_state = $$props => {