84 lines
2.0 KiB
Vue
84 lines
2.0 KiB
Vue
<script setup lang="ts">
|
|
const store = useHomeStore();
|
|
|
|
const statusBarImage = useTemplateRef("statusBarImage");
|
|
const gbaDisplayImage = useTemplateRef("gbaDisplayImage");
|
|
const startupModeImage = useTemplateRef("startupModeImage");
|
|
const batteryImage = useTemplateRef("batteryImage");
|
|
|
|
// TODO: don't call it here
|
|
callOnce("intro", () => store.animateIntro());
|
|
|
|
useRender((ctx) => {
|
|
if (
|
|
!statusBarImage.value ||
|
|
!gbaDisplayImage.value ||
|
|
!startupModeImage.value ||
|
|
!batteryImage.value
|
|
)
|
|
return;
|
|
|
|
const TEXT_Y = 11;
|
|
|
|
ctx.translate(0, store.intro.statusBarY);
|
|
|
|
ctx.globalAlpha = store.outro.stage2Opacity;
|
|
ctx.drawImage(statusBarImage.value, 0, 0);
|
|
|
|
ctx.fillStyle = "#ffffff";
|
|
ctx.font = "7px NDS7";
|
|
|
|
// username
|
|
ctx.fillText("pihkaal", 3, TEXT_Y);
|
|
|
|
// time + date
|
|
const fillNumberCell = (value: number, cellX: number, offset: number) => {
|
|
const text = value.toFixed().padStart(2, "0");
|
|
const { actualBoundingBoxRight: width } = ctx.measureText(text);
|
|
|
|
const x = cellX * 16;
|
|
ctx.fillText(text, Math.floor(x + offset + (16 - width) / 2), TEXT_Y);
|
|
};
|
|
|
|
const now = new Date();
|
|
|
|
fillNumberCell(now.getHours(), 9, 1);
|
|
if (Math.floor(now.getMilliseconds() / 500) % 2 == 0) {
|
|
ctx.fillText(":", 159, TEXT_Y);
|
|
}
|
|
fillNumberCell(now.getMinutes(), 10, -1);
|
|
|
|
fillNumberCell(now.getDate(), 11, 1);
|
|
ctx.fillText("/", 190, TEXT_Y);
|
|
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);
|
|
});
|
|
</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>
|