From e8e42a7c954466a7ba83d74f086151ae28c3e5ba Mon Sep 17 00:00:00 2001
From: Rich Harris <richard.a.harris@gmail.com>
Date: Sat, 22 Dec 2018 14:56:08 -0500
Subject: [PATCH] fix timer example

---
 site/content/examples/7guis-timer/App.html | 54 +++++++++-------------
 1 file changed, 21 insertions(+), 33 deletions(-)

diff --git a/site/content/examples/7guis-timer/App.html b/site/content/examples/7guis-timer/App.html
index ad8ffd8082..47afd6c48b 100644
--- a/site/content/examples/7guis-timer/App.html
+++ b/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>
+<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>
\ No newline at end of file
+<button on:click="{() => elapsed = 0}">reset</button>
\ No newline at end of file