// fuck claude

<style>
html, body {
	background: black;
}

</style>
<div id="frame">
	<img id="meow" style="position:absolute" src="/cat.png">	
</div>
<script>
document.addEventListener("click", tomato);

let Sblob = null;
fetch('/tom-fast.gif').then(res=>res.blob()).then(blob=>{Sblob=blob;})
  
function tomato() {
        const sound = new Audio('/tomato-squash.mp3');
        setTimeout(()=>sound.play().catch(err => console.log(":(")), 1000);
	const cat = document.getElementById("meow");
	const rect = cat.getBoundingClientRect();
        const randomX = Math.random() * (3/5) * rect.width;
        const randomY = Math.random() * (3/5) * rect.height;

        const posX = rect.left + randomX;
        const posY = rect.top + randomY;

        const container = document.getElementById("frame")
        const newImg = document.createElement("img")

	newImg.style = `position:absolute; z-index: 100; left: ${posX}px; top: ${posY}px;`
        newImg.src = URL.createObjectURL(Sblob);
        container.appendChild(newImg);
        setTimeout(()=>newImg.remove(), 2400);
}
</script>