145 lines
2.8 KiB
TypeScript
145 lines
2.8 KiB
TypeScript
import gsap from "gsap";
|
|
|
|
export const useContactStore = defineStore("contact", {
|
|
state: () => ({
|
|
intro: {
|
|
stage1Opacity: 0,
|
|
stage2Opacity: 0,
|
|
stage3Opacity: 0,
|
|
|
|
titleY: LOGICAL_HEIGHT,
|
|
|
|
barOffsetY: 24,
|
|
},
|
|
|
|
outro: {
|
|
stage1Opacity: 1,
|
|
stage2Opacity: 1,
|
|
stage3Opacity: 1,
|
|
},
|
|
|
|
isIntro: true,
|
|
isOutro: false,
|
|
|
|
notifications: [] as string[],
|
|
notificationsYOffset: 0,
|
|
}),
|
|
|
|
actions: {
|
|
animateIntro() {
|
|
this.isIntro = true;
|
|
|
|
gsap
|
|
.timeline()
|
|
.fromTo(
|
|
this.intro,
|
|
{
|
|
stage1Opacity: 0,
|
|
titleY: LOGICAL_HEIGHT,
|
|
},
|
|
{
|
|
stage1Opacity: 1,
|
|
titleY: LOGICAL_HEIGHT - 23,
|
|
duration: 0.1,
|
|
ease: "none",
|
|
},
|
|
1,
|
|
)
|
|
.fromTo(
|
|
this.intro,
|
|
{ stage2Opacity: 0 },
|
|
{
|
|
stage2Opacity: 1,
|
|
duration: 0.1,
|
|
ease: "none",
|
|
},
|
|
1.15,
|
|
)
|
|
.fromTo(
|
|
this.intro,
|
|
{
|
|
stage3Opacity: 0,
|
|
barOffsetY: 24,
|
|
},
|
|
{
|
|
stage3Opacity: 1,
|
|
barOffsetY: 0,
|
|
duration: 0.1,
|
|
ease: "none",
|
|
},
|
|
1.3,
|
|
)
|
|
.call(() => {
|
|
this.isIntro = false;
|
|
});
|
|
},
|
|
|
|
pushNotification(content: string) {
|
|
this.notifications.push(content);
|
|
|
|
const { assets } = useAssets();
|
|
assets.audio.messageSent.play();
|
|
|
|
gsap.fromTo(
|
|
this,
|
|
{ notificationsYOffset: 20 },
|
|
{ notificationsYOffset: 0, duration: 0.075 },
|
|
);
|
|
|
|
if (this.notifications.length === 36) {
|
|
const achievements = useAchievementsStore();
|
|
achievements.unlock("contact_36_notifications");
|
|
}
|
|
},
|
|
|
|
animateOutro() {
|
|
this.isOutro = true;
|
|
|
|
const { assets } = useAssets();
|
|
assets.audio.menuConfirmed.play();
|
|
|
|
const timeline = gsap.timeline({
|
|
onComplete: () => {
|
|
setTimeout(() => {
|
|
this.isOutro = false;
|
|
const app = useAppStore();
|
|
app.navigateTo("home");
|
|
}, 1000);
|
|
},
|
|
});
|
|
|
|
timeline
|
|
.fromTo(
|
|
this.outro,
|
|
{ stage1Opacity: 1 },
|
|
{
|
|
stage1Opacity: 0,
|
|
duration: 0.2,
|
|
ease: "none",
|
|
},
|
|
0,
|
|
)
|
|
.fromTo(
|
|
this.outro,
|
|
{ stage2Opacity: 1 },
|
|
{
|
|
stage2Opacity: 0,
|
|
duration: 0.25,
|
|
ease: "none",
|
|
},
|
|
0.25,
|
|
)
|
|
.fromTo(
|
|
this.outro,
|
|
{ stage3Opacity: 1 },
|
|
{
|
|
stage3Opacity: 0,
|
|
duration: 0.3,
|
|
ease: "none",
|
|
},
|
|
0.5,
|
|
);
|
|
},
|
|
},
|
|
});
|