feat: add advanced search for cards

fklingler · Feb 29, 2024 · 7105f0d · 7105f0d
1 parent a17e3e5
commit 7105f0d
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 10 deletions.
diff --git a/src/components/Index.vue b/src/components/Index.vue
@@ -11,6 +11,7 @@ const cardsListInput = ref(`
 Oko, Thief of Crowns
 Bolas's Citadel
 Realm-Cloaked Giant // Cast Off
+2x ? Soldier type:token o:haste
 `.trim());
 
 function onSubmit() {

diff --git a/src/components/Results.vue b/src/components/Results.vue
@@ -5,7 +5,7 @@ import { resultsConfig } from './results-config'
 import ResultsCard from './ResultsCard.vue'
 import ResultsConfig from './ResultsConfig.vue'
 
-type Cards = Array<{ name: string, count: number }>
+type Cards = Array<{ query: string, fuzzySearch: boolean, count: number }>
 
 const cards = ref<Cards>([])
 
@@ -26,14 +26,15 @@ function splitCardsInput(input: string): Cards {
     // Foreach line in input
     return input.match(/[^\r\n]+/g)?.map(line => {
         // Match count and name of card
-        const regex = /^((?<count>[\d]+)x?\s)?(?<name>.+)/gi
+        const regex = /^((?<count>[\d]+)x?\s)?(?<queryMarker>\?)?(?<query>.+)/gi
         const match = regex.exec(line.trim())
 
         if (!match?.groups) { return undefined }
 
         return {
             count: parseInt(match.groups.count ?? '1', 10),
-            name: match.groups.name
+            query: match.groups.query,
+            fuzzySearch: !match.groups.queryMarker
         }
     }).filter(match => !!match) as Cards
 }
@@ -48,7 +49,7 @@ function splitCardsInput(input: string): Cards {
         :class="[resultsConfig.displayReminderText ? '' : 'hide_reminder_text']"
         :contenteditable="resultsConfig.editableContent">
 
-        <ResultsCard v-for="card in cards" :name="card.name" :count="card.count"></ResultsCard>
+        <ResultsCard v-for="card in cards" :query="card.query" :fuzzySearch="card.fuzzySearch" :count="card.count"></ResultsCard>
     </div>
 </template>
 

diff --git a/src/components/ResultsCard.vue b/src/components/ResultsCard.vue
@@ -4,7 +4,8 @@ import { ScryfallCard, ScryfallError } from '../scryfall'
 import { cardTemplate } from './card-templates/index'
 
 const props = defineProps<{
-    name: string,
+    query: string,
+    fuzzySearch: boolean,
     count: number
 }>()
 
@@ -20,11 +21,21 @@ async function fetchCard(onCleanup: (cleanupFn: () => void) => void) {
 
     onCleanup(() => abortController.abort())
 
-    const response = await fetch(
-        `https://api.scryfall.com/cards/named?fuzzy=${encodeURIComponent(props.name)}`,
-        { signal: abortController.signal })
+    if (props.fuzzySearch) {
+        const response = await fetch(
+            `https://api.scryfall.com/cards/named?fuzzy=${encodeURIComponent(props.query)}`,
+            { signal: abortController.signal })
 
-    card.value = await response.json()
+        card.value = await response.json()
+    } else {
+        const response = await fetch(
+            `https://api.scryfall.com/cards/search?q=${encodeURIComponent(props.query)}`,
+            { signal: abortController.signal })
+
+        const responseJson = await response.json()
+        
+        card.value = responseJson.object == 'list' ? responseJson.data[0] : responseJson
+    }
 
     loading.value = false
 }
@@ -37,7 +48,7 @@ async function fetchCard(onCleanup: (cleanupFn: () => void) => void) {
         </div>
 
         <div v-else-if="!card || card.object == 'error'" class="card_frame dont_print">
-            <p class="card_not_found">Card "{{ name }}" not found.<br><br><i>This will not be printed.</i></p>
+            <p class="card_not_found">Card "{{ query }}" not found.<br><br><i>This will not be printed.</i></p>
         </div>
 
         <component v-else :is="cardTemplate(card)" :card="card" />