40 lines
1.0 KiB
Vue
40 lines
1.0 KiB
Vue
<script setup lang="ts">
|
|
import TOP_BAR_IMAGE from "/assets/images/contact/bottom-screen/top-bar.png";
|
|
import BOTTOM_BAR_IMAGE from "/assets/images/contact/bottom-screen/bottom-bar.png";
|
|
import BOTTOM_BAR_OK_IMAGE from "/assets/images/contact/bottom-screen/ok-button.png";
|
|
|
|
const props = defineProps<{
|
|
okLabel: "Copy" | "Open";
|
|
}>();
|
|
|
|
const store = useContactStore();
|
|
|
|
const [topBarImage, bottomBarImage, bottomBarOkImage] = useImages(
|
|
TOP_BAR_IMAGE,
|
|
BOTTOM_BAR_IMAGE,
|
|
BOTTOM_BAR_OK_IMAGE,
|
|
);
|
|
|
|
useRender((ctx) => {
|
|
ctx.globalAlpha = store.isIntro
|
|
? store.intro.stage3Opacity
|
|
: store.outro.stage2Opacity;
|
|
|
|
// top bar
|
|
ctx.drawImage(topBarImage!, 0, store.isIntro ? store.intro.topBarY : 0);
|
|
|
|
// bottom bar
|
|
ctx.translate(0, store.isIntro ? store.intro.bottomBarY : SCREEN_HEIGHT - 24);
|
|
ctx.drawImage(bottomBarImage!, 0, 0);
|
|
|
|
ctx.drawImage(bottomBarOkImage!, 144, 4);
|
|
ctx.font = "10px NDS10";
|
|
ctx.fillStyle = "#000000";
|
|
ctx.fillText(props.okLabel, 144 + 35, 4 + 13);
|
|
});
|
|
|
|
defineOptions({
|
|
render: () => null,
|
|
});
|
|
</script>
|