pihkaal-me/app/composables/useButtonNavigation.ts

import gsap from "gsap";

export const useButtonNavigation = <T extends Record<string, Rect>>({
  buttons,
  initialButton,
  onButtonClick,
  navigation,
  disabled,
}: {
  buttons: T;
  initialButton: keyof T;
  onButtonClick?: (buttonName: keyof T) => void;
  navigation: Record<
    keyof T,
    {
      up?: keyof T | "last";
      down?: keyof T | "last";
      left?: keyof T;
      right?: keyof T;
      horizontalMode?: "navigate" | "preview";
    }
  >;
  disabled?: Ref<boolean>;
}) => {
  type Entry = keyof T;

  const confirmationModal = useConfirmationModal();

  const selectedButton = ref(initialButton);
  const selectorPosition = ref<Rect>(buttons[initialButton]!);
  const nextButton = ref<Entry | undefined>();

  const buildNavigationGraph = (
    nav: typeof navigation,
  ): Map<Entry, Set<Entry>> => {
    const edges = new Map<Entry, Set<Entry>>();

    for (const [button, navConfig] of Object.entries(nav) as [
      Entry,
      (typeof nav)[Entry],
    ][]) {
      if (!edges.has(button)) {
        edges.set(button, new Set());
      }

      if (navConfig.up && navConfig.up !== "last") {
        edges.get(button)!.add(navConfig.up);
      }
      if (navConfig.down && navConfig.down !== "last") {
        edges.get(button)!.add(navConfig.down);
      }
      if (navConfig.left) {
        edges.get(button)!.add(navConfig.left);
      }
      if (navConfig.right) {
        edges.get(button)!.add(navConfig.right);
      }

      if (navConfig.up === "last" || navConfig.down === "last") {
        for (const [otherButton, otherNav] of Object.entries(nav) as [
          Entry,
          (typeof nav)[Entry],
        ][]) {
          if (otherButton === button) continue;

          if (
            otherNav.up === button ||
            otherNav.down === button ||
            otherNav.left === button ||
            otherNav.right === button
          ) {
            edges.get(button)!.add(otherButton);
          }
        }
      }
    }

    return edges;
  };

  const findPath = (
    graph: Map<Entry, Set<Entry>>,
    from: Entry,
    to: Entry,
  ): Array<Entry> | null => {
    if (from === to) return [];

    const queue: Array<{ button: Entry; path: Array<Entry> }> = [
      { button: from, path: [] },
    ];
    const visited = new Set<Entry>([from]);

    while (queue.length > 0) {
      const { button, path } = queue.shift()!;

      const neighbors = graph.get(button);
      if (!neighbors) continue;

      for (const neighbor of neighbors) {
        if (visited.has(neighbor)) continue;

        const newPath = [...path, neighbor];

        if (neighbor === to) {
          return newPath;
        }

        visited.add(neighbor);
        queue.push({ button: neighbor, path: newPath });
      }
    }

    return null;
  };

  const graph = buildNavigationGraph(navigation);

  const calculateDistance = (
    [x1, y1, w1, h1]: Rect,
    [x2, y2, w2, h2]: Rect,
  ): number => {
    const cx1 = x1 + w1 / 2;
    const cy1 = y1 + h1 / 2;
    const cx2 = x2 + w2 / 2;
    const cy2 = y2 + h2 / 2;

    return Math.sqrt((cx2 - cx1) ** 2 + (cy2 - cy1) ** 2);
  };

  const animateToButton = (targetButton: Entry, path?: Array<Entry> | null) => {
    const SPEED = 400;
    const pathButtons = path && path.length > 0 ? path : [targetButton];

    const timeline = gsap.timeline();
    let prevRect = selectorPosition.value;

    selectorPosition.value = [...selectorPosition.value];

    for (const button of pathButtons) {
      const buttonRect = buttons[button]!;
      const distance = calculateDistance(prevRect, buttonRect);
      const duration = distance / SPEED;

      timeline.to(
        selectorPosition.value,
        {
          [0]: buttonRect[0],
          [1]: buttonRect[1],
          [2]: buttonRect[2],
          [3]: buttonRect[3],
          duration,
          ease: "none",
        },
        "+=0",
      );

      prevRect = buttonRect;
    }

    selectedButton.value = targetButton;
  };

  const { onClick } = useScreen();

  onClick((x: number, y: number) => {
    if (confirmationModal.isOpen || disabled?.value) return;

    for (const [buttonName, buttonRect] of Object.entries(buttons) as [
      Entry,
      Rect,
    ][]) {
      const [sx, sy, sw, sh] = buttonRect;
      if (x >= sx && x <= sx + sw && y >= sy && y <= sy + sh) {
        if (selectedButton.value === buttonName) {
          onButtonClick?.(buttonName);
        } else {
          const path = findPath(graph, selectedButton.value, buttonName);

          if (
            (navigation[buttonName].down === "last" &&
              navigation[selectedButton.value]!.up === buttonName) ||
            (navigation[buttonName].up === "last" &&
              navigation[selectedButton.value]!.down === buttonName)
          ) {
            nextButton.value = selectedButton.value;
          }

          animateToButton(buttonName, path);
        }
        break;
      }
    }
  });

  useKeyDown((key) => {
    if (confirmationModal.isOpen || disabled?.value) return;

    const currentButton = selectedButton.value as Entry;
    const currentNav = navigation[currentButton];

    if (!currentNav) return;

    let targetButton: Entry | undefined;

    switch (key) {
      case "NDS_UP":
        if (!currentNav.up) return;

        if (currentNav.up === "last") {
          if (nextButton.value) {
            targetButton = nextButton.value;
          } else {
            targetButton = currentNav.left ?? currentNav.right;
          }
        } else {
          if (navigation[currentNav.up].down === "last") {
            nextButton.value = selectedButton.value as Entry;
          }
          targetButton = currentNav.up;
        }

        break;

      case "NDS_DOWN":
        if (!currentNav.down) return;

        if (currentNav.down === "last") {
          if (nextButton.value) {
            targetButton = nextButton.value;
          } else {
            targetButton = currentNav.left ?? currentNav.right;
          }
        } else {
          if (navigation[currentNav.down].up === "last") {
            nextButton.value = selectedButton.value as Entry;
          }
          targetButton = currentNav.down;
        }
        break;

      case "NDS_LEFT":
        if (!currentNav.left) return;

        if (currentNav.horizontalMode === "preview") {
          nextButton.value = currentNav.left;
        } else {
          targetButton = currentNav.left;
        }
        break;

      case "NDS_RIGHT":
        if (!currentNav.right) return;

        if (currentNav.horizontalMode === "preview") {
          nextButton.value = currentNav.right;
        } else {
          targetButton = currentNav.right;
        }
        break;

      case "NDS_START":
      case "NDS_A":
        onButtonClick?.(selectedButton.value);
        break;

      default:
        return;
    }

    if (targetButton) {
      animateToButton(targetButton, null);
    }
  });

  return {
    selectedButton,
    selectorPosition,
  };
};