From f32fd19d6434996560fb79101bc79f0587f9f31a Mon Sep 17 00:00:00 2001
From: Pihkaal <pihkaal@proton.me>
Date: Fri, 19 Dec 2025 19:53:31 +0100
Subject: [PATCH] feat(home): add theme and alarm buttons (dummy), and refactor
 to have less components

---
 .../Home/BottomScreen/BottomScreen.vue        |  2 +-
 .../{Buttons/GameButton.vue => Button.vue}    |  5 +-
 .../BottomScreen/{Buttons => }/Buttons.vue    | 53 ++++++++++++++-----
 .../BottomScreen/Buttons/ContactButton.vue    | 18 -------
 .../Buttons/DownloadPlayButton.vue            | 22 --------
 .../BottomScreen/Buttons/SettingsButton.vue   | 18 -------
 app/stores/home.ts                            |  2 +-
 7 files changed, 44 insertions(+), 76 deletions(-)
 rename app/components/Home/BottomScreen/{Buttons/GameButton.vue => Button.vue} (67%)
 rename app/components/Home/BottomScreen/{Buttons => }/Buttons.vue (64%)
 delete mode 100644 app/components/Home/BottomScreen/Buttons/ContactButton.vue
 delete mode 100644 app/components/Home/BottomScreen/Buttons/DownloadPlayButton.vue
 delete mode 100644 app/components/Home/BottomScreen/Buttons/SettingsButton.vue

diff --git a/app/components/Home/BottomScreen/BottomScreen.vue b/app/components/Home/BottomScreen/BottomScreen.vue
index 1d8358b..0d0aa30 100644
--- a/app/components/Home/BottomScreen/BottomScreen.vue
+++ b/app/components/Home/BottomScreen/BottomScreen.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import Background from "./Background.vue";
-import Buttons from "./Buttons/Buttons.vue";
+import Buttons from "./Buttons.vue";
 </script>
 
 <template>
diff --git a/app/components/Home/BottomScreen/Buttons/GameButton.vue b/app/components/Home/BottomScreen/Button.vue
similarity index 67%
rename from app/components/Home/BottomScreen/Buttons/GameButton.vue
rename to app/components/Home/BottomScreen/Button.vue
index 0c2ad31..ec24e23 100644
--- a/app/components/Home/BottomScreen/Buttons/GameButton.vue
+++ b/app/components/Home/BottomScreen/Button.vue
@@ -3,13 +3,12 @@ const props = defineProps<{
   x: number;
   y: number;
   opacity: number;
+  image: HTMLImageElement;
 }>();
 
-const { assets } = useAssets();
-
 useRender((ctx) => {
   ctx.globalAlpha = props.opacity;
-  ctx.drawImage(assets.home.bottomScreen.buttons.game, props.x, props.y);
+  ctx.drawImage(props.image, props.x, props.y);
 });
 
 defineOptions({
diff --git a/app/components/Home/BottomScreen/Buttons/Buttons.vue b/app/components/Home/BottomScreen/Buttons.vue
similarity index 64%
rename from app/components/Home/BottomScreen/Buttons/Buttons.vue
rename to app/components/Home/BottomScreen/Buttons.vue
index 2ff6f78..f019ec5 100644
--- a/app/components/Home/BottomScreen/Buttons/Buttons.vue
+++ b/app/components/Home/BottomScreen/Buttons.vue
@@ -1,22 +1,24 @@
 <script setup lang="ts">
-import GameButton from "./GameButton.vue";
-import ContactButton from "./ContactButton.vue";
-import DownloadPlayButton from "./DownloadPlayButton.vue";
-import SettingsButton from "./SettingsButton.vue";
+import Button from "./Button.vue";
 import Selector from "~/components/Common/ButtonSelector.vue";
 
 const store = useHomeStore();
+const { assets } = useAssets();
 
 const { selectedButton, selectorPosition } = useButtonNavigation({
   buttons: {
     projects: [31, 23, 193, 49],
     contact: [31, 71, 97, 49],
     downloadPlay: [127, 71, 97, 49],
+
+    theme: [0, 167, 31, 26],
     settings: [112, 167, 31, 26],
+    alarm: [225, 167, 31, 26],
   },
   initialButton: "projects",
   onButtonClick: (button) => {
-    if (button === "downloadPlay") throw new Error("Not implemented");
+    if (button === "downloadPlay" || button === "theme" || button === "alarm")
+      throw new Error(`Not implemented: ${button}`);
 
     store.animateOutro(button);
   },
@@ -37,8 +39,16 @@ const { selectedButton, selectorPosition } = useButtonNavigation({
       left: "contact",
       down: "settings",
     },
+    theme: {
+      right: "settings",
+    },
     settings: {
+      left: "theme",
       up: "last",
+      right: "alarm",
+    },
+    alarm: {
+      left: "settings",
     },
   },
 });
@@ -57,25 +67,42 @@ const getOpacity = (button?: (typeof selectedButton)["value"]) => {
 </script>
 
 <template>
-  <GameButton
+  <Button
     :x="33"
     :y="25 + getButtonOffset('projects')"
     :opacity="getOpacity('projects')"
+    :image="assets.home.bottomScreen.buttons.game"
   />
-  <DownloadPlayButton
-    :x="128"
-    :y="72 + getButtonOffset('downloadPlay')"
-    :opacity="getOpacity('downloadPlay')"
-  />
-  <ContactButton
+  <Button
     :x="32"
     :y="72 + getButtonOffset('contact')"
     :opacity="getOpacity('contact')"
+    :image="assets.home.bottomScreen.buttons.contact"
   />
-  <SettingsButton
+  <Button
+    :x="128"
+    :y="72 + getButtonOffset('downloadPlay')"
+    :opacity="getOpacity('downloadPlay')"
+    :image="assets.home.bottomScreen.buttons.downloadPlay"
+  />
+
+  <Button
+    :x="10"
+    :y="175 + getButtonOffset('theme')"
+    :opacity="getOpacity('theme')"
+    :image="assets.home.bottomScreen.buttons.theme"
+  />
+  <Button
     :x="117"
     :y="170 + getButtonOffset('settings')"
     :opacity="getOpacity('settings')"
+    :image="assets.home.bottomScreen.buttons.settings"
+  />
+  <Button
+    :x="235"
+    :y="175 + getButtonOffset('alarm')"
+    :opacity="getOpacity('alarm')"
+    :image="assets.home.bottomScreen.buttons.alarm"
   />
 
   <Selector :rect="selectorPosition" :opacity="getOpacity()" />
diff --git a/app/components/Home/BottomScreen/Buttons/ContactButton.vue b/app/components/Home/BottomScreen/Buttons/ContactButton.vue
deleted file mode 100644
index 5aa7651..0000000
--- a/app/components/Home/BottomScreen/Buttons/ContactButton.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-<script setup lang="ts">
-const props = defineProps<{
-  x: number;
-  y: number;
-  opacity: number;
-}>();
-
-const { assets } = useAssets();
-
-useRender((ctx) => {
-  ctx.globalAlpha = props.opacity;
-  ctx.drawImage(assets.home.bottomScreen.buttons.contact, props.x, props.y);
-});
-
-defineOptions({
-  render: () => null,
-});
-</script>
diff --git a/app/components/Home/BottomScreen/Buttons/DownloadPlayButton.vue b/app/components/Home/BottomScreen/Buttons/DownloadPlayButton.vue
deleted file mode 100644
index fab9388..0000000
--- a/app/components/Home/BottomScreen/Buttons/DownloadPlayButton.vue
+++ /dev/null
@@ -1,22 +0,0 @@
-<script setup lang="ts">
-const props = defineProps<{
-  x: number;
-  y: number;
-  opacity: number;
-}>();
-
-const { assets } = useAssets();
-
-useRender((ctx) => {
-  ctx.globalAlpha = props.opacity;
-  ctx.drawImage(
-    assets.home.bottomScreen.buttons.downloadPlay,
-    props.x,
-    props.y,
-  );
-});
-
-defineOptions({
-  render: () => null,
-});
-</script>
diff --git a/app/components/Home/BottomScreen/Buttons/SettingsButton.vue b/app/components/Home/BottomScreen/Buttons/SettingsButton.vue
deleted file mode 100644
index e485a94..0000000
--- a/app/components/Home/BottomScreen/Buttons/SettingsButton.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-<script setup lang="ts">
-const props = defineProps<{
-  x: number;
-  y: number;
-  opacity: number;
-}>();
-
-const { assets } = useAssets();
-
-useRender((ctx) => {
-  ctx.globalAlpha = props.opacity;
-  ctx.drawImage(assets.home.bottomScreen.buttons.settings, props.x, props.y);
-});
-
-defineOptions({
-  render: () => null,
-});
-</script>
diff --git a/app/stores/home.ts b/app/stores/home.ts
index 5fb61b0..436bed3 100644
--- a/app/stores/home.ts
+++ b/app/stores/home.ts
@@ -54,7 +54,7 @@ export const useHomeStore = defineStore("home", {
         );
     },
 
-    animateOutro(to: "contact" | "projects" | "settings") {
+    animateOutro(to: "contact" | "projects" | "theme" | "settings" | "alarm") {
       this.isOutro = true;
       this.outro.animateTop = to !== "settings";