From fffed80faabbd11d33ca752d24e8a998972fb6b0 Mon Sep 17 00:00:00 2001
From: Pihkaal <hello@pihkaal.me>
Date: Tue, 20 Jan 2026 19:18:12 +0100
Subject: [PATCH] feat(achievements): implement achievements screen

---
 app/components/Achievements/BottomScreen.vue  |  91 +++++++++++++
 .../Notification.vue}                         |   4 +-
 app/components/Achievements/TopScreen.vue     | 123 +++++++++++++++++
 app/components/Home/BottomScreen/Buttons.vue  |  20 +--
 app/pages/index.vue                           |   3 +-
 app/stores/achievementsScreen.ts              | 124 ++++++++++++++++++
 app/types/app.d.ts                            |   8 +-
 app/utils/achievements.ts                     |  30 +++++
 i18n/locales/en.json                          |   3 +
 .../notification-logo.webp}                   | Bin
 public/nds/images/achievements/quit.webp      | Bin 0 -> 172 bytes
 .../bottom-screen/buttons/achievements.webp   | Bin 0 -> 64 bytes
 .../home/bottom-screen/buttons/alarm.webp     | Bin 66 -> 0 bytes
 13 files changed, 394 insertions(+), 12 deletions(-)
 create mode 100644 app/components/Achievements/BottomScreen.vue
 rename app/components/{Common/AchievementNotification.vue => Achievements/Notification.vue} (94%)
 create mode 100644 app/components/Achievements/TopScreen.vue
 create mode 100644 app/stores/achievementsScreen.ts
 create mode 100644 app/utils/achievements.ts
 rename public/nds/images/{common/achievement-notification-logo.webp => achievements/notification-logo.webp} (100%)
 create mode 100644 public/nds/images/achievements/quit.webp
 create mode 100644 public/nds/images/home/bottom-screen/buttons/achievements.webp
 delete mode 100644 public/nds/images/home/bottom-screen/buttons/alarm.webp

diff --git a/app/components/Achievements/BottomScreen.vue b/app/components/Achievements/BottomScreen.vue
new file mode 100644
index 0000000..00ba1bd
--- /dev/null
+++ b/app/components/Achievements/BottomScreen.vue
@@ -0,0 +1,91 @@
+<script setup lang="ts">
+const { onRender, onClick } = useScreen();
+const store = useAchievementsScreen();
+const achievementsStore = useAchievementsStore();
+const { assets } = useAssets();
+
+const QUIT_SIZE = assets.images.achievements.quit.rect.width;
+const QUIT_X = Math.floor(LOGICAL_WIDTH / 2 - QUIT_SIZE / 2);
+const QUIT_Y = 135;
+
+useKeyDown((key) => {
+  if (store.isIntro || store.isOutro) return;
+
+  switch (key) {
+    case "NDS_B":
+    case "NDS_A":
+    case "NDS_START": {
+      store.animateOutro();
+    }
+  }
+});
+
+onClick((x, y) => {
+  if (store.isIntro || store.isOutro) return;
+
+  if (rectContains([QUIT_X, QUIT_Y, QUIT_SIZE, QUIT_SIZE], [x, y])) {
+    store.animateOutro();
+  }
+});
+
+onRender((ctx) => {
+  assets.images.home.bottomScreen.background.draw(ctx, 0, 0);
+
+  ctx.globalAlpha = store.isIntro
+    ? store.intro.stage1Opacity
+    : store.isOutro
+      ? store.outro.stage1Opacity
+      : 1;
+  ctx.fillStyle = "#000000";
+  ctx.fillRect(0, 0, LOGICAL_WIDTH, LOGICAL_HEIGHT);
+
+  // achievement list (reversed iteration because they appear in cascade)
+  ctx.globalAlpha = store.isIntro
+    ? store.intro.stage2Opacity
+    : store.isOutro
+      ? store.outro.stage2Opacity
+      : 1;
+  ctx.font = "7px NDS7";
+  ctx.textBaseline = "top";
+  for (
+    let i = ACHIEVEMENTS.length - 1;
+    i >= ACHIEVEMENTS_TOP_SCREEN_COUNT;
+    i--
+  ) {
+    const achievement = ACHIEVEMENTS[i]!;
+    const isUnlocked = achievementsStore.isUnlocked(achievement);
+
+    const offset = store.getItemOffset(i);
+    if (offset === -ACHIEVEMENTS_LINE_HEIGHT) continue;
+
+    const baseY =
+      ACHIEVEMENTS_BOTTOM_START_Y +
+      (i - ACHIEVEMENTS_TOP_SCREEN_COUNT) * ACHIEVEMENTS_LINE_HEIGHT;
+    const y = baseY + offset;
+
+    // needed for the sliding animation
+    ctx.fillStyle = "#000000";
+    ctx.fillRect(0, y, LOGICAL_WIDTH, ACHIEVEMENTS_LINE_HEIGHT);
+
+    // TODO: draw ??? for secret ones
+    ctx.fillStyle = isUnlocked ? "#ffffff" : "#666666";
+    drawCheckbox(ctx, ACHIEVEMENTS_X, y, isUnlocked);
+    ctx.fillText(
+      $t(`achievements.${achievement}`).replace("\n", " "),
+      ACHIEVEMENTS_X + CHECKBOX_SIZE + CHECKBOX_TEXT_GAP,
+      y,
+    );
+  }
+
+  ctx.globalAlpha = store.isIntro
+    ? store.intro.stage2Opacity
+    : store.isOutro
+      ? store.outro.stage3Opacity
+      : 1;
+  assets.images.achievements.quit.draw(ctx, QUIT_X, QUIT_Y);
+});
+
+defineOptions({
+  render: () => null,
+});
+</script>
diff --git a/app/components/Common/AchievementNotification.vue b/app/components/Achievements/Notification.vue
similarity index 94%
rename from app/components/Common/AchievementNotification.vue
rename to app/components/Achievements/Notification.vue
index 978abda..0e4e1f0 100644
--- a/app/components/Common/AchievementNotification.vue
+++ b/app/components/Achievements/Notification.vue
@@ -12,7 +12,7 @@ const x = ref(LOGICAL_WIDTH);
 const isAnimating = ref(false);
 
 const PADDING = 4;
-const LOGO_SIZE = assets.images.common.achievementNotificationLogo.rect.height;
+const LOGO_SIZE = assets.images.achievements.notificationLogo.rect.height;
 const NOTIF_WIDTH = 120;
 const NOTIF_HEIGHT = LOGO_SIZE + PADDING * 2;
 const NOTIF_Y = 3;
@@ -66,7 +66,7 @@ const processQueue = () => {
 onRender((ctx) => {
   if (!currentAchievement.value) return;
 
-  const logo = assets.images.common.achievementNotificationLogo;
+  const logo = assets.images.achievements.notificationLogo;
 
   // shadow
   ctx.fillStyle = "rgba(0, 0, 0, 0.3)";
diff --git a/app/components/Achievements/TopScreen.vue b/app/components/Achievements/TopScreen.vue
new file mode 100644
index 0000000..a61e728
--- /dev/null
+++ b/app/components/Achievements/TopScreen.vue
@@ -0,0 +1,123 @@
+<script setup lang="ts">
+const { onRender } = useScreen();
+const store = useAchievementsScreen();
+const achievementsStore = useAchievementsStore();
+const { assets } = useAssets();
+
+const PROGRESS_BAR_WIDTH = 140;
+const PROGRESS_BAR_HEIGHT = 10;
+const PROGRESS_BAR_X = (LOGICAL_WIDTH - PROGRESS_BAR_WIDTH) / 2;
+const PROGRESS_BAR_Y = ACHIEVEMENTS_HEADER_Y + 27;
+
+onMounted(() => {
+  store.$reset();
+  store.animateIntro();
+});
+
+onRender((ctx) => {
+  assets.images.home.topScreen.background.draw(ctx, 0, 0);
+
+  ctx.globalAlpha = store.isIntro
+    ? store.intro.stage1Opacity
+    : store.isOutro
+      ? store.outro.stage1Opacity
+      : 1;
+  ctx.fillStyle = "#000000";
+  ctx.fillRect(0, 0, LOGICAL_WIDTH, LOGICAL_HEIGHT);
+
+  // header
+  ctx.globalAlpha = store.isIntro
+    ? store.intro.stage2Opacity
+    : store.isOutro
+      ? store.outro.stage3Opacity
+      : 1;
+  ctx.fillStyle = "#ffffff";
+  ctx.textBaseline = "top";
+
+  // title
+  ctx.font = "10px NDS10";
+  fillTextHCentered(
+    ctx,
+    $t("achievementsScreen.title"),
+    0,
+    ACHIEVEMENTS_HEADER_Y,
+    LOGICAL_WIDTH,
+  );
+
+  // progress text
+  const unlockedCount = achievementsStore.achievements.length;
+  const totalCount = ACHIEVEMENTS.length;
+
+  ctx.font = "7px NDS7";
+  fillTextHCentered(
+    ctx,
+    `${unlockedCount}/${totalCount}`,
+    0,
+    ACHIEVEMENTS_HEADER_Y + 13,
+    LOGICAL_WIDTH,
+  );
+
+  // progress bar
+  ctx.fillStyle = "#ffffff";
+  ctx.fillRect(PROGRESS_BAR_X, PROGRESS_BAR_Y, PROGRESS_BAR_WIDTH, 1);
+  ctx.fillRect(
+    PROGRESS_BAR_X,
+    PROGRESS_BAR_Y + PROGRESS_BAR_HEIGHT - 1,
+    PROGRESS_BAR_WIDTH,
+    1,
+  );
+  ctx.fillRect(
+    PROGRESS_BAR_X + PROGRESS_BAR_WIDTH - 1,
+    PROGRESS_BAR_Y,
+    1,
+    PROGRESS_BAR_HEIGHT,
+  );
+  ctx.fillRect(PROGRESS_BAR_X, PROGRESS_BAR_Y, 1, PROGRESS_BAR_HEIGHT);
+
+  ctx.fillStyle = "#ffffff";
+  const fill =
+    (unlockedCount / totalCount) *
+    (store.isIntro ? store.intro.progressBar : 1);
+  ctx.fillRect(
+    PROGRESS_BAR_X + 2,
+    PROGRESS_BAR_Y + 2,
+    Math.ceil((PROGRESS_BAR_WIDTH - 4) * fill),
+    PROGRESS_BAR_HEIGHT - 4,
+  );
+
+  // achievement list (reversed iteration because they appear in cascade)
+  ctx.globalAlpha = store.isIntro
+    ? store.intro.stage2Opacity
+    : store.isOutro
+      ? store.outro.stage2Opacity
+      : 1;
+  ctx.font = "7px NDS7";
+  for (let i = ACHIEVEMENTS_TOP_SCREEN_COUNT - 1; i >= 0; i--) {
+    const achievement = ACHIEVEMENTS[i]!;
+    const isUnlocked = achievementsStore.isUnlocked(achievement);
+
+    const offset = store.getItemOffset(i);
+    if (offset === -ACHIEVEMENTS_LINE_HEIGHT) continue;
+
+    const baseY = ACHIEVEMENTS_LIST_START_Y + i * ACHIEVEMENTS_LINE_HEIGHT;
+    const y = baseY + offset;
+
+    // needed for the sliding animation
+    ctx.fillStyle = "#000000";
+    ctx.fillRect(0, y, LOGICAL_WIDTH, ACHIEVEMENTS_LINE_HEIGHT);
+
+    // TODO: draw ??? for secret ones
+    ctx.fillStyle = isUnlocked ? "#ffffff" : "#666666";
+    drawCheckbox(ctx, ACHIEVEMENTS_X, y, isUnlocked);
+    ctx.fillText(
+      $t(`achievements.${achievement}`).replace("\n", " "),
+      ACHIEVEMENTS_X + CHECKBOX_SIZE + CHECKBOX_TEXT_GAP,
+      y,
+    );
+  }
+});
+
+defineOptions({
+  render: () => null,
+});
+</script>
diff --git a/app/components/Home/BottomScreen/Buttons.vue b/app/components/Home/BottomScreen/Buttons.vue
index 3ff28fd..161ea30 100644
--- a/app/components/Home/BottomScreen/Buttons.vue
+++ b/app/components/Home/BottomScreen/Buttons.vue
@@ -15,12 +15,16 @@ const { selected, selectorPosition } = useButtonNavigation({
 
     theme: [0, 167, 31, 26],
     settings: [112, 167, 31, 26],
-    alarm: [225, 167, 31, 26],
+    achievements: [225, 167, 31, 26],
   },
   initialButton: "projects",
   onButtonClick: (button) => {
-    if (button === "theme" || button === "alarm")
-      throw new Error(`Not implemented: ${button}`);
+    if (button === "theme") throw new Error(`Not implemented: ${button}`);
+
+    if (button === "achievements") {
+      store.animateOutro("achievements");
+      return;
+    }
 
     store.animateOutro(button);
   },
@@ -47,9 +51,9 @@ const { selected, selectorPosition } = useButtonNavigation({
     settings: {
       left: "theme",
       up: "last",
-      right: "alarm",
+      right: "achievements",
     },
-    alarm: {
+    achievements: {
       left: "settings",
     },
   },
@@ -168,9 +172,9 @@ onRender((ctx) => {
   />
   <Button
     :x="235"
-    :y="175 + getButtonOffset('alarm')"
-    :opacity="getOpacity('alarm')"
-    :image="assets.images.home.bottomScreen.buttons.alarm"
+    :y="175 + getButtonOffset('achievements')"
+    :opacity="getOpacity('achievements')"
+    :image="assets.images.home.bottomScreen.buttons.achievements"
   />
 
   <Selector :rect="selectorPosition" :opacity="getOpacity()" />
diff --git a/app/pages/index.vue b/app/pages/index.vue
index 59d8fc5..90dc47d 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -76,8 +76,9 @@ useKeyUp((key) => {
           <ProjectsTopScreen v-else-if="app.screen === 'projects'" />
           <SettingsTopScreen v-else-if="app.screen === 'settings'" />
           <GalleryTopScreen v-else-if="app.screen === 'gallery'" />
+          <AchievementsTopScreen v-else-if="app.screen === 'achievements'" />
 
-          <CommonAchievementNotification />
+          <AchievementsNotification />
         </Screen>
       </div>
       <div>
diff --git a/app/stores/achievementsScreen.ts b/app/stores/achievementsScreen.ts
new file mode 100644
index 0000000..5cae488
--- /dev/null
+++ b/app/stores/achievementsScreen.ts
@@ -0,0 +1,124 @@
+import gsap from "gsap";
+
+export const useAchievementsScreen = defineStore("achievementsScreen", {
+  state: () => ({
+    intro: {
+      stage1Opacity: 0,
+      stage2Opacity: 0,
+      itemOffsets: {} as Record<number, number>,
+      progressBar: 0,
+    },
+
+    outro: {
+      stage1Opacity: 1,
+      stage2Opacity: 1,
+      stage3Opacity: 1,
+    },
+
+    isIntro: true,
+    isOutro: false,
+  }),
+
+  actions: {
+    animateIntro() {
+      this.isIntro = true;
+      this.isOutro = false;
+
+      const itemCount = ACHIEVEMENTS.length;
+
+      for (let i = 0; i < itemCount; i++) {
+        this.intro.itemOffsets[i] = -ACHIEVEMENTS_LINE_HEIGHT;
+      }
+
+      const tl = gsap.timeline({
+        onComplete: () => {
+          this.isIntro = false;
+        },
+      });
+
+      tl.fromTo(
+        this.intro,
+        { stage1Opacity: 0 },
+        {
+          stage1Opacity: 1,
+          duration: 0.3,
+          ease: "none",
+        },
+      )
+        .fromTo(
+          this.intro,
+          { stage2Opacity: 0 },
+          {
+            stage2Opacity: 1,
+            duration: 0.5,
+            ease: "none",
+          },
+          0.5,
+        )
+        .fromTo(
+          this.intro,
+          { progressBar: 0 },
+          {
+            progressBar: 1,
+            duration: 1.5,
+            ease: "power2.out",
+          },
+          0.25,
+        );
+
+      for (let i = 0; i < itemCount; i++) {
+        tl.to(
+          this.intro.itemOffsets,
+          {
+            [i]: 0,
+            duration: 0.4,
+            ease: "power2.out",
+          },
+          0.75 + i * 0.05,
+        );
+      }
+    },
+
+    animateOutro() {
+      this.isIntro = false;
+      this.isOutro = true;
+
+      gsap
+        .timeline()
+        .fromTo(
+          this.outro,
+          { stage2Opacity: 1 },
+          {
+            stage2Opacity: 0,
+            duration: 0.3,
+          },
+        )
+        .fromTo(
+          this.outro,
+          { stage3Opacity: 1 },
+          {
+            stage3Opacity: 0,
+            duration: 0.3,
+          },
+          "-=0.15",
+        )
+        .fromTo(
+          this.outro,
+          { stage1Opacity: 1 },
+          {
+            stage1Opacity: 0,
+            duration: 0.3,
+            ease: "none",
+          },
+        )
+        .call(() => {
+          const app = useAppStore();
+          app.navigateTo("home");
+        });
+    },
+
+    getItemOffset(index: number): number {
+      return this.intro.itemOffsets[index] ?? 0;
+    },
+  },
+});
diff --git a/app/types/app.d.ts b/app/types/app.d.ts
index eb57fc5..9bacce1 100644
--- a/app/types/app.d.ts
+++ b/app/types/app.d.ts
@@ -1 +1,7 @@
-type AppScreen = "home" | "contact" | "projects" | "settings" | "gallery";
+type AppScreen =
+  | "home"
+  | "contact"
+  | "projects"
+  | "settings"
+  | "gallery"
+  | "achievements";
diff --git a/app/utils/achievements.ts b/app/utils/achievements.ts
new file mode 100644
index 0000000..3917e5a
--- /dev/null
+++ b/app/utils/achievements.ts
@@ -0,0 +1,30 @@
+export const ACHIEVEMENTS_LINE_HEIGHT = 14;
+export const ACHIEVEMENTS_HEADER_Y = 20;
+export const ACHIEVEMENTS_LIST_START_Y = ACHIEVEMENTS_HEADER_Y + 55;
+export const ACHIEVEMENTS_BOTTOM_START_Y = 10;
+export const ACHIEVEMENTS_TOP_SCREEN_COUNT = Math.floor(
+  (LOGICAL_HEIGHT - ACHIEVEMENTS_LIST_START_Y) / ACHIEVEMENTS_LINE_HEIGHT,
+);
+
+export const CHECKBOX_SIZE = 7;
+export const CHECKBOX_TEXT_GAP = 5;
+export const ACHIEVEMENTS_X = 55;
+
+export const drawCheckbox = (
+  ctx: CanvasRenderingContext2D,
+  x: number,
+  y: number,
+  checked: boolean,
+) => {
+  ctx.fillRect(x, y, CHECKBOX_SIZE, 1);
+  ctx.fillRect(x, y + CHECKBOX_SIZE - 1, CHECKBOX_SIZE, 1);
+  ctx.fillRect(x, y + 1, 1, CHECKBOX_SIZE - 2);
+  ctx.fillRect(x + CHECKBOX_SIZE - 1, y + 1, 1, CHECKBOX_SIZE - 2);
+
+  if (checked) {
+    for (let i = 2; i < CHECKBOX_SIZE - 2; i++) {
+      ctx.fillRect(x + i, y + i, 1, 1);
+      ctx.fillRect(x + CHECKBOX_SIZE - 1 - i, y + i, 1, 1);
+    }
+  }
+};
diff --git a/i18n/locales/en.json b/i18n/locales/en.json
index ecaf295..c78c02c 100644
--- a/i18n/locales/en.json
+++ b/i18n/locales/en.json
@@ -1,4 +1,7 @@
 {
+  "achievementsScreen": {
+    "title": "Achievements"
+  },
   "achievements": {
     "boot": "Boot up the system",
     "projects_visit": "Visit the projects\nsection",
diff --git a/public/nds/images/common/achievement-notification-logo.webp b/public/nds/images/achievements/notification-logo.webp
similarity index 100%
rename from public/nds/images/common/achievement-notification-logo.webp
rename to public/nds/images/achievements/notification-logo.webp
diff --git a/public/nds/images/achievements/quit.webp b/public/nds/images/achievements/quit.webp
new file mode 100644
index 0000000000000000000000000000000000000000..0f2be67df1aef781270ccbb8e1f141de3730a028
GIT binary patch
literal 172
zcmV;d08{@`Nk&Gb00012MM6+kP&iDO0000lAHW9yg`3*8>PX*{^dbi<NQeX^P)--l
zyLa-fBl^$4Z6ig6>@nXb^0c?#Nq>Uo83N}5z!}+Qb<4<kSSsR(YJ^oHq7q{+HpX1R
zAWTdLU}DOdYHZ66nlNFFbXcQ(6iVzQ;F=~9b*%|Rm*a^Oz(VSBYOLzTh**`IQBmrP
ax!TE<#1$;{{RD}Bqj1I#&;|cxo^}Fx2~Fz&

literal 0
HcmV?d00001

diff --git a/public/nds/images/home/bottom-screen/buttons/achievements.webp b/public/nds/images/home/bottom-screen/buttons/achievements.webp
new file mode 100644
index 0000000000000000000000000000000000000000..1623aef0eac04a602512e234323712e308637fe4
GIT binary patch
literal 64
zcmWIYbaS&{U|<M$bqWXzu<+3Vvh_I|m;^!%GH!ba9bZ~EAy1x5vXW)df8l_&D?ZGW
T%(xy}wko#X_||3VoE&ZdOH38u

literal 0
HcmV?d00001

diff --git a/public/nds/images/home/bottom-screen/buttons/alarm.webp b/public/nds/images/home/bottom-screen/buttons/alarm.webp
deleted file mode 100644
index cdea916e8ed7d00336c58d1ffadb0ddac1143435..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 66
zcmWIYbaS&}U|<M$bqWXzu<+3Zvh_I|m;_1<vTl0_96MY$<r$yznmVOl_KaUOwB{eQ
Vex4>>n|fU)XH)S0q{Wl97yy;17hC`U