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

onMounted(() => {
  if (store.shouldAnimateOutro) {
    store.shouldAnimateOutro = false;
    store.animateOutro();
  } else {
    store.$reset();
    store.animateIntro();
  }
});

onRender((ctx) => {
  assets.images.home.topScreen.background.draw(ctx, 0, 0);

  ctx.fillStyle = "#000000";
  ctx.globalAlpha = store.isIntro
    ? store.intro.fadeOpacity
    : store.isOutro
      ? store.outro.fadeOpacity
      : 0;
  ctx.fillRect(0, 0, LOGICAL_WIDTH, LOGICAL_HEIGHT);
});
</script>

<template>
  <div />
</template>
