feat(assets): new assets loading system (currently only for images)
This commit is contained in:
@@ -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(
|
||||
|
||||
Reference in New Issue
Block a user