feat(contact): implement contact screen

src/screens/contact/top/index.ts

@@ -0,0 +1,88 @@
+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);
+      }
+    }
+  }
+}