Files
pihkaal-me/app/stores/intro.ts

84 lines
1.7 KiB
TypeScript

import gsap from "gsap";
export const useIntroStore = defineStore("intro", {
state: () => ({
intro: {
textOpacity: 0,
logoFrameIndex: 0,
},
outro: {
textOpacity: 1,
backgroundOpacity: 0,
},
isIntro: true,
isOutro: false,
}),
actions: {
animateIntro() {
this.isIntro = true;
const { assets } = useAssets();
const app = useAppStore();
const delay = app.settings.renderingMode === "2d" ? 1 : 3;
const totalFrames = Object.keys(assets.images.intro.logoAnimated).length;
const logoDuration = totalFrames / 25;
gsap
.timeline({
onComplete: () => {
this.isIntro = false;
},
})
.to(
this.intro,
{
textOpacity: 1,
duration: 0.1,
ease: "none",
},
delay,
)
.to(
this.intro,
{
logoFrameIndex: totalFrames - 1,
duration: logoDuration,
ease: "steps(" + (totalFrames - 1) + ")",
},
delay,
)
.call(() => {
const app = useAppStore();
app.allowHints();
});
},
animateOutro() {
this.isOutro = true;
gsap
.timeline()
.to(this.outro, {
textOpacity: 0,
duration: 0.25,
ease: "none",
})
.to(this.outro, {
backgroundOpacity: 1,
duration: 0.5,
delay: 0.5,
ease: "none",
})
.call(() => {
const app = useAppStore();
const achievements = useAchievementsStore();
app.booted = true;
achievements.unlock("boot");
});
},
},
});