pihkaal/pihkaal-me
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: use useImages composable instead of <img> + useTemplateRef

Browse Source
This commit is contained in:
Stevan
2025-11-18 21:12:00 +01:00
parent acace6698c
commit ba6eb31b99
18 changed files with 187 additions and 278 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
app/components/Contact/BottomScreen/Bars.vue
View File

@@ -1,50 +1,39 @@
<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 = useTemplateRef("topBarImage");
const bottomBarImage = useTemplateRef("bottomBarImage");
const bottomBarOkImage = useTemplateRef("bottomBarOkImage");
const [topBarImage, bottomBarImage, bottomBarOkImage] = useImages(
TOP_BAR_IMAGE,
BOTTOM_BAR_IMAGE,
BOTTOM_BAR_OK_IMAGE,
);
useRender((ctx) => {
if (!topBarImage.value || !bottomBarImage.value || !bottomBarOkImage.value)
return;
ctx.globalAlpha = store.isIntro
? store.intro.stage3Opacity
: store.outro.stage2Opacity;
// top bar
ctx.drawImage(topBarImage.value, 0, store.isIntro ? store.intro.topBarY : 0);
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.value, 0, 0);
ctx.drawImage(bottomBarImage!, 0, 0);
ctx.drawImage(bottomBarOkImage.value, 144, 4);
ctx.drawImage(bottomBarOkImage!, 144, 4);
ctx.font = "10px NDS10";
ctx.fillStyle = "#000000";
ctx.fillText(props.okLabel, 144 + 35, 4 + 13);
});
</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
/>
<img
ref="bottomBarOkImage"
src="/assets/images/contact/bottom-screen/ok-button.png"
hidden
/>
</template>
defineOptions({
render: () => null,
});
</script>