89 lines
2.7 KiB
TypeScript
89 lines
2.7 KiB
TypeScript
import { ImageLoader } from "~/utils/loadImages";
|
|
|
|
export class ContactTopScreen {
|
|
private images = new ImageLoader({
|
|
homeBackground: "/images/home/top-screen/background.webp",
|
|
contactBackground: "/images/contact/top-screen/background.webp",
|
|
leftBar: "/images/contact/top-screen/left-bar.webp",
|
|
leftBarThings: "/images/contact/top-screen/left-bar-things.webp",
|
|
notification: "/images/contact/bottom-screen/notification.webp",
|
|
title: "/images/contact/top-screen/title.webp",
|
|
});
|
|
|
|
private notifications: string[] = [];
|
|
private notificationsYOffset = 0;
|
|
|
|
public pushNotification(message: string): void {
|
|
this.notifications.push(message);
|
|
}
|
|
|
|
render(ctx: CanvasRenderingContext2D): void {
|
|
if (!this.images.isReady) return;
|
|
|
|
// backgrounds
|
|
// NOTE: animate home background
|
|
ctx.drawImage(this.images.require("homeBackground"), 0, 0);
|
|
ctx.drawImage(this.images.require("contactBackground"), 0, 0);
|
|
|
|
// left bar
|
|
ctx.drawImage(this.images.require("leftBar"), 0, 0);
|
|
ctx.drawImage(this.images.require("leftBarThings"), 0, 0);
|
|
|
|
ctx.font = "10px NDS10";
|
|
|
|
// notifications
|
|
for (let i = this.notifications.length - 1; i >= 0; i--) {
|
|
const index = this.notifications.length - 1 - i;
|
|
const y = 169 - 24 * index + this.notificationsYOffset;
|
|
if (y < -24) break;
|
|
|
|
ctx.drawImage(this.images.require("notification"), 21, y);
|
|
|
|
const content = this.notifications[i]!;
|
|
ctx.fillStyle = content.includes("opened") ? "#00fbba" : "#e3f300";
|
|
ctx.fillText(this.notifications[i]!, 27, y + 15);
|
|
}
|
|
|
|
// title
|
|
ctx.drawImage(
|
|
this.images.require("title"),
|
|
21,
|
|
169 - 24 * this.notifications.length + this.notificationsYOffset,
|
|
);
|
|
|
|
// notifications count (left bar)
|
|
const MAX = 36;
|
|
const MAX_VISIBLE = 8;
|
|
|
|
let visibleNotifications = Math.min(this.notifications.length, MAX_VISIBLE);
|
|
const extraActive =
|
|
this.notificationsYOffset > 0 && this.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 < this.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);
|
|
}
|
|
}
|
|
}
|
|
}
|