pihkaal-me/app/components/Settings/TopScreen/Notifications.vue

<script setup lang="ts">
import NOTIFICATION_IMAGE from "/assets/images/settings/top-screen/notification.webp";
import SETTINGS_IMAGE from "/assets/images/settings/top-screen/settings.webp";
import OPTIONS_IMAGE from "/assets/images/settings/top-screen/options/options.webp";
import CLOCK_IMAGE from "/assets/images/settings/top-screen/clock/clock.webp";
import USER_IMAGE from "/assets/images/settings/top-screen/user/user.webp";
import TOUCH_SCREEN_IMAGE from "/assets/images/settings/top-screen/touch_screen/touch-screen.webp";
import START_UP_IMAGE from "/assets/images/settings/top-screen/options/start-up.webp";
import LANGUAGE_IMAGE from "/assets/images/settings/top-screen/options/language.webp";
import GBA_MODE_IMAGE from "/assets/images/settings/top-screen/options/gba-mode.webp";

const store = useSettingsStore();

const [
  notificationImage,
  settingsImage,
  optionsImage,
  clockImage,
  userImage,
  touchScreenImage,
  startUpImage,
  languageImage,
  gbaModeImage,
] = useImages(
  NOTIFICATION_IMAGE,
  SETTINGS_IMAGE,
  OPTIONS_IMAGE,
  CLOCK_IMAGE,
  USER_IMAGE,
  TOUCH_SCREEN_IMAGE,
  START_UP_IMAGE,
  LANGUAGE_IMAGE,
  GBA_MODE_IMAGE,
);

const renderNotification = (
  ctx: CanvasRenderingContext2D,
  image: HTMLImageElement,
  title: string,
  description: string,
) => {
  ctx.drawImage(notificationImage!, 0, 0);
  ctx.drawImage(image, 2, 2);

  ctx.font = "10px NDS10";
  ctx.fillStyle = "#282828";
  ctx.fillText(title, 52, 13);

  ctx.fillStyle = "#fbfbfb";
  const lines = description.split("\n");
  const textY = lines.length === 1 ? 36 : 28;
  for (let i = 0; i < lines.length; i += 1) {
    ctx.fillText(lines[i]!, 52, textY + 14 * i);
  }
};

const mainNotification = computed(() => ({
  image: settingsImage!,
  title: $t("settings.title"),
  description: $t("settings.description"),
}));

const menuNotification = computed(() => {
  if (!store.currentMenu) return null;

  let image: HTMLImageElement | null = null;
  let id = "";

  if (/^options[A-Z]/.test(store.currentMenu)) {
    image = optionsImage!;
    id = "options";
  } else if (/^clock[A-Z]/.test(store.currentMenu)) {
    image = clockImage!;
    id = "clock";
  } else if (/^user[A-Z]/.test(store.currentMenu)) {
    image = userImage!;
    id = "user";
  } else if (/^touchScreen[A-Z]/.test(store.currentMenu)) {
    image = touchScreenImage!;
    id = "touchScreen";
  }

  if (!image) return null;

  return {
    image,
    title: $t(`settings.${id}.title`),
    description: $t(`settings.${id}.description`),
  };
});

const IMAGES_MAP: Record<string, HTMLImageElement> = {
  optionsStartUp: startUpImage!,
  optionsLanguage: languageImage!,
  optionsGbaMode: gbaModeImage!,
};

const submenuNotification = computed(() => {
  if (!store.currentSubMenu) return null;

  const image = IMAGES_MAP[store.currentSubMenu];
  if (!image) return null;

  const menuMatch = store.currentSubMenu.match(
    /^(options|clock|user|touchScreen)(.+)$/,
  );
  if (!menuMatch) return null;

  const [, menu, submenu] = menuMatch;
  const submenuKey = submenu!.charAt(0).toLowerCase() + submenu!.slice(1);

  return {
    image,
    title: $t(`settings.${menu}.${submenuKey}.title`),
    description: $t(`settings.${menu}.${submenuKey}.description`),
  };
});

useRender((ctx) => {
  let count = 1;
  if (menuNotification.value) count++;
  if (submenuNotification.value) count++;

  ctx.translate(0, 144 - (count - 1) * 16);

  renderNotification(
    ctx,
    mainNotification.value.image,
    mainNotification.value.title,
    mainNotification.value.description,
  );

  if (menuNotification.value) {
    ctx.translate(0, 16);
    renderNotification(
      ctx,
      menuNotification.value.image,
      menuNotification.value.title,
      menuNotification.value.description,
    );
  }

  if (submenuNotification.value) {
    ctx.translate(0, 16);
    renderNotification(
      ctx,
      submenuNotification.value.image,
      submenuNotification.value.title,
      submenuNotification.value.description,
    );
  }
});

defineOptions({
  render: () => null,
});
</script>