const cutieMarks = { earth: ["🌱", "🍎", "🌸", "🌻", "🍂", "🌷", "🍀", "🌾", "🥕", "🌼"], pegasus: ["☁️", "🌈", "⚡", "🌪️", "🌤️", "🪽", "🌦️", "🌬️", "🌩️", "🪶"], unicorn: ["✨", "🔮", "🌟", "💫", "🌠", "⭐", "💎", "🦄", "🌙", "💖"], alicorn: ["👑", "🌞", "🌍", "🌌", "🏰", "🌠", "⚜️", "💫", "🔱", "♾️"] };

let currentType = 'earth'; let history = [];

function getRandomElement(array) { return array[Math.floor(Math.random() * array.length)]; }

function generatePonyName() { const gender = document.getElementById("genderSelect").value; const style = nameParts[gender];

// Generate name parts const prefix = getRandomElement(style.prefixes); const middle = getRandomElement(style.middles); const suffix = getRandomElement(style.suffixes);

// Combine name let name = prefix + middle + suffix;

// Get cutie mark const cutieMark = getRandomElement(cutieMarks[currentType]);

// Display the name document.getElementById("cutieMark").textContent = cutieMark; document.getElementById("ponyName").textContent = name;

// Add to history history.unshift({name, cutieMark}); updateHistory(); }

function setType(type) { currentType = type;

// Update active button styling document.querySelectorAll('.type-btn').forEach(btn => { btn.classList.remove('active'); }); event.target.classList.add('active');

// Generate a new name with this type generatePonyName(); }

function updateHistory() { const historyContainer = document.getElementById("historyPonies"); historyContainer.innerHTML = "";

// Display last 10 names const recentHistory = history.slice(0, 10); recentHistory.forEach(pony => { const ponyElement = document.createElement("div"); ponyElement.className = "history-pony"; ponyElement.innerHTML = `${pony.cutieMark}${pony.name}`; historyContainer.appendChild(ponyElement); }); }

// Generate first name on load window.onload = generatePonyName;