refactor(home): use new context system

src/screens/home/bottom/index.ts

@@ -1,6 +1,8 @@
 import { ImageLoader } from "../../../utils/loadImages";
 import { ButtonNavigation } from "../../../utils/buttonNavigation";
 import { ButtonSelector } from "../../../utils/buttonSelector";
+import type { ScreenContext } from "../../../screen";
+import { ContactScreen } from "../../contact";
 
 type HomeButton = "projects" | "contact" | "downloadPlay" | "settings";
 
@@ -13,7 +15,11 @@ export class HomeBottomScreen {
     settings: "/images/home/bottom-screen/buttons/settings.webp",
   });
 
-  private navigation = new ButtonNavigation<HomeButton>({
+  private navigation: ButtonNavigation<HomeButton>;
+  private selector = new ButtonSelector([31, 23, 193, 49]);
+
+  constructor(context: ScreenContext) {
+    this.navigation = new ButtonNavigation<HomeButton>({
       buttons: {
         projects: [31, 23, 193, 49],
         contact: [31, 71, 97, 49],
@@ -42,23 +48,27 @@ export class HomeBottomScreen {
           up: "last",
         },
       },
-    onButtonClick: () => {
-      // TODO: navigate to correct screen
+      onButtonClick: (button) => {
+        if (button === "contact") {
+          context.navigate(new ContactScreen(context));
+        }
       },
     });
-
-  private selector = new ButtonSelector(this.navigation.getSelectorPosition());
+  }
 
   render(ctx: CanvasRenderingContext2D): void {
     if (!this.images.isReady) return;
 
+    // background
     ctx.drawImage(this.images.require("background"), 0, 0);
 
+    // buttons
     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);
 
+    // selector
     this.selector.render(ctx, this.navigation.getSelectorPosition());
   }
 

src/screens/home/index.ts

@@ -1,11 +1,14 @@
 import type { Screen, ScreenContext } from "../../screen";
-import { ContactScreen } from "../contact-screen";
 import { HomeTopScreen } from "./top";
 import { HomeBottomScreen } from "./bottom";
 
 export class HomeScreen implements Screen {
   private topScreen = new HomeTopScreen();
-  private bottomScreen = new HomeBottomScreen();
+  private bottomScreen: HomeBottomScreen;
+
+  constructor(context: ScreenContext) {
+    this.bottomScreen = new HomeBottomScreen(context);
+  }
 
   renderTop(ctx: CanvasRenderingContext2D) {
     this.topScreen.render(ctx);
@@ -15,9 +18,11 @@ export class HomeScreen implements Screen {
     this.bottomScreen.render(ctx);
   }
 
-  handleTouch(x: number, y: number, context: ScreenContext): void {
-    if (x >= 205 && x <= 256 && y >= 178 && y <= 192) {
-      context.navigate(new ContactScreen());
-    }
+  handleTouch(x: number, y: number): void {
+    this.bottomScreen.handleTouch(x, y);
+  }
+
+  destroy(): void {
+    this.bottomScreen.destroy();
   }
 }