// Define setTheme globally to handle theme changes window.setTheme = function setTheme(theme) { document.body.className = ''; // Clear existing themes document.body.classList.add(theme); // Save the selected theme to localStorage localStorage.setItem('selectedTheme', theme); }; let cardList = []; let soundThreshold = 1.00; // Default sound threshold // Make toggleMenu globally accessible window.toggleMenu = function toggleMenu() { const menuContent = document.getElementById('menu-content'); menuContent.classList.toggle('show'); }; document.addEventListener('DOMContentLoaded', () => { const savedTheme = localStorage.getItem('selectedTheme'); if (savedTheme) { setTheme(savedTheme); } const savedThreshold = localStorage.getItem('soundThreshold'); if (savedThreshold) { soundThreshold = parseFloat(savedThreshold); document.getElementById('sound-threshold').value = savedThreshold; } document.getElementById('add-card-button').addEventListener('click', addCard); document.getElementById('download-csv-button').addEventListener('click', downloadCSV); document.getElementById('card-name').addEventListener('input', async function() { const query = this.value; const suggestions = await fetchCardSuggestions(query); const suggestionsDiv = document.getElementById('suggestions'); suggestionsDiv.innerHTML = ''; suggestions.forEach(suggestion => { const div = document.createElement('div'); div.textContent = suggestion; div.onclick = () => { document.getElementById('card-name').value = suggestion; suggestionsDiv.innerHTML = ''; }; suggestionsDiv.appendChild(div); }); }); // Update sound threshold based on user input document.getElementById('sound-threshold').addEventListener('input', (event) => { soundThreshold = parseFloat(event.target.value); localStorage.setItem('soundThreshold', soundThreshold); // Save the threshold to localStorage }); // Check and apply dark mode const isDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches; if (isDarkMode) { document.body.classList.add('dark-mode'); } }); async function fetchCardSuggestions(query) { try { const response = await fetch(`https://api.scryfall.com/cards/autocomplete?q=${encodeURIComponent(query)}`); if (!response.ok) { throw new Error('Network response was not ok'); } const data = await response.json(); return data.data; } catch (error) { console.error('Fetch error:', error); return []; } } document.getElementById('card-name').addEventListener('input', async function() { const query = this.value.trim(); if (query.length < 2) { // Only search for queries longer than 1 character document.getElementById('suggestions').innerHTML = ''; return; } const suggestions = await fetchCardSuggestions(query); const suggestionsDiv = document.getElementById('suggestions'); suggestionsDiv.innerHTML = ''; // Clear previous suggestions suggestions.forEach(suggestion => { const div = document.createElement('div'); div.textContent = suggestion; div.onclick = () => { document.getElementById('card-name').value = suggestion; suggestionsDiv.innerHTML = ''; // Clear suggestions after selection }; suggestionsDiv.appendChild(div); }); }); async function fetchCardDetails(cardName, setCode) { // Use the Scryfall 'named' endpoint to fetch the exact card by name and set code const response = await fetch(`https://api.scryfall.com/cards/named?exact=${encodeURIComponent(cardName)}&set=${encodeURIComponent(setCode)}`); const data = await response.json(); console.log('Fetched Data from Scryfall:', data); // Debugging: Log the fetched data // Return the relevant card details return { set: data.set.toUpperCase(), card_id: data.collector_number, mana_cost: data.mana_cost || 'N/A', power: data.power || 'N/A', toughness: data.toughness || 'N/A', type: data.type_line.split('—')[0].trim(), rarity: data.rarity || 'N/A', price: data.prices.usd || '0.00', imageUrl: data.image_uris ? data.image_uris.small : null, name: data.name }; } async function addCard() { const cardName = document.getElementById('card-name').value; const setCodeInput = document.getElementById('set-code'); const cardIdInput = document.getElementById('card-id'); // Fetch card details using the card name and set code let setCode = setCodeInput.value; let cardId = cardIdInput.value; // Always fetch card details const cardDetails = await fetchCardDetails(cardName, setCode); if (cardDetails) { // If set code or card ID is not filled, auto-fill them if (!setCode) { setCode = cardDetails.set; setCodeInput.value = setCode; } if (!cardId) { cardId = cardDetails.card_id; cardIdInput.value = cardId; } // Update card details with either user input or fetched data updateCardDetails({ name: cardName, set: setCode, card_id: cardId, mana_cost: cardDetails.mana_cost, power: cardDetails.power, toughness: cardDetails.toughness, type: cardDetails.type, rarity: cardDetails.rarity, price: cardDetails.price, imageUrl: cardDetails.imageUrl }); } else { alert("Card not found with the given name."); } } function updateCardDetails(printing) { document.getElementById('set-code').value = printing.set; document.getElementById('card-id').value = printing.card_id; const quantity = document.getElementById('quantity').value; const foil = document.getElementById('foil').value; const cardData = { name: document.getElementById('card-name').value, set: printing.set, card_id: printing.card_id, quantity: quantity, foil: foil, mana_type: printing.mana_cost, power: printing.power, toughness: printing.toughness, type: printing.type, rarity: printing.rarity }; cardList.push(cardData); // Update the textarea with the new card information let csvContent = generateCSVContent(); document.getElementById('csv-output').value = csvContent; // Show the card image, name, and price in the dissolving popup showCardPopup(cardData.name, printing.imageUrl, printing.price); } function generateCSVContent() { let csvContent = "Card Name,Set,Card ID,Quantity,Foil,Mana Type,Power,Toughness,Type,Rarity\n"; cardList.forEach(card => { const escapedValues = [ card.name, card.set, card.card_id, card.quantity, card.foil, card.mana_type, card.power, card.toughness, card.type, card.rarity ].map(value => `"${value.replace(/"/g, '""')}"`); // Escape any existing quotes by doubling them csvContent += escapedValues.join(",") + "\n"; }); return csvContent; } async function showCardPopup(cardName, imageUrl, price) { const cardPopup = document.getElementById('card-popup'); cardPopup.innerHTML = `