104 lines
2.7 KiB
Vue
104 lines
2.7 KiB
Vue
<script setup lang="ts">
|
|
// NOTE: calendar background is handled by TopScreenBackground
|
|
const store = useHomeStore();
|
|
|
|
const lastRowImage = useTemplateRef("lastRowImage");
|
|
const daySelectorImage = useTemplateRef("daySelectorImage");
|
|
const calendarImage = useTemplateRef("calendarImage");
|
|
|
|
useRender((ctx) => {
|
|
if (!calendarImage.value || !lastRowImage.value || !daySelectorImage.value)
|
|
return;
|
|
|
|
ctx.fillStyle = "black";
|
|
ctx.font = "7px NDS7";
|
|
|
|
const CALENDAR_COLS = 7;
|
|
const CALENDAR_ROWS = 5;
|
|
const CALENDAR_LEFT = 128;
|
|
const CALENDAR_TOP = 64;
|
|
|
|
ctx.fillStyle = "#343434";
|
|
|
|
const now = new Date();
|
|
const year = now.getFullYear();
|
|
const month = now.getMonth();
|
|
|
|
const firstDay = new Date(year, month, 1).getDay();
|
|
const daysInMonth = new Date(year, month + 1, 0).getDate();
|
|
|
|
ctx.globalAlpha = store.isIntro
|
|
? store.intro.stage1Opacity
|
|
: store.isOutro
|
|
? store.outro.stage1Opacity
|
|
: 1;
|
|
ctx.drawImage(calendarImage.value, 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.globalAlpha = store.isIntro
|
|
? store.intro.stage1Opacity
|
|
: store.isOutro
|
|
? store.outro.stage2Opacity
|
|
: 1;
|
|
for (let col = 0; col < CALENDAR_ROWS + (extraRow ? 1 : 0); col += 1) {
|
|
for (let row = 0; row < CALENDAR_COLS; row += 1) {
|
|
const cellIndex = col * CALENDAR_COLS + row;
|
|
const day = cellIndex - firstDay + 1;
|
|
|
|
if (day > 0 && day <= daysInMonth) {
|
|
const dayText = day.toString();
|
|
const { actualBoundingBoxRight: width } = ctx.measureText(dayText);
|
|
|
|
const cellLeft = CALENDAR_LEFT + row * 16;
|
|
const cellTop = CALENDAR_TOP + col * 16;
|
|
|
|
if (now.getDate() === day) {
|
|
ctx.drawImage(daySelectorImage.value, cellLeft, cellTop);
|
|
}
|
|
|
|
ctx.fillText(
|
|
dayText,
|
|
cellLeft + Math.floor((15 - width) / 2),
|
|
cellTop + 11,
|
|
);
|
|
}
|
|
}
|
|
}
|
|
|
|
ctx.fillStyle = "black";
|
|
ctx.font = "10px NDS10";
|
|
ctx.letterSpacing = "2px";
|
|
|
|
const timeText = `${month}/${year}`;
|
|
const { actualBoundingBoxRight: width } = ctx.measureText(timeText);
|
|
|
|
ctx.fillText(
|
|
timeText,
|
|
CALENDAR_LEFT + Math.floor((111 - width) / 2),
|
|
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>
|