const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

const syllables = ["fro", "gan", "ar", "leg", "gim", "bil", "sam", "pip", "mer", "bor", "do", "dalf", "gorn", "olas", "li", "bo", "wise", "pin", "ry", "omir", "thor", "mor", "ven", "zel", "xan"];

const colors = {};
syllables.forEach(syllable => {
    const firstLetter = syllable.charAt(0).toLowerCase();
    const randomColor = '#' + Math.floor(Math.random() * 16777215).toString(16);
    colors[firstLetter] = randomColor;
});

const generateName = () => {
    const nameLength = Math.floor(Math.random() * 3) + 2;
    const nameSyllables = Array.from({ length: nameLength }, () => syllables[Math.floor(Math.random() * syllables.length)]);
    
    if (Math.random() < 0.5) {
        const vowels = ['a', 'e', 'i', 'o', 'u', 'y', 'ou', 'ey'];
        const randomVowel = vowels[Math.floor(Math.random() * vowels.length)];
        nameSyllables[nameLength - 1] += randomVowel;
    }
    
    const name = nameSyllables.join('').charAt(0).toUpperCase() + nameSyllables.join('').slice(1);
    return { name, nameSyllables };
};

const drawName = (nameSyllables) => {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    const shapeColorMap = {};
    nameSyllables.forEach((syllable, i) => {
        let color = shapeColorMap[syllable] || (shapeColorMap[syllable] = colors[syllable.charAt(0).toLowerCase()] || 'black');
        ctx.fillStyle = color;
        const sides = Math.floor(Math.random() * 6) + 3;
        const centerX = i * 70 + 50;
        const centerY = canvas.height / 2;
        const radius = 20;
        const angle = (Math.PI * 2) / sides;
        ctx.beginPath();
        ctx.moveTo(centerX + radius * Math.cos(0), centerY + radius * Math.sin(0));
        Array.from({ length: sides }, (_, j) => {
            const x = centerX + radius * Math.cos(angle * (j + 1));
            const y = centerY + radius * Math.sin(angle * (j + 1));
            ctx.lineTo(x, y);
        });
        ctx.closePath();
        ctx.fill();
    });
};

const updateName = () => {
    const { name, nameSyllables } = generateName();
    document.getElementById('name').textContent = name;
    drawName(nameSyllables);
};

document.getElementById('generate').addEventListener('click', updateName);

updateName();