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 6e510890ec
commit 694b64f0dd
18 changed files with 187 additions and 278 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
app/components/Contact/BottomScreen/Background.vue
View File

@@ -1,30 +1,24 @@
<script setup lang="ts">
import HOME_BACKGROUND_IMAGE from "/assets/images/home/bottom-screen/background.png";
import CONTACT_BACKGROUND_IMAGE from "/assets/images/contact/bottom-screen/background.png";
const store = useContactStore();
const homeBackgroundImage = useTemplateRef("homeBackgroundImage");
const contactBackgroundImage = useTemplateRef("contactBackgroundImage");
const [homeBackgroundImage, contactBackgroundImage] = useImages(
HOME_BACKGROUND_IMAGE,
CONTACT_BACKGROUND_IMAGE,
);
useRender((ctx) => {
if (!homeBackgroundImage.value || !contactBackgroundImage.value) return;
ctx.drawImage(homeBackgroundImage.value, 0, 0);
ctx.drawImage(homeBackgroundImage!, 0, 0);
ctx.globalAlpha = store.isIntro
? store.intro.stage2Opacity
: store.outro.stage3Opacity;
ctx.drawImage(contactBackgroundImage.value, 0, 0);
ctx.drawImage(contactBackgroundImage!, 0, 0);
});
defineOptions({
render: () => null,
});
</script>
<template>
<img
ref="homeBackgroundImage"
src="/assets/images/home/bottom-screen/background.png"
hidden
/>
<img
ref="contactBackgroundImage"
src="/assets/images/contact/bottom-screen/background.png"
hidden
/>
</template>