83 lines
2.4 KiB
TypeScript
83 lines
2.4 KiB
TypeScript
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";
|
|
|
|
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: 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],
|
|
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());
|
|
}
|
|
|
|
handleTouch(x: number, y: number): void {
|
|
this.navigation.handleTouch(x, y);
|
|
}
|
|
|
|
destroy(): void {
|
|
this.navigation.destroy();
|
|
}
|
|
}
|