Card tag translation

src/locales/en.json

@@ -1046,6 +1046,8 @@
     "loadingLinkError": "Error generating link 😥",
     "shareDeck": "Share Deck \"{name}\"",
     "removeCompare": "Remove Compare",
-    "shareNotComplete": "Please complete the deck with 3 characters and 30 action cards to share!"
+    "shareNotComplete": "Please complete the deck with 3 characters and 30 action cards to share!",
+    "characterCard": "Character Card",
+    "actionCard": "Action Card"
   }
 }

src/routes/tcg/_card.svelte

@@ -6,6 +6,7 @@
   import DetailModal from './_detailModal.svelte';
   import { t } from 'svelte-i18n';
 
+  export let tags;
   export let card;
   export let compare;
   export let count = 0;
@@ -266,10 +267,10 @@
         style="top: {y}px; left: {x}px;"
         bind:this={detailContainer}
       >
-        <Detail {card} {smallScreen} />
+        <Detail {tags} {card} {smallScreen} />
         {#if showCompare}
           <div class="w-2" />
-          <Detail card={compare} {smallScreen} />
+          <Detail {tags} card={compare} {smallScreen} />
         {/if}
       </div>
     {/if}

src/routes/tcg/_deck.svelte

@@ -1,6 +1,6 @@
 <script>
-  import { mdiContentSave, mdiDownload, mdiPencil, mdiShareVariant } from '@mdi/js';
-  import { createEventDispatcher, getContext, onMount } from 'svelte';
+  import { mdiContentSave, mdiPencil, mdiShareVariant } from '@mdi/js';
+  import { createEventDispatcher, getContext } from 'svelte';
   import { t } from 'svelte-i18n';
   import { slide } from 'svelte/transition';
   import Button from '../../components/Button.svelte';

src/routes/tcg/_detail.svelte

@@ -1,8 +1,5 @@
-<script context="module">
-  import tagsJson from '../../data/tcg/tags/en.json';
-</script>
-
 <script>
+  export let tags;
   export let card;
   export let smallScreen = false;
   export let withBackground = true;
@@ -28,8 +25,6 @@
     },
   };
 
-  let tags = tagsJson;
-
   $: size = sizes[smallScreen ? 'small' : 'base'];
 </script>
 

src/routes/tcg/_tcg.svelte

@@ -341,6 +341,7 @@
       {sharedDeck}
       {sharedId}
       {swapCharacterCardPos}
+      {tags}
       on:toggleDeck={toggleShowDeck}
       on:save={() => saveData()}
       on:saveShared={saveSharedDeck}
@@ -349,10 +350,10 @@
   <div class="flex gap-2 justify-center md:justify-start">
     <div class="flex">
       <button on:click={() => changeDisplay('character')} class="pill {display === 'character' ? 'active' : ''}">
-        Character Card
+        {$t('tcg.characterCard')}
       </button>
       <button on:click={() => changeDisplay('action')} class="pill {display === 'action' ? 'active' : ''}">
-        Action Card
+        {$t('tcg.actionCard')}
       </button>
     </div>
     <div class="flex">
@@ -385,6 +386,7 @@
           {size}
           {showDetail}
           {smallScreen}
+          {tags}
           count={deck.characters[card.id]}
           on:compare={() => setCompare(card)}
           on:addToDeck={() => addToDeck('characters', card)}
@@ -401,6 +403,7 @@
           {size}
           {showDetail}
           {smallScreen}
+          {tags}
           count={deck.actions[card.id]}
           on:compare={() => setCompare(card)}
           on:addToDeck={() => addToDeck('actions', card)}