Promote version eb0e9cf to main

Promoted commit eb0e9cfab91d246ed3cf565ff971378f1f9f3754 to main branch

index.html

@@ -1002,20 +1002,18 @@
                 <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 relative">
+                            <div id="card-image" class="w-full h-full bg-gray-900 flex items-center justify-center">
                                 <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
@@ -1615,6 +1613,7 @@
             // 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;
@@ -1622,21 +1621,10 @@
             
             // Update image
             if (imageUris?.large) {
-                $('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'));
+                $('card-image').innerHTML = `<img src="${imageUris.large}" alt="${face.name}" class="w-full h-full object-contain">`;
             }
-// Update face navigation
+            
+            // Update face navigation
             if (hasFaces) {
                 $('face-nav').classList.remove('hidden');
                 $('face-indicator').classList.remove('hidden');
@@ -1868,19 +1856,13 @@
             // Final cleaning
             return cardStr.replace(/, ,/g, ',');
         }
-        async function fetchSimilarCards(card, faceIndex = null) {
+        
+        async function fetchSimilarCards(card) {
             try {
-                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);
-                }
-                
+                // Build the query string using the same logic as Python
+                const query = buildCardQueryString(card);
                 currentGalleryQuery = query;
-                console.log('Query string:', query);
+                console.log('Query string:', query); // Debug logging
                 
                 // Build URL with gallery color filters
                 let url = `https://api.deck.doctor/v1/mtg/search?q=${encodeURIComponent(query)}&topk=12&price_threshold=0`;
@@ -1896,91 +1878,25 @@
                 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);
-                    });
-                    
-                    // Get existing gallery cards
-                    const existingCards = Array.from($('gallery').querySelectorAll('.gallery-item'))
-                        .map(el => el.querySelector('h4')?.textContent)
-                        .filter(Boolean);
+                    }).slice(0, 11); // Take at most 11 cards after filtering
                     
-                    // Filter out duplicates
-                    const uniqueResults = filteredResults.filter(([c]) => 
-                        !existingCards.includes(c.name)
-                    ).slice(0, 11); // Limit to 11 new cards
+                    displayGallery(filteredResults);
+                    $('gallery-section').classList.remove('hidden');
                     
-                    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}`;
-                    }
+                    // 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 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) {
+        
+        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">