Add action icons & rarity

src/Card.svelte

@@ -1,6 +1,16 @@
 <script lang="ts">
   import DOMPurify from 'dompurify';
   export let name:string, type, tags = [], attributes:string, description:string;
+
+  function pf_filter(text) {
+    // Actions
+    text = text.replace(/\(A\)/gi, '<img class="activity" src="/imgs/one.webp" alt="One action">')
+      .replace(/\(AA\)/gi, '<img class="activity" src="/imgs/two.webp" alt="Two actions">')
+      .replace(/\(AAA\)/gi, '<img class="activity" src="/imgs/three.webp" alt="Three action">')
+      .replace(/\(R\)/gi, '<img class="activity" src="/imgs/reaction.webp" alt="Reaction">')
+      .replace(/\(F\)/gi, '<img class="activity" src="/imgs/free.webp" alt="Free action">');
+    return text;
+  }
 </script>
 
 <style>
@@ -39,6 +49,15 @@
     padding: 0.5pt 1pt;
     border: 1pt solid #d9c484;
   }
+  .uncommon {
+    background-color: #98513d;
+  }
+  .rare {
+    background-color: #002664;
+  }
+  .unique {
+    background-color: #54166e;
+  }
   .content {
     margin: 1pt;
   }
@@ -50,6 +69,9 @@
     border-top: 1pt solid black;
     text-align: justify;
   }
+  :global(img.activity) {
+    max-height: 8pt;
+  }
 </style>
 
 
@@ -60,15 +82,23 @@
   </section>
   <section class="tags">
     {#each tags as tag}
-      <div class="tag">{tag}</div>
+      {#if tag.toLowerCase() == "uncommon" }
+	<div class="tag uncommon">{tag}</div>
+      {:else if tag.toLowerCase() == "rare" }
+	<div class="tag rare">{tag}</div>
+      {:else if tag.toLowerCase() == "unique" }
+	<div class="tag unique">{tag}</div>
+      {:else}
+	<div class="tag">{tag}</div>
+      {/if}
     {/each}
   </section>
   <section class="content">
     <p class="attributes">
-      {@html DOMPurify.sanitize(attributes)}
+      {@html pf_filter(DOMPurify.sanitize(attributes))}
     </p>
     <p class="description">
-      {@html DOMPurify.sanitize(description)}
+      {@html pf_filter(DOMPurify.sanitize(description))}
     </p>
   </section>
 </div>