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

const topBarImage = useTemplateRef("topBarImage");
const bottomBarImage = useTemplateRef("bottomBarImage");

useRender((ctx) => {
  if (!topBarImage.value || !bottomBarImage.value) return;

  ctx.globalAlpha = store.isIntro ? store.intro.stage3Opacity : 1;

  ctx.drawImage(topBarImage.value, 0, store.isIntro ? store.intro.topBarY : 0);
  ctx.drawImage(
    bottomBarImage.value,
    0,
    store.isIntro ? store.intro.bottomBarY : SCREEN_HEIGHT - 24,
  );
});
</script>

<template>
  <img
    ref="topBarImage"
    src="/assets/images/contact/bottom-screen/top-bar.png"
    hidden
  />
  <img
    ref="bottomBarImage"
    src="/assets/images/contact/bottom-screen/bottom-bar.png"
    hidden
  />
</template>
