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

const backgroundImage = useTemplateRef("backgroundImage");
const thingsImage = useTemplateRef("thingsImage");

useRender((ctx) => {
  if (!backgroundImage.value || !thingsImage.value) return;

  ctx.globalAlpha = store.isIntro
    ? store.intro.stage1Opacity
    : store.outro.stage2Opacity;
  ctx.drawImage(backgroundImage.value, 0, 0);

  ctx.globalAlpha = store.isIntro
    ? store.intro.stage3Opacity
    : store.outro.stage1Opacity;
  ctx.drawImage(thingsImage.value, 0, 0);
});
</script>

<template>
  <img
    ref="backgroundImage"
    src="/assets/images/contact/top-screen/left-bar.png"
    hidden
  />
  <img
    ref="thingsImage"
    src="/assets/images/contact/top-screen/left-bar-things.png"
    hidden
  />
</template>
