feat(projects): intro and outro animations

app/components/Projects/BottomScreen/BottomScreen.vue

@@ -8,10 +8,20 @@ onMounted(async () => {
   store.$reset();
   await store.loadProjects();
 });
+
+watch(
+  () => store.loading,
+  () => {
+    if (!store.loading) {
+      store.animateIntro();
+    }
+  },
+);
 </script>
 
 <template>
-  <Background />
-
-  <Buttons v-if="!store.loading" />
+  <template v-if="!store.loading">
+    <Background />
+    <Buttons />
+  </template>
 </template>

app/components/Projects/BottomScreen/Buttons.vue

@@ -90,7 +90,7 @@ useScreenClick((x, y) => {
     store.scrollProjects("right");
   } else if (circleContains(BUTTONS.quit.position, [x, y], CLICK_RADIUS)) {
     startButtonAnimation("quit");
-    throw new Error("quit");
+    store.animateOutro();
   } else if (
     circleContains(BUTTONS.link.position, [x, y], CLICK_RADIUS) &&
     project?.link
@@ -102,9 +102,7 @@ useScreenClick((x, y) => {
 });
 
 useRender((ctx) => {
-  if (!currentAnimation) return;
-
-  if (currentAnimation.showButton) {
+  if (currentAnimation?.showButton) {
     const image = BUTTONS[currentAnimation.type].image;
     ctx.drawImage(
       image!,
@@ -113,7 +111,7 @@ useRender((ctx) => {
     );
   }
 
-  if (currentAnimation.showSmallCircle) {
+  if (currentAnimation?.showSmallCircle) {
     ctx.drawImage(
       assets.projects.bottomScreen.circleSmall,
       currentAnimation.position[0] - 28,
@@ -121,15 +119,17 @@ useRender((ctx) => {
     );
   }
 
-  if (currentAnimation.showBigCircle) {
+  if (currentAnimation?.showBigCircle) {
     ctx.drawImage(
       assets.projects.bottomScreen.circleBig,
       currentAnimation.position[0] - 44,
       currentAnimation.position[1] - 44,
     );
   }
-});
 
+  ctx.fillStyle = `rgba(0, 0, 0, ${store.isIntro ? store.intro.fadeOpacity : store.isOutro ? store.outro.fadeOpacity : 0})`;
+  ctx.fillRect(0, 0, SCREEN_WIDTH, SCREEN_HEIGHT);
+});
 useKeyDown((key) => {
   if (currentAnimation) return;
   switch (key) {