made a lot of things better

src/rollers/CreatureRoller.svelte

@@ -1,26 +1,67 @@
 <script lang="ts">
-  import * as _ from "lodash";
+  import { capitalize } from "lodash";
   import { format as formatDate } from "date-fns";
+  import { Button, Card, CardHeader, CardTitle, CardBody, CardSubtitle, CardText, CardFooter, Container, Row } from "sveltestrap";
   import { Creature, rollCreature } from "./creatures";
 
-  export let rollResults: { value: Creature; timestamp: string }[] = [];
+  export let rollResults: { creature: Creature; timestamp: string }[] = [];
 
   function roll(event: Event) {
-    let value = rollCreature();
-    console.log("creature", value);
-
-    rollResults = [{ value, timestamp: formatDate(new Date(), "P kk:mm:ss") }, ...rollResults];
+    let creature = rollCreature();
+    rollResults = [{ creature, timestamp: formatDate(new Date(), "P kk:mm:ss") }, ...rollResults];
   }
 </script>
 
 <main>
-  <h2>Random Creatures</h2>
-  <button type="button" class="btn btn-primary" on:click={roll}>Roll Creature</button>
+  <Button color="primary" on:click={roll}>Roll Creature</Button>
 
-  {#each rollResults as result}
-    <h4>{result.timestamp}: {result.value.description}</h4>
+  {#each rollResults as { creature, timestamp }}
+    <Card class="mb-3">
+      <CardHeader>
+        <CardTitle>
+          {capitalize(creature.type)}
+          {#if creature.subtype !== ""}({creature.subtype}) {/if}: {capitalize(creature.description)}
+        </CardTitle>
+      </CardHeader>
+      <CardBody>
+        <CardText>
+          <Container>
+            <Row>
+              <strong>Details:</strong>
+              <ul>
+                {#if creature.ability}<li>Ability: {creature.ability.description}</li>{/if}
+                {#if creature.activity}<li>Activity: {creature.activity.description}</li>{/if}
+                {#if creature.adjective}<li>Adjective: {creature.adjective.description}</li>{/if}
+                {#if creature.age}<li>Age: {creature.age.description}</li>{/if}
+                {#if creature.alignment}<li>Alignment: {creature.alignment.description}</li>{/if}
+                {#if creature.aspect}<li>Aspect: {creature.aspect.description}</li>{/if}
+                {#if creature.condition}<li>Condition: {creature.condition.description}</li>{/if}
+                {#if creature.disposition}<li>Disposition: {creature.disposition.description}</li>{/if}
+                {#if creature.feature}<li>Feature: {creature.feature.description}</li>{/if}
+                {#if creature.npc}<li>NPC Name: {creature.npc.name}</li>{/if}
+                {#if creature.numAppearing}<li>Number Appearing: {creature.numAppearing.description}</li>{/if}
+                {#if creature.size}<li>Size: {creature.size.description}</li>{/if}
+                {#if creature.tags.length > 0}<li>
+                    Tags: {#each creature.tags as tag} {tag.description}, {/each}
+                  </li>{/if}
+              </ul>
+            </Row>
+          </Container>
+        </CardText>
+      </CardBody>
+      <CardFooter>{timestamp}</CardFooter>
+    </Card>
   {/each}
 </main>
 
 <style>
+  main {
+    text-align: left;
+  }
+  .card-subtitle {
+    padding-bottom: 1em;
+  }
+  ul {
+    margin-left: 2em;
+  }
 </style>