add dice sounds to all rollers

src/App.svelte

@@ -17,17 +17,27 @@
 
   let rollThemBones = new Audio("https://soundbible.com/mp3/Shake And Roll Dice-SoundBible.com-591494296.mp3");
   let playSounds = true;
+  let timeout: NodeJS.Timeout;
 
   function setSoundOptions(event: any) {
     playSounds = event.detail.soundEnabled;
   }
 
-  function roll(event: any) {
+  function handleRoll(event: any) {
-    // console.log("called roll with", details);
+    clearTimeout(timeout);
     rollThemBones.pause();
     rollThemBones.currentTime = 0;
+
     if (playSounds) {
+      rollThemBones.volume = 0.6 + 0.4 * Math.random(); // vary the volume
+      rollThemBones.playbackRate = 0.6 + 0.8 * Math.random(); // vary the playback rate
       rollThemBones.play();
+
+      let playTime = rollThemBones.duration * 1000 * (0.3 + 0.7 * Math.random()); // vary the playback duration
+      console.log(`rolling die at volume ${rollThemBones.volume}, playbackRate ${rollThemBones.playbackRate}, play duration ${playTime}`);
+      timeout = setTimeout(() => {
+        rollThemBones.pause();
+      }, playTime);
     }
   }
 </script>
@@ -40,37 +50,37 @@
   <hr />
   <Accordion>
     <AccordionItem active header="Creatures">
-      <CreatureRoller on:makeSomeNoise={roll} />
+      <CreatureRoller on:roll={handleRoll} />
     </AccordionItem>
     <AccordionItem header="Dangers">
-      <DangerRoller />
+      <DangerRoller on:roll={handleRoll} />
     </AccordionItem>
     <AccordionItem header="Details">
-      <DetailsRoller />
+      <DetailsRoller on:roll={handleRoll} />
     </AccordionItem>
     <AccordionItem header="Discoveries">
-      <DiscoveryRoller />
+      <DiscoveryRoller on:roll={handleRoll} />
     </AccordionItem>
     <AccordionItem header="Dungeons">
-      <DungeonRoller />
+      <DungeonRoller on:roll={handleRoll} />
     </AccordionItem>
     <AccordionItem header="Followers">
-      <FollowerRoller />
+      <FollowerRoller on:roll={handleRoll} />
     </AccordionItem>
     <AccordionItem header="Kingdoms">
-      <KingdomRoller />
+      <KingdomRoller on:roll={handleRoll} />
     </AccordionItem>
     <AccordionItem header="NPCs">
-      <NpcRoller />
+      <NpcRoller on:roll={handleRoll} />
     </AccordionItem>
     <AccordionItem header="Places">
-      <PlaceRoller />
+      <PlaceRoller on:roll={handleRoll} />
     </AccordionItem>
     <AccordionItem header="Regions">
-      <RegionRoller />
+      <RegionRoller on:roll={handleRoll} />
     </AccordionItem>
     <AccordionItem header="Steadings">
-      <SteadingRoller />
+      <SteadingRoller on:roll={handleRoll} />
     </AccordionItem>
   </Accordion>
   <Footer />

src/components/CreatureRoller.svelte

@@ -11,7 +11,7 @@
   function roll(event: Event) {
     let creature = rollCreature();
     rollResults = [{ creature, timestamp: formatDate(new Date(), "P kk:mm:ss") }, ...rollResults];
-    dispatch("makeSomeNoise", { component: "CreatureRoller" });
+    dispatch("roll");
   }
 </script>
 

src/components/DangerRoller.svelte

@@ -1,8 +1,11 @@
 <script lang="ts">
   import { format as formatDate } from "date-fns";
+  import { createEventDispatcher } from "svelte";
   import { Button, Icon } from "sveltestrap";
   import { Danger, rollDanger } from "../rollers/dangers";
 
+  const dispatch = createEventDispatcher();
+
   export let rollResults: { danger: Danger; icon: string; timestamp: string }[] = [];
 
   function roll(event: Event) {
@@ -16,6 +19,7 @@
         ? "emoji-neutral"
         : "";
     rollResults = [{ danger, icon, timestamp: formatDate(new Date(), "P kk:mm:ss") }, ...rollResults];
+    dispatch("roll");
   }
 </script>
 

src/components/DetailsRoller.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import { format as formatDate } from "date-fns";
+  import { createEventDispatcher } from "svelte";
   import { Button, Icon } from "sveltestrap";
   import {
     rollAbility,
@@ -25,6 +26,8 @@
 
   import DieIcon from "./DieIcon.svelte";
 
+  const dispatch = createEventDispatcher();
+
   let rollResults: { type: string; roll: number; value: string; timestamp: string }[] = [];
 
   function roll(item: { type: string; description: string; roll: number }) {
@@ -32,6 +35,7 @@
       { type: item.type, roll: item.roll, value: item.description, timestamp: formatDate(new Date(), "P kk:mm:ss") },
       ...rollResults,
     ];
+    dispatch("roll");
   }
 </script>
 

src/components/DiscoveryRoller.svelte

@@ -1,17 +1,20 @@
 <script lang="ts">
-  import { Button, Card, CardHeader, CardTitle, CardBody, CardSubtitle, CardText, CardFooter, Container, Row, Icon } from "sveltestrap";
+  import { Button } from "sveltestrap";
-  import { capitalize } from "lodash";
   import { format as formatDate } from "date-fns";
+  import { createEventDispatcher } from "svelte";
   import DiscoveryCard from "./DiscoveryCard.svelte";
   import { Discovery, rollDiscovery } from "../rollers/discoveries";
 
+  const dispatch = createEventDispatcher();
+
   export let rollResults: { discovery: Discovery; timestamp: string }[] = [];
 
   function roll(event: Event) {
     let discovery = rollDiscovery();
-
     rollResults = [{ discovery, timestamp: formatDate(new Date(), "P kk:mm:ss") }, ...rollResults];
+    dispatch("roll");
   }
+
   function getIcon(t: string, c: string): string {
     return "";
   }

src/components/DungeonRoller.svelte

@@ -1,16 +1,19 @@
 <script lang="ts">
   import { Button } from "sveltestrap";
   import { format as formatDate } from "date-fns";
+  import { createEventDispatcher } from "svelte";
 
   import DungeonCard from "./DungeonCard.svelte";
   import { Dungeon, rollDungeon } from "../rollers/dungeons";
 
+  const dispatch = createEventDispatcher();
+
   export let rollResults: { dungeon: Dungeon; timestamp: string }[] = [];
 
   function roll(event: Event) {
     let dungeon = rollDungeon();
-
     rollResults = [{ dungeon, timestamp: formatDate(new Date(), "P kk:mm:ss") }, ...rollResults];
+    dispatch("roll");
   }
 </script>
 

src/components/FollowerRoller.svelte

@@ -1,16 +1,19 @@
 <script lang="ts">
   import { Button } from "sveltestrap";
   import { format as formatDate } from "date-fns";
+  import { createEventDispatcher } from "svelte";
 
   import FollowerCard from "./FollowerCard.svelte";
   import { rollFollower, Follower } from "../rollers/followers";
 
+  const dispatch = createEventDispatcher();
+
   export let rollResults: { follower: Follower; timestamp: string }[] = [];
 
   function roll(event: Event) {
     let follower = rollFollower();
-
     rollResults = [{ follower, timestamp: formatDate(new Date(), "P kk:mm:ss") }, ...rollResults];
+    dispatch("roll");
   }
 </script>
 

src/components/KingdomRoller.svelte

@@ -1,19 +1,22 @@
 <script lang="ts">
   import { capitalize } from "lodash";
   import { format as formatDate } from "date-fns";
+  import { createEventDispatcher } from "svelte";
   import { Button, Icon } from "sveltestrap";
 
   import { kingdoms, rollCategory } from "../rollers/kingdoms";
 
+  const dispatch = createEventDispatcher();
+
   let rollResults: { value: string; icon: string; timestamp: string }[] = [];
   let kingdom = "arpad";
   let categories: string[];
 
   function roll(category: string) {
     let value = rollCategory(kingdom, category);
-
     let icon = { male: "person-fill", female: "person", steading: "house-door-fill", mount: "bicycle" }[category] || "";
     rollResults = [{ value, icon, timestamp: formatDate(new Date(), "P kk:mm:ss") }, ...rollResults];
+    dispatch("roll");
   }
 
   $: categories = kingdoms[kingdom].categories;

src/components/NpcRoller.svelte

@@ -1,16 +1,19 @@
 <script lang="ts">
   import { Button } from "sveltestrap";
   import { format as formatDate } from "date-fns";
+  import { createEventDispatcher } from "svelte";
 
   import NpcCard from "./NpcCard.svelte";
   import { Npc, rollNpc } from "../rollers/npcs";
 
+  const dispatch = createEventDispatcher();
+
   export let rollResults: { npc: Npc; timestamp: string }[] = [];
 
   function roll(event: Event) {
     let npc = rollNpc();
-
     rollResults = [{ npc, timestamp: formatDate(new Date(), "P kk:mm:ss") }, ...rollResults];
+    dispatch("roll");
   }
 </script>
 

src/components/PlaceRoller.svelte

@@ -1,13 +1,17 @@
 <script lang="ts">
   import { format as formatDate } from "date-fns";
+  import { createEventDispatcher } from "svelte";
   import { Button } from "sveltestrap";
   import { rollPlace } from "../rollers/places";
 
+  const dispatch = createEventDispatcher();
+
   export let rollResults: { place: string; timestamp: string }[] = [];
 
   function roll(event: Event) {
     let place = rollPlace();
     rollResults = [{ place, timestamp: formatDate(new Date(), "P kk:mm:ss") }, ...rollResults];
+    dispatch("roll");
   }
 </script>
 

src/components/RegionRoller.svelte

@@ -1,13 +1,17 @@
 <script lang="ts">
   import { format as formatDate } from "date-fns";
+  import { createEventDispatcher } from "svelte";
   import { Button } from "sveltestrap";
   import { rollRegion } from "../rollers/regions";
 
+  const dispatch = createEventDispatcher();
+
   export let rollResults: { region: string; timestamp: string }[] = [];
 
   function roll(event: Event) {
     let region = rollRegion();
     rollResults = [{ region, timestamp: formatDate(new Date(), "P kk:mm:ss") }, ...rollResults];
+    dispatch("roll");
   }
 </script>
 

src/components/SteadingRoller.svelte

@@ -1,14 +1,18 @@
 <script lang="ts">
   import { format as formatDate } from "date-fns";
+  import { createEventDispatcher } from "svelte";
   import { Button } from "sveltestrap";
   import SteadingCard from "./SteadingCard.svelte";
   import { rollSteading, Steading } from "../rollers/steadings";
 
+  const dispatch = createEventDispatcher();
+
   export let rollResults: { steading: Steading; timestamp: string }[] = [];
 
   function roll(event: Event) {
     let steading = rollSteading();
     rollResults = [{ steading, timestamp: formatDate(new Date(), "P kk:mm:ss") }, ...rollResults];
+    dispatch("roll");
   }
 </script>