pihkaal-me/app/components/Settings/BottomScreen/Menus/Menus.vue

<script setup lang="ts">
import OptionsMenu from "./Options/Menu.vue";
import OptionsStartUp from "./Options/StartUp.vue";
import OptionsLanguage from "./Options/Language.vue";
import OptionsGbaMode from "./Options/GbaMode.vue";

import ClockMenu from "./Clock/Menu.vue";
import UserMenu from "./User/Menu.vue";
import TouchScreenMenu from "./TouchScreen/Menu.vue";
import Selector from "~/components/Common/ButtonSelector.vue";

const settingsStore = useSettingsStore();

const { selectedButton: selected, selectorPosition } = useButtonNavigation({
  buttons: {
    options: [31, 119, 49, 49],
    optionsLanguage: [31, 71, 49, 49],
    optionsGbaMode: [79, 71, 49, 49],
    optionsStartUp: [31, 23, 49, 49],

    clock: [79, 119, 49, 49],
    clockAlarm: [79, 71, 49, 49],
    clockTime: [127, 71, 49, 49],
    clockDate: [79, 23, 49, 49],

    user: [127, 119, 49, 49],
    userBirthday: [79, 71, 49, 49],
    userName: [127, 71, 49, 49],
    userMessage: [175, 71, 49, 49],
    userColor: [127, 23, 49, 49],

    touchScreen: [175, 119, 49, 49],
  },
  initialButton: "options",
  onButtonClick: (buttonName: string) => {
    if (isSubmenu(buttonName)) {
      router.push({
        query: {
          menu: buttonName,
        },
      });
    }
  },
  navigation: {
    options: {
      right: "clock",
      up: "optionsLanguage",
    },
    optionsLanguage: {
      down: "options",
      up: "optionsStartUp",
      right: "optionsGbaMode",
    },
    optionsGbaMode: {
      down: "options",
      left: "optionsLanguage",
      up: "optionsStartUp",
    },
    optionsStartUp: {
      right: "optionsGbaMode",
      down: "optionsLanguage",
    },

    clock: {
      left: "options",
      right: "user",
      up: "clockAlarm",
    },
    clockAlarm: {
      down: "clock",
      up: "clockDate",
      right: "clockTime",
    },
    clockTime: {
      down: "clock",
      left: "clockAlarm",
      up: "clockDate",
    },
    clockDate: {
      right: "clockTime",
      down: "clockAlarm",
    },

    user: {
      left: "clock",
      right: "touchScreen",
      up: "userName",
    },
    userBirthday: {
      down: "user",
      up: "userColor",
      right: "userName",
    },
    userName: {
      down: "user",
      left: "userBirthday",
      right: "userMessage",
      up: "userColor",
    },
    userMessage: {
      down: "user",
      left: "userName",
      up: "userColor",
    },
    userColor: {
      left: "userBirthday",
      right: "userMessage",
      down: "userName",
    },

    touchScreen: {
      left: "user",
    },
  },
});

const isSubmenu = (buttonName: string) => {
  return (
    /^(options|clock|user|touchScreen)[A-Z]/.test(buttonName) &&
    !["options", "clock", "user", "touchScreen"].includes(buttonName)
  );
};

const router = useRouter();

onBeforeRouteUpdate((to, from) => {
  const fromMenu = from.query.menu?.toString();
  const toMenu = to.query.menu?.toString();

  if (!fromMenu && toMenu) {
    settingsStore.setActiveMenu(selected.value);
  } else if (fromMenu && !toMenu) {
    if (fromMenu === "options" || fromMenu === "clock" || fromMenu === "user") {
      selected.value = fromMenu;
      settingsStore.setActiveMenu(null);
    } else {
      throw new Error("Unreachable");
    }
  } else if (fromMenu && toMenu) {
    if (toMenu === "options" || toMenu === "clock" || toMenu === "user") {
      settingsStore.setCurrentSubMenu(null);
      settingsStore.setActiveMenu(selected.value);
    } else {
      settingsStore.setCurrentSubMenu(toMenu);
    }
  }
});

watch(
  selected,
  (newSelected) => {
    if (settingsStore.currentSubMenu === null) {
      if (isSubmenu(newSelected)) {
        router.push({
          query: {
            menu: newSelected.split(/[A-Z]/)[0],
          },
        });
      } else {
        router.push({ query: { menu: undefined } });
      }
    }
  },
  { immediate: true },
);

const viewComponents: Record<string, Component> = {
  optionsStartUp: OptionsStartUp,
  optionsLanguage: OptionsLanguage,
  optionsGbaMode: OptionsGbaMode,
};
</script>

<template>
  <template v-if="!settingsStore.currentSubMenu">
    <OptionsMenu :x="33" :y="121" />
    <ClockMenu :x="81" :y="121" />
    <UserMenu :x="129" :y="121" />
    <TouchScreenMenu :x="177" :y="121" :opacity="1" />

    <Selector :rect="selectorPosition" :opacity="1" />
  </template>
  <component :is="viewComponents[settingsStore.currentSubMenu]" v-else />
</template>