feat(home): add theme and alarm buttons (dummy), and refactor to have less components

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>

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({

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()" />

app/components/Home/BottomScreen/Buttons/ContactButton.vue

@@ -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>

app/components/Home/BottomScreen/Buttons/DownloadPlayButton.vue

@@ -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>

app/components/Home/BottomScreen/Buttons/SettingsButton.vue

@@ -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>

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";