Dot position and Collision in svelte working

README.md

@@ -7,6 +7,6 @@ sdk: static
 pinned: false
 ---
 
-Svelte with build command to test non-docker version - index.html points js and css to bundles generated - app.svelte used as index file in this case
+Svelte with build command to test non-docker version - index.html points js and css to bundles generated - app.svelte used as index file in this case and main.js points to app.svelte
 
 Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

bundle.js

@@ -42,6 +42,21 @@ var app = (function () {
     function is_empty(obj) {
         return Object.keys(obj).length === 0;
     }
+    function validate_store(store, name) {
+        if (store != null && typeof store.subscribe !== 'function') {
+            throw new Error(`'${name}' is not a store with a 'subscribe' method`);
+        }
+    }
+    function subscribe(store, ...callbacks) {
+        if (store == null) {
+            return noop;
+        }
+        const unsub = store.subscribe(...callbacks);
+        return unsub.unsubscribe ? () => unsub.unsubscribe() : unsub;
+    }
+    function component_subscribe(component, store, callback) {
+        component.$$.on_destroy.push(subscribe(store, callback));
+    }
     function create_slot(definition, ctx, $$scope, fn) {
         if (definition) {
             const slot_ctx = get_slot_context(definition, ctx, $$scope, fn);
@@ -202,6 +217,9 @@ var app = (function () {
         else if (node.getAttribute(attribute) !== value)
             node.setAttribute(attribute, value);
     }
+    function to_number(value) {
+        return value === '' ? null : +value;
+    }
     function children(element) {
         return Array.from(element.childNodes);
     }
@@ -335,6 +353,34 @@ var app = (function () {
     function onDestroy(fn) {
         get_current_component().$$.on_destroy.push(fn);
     }
+    /**
+     * Creates an event dispatcher that can be used to dispatch [component events](/docs#template-syntax-component-directives-on-eventname).
+     * Event dispatchers are functions that can take two arguments: `name` and `detail`.
+     *
+     * Component events created with `createEventDispatcher` create a
+     * [CustomEvent](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent).
+     * These events do not [bubble](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#Event_bubbling_and_capture).
+     * The `detail` argument corresponds to the [CustomEvent.detail](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/detail)
+     * property and can contain any type of data.
+     *
+     * https://svelte.dev/docs#run-time-svelte-createeventdispatcher
+     */
+    function createEventDispatcher() {
+        const component = get_current_component();
+        return (type, detail, { cancelable = false } = {}) => {
+            const callbacks = component.$$.callbacks[type];
+            if (callbacks) {
+                // TODO are there situations where events could be dispatched
+                // in a server (non-DOM) environment?
+                const event = custom_event(type, detail, { cancelable });
+                callbacks.slice().forEach(fn => {
+                    fn.call(component, event);
+                });
+                return !event.defaultPrevented;
+            }
+            return true;
+        };
+    }
     // TODO figure out if we still want to support
     // shorthand events, or if we want to implement
     // a real bubbling mechanism
@@ -890,7 +936,7 @@ var app = (function () {
 
     /* src\VideoGradioComponentBrainstorming.svelte generated by Svelte v3.59.2 */
 
-    const { console: console_1$2 } = globals;
+    const { console: console_1$3 } = globals;
     const file$c = "src\\VideoGradioComponentBrainstorming.svelte";
 
     function get_each_context$3(ctx, list, i) {
@@ -1195,7 +1241,7 @@ var app = (function () {
     	const writable_props = [];
 
     	Object.keys($$props).forEach(key => {
-    		if (!~writable_props.indexOf(key) && key.slice(0, 2) !== '$$' && key !== 'slot') console_1$2.warn(`<VideoGradioComponentBrainstorming> was created with unknown prop '${key}'`);
+    		if (!~writable_props.indexOf(key) && key.slice(0, 2) !== '$$' && key !== 'slot') console_1$3.warn(`<VideoGradioComponentBrainstorming> was created with unknown prop '${key}'`);
     	});
 
     	function canvas_1_binding($$value) {
@@ -1753,6 +1799,54 @@ var app = (function () {
     	}
     }
 
+    const subscriber_queue = [];
+    /**
+     * Create a `Writable` store that allows both updating and reading by subscription.
+     * @param {*=}value initial value
+     * @param {StartStopNotifier=} start
+     */
+    function writable(value, start = noop) {
+        let stop;
+        const subscribers = new Set();
+        function set(new_value) {
+            if (safe_not_equal(value, new_value)) {
+                value = new_value;
+                if (stop) { // store is ready
+                    const run_queue = !subscriber_queue.length;
+                    for (const subscriber of subscribers) {
+                        subscriber[1]();
+                        subscriber_queue.push(subscriber, value);
+                    }
+                    if (run_queue) {
+                        for (let i = 0; i < subscriber_queue.length; i += 2) {
+                            subscriber_queue[i][0](subscriber_queue[i + 1]);
+                        }
+                        subscriber_queue.length = 0;
+                    }
+                }
+            }
+        }
+        function update(fn) {
+            set(fn(value));
+        }
+        function subscribe(run, invalidate = noop) {
+            const subscriber = [run, invalidate];
+            subscribers.add(subscriber);
+            if (subscribers.size === 1) {
+                stop = start(set) || noop;
+            }
+            run(value);
+            return () => {
+                subscribers.delete(subscriber);
+                if (subscribers.size === 0 && stop) {
+                    stop();
+                    stop = null;
+                }
+            };
+        }
+        return { set, update, subscribe };
+    }
+
     /* src\MovingDotPortfromReact.svelte generated by Svelte v3.59.2 */
     const file$a = "src\\MovingDotPortfromReact.svelte";
 
@@ -1765,7 +1859,7 @@ var app = (function () {
     			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$a, 39, 0, 1178);
+    			add_location(div, file$a, 47, 0, 1709);
     		},
     		l: function claim(nodes) {
     			throw new Error("options.hydrate only works if the component was compiled with the `hydratable: true` option");
@@ -1807,6 +1901,23 @@ var app = (function () {
     	validate_slots('MovingDotPortfromReact', slots, []);
     	let { position = { x: 0, y: 0 } } = $$props;
     	let { boundaries = { minX: 0, maxX: 100, minY: 0, maxY: 100 } } = $$props;
+    	const dispatch = createEventDispatcher();
+
+    	function moveDot(newX, newY) {
+    		// Calculate new position here
+    		let newPosition = { x: newX, y: newY };
+
+    		// Update position with a new object for Svelte reactivity
+    		let boundedX = Math.max(boundaries.minX, Math.min(newX, boundaries.maxX));
+
+    		let boundedY = Math.max(boundaries.minY, Math.min(newY, boundaries.maxY));
+
+    		// Update position
+    		$$invalidate(0, position = { x: boundedX, y: boundedY });
+
+    		// Dispatch the move event with the new position
+    		dispatch('move', newPosition);
+    	}
 
     	const handleKeyPress = e => {
     		e.preventDefault();
@@ -1828,11 +1939,10 @@ var app = (function () {
     				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);
-    	};
+    		moveDot(newX, newY);
+    	}; // // Restrict movement within boundaries
+    	// if (newX >= boundaries.minX && newX <= boundaries.maxX) position.x = newX;
+    	// if (newY >= boundaries.minY && newY <= boundaries.maxY) position.y = newY;
 
     	onMount(() => {
     		window.addEventListener('keydown', handleKeyPress);
@@ -1855,9 +1965,12 @@ var app = (function () {
 
     	$$self.$capture_state = () => ({
     		onMount,
+    		createEventDispatcher,
     		position,
     		boundaries,
     		step,
+    		dispatch,
+    		moveDot,
     		handleKeyPress
     	});
 
@@ -2008,26 +2121,28 @@ var app = (function () {
     }
 
     /* src\MovingDotSpacePortfromReact.svelte generated by Svelte v3.59.2 */
+
+    const { console: console_1$2 } = globals;
     const file$8 = "src\\MovingDotSpacePortfromReact.svelte";
 
     function get_each_context$1(ctx, list, i) {
     	const child_ctx = ctx.slice();
-    	child_ctx[7] = list[i];
+    	child_ctx[13] = list[i];
     	return child_ctx;
     }
 
-    // (32:4) {#each targets as target (target.name)}
+    // (70:4) {#each $targets as target (target.name)}
     function create_each_block$1(key_1, ctx) {
     	let first;
     	let target;
     	let t0;
     	let span;
-    	let t1_value = /*target*/ ctx[7].name + "";
+    	let t1_value = /*target*/ ctx[13].name + "";
     	let t1;
     	let current;
 
     	target = new MovingDotTargetPortfromReact({
-    			props: { position: /*target*/ ctx[7] },
+    			props: { position: /*target*/ ctx[13] },
     			$$inline: true
     		});
 
@@ -2041,9 +2156,9 @@ var app = (function () {
     			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$8, 33, 8, 1435);
+    			set_style(span, "left", /*target*/ ctx[13].x + "px");
+    			set_style(span, "top", /*target*/ ctx[13].y + "px");
+    			add_location(span, file$8, 71, 8, 3555);
     			this.first = first;
     		},
     		m: function mount(target$1, anchor) {
@@ -2056,6 +2171,18 @@ var app = (function () {
     		},
     		p: function update(new_ctx, dirty) {
     			ctx = new_ctx;
+    			const target_changes = {};
+    			if (dirty & /*$targets*/ 8) target_changes.position = /*target*/ ctx[13];
+    			target.$set(target_changes);
+    			if ((!current || dirty & /*$targets*/ 8) && t1_value !== (t1_value = /*target*/ ctx[13].name + "")) set_data_dev(t1, t1_value);
+
+    			if (!current || dirty & /*$targets*/ 8) {
+    				set_style(span, "left", /*target*/ ctx[13].x + "px");
+    			}
+
+    			if (!current || dirty & /*$targets*/ 8) {
+    				set_style(span, "top", /*target*/ ctx[13].y + "px");
+    			}
     		},
     		i: function intro(local) {
     			if (current) return;
@@ -2078,14 +2205,14 @@ var app = (function () {
     		block,
     		id: create_each_block$1.name,
     		type: "each",
-    		source: "(32:4) {#each targets as target (target.name)}",
+    		source: "(70:4) {#each $targets as target (target.name)}",
     		ctx
     	});
 
     	return block;
     }
 
-    // (38:4) {#if isModalOpen}
+    // (76:4) {#if isModalOpen}
     function create_if_block$5(ctx) {
     	const block = { c: noop, m: noop, d: noop };
 
@@ -2093,7 +2220,7 @@ var app = (function () {
     		block,
     		id: create_if_block$5.name,
     		type: "if",
-    		source: "(38:4) {#if isModalOpen}",
+    		source: "(76:4) {#if isModalOpen}",
     		ctx
     	});
 
@@ -2103,27 +2230,34 @@ var app = (function () {
     function create_fragment$8(ctx) {
     	let div1;
     	let div0;
+    	let t0;
+    	let t1_value = /*$dotPosition*/ ctx[0].x + "";
     	let t1;
-    	let canvas_1;
     	let t2;
-    	let movingdot;
+    	let t3_value = /*$dotPosition*/ ctx[0].y + "";
     	let t3;
+    	let t4;
+    	let canvas_1;
+    	let t5;
+    	let movingdot;
+    	let t6;
     	let each_blocks = [];
     	let each_1_lookup = new Map();
-    	let t4;
+    	let t7;
     	let current;
 
     	movingdot = new MovingDotPortfromReact({
     			props: {
-    				position: /*dotPosition*/ ctx[1],
-    				boundaries: /*boundaries*/ ctx[3]
+    				position: /*$dotPosition*/ ctx[0],
+    				boundaries: /*boundaries*/ ctx[6]
     			},
     			$$inline: true
     		});
 
-    	let each_value = /*targets*/ ctx[2];
+    	movingdot.$on("move", /*move_handler*/ ctx[10]);
+    	let each_value = /*$targets*/ ctx[3];
     	validate_each_argument(each_value);
-    	const get_key = ctx => /*target*/ ctx[7].name;
+    	const get_key = ctx => /*target*/ ctx[13].name;
     	validate_each_keys(ctx, each_value, get_each_context$1, get_key);
 
     	for (let i = 0; i < each_value.length; i += 1) {
@@ -2132,34 +2266,37 @@ var app = (function () {
     		each_1_lookup.set(key, each_blocks[i] = create_each_block$1(key, child_ctx));
     	}
 
-    	let if_block = /*isModalOpen*/ ctx[4] && create_if_block$5(ctx);
+    	let if_block = /*isModalOpen*/ ctx[2] && create_if_block$5(ctx);
 
     	const block = {
     		c: function create() {
     			div1 = element("div");
     			div0 = element("div");
-    			div0.textContent = "Minor Game Events Log for player";
-    			t1 = space();
-    			canvas_1 = element("canvas");
+    			t0 = text("Minor Game Events Log for player ||| Position for Developer ");
+    			t1 = text(t1_value);
     			t2 = space();
+    			t3 = text(t3_value);
+    			t4 = space();
+    			canvas_1 = element("canvas");
+    			t5 = space();
     			create_component(movingdot.$$.fragment);
-    			t3 = space();
+    			t6 = space();
 
     			for (let i = 0; i < each_blocks.length; i += 1) {
     				each_blocks[i].c();
     			}
 
-    			t4 = space();
+    			t7 = space();
     			if (if_block) if_block.c();
     			attr_dev(div0, "id", "overlayText");
     			attr_dev(div0, "class", "svelte-e0peue");
-    			add_location(div0, file$8, 28, 4, 1144);
+    			add_location(div0, file$8, 66, 4, 3145);
     			attr_dev(canvas_1, "width", "100%");
     			attr_dev(canvas_1, "height", "100%");
     			attr_dev(canvas_1, "tabindex", "0");
-    			add_location(canvas_1, file$8, 29, 4, 1211);
-    			attr_dev(div1, "style", /*spaceStyle*/ ctx[5]);
-    			add_location(div1, file$8, 27, 0, 1114);
+    			add_location(canvas_1, file$8, 67, 4, 3273);
+    			attr_dev(div1, "style", /*spaceStyle*/ ctx[8]);
+    			add_location(div1, file$8, 65, 0, 3115);
     		},
     		l: function claim(nodes) {
     			throw new Error("options.hydrate only works if the component was compiled with the `hydratable: true` option");
@@ -2167,12 +2304,16 @@ var app = (function () {
     		m: function mount(target, anchor) {
     			insert_dev(target, div1, anchor);
     			append_dev(div1, div0);
-    			append_dev(div1, t1);
+    			append_dev(div0, t0);
+    			append_dev(div0, t1);
+    			append_dev(div0, t2);
+    			append_dev(div0, t3);
+    			append_dev(div1, t4);
     			append_dev(div1, canvas_1);
-    			/*canvas_1_binding*/ ctx[6](canvas_1);
-    			append_dev(div1, t2);
+    			/*canvas_1_binding*/ ctx[9](canvas_1);
+    			append_dev(div1, t5);
     			mount_component(movingdot, div1, null);
-    			append_dev(div1, t3);
+    			append_dev(div1, t6);
 
     			for (let i = 0; i < each_blocks.length; i += 1) {
     				if (each_blocks[i]) {
@@ -2180,19 +2321,36 @@ var app = (function () {
     				}
     			}
 
-    			append_dev(div1, t4);
+    			append_dev(div1, t7);
     			if (if_block) if_block.m(div1, null);
     			current = true;
     		},
     		p: function update(ctx, [dirty]) {
-    			if (dirty & /*targets*/ 4) {
-    				each_value = /*targets*/ ctx[2];
+    			if ((!current || dirty & /*$dotPosition*/ 1) && t1_value !== (t1_value = /*$dotPosition*/ ctx[0].x + "")) set_data_dev(t1, t1_value);
+    			if ((!current || dirty & /*$dotPosition*/ 1) && t3_value !== (t3_value = /*$dotPosition*/ ctx[0].y + "")) set_data_dev(t3, t3_value);
+    			const movingdot_changes = {};
+    			if (dirty & /*$dotPosition*/ 1) movingdot_changes.position = /*$dotPosition*/ ctx[0];
+    			movingdot.$set(movingdot_changes);
+
+    			if (dirty & /*$targets*/ 8) {
+    				each_value = /*$targets*/ ctx[3];
     				validate_each_argument(each_value);
     				group_outros();
     				validate_each_keys(ctx, each_value, get_each_context$1, get_key);
-    				each_blocks = update_keyed_each(each_blocks, dirty, get_key, 1, ctx, each_value, each_1_lookup, div1, outro_and_destroy_block, create_each_block$1, t4, get_each_context$1);
+    				each_blocks = update_keyed_each(each_blocks, dirty, get_key, 1, ctx, each_value, each_1_lookup, div1, outro_and_destroy_block, create_each_block$1, t7, get_each_context$1);
     				check_outros();
     			}
+
+    			if (/*isModalOpen*/ ctx[2]) {
+    				if (if_block) ; else {
+    					if_block = create_if_block$5(ctx);
+    					if_block.c();
+    					if_block.m(div1, null);
+    				}
+    			} else if (if_block) {
+    				if_block.d(1);
+    				if_block = null;
+    			}
     		},
     		i: function intro(local) {
     			if (current) return;
@@ -2215,7 +2373,7 @@ var app = (function () {
     		},
     		d: function destroy(detaching) {
     			if (detaching) detach_dev(div1);
-    			/*canvas_1_binding*/ ctx[6](null);
+    			/*canvas_1_binding*/ ctx[9](null);
     			destroy_component(movingdot);
 
     			for (let i = 0; i < each_blocks.length; i += 1) {
@@ -2237,41 +2395,142 @@ var app = (function () {
     	return block;
     }
 
-    function checkCollision() {
-    	
-    } // Collision logic
-    // To open modal or adjust positions, update isModalOpen or dotPosition accordingly
-
     function instance$8($$self, $$props, $$invalidate) {
+    	let $dotPosition;
+    	let $targets;
     	let { $$slots: slots = {}, $$scope } = $$props;
     	validate_slots('MovingDotSpacePortfromReact', slots, []);
     	let canvas;
-    	let dotPosition = { x: 900, y: 450 };
+    	let dotPosition = writable({ x: 900, y: 450 });
+    	validate_store(dotPosition, 'dotPosition');
+    	component_subscribe($$self, dotPosition, value => $$invalidate(0, $dotPosition = value));
 
-    	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 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: "",
+    			collisiontext: ""
+    		},
+    		// 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: ""
+    		}
+    	]);
 
+    	validate_store(targets, 'targets');
+    	component_subscribe($$self, targets, value => $$invalidate(3, $targets = value));
     	let boundaries = { maxX: 1885, maxY: 900, minX: 0, minY: 0 };
     	let isModalOpen = false;
+
+    	function updateDotPosition(newX, newY) {
+    		dotPosition.set({ x: newX, y: newY });
+    	}
+
+    	// Collision check function
+    	const checkCollision = dotPos => {
+    		$targets.forEach(target => {
+    			if (dotPos.x < target.x + 10 && dotPos.x + 10 > target.x && dotPos.y < target.y + 10 && dotPos.y + 10 > target.y) {
+    				handleCollision(target);
+    			}
+    		});
+    	};
+
+    	// Handle collision based on the target object
+    	const handleCollision = target => {
+    		switch (target.collisionType) {
+    			case "":
+    				console.log("Nothing Happenedddd");
+    				break;
+    			case "alert":
+    				alert(target.collisiontext);
+    				break;
+    			case "modal":
+    				$$invalidate(2, isModalOpen = true);
+    				break;
+    		} // Handle other permanent UI elements here
+    	}; // ...
+
     	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}'`);
+    		if (!~writable_props.indexOf(key) && key.slice(0, 2) !== '$$' && key !== 'slot') console_1$2.warn(`<MovingDotSpacePortfromReact> was created with unknown prop '${key}'`);
     	});
 
     	function canvas_1_binding($$value) {
     		binding_callbacks[$$value ? 'unshift' : 'push'](() => {
     			canvas = $$value;
-    			$$invalidate(0, canvas);
+    			$$invalidate(1, canvas);
     		});
     	}
 
+    	const move_handler = e => updateDotPosition(e.detail.x, e.detail.y);
+
     	$$self.$capture_state = () => ({
     		onMount,
+    		writable,
     		MovingDot: MovingDotPortfromReact,
     		Target: MovingDotTargetPortfromReact,
     		canvas,
@@ -2279,30 +2538,45 @@ var app = (function () {
     		targets,
     		boundaries,
     		isModalOpen,
+    		updateDotPosition,
     		checkCollision,
-    		spaceStyle
+    		handleCollision,
+    		spaceStyle,
+    		$dotPosition,
+    		$targets
     	});
 
     	$$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 ('canvas' in $$props) $$invalidate(1, canvas = $$props.canvas);
+    		if ('dotPosition' in $$props) $$invalidate(4, dotPosition = $$props.dotPosition);
+    		if ('targets' in $$props) $$invalidate(5, targets = $$props.targets);
+    		if ('boundaries' in $$props) $$invalidate(6, boundaries = $$props.boundaries);
+    		if ('isModalOpen' in $$props) $$invalidate(2, isModalOpen = $$props.isModalOpen);
     	};
 
     	if ($$props && "$$inject" in $$props) {
     		$$self.$inject_state($$props.$$inject);
     	}
 
+    	$$self.$$.update = () => {
+    		if ($$self.$$.dirty & /*$dotPosition*/ 1) {
+    			// Reactive statement to check collision whenever dotPosition changes
+    			$dotPosition && checkCollision($dotPosition);
+    		}
+    	};
+
     	return [
+    		$dotPosition,
     		canvas,
+    		isModalOpen,
+    		$targets,
     		dotPosition,
     		targets,
     		boundaries,
-    		isModalOpen,
+    		updateDotPosition,
     		spaceStyle,
-    		canvas_1_binding
+    		canvas_1_binding,
+    		move_handler
     	];
     }
 
@@ -4552,7 +4826,7 @@ var app = (function () {
     	let t7;
     	let div1;
     	let t8;
-    	let t9_value = /*currentTime*/ ctx[2].toFixed(2) + "";
+    	let t9_value = /*currentTime*/ ctx[3].toFixed(2) + "";
     	let t9;
     	let t10;
     	let t11;
@@ -4563,34 +4837,36 @@ var app = (function () {
     	let t14;
     	let t15;
     	let t16;
+    	let input2;
+    	let t17;
     	let button0;
-    	let t18;
+    	let t19;
     	let button1;
-    	let t20;
     	let t21;
     	let t22;
-    	let t23_value = /*timestamps*/ ctx[7].length + "";
     	let t23;
+    	let t24_value = /*timestamps*/ ctx[8].length + "";
     	let t24;
+    	let t25;
     	let button2;
-    	let t26;
-    	let button3;
     	let t27;
+    	let button3;
+    	let t28;
     	let button3_class_value;
     	let button3_disabled_value;
-    	let t28;
-    	let button4;
     	let t29;
+    	let button4;
+    	let t30;
     	let button4_class_value;
     	let button4_disabled_value;
-    	let t30;
     	let t31;
     	let t32;
-    	let t33_value = /*userTimestamps*/ ctx[1].length + "";
     	let t33;
+    	let t34_value = /*userTimestamps*/ ctx[1].length + "";
     	let t34;
-    	let br1;
     	let t35;
+    	let br1;
+    	let t36;
     	let mounted;
     	let dispose;
 
@@ -4618,83 +4894,88 @@ var app = (function () {
     			t10 = text(" seconds");
     			t11 = space();
     			div2 = element("div");
-    			t12 = text(/*line*/ ctx[4]);
+    			t12 = text(/*line*/ ctx[5]);
     			t13 = space();
     			br0 = element("br");
     			t14 = space();
-    			t15 = text(/*currentWord*/ ctx[3]);
+    			t15 = text(/*currentWord*/ ctx[4]);
     			t16 = space();
+    			input2 = element("input");
+    			t17 = space();
     			button0 = element("button");
     			button0.textContent = "Previous Auto Timestamp";
-    			t18 = space();
+    			t19 = space();
     			button1 = element("button");
     			button1.textContent = "Next Auto Timestamp";
-    			t20 = text("\r\nAuto Timestamps: ");
-    			t21 = text(/*currentIndex*/ ctx[6]);
-    			t22 = text(" / ");
-    			t23 = text(t23_value);
-    			t24 = space();
+    			t21 = text("\r\nAuto Timestamps: ");
+    			t22 = text(/*currentIndex*/ ctx[7]);
+    			t23 = text(" / ");
+    			t24 = text(t24_value);
+    			t25 = text("  ||| \r\n");
     			button2 = element("button");
     			button2.textContent = "Add Timestamp";
-    			t26 = space();
+    			t27 = space();
     			button3 = element("button");
-    			t27 = text("Previous Auto Timestamp");
-    			t28 = space();
+    			t28 = text("Previous User Timestamp");
+    			t29 = space();
     			button4 = element("button");
-    			t29 = text("Next Auto Timestamp");
-    			t30 = text("\r\nUser Timestamps: ");
-    			t31 = text(/*currentuserIndex*/ ctx[0]);
-    			t32 = text(" / ");
-    			t33 = text(t33_value);
-    			t34 = space();
+    			t30 = text("Next User Timestamp");
+    			t31 = text("\r\nUser Timestamps: ");
+    			t32 = text(/*currentuserIndex*/ ctx[0]);
+    			t33 = text(" / ");
+    			t34 = text(t34_value);
+    			t35 = space();
     			br1 = element("br");
-    			t35 = text("A list of one messes up the logic for the counter in conjuction with the button reactivity");
-    			add_location(h1, file$1, 166, 0, 5477);
+    			t36 = text("A list of one messes up the logic for the counter in conjuction with the user timestamp button reactivity");
+    			add_location(h1, file$1, 166, 0, 5475);
     			attr_dev(input0, "type", "text");
-    			add_location(input0, file$1, 170, 4, 5606);
+    			add_location(input0, file$1, 170, 4, 5604);
     			attr_dev(input1, "type", "checkbox");
-    			add_location(input1, file$1, 172, 4, 5687);
+    			add_location(input1, file$1, 172, 4, 5685);
     			attr_dev(textarea0, "id", "ytvideoids");
     			attr_dev(textarea0, "cols", "40");
     			attr_dev(textarea0, "rows", "1");
     			attr_dev(textarea0, "placeholder", "Put video ids to learn here");
-    			add_location(textarea0, file$1, 174, 4, 5780);
+    			add_location(textarea0, file$1, 174, 4, 5778);
     			attr_dev(textarea1, "id", "ytmusicids");
     			attr_dev(textarea1, "cols", "40");
     			attr_dev(textarea1, "rows", "1");
     			attr_dev(textarea1, "placeholder", "Put song ids to learn here");
-    			add_location(textarea1, file$1, 176, 4, 5898);
-    			add_location(label, file$1, 168, 0, 5540);
+    			add_location(textarea1, file$1, 176, 4, 5896);
+    			add_location(label, file$1, 168, 0, 5538);
     			attr_dev(div0, "id", "youtube-player");
     			set_style(div0, "height", "90vh");
     			set_style(div0, "width", "90%");
-    			add_location(div0, file$1, 180, 4, 6048);
+    			add_location(div0, file$1, 180, 4, 6046);
     			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$1, 181, 4, 6118);
-    			add_location(br0, file$1, 185, 15, 6438);
+    			add_location(div1, file$1, 181, 4, 6116);
+    			add_location(br0, file$1, 185, 15, 6436);
     			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$1, 184, 4, 6297);
+    			add_location(div2, file$1, 184, 4, 6295);
     			set_style(div3, "position", "relative");
-    			add_location(div3, file$1, 179, 0, 6009);
-    			add_location(button0, file$1, 190, 0, 6489);
-    			add_location(button1, file$1, 191, 0, 6568);
-    			add_location(button2, file$1, 193, 0, 6694);
-    			attr_dev(button3, "class", button3_class_value = "" + (null_to_empty(/*previousButtonClass*/ ctx[9]) + " svelte-1g3vo12"));
+    			add_location(div3, file$1, 179, 0, 6007);
+    			set_style(input2, "width", "30px");
+    			attr_dev(input2, "type", "number");
+    			add_location(input2, file$1, 190, 0, 6487);
+    			add_location(button0, file$1, 191, 0, 6553);
+    			add_location(button1, file$1, 192, 0, 6632);
+    			add_location(button2, file$1, 194, 0, 6764);
+    			attr_dev(button3, "class", button3_class_value = "" + (null_to_empty(/*previousButtonClass*/ ctx[10]) + " svelte-1g3vo12"));
     			button3.disabled = button3_disabled_value = /*currentuserIndex*/ ctx[0] <= 0;
-    			add_location(button3, file$1, 194, 0, 6754);
-    			attr_dev(button4, "class", button4_class_value = "" + (null_to_empty(/*nextButtonClass*/ ctx[10]) + " svelte-1g3vo12"));
+    			add_location(button3, file$1, 195, 0, 6824);
+    			attr_dev(button4, "class", button4_class_value = "" + (null_to_empty(/*nextButtonClass*/ ctx[11]) + " svelte-1g3vo12"));
     			button4.disabled = button4_disabled_value = /*currentuserIndex*/ ctx[0] >= /*userTimestamps*/ ctx[1].length - 1;
-    			add_location(button4, file$1, 195, 0, 6894);
-    			add_location(br1, file$1, 196, 62, 7108);
+    			add_location(button4, file$1, 196, 0, 6964);
+    			add_location(br1, file$1, 197, 62, 7178);
     		},
     		l: function claim(nodes) {
     			throw new Error("options.hydrate only works if the component was compiled with the `hydratable: true` option");
@@ -4705,10 +4986,10 @@ var app = (function () {
     			insert_dev(target, label, anchor);
     			append_dev(label, t2);
     			append_dev(label, input0);
-    			set_input_value(input0, /*currentvideoId*/ ctx[8]);
+    			set_input_value(input0, /*currentvideoId*/ ctx[9]);
     			append_dev(label, t3);
     			append_dev(label, input1);
-    			input1.checked = /*isUpdating*/ ctx[5];
+    			input1.checked = /*isUpdating*/ ctx[6];
     			append_dev(label, t4);
     			append_dev(label, textarea0);
     			append_dev(label, t5);
@@ -4729,77 +5010,86 @@ var app = (function () {
     			append_dev(div2, t14);
     			append_dev(div2, t15);
     			insert_dev(target, t16, anchor);
+    			insert_dev(target, input2, anchor);
+    			set_input_value(input2, /*interval*/ ctx[2]);
+    			insert_dev(target, t17, anchor);
     			insert_dev(target, button0, anchor);
-    			insert_dev(target, t18, anchor);
+    			insert_dev(target, t19, anchor);
     			insert_dev(target, button1, anchor);
-    			insert_dev(target, t20, anchor);
     			insert_dev(target, t21, anchor);
     			insert_dev(target, t22, anchor);
     			insert_dev(target, t23, anchor);
     			insert_dev(target, t24, anchor);
+    			insert_dev(target, t25, anchor);
     			insert_dev(target, button2, anchor);
-    			insert_dev(target, t26, anchor);
+    			insert_dev(target, t27, anchor);
     			insert_dev(target, button3, anchor);
-    			append_dev(button3, t27);
-    			insert_dev(target, t28, anchor);
+    			append_dev(button3, t28);
+    			insert_dev(target, t29, anchor);
     			insert_dev(target, button4, anchor);
-    			append_dev(button4, t29);
-    			insert_dev(target, t30, anchor);
+    			append_dev(button4, t30);
     			insert_dev(target, t31, anchor);
     			insert_dev(target, t32, anchor);
     			insert_dev(target, t33, anchor);
     			insert_dev(target, t34, anchor);
-    			insert_dev(target, br1, anchor);
     			insert_dev(target, t35, anchor);
+    			insert_dev(target, br1, anchor);
+    			insert_dev(target, t36, anchor);
 
     			if (!mounted) {
     				dispose = [
-    					listen_dev(input0, "input", /*input0_input_handler*/ ctx[17]),
-    					listen_dev(input1, "change", /*input1_change_handler*/ ctx[18]),
-    					listen_dev(input1, "click", /*toggleUpdate*/ ctx[11], false, false, false, false),
-    					listen_dev(button0, "click", /*goToPreviousAutoTimestamp*/ ctx[13], false, false, false, false),
-    					listen_dev(button1, "click", /*goToNextAutoTimestamp*/ ctx[12], false, false, false, false),
-    					listen_dev(button2, "click", /*addUserTimestamp*/ ctx[14], false, false, false, false),
-    					listen_dev(button3, "click", /*goToPreviousUserTimestamp*/ ctx[16], false, false, false, false),
-    					listen_dev(button4, "click", /*goToNextUserTimestamp*/ ctx[15], false, false, false, false)
+    					listen_dev(input0, "input", /*input0_input_handler*/ ctx[18]),
+    					listen_dev(input1, "change", /*input1_change_handler*/ ctx[19]),
+    					listen_dev(input1, "click", /*toggleUpdate*/ ctx[12], false, false, false, false),
+    					listen_dev(input2, "input", /*input2_input_handler*/ ctx[20]),
+    					listen_dev(button0, "click", /*goToPreviousAutoTimestamp*/ ctx[14], false, false, false, false),
+    					listen_dev(button1, "click", /*goToNextAutoTimestamp*/ ctx[13], false, false, false, false),
+    					listen_dev(button2, "click", /*addUserTimestamp*/ ctx[15], false, false, false, false),
+    					listen_dev(button3, "click", /*goToPreviousUserTimestamp*/ ctx[17], false, false, false, false),
+    					listen_dev(button4, "click", /*goToNextUserTimestamp*/ ctx[16], false, false, false, false)
     				];
 
     				mounted = true;
     			}
     		},
-    		p: function update(ctx, [dirty]) {
-    			if (dirty & /*currentvideoId*/ 256 && input0.value !== /*currentvideoId*/ ctx[8]) {
-    				set_input_value(input0, /*currentvideoId*/ ctx[8]);
+    		p: function update(ctx, dirty) {
+    			if (dirty[0] & /*currentvideoId*/ 512 && input0.value !== /*currentvideoId*/ ctx[9]) {
+    				set_input_value(input0, /*currentvideoId*/ ctx[9]);
     			}
 
-    			if (dirty & /*isUpdating*/ 32) {
-    				input1.checked = /*isUpdating*/ ctx[5];
+    			if (dirty[0] & /*isUpdating*/ 64) {
+    				input1.checked = /*isUpdating*/ ctx[6];
     			}
 
-    			if (dirty & /*currentTime*/ 4 && t9_value !== (t9_value = /*currentTime*/ ctx[2].toFixed(2) + "")) set_data_dev(t9, t9_value);
-    			if (dirty & /*line*/ 16) set_data_dev(t12, /*line*/ ctx[4]);
-    			if (dirty & /*currentWord*/ 8) set_data_dev(t15, /*currentWord*/ ctx[3]);
-    			if (dirty & /*currentIndex*/ 64) set_data_dev(t21, /*currentIndex*/ ctx[6]);
-    			if (dirty & /*timestamps*/ 128 && t23_value !== (t23_value = /*timestamps*/ ctx[7].length + "")) set_data_dev(t23, t23_value);
+    			if (dirty[0] & /*currentTime*/ 8 && t9_value !== (t9_value = /*currentTime*/ ctx[3].toFixed(2) + "")) set_data_dev(t9, t9_value);
+    			if (dirty[0] & /*line*/ 32) set_data_dev(t12, /*line*/ ctx[5]);
+    			if (dirty[0] & /*currentWord*/ 16) set_data_dev(t15, /*currentWord*/ ctx[4]);
 
-    			if (dirty & /*previousButtonClass*/ 512 && button3_class_value !== (button3_class_value = "" + (null_to_empty(/*previousButtonClass*/ ctx[9]) + " svelte-1g3vo12"))) {
+    			if (dirty[0] & /*interval*/ 4 && to_number(input2.value) !== /*interval*/ ctx[2]) {
+    				set_input_value(input2, /*interval*/ ctx[2]);
+    			}
+
+    			if (dirty[0] & /*currentIndex*/ 128) set_data_dev(t22, /*currentIndex*/ ctx[7]);
+    			if (dirty[0] & /*timestamps*/ 256 && t24_value !== (t24_value = /*timestamps*/ ctx[8].length + "")) set_data_dev(t24, t24_value);
+
+    			if (dirty[0] & /*previousButtonClass*/ 1024 && button3_class_value !== (button3_class_value = "" + (null_to_empty(/*previousButtonClass*/ ctx[10]) + " svelte-1g3vo12"))) {
     				attr_dev(button3, "class", button3_class_value);
     			}
 
-    			if (dirty & /*currentuserIndex*/ 1 && button3_disabled_value !== (button3_disabled_value = /*currentuserIndex*/ ctx[0] <= 0)) {
+    			if (dirty[0] & /*currentuserIndex*/ 1 && button3_disabled_value !== (button3_disabled_value = /*currentuserIndex*/ ctx[0] <= 0)) {
     				prop_dev(button3, "disabled", button3_disabled_value);
     			}
 
-    			if (dirty & /*nextButtonClass*/ 1024 && button4_class_value !== (button4_class_value = "" + (null_to_empty(/*nextButtonClass*/ ctx[10]) + " svelte-1g3vo12"))) {
+    			if (dirty[0] & /*nextButtonClass*/ 2048 && button4_class_value !== (button4_class_value = "" + (null_to_empty(/*nextButtonClass*/ ctx[11]) + " svelte-1g3vo12"))) {
     				attr_dev(button4, "class", button4_class_value);
     			}
 
-    			if (dirty & /*currentuserIndex, userTimestamps*/ 3 && button4_disabled_value !== (button4_disabled_value = /*currentuserIndex*/ ctx[0] >= /*userTimestamps*/ ctx[1].length - 1)) {
+    			if (dirty[0] & /*currentuserIndex, userTimestamps*/ 3 && button4_disabled_value !== (button4_disabled_value = /*currentuserIndex*/ ctx[0] >= /*userTimestamps*/ ctx[1].length - 1)) {
     				prop_dev(button4, "disabled", button4_disabled_value);
     			}
 
-    			if (dirty & /*currentuserIndex*/ 1) set_data_dev(t31, /*currentuserIndex*/ ctx[0]);
-    			if (dirty & /*userTimestamps*/ 2 && t33_value !== (t33_value = /*userTimestamps*/ ctx[1].length + "")) set_data_dev(t33, t33_value);
+    			if (dirty[0] & /*currentuserIndex*/ 1) set_data_dev(t32, /*currentuserIndex*/ ctx[0]);
+    			if (dirty[0] & /*userTimestamps*/ 2 && t34_value !== (t34_value = /*userTimestamps*/ ctx[1].length + "")) set_data_dev(t34, t34_value);
     		},
     		i: noop,
     		o: noop,
@@ -4810,26 +5100,28 @@ var app = (function () {
     			if (detaching) detach_dev(t6);
     			if (detaching) detach_dev(div3);
     			if (detaching) detach_dev(t16);
+    			if (detaching) detach_dev(input2);
+    			if (detaching) detach_dev(t17);
     			if (detaching) detach_dev(button0);
-    			if (detaching) detach_dev(t18);
+    			if (detaching) detach_dev(t19);
     			if (detaching) detach_dev(button1);
-    			if (detaching) detach_dev(t20);
     			if (detaching) detach_dev(t21);
     			if (detaching) detach_dev(t22);
     			if (detaching) detach_dev(t23);
     			if (detaching) detach_dev(t24);
+    			if (detaching) detach_dev(t25);
     			if (detaching) detach_dev(button2);
-    			if (detaching) detach_dev(t26);
+    			if (detaching) detach_dev(t27);
     			if (detaching) detach_dev(button3);
-    			if (detaching) detach_dev(t28);
+    			if (detaching) detach_dev(t29);
     			if (detaching) detach_dev(button4);
-    			if (detaching) detach_dev(t30);
     			if (detaching) detach_dev(t31);
     			if (detaching) detach_dev(t32);
     			if (detaching) detach_dev(t33);
     			if (detaching) detach_dev(t34);
-    			if (detaching) detach_dev(br1);
     			if (detaching) detach_dev(t35);
+    			if (detaching) detach_dev(br1);
+    			if (detaching) detach_dev(t36);
     			mounted = false;
     			run_all(dispose);
     		}
@@ -4846,8 +5138,6 @@ var app = (function () {
     	return block;
     }
 
-    const interval = 10; // Define your interval
-
     function getRandomWord(line) {
     	let words = line.split(" ");
     	return words[Math.floor(Math.random() * words.length)];
@@ -4859,6 +5149,7 @@ var app = (function () {
     	let { $$slots: slots = {}, $$scope } = $$props;
     	validate_slots('YoutubeIframeAPICustomInterface', slots, []);
     	let player;
+    	let interval = 10; // Define your interval
     	let currentTime = 0;
     	let timeUpdateInterval;
 
@@ -4924,7 +5215,7 @@ var app = (function () {
     			generatedTimestamps.push(i);
     		}
 
-    		$$invalidate(7, timestamps = generatedTimestamps);
+    		$$invalidate(8, timestamps = generatedTimestamps);
     	} // Do something with the timestamps
     	//console.log("Generated Timestamps: ", generatedTimestamps);
 
@@ -4942,12 +5233,12 @@ var app = (function () {
     		? curr
     		: prev);
 
-    		$$invalidate(6, currentIndex = timestamps.indexOf(closest));
+    		$$invalidate(7, currentIndex = timestamps.indexOf(closest));
     	}
 
     	function updateCurrentTime() {
     		if (player && player.getCurrentTime) {
-    			$$invalidate(2, currentTime = player.getCurrentTime());
+    			$$invalidate(3, currentTime = player.getCurrentTime());
     		}
     	}
 
@@ -4957,34 +5248,34 @@ var app = (function () {
 
     	function updateWord() {
     		if (isUpdating) {
-    			$$invalidate(4, line = lines[Math.floor(Math.random() * lines.length)]);
-    			$$invalidate(3, currentWord = getRandomWord(line));
+    			$$invalidate(5, line = lines[Math.floor(Math.random() * lines.length)]);
+    			$$invalidate(4, currentWord = getRandomWord(line));
     		}
     	}
 
     	function toggleUpdate() {
-    		$$invalidate(5, isUpdating = !isUpdating);
+    		$$invalidate(6, isUpdating = !isUpdating);
 
     		if (isUpdating) {
     			updateWord(); // Immediately update once
     			updateInterval = setInterval(updateWord, 3000); // Update every 3 seconds
     		} else {
     			clearInterval(updateInterval);
-    			$$invalidate(4, line = '');
-    			$$invalidate(3, currentWord = '');
+    			$$invalidate(5, line = '');
+    			$$invalidate(4, currentWord = '');
     		}
     	}
 
     	function goToNextAutoTimestamp() {
     		if (currentIndex < timestamps.length - 1) {
-    			$$invalidate(6, currentIndex += 1);
+    			$$invalidate(7, currentIndex += 1);
     			player.seekTo(timestamps[currentIndex], true);
     		}
     	}
 
     	function goToPreviousAutoTimestamp() {
     		if (currentIndex > 0) {
-    			$$invalidate(6, currentIndex -= 1);
+    			$$invalidate(7, currentIndex -= 1);
     			player.seekTo(timestamps[currentIndex], true);
     		}
     	}
@@ -5022,12 +5313,17 @@ var app = (function () {
 
     	function input0_input_handler() {
     		currentvideoId = this.value;
-    		$$invalidate(8, currentvideoId);
+    		$$invalidate(9, currentvideoId);
     	}
 
     	function input1_change_handler() {
     		isUpdating = this.checked;
-    		$$invalidate(5, isUpdating);
+    		$$invalidate(6, isUpdating);
+    	}
+
+    	function input2_input_handler() {
+    		interval = to_number(this.value);
+    		$$invalidate(2, interval);
     	}
 
     	$$self.$capture_state = () => ({
@@ -5067,21 +5363,22 @@ var app = (function () {
 
     	$$self.$inject_state = $$props => {
     		if ('player' in $$props) player = $$props.player;
-    		if ('currentTime' in $$props) $$invalidate(2, currentTime = $$props.currentTime);
+    		if ('interval' in $$props) $$invalidate(2, interval = $$props.interval);
+    		if ('currentTime' in $$props) $$invalidate(3, currentTime = $$props.currentTime);
     		if ('timeUpdateInterval' in $$props) timeUpdateInterval = $$props.timeUpdateInterval;
     		if ('transcript' in $$props) transcript = $$props.transcript;
     		if ('lines' in $$props) lines = $$props.lines;
-    		if ('currentWord' in $$props) $$invalidate(3, currentWord = $$props.currentWord);
-    		if ('line' in $$props) $$invalidate(4, line = $$props.line);
-    		if ('isUpdating' in $$props) $$invalidate(5, isUpdating = $$props.isUpdating);
+    		if ('currentWord' in $$props) $$invalidate(4, currentWord = $$props.currentWord);
+    		if ('line' in $$props) $$invalidate(5, line = $$props.line);
+    		if ('isUpdating' in $$props) $$invalidate(6, isUpdating = $$props.isUpdating);
     		if ('updateInterval' in $$props) updateInterval = $$props.updateInterval;
-    		if ('currentIndex' in $$props) $$invalidate(6, currentIndex = $$props.currentIndex);
+    		if ('currentIndex' in $$props) $$invalidate(7, currentIndex = $$props.currentIndex);
     		if ('currentuserIndex' in $$props) $$invalidate(0, currentuserIndex = $$props.currentuserIndex);
-    		if ('timestamps' in $$props) $$invalidate(7, timestamps = $$props.timestamps);
+    		if ('timestamps' in $$props) $$invalidate(8, timestamps = $$props.timestamps);
     		if ('userTimestamps' in $$props) $$invalidate(1, userTimestamps = $$props.userTimestamps);
-    		if ('currentvideoId' in $$props) $$invalidate(8, currentvideoId = $$props.currentvideoId);
-    		if ('previousButtonClass' in $$props) $$invalidate(9, previousButtonClass = $$props.previousButtonClass);
-    		if ('nextButtonClass' in $$props) $$invalidate(10, nextButtonClass = $$props.nextButtonClass);
+    		if ('currentvideoId' in $$props) $$invalidate(9, currentvideoId = $$props.currentvideoId);
+    		if ('previousButtonClass' in $$props) $$invalidate(10, previousButtonClass = $$props.previousButtonClass);
+    		if ('nextButtonClass' in $$props) $$invalidate(11, nextButtonClass = $$props.nextButtonClass);
     	};
 
     	if ($$props && "$$inject" in $$props) {
@@ -5089,20 +5386,21 @@ var app = (function () {
     	}
 
     	$$self.$$.update = () => {
-    		if ($$self.$$.dirty & /*currentuserIndex, userTimestamps*/ 3) {
-    			$$invalidate(10, nextButtonClass = currentuserIndex >= userTimestamps.length - 1
+    		if ($$self.$$.dirty[0] & /*currentuserIndex, userTimestamps*/ 3) {
+    			$$invalidate(11, nextButtonClass = currentuserIndex >= userTimestamps.length - 1
     			? 'button-at-end'
     			: 'button');
     		}
 
-    		if ($$self.$$.dirty & /*currentuserIndex*/ 1) {
-    			$$invalidate(9, previousButtonClass = currentuserIndex <= 0 ? 'button-at-end' : 'button');
+    		if ($$self.$$.dirty[0] & /*currentuserIndex*/ 1) {
+    			$$invalidate(10, previousButtonClass = currentuserIndex <= 0 ? 'button-at-end' : 'button');
     		}
     	};
 
     	return [
     		currentuserIndex,
     		userTimestamps,
+    		interval,
     		currentTime,
     		currentWord,
     		line,
@@ -5119,14 +5417,15 @@ var app = (function () {
     		goToNextUserTimestamp,
     		goToPreviousUserTimestamp,
     		input0_input_handler,
-    		input1_change_handler
+    		input1_change_handler,
+    		input2_input_handler
     	];
     }
 
     class YoutubeIframeAPICustomInterface extends SvelteComponentDev {
     	constructor(options) {
     		super(options);
-    		init(this, options, instance$1, create_fragment$1, safe_not_equal, {});
+    		init(this, options, instance$1, create_fragment$1, safe_not_equal, {}, null, [-1, -1]);
 
     		dispatch_dev("SvelteRegisterComponent", {
     			component: this,