<script lang="ts">
    var ratCounter = 0;
    let playSound = function() {
        new Audio(`common/rat/bolt${ratCounter}.wav`).play();
        ratCounter += 1;
        if (ratCounter == 3) {
            ratCounter = 0;
        }
    }
</script>

<footer>
    <div class="text-container">
        <p>〔 2023–2025 〕<i>denizk0461</i></p>
    </div>
    <input
        type="image"
        on:click={playSound} 
        title="the bottom rat" 
        alt="the bottom rat" 
        class="bottom-rat" 
        src="/common/rat/spookyrat.webp">
</footer>

<style>
    footer {
        background-color: var(--color-background-highlight);
        position: absolute;
        left: 0;
        bottom: 0;
        height: 120px;
        width: 100%;
        backdrop-filter: blur(6px);
    }

    footer p {
        font-family: var(--font-mono);
        font-weight: 500;
    }

    .bottom-rat {
        position: absolute;
        width: 20%;
        max-width: 100px;
        right: 0;
        bottom: 0;
    }

    .text-container {
        height: 100%;
        margin: auto 24px auto 48px;
        display: flex;
        align-items: center;
    }
</style>