<script setup lang="ts">
const { onRender } = useScreen();
const { assets } = useAssets();
const store = useIntroStore();

const frames = Object.keys(assets.images.intro.logoAnimated).sort();

onMounted(() => {
  store.$reset();
  store.animateIntro();
});

onRender((ctx) => {
  ctx.fillStyle = "#fbfbfb";
  ctx.fillRect(0, 0, LOGICAL_WIDTH, LOGICAL_HEIGHT);

  ctx.globalAlpha = store.isIntro
    ? store.intro.textOpacity
    : store.isOutro
      ? store.outro.textOpacity
      : 1;

  const frameIndex = Math.floor(store.intro.logoFrameIndex);
  const frameKey = frames[
    frameIndex
  ] as keyof typeof assets.images.intro.logoAnimated;
  const frame = assets.images.intro.logoAnimated[frameKey];

  frame.draw(ctx, 0, 0);

  ctx.globalAlpha = store.isOutro ? store.outro.backgroundOpacity : 0;
  assets.images.home.topScreen.background.draw(ctx, 0, 0);
});
</script>

<template>
  <div />
</template>
