feat(credits): add in both nds and repo

app/components/Credits/BottomScreen.vue

@@ -0,0 +1,99 @@
+<script setup lang="ts">
+const { onRender, onClick, onMouseDown } = useScreen();
+const store = useCreditsStore();
+const { assets } = useAssets((a) => a.images.credits);
+
+const QUIT_SIZE = assets.quit.rect.width;
+const QUIT_X = Math.floor(LOGICAL_WIDTH / 2 - QUIT_SIZE / 2);
+const QUIT_Y = 135;
+
+const quitPressed = ref(false);
+
+const handleMouseUp = () => {
+  quitPressed.value = false;
+};
+
+onMounted(() => document.addEventListener("mouseup", handleMouseUp));
+onUnmounted(() => document.removeEventListener("mouseup", handleMouseUp));
+
+onMouseDown((x, y) => {
+  if (store.isIntro || store.isOutro) return;
+  if (rectContains([QUIT_X, QUIT_Y, QUIT_SIZE, QUIT_SIZE], [x, y])) {
+    quitPressed.value = true;
+  }
+});
+
+useKeyDown(({ key, repeated }) => {
+  if (store.isIntro || store.isOutro || repeated) 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) => {
+  ctx.fillStyle = "#000000";
+  ctx.fillRect(0, 0, LOGICAL_WIDTH, LOGICAL_HEIGHT);
+
+  // credits list (bottom screen entries)
+  ctx.globalAlpha = store.isIntro
+    ? store.intro.stage1Opacity
+    : store.isOutro
+      ? store.outro.stage1Opacity
+      : 1;
+  ctx.textBaseline = "top";
+
+  for (let i = CREDITS.length - 1; i >= CREDITS_TOP_SCREEN_COUNT; i--) {
+    const id = CREDITS[i]!;
+    const offset = store.getItemOffset(i);
+    if (offset === -CREDITS_LINE_HEIGHT) continue;
+
+    const baseY =
+      CREDITS_BOTTOM_START_Y +
+      (i - CREDITS_TOP_SCREEN_COUNT) * CREDITS_ENTRY_HEIGHT;
+    const y = baseY + offset;
+
+    ctx.fillStyle = "#000000";
+    ctx.fillRect(0, y, LOGICAL_WIDTH, CREDITS_LINE_HEIGHT * 3);
+
+    ctx.fillStyle = "#aaaaaa";
+    ctx.font = "7px NDS7";
+    fillTextHCentered(ctx, $t(`creditsScreen.${id}.label`), 0, y, LOGICAL_WIDTH);
+
+    ctx.fillStyle = "#ffffff";
+    ctx.font = "10px NDS10";
+    fillTextHCentered(ctx, $t(`creditsScreen.${id}.author`), 0, y + CREDITS_LINE_HEIGHT, LOGICAL_WIDTH);
+
+    ctx.fillStyle = "#888888";
+    ctx.font = "7px NDS7";
+    fillTextHCentered(ctx, $t(`creditsScreen.${id}.url`), 0, y + CREDITS_LINE_HEIGHT * 2, LOGICAL_WIDTH);
+  }
+
+  ctx.globalAlpha = store.isIntro
+    ? store.intro.stage1Opacity
+    : store.isOutro
+      ? store.outro.stage2Opacity
+      : 1;
+  (quitPressed.value ? assets.quitPressed : assets.quit).draw(
+    ctx,
+    QUIT_X,
+    QUIT_Y,
+  );
+});
+
+defineOptions({
+  render: () => null,
+});
+</script>

app/components/Credits/FadeToBlack.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+const { onRender } = useScreen();
+const store = useCreditsStore();
+
+onRender((ctx) => {
+  if (!store.fadeToBlack.active) return;
+  if (store.fadeToBlack.isOutro && store.fadeToBlack.opacity === 0) return;
+
+  ctx.globalAlpha = store.fadeToBlack.opacity;
+  ctx.fillStyle = "#000000";
+  ctx.fillRect(0, 0, LOGICAL_WIDTH, LOGICAL_HEIGHT);
+}, 9999);
+
+defineOptions({
+  render: () => null,
+});
+</script>

app/components/Credits/TopScreen.vue

@@ -0,0 +1,67 @@
+<script setup lang="ts">
+const { onRender } = useScreen();
+const store = useCreditsStore();
+
+onMounted(() => {
+  store.$reset();
+  store.animateIntro(CREDITS.length);
+});
+
+onRender((ctx) => {
+  ctx.fillStyle = "#000000";
+  ctx.fillRect(0, 0, LOGICAL_WIDTH, LOGICAL_HEIGHT);
+
+  ctx.globalAlpha = store.isIntro
+    ? store.intro.stage1Opacity
+    : store.isOutro
+      ? store.outro.stage2Opacity
+      : 1;
+  ctx.fillStyle = "#ffffff";
+  ctx.textBaseline = "top";
+
+  // title
+  ctx.font = "10px NDS10";
+  fillTextHCentered(
+    ctx,
+    $t("creditsScreen.title"),
+    0,
+    CREDITS_HEADER_Y,
+    LOGICAL_WIDTH,
+  );
+
+  // credits list (top screen entries only)
+  ctx.globalAlpha = store.isIntro
+    ? store.intro.stage1Opacity
+    : store.isOutro
+      ? store.outro.stage1Opacity
+      : 1;
+
+  for (let i = CREDITS_TOP_SCREEN_COUNT - 1; i >= 0; i--) {
+    const id = CREDITS[i]!;
+    const offset = store.getItemOffset(i);
+    if (offset === -CREDITS_LINE_HEIGHT) continue;
+
+    const baseY = CREDITS_LIST_START_Y + i * CREDITS_ENTRY_HEIGHT;
+    const y = baseY + offset;
+
+    ctx.fillStyle = "#000000";
+    ctx.fillRect(0, y, LOGICAL_WIDTH, CREDITS_LINE_HEIGHT * 3);
+
+    ctx.fillStyle = "#aaaaaa";
+    ctx.font = "7px NDS7";
+    fillTextHCentered(ctx, $t(`creditsScreen.${id}.label`), 0, y, LOGICAL_WIDTH);
+
+    ctx.fillStyle = "#ffffff";
+    ctx.font = "10px NDS10";
+    fillTextHCentered(ctx, $t(`creditsScreen.${id}.author`), 0, y + CREDITS_LINE_HEIGHT, LOGICAL_WIDTH);
+
+    ctx.fillStyle = "#888888";
+    ctx.font = "7px NDS7";
+    fillTextHCentered(ctx, $t(`creditsScreen.${id}.url`), 0, y + CREDITS_LINE_HEIGHT * 2, LOGICAL_WIDTH);
+  }
+});
+
+defineOptions({
+  render: () => null,
+});
+</script>

app/components/Home/BottomScreen/BottomScreen.vue

@@ -7,4 +7,5 @@ import Buttons from "./Buttons.vue";
   <Background />
   <Buttons />
   <AchievementsFadeToBlack />
+  <CreditsFadeToBlack />
 </template>

app/components/Home/BottomScreen/Buttons.vue

@@ -13,13 +13,12 @@ const { selected, pressed, selectorPosition } = useButtonNavigation({
     contact: [31, 71, 97, 49],
     gallery: [127, 71, 97, 49],
 
-    theme: [0, 167, 31, 26],
+    credits: [0, 167, 31, 26],
     settings: [112, 167, 31, 26],
     achievements: [225, 167, 31, 26],
   },
   initialButton: store.selectedButton,
   onActivate: (button) => {
-    if (button === "theme") throw new Error(`Not implemented: ${button}`);
     store.animateOutro(button);
   },
   navigation: {
@@ -39,11 +38,11 @@ const { selected, pressed, selectorPosition } = useButtonNavigation({
       left: "contact",
       down: "settings",
     },
-    theme: {
+    credits: {
       right: "settings",
     },
     settings: {
-      left: "theme",
+      left: "credits",
       up: "last",
       right: "achievements",
     },
@@ -161,9 +160,9 @@ onRender((ctx) => {
 
   <Button
     :x="10"
-    :y="175 + getButtonOffset('theme')"
-    :opacity="getOpacity('theme')"
-    :image="getButtonImage('theme')"
+    :y="175 + getButtonOffset('credits')"
+    :opacity="getOpacity('credits')"
+    :image="getButtonImage('credits')"
   />
   <Button
     :x="117"

app/components/Home/TopScreen/TopScreen.vue

@@ -17,4 +17,5 @@ onMounted(() => {
   <Clock />
   <StatusBar />
   <AchievementsFadeToBlack />
+  <CreditsFadeToBlack />
 </template>