86 lines
1.8 KiB
Vue
86 lines
1.8 KiB
Vue
<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>
|