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

fix: reset store + animate intro on mount, and fix wrong opacity/positions

Browse Source
This commit is contained in:
Stevan
2025-11-17 01:22:13 +01:00
parent e5ed33f5ce
commit 8d186df4cb
9 changed files with 34 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/components/Contact/BottomScreen/Background.vue
View File

@@ -4,8 +4,6 @@ const store = useContactStore();
const homeBackgroundImage = useTemplateRef("homeBackgroundImage"); const homeBackgroundImage = useTemplateRef("homeBackgroundImage");
const contactBackgroundImage = useTemplateRef("contactBackgroundImage"); const contactBackgroundImage = useTemplateRef("contactBackgroundImage");
callOnce("contactIntro", store.animateIntro);
useRender((ctx) => { useRender((ctx) => {
if (!homeBackgroundImage.value || !contactBackgroundImage.value) return; if (!homeBackgroundImage.value || !contactBackgroundImage.value) return;

7
app/components/Contact/TopScreen/TopScreen.vue
View File

@@ -2,6 +2,13 @@
import Background from "./Background.vue"; import Background from "./Background.vue";
import LeftBar from "./LeftBar.vue"; import LeftBar from "./LeftBar.vue";
import Title from "./Title.vue"; import Title from "./Title.vue";
const store = useContactStore();
onMounted(() => {
store.$reset();
store.animateIntro();
});
</script> </script>
<template> <template>

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

@@ -46,7 +46,8 @@ const getButtonOffset = (button: ButtonType) => {
const getOpacity = (button?: ButtonType) => { const getOpacity = (button?: ButtonType) => {
if (store.isIntro) return store.intro.stage1Opacity; if (store.isIntro) return store.intro.stage1Opacity;
if (selectedButton.value === button) return 1; if (selectedButton.value === button) return 1;
return store.outro.stage1Opacity; if (store.isOutro) return store.outro.stage1Opacity;
return 1;
}; };
</script> </script>

8
app/components/Home/TopScreen/Calendar.vue
View File

@@ -29,7 +29,9 @@ useRender((ctx) => {
ctx.globalAlpha = store.isIntro ctx.globalAlpha = store.isIntro
? store.intro.stage1Opacity ? store.intro.stage1Opacity
: store.outro.stage1Opacity; : store.isOutro
? store.outro.stage1Opacity
: 1;
ctx.drawImage(calendarImage.value, CALENDAR_LEFT - 3, CALENDAR_TOP - 33); ctx.drawImage(calendarImage.value, CALENDAR_LEFT - 3, CALENDAR_TOP - 33);
const extraRow = CALENDAR_COLS * CALENDAR_ROWS - daysInMonth - firstDay < 0; const extraRow = CALENDAR_COLS * CALENDAR_ROWS - daysInMonth - firstDay < 0;
@@ -39,7 +41,9 @@ useRender((ctx) => {
ctx.globalAlpha = store.isIntro ctx.globalAlpha = store.isIntro
? store.intro.stage1Opacity ? store.intro.stage1Opacity
: store.outro.stage2Opacity; : store.isOutro
? store.outro.stage2Opacity
: 1;
for (let col = 0; col < CALENDAR_ROWS + (extraRow ? 1 : 0); col += 1) { for (let col = 0; col < CALENDAR_ROWS + (extraRow ? 1 : 0); col += 1) {
for (let row = 0; row < CALENDAR_COLS; row += 1) { for (let row = 0; row < CALENDAR_COLS; row += 1) {
const cellIndex = col * CALENDAR_COLS + row; const cellIndex = col * CALENDAR_COLS + row;

8
app/components/Home/TopScreen/Clock.vue
View File

@@ -56,12 +56,16 @@ useRender((ctx) => {
ctx.globalAlpha = store.isIntro ctx.globalAlpha = store.isIntro
? store.intro.stage1Opacity ? store.intro.stage1Opacity
: store.outro.stage1Opacity; : store.isOutro
? store.outro.stage1Opacity
: 1;
ctx.drawImage(clockImage.value, 13, 45); ctx.drawImage(clockImage.value, 13, 45);
ctx.globalAlpha = store.isIntro ctx.globalAlpha = store.isIntro
? store.intro.stage1Opacity ? store.intro.stage1Opacity
: store.outro.stage2Opacity; : store.isOutro
? store.outro.stage2Opacity
: 1;
const now = new Date(); const now = new Date();
const renderHand = ( const renderHand = (

7
app/components/Home/TopScreen/StatusBar.vue
View File

@@ -6,9 +6,6 @@ const gbaDisplayImage = useTemplateRef("gbaDisplayImage");
const startupModeImage = useTemplateRef("startupModeImage"); const startupModeImage = useTemplateRef("startupModeImage");
const batteryImage = useTemplateRef("batteryImage"); const batteryImage = useTemplateRef("batteryImage");
// TODO: don't call it here
callOnce("intro", () => store.animateIntro());
useRender((ctx) => { useRender((ctx) => {
if ( if (
!statusBarImage.value || !statusBarImage.value ||
@@ -20,9 +17,9 @@ useRender((ctx) => {
const TEXT_Y = 11; const TEXT_Y = 11;
ctx.translate(0, store.intro.statusBarY); ctx.translate(0, store.isIntro ? store.intro.statusBarY : 0);
ctx.globalAlpha = store.outro.stage2Opacity; ctx.globalAlpha = store.isOutro ? store.outro.stage2Opacity : 1;
ctx.drawImage(statusBarImage.value, 0, 0); ctx.drawImage(statusBarImage.value, 0, 0);
ctx.fillStyle = "#ffffff"; ctx.fillStyle = "#ffffff";

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

@@ -3,6 +3,13 @@ import Background from "./Background.vue";
import Calendar from "./Calendar.vue"; import Calendar from "./Calendar.vue";
import Clock from "./Clock.vue"; import Clock from "./Clock.vue";
import StatusBar from "./StatusBar.vue"; import StatusBar from "./StatusBar.vue";
const store = useHomeStore();
onMounted(() => {
store.$reset();
store.animateIntro();
});
</script> </script>
<template> <template>

2
app/stores/contact.ts
View File

@@ -13,7 +13,7 @@ export const useContactStore = defineStore("contact", {
bottomBarY: SCREEN_HEIGHT + 20, bottomBarY: SCREEN_HEIGHT + 20,
}, },
isIntro: false, isIntro: true,
}), }),
actions: { actions: {

6
app/stores/home.ts
View File

@@ -9,11 +9,11 @@ export const useHomeStore = defineStore("home", {
outro: { outro: {
buttonOffsetY: 0, buttonOffsetY: 0,
stage1Opacity: 1, stage1Opacity: 0,
stage2Opacity: 1, stage2Opacity: 0,
}, },
isIntro: false, isIntro: true,
isOutro: false, isOutro: false,
}), }),