add dice roll sounds

src/App.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { Accordion, AccordionHeader, AccordionItem } from "sveltestrap";
 
+  import SoundOptions from "./components/SoundOptions.svelte";
   import CreatureRoller from "./components/CreatureRoller.svelte";
   import DangerRoller from "./components/DangerRoller.svelte";
   import DetailsRoller from "./components/DetailsRoller.svelte";
@@ -13,15 +14,33 @@
   import RegionRoller from "./components/RegionRoller.svelte";
   import SteadingRoller from "./components/SteadingRoller.svelte";
   import Footer from "./components/Footer.svelte";
+
+  let rollThemBones = new Audio("https://soundbible.com/mp3/Shake And Roll Dice-SoundBible.com-591494296.mp3");
+  let playSounds = true;
+
+  function setSoundOptions(event: any) {
+    playSounds = event.detail.soundEnabled;
+  }
+
+  function roll(event: any) {
+    // console.log("called roll with", details);
+    rollThemBones.pause();
+    rollThemBones.currentTime = 0;
+    if (playSounds) {
+      rollThemBones.play();
+    }
+  }
 </script>
 
 <main>
   <h1>The Perilous Wilds</h1>
   <h2>A web-app for rolling on tables and getting funny results</h2>
   <hr />
+  <SoundOptions on:soundToggle={setSoundOptions} />
+  <hr />
   <Accordion>
     <AccordionItem active header="Creatures">
-      <CreatureRoller />
+      <CreatureRoller on:makeSomeNoise={roll} />
     </AccordionItem>
     <AccordionItem header="Dangers">
       <DangerRoller />

src/components/CreatureRoller.svelte

@@ -1,14 +1,17 @@
 <script lang="ts">
   import { format as formatDate } from "date-fns";
+  import { createEventDispatcher } from "svelte";
   import { Button } from "sveltestrap";
   import CreatureCard from "./CreatureCard.svelte";
   import { Creature, rollCreature } from "../rollers/creatures";
 
+  const dispatch = createEventDispatcher();
   let rollResults: { creature: Creature; timestamp: string }[] = [];
 
   function roll(event: Event) {
     let creature = rollCreature();
     rollResults = [{ creature, timestamp: formatDate(new Date(), "P kk:mm:ss") }, ...rollResults];
+    dispatch("makeSomeNoise", { component: "CreatureRoller" });
   }
 </script>
 

src/components/Footer.svelte

@@ -5,6 +5,7 @@
   <footer>
     <div>With content from The Perilous Wilds by Jason Lutes</div>
     <div>Distributed under the Creative Commons Attribution-ShareAlike 3.0 Unported license</div>
+    <div>Rolling dice sounds from SoundBible under Creative Commons Attribution</div>
     <div>Find the source for this project on <a href="https://github.com/RussellChamp/tpw-roller">Github</a></div>
   </footer>
 </main>

src/components/SoundOptions.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+  import { createEventDispatcher } from "svelte";
+  import { Button, Icon } from "sveltestrap";
+
+  const dispatch = createEventDispatcher();
+  let soundEnabled = true;
+
+  function toggleSound() {
+    soundEnabled = !soundEnabled;
+    dispatch("soundToggle", { soundEnabled });
+  }
+</script>
+
+<main>
+  <Button color="primary" on:click={toggleSound}>Toggle Sound <Icon name={soundEnabled ? "volume-up-fill" : "volume-mute-fill"} /></Button>
+</main>
+
+<style>
+</style>