Update index.html

index.html

@@ -680,7 +680,7 @@
                 Deck Doctor
             </h1>
             <div class="flex justify-center gap-5 md:gap-8 text-xs md:text-sm flex-wrap">
-                <span class="text-white/40"><i class="fas fa-shield-alt mr-2"></i>Name Search</span>
+                <span class="text-white/40"><i class="fas fa-shield-alt mr-2"></i>Card Search</span>
                 <span class="text-white/40"><i class="fas fa-chart-line mr-2"></i>Deck Analysis</span>
                 <span class="text-white/40"><i class="fas fa-search mr-2"></i>Smart Discovery</span>
             </div>
@@ -688,13 +688,14 @@
             <!-- Search -->
             <div class="search-container">
                 <i class="fas fa-search search-icon"></i>
-                <input 
-                    type="text" 
+                <textarea 
                     id="search-input"
                     class="search-input" 
-                    placeholder="Search for cards or terms..." 
+                    placeholder="Search for cards, terms or paste a deck list..." 
                     autocomplete="off"
-                >
+                    rows="1"
+                    oninput="autoResize(this)"
+                ></textarea>
                 <button class="search-clear" id="search-clear" aria-label="Clear">
                     <i class="fas fa-times"></i>
                 </button>
@@ -870,12 +871,28 @@
             });
         }
         
+        // Auto-resize textarea
+        function autoResize(textarea) {
+            textarea.style.height = 'auto';
+            textarea.style.height = Math.min(textarea.scrollHeight, 200) + 'px';
+        }
+
         // Search Functions
         function handleSearch(e) {
             const query = e.target.value.trim();
             searchClear.classList.toggle('visible', query.length > 0);
             
             clearTimeout(searchTimeout);
+            
+            // Check if this looks like a decklist (multiple lines)
+            const lines = query.split('\n').filter(line => line.trim().length > 0);
+            
+            if (lines.length > 5) {
+                // This is likely a decklist - don't show autocomplete
+                hideAutocomplete();
+                return;
+            }
+            
             if (query.length < 2) {
                 hideAutocomplete();
                 return;
@@ -886,18 +903,30 @@
         
         function handleSearchKey(e) {
             const query = searchInput.value.trim();
+            const lines = query.split('\n').filter(line => line.trim().length > 0);
             
             if (e.key === 'Enter' && query.length > 0) {
-                e.preventDefault();
-                hideAutocomplete();
+                // Handle decklist if more than 5 lines
+                if (lines.length > 5) {
+                    e.preventDefault();
+                    hideAutocomplete();
+                    processDecklist(query);
+                    return;
+                }
                 
-                // Check if user selected from autocomplete or is typing a custom query
-                if (autocompleteResults.length > 0 && autocompleteResults.includes(query)) {
-                    // Exact match from autocomplete
-                    selectCard(query);
-                } else {
-                    // Custom search query - use Deck Doctor search
-                    performDeckDoctorSearch(query);
+                // Handle single card search
+                if (!e.shiftKey) { // Allow Shift+Enter for newlines in regular searches
+                    e.preventDefault();
+                    hideAutocomplete();
+                    
+                    // Check if user selected from autocomplete or is typing a custom query
+                    if (autocompleteResults.length > 0 && autocompleteResults.includes(query)) {
+                        // Exact match from autocomplete
+                        selectCard(query);
+                    } else {
+                        // Custom search query - use Deck Doctor search
+                        performDeckDoctorSearch(query);
+                    }
                 }
             }
         }
@@ -1000,6 +1029,57 @@
                 setLoading(false);
             }
         }
+
+        // Process decklist
+        async function processDecklist(decklistText) {
+            setLoading(true);
+            showToast('Processing decklist...', 'success');
+            
+            try {
+                // Parse decklist - extract card names (simple parsing)
+                const lines = decklistText.split('\n')
+                    .filter(line => line.trim().length > 0)
+                    .map(line => {
+                        // Remove quantity numbers and set codes if present
+                        return line.replace(/^\d+\s*/, '') // Remove leading numbers
+                                  .replace(/\s*\(.*?\)\s*$/, '') // Remove set codes in parentheses
+                                  .replace(/\s*\*.*?\*\s*$/, '') // Remove any *footnotes*
+                                  .trim();
+                    })
+                    .filter(name => name.length > 0);
+                
+                if (lines.length === 0) {
+                    showToast('No valid card names found in decklist', 'error');
+                    return;
+                }
+                
+                // Search for each card in the decklist
+                const deckCards = [];
+                for (const cardName of lines) {
+                    try {
+                        const response = await fetch(`https://api.scryfall.com/cards/named?exact=${encodeURIComponent(cardName)}`);
+                        if (response.ok) {
+                            const card = await response.json();
+                            deckCards.push([card, 1.0]); // Use 1.0 as similarity score for decklist items
+                        }
+                    } catch (error) {
+                        console.warn(`Could not find card: ${cardName}`);
+                    }
+                }
+                
+                if (deckCards.length > 0) {
+                    enterSearchMode(`Decklist (${deckCards.length} cards)`, deckCards);
+                    showToast(`Loaded ${deckCards.length} cards from decklist`, 'success');
+                } else {
+                    showToast('No valid cards found in decklist', 'error');
+                }
+            } catch (error) {
+                console.error('Decklist processing error:', error);
+                showToast('Failed to process decklist', 'error');
+            } finally {
+                setLoading(false);
+            }
+        }
         
         // Search Mode Management
         function enterSearchMode(query, results) {
@@ -1034,11 +1114,12 @@
             searchResultsContainer.innerHTML = results.map(([card, score]) => `
                 <div class="gallery-item" onclick="loadCardFromSearch('${card.id}')">
                     <img src="${card.image_uris?.normal || ''}" alt="${card.name}" class="w-full h-full object-cover">
-                    ${card.prices?.usd ? `<div class="absolute bottom-2 left-2 price-tag text-xs">$${parseFloat(card.prices.usd).toFixed(2)}</div>` : ''}
+                    ${card.prices?.usd ? `<div class="absolute bottom-2 left-2 price-tag text-xs">${parseFloat(card.prices.usd).toFixed(2)}</div>` : ''}
                     <div class="gallery-overlay">
                         <h4 class="font-semibold text-white line-clamp-2">${card.name}</h4>
                         <p class="text-xs text-white/60 mt-1">${card.type_line}</p>
-                        <p class="text-xs text-white/40 mt-1">${Math.round(score * 100)}% match</p>
+                        ${score < 1.0 ? `<p class="text-xs text-white/40 mt-1">${Math.round(score * 100)}% match</p>` : 
+                          score === 1.0 ? `<p class="text-xs text-white/40 mt-1">From decklist</p>` : ''}
                     </div>
                 </div>
             `).join('');