diff --git a/public/images/home/bottom-screen/background.webp b/public/images/home/bottom-screen/background.webp new file mode 100644 index 0000000..e4f0243 Binary files /dev/null and b/public/images/home/bottom-screen/background.webp differ diff --git a/public/images/home/bottom-screen/buttons/alarm.webp b/public/images/home/bottom-screen/buttons/alarm.webp new file mode 100644 index 0000000..cdea916 Binary files /dev/null and b/public/images/home/bottom-screen/buttons/alarm.webp differ diff --git a/public/images/home/bottom-screen/buttons/contact.webp b/public/images/home/bottom-screen/buttons/contact.webp new file mode 100644 index 0000000..776e02b Binary files /dev/null and b/public/images/home/bottom-screen/buttons/contact.webp differ diff --git a/public/images/home/bottom-screen/buttons/downloadPlay.webp b/public/images/home/bottom-screen/buttons/downloadPlay.webp new file mode 100644 index 0000000..8583901 Binary files /dev/null and b/public/images/home/bottom-screen/buttons/downloadPlay.webp differ diff --git a/public/images/home/bottom-screen/buttons/game.webp b/public/images/home/bottom-screen/buttons/game.webp new file mode 100644 index 0000000..5353b4b Binary files /dev/null and b/public/images/home/bottom-screen/buttons/game.webp differ diff --git a/public/images/home/bottom-screen/buttons/settings.webp b/public/images/home/bottom-screen/buttons/settings.webp new file mode 100644 index 0000000..62ae883 Binary files /dev/null and b/public/images/home/bottom-screen/buttons/settings.webp differ diff --git a/public/images/home/bottom-screen/buttons/theme.webp b/public/images/home/bottom-screen/buttons/theme.webp new file mode 100644 index 0000000..2c6a88e Binary files /dev/null and b/public/images/home/bottom-screen/buttons/theme.webp differ diff --git a/src/screens/home/bottom/index.ts b/src/screens/home/bottom/index.ts index b0b50d0..a22a222 100644 --- a/src/screens/home/bottom/index.ts +++ b/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({ + 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(); } }