<script setup lang="ts">
const store = useContactStore();

const homeBackgroundImage = useTemplateRef("homeBackgroundImage");
const contactBackgroundImage = useTemplateRef("contactBackgroundImage");

useRender((ctx) => {
  if (!homeBackgroundImage.value || !contactBackgroundImage.value) return;

  ctx.drawImage(contactBackgroundImage.value, 0, 0);

  if (store.isIntro) {
    ctx.drawImage(homeBackgroundImage.value, 0, 0);
    ctx.globalAlpha = store.intro.stage2Opacity;
  }

  ctx.drawImage(contactBackgroundImage.value, 0, 0);
});
</script>

<template>
  <img
    ref="homeBackgroundImage"
    src="/assets/images/home/top-screen/background.png"
    hidden
  />
  <img
    ref="contactBackgroundImage"
    src="/assets/images/contact/top-screen/background.png"
    hidden
  />
</template>
