let fiftieth_keypress_or_clicks = false; // Flag to check if it's the first key press
let imageElement = null; // To store the image element
let num_keypressess_or_clicks = 0;
const target_key_pressess_or_clicks = 25;

const flagSong = new Audio('assets/graduation.flac'); // Replace with the actual path to your audio file

function change_color(){
    const random_color = `rgb(${Math.floor(Math.random()*256)},${Math.floor(Math.random()*256)},${Math.floor(Math.random()*256)})`;
    document.body.style.backgroundColor = random_color;
}

function display_keypress(key){
    const keypress_element = document.createElement('div');
    keypress_element.textContent = key;
    keypress_element.style.position = 'absolute';
    keypress_element.style.bottom = '0px';
    keypress_element.style.left=`${Math.floor(Math.random()*(window.innerWidth-50))}px`;
    keypress_element.style.fontSize = '24px';
    keypress_element.style.fontWeight = 'bold';
    keypress_element.style.color = 'black';
    keypress_element.style.opacity = 1;
    keypress_element.style.zIndex = 1000;

    // Add that little baby child to our document 🥵
    document.body.appendChild(keypress_element);

    const animation = keypress_element.animate([
        {bottom: '0px', opacity: 1},
        {bottom: `${window.innerHeight}px`, opacity: 0},
    ], {
        duration:2000,
        fill: 'forwards'
    });

    animation.onfinish = () => {
        keypress_element.remove();
    };
}

function create_or_resize_image() {

    if (fiftieth_keypress_or_clicks && !imageElement) {
        // On the first key press, create the image
        imageElement = document.createElement('img');
        imageElement.src = 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBwgHBgkIBwgKCgkLDRYPDQwMDRsUFRAWIB0iIiAdHx8kKDQsJCYxJx8fLT0tMTU3Ojo6Iys/RD84QzQ5OjcBCgoKDQwNGg8PGjclHyU3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3N//AABEIALwAyAMBIgACEQEDEQH/xAAcAAEAAQUBAQAAAAAAAAAAAAAABgMEBQcIAQL/xAA+EAABAwMDAQUGBAMFCQAAAAABAAIDBAURBhIhMQcTIkFRFDJhcYGRI0KhsRXB0TNSU2LwFiQlNUNUcpKi/8QAGQEBAAMBAQAAAAAAAAAAAAAAAAECBAMF/8QAIREBAAICAwEBAAMBAAAAAAAAAAECAxESITFRQQQyYSL/2gAMAwEAAhEDEQA/AN4oiICIiAiIgIvnOByeiwt61LRWmAy1EzA31c4AH5KNjOLwLVlV2uU/e4pGtc3PA2HJWas+v4K0h0rNoJ5A/KFHOFuMpznA/cqKam1nQ2cOYJslnvyBu4NPp81X1FfoqWjLopAW9z3xcP7vlj5rnPVF8mri1sj3Yc4veM9XHzVJv8TWqV3XtQrZJ3vgDxF8ZOv3b+yt6PtdrqeRu6HLfMhzs/qVraplc/bz1/RUmyCE8DxeqmtUzLqTR3aLbdQMbHI8Q1B/K5TbOei48sNc+KqDmEsl/KW8ZXQ/Ztqz+L0baadxMrDt+RVt96VmPifIi8VlXqIiAiIgIiICIiAiIgIiICIiCParu7bbROHeNa9wz4ui5w1rqaW9XAsjeXQxOO17x7+PP5fD0W0+02rimuclPVE+ywN7yZjeDLjowfNaOnlfU3CWcRhgz7jG8Aei5TO5daxqFVkzo2sexzwD1a4q/p77PTSNd3nhxjIKxLveyDhuMEZ6L5lp3NOWHc0FRrfqdplV6qlfapafe5zXMDGnPujdnChNXKXv55WQobVXVf4cULy1xy4hqkFN2f3CctMnGVXdaytwtKDl5K+XLY03ZfWsj3B/i9FGbppG6W8HvISWjq4LpXJVW2K/xhaA4q4znHKnmh9QGzahdIeI5AMt9CoAA+OYZBDgfNZFkxZVNlz+dL/4ikfkuwbdXwXGjjqqV++N44I8ldrn/QGtqm2VccD3g0xOHMPmPULfVPOypgZNC4OY8ZaR6KaW2paulZERXVEREBERAREQEREBERAREQab7VKGOm/ilfONznOY2ID49StJRTBpceAXHJzxyui+2W1y1mn2PgbnbIDJ9iueamnbDIG53OxktJXGdRLtXuFo7MjwGsJyeCp5o/SL6lrKitOGnkNPmsPpi2tq61neNG0eS2zSNaxoawYDRgBccmT8how44nuV5b7dS0sbWQwsz64WTga0dcK1gY5XbIXFuQuPrXpcSFhZwrCrpYpYyHAOB65V0N48Javt8Pg6BTpDS+vNNxUsvtEDMB3ooS9uHcnzyt+ahtza6mdG5gz6rVF603PSyEsadvyXXHef1wy4/wBhiLc6Yy5Li1o8x1XR/ZVVGfTXdvkL3RPwc+QwubqctimDMHfnGHHgLoTsdhLLJPJ5PeM9eoXav9mS/jYSIi7OIiIgIiICIiAiIgIiICIiC1uFHFX0UtNMPBIMHK5k1zZTZb/PT53NB974LqVaJ7aKUw3h1SG8PAwVzvHS9J7R3Q8RL3S+h5yprHc6KF4bLMMjrtCh+kmONikIOHOeRlV2WxlQ5zQ5+fmssxG26szFek0g1NbHSbGTjcsrT3iLna4EHotW1WnJaX8Rrnbfnyq1DWzUu1r3H5qJ061tM+tmTXMB24YWNr9U09G0967PwWDlrZTTCT8vqo/U/wC9S+N31JTcLSzrtbCd+IackKoy6RXB4iq4dm7occKzo7bQ08QJqYQ/Hu7gr2naO+aHRtcPIjojl3P619qGkbR3mWEDIcAQt8dkfOlQfIyk/oFp7XUP/HqUgcOjA/Vbq7MaQ0mkqXdkb3F30WjEx5vUvREXdwEREBERAREQEREBERAREQeLX/a5afbbRHVBoJh94/stgLEarp21FhrI3jI2ZVbeLV9aO0tA4W6WI9e8P7BV7lbrh4RFWCnZ5jGCfqr6wQiN87ev4hClEUDJYw17GkHyKwz69PHWNaaqFnvftf4lcXQB3nUnJCzVpslZIzbVFrjnwvZ6KeMtVBEd4p2Od6kKlVPZuDGnGOMBTNlq44h5JZ43WVsQxux1UGu1gndL/aujiAIPgPJWzIiXUTRt+qt4DEHhrwHNPUOVfFpq1daNL0sMpkqa8zbxgMYwk5+qm9ss8NLDhjXjjo9+VIW0lGx26ONrTnOQFSqQzJII+imZmURSIa+1bRmW80m0+6Bj7retjphSWijgAxsiAI+i1NXU4qb7RtHLRy/5crcVKQ6njcDnwhaMHbD/ACa67V0RFoZRERAREQEREBERAREQEREHixmoiP4RUD+83CyaxmoGbrc/nAByVFvE19ajgIhdI7GHEg8FZKC4jbjdyobHcC7WVwgD3d3IHd20njLf9FZGEuEvXCw2jT08d9pR7c54w0klWwqaSKPc+YGbPTK+aV0cBByDx5qN3m0tr6jvInnOc4CrHbtMp3DfKYUxY0tw4Kxkr6OcObHM0zg8AHlQWKiuEbhTgvweASFm7JY5KWtZUzMfgdSQrSiLMwLjIx2x+4OC+jWg9CqlQIKhxY3AePNWDoTHJjqFUmfi4jraWnum2V7e/kjHdx55PK2VpuoNRbY3HyA+i0hWSb9YMDBl8UcbHH0yHfzLVurSkbmW9zj0e/c0egWnFGmD+Rfl0ziIi0MoiIgIiICIiAiIgIiICIiDxRzWVxFLbnRDJe4dAMn7KSKMamt1PK8VElIJnjoeuFW3iYc53qslotRQ1skZZsfnYP7ueRn1wVNQ9rw2RuNrhkEeYWM15YXslbMaVsIdnwAYwM9T88q1s9S+KrbawO9AYXNc34Dn6LPeNtWK2knkinrYSaNze8b1B5CsTUXrc5gpoGgHpGRn/wCsLI2up7l42nOequK6gNT+IweL4LjHTbSY32xkNdd6chj7ZMXO9xxiBwfmqhq9QtcN/gB/LM8ZK9Ml0gxC0vLQcjwlZG3UU/ed7Vkk/FW3DtNqPKOnroyKisEYc4dGdF9S1DS4u6Y6q4uFTlpaBgDqFH6atZWXb2Fp8By2STyD/IfDz+yrEcpZb3isbUtIQSXW73Kp7txMsrWNGOQARg/Zo+63vbKb2Wjjid7wHKwultL0lnHtDWtM8jRnB4UlwttI0829uUiIiuqIiICIiAiIgIiICIiAiKnJKyJpdI9rW+pKCovg4wd3T4qKX7XlutgcyE9/IPTotW6k7QLpcAcT92wH3I+BhNCTdslxom07YonsfO7jDfLzWtuziT2vVUkkp3YhOAfTgLA3GvlrJC+ZziT0JOVluzRwi1Thx4kgc0fE8f0Kraq8TKYXCF9sr3xYJYDub8WrMW26QkckZ9CrzUNvNxomzQjFRAMt/wAw9FDgwHxNyD0+qxWjUt2K24Tf+IQ7PDtVOa4w7eCD8MKIxtlzjecK5bEGnLjkqvTruX3cq0kOOcAhUeyVjay7XhssXeeFzsYzk+StLo4uj2Ac+qy3ZBTug1DWvZna4saOfqf3CvintxzR/wAtmaf1bZ7hBHDFU7H42hsvB+6kjXBwy1wI9VzJdTJa77caWMlpgqnsaB6A4Czdg1/dbW4M750sfm13I/Vboh57oJFDdPdoNsuoDJnCCX4nhS2KZkrA+KRr2H8zTkIKqIiAiIgIiICIiAsPqW+xWKh7+QbnO4a1Zha+7XOLZDj4oI1X9qlwLiII424/yhRe8a2utxdiSpdt9GcKLynxuVFxz1VtC4qK2aYklzjnrkq1lO+PB54wviRzWcvztPn6L6BGcA5CsMcTgEEdOiyOmaoUOoaCcnwiUA/InH81SlhY7oefRWj43RPDmeXRUmNkS6OosF4a44BUX1TaX2ysEwb+FL6dN3+v5rL2Gr9qttNU+UkTXH5kK8vVZS11GLdICZHDh4/IfJZclemnDbjKDxdcqtgkYHVUHxVFNUPgnZsew9PVX8MOIt594rL23+sZWsJGB1Uk7OoHQEygcyVBA/QfyWOgoJKuoa1jCR5qVxRx6et0c0xaJIvExnUveTnHy+K6447cM09aa07U4nUevbh4cMlDJG/HLRn9VGXYdjHkpb2mPmr5KG5zcyGMMe7GM/64UOa4luWlb8c7hgtGlWOeSE72PLfgFJ7Fra6WtzRFUOx6OPH2USecnJXnO7+asq3hZO1JtTIyKup2gkjL2lbFo6llXTMniOWvGQuWLa8+0N56FdH6GJdpijJOTg/uqDPoiICIiAiIgLXva7/y6AfBy2Ete9r3FtgPX3v5KYGh5id7lSKqS++5UnH4KyB2COVSjYYy7nLD0HoqnvNBC8wpDK+CMjBX0QvCoG1+z+UyabgDjxFlhz5YPH6K7cJ4qr2pocNzstz5hYXs4ZNUWKrhYx+zvsOLRnGQFMRSGSiYZGZDTtBI81lv6708Wkjqa5t/H2xSt4ZLtzx6H4KzpaR8lY+F+A2MZkc3xYH0+n3WQ9gc17XR8/DzWQs34Ms0j4gCYwxxx1XLi7Vy8Y6fENbDb2Obb4AT/iTDkfRYO5+1V0bqicmT5+QWUqYWyv69OuPNXVPbpqiPdHtDDx4jjKvx+KTbfaMamtwrNDwyDl8Ly0n5j+oWq4D4Tnj4LoKqtBZYKuj3B24FzNo6Y5WgK2L2aumjdkYdx8l3xT+OV/r4e7b5ZXscjS3YR9V6Qqfu9Auqi9tx/HaPPK6U0MMaZo/kf3K5ooDtqWk9V0noCTvNLUh3ZxuGfqqyhI0RFAIiICIiAop2gWaW7Wtvc8uZ5KVrzCDmSs0xWQPdvjcMdeCse+1SjPh+i6N1jX0dBZZpKox7nNwwO6krnW56hY6pcWAAZ8lOx8U9mmcAA08njCv49KV8jctp5D8mlX2jtU08Nwi79rdocM5XQtBU09ZSsnpSx0bxkFqnkhzb/sdcf+3l/wDUrw6OuH+C/wCx/ounNo9E2j0CchqvsjtVXbYbjBUxODHlrxwevOf2CnbqEd6+Lu/wpW5x6OHmsztHomAuc13K/JHo7MI52vf44s/+JXzNbnOqjFAxzY88uJ6qR4C9TijcorNp1xqctlxF14HKyMVIYmNZG3a1vQZWYwvU4wnnLDvpJSMEcLTGrdEVou8skMEhid54+P8ARb+wCmApiNI305odpSub/wBFx+isauxz0v8AascCPgupcBaz7Yq6mpKKJpa3vXDnAGQrbGmO6MEmTnKmmnO0aexU7aUEOjac7XdFq6urO8ecE/dWPeO58R5SUOt9IayodSQ7Y3COoHVmevyUn5XHNgvtVaapk0EpaQfIrpHs51nFqWj7mYgVTBk4/MPVQJsiIgIi8QfL3hjC5xwAOpWvtWdqVvtD3wUYE0wHvE8Aql2q3yuoaR9PSyBjHdcDkrnO5zyyzkyPLiTk5QSjV2ua+/SO72Ylnk0dFDHvc45cSSvnPOV4grQzuiOWkg9VsXRfaRW2Mtic8vi82u6LWuUBI6IOprD2n2i4hrKk9xIfsptTVMNVCJaaRsjD0IK4up6iVhy15C3l2JXSsmldTSyl0RZnaUG5UXznkj4L6QEREBERAVpc6+G20UlXUuDYoxklXagva5I5mlXBpxl+CgwNx7Y6eJ72U9M3APDicrVGttWz3+qfNI7OegBUUqXuMziTnlW5cSg9JOcr5REHuecrYXZLdX0eoKbxHaXAEZWvFINISOju1O5hwQ4IOwgcgEeYXit6B7pKGne73ixpKIP/2Q==';
        imageElement.style.position = 'absolute';
        imageElement.style.left = '50%';
        imageElement.style.bottom = '100px'; // Start just above the bottom of the screen
        imageElement.style.transform = 'translateX(-50%)'; // Center the image
        imageElement.style.transition = 'transform 0.5s ease-in-out'; // Smooth transition for scaling
        document.body.appendChild(imageElement);
        fiftieth_keypress_or_clicks = false;
        flagSong.play();
    } else {
        // On subsequent key presses, increase the size of the image
        if (imageElement)
        {
            let currentScale = parseFloat(imageElement.style.transform.match(/scale\(([^)]+)\)/)?.[1] || 1);
            currentScale += 0.01; // Increase the size of the image
            imageElement.style.transform = `translateX(-50%) scale(${currentScale})`;
        }
    }
}

document.addEventListener('click', (e) => {
    change_color();
    console.log("Number of clicks or keypressses: %s", num_keypressess_or_clicks);
    num_keypressess_or_clicks++;
    if (num_keypressess_or_clicks === target_key_pressess_or_clicks)
    {
        fiftieth_keypress_or_clicks = true;
    }
    create_or_resize_image();
});

document.addEventListener('keypress', (e) => {
    num_keypressess_or_clicks++;
    if (num_keypressess_or_clicks === target_key_pressess_or_clicks)
    {
        fiftieth_keypress_or_clicks = true;
    }

    change_color();
    display_keypress(e.key);
    create_or_resize_image();
});