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/Home/TopScreen/Calendar.vue
View File

@@ -1,15 +1,18 @@
<script setup lang="ts">
import CALENDAR_IMAGE from "/assets/images/home/top-screen/calendar/calendar.png";
import LAST_ROW_IMAGE from "/assets/images/home/top-screen/calendar/last-row.png";
import DAY_SELECTOR_IMAGE from "/assets/images/home/top-screen/calendar/day-selector.png";
// NOTE: calendar background is handled by TopScreenBackground
const store = useHomeStore();
const lastRowImage = useTemplateRef("lastRowImage");
const daySelectorImage = useTemplateRef("daySelectorImage");
const calendarImage = useTemplateRef("calendarImage");
const [calendarImage, lastRowImage, daySelectorImage] = useImages(
CALENDAR_IMAGE,
LAST_ROW_IMAGE,
DAY_SELECTOR_IMAGE,
);
useRender((ctx) => {
if (!calendarImage.value || !lastRowImage.value || !daySelectorImage.value)
return;
ctx.fillStyle = "black";
ctx.font = "7px NDS7";
@@ -32,11 +35,11 @@ useRender((ctx) => {
: store.isOutro
? store.outro.stage1Opacity
: 1;
ctx.drawImage(calendarImage.value, CALENDAR_LEFT - 3, CALENDAR_TOP - 33);
ctx.drawImage(calendarImage!, CALENDAR_LEFT - 3, CALENDAR_TOP - 33);
const extraRow = CALENDAR_COLS * CALENDAR_ROWS - daysInMonth - firstDay < 0;
if (extraRow) {
ctx.drawImage(lastRowImage.value, CALENDAR_LEFT - 3, CALENDAR_TOP + 79);
ctx.drawImage(lastRowImage!, CALENDAR_LEFT - 3, CALENDAR_TOP + 79);
}
ctx.globalAlpha = store.isIntro
@@ -57,7 +60,7 @@ useRender((ctx) => {
const cellTop = CALENDAR_TOP + col * 16;
if (now.getDate() === day) {
ctx.drawImage(daySelectorImage.value, cellLeft, cellTop);
ctx.drawImage(daySelectorImage!, cellLeft, cellTop);
}
ctx.fillText(
@@ -82,22 +85,8 @@ useRender((ctx) => {
CALENDAR_TOP - 20,
);
});
</script>
<template>
<img
ref="calendarImage"
src="/assets/images/home/top-screen/calendar/calendar.png"
hidden
/>
<img
ref="lastRowImage"
src="/assets/images/home/top-screen/calendar/last-row.png"
hidden
/>
<img
ref="daySelectorImage"
src="/assets/images/home/top-screen/calendar/day-selector.png"
hidden
/>
</template>
defineOptions({
render: () => null,
});
</script>