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--) {

2
app/components/Home/BottomScreen/BottomScreen.vue
View File

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

6
app/components/Home/BottomScreen/Buttons.vue
View File

@@ -17,7 +17,7 @@ const { selected, selectorPosition } = useButtonNavigation({
settings: [112, 167, 31, 26],
achievements: [225, 167, 31, 26],
},
initialButton: "projects",
initialButton: store.selectedButton,
onButtonClick: (button) => {
if (button === "theme") throw new Error(`Not implemented: ${button}`);
@@ -64,6 +64,10 @@ const { selected, selectorPosition } = useButtonNavigation({
},
});
watch(selected, (newSelected) => {
store.selectedButton = newSelected;
});
const getButtonOffset = (button: (typeof selected)["value"]) => {
if (selected.value === button) return store.outro.buttonOffsetY;
return 0;

4
app/components/Home/TopScreen/TopScreen.vue
View File

@@ -7,8 +7,7 @@ import StatusBar from "./StatusBar.vue";
const store = useHomeStore();
onMounted(() => {
store.$reset();
store.animateIntro();
store.reset();
});
</script>
@@ -17,4 +16,5 @@ onMounted(() => {
<Calendar />
<Clock />
<StatusBar />
<AchievementsFadeToBlack />
</template>

1
app/components/Settings/BottomScreen/BottomScreen.vue
View File

@@ -8,4 +8,5 @@ import Menus from "./Menus/Menus.vue";
<CommonBars />
<Menus />
<CommonConfirmationModal />
<AchievementsFadeToBlack />
</template>

3
app/components/Settings/BottomScreen/Menus/Clock/Alarm.vue
View File

@@ -28,6 +28,7 @@ const { onRender, onClick } = useScreen();
const app = useAppStore();
const store = useSettingsStore();
const achievements = useAchievementsStore();
const achievementsScreen = useAchievementsScreen();
const confirmationModal = useConfirmationModal();
const handleCancel = () => {
@@ -44,7 +45,7 @@ const handleReset = () => {
};
const handleVisitAll = () => {
throw new Error("Not implemented");
achievementsScreen.animateFadeToBlackIntro();
};
onClick((x, y) => {

4
app/components/Settings/BottomScreen/Menus/Menus.vue
View File

@@ -52,7 +52,7 @@ const { select, selected, selectorPosition } = useButtonNavigation({
touchScreen: [175, 119, 49, 49],
},
initialButton: "options",
initialButton: settingsStore.selectedButton,
onButtonClick: (buttonName) => {
if (isSubMenu(buttonName)) {
settingsStore.openSubMenu(buttonName);
@@ -154,6 +154,8 @@ provide("menusContext", {
watch(
selected,
(newSelected) => {
settingsStore.selectedButton = newSelected;
if (settingsStore.currentSubMenu === null) {
if (isMainMenu(newSelected)) {
settingsStore.openMenu(newSelected, false);

1
app/components/Settings/TopScreen/TopScreen.vue
View File

@@ -12,4 +12,5 @@ import Notifications from "./Notifications.vue";
<Clock />
<StatusBar />
<Notifications />
<AchievementsFadeToBlack />
</template>

115
app/stores/achievementsScreen.ts
View File

@@ -2,9 +2,14 @@ import gsap from "gsap";
export const useAchievementsScreen = defineStore("achievementsScreen", {
state: () => ({
fadeToBlack: {
opacity: 0,
active: false,
isOutro: false,
},
intro: {
stage1Opacity: 0,
stage2Opacity: 0,
itemOffsets: {} as Record<number, number>,
progressBar: 0,
},
@@ -12,7 +17,6 @@ export const useAchievementsScreen = defineStore("achievementsScreen", {
outro: {
stage1Opacity: 1,
stage2Opacity: 1,
stage3Opacity: 1,
},
isIntro: true,
@@ -20,6 +24,51 @@ export const useAchievementsScreen = defineStore("achievementsScreen", {
}),
actions: {
animateFadeToBlackIntro() {
this.fadeToBlack.active = true;
this.fadeToBlack.isOutro = false;
gsap
.timeline({
onComplete: () => {
const app = useAppStore();
app.navigateTo("achievements");
},
})
.fromTo(
this.fadeToBlack,
{ opacity: 0 },
{
opacity: 1,
duration: 0.4,
ease: "none",
},
);
},
animateFadeToBlackOutro() {
this.fadeToBlack.active = true;
this.fadeToBlack.isOutro = true;
this.fadeToBlack.opacity = 1;
gsap
.timeline({
onComplete: () => {
this.fadeToBlack.active = false;
this.isOutro = false;
},
})
.fromTo(
this.fadeToBlack,
{ opacity: 1 },
{
opacity: 0,
duration: 0.4,
ease: "none",
},
);
},
animateIntro() {
this.isIntro = true;
this.isOutro = false;
@@ -41,30 +90,20 @@ export const useAchievementsScreen = defineStore("achievementsScreen", {
{ stage1Opacity: 0 },
{
stage1Opacity: 1,
duration: 0.3,
duration: 0.5,
ease: "none",
},
)
.fromTo(
this.intro,
{ stage2Opacity: 0 },
{
stage2Opacity: 1,
duration: 0.5,
ease: "none",
},
0.5,
)
.fromTo(
this.intro,
{ progressBar: 0 },
{
progressBar: 1,
duration: 1.5,
ease: "power2.out",
},
0.25,
);
0.5,
).fromTo(
this.intro,
{ progressBar: 0 },
{
progressBar: 1,
duration: 1.5,
ease: "power2.out",
},
0.25,
);
for (let i = 0; i < itemCount; i++) {
tl.to(
@@ -85,6 +124,14 @@ export const useAchievementsScreen = defineStore("achievementsScreen", {
gsap
.timeline()
.fromTo(
this.outro,
{ stage1Opacity: 1 },
{
stage1Opacity: 0,
duration: 0.3,
},
)
.fromTo(
this.outro,
{ stage2Opacity: 1 },
@@ -92,28 +139,12 @@ export const useAchievementsScreen = defineStore("achievementsScreen", {
stage2Opacity: 0,
duration: 0.3,
},
)
.fromTo(
this.outro,
{ stage3Opacity: 1 },
{
stage3Opacity: 0,
duration: 0.3,
},
"-=0.15",
)
.fromTo(
this.outro,
{ stage1Opacity: 1 },
{
stage1Opacity: 0,
duration: 0.3,
ease: "none",
},
)
.call(() => {
const app = useAppStore();
app.navigateTo("home");
app.navigateTo(app.previousScreen);
this.animateFadeToBlackOutro();
});
},

2
app/stores/app.ts
View File

@@ -29,6 +29,7 @@ export const useAppStore = defineStore("app", {
return {
booted: false,
settings,
previousScreen: "home" as AppScreen,
screen: "home" as AppScreen,
camera: null as THREE.Camera | null,
};
@@ -40,6 +41,7 @@ export const useAppStore = defineStore("app", {
},
navigateTo(screen: AppScreen) {
this.previousScreen = this.screen;
this.screen = screen;
const achievements = useAchievementsStore();

30
app/stores/home.ts
View File

@@ -1,5 +1,13 @@
import gsap from "gsap";
export type HomeButton =
| "projects"
| "contact"
| "gallery"
| "theme"
| "settings"
| "achievements";
export const useHomeStore = defineStore("home", {
state: () => ({
intro: {
@@ -14,11 +22,25 @@ export const useHomeStore = defineStore("home", {
animateTop: false,
},
selectedButton: "projects" as HomeButton,
isIntro: true,
isOutro: false,
}),
actions: {
reset() {
const app = useAppStore();
if (app.previousScreen === "achievements") {
return;
}
const selectedButton = this.selectedButton;
this.$reset();
this.selectedButton = selectedButton;
this.animateIntro();
},
animateIntro() {
this.isIntro = true;
@@ -52,12 +74,18 @@ export const useHomeStore = defineStore("home", {
},
animateOutro(to: AppScreen) {
if (to === "achievements") {
const achievementsScreen = useAchievementsScreen();
achievementsScreen.animateFadeToBlackIntro();
return;
}
this.isOutro = true;
this.outro.animateTop = to !== "settings";
const timeline = gsap.timeline({
onComplete: () => {
this.isOutro = true;
this.isOutro = false;
const app = useAppStore();
if (to === "gallery") {

17
app/stores/settings.ts
View File

@@ -1,8 +1,25 @@
export type SettingsButton =
| "options"
| "optionsLanguage"
| "optionsGbaMode"
| "optionsStartUp"
| "clock"
| "clockAlarm"
| "clockTime"
| "clockDate"
| "user"
| "userBirthday"
| "userUserName"
| "userMessage"
| "userColor"
| "touchScreen";
export const useSettingsStore = defineStore("settings", {
state: () => ({
currentMenu: null as SettingsMenu | null,
currentSubMenu: null as SettingsSubMenu | null,
menuExpanded: false,
selectedButton: "options" as SettingsButton,
}),
actions: {