81 lines
2.1 KiB
Vue
81 lines
2.1 KiB
Vue
<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, titleImage] = useImages(
|
|
NOTIFICATION_IMAGE,
|
|
TITLE_IMAGE,
|
|
);
|
|
|
|
useRender((ctx) => {
|
|
ctx.globalAlpha = store.outro.stage2Opacity;
|
|
ctx.font = "10px NDS10";
|
|
|
|
// notifications
|
|
for (let i = store.notifications.length - 1; i >= 0; i--) {
|
|
const index = store.notifications.length - 1 - i;
|
|
const y = 169 - 24 * index + store.notificationsYOffset;
|
|
if (y < -24) break;
|
|
|
|
ctx.drawImage(notificationImage!, 21, y);
|
|
|
|
const content = store.notifications[i]!;
|
|
ctx.fillStyle = content.includes("opened") ? "#00fbba" : "#e3f300";
|
|
ctx.fillText(store.notifications[i]!, 27, y + 15);
|
|
}
|
|
|
|
// title
|
|
ctx.globalAlpha = store.isIntro
|
|
? store.intro.stage1Opacity
|
|
: store.outro.stage2Opacity;
|
|
ctx.drawImage(
|
|
titleImage!,
|
|
21,
|
|
store.isIntro
|
|
? store.intro.titleY
|
|
: 169 - 24 * store.notifications.length + store.notificationsYOffset,
|
|
);
|
|
|
|
// notifications count (left bar)
|
|
const MAX = 36;
|
|
const MAX_VISIBLE = 8;
|
|
|
|
let visibleNotifications = Math.min(store.notifications.length, MAX_VISIBLE);
|
|
const extraActive =
|
|
store.notificationsYOffset > 0 && store.notifications.length > MAX_VISIBLE;
|
|
|
|
if (extraActive) {
|
|
visibleNotifications += 1;
|
|
}
|
|
|
|
ctx.fillStyle = "#415969";
|
|
for (let i = 0; i < visibleNotifications; i++) {
|
|
ctx.fillRect(3, 161 - i * 4, 12, 2);
|
|
}
|
|
|
|
ctx.fillStyle = "#b2c3db";
|
|
const startY = 161 - visibleNotifications * 4;
|
|
const top = MAX - MAX_VISIBLE - (extraActive ? 1 : 0);
|
|
for (
|
|
let i = 0;
|
|
i < store.notifications.length - visibleNotifications && i < top;
|
|
i++
|
|
) {
|
|
if (i === top - 1) {
|
|
ctx.fillRect(7, startY - i * 4, 4, 2);
|
|
} else if (i === top - 2) {
|
|
ctx.fillRect(5, startY - i * 4, 8, 2);
|
|
} else {
|
|
ctx.fillRect(3, startY - i * 4, 12, 2);
|
|
}
|
|
}
|
|
});
|
|
|
|
defineOptions({
|
|
render: () => null,
|
|
});
|
|
</script>
|