Make some basic timer functionality

src/App.svelte

@@ -1,5 +1,26 @@
 <script>
-  let seconds = 5;
+  import { onDestroy } from 'svelte'
+  import { invoke } from '@tauri-apps/api'
+  import { listen, once } from '@tauri-apps/api/event'
+  
+  let seconds = 5
+
+  function start_timer() {
+    invoke('start_timer', {
+      duration: { secs: seconds, nanos: 0 },
+      message: "Hi!",
+    })
+
+    let timer_tick_unlisten = listen('timer-tick', (event) => {
+      console.log("Tick!", event.payload.id, event.payload.elapsed)
+    })
+
+    once('timer-done', (event) => {
+      console.log("Done!", event.payload.id)
+
+      timer_tick_unlisten.then(ttu => ttu())
+    })
+  }
 </script>
 
 <main>
@@ -7,5 +28,5 @@
     Fire after
     <input type="number" bind:value={seconds} />
   </label>
-  <button>Fire!</button> 
+  <button on:click="{start_timer}">Fire!</button>
 </main>

src/assets/potato.svg

@@ -0,0 +1,23 @@
+<svg width="128" height="128" style="enable-background:new 0 0 128 128;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+  <g id="Layer_2" style="display:none;">
+    <path d=" M71.52,44.35c-6.36-3.15-15.04-9.52-16.33-11.23" style="display:inline;fill:none;stroke:#330000;stroke-width:1.8115;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;"/>
+    <path d=" M100.93,47.54c-15.84-1.92-37.94-15.19-39.85-16.57" style="display:inline;fill:none;stroke:#330000;stroke-width:1.8115;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;"/>
+    <path d=" M106.25,41.12C86.91,39.26,66.33,28.38,65.9,27.88" style="display:inline;fill:none;stroke:#330000;stroke-width:1.8115;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;"/>
+    <path d=" M114.28,34.86c-15.82-0.36-42.16-9.41-43.57-10.08" style="display:inline;fill:none;stroke:#330000;stroke-width:1.8115;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;"/>
+    <path d=" M113.84,26.83c-12.91,1.05-38.1-5.93-38.94-6.04" style="display:inline;fill:none;stroke:#330000;stroke-width:1.8115;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;"/>
+    <path d=" M105.04,19.23c-9.5,1-26.01-3.26-27.3-3.53" style="display:inline;fill:none;stroke:#330000;stroke-width:1.8115;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;"/>
+  </g>
+  <g id="图层_1">
+    <path d="M112.51,21.82c-4.8-3.07-10.15-5.51-15.56-7.61c-7.7-2.99-15.42-3.67-23.2-2.18 c-6.89,1.32-13.39,4.5-18.93,8.9c-3.46,2.74-6.92,5.49-10.13,8.47c-7.74,7.2-15.59,14.39-22.55,22.25 C16.01,58.56,10.52,66.11,5.7,73.88c-4.14,6.67-4.63,13.99-2.16,21.24c5.5,16.09,31.28,26.36,47.4,19.42 c5.88-2.53,11.69-5.27,17.48-8.01c6.66-3.15,13.16-6.7,19.94-9.56c20.74-8.77,32.83-24.01,36.89-44.51 C127.77,39.74,123.59,28.9,112.51,21.82z M60.63,33.33c0.11,0.42-0.25-0.01-0.14,0.41c-0.03-0.11-0.06-0.23-0.09-0.34 C60.48,33.37,60.56,33.35,60.63,33.33z" style="fill:#B89278;"/>
+    <g>
+      <path d="M104.36,70.22c-0.09,0-0.18-0.02-0.26-0.07c-0.17-0.1-0.27-0.3-0.24-0.51 c0.35-2.25,0.79-4.52,1.21-6.72c0.99-5.12,1.93-9.96,1.89-14.8c-0.06-7.2-5.06-12.89-9.47-17.92c-0.16-0.19-0.17-0.46-0.01-0.65 c0.1-0.12,0.24-0.18,0.38-0.18c0.09,0,0.18,0.02,0.26,0.08c6.85,4.25,12.58,15.13,13.04,24.77c0.23,4.82-0.71,11.5-6.51,15.9 C104.58,70.19,104.47,70.22,104.36,70.22z" style="fill:#855C52;"/>
+      <path d="M97.88,29.88c10.73,6.66,19.12,30.24,6.49,39.85c1.14-7.31,3.16-14.54,3.11-21.6 C107.41,40.85,102.55,35.21,97.88,29.88 M97.88,28.88c-0.29,0-0.57,0.12-0.76,0.35c-0.32,0.38-0.32,0.93,0.01,1.31 c4.35,4.96,9.29,10.58,9.35,17.59c0.04,4.8-0.89,9.61-1.88,14.71c-0.43,2.2-0.87,4.47-1.22,6.73c-0.06,0.4,0.13,0.8,0.48,1.01 c0.16,0.09,0.34,0.14,0.51,0.14c0.21,0,0.43-0.07,0.61-0.2c4.72-3.59,7.04-9.24,6.71-16.32c-0.46-9.78-6.29-20.84-13.27-25.17 C98.24,28.93,98.06,28.88,97.88,28.88L97.88,28.88z" style="fill:#855C52;"/>
+    </g>
+    <g>
+      <path d="M45.54,82.39c-0.13,0-0.25-0.05-0.35-0.14c-0.41-0.4-0.81-0.8-1.21-1.2 c-3.82-3.82-7.44-7.43-13.7-7.43c-0.18,0-0.36,0-0.55,0.01c-0.01,0-0.01,0-0.02,0c-0.23,0-0.42-0.15-0.48-0.37 c-0.06-0.23,0.04-0.46,0.25-0.57c1.41-0.75,2.97-1.13,4.64-1.13c5.99,0,11.45,4.71,11.92,10.29c0.02,0.21-0.1,0.41-0.29,0.49 C45.68,82.38,45.61,82.39,45.54,82.39z" style="fill:#855C52;"/>
+      <path d="M34.11,72.06c5.42,0,10.96,4.28,11.42,9.83c-4.28-4.2-8.11-8.77-15.26-8.77 c-0.19,0-0.38,0-0.57,0.01C31.09,72.39,32.6,72.06,34.11,72.06 M34.11,71.06L34.11,71.06c-1.75,0-3.39,0.4-4.87,1.18 c-0.41,0.22-0.62,0.69-0.5,1.14c0.12,0.44,0.51,0.74,0.97,0.74c0.01,0,0.02,0,0.03,0c0.18-0.01,0.36-0.01,0.53-0.01 c6.06,0,9.6,3.54,13.35,7.28c0.4,0.4,0.8,0.8,1.21,1.2c0.19,0.19,0.44,0.29,0.7,0.29c0.14,0,0.29-0.03,0.43-0.1 c0.38-0.18,0.61-0.57,0.57-0.99C46.04,75.98,40.35,71.06,34.11,71.06L34.11,71.06z" style="fill:#855C52;"/>
+    </g>
+    <path d="M32.88,40.51c7.74-3.96,25.52-9.94,25.85-8.17c0.01,2.75-4.2,4.47-5.5,4.94 c-10.07,3.67-21.63,9.32-31.09,14.36C24.61,48.92,30.35,42.7,32.88,40.51z" style="fill:#855C52;"/>
+    <path d="M71,97.58c-3.38,0.27-8.02,0.27-11.41,0.27c-3.16,0-2.13,1.91-1.22,2.19 c4.24,1.29,7.86,1.95,12.29,2.15c0.89,0.04,5.96,0.29,6.76-0.1c6.58-3.18,10.54-5.01,14.01-6.51C84.67,96.75,76.57,97.13,71,97.58z " style="fill:#855C52;"/>
+  </g>
+</svg>

src/assets/svelte.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="26.6" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 308"><path fill="#FF3E00" d="M239.682 40.707C211.113-.182 154.69-12.301 113.895 13.69L42.247 59.356a82.198 82.198 0 0 0-37.135 55.056a86.566 86.566 0 0 0 8.536 55.576a82.425 82.425 0 0 0-12.296 30.719a87.596 87.596 0 0 0 14.964 66.244c28.574 40.893 84.997 53.007 125.787 27.016l71.648-45.664a82.182 82.182 0 0 0 37.135-55.057a86.601 86.601 0 0 0-8.53-55.577a82.409 82.409 0 0 0 12.29-30.718a87.573 87.573 0 0 0-14.963-66.244"></path><path fill="#FFF" d="M106.889 270.841c-23.102 6.007-47.497-3.036-61.103-22.648a52.685 52.685 0 0 1-9.003-39.85a49.978 49.978 0 0 1 1.713-6.693l1.35-4.115l3.671 2.697a92.447 92.447 0 0 0 28.036 14.007l2.663.808l-.245 2.659a16.067 16.067 0 0 0 2.89 10.656a17.143 17.143 0 0 0 18.397 6.828a15.786 15.786 0 0 0 4.403-1.935l71.67-45.672a14.922 14.922 0 0 0 6.734-9.977a15.923 15.923 0 0 0-2.713-12.011a17.156 17.156 0 0 0-18.404-6.832a15.78 15.78 0 0 0-4.396 1.933l-27.35 17.434a52.298 52.298 0 0 1-14.553 6.391c-23.101 6.007-47.497-3.036-61.101-22.649a52.681 52.681 0 0 1-9.004-39.849a49.428 49.428 0 0 1 22.34-33.114l71.664-45.677a52.218 52.218 0 0 1 14.563-6.398c23.101-6.007 47.497 3.036 61.101 22.648a52.685 52.685 0 0 1 9.004 39.85a50.559 50.559 0 0 1-1.713 6.692l-1.35 4.116l-3.67-2.693a92.373 92.373 0 0 0-28.037-14.013l-2.664-.809l.246-2.658a16.099 16.099 0 0 0-2.89-10.656a17.143 17.143 0 0 0-18.398-6.828a15.786 15.786 0 0 0-4.402 1.935l-71.67 45.674a14.898 14.898 0 0 0-6.73 9.975a15.9 15.9 0 0 0 2.709 12.012a17.156 17.156 0 0 0 18.404 6.832a15.841 15.841 0 0 0 4.402-1.935l27.345-17.427a52.147 52.147 0 0 1 14.552-6.397c23.101-6.006 47.497 3.037 61.102 22.65a52.681 52.681 0 0 1 9.003 39.848a49.453 49.453 0 0 1-22.34 33.12l-71.664 45.673a52.218 52.218 0 0 1-14.563 6.398"></path></svg>

src/lib/Counter.svelte

@@ -1,11 +0,0 @@
-<script lang="ts">
-  let count: number = 0
-  $: doubled = count * 2
-  const increment = () => {
-    count += 1
-  }
-</script>
-
-<button on:click={increment}>
-  count is {count} and doubled is {doubled}
-</button>

src/main.ts

@@ -1,8 +1,6 @@
 import './app.css'
 import App from './App.svelte'
 
-import { invoke } from '@tauri-apps/api'
-
 const app = new App({
   target: document.getElementById('app')
 })