pihkaal/pihkaal-me
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(assets): new assets loading system (currently only for images)

Browse Source
This commit is contained in:
Stevan
2025-12-17 12:28:48 +01:00
parent 05398d5252
commit b85899617b
106 changed files with 359 additions and 366 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,14 +1,12 @@
<script setup lang="ts">
import BACKGROUND_IMAGE from "/assets/images/home/bottom-screen/background.webp";
const store = useHomeStore();
const app = useAppStore();
const [backgroundImage] = useImages(BACKGROUND_IMAGE);
const { assets } = useAssets();
useRender((ctx) => {
ctx.globalAlpha = app.booted ? 1 : store.intro.stage1Opacity;
ctx.drawImage(backgroundImage!, 0, 0);
ctx.drawImage(assets.home.bottomScreen.background, 0, 0);
});
defineOptions({

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

@@ -1,17 +1,15 @@
<script setup lang="ts">
import BUTTON_IMAGE from "/assets/images/home/bottom-screen/buttons/contact.webp";
const props = defineProps<{
x: number;
y: number;
opacity: number;
}>();
const [buttonImage] = useImages(BUTTON_IMAGE);
const { assets } = useAssets();
useRender((ctx) => {
ctx.globalAlpha = props.opacity;
ctx.drawImage(buttonImage!, props.x, props.y);
ctx.drawImage(assets.home.bottomScreen.buttons.contact, props.x, props.y);
});
defineOptions({

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

@@ -1,17 +1,19 @@
<script setup lang="ts">
import BUTTON_IMAGE from "/assets/images/home/bottom-screen/buttons/downloadPlay.webp";
const props = defineProps<{
x: number;
y: number;
opacity: number;
}>();
const [buttonImage] = useImages(BUTTON_IMAGE);
const { assets } = useAssets();
useRender((ctx) => {
ctx.globalAlpha = props.opacity;
ctx.drawImage(buttonImage!, props.x, props.y);
ctx.drawImage(
assets.home.bottomScreen.buttons.downloadPlay,
props.x,
props.y,
);
});
defineOptions({

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

@@ -1,17 +1,15 @@
<script setup lang="ts">
import BUTTON_IMAGE from "/assets/images/home/bottom-screen/buttons/game.webp";
const props = defineProps<{
x: number;
y: number;
opacity: number;
}>();
const [buttonImage] = useImages(BUTTON_IMAGE);
const { assets } = useAssets();
useRender((ctx) => {
ctx.globalAlpha = props.opacity;
ctx.drawImage(buttonImage!, props.x, props.y);
ctx.drawImage(assets.home.bottomScreen.buttons.game, props.x, props.y);
});
defineOptions({

6
app/components/Home/BottomScreen/Buttons/SettingsButton.vue
View File

@@ -1,17 +1,15 @@
<script setup lang="ts">
import BUTTON_IMAGE from "/assets/images/home/bottom-screen/buttons/settings.webp";
const props = defineProps<{
x: number;
y: number;
opacity: number;
}>();
const [buttonImage] = useImages(BUTTON_IMAGE);
const { assets } = useAssets();
useRender((ctx) => {
ctx.globalAlpha = props.opacity;
ctx.drawImage(buttonImage!, props.x, props.y);
ctx.drawImage(assets.home.bottomScreen.buttons.settings, props.x, props.y);
});
defineOptions({

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

@@ -1,14 +1,12 @@
<script setup lang="ts">
import BACKGROUND_IMAGE from "/assets/images/home/top-screen/background.webp";
const store = useHomeStore();
const app = useAppStore();
const [backgroundImage] = useImages(BACKGROUND_IMAGE);
const { assets } = useAssets();
useRender((ctx) => {
ctx.globalAlpha = app.booted ? 1 : store.intro.stage1Opacity;
ctx.drawImage(backgroundImage!, 0, 0);
ctx.drawImage(assets.home.topScreen.background, 0, 0);
});
defineOptions({

28
app/components/Home/TopScreen/Calendar.vue
View File

@@ -1,16 +1,8 @@
<script setup lang="ts">
import CALENDAR_IMAGE from "/assets/images/home/top-screen/calendar/calendar.webp";
import LAST_ROW_IMAGE from "/assets/images/home/top-screen/calendar/last-row.webp";
import DAY_SELECTOR_IMAGE from "/assets/images/home/top-screen/calendar/day-selector.webp";
// NOTE: calendar background is handled by TopScreenBackground
const store = useHomeStore();
const [calendarImage, lastRowImage, daySelectorImage] = useImages(
CALENDAR_IMAGE,
LAST_ROW_IMAGE,
DAY_SELECTOR_IMAGE,
);
const { assets } = useAssets();
useRender((ctx) => {
ctx.fillStyle = "black";
@@ -35,11 +27,19 @@ useRender((ctx) => {
: store.isOutro && store.outro.animateTop
? store.outro.stage1Opacity
: 1;
ctx.drawImage(calendarImage!, CALENDAR_LEFT - 3, CALENDAR_TOP - 33);
ctx.drawImage(
assets.home.topScreen.calendar.calendar,
CALENDAR_LEFT - 3,
CALENDAR_TOP - 33,
);
const extraRow = CALENDAR_COLS * CALENDAR_ROWS - daysInMonth - firstDay < 0;
if (extraRow) {
ctx.drawImage(lastRowImage!, CALENDAR_LEFT - 3, CALENDAR_TOP + 79);
ctx.drawImage(
assets.home.topScreen.calendar.lastRow,
CALENDAR_LEFT - 3,
CALENDAR_TOP + 79,
);
}
ctx.globalAlpha = store.isIntro
@@ -60,7 +60,11 @@ useRender((ctx) => {
const cellTop = CALENDAR_TOP + col * 16;
if (now.getDate() === day) {
ctx.drawImage(daySelectorImage!, cellLeft, cellTop);
ctx.drawImage(
assets.home.topScreen.calendar.daySelector,
cellLeft,
cellTop,
);
}
ctx.fillText(

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

@@ -1,12 +1,10 @@
<script setup lang="ts">
import CLOCK_IMAGE from "/assets/images/home/top-screen/clock.webp";
const CENTER_X = 63;
const CENTER_Y = 95;
const store = useHomeStore();
const [clockImage] = useImages(CLOCK_IMAGE);
const { assets } = useAssets();
function drawLine(
ctx: CanvasRenderingContext2D,
@@ -59,7 +57,7 @@ useRender((ctx) => {
: store.isOutro && store.outro.animateTop
? store.outro.stage1Opacity
: 1;
ctx.drawImage(clockImage!, 13, 45);
ctx.drawImage(assets.home.topScreen.clock, 13, 45);
ctx.globalAlpha = store.isIntro
? store.intro.stage1Opacity

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

@@ -1,18 +1,7 @@
<script setup lang="ts">
import STATUS_BAR_IMAGE from "/assets/images/home/top-screen/status-bar/status-bar.webp";
import GBA_DISPLAY_IMAGE from "/assets/images/home/top-screen/status-bar/gba-display.webp";
import STARTUP_MODE_IMAGE from "/assets/images/home/top-screen/status-bar/startup-mode.webp";
import BATTERY_IMAGE from "/assets/images/home/top-screen/status-bar/battery.webp";
const store = useHomeStore();
const [statusBarImage, gbaDisplayImage, startupModeImage, batteryImage] =
useImages(
STATUS_BAR_IMAGE,
GBA_DISPLAY_IMAGE,
STARTUP_MODE_IMAGE,
BATTERY_IMAGE,
);
const { assets } = useAssets();
useRender((ctx) => {
const TEXT_Y = 11;
@@ -21,7 +10,7 @@ useRender((ctx) => {
ctx.globalAlpha =
store.isOutro && store.outro.animateTop ? store.outro.stage2Opacity : 1;
ctx.drawImage(statusBarImage!, 0, 0);
ctx.drawImage(assets.home.topScreen.statusBar.statusBar, 0, 0);
ctx.fillStyle = "#ffffff";
ctx.font = "7px NDS7";
@@ -51,9 +40,9 @@ useRender((ctx) => {
fillNumberCell(now.getMonth() + 1, 12, -1);
// icons
ctx.drawImage(gbaDisplayImage!, 210, 2);
ctx.drawImage(startupModeImage!, 226, 2);
ctx.drawImage(batteryImage!, 242, 4);
ctx.drawImage(assets.home.topScreen.statusBar.gbaDisplay, 210, 2);
ctx.drawImage(assets.home.topScreen.statusBar.startupMode, 226, 2);
ctx.drawImage(assets.home.topScreen.statusBar.battery, 242, 4);
});
defineOptions({