fix timer example

site/content/examples/7guis-timer/App.html

@@ -1,53 +1,41 @@
-<script>
-	import { onDestroy, onMount } from 'svelte';
+<!-- https://eugenkiss.github.io/7guis/tasks#timer -->
 
-	// [svelte-upgrade suggestion]
-	// manually refactor all references to __this
-	const __this = {};
+<script>
+	import { onDestroy } from 'svelte';
 
-	export let elapsed = 0;
-	export let duration = 5000;
-	export let start;
+	let elapsed = 0;
+	let duration = 5000;
 
-	onMount(() => {
-		reset();
+	let last_time = window.performance.now();
+	let frame;
 
-		const update = () => {
-			__this.frame = requestAnimationFrame(update);
-			const elapsed = window.performance.now() - start;
+	(function update() {
+		frame = requestAnimationFrame(update);
 
-			if (elapsed > duration) return;
+		const time = window.performance.now();
+		elapsed += Math.min(
+			time - last_time,
+			duration - elapsed
+		);
 
-			elapsed = elapsed;
-		};
-
-		update();
-	});
+		last_time = time;
+	}());
 
 	onDestroy(() => {
-		if (__this.frame) {
-			cancelAnimationFrame(__this.frame);
-		}
+		cancelAnimationFrame(frame);
 	});
-
-	// [svelte-upgrade suggestion]
-	// review these functions and remove unnecessary 'export' keywords
-	export function reset() {
-		start = window.performance.now();
-	}
 </script>
 
-<!-- https://github.com/eugenkiss/7guis/wiki#timer -->
 <label>
 	elapsed time:
-	<progress value='{elapsed / duration}'></progress>
+	<progress value="{elapsed / duration}"></progress>
 </label>
 
 <div>{(elapsed / 1000).toFixed(1)}s</div>
 
 <label>
 	duration:
-	<input type='range' bind:value='duration' min='1' max='20000'>
+	<input type="range" bind:value={duration} min="1" max="20000">
 </label>
 
-<button on:click='{reset}'>reset</button>
+<button on:click="{() => elapsed = 0}">reset</button>