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

20
app/components/Home/BottomScreen/Buttons/ContactButton.vue
View File

@@ -1,24 +1,20 @@
<script setup lang="ts">
import BUTTON_IMAGE from "/assets/images/home/bottom-screen/buttons/contact.png";
const props = defineProps<{
x: number;
y: number;
opacity: number;
}>();
const buttonImage = useTemplateRef("buttonImage");
const [buttonImage] = useImages(BUTTON_IMAGE);
useRender((ctx) => {
if (!buttonImage.value) return;
ctx.globalAlpha = props.opacity;
ctx.drawImage(buttonImage.value, props.x, props.y);
ctx.drawImage(buttonImage!, props.x, props.y);
});
defineOptions({
render: () => null,
});
</script>
<template>
<img
ref="buttonImage"
src="/assets/images/home/bottom-screen/buttons/contact.png"
hidden
/>
</template>

20
app/components/Home/BottomScreen/Buttons/DownloadPlayButton.vue
View File

@@ -1,24 +1,20 @@
<script setup lang="ts">
import BUTTON_IMAGE from "/assets/images/home/bottom-screen/buttons/downloadPlay.png";
const props = defineProps<{
x: number;
y: number;
opacity: number;
}>();
const buttonImage = useTemplateRef("buttonImage");
const [buttonImage] = useImages(BUTTON_IMAGE);
useRender((ctx) => {
if (!buttonImage.value) return;
ctx.globalAlpha = props.opacity;
ctx.drawImage(buttonImage.value, props.x, props.y);
ctx.drawImage(buttonImage!, props.x, props.y);
});
defineOptions({
render: () => null,
});
</script>
<template>
<img
ref="buttonImage"
src="/assets/images/home/bottom-screen/buttons/downloadPlay.png"
hidden
/>
</template>

20
app/components/Home/BottomScreen/Buttons/GameButton.vue
View File

@@ -1,24 +1,20 @@
<script setup lang="ts">
import BUTTON_IMAGE from "/assets/images/home/bottom-screen/buttons/game.png";
const props = defineProps<{
x: number;
y: number;
opacity: number;
}>();
const buttonImage = useTemplateRef("buttonImage");
const [buttonImage] = useImages(BUTTON_IMAGE);
useRender((ctx) => {
if (!buttonImage.value) return;
ctx.globalAlpha = props.opacity;
ctx.drawImage(buttonImage.value, props.x, props.y);
ctx.drawImage(buttonImage!, props.x, props.y);
});
defineOptions({
render: () => null,
});
</script>
<template>
<img
ref="buttonImage"
src="/assets/images/home/bottom-screen/buttons/game.png"
hidden
/>
</template>