mtgcsv/app.js

import { randomWords } from './randomWords.js';

let cardList = [];

document.addEventListener('DOMContentLoaded', () => {
    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);
        });
    });
});

async function fetchCardSuggestions(query) {
    const response = await fetch(`https://api.scryfall.com/cards/autocomplete?q=${encodeURIComponent(query)}`);
    const data = await response.json();
    return data.data;
}

async function fetchCardDetails(cardName, setCode) {
    const response = await fetch(`https://api.scryfall.com/cards/named?exact=${encodeURIComponent(cardName)}&set=${encodeURIComponent(setCode)}`);
    const data = await response.json();
    return {
        mana_cost: data.mana_cost || 'N/A',
        power: data.power || 'N/A',
        toughness: data.toughness || 'N/A',
        type: data.type_line.split('—')[0].trim(), // Remove anything after em dash
        rarity: data.rarity || 'N/A'
    };
}

async function addCard() {
    const cardName = document.getElementById('card-name').value;
    const setCode = document.getElementById('set-code').value;
    const cardId = document.getElementById('card-id').value;
    const quantity = document.getElementById('quantity').value;
    const foil = document.getElementById('foil').value;

    const cardDetails = await fetchCardDetails(cardName, setCode);

    const cardData = {
        name: cardName,
        set: setCode,
        card_id: cardId,
        quantity: quantity,
        foil: foil,
        mana_type: cardDetails.mana_cost,
        power: cardDetails.power,
        toughness: cardDetails.toughness,
        type: cardDetails.type,
        rarity: cardDetails.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 in the dissolving popup
    showCardPopup(cardName, setCode);
}

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, setCode) {
    const cardPopup = document.getElementById('card-popup');
    const response = await fetch(`https://api.scryfall.com/cards/named?exact=${encodeURIComponent(cardName)}&set=${encodeURIComponent(setCode)}`);
    const data = await response.json();
    const imageUrl = data.image_uris ? data.image_uris.small : null;

    if (imageUrl) {
        cardPopup.innerHTML = `<img src="${imageUrl}" alt="${cardName}">`;
        cardPopup.style.display = 'block';
        cardPopup.style.opacity = 1;

        // Dissolve the popup after a few seconds
        setTimeout(() => {
            cardPopup.style.opacity = 0;
            setTimeout(() => {
                cardPopup.style.display = 'none';
            }, 500);
        }, 3000);
    }
}

function getRandomWordsFromFile() {
    let randomWordsSelected = [];
    for (let i = 0; i < 3; i++) {  // Get three random words
        const randomIndex = Math.floor(Math.random() * randomWords.length);
        randomWordsSelected.push(randomWords[randomIndex]);
    }
    return randomWordsSelected.join('_');
}

async function downloadCSV() {
    const csvContent = generateCSVContent();
    const randomFileName = getRandomWordsFromFile();

    // Create a blob with the CSV content
    const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
    const url = URL.createObjectURL(blob);

    // Create a temporary link element
    const link = document.createElement("a");
    link.setAttribute("href", url);
    link.setAttribute("download", `${randomFileName}.csv`);
    document.body.appendChild(link);

    // Trigger the download
    link.click();

    // Clean up and remove the link
    document.body.removeChild(link);
}