From d5a1654b22730c6450f7f7617eee066cfd5ae490 Mon Sep 17 00:00:00 2001
From: Russell Champoux <russellchamp@gmail.com>
Date: Fri, 30 Jul 2021 00:35:05 -0400
Subject: [PATCH] add icons to danger roller

---
 src/rollers/DangerRoller.svelte | 16 +++++++++++++---
 1 file changed, 13 insertions(+), 3 deletions(-)

diff --git a/src/rollers/DangerRoller.svelte b/src/rollers/DangerRoller.svelte
index 419fbdb..538e0d2 100644
--- a/src/rollers/DangerRoller.svelte
+++ b/src/rollers/DangerRoller.svelte
@@ -1,12 +1,22 @@
 <script lang="ts">
   import * as _ from "lodash";
   import { format as formatDate } from "date-fns";
+  import { Icon } from "sveltestrap";
   import { Danger, rollDanger } from "./dangers";
 
-  export let rollResults: { value: Danger; timestamp: string }[] = [];
+  export let rollResults: { danger: Danger; icon: string; timestamp: string }[] = [];
 
   function roll(event: Event) {
-    rollResults = [{ value: rollDanger(), timestamp: formatDate(new Date(), "P kk:mm:ss") }, ...rollResults];
+    let danger = rollDanger();
+    let icon =
+      danger.category == "unnatural entity"
+        ? "person-square"
+        : danger.category == "hazard"
+        ? "lightning-fill"
+        : danger.category == "creature"
+        ? "emoji-neutral"
+        : "";
+    rollResults = [{ danger, icon, timestamp: formatDate(new Date(), "P kk:mm:ss") }, ...rollResults];
   }
 </script>
 
@@ -16,7 +26,7 @@
 
   {#each rollResults as result}
     <h4>
-      {result.timestamp}: {result.value.category} ({result.value.subcategory}): {result.value.description}
+      {result.timestamp}: {result.danger.category} ({result.danger.subcategory}) <Icon name={result.icon} />: {result.danger.description}
     </h4>
   {/each}
 </main>