<template>
    <!-- <h1>ARANROIG.COM</h1>-->
    
    <Container>
    <img ref="redDragon" class="pixelated" id="red-dragon" src="/sprites/dragon/frame1.png" width="180">
      <p>Hi, I'm Aran!</p>
      <p>Welcome to my website! It is still under construction, so come back later!</p>
      <ul>
        <li>Hello</li>
      </ul>
    </Container>
</template>

<script setup>
import { ref, onMounted } from 'vue';

const redDragon = ref(null);

const path = "/sprites/dragon/";
const frames = [
  "frame1.png",
  "frame2.png",
  "frame3.png",
  "frame4.png",
  "frame5.png"
];

let current = 0;
const fps = 4; // 10 frames per second

onMounted(() => {
    setInterval(() => {
        current = (current + 1) % frames.length;
        redDragon.value.src = path + frames[current];
    }, 1000 / fps);
});
</script>

<style lang="scss" scoped>
#red-dragon {
    position: absolute;
    top: -105px;
    right: 20px;
}
</style>