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

26
app/components/Common/ButtonSelector.vue
View File

@@ -1,4 +1,6 @@
<script setup lang="ts">
import CORNER_IMAGE from "/assets/images/home/bottom-screen/buttons/corner.png";
const props = withDefaults(
defineProps<{
rect: [x: number, y: number, width: number, height: number];
@@ -9,15 +11,13 @@ const props = withDefaults(
},
);
const cornerImage = useTemplateRef("cornerImage");
const [cornerImage] = useImages(CORNER_IMAGE);
const ANIMATION_SPEED = 0.25;
let [currentX, currentY, currentWidth, currentHeight] = props.rect;
useRender((ctx) => {
if (!cornerImage.value) return;
const [targetX, targetY, targetWidth, targetHeight] = props.rect;
const dx = targetX - currentX;
const dy = targetY - currentY;
@@ -45,29 +45,25 @@ useRender((ctx) => {
ctx.globalAlpha = props.opacity;
ctx.drawImage(cornerImage.value, x, y);
ctx.drawImage(cornerImage!, x, y);
ctx.save();
ctx.scale(-1, 1);
ctx.drawImage(cornerImage.value, -(x + w), y);
ctx.drawImage(cornerImage!, -(x + w), y);
ctx.restore();
ctx.save();
ctx.scale(1, -1);
ctx.drawImage(cornerImage.value, x, -(y + h));
ctx.drawImage(cornerImage!, x, -(y + h));
ctx.restore();
ctx.save();
ctx.scale(-1, -1);
ctx.drawImage(cornerImage.value, -(x + w), -(y + h));
ctx.drawImage(cornerImage!, -(x + w), -(y + h));
ctx.restore();
});
</script>
<template>
<img
ref="cornerImage"
src="/assets/images/home/bottom-screen/buttons/corner.png"
hidden
/>
</template>
defineOptions({
render: () => null,
});
</script>

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>

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>

20
app/components/Contact/BottomScreen/Buttons.vue
View File

@@ -1,22 +1,18 @@
<script setup lang="ts">
import BUTTONS_IMAGE from "/assets/images/contact/bottom-screen/buttons.png";
const store = useContactStore();
const buttonsImage = useTemplateRef("buttonsImage");
const [buttonsImage] = useImages(BUTTONS_IMAGE);
useRender((ctx) => {
if (!buttonsImage.value) return;
ctx.globalAlpha = store.isIntro
? store.intro.stage3Opacity
: store.outro.stage1Opacity;
ctx.drawImage(buttonsImage.value, 31, 32);
ctx.drawImage(buttonsImage!, 31, 32);
});
defineOptions({
render: () => null,
});
</script>
<template>
<img
ref="buttonsImage"
src="/assets/images/contact/bottom-screen/buttons.png"
hidden
/>
</template>

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

@@ -1,30 +1,24 @@
<script setup lang="ts">
import HOME_BACKGROUND_IMAGE from "/assets/images/home/top-screen/background.png";
import CONTACT_BACKGROUND_IMAGE from "/assets/images/contact/top-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/top-screen/background.png"
hidden
/>
<img
ref="contactBackgroundImage"
src="/assets/images/contact/top-screen/background.png"
hidden
/>
</template>

32
app/components/Contact/TopScreen/LeftBar.vue
View File

@@ -1,33 +1,27 @@
<script setup lang="ts">
import BACKGROUND_IMAGE from "/assets/images/contact/top-screen/left-bar.png";
import THINGS_IMAGE from "/assets/images/contact/top-screen/left-bar-things.png";
const store = useContactStore();
const backgroundImage = useTemplateRef("backgroundImage");
const thingsImage = useTemplateRef("thingsImage");
const [backgroundImage, thingsImage] = useImages(
BACKGROUND_IMAGE,
THINGS_IMAGE,
);
useRender((ctx) => {
if (!backgroundImage.value || !thingsImage.value) return;
ctx.globalAlpha = store.isIntro
? store.intro.stage1Opacity
: store.outro.stage2Opacity;
ctx.drawImage(backgroundImage.value, 0, 0);
ctx.drawImage(backgroundImage!, 0, 0);
ctx.globalAlpha = store.isIntro
? store.intro.stage3Opacity
: store.outro.stage1Opacity;
ctx.drawImage(thingsImage.value, 0, 0);
ctx.drawImage(thingsImage!, 0, 0);
});
defineOptions({
render: () => null,
});
</script>
<template>
<img
ref="backgroundImage"
src="/assets/images/contact/top-screen/left-bar.png"
hidden
/>
<img
ref="thingsImage"
src="/assets/images/contact/top-screen/left-bar-things.png"
hidden
/>
</template>

32
app/components/Contact/TopScreen/Notifications.vue
View File

@@ -1,13 +1,16 @@
<script setup lang="ts">
import NOTIFICATION_IMAGE from "/assets/images/contact/bottom-screen/notification.png";
import TITLE_IMAGE from "/assets/images/contact/top-screen/title.png";
// text color:
const store = useContactStore();
const notificationImage = useTemplateRef("notificationImage");
const titleImage = useTemplateRef("titleImage");
const [notificationImage, titleImage] = useImages(
NOTIFICATION_IMAGE,
TITLE_IMAGE,
);
useRender((ctx) => {
if (!notificationImage.value || !titleImage.value) return;
ctx.globalAlpha = store.outro.stage2Opacity;
ctx.font = "10px NDS10";
@@ -17,7 +20,7 @@ useRender((ctx) => {
const y = 169 - 24 * index + store.notificationsYOffset;
if (y < -24) break;
ctx.drawImage(notificationImage.value, 21, y);
ctx.drawImage(notificationImage!, 21, y);
const content = store.notifications[i]!;
ctx.fillStyle = content.includes("opened") ? "#00fbba" : "#e3f300";
@@ -29,7 +32,7 @@ useRender((ctx) => {
? store.intro.stage1Opacity
: store.outro.stage2Opacity;
ctx.drawImage(
titleImage.value,
titleImage!,
21,
store.isIntro
? store.intro.titleY
@@ -70,17 +73,8 @@ useRender((ctx) => {
}
}
});
</script>
<template>
<img
ref="notificationImage"
src="/assets/images/contact/bottom-screen/notification.png"
hidden
/>
<img
ref="titleImage"
src="/assets/images/contact/top-screen/title.png"
hidden
/>
</template>
defineOptions({
render: () => null,
});
</script>

20
app/components/Home/BottomScreen/Background.vue
View File

@@ -1,21 +1,17 @@
<script setup lang="ts">
import BACKGROUND_IMAGE from "/assets/images/home/bottom-screen/background.png";
const store = useHomeStore();
const app = useAppStore();
const backgroundImage = useTemplateRef("backgroundImage");
const [backgroundImage] = useImages(BACKGROUND_IMAGE);
useRender((ctx) => {
if (!backgroundImage.value) return;
ctx.globalAlpha = app.booted ? 1 : store.intro.stage1Opacity;
ctx.drawImage(backgroundImage.value, 0, 0);
ctx.drawImage(backgroundImage!, 0, 0);
});
defineOptions({
render: () => null,
});
</script>
<template>
<img
ref="backgroundImage"
src="/assets/images/home/bottom-screen/background.png"
hidden
/>
</template>

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>

20
app/components/Home/TopScreen/Background.vue
View File

@@ -1,21 +1,17 @@
<script setup lang="ts">
import BACKGROUND_IMAGE from "/assets/images/home/top-screen/background.png";
const store = useHomeStore();
const app = useAppStore();
const backgroundImage = useTemplateRef("backgroundImage");
const [backgroundImage] = useImages(BACKGROUND_IMAGE);
useRender((ctx) => {
if (!backgroundImage.value) return;
ctx.globalAlpha = app.booted ? 1 : store.intro.stage1Opacity;
ctx.drawImage(backgroundImage.value, 0, 0);
ctx.drawImage(backgroundImage!, 0, 0);
});
defineOptions({
render: () => null,
});
</script>
<template>
<img
ref="backgroundImage"
src="/assets/images/home/top-screen/background.png"
hidden
/>
</template>

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>

16
app/components/Home/TopScreen/Clock.vue
View File

@@ -1,10 +1,12 @@
<script setup lang="ts">
import CLOCK_IMAGE from "/assets/images/home/top-screen/clock.png";
const CENTER_X = 63;
const CENTER_Y = 95;
const store = useHomeStore();
const clockImage = useTemplateRef("clockImage");
const [clockImage] = useImages(CLOCK_IMAGE);
function drawLine(
ctx: CanvasRenderingContext2D,
@@ -52,14 +54,12 @@ function drawLine(
}
useRender((ctx) => {
if (!clockImage.value) return;
ctx.globalAlpha = store.isIntro
? store.intro.stage1Opacity
: store.isOutro
? store.outro.stage1Opacity
: 1;
ctx.drawImage(clockImage.value, 13, 45);
ctx.drawImage(clockImage!, 13, 45);
ctx.globalAlpha = store.isIntro
? store.intro.stage1Opacity
@@ -93,8 +93,8 @@ useRender((ctx) => {
ctx.fillStyle = "#494949";
ctx.fillRect(CENTER_X - 2, CENTER_Y - 2, 5, 5);
});
</script>
<template>
<img ref="clockImage" src="/assets/images/home/top-screen/clock.png" hidden />
</template>
defineOptions({
render: () => null,
});
</script>

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>

18
app/components/Projects/BottomScreen/Background.vue
View File

@@ -1,17 +1,13 @@
<script setup lang="ts">
const backgroundImage = useTemplateRef("backgroundImage");
import BACKGROUND_IMAGE from "/assets/images/projects/bottom-screen/background.png";
const [backgroundImage] = useImages(BACKGROUND_IMAGE);
useRender((ctx) => {
if (!backgroundImage.value) return;
ctx.drawImage(backgroundImage!, 0, 0);
});
ctx.drawImage(backgroundImage.value, 0, 0);
defineOptions({
render: () => null,
});
</script>
<template>
<img
ref="backgroundImage"
src="/assets/images/projects/bottom-screen/background.png"
hidden
/>
</template>

4
app/components/Projects/BottomScreen/Projects.vue
View File

@@ -65,4 +65,8 @@ const handleKeyDown = (e: KeyboardEvent) => {
onMounted(() => window.addEventListener("keydown", handleKeyDown));
onUnmounted(() => window.removeEventListener("keydown", handleKeyDown));
defineOptions({
render: () => null,
});
</script>

8
app/components/Projects/TopScreen/TopScreen.vue
View File

@@ -1,3 +1,5 @@
<script setup lang="ts"></script>
<template></template>
<script setup lang="ts">
defineOptions({
render: () => null,
});
</script>