<script setup lang="ts">
import BACKGROUND_IMAGE from "/assets/images/home/bottom-screen/background.webp";
import TOP_BAR_IMAGE from "/assets/images/settings/bottom-screen/top-bar.webp";
import BOTTOM_BAR_IMAGE from "/assets/images/settings/bottom-screen/bottom-bar.webp";

const [backgroundImage, topBarImage, bottomBarImage] = useImages(
  BACKGROUND_IMAGE,
  TOP_BAR_IMAGE,
  BOTTOM_BAR_IMAGE,
);

useRender((ctx) => {
  ctx.drawImage(backgroundImage!, 0, 0);
  ctx.drawImage(topBarImage!, 0, 0);
  ctx.drawImage(bottomBarImage!, 0, 168);
});

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