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>