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,52 +15,60 @@ export class HomeBottomScreen {
     settings: "/images/home/bottom-screen/buttons/settings.webp",
   });
 
-  private navigation = new ButtonNavigation<HomeButton>({
+  private navigation: ButtonNavigation<HomeButton>;
-    buttons: {
+  private selector = new ButtonSelector([31, 23, 193, 49]);
-      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());
+  constructor(context: ScreenContext) {
+    this.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: (button) => {
+        if (button === "contact") {
+          context.navigate(new ContactScreen(context));
+        }
+      },
+    });
+  }
 
   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 {
+  handleTouch(x: number, y: number): void {
-    if (x >= 205 && x <= 256 && y >= 178 && y <= 192) {
+    this.bottomScreen.handleTouch(x, y);
-      context.navigate(new ContactScreen());
+  }
-    }
+
+  destroy(): void {
+    this.bottomScreen.destroy();
   }
 }