From 6db8c9e230549a0bb5610e59b373f9314e588fb2 Mon Sep 17 00:00:00 2001
From: Pihkaal <hello@pihkaal.me>
Date: Fri, 6 Feb 2026 15:38:41 +0100
Subject: [PATCH] feat(settings/user/snake): display score in top bar, and
 implement intro and outro

---
 .../BottomScreen/Menus/User/Snake.vue         | 123 ++++++++++++++----
 i18n/locales/en.json                          |   2 +-
 .../bottom-screen/user/snake-board.webp       | Bin 120 -> 164 bytes
 3 files changed, 99 insertions(+), 26 deletions(-)

diff --git a/app/components/Settings/BottomScreen/Menus/User/Snake.vue b/app/components/Settings/BottomScreen/Menus/User/Snake.vue
index 73cf59c..e98d405 100644
--- a/app/components/Settings/BottomScreen/Menus/User/Snake.vue
+++ b/app/components/Settings/BottomScreen/Menus/User/Snake.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import * as THREE from "three";
 import { useIntervalFn, useLocalStorage } from "@vueuse/core";
+import gsap from "gsap";
 
 const store = useSettingsStore();
 const achievements = useAchievementsStore();
@@ -12,15 +13,84 @@ const assets = atlas.images.settings.bottomScreen;
 
 const highScore = useLocalStorage("snake_high_score", 0);
 
-const handleCancel = () => {
+const BOARD_SLIDE_OFFSET = 96;
+const BOARD_SLIDE_DURATION = 0.25;
+const TEXT_FADE_DURATION = 0.15;
+const SCORE_OFFSET = -20;
+const SCORE_DURATION = 0.15;
+
+const intro = reactive({
+  boardOffsetY: BOARD_SLIDE_OFFSET,
+  boardOpacity: 0,
+  textOpacity: 0,
+  scoreOffsetY: SCORE_OFFSET,
+});
+
+const animateIntro = async () => {
+  await gsap
+    .timeline()
+    .to(
+      intro,
+      { boardOffsetY: 0, duration: BOARD_SLIDE_DURATION, ease: "none" },
+      0,
+    )
+    .to(
+      intro,
+      { boardOpacity: 1, duration: BOARD_SLIDE_DURATION, ease: "none" },
+      0,
+    )
+    .to(
+      intro,
+      { textOpacity: 1, duration: TEXT_FADE_DURATION, ease: "none" },
+      BOARD_SLIDE_DURATION,
+    )
+    .to(
+      intro,
+      { scoreOffsetY: 0, duration: SCORE_DURATION, ease: "none" },
+      BOARD_SLIDE_DURATION + TEXT_FADE_DURATION,
+    );
+};
+
+const animateOutro = async () => {
+  await gsap
+    .timeline()
+    .to(
+      intro,
+      {
+        boardOffsetY: BOARD_SLIDE_OFFSET,
+        duration: BOARD_SLIDE_DURATION,
+        ease: "none",
+      },
+      0,
+    )
+    .to(
+      intro,
+      { boardOpacity: 0, duration: BOARD_SLIDE_DURATION, ease: "none" },
+      0,
+    )
+    .to(
+      intro,
+      { scoreOffsetY: SCORE_OFFSET, duration: SCORE_DURATION, ease: "none" },
+      0,
+    );
+};
+
+onMounted(() => {
+  animateIntro();
+});
+
+const handleCancel = async () => {
   switch (state.value) {
     case "alive": {
       state.value = "pause";
       confirmationModal.open({
         text: $t("settings.user.snake.quitConfirmation"),
         onConfirm: () => {},
-        onClosed: (choice) => {
-          if (choice === "confirm") store.closeSubMenu();
+        onClosed: async (choice) => {
+          if (choice === "confirm") {
+            await animateOutro();
+            store.closeSubMenu();
+          }
         },
         onCancel: () => {
           state.value = "alive";
@@ -31,6 +101,7 @@ const handleCancel = () => {
 
     case "dead":
     case "waiting": {
+      await animateOutro();
       store.closeSubMenu();
       break;
     }
@@ -65,9 +136,9 @@ const handleConfirm = () => {
 };
 
 const BOARD_X = 15;
-const BOARD_Y = 48;
+const BOARD_Y = 33;
 const BOARD_WIDTH = 13;
-const BOARD_HEIGHT = 7;
+const BOARD_HEIGHT = 8;
 const CELL_SIZE = 15;
 const CELL_PADDING = 1;
 
@@ -154,34 +225,22 @@ const cellToBoardPos = (pos: THREE.Vector2) => ({
 onRender((ctx) => {
   assets.background.draw(ctx, 0, 0);
 
-  // score
-  assets.user.snakeScore.draw(ctx, 27, 32);
+  ctx.save();
+  ctx.globalAlpha = intro.boardOpacity;
+  ctx.translate(0, intro.boardOffsetY);
+
   ctx.textBaseline = "top";
   ctx.font = "10px NDS10";
-  ctx.fillStyle = "#282828";
-  fillTextHCentered(
-    ctx,
-    $t("settings.user.snake.score", { score }),
-    27,
-    36,
-    108,
-  );
-  fillTextHCentered(
-    ctx,
-    $t("settings.user.snake.best", { best: highScore.value }),
-    135,
-    36,
-    108,
-  );
 
   // board
-  assets.user.snakeBoard.draw(ctx, 15, 48);
+  assets.user.snakeBoard.draw(ctx, BOARD_X, BOARD_Y);
 
   if (state.value === "waiting") {
+    ctx.globalAlpha = intro.textOpacity;
     ctx.fillStyle = "#fbfbfb";
-    const text = `\n\n\n  ${$t("settings.user.snake.startPrompt")}`;
+    const text = $t("settings.user.snake.startPrompt");
     let x = 15;
-    let y = 52;
+    let y = 37;
     for (let i = 0; i < text.length; i += 1, x += 16) {
       while (text[i] === "\n") {
         x = 15;
@@ -216,8 +275,22 @@ onRender((ctx) => {
       cellToBoardPos(position).y,
     );
   }
+
+  ctx.restore();
 });
 
+onRender((ctx) => {
+  ctx.translate(0, intro.scoreOffsetY);
+  drawButton(ctx, $t("settings.user.snake.score", { score }), 10, 2, 118);
+  drawButton(
+    ctx,
+    $t("settings.user.snake.best", { best: highScore.value }),
+    138,
+    2,
+    108,
+  );
+}, 110);
+
 useKeyDown((key) => {
   if (state.value !== "alive") return;
 
diff --git a/i18n/locales/en.json b/i18n/locales/en.json
index 7f48c7d..8960344 100644
--- a/i18n/locales/en.json
+++ b/i18n/locales/en.json
@@ -133,7 +133,7 @@
         "description": "Play a quick game of Snake!",
         "score": "Score: {score}",
         "best": "Best: {best}",
-        "startPrompt": "Press icon_a to start.",
+        "startPrompt": "\n\n\n  Press icon_a to\n    start",
         "quitConfirmation": "Quit the game?",
         "restartConfirmation": "Restart the game?"
       }
diff --git a/public/nds/images/settings/bottom-screen/user/snake-board.webp b/public/nds/images/settings/bottom-screen/user/snake-board.webp
index a5732e80bb4a71eb5cadd475552d66c6e91debd3..442abf8440936beccba188d8feb8ed4b24d0de4e 100644
GIT binary patch
literal 164
zcmV;V09*f3Nk&GT00012MM6+kP&iDF0000l-~b>1e_$k%)GVjKaTQR!kw{XroC3#H
zK=DQ*NzHN!99IFw&wo@^!2i2DGb0H=5-JrywYvbS?gmD&ZM6X_SinFP#R?%vs4g&p
zf|7j{{AAU8ME{kxZNPNV!u;T%En1Cn8GNeRj7+V?Q)Nbgg<AZ<+)!Yt7Ju+)n>AAE
S|ChtR{~W%;IsE(2VGICwib$aV

literal 120
zcmV-;0EholNk&F+00012MM6+kP&iCv0000l-~b!|1)JJ-!X$36!uaKY93&utNWeiW
zAzKANC$jM)`meNY1Evd?<^|h%NH|t|r%!Y1-kZ1j38L{<<q@Q{f#d)9HF<5|^gpg|
a6OEPbawtLIQ2NiIS4Iw{{~SvHIaC29Q8jr0