script.js

// ---------------------------------------------------------------------
// IMPORTANT: REPLACE THIS URL
// This is the link you get from Google Sheets "Publish to the web"
// Make sure you publish as a .tsv (Tab-separated values)
// ---------------------------------------------------------------------
const googleSheetURL = 'YOUR_PUBLISHED_GOOGLE_SHEET_TSV_URL_GOES_HERE';


/**
 * Main function that runs when the page is loaded.
 */
document.addEventListener('DOMContentLoaded', () => {
    loadWishes();
});

/**
 * Fetches the wish data from the published Google Sheet.
 */
async function loadWishes() {
    const grid = document.getElementById('wishes-grid');
    
    try {
        const response = await fetch(googleSheetURL);
        if (!response.ok) {
            throw new Error('Network response was not ok');
        }
        
        const data = await response.text();
        const wishes = parseTSV(data);
        
        // Clear the "Loading..." message
        grid.innerHTML = ''; 
        
        // Display each wish
        wishes.forEach((wish, index) => {
            const card = createWishCard(wish.name, wish.message);
            // Stagger the animation
            card.style.animationDelay = `${index * 100}ms`; 
            grid.appendChild(card);
        });

        if (wishes.length === 0) {
            grid.innerHTML = '<div class="loading">No messages yet. Be the first!</div>';
        }
        
    } catch (error) {
        console.error('Error fetching or parsing wishes:', error);
        grid.innerHTML = '<div class="loading">Could not load messages. Please try again later.</div>';
    }
}

/**
 * Parses raw TSV (Tab-Separated Values) text into an array of objects.
 * Assumes:
 * - Row 0: Timestamp (we ignore)
 * - Row 1: Name
 * - Row 2: Wish/Message
 * @param {string} tsvData - The raw TSV data from the Google Sheet.
 * @returns {Array<object>} An array of {name, message} objects.
 */
function parseTSV(tsvData) {
    const wishes = [];
    const lines = tsvData.trim().split('\n');
    
    // Start from 1 to skip the header row
    for (let i = 1; i < lines.length; i++) {
        const columns = lines[i].split('\t');
        
        // Check if row is valid (Google Forms adds Timestamp, Name, Message)
        if (columns.length >= 3) {
            const name = columns[1].trim();
            const message = columns[2].trim();
            
            // Only add if both name and message are present
            if (name && message) {
                wishes.push({ name, message });
            }
        }
    }
    return wishes;
}

/**
 * Creates an HTML element for a single wish card.
 * @param {string} name - The name of the person.
 * @param {string} message - The wish from the person.
 * @returns {HTMLElement} A div element with the class 'wish-card'.
 */
function createWishCard(name, message) {
    const card = document.createElement('div');
    card.className = 'wish-card';
    
    const p = document.createElement('p');
    // Add quotes around the message
    p.textContent = `"${message}"`; 
    
    const span = document.createElement('span');
    span.textContent = `- ${name}`;
    
    card.appendChild(p);
    card.appendChild(span);
    
    return card;
}