feat(home): buttons navigation

src/screens/home/bottom/index.ts

@@ -1,9 +1,72 @@
+import { ImageLoader } from "../../../utils/loadImages";
+import { ButtonNavigation } from "../../../utils/buttonNavigation";
+import { ButtonSelector } from "../../../utils/buttonSelector";
+
+type HomeButton = "projects" | "contact" | "downloadPlay" | "settings";
+
 export class HomeBottomScreen {
+  private images = new ImageLoader({
+    background: "/images/home/bottom-screen/background.webp",
+    game: "/images/home/bottom-screen/buttons/game.webp",
+    contact: "/images/home/bottom-screen/buttons/contact.webp",
+    downloadPlay: "/images/home/bottom-screen/buttons/downloadPlay.webp",
+    settings: "/images/home/bottom-screen/buttons/settings.webp",
+  });
+
+  private navigation = new ButtonNavigation<HomeButton>({
+    buttons: {
+      projects: [31, 23, 193, 49],
+      contact: [31, 71, 97, 49],
+      downloadPlay: [127, 71, 97, 49],
+      settings: [112, 167, 31, 26],
+    },
+    initialButton: "projects",
+    navigation: {
+      projects: {
+        down: "last",
+        left: "contact",
+        right: "downloadPlay",
+        horizontalMode: "preview",
+      },
+      contact: {
+        up: "projects",
+        right: "downloadPlay",
+        down: "settings",
+      },
+      downloadPlay: {
+        up: "projects",
+        left: "contact",
+        down: "settings",
+      },
+      settings: {
+        up: "last",
+      },
+    },
+    onButtonClick: () => {
+      // TODO: navigate to correct screen
+    },
+  });
+
+  private selector = new ButtonSelector(this.navigation.getSelectorPosition());
+
   render(ctx: CanvasRenderingContext2D): void {
-    ctx.fillStyle = "#ffffff";
-    ctx.font = "10px NDS10";
-    ctx.textAlign = "right";
-    ctx.textBaseline = "bottom";
-    ctx.fillText("Contact >", 255, 191);
+    if (!this.images.isReady) return;
+
+    ctx.drawImage(this.images.require("background"), 0, 0);
+
+    ctx.drawImage(this.images.require("game"), 33, 25);
+    ctx.drawImage(this.images.require("contact"), 32, 72);
+    ctx.drawImage(this.images.require("downloadPlay"), 128, 72);
+    ctx.drawImage(this.images.require("settings"), 117, 170);
+
+    this.selector.render(ctx, this.navigation.getSelectorPosition());
+  }
+
+  handleTouch(x: number, y: number): void {
+    this.navigation.handleTouch(x, y);
+  }
+
+  destroy(): void {
+    this.navigation.destroy();
   }
 }