<script setup lang="ts">
import BACKGROUND_IMAGE from "/assets/images/contact/top-screen/left-bar.webp";
import THINGS_IMAGE from "/assets/images/contact/top-screen/left-bar-things.webp";

const store = useContactStore();

const [backgroundImage, thingsImage] = useImages(
  BACKGROUND_IMAGE,
  THINGS_IMAGE,
);

useRender((ctx) => {
  ctx.globalAlpha = store.isIntro
    ? store.intro.stage1Opacity
    : store.outro.stage2Opacity;
  ctx.drawImage(backgroundImage!, 0, 0);

  ctx.globalAlpha = store.isIntro
    ? store.intro.stage3Opacity
    : store.outro.stage1Opacity;
  ctx.drawImage(thingsImage!, 0, 0);
});

defineOptions({
  render: () => null,
});
</script>
