Spaces:

pearsonkyle
/

mtg-card-explorer

Running

App Files Files Community

pearsonkyle commited on Aug 30

Commit

fcb47dc

verified ·

1 Parent(s): 2def885

Update index.html

Browse files

Files changed (1) hide show

index.html +200 -17

index.html CHANGED Viewed

@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>MTG Deck Doctor - Card Explorer</title>
     <meta name="description" content="Advanced MTG card database with similarity search and market prices">
     <script src="https://cdn.tailwindcss.com"></script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
@@ -47,8 +47,8 @@
             position: fixed;
             inset: 0;
             background: rgba(0, 0, 0, 0.7);
-            backdrop-filter: blur(10px);
-            -webkit-backdrop-filter: blur(10px);
             z-index: 0;
         }
@@ -234,6 +234,17 @@
             font-size: 14px;
         }
         /* Headers */
         .header-text {
             font-family: 'Space Grotesk', sans-serif;
@@ -255,6 +266,38 @@
             font-size: clamp(0.75rem, 2vw, 0.875rem);
         }
         /* Optimized buttons */
         .glass-button {
             background: var(--glass-bg);
@@ -632,7 +675,6 @@
     <div class="container mx-auto py-4 md:py-8 px-4">
         <!-- Header -->
         <header class="text-center mb-8 md:mb-12">
-            <p class="subheader-text mb-2">Advanced Card Database</p>
             <h1 class="header-text mb-6">Deck Doctor</h1>
             <!-- Search -->
@@ -642,7 +684,7 @@
                     type="text"
                     id="search-input"
                     class="search-input"
-                    placeholder="Search for cards..."
                     autocomplete="off"
                 >
                 <button class="search-clear" id="search-clear" aria-label="Clear">
@@ -652,7 +694,8 @@
             </div>
         </header>
-        <div class="responsive-grid max-w-7xl mx-auto">
             <!-- Card Display -->
             <div class="flex flex-col items-center">
                 <div class="card-3d-container mb-4">
@@ -692,7 +735,7 @@
             </div>
             <!-- Info Panel -->
-            <div class="space-y-4">
                 <div class="glass-card p-4 md:p-5">
                     <h2 id="card-name" class="text-2xl font-semibold text-white mb-1">No Card Selected</h2>
                     <div id="card-type" class="text-white/60 mb-4"></div>
@@ -728,12 +771,24 @@
             </div>
         </div>
-        <!-- Gallery -->
         <div id="gallery-section" class="mt-12 hidden">
-            <h2 class="text-2xl font-bold text-center text-white mb-6">Similar Cards</h2>
             <div id="gallery" class="gallery-grid max-w-7xl mx-auto"></div>
         </div>
         <!-- Loading -->
         <div id="loading" class="fixed inset-0 bg-black/60 backdrop-blur-sm flex items-center justify-center hidden z-50">
             <div class="glass-card p-6 text-center">
@@ -750,6 +805,8 @@
         let isLoading = false;
         let searchTimeout = null;
         let autocompleteResults = [];
         // DOM Elements
         const $ = id => document.getElementById(id);
@@ -760,6 +817,10 @@
         const detailsBtn = $('details-btn');
         const loading = $('loading');
         const toast = $('toast');
         // Initialize
         document.addEventListener('DOMContentLoaded', () => {
@@ -772,7 +833,10 @@
             searchInput.addEventListener('input', handleSearch);
             searchInput.addEventListener('keydown', handleSearchKey);
             searchClear.addEventListener('click', clearSearch);
-            randomBtn.addEventListener('click', () => fetchRandomCard());
             detailsBtn.addEventListener('click', showDetails);
             // Close autocomplete on outside click
@@ -791,6 +855,7 @@
                 if (e.key === 'Escape') {
                     closeModal();
                     searchInput.blur();
                 }
             });
         }
@@ -810,8 +875,20 @@
         }
         function handleSearchKey(e) {
-            if (e.key === 'Enter' && autocompleteResults.length > 0) {
-                selectCard(autocompleteResults[0]);
             }
         }
@@ -819,6 +896,10 @@
             searchInput.value = '';
             searchClear.classList.remove('visible');
             hideAutocomplete();
         }
         async function fetchAutocomplete(query) {
@@ -827,21 +908,31 @@
                 const response = await fetch(`https://api.scryfall.com/cards/autocomplete?q=${encodeURIComponent(query)}`);
                 const data = await response.json();
                 autocompleteResults = data.data || [];
-                displayAutocomplete(autocompleteResults);
             } catch (error) {
                 console.error('Autocomplete error:', error);
                 hideAutocomplete();
             }
         }
-        function displayAutocomplete(results) {
             if (!results.length) {
-                autocomplete.innerHTML = '<div class="autocomplete-empty">No cards found</div>';
             } else {
-                autocomplete.innerHTML = results.map(name =>
                     `<div class="autocomplete-item" onclick="selectCard('${name.replace(/'/g, "\\'")}')">${name}</div>`
                 ).join('');
             }
             showAutocomplete();
         }
@@ -863,6 +954,7 @@
             searchInput.value = name;
             searchClear.classList.add('visible');
             setLoading(true);
             try {
                 const response = await fetch(`https://api.scryfall.com/cards/named?exact=${encodeURIComponent(name)}`);
@@ -876,6 +968,94 @@
             }
         }
         // Card Functions
         async function fetchRandomCard() {
             if (isLoading) return;
@@ -910,6 +1090,9 @@
             // Fetch similar cards
             fetchSimilarCards(card);
         }
         function displayCardFace(card, faceIndex) {
@@ -1163,7 +1346,7 @@
             isLoading = state;
             loading.classList.toggle('hidden', !state);
             randomBtn.disabled = state;
-            detailsBtn.disabled = state;
         }
         function showToast(message, type = 'info') {

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Deck Doctor</title>
     <meta name="description" content="Advanced MTG card database with similarity search and market prices">
     <script src="https://cdn.tailwindcss.com"></script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
             position: fixed;
             inset: 0;
             background: rgba(0, 0, 0, 0.7);
+            backdrop-filter: blur(20px);
+            -webkit-backdrop-filter: blur(20px);
             z-index: 0;
         }
             font-size: 14px;
         }
+        .autocomplete-hint {
+            padding: 12px 16px;
+            background: rgba(102, 126, 234, 0.1);
+            border-top: 1px solid rgba(255, 255, 255, 0.1);
+            color: var(--text-secondary);
+            font-size: 13px;
+            display: flex;
+            align-items: center;
+            gap: 8px;
+        }
         /* Headers */
         .header-text {
             font-family: 'Space Grotesk', sans-serif;
             font-size: clamp(0.75rem, 2vw, 0.875rem);
         }
+        /* Search Results Header */
+        .search-results-header {
+            background: var(--glass-bg-dark);
+            backdrop-filter: blur(20px);
+            border: 1px solid var(--glass-border);
+            border-radius: 12px;
+            padding: 16px 20px;
+            margin-bottom: 24px;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+        }
+        .search-results-title {
+            font-size: 1.25rem;
+            font-weight: 600;
+            color: white;
+            display: flex;
+            align-items: center;
+            gap: 12px;
+        }
+        .search-query {
+            color: rgba(102, 126, 234, 1);
+            font-weight: 400;
+        }
+        .results-count {
+            color: var(--text-muted);
+            font-size: 0.875rem;
+        }
         /* Optimized buttons */
         .glass-button {
             background: var(--glass-bg);
     <div class="container mx-auto py-4 md:py-8 px-4">
         <!-- Header -->
         <header class="text-center mb-8 md:mb-12">
             <h1 class="header-text mb-6">Deck Doctor</h1>
             <!-- Search -->
                     type="text"
                     id="search-input"
                     class="search-input"
+                    placeholder="Search for cards or terms..."
                     autocomplete="off"
                 >
                 <button class="search-clear" id="search-clear" aria-label="Clear">
             </div>
         </header>
+        <!-- Main Card Display -->
+        <div id="main-card-section" class="responsive-grid max-w-7xl mx-auto">
             <!-- Card Display -->
             <div class="flex flex-col items-center">
                 <div class="card-3d-container mb-4">
             </div>
             <!-- Info Panel -->
+            <div id="info-panel" class="space-y-4">
                 <div class="glass-card p-4 md:p-5">
                     <h2 id="card-name" class="text-2xl font-semibold text-white mb-1">No Card Selected</h2>
                     <div id="card-type" class="text-white/60 mb-4"></div>
             </div>
         </div>
+        <!-- Gallery Section -->
         <div id="gallery-section" class="mt-12 hidden">
+            <h2 id="gallery-header" class="text-2xl font-bold text-center text-white mb-6">Similar Cards</h2>
             <div id="gallery" class="gallery-grid max-w-7xl mx-auto"></div>
         </div>
+        <!-- Search Results Section (Initially Hidden) -->
+        <div id="search-results-section" class="hidden">
+            <div class="search-results-header max-w-7xl mx-auto">
+                <div class="search-results-title">
+                    <i class="fas fa-search"></i>
+                    <span>Search: <span class="search-query" id="search-query-text"></span></span>
+                </div>
+                <div class="results-count" id="results-count"></div>
+            </div>
+            <div id="search-results" class="gallery-grid max-w-7xl mx-auto"></div>
+        </div>
         <!-- Loading -->
         <div id="loading" class="fixed inset-0 bg-black/60 backdrop-blur-sm flex items-center justify-center hidden z-50">
             <div class="glass-card p-6 text-center">
         let isLoading = false;
         let searchTimeout = null;
         let autocompleteResults = [];
+        let isSearchMode = false;
+        let lastSearchQuery = '';
         // DOM Elements
         const $ = id => document.getElementById(id);
         const detailsBtn = $('details-btn');
         const loading = $('loading');
         const toast = $('toast');
+        const mainCardSection = $('main-card-section');
+        const infoPanel = $('info-panel');
+        const gallerySection = $('gallery-section');
+        const searchResultsSection = $('search-results-section');
         // Initialize
         document.addEventListener('DOMContentLoaded', () => {
             searchInput.addEventListener('input', handleSearch);
             searchInput.addEventListener('keydown', handleSearchKey);
             searchClear.addEventListener('click', clearSearch);
+            randomBtn.addEventListener('click', () => {
+                exitSearchMode();
+                fetchRandomCard();
+            });
             detailsBtn.addEventListener('click', showDetails);
             // Close autocomplete on outside click
                 if (e.key === 'Escape') {
                     closeModal();
                     searchInput.blur();
+                    hideAutocomplete();
                 }
             });
         }
         }
         function handleSearchKey(e) {
+            const query = searchInput.value.trim();
+            if (e.key === 'Enter' && query.length > 0) {
+                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);
+                }
             }
         }
             searchInput.value = '';
             searchClear.classList.remove('visible');
             hideAutocomplete();
+            if (isSearchMode) {
+                exitSearchMode();
+                fetchRandomCard();
+            }
         }
         async function fetchAutocomplete(query) {
                 const response = await fetch(`https://api.scryfall.com/cards/autocomplete?q=${encodeURIComponent(query)}`);
                 const data = await response.json();
                 autocompleteResults = data.data || [];
+                displayAutocomplete(autocompleteResults, query);
             } catch (error) {
                 console.error('Autocomplete error:', error);
                 hideAutocomplete();
             }
         }
+        function displayAutocomplete(results, query) {
+            let html = '';
             if (!results.length) {
+                html = '';
             } else {
+                html = results.map(name =>
                     `<div class="autocomplete-item" onclick="selectCard('${name.replace(/'/g, "\\'")}')">${name}</div>`
                 ).join('');
             }
+            // Add hint for custom search
+            html += `<div class="autocomplete-hint">
+                <i class="fas fa-lightbulb"></i>
+                <span>Press Enter to search cards for "${query}".</span>
+            </div>`;
+            autocomplete.innerHTML = html;
             showAutocomplete();
         }
             searchInput.value = name;
             searchClear.classList.add('visible');
             setLoading(true);
+            exitSearchMode();
             try {
                 const response = await fetch(`https://api.scryfall.com/cards/named?exact=${encodeURIComponent(name)}`);
             }
         }
+        // Deck Doctor Search
+        async function performDeckDoctorSearch(query) {
+            setLoading(true);
+            lastSearchQuery = query;
+            try {
+                const response = await fetch(`https://api.deck.doctor/v1/mtg/search?q=${encodeURIComponent(query)}&topk=20`);
+                const data = await response.json();
+                if (data && data.length > 0) {
+                    enterSearchMode(query, data);
+                    showToast(`Found ${data.length} cards`, 'success');
+                } else {
+                    showToast('No cards found', 'error');
+                }
+            } catch (error) {
+                console.error('Search error:', error);
+                showToast('Search failed', 'error');
+            } finally {
+                setLoading(false);
+            }
+        }
+        // Search Mode Management
+        function enterSearchMode(query, results) {
+            isSearchMode = true;
+            // Hide main card display
+            mainCardSection.classList.add('hidden');
+            gallerySection.classList.add('hidden');
+            // Show search results
+            searchResultsSection.classList.remove('hidden');
+            $('search-query-text').textContent = query;
+            $('results-count').textContent = `${results.length} results`;
+            // Display results
+            displaySearchResults(results);
+        }
+        function exitSearchMode() {
+            isSearchMode = false;
+            // Show main card display
+            mainCardSection.classList.remove('hidden');
+            // Hide search results
+            searchResultsSection.classList.add('hidden');
+        }
+        function displaySearchResults(results) {
+            const searchResultsContainer = $('search-results');
+            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>` : ''}
+                    <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>
+                    </div>
+                </div>
+            `).join('');
+        }
+        async function loadCardFromSearch(id) {
+            setLoading(true);
+            try {
+                const response = await fetch(`https://api.scryfall.com/cards/${id}`);
+                const card = await response.json();
+                // Exit search mode and display the card
+                exitSearchMode();
+                displayCard(card);
+                // Clear search input
+                searchInput.value = '';
+                searchClear.classList.remove('visible');
+                window.scrollTo({ top: 0, behavior: 'smooth' });
+            } catch (error) {
+                showToast('Failed to load card', 'error');
+            } finally {
+                setLoading(false);
+            }
+        }
         // Card Functions
         async function fetchRandomCard() {
             if (isLoading) return;
             // Fetch similar cards
             fetchSimilarCards(card);
+            // Update gallery header back to "Similar Cards"
+            $('gallery-header').textContent = 'Similar Cards';
         }
         function displayCardFace(card, faceIndex) {
             isLoading = state;
             loading.classList.toggle('hidden', !state);
             randomBtn.disabled = state;
+            detailsBtn.disabled = state || !currentCard;
         }
         function showToast(message, type = 'info') {