Add a button to search for similar cards to each card face when you mouse over the faces. Append cards to the list use the /search endpoint and then remove duplicates

index.html

@@ -1002,18 +1002,20 @@
                 <div class="card-3d-container mb-4">
                     <div class="card-3d" id="card-3d">
                         <div class="card-face">
-                            <div id="card-image" class="w-full h-full bg-gray-900 flex items-center justify-center">
+                            <div id="card-image" class="w-full h-full bg-gray-900 flex items-center justify-center relative">
                                 <div class="text-center glass-card p-8">
                                     <i class="fas fa-cube text-5xl text-white/30 mb-4"></i>
                                     <p class="text-white/60">Initializing...</p>
                                 </div>
+                                <button id="find-similar-btn" class="absolute bottom-4 left-1/2 transform -translate-x-1/2 glass-button hidden" onclick="findSimilarForCurrentFace()">
+                                    <i class="fas fa-search mr-2"></i>Find Similar
+                                </button>
                             </div>
                             <div id="face-indicator" class="absolute top-4 right-4 price-tag hidden">Face 1/2</div>
                         </div>
                     </div>
                 </div>
-                
-                <!-- Controls -->
+<!-- Controls -->
                 <div class="flex gap-2 mb-4">
                     <button id="random-btn" class="glass-button">
                         <i class="fas fa-shuffle mr-2"></i>Random
@@ -1613,7 +1615,6 @@
             // Update gallery header back to "Similar Cards"
             $('gallery-header').textContent = 'Similar Cards';
         }
-        
         function displayCardFace(card, faceIndex) {
             const hasFaces = card.card_faces?.length > 1;
             const face = hasFaces ? card.card_faces[faceIndex] : card;
@@ -1621,10 +1622,21 @@
             
             // Update image
             if (imageUris?.large) {
-                $('card-image').innerHTML = `<img src="${imageUris.large}" alt="${face.name}" class="w-full h-full object-contain">`;
+                $('card-image').innerHTML = `
+                    <img src="${imageUris.large}" alt="${face.name}" class="w-full h-full object-contain">
+                    <button id="find-similar-btn" class="absolute bottom-4 left-1/2 transform -translate-x-1/2 glass-button opacity-0 transition-opacity duration-200" 
+                            onclick="findSimilarForCurrentFace()">
+                        <i class="fas fa-search mr-2"></i>Find Similar
+                    </button>
+                `;
+                
+                // Add hover effect to show the button
+                const img = $('card-image').querySelector('img');
+                const btn = $('card-image').querySelector('button');
+                img.addEventListener('mouseenter', () => btn.classList.remove('opacity-0'));
+                img.addEventListener('mouseleave', () => btn.classList.add('opacity-0'));
             }
-            
-            // Update face navigation
+// Update face navigation
             if (hasFaces) {
                 $('face-nav').classList.remove('hidden');
                 $('face-indicator').classList.remove('hidden');
@@ -1856,13 +1868,19 @@
             // Final cleaning
             return cardStr.replace(/, ,/g, ',');
         }
-        
-        async function fetchSimilarCards(card) {
+        async function fetchSimilarCards(card, faceIndex = null) {
             try {
-                // Build the query string using the same logic as Python
-                const query = buildCardQueryString(card);
+                let query;
+                if (faceIndex !== null && card.card_faces?.[faceIndex]) {
+                    // Build query for specific face
+                    query = buildCardQueryString(card.card_faces[faceIndex]);
+                } else {
+                    // Build query for whole card
+                    query = buildCardQueryString(card);
+                }
+                
                 currentGalleryQuery = query;
-                console.log('Query string:', query); // Debug logging
+                console.log('Query string:', query);
                 
                 // Build URL with gallery color filters
                 let url = `https://api.deck.doctor/v1/mtg/search?q=${encodeURIComponent(query)}&topk=12&price_threshold=0`;
@@ -1878,25 +1896,91 @@
                 if (data?.length > 0) {
                     // Filter out the current card more robustly
                     const filteredResults = data.filter(([c]) => {
-                        // Check multiple identifiers to ensure we exclude the current card
                         return c.id !== card.id && 
                                c.name !== card.name &&
                                (!c.scryfall_uri || c.scryfall_uri !== card.scryfall_uri);
-                    }).slice(0, 11); // Take at most 11 cards after filtering
+                    });
+                    
+                    // Get existing gallery cards
+                    const existingCards = Array.from($('gallery').querySelectorAll('.gallery-item'))
+                        .map(el => el.querySelector('h4')?.textContent)
+                        .filter(Boolean);
                     
-                    displayGallery(filteredResults);
-                    $('gallery-section').classList.remove('hidden');
+                    // Filter out duplicates
+                    const uniqueResults = filteredResults.filter(([c]) => 
+                        !existingCards.includes(c.name)
+                    ).slice(0, 11); // Limit to 11 new cards
                     
-                    // Update header if filters are active
-                    const colorFilterText = galleryColors.size > 0 ? ` (${Array.from(galleryColors).join('')})` : '';
-                    $('gallery-header').textContent = `Similar Cards${colorFilterText}`;
+                    if (uniqueResults.length > 0) {
+                        // Append new cards to gallery
+                        const currentGallery = $('gallery').innerHTML;
+                        const newCards = uniqueResults.map(([card, score]) => createGalleryCard(card, score)).join('');
+                        $('gallery').innerHTML = currentGallery + newCards;
+                        
+                        if ($('gallery-section').classList.contains('hidden')) {
+                            $('gallery-section').classList.remove('hidden');
+                        }
+                        
+                        // Update header if filters are active
+                        const colorFilterText = galleryColors.size > 0 ? ` (${Array.from(galleryColors).join('')})` : '';
+                        $('gallery-header').textContent = `Similar Cards${colorFilterText}`;
+                    }
                 }
             } catch (error) {
                 console.error('Gallery error:', error);
             }
         }
-        
-        function displayGallery(cards) {
+
+        function findSimilarForCurrentFace() {
+            if (!currentCard) return;
+            setLoading(true);
+            
+            // If card has multiple faces, search for current face
+            if (currentCard.card_faces?.length > 1) {
+                fetchSimilarCards(currentCard, currentFace);
+            } else {
+                fetchSimilarCards(currentCard);
+            }
+            
+            setLoading(false);
+        }
+
+        function createGalleryCard(card, score) {
+            return `
+                <div class="gallery-item">
+                    <img src="${card.image_uris?.normal || ''}" alt="${card.name}" class="w-full h-full object-cover">
+                    ${card.prices?.usd ? `<div class="absolute top-2 left-2 price-tag text-xs">${parseFloat(card.prices.usd).toFixed(2)}</div>` : ''}
+                    <div class="gallery-overlay">
+                        <div class="gallery-overlay-content">
+                            <h4 class="font-semibold text-white line-clamp-2 mb-2">${card.name}</h4>
+                            ${card.mana_cost ? `<div class="gallery-mana-cost mb-2">${formatManaCost(card.mana_cost)}</div>` : ''}
+                            <p class="text-xs text-white/60 line-clamp-2 mb-2">${card.type_line}</p>
+                            ${card.oracle_text ? `<p class="text-xs text-white/50 line-clamp-3 mb-3">${card.oracle_text}</p>` : ''}
+                            <p class="text-xs text-white/40 mb-3">${Math.round(score * 100)}% similar</p>
+                            
+                            <div class="gallery-actions">
+                                <button onclick="loadCard('${card.id}')" class="gallery-btn gallery-btn-view">
+                                    <i class="fas fa-eye"></i>
+                                    View Card
+                                </button>
+                                ${card.purchase_uris?.tcgplayer ? `
+                                    <a href="${card.purchase_uris.tcgplayer}" target="_blank" class="gallery-btn">
+                                        <i class="fas fa-shopping-cart"></i>
+                                        TCG
+                                    </a>
+                                ` : card.purchase_uris?.cardmarket ? `
+                                    <a href="${card.purchase_uris.cardmarket}" target="_blank" class="gallery-btn">
+                                        <i class="fas fa-shopping-cart"></i>
+                                        CM
+                                    </a>
+                                ` : ''}
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            `;
+        }
+function displayGallery(cards) {
             $('gallery').innerHTML = cards.map(([card, score]) => `
                 <div class="gallery-item">
                     <img src="${card.image_uris?.normal || ''}" alt="${card.name}" class="w-full h-full object-cover">