add some more cool rollers

src/rollers/DetailsRoller.svelte

@@ -0,0 +1,102 @@
+<script lang="ts">
+  import * as _ from "lodash";
+  import { format as formatDate } from "date-fns";
+  import { Button, Icon } from "sveltestrap";
+  import {
+    rollAbility,
+    rollActivity,
+    rollAdjective,
+    rollAge,
+    rollAlignment,
+    rollAspect,
+    rollCondition,
+    rollDisposition,
+    rollElement,
+    rollFeature,
+    rollMagicType,
+    rollNumAppearing,
+    rollOddity,
+    rollOrientation,
+    rollRuination,
+    rollSize,
+    rollTag,
+    rollTerrain,
+    rollVisibility,
+  } from "./details";
+
+  let rollResults: { category: string; value: string; timestamp: string }[] = [];
+
+  function addResult(item: { roll: number; description: string }) {
+    rollResults = [
+      { category: item.constructor.name, 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>
+  </span>
+  <span class="btn">
+    <Button color="primary" on:click={() => addResult(rollActivity())}>Roll Activity</Button>
+  </span>
+  <span class="btn">
+    <Button color="primary" on:click={() => addResult(rollAdjective())}>Roll Adjective</Button>
+  </span>
+  <span class="btn">
+    <Button color="primary" on:click={() => addResult(rollAge())}>Roll Age</Button>
+  </span>
+  <span class="btn">
+    <Button color="primary" on:click={() => addResult(rollAlignment())}>Roll Alignment</Button>
+  </span>
+  <span class="btn">
+    <Button color="primary" on:click={() => addResult(rollAspect())}>Roll Aspect</Button>
+  </span>
+  <span class="btn">
+    <Button color="primary" on:click={() => addResult(rollCondition())}>Roll Condition</Button>
+  </span>
+  <span class="btn">
+    <Button color="primary" on:click={() => addResult(rollDisposition())}>Roll Disposition</Button>
+  </span>
+  <span class="btn">
+    <Button color="primary" on:click={() => addResult(rollElement())}>Roll Element</Button>
+  </span>
+  <span class="btn">
+    <Button color="primary" on:click={() => addResult(rollFeature())}>Roll Feature</Button>
+  </span>
+  <span class="btn">
+    <Button color="primary" on:click={() => addResult(rollMagicType())}>Roll MagicType</Button>
+  </span>
+  <span class="btn">
+    <Button color="primary" on:click={() => addResult(rollNumAppearing())}>Roll NumAppearing</Button>
+  </span>
+  <span class="btn">
+    <Button color="primary" on:click={() => addResult(rollOddity())}>Roll Oddity</Button>
+  </span>
+  <span class="btn">
+    <Button color="primary" on:click={() => addResult(rollOrientation())}>Roll Orientation</Button>
+  </span>
+  <span class="btn">
+    <Button color="primary" on:click={() => addResult(rollRuination())}>Roll Ruination</Button>
+  </span>
+  <span class="btn">
+    <Button color="primary" on:click={() => addResult(rollSize())}>Roll Size</Button>
+  </span>
+  <span class="btn">
+    <Button color="primary" on:click={() => addResult(rollTag())}>Roll Tag</Button>
+  </span>
+  <span class="btn">
+    <Button color="primary" on:click={() => addResult(rollTerrain())}>Roll Terrain</Button>
+  </span>
+  <span class="btn">
+    <Button color="primary" on:click={() => addResult(rollVisibility())}>Roll Visibility</Button>
+  </span>
+
+  {#each rollResults as result}
+    <h4>{result.timestamp}: ({result.category}): {result.value}</h4>
+  {/each}
+</main>
+
+<style>
+</style>