made a lot of things better

src/rollers/DetailsRoller.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-  import * as _ from "lodash";
   import { format as formatDate } from "date-fns";
   import { Button, Icon } from "sveltestrap";
   import {
@@ -26,72 +25,72 @@
 
   let rollResults: { type: string; value: string; timestamp: string }[] = [];
 
-  function addResult(item: { type: string; description: string; roll: number }) {
+  function roll(item: { type: string; description: string; roll: number }) {
     rollResults = [{ type: item.type, value: item.description, timestamp: formatDate(new Date(), "P kk:mm:ss") }, ...rollResults];
   }
 </script>
 
 <main>
   <span class="btn">
-    <Button color="primary" on:click={() => addResult(rollAbility())}>Roll Ability</Button>
+    <Button color="primary" on:click={() => roll(rollAbility())}>Roll Ability</Button>
   </span>
   <span class="btn">
-    <Button color="primary" on:click={() => addResult(rollActivity())}>Roll Activity</Button>
+    <Button color="primary" on:click={() => roll(rollActivity())}>Roll Activity</Button>
   </span>
   <span class="btn">
-    <Button color="primary" on:click={() => addResult(rollAdjective())}>Roll Adjective</Button>
+    <Button color="primary" on:click={() => roll(rollAdjective())}>Roll Adjective</Button>
   </span>
   <span class="btn">
-    <Button color="primary" on:click={() => addResult(rollAge())}>Roll Age</Button>
+    <Button color="primary" on:click={() => roll(rollAge())}>Roll Age</Button>
   </span>
   <span class="btn">
-    <Button color="primary" on:click={() => addResult(rollAlignment())}>Roll Alignment</Button>
+    <Button color="primary" on:click={() => roll(rollAlignment())}>Roll Alignment</Button>
   </span>
   <span class="btn">
-    <Button color="primary" on:click={() => addResult(rollAspect())}>Roll Aspect</Button>
+    <Button color="primary" on:click={() => roll(rollAspect())}>Roll Aspect</Button>
   </span>
   <span class="btn">
-    <Button color="primary" on:click={() => addResult(rollCondition())}>Roll Condition</Button>
+    <Button color="primary" on:click={() => roll(rollCondition())}>Roll Condition</Button>
   </span>
   <span class="btn">
-    <Button color="primary" on:click={() => addResult(rollDisposition())}>Roll Disposition</Button>
+    <Button color="primary" on:click={() => roll(rollDisposition())}>Roll Disposition</Button>
   </span>
   <span class="btn">
-    <Button color="primary" on:click={() => addResult(rollElement())}>Roll Element</Button>
+    <Button color="primary" on:click={() => roll(rollElement())}>Roll Element</Button>
   </span>
   <span class="btn">
-    <Button color="primary" on:click={() => addResult(rollFeature())}>Roll Feature</Button>
+    <Button color="primary" on:click={() => roll(rollFeature())}>Roll Feature</Button>
   </span>
   <span class="btn">
-    <Button color="primary" on:click={() => addResult(rollMagicType())}>Roll MagicType</Button>
+    <Button color="primary" on:click={() => roll(rollMagicType())}>Roll MagicType</Button>
   </span>
   <span class="btn">
-    <Button color="primary" on:click={() => addResult(rollNumAppearing())}>Roll NumAppearing</Button>
+    <Button color="primary" on:click={() => roll(rollNumAppearing())}>Roll NumAppearing</Button>
   </span>
   <span class="btn">
-    <Button color="primary" on:click={() => addResult(rollOddity())}>Roll Oddity</Button>
+    <Button color="primary" on:click={() => roll(rollOddity())}>Roll Oddity</Button>
   </span>
   <span class="btn">
-    <Button color="primary" on:click={() => addResult(rollOrientation())}>Roll Orientation</Button>
+    <Button color="primary" on:click={() => roll(rollOrientation())}>Roll Orientation</Button>
   </span>
   <span class="btn">
-    <Button color="primary" on:click={() => addResult(rollRuination())}>Roll Ruination</Button>
+    <Button color="primary" on:click={() => roll(rollRuination())}>Roll Ruination</Button>
   </span>
   <span class="btn">
-    <Button color="primary" on:click={() => addResult(rollSize())}>Roll Size</Button>
+    <Button color="primary" on:click={() => roll(rollSize())}>Roll Size</Button>
   </span>
   <span class="btn">
-    <Button color="primary" on:click={() => addResult(rollTag())}>Roll Tag</Button>
+    <Button color="primary" on:click={() => roll(rollTag())}>Roll Tag</Button>
   </span>
   <span class="btn">
-    <Button color="primary" on:click={() => addResult(rollTerrain())}>Roll Terrain</Button>
+    <Button color="primary" on:click={() => roll(rollTerrain())}>Roll Terrain</Button>
   </span>
   <span class="btn">
-    <Button color="primary" on:click={() => addResult(rollVisibility())}>Roll Visibility</Button>
+    <Button color="primary" on:click={() => roll(rollVisibility())}>Roll Visibility</Button>
   </span>
 
-  {#each rollResults as result}
-    <h4>{result.timestamp}: ({result.type}): {result.value}</h4>
+  {#each rollResults as { type, value, timestamp }}
+    <h4>{timestamp}: ({type}): {value}</h4>
   {/each}
 </main>