feat(projects): intro and outro animations

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