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

2025-12-19 19:53:31 +01:00
parent a26e2b1a32
commit 06bcd6baf8
7 changed files with 44 additions and 76 deletions
--- a/app/components/Home/BottomScreen/Buttons.vue
+++ b/app/components/Home/BottomScreen/Buttons.vue
@@ -0,0 +1,109 @@
+<script setup lang="ts">
+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" || button === "theme" || button === "alarm")
+      throw new Error(`Not implemented: ${button}`);
+
+    store.animateOutro(button);
+  },
+  navigation: {
+    projects: {
+      down: "last",
+      left: "contact",
+      right: "downloadPlay",
+      horizontalMode: "preview",
+    },
+    contact: {
+      up: "projects",
+      right: "downloadPlay",
+      down: "settings",
+    },
+    downloadPlay: {
+      up: "projects",
+      left: "contact",
+      down: "settings",
+    },
+    theme: {
+      right: "settings",
+    },
+    settings: {
+      left: "theme",
+      up: "last",
+      right: "alarm",
+    },
+    alarm: {
+      left: "settings",
+    },
+  },
+});
+
+const getButtonOffset = (button: (typeof selectedButton)["value"]) => {
+  if (selectedButton.value === button) return store.outro.buttonOffsetY;
+  return 0;
+};
+
+const getOpacity = (button?: (typeof selectedButton)["value"]) => {
+  if (store.isIntro) return store.intro.stage1Opacity;
+  if (selectedButton.value === button) return 1;
+  if (store.isOutro) return store.outro.stage1Opacity;
+  return 1;
+};
+</script>
+
+<template>
+  <Button
+    :x="33"
+    :y="25 + getButtonOffset('projects')"
+    :opacity="getOpacity('projects')"
+    :image="assets.home.bottomScreen.buttons.game"
+  />
+  <Button
+    :x="32"
+    :y="72 + getButtonOffset('contact')"
+    :opacity="getOpacity('contact')"
+    :image="assets.home.bottomScreen.buttons.contact"
+  />
+  <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()" />
+</template>