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

59
app/components/Home/TopScreen/StatusBar.vue
View File

@@ -1,26 +1,26 @@
<script setup lang="ts">
import STATUS_BAR_IMAGE from "/assets/images/home/top-screen/status-bar/status-bar.png";
import GBA_DISPLAY_IMAGE from "/assets/images/home/top-screen/status-bar/gba-display.png";
import STARTUP_MODE_IMAGE from "/assets/images/home/top-screen/status-bar/startup-mode.png";
import BATTERY_IMAGE from "/assets/images/home/top-screen/status-bar/battery.png";
const store = useHomeStore();
const statusBarImage = useTemplateRef("statusBarImage");
const gbaDisplayImage = useTemplateRef("gbaDisplayImage");
const startupModeImage = useTemplateRef("startupModeImage");
const batteryImage = useTemplateRef("batteryImage");
const [statusBarImage, gbaDisplayImage, startupModeImage, batteryImage] =
useImages(
STATUS_BAR_IMAGE,
GBA_DISPLAY_IMAGE,
STARTUP_MODE_IMAGE,
BATTERY_IMAGE,
);
useRender((ctx) => {
if (
!statusBarImage.value ||
!gbaDisplayImage.value ||
!startupModeImage.value ||
!batteryImage.value
)
return;
const TEXT_Y = 11;
ctx.translate(0, store.isIntro ? store.intro.statusBarY : 0);
ctx.globalAlpha = store.isOutro ? store.outro.stage2Opacity : 1;
ctx.drawImage(statusBarImage.value, 0, 0);
ctx.drawImage(statusBarImage!, 0, 0);
ctx.fillStyle = "#ffffff";
ctx.font = "7px NDS7";
@@ -50,31 +50,12 @@ useRender((ctx) => {
fillNumberCell(now.getMonth() + 1, 12, -1);
// icons
ctx.drawImage(gbaDisplayImage.value, 210, 2);
ctx.drawImage(startupModeImage.value, 226, 2);
ctx.drawImage(batteryImage.value, 242, 4);
ctx.drawImage(gbaDisplayImage!, 210, 2);
ctx.drawImage(startupModeImage!, 226, 2);
ctx.drawImage(batteryImage!, 242, 4);
});
defineOptions({
render: () => null,
});
</script>
<template>
<img
ref="statusBarImage"
src="/assets/images/home/top-screen/status-bar/status-bar.png"
hidden
/>
<img
ref="gbaDisplayImage"
src="/assets/images/home/top-screen/status-bar/gba-display.png"
hidden
/>
<img
ref="startupModeImage"
src="/assets/images/home/top-screen/status-bar/startup-mode.png"
hidden
/>
<img
ref="batteryImage"
src="/assets/images/home/top-screen/status-bar/battery.png"
hidden
/>
</template>