pihkaal/pihkaal-me
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(achievements): black fade in and out from home and settings screen

Browse Source
This commit is contained in:
Stevan
2026-01-26 17:54:13 +01:00
parent 1ec5953c71
commit f453839599
14 changed files with 161 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
app/components/Achievements/BottomScreen.vue
View File

@@ -29,21 +29,14 @@ onClick((x, y) => {
});
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.intro.stage1Opacity
: store.isOutro
? store.outro.stage2Opacity
? store.outro.stage1Opacity
: 1;
ctx.font = "7px NDS7";
ctx.textBaseline = "top";
@@ -78,9 +71,9 @@ onRender((ctx) => {
}
ctx.globalAlpha = store.isIntro
? store.intro.stage2Opacity
? store.intro.stage1Opacity
: store.isOutro
? store.outro.stage3Opacity
? store.outro.stage2Opacity
: 1;
assets.images.achievements.quit.draw(ctx, QUIT_X, QUIT_Y);
});

17
app/components/Achievements/FadeToBlack.vue Normal file
View File

@@ -0,0 +1,17 @@
<script setup lang="ts">
const { onRender } = useScreen();
const store = useAchievementsScreen();
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>

16
app/components/Achievements/TopScreen.vue
View File

@@ -2,7 +2,6 @@
const { onRender } = useScreen();
const store = useAchievementsScreen();
const achievementsStore = useAchievementsStore();
const { assets } = useAssets();
const PROGRESS_BAR_WIDTH = 140;
const PROGRESS_BAR_HEIGHT = 10;
@@ -15,21 +14,14 @@ onMounted(() => {
});
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.intro.stage1Opacity
: store.isOutro
? store.outro.stage3Opacity
? store.outro.stage2Opacity
: 1;
ctx.fillStyle = "#ffffff";
ctx.textBaseline = "top";
@@ -87,9 +79,9 @@ onRender((ctx) => {
// achievement list (reversed iteration because they appear in cascade)
ctx.globalAlpha = store.isIntro
? store.intro.stage2Opacity
? store.intro.stage1Opacity
: store.isOutro
? store.outro.stage2Opacity
? store.outro.stage1Opacity
: 1;
ctx.font = "7px NDS7";
for (let i = ACHIEVEMENTS_TOP_SCREEN_COUNT - 1; i >= 0; i--) {