feat(projects): disable prev/next at edges

app/components/Projects/BottomScreen/Buttons.vue

@@ -87,10 +87,16 @@ useScreenClick((x, y) => {
   )
     return;
 
-  if (circleContains(BUTTONS.prev.position, [x, y], CLICK_RADIUS)) {
+  if (
+    circleContains(BUTTONS.prev.position, [x, y], CLICK_RADIUS) &&
+    store.currentProject > 0
+  ) {
     startButtonAnimation("prev");
     store.scrollProjects("left");
-  } else if (circleContains(BUTTONS.next.position, [x, y], CLICK_RADIUS)) {
+  } else if (
+    circleContains(BUTTONS.next.position, [x, y], CLICK_RADIUS) &&
+    store.currentProject < store.projects.length - 1
+  ) {
     startButtonAnimation("next");
     store.scrollProjects("right");
   } else if (circleContains(BUTTONS.quit.position, [x, y], CLICK_RADIUS)) {
@@ -106,6 +112,22 @@ useScreenClick((x, y) => {
 });
 
 useRender((ctx) => {
+  // Draw disabled buttons
+  if (store.currentProject === 0) {
+    ctx.drawImage(
+      assets.projects.bottomScreen.prevDisabled,
+      BUTTONS.prev.position[0] - 14,
+      BUTTONS.prev.position[1] - 14,
+    );
+  }
+  if (store.currentProject === store.projects.length - 1) {
+    ctx.drawImage(
+      assets.projects.bottomScreen.nextDisabled,
+      BUTTONS.next.position[0] - 14,
+      BUTTONS.next.position[1] - 14,
+    );
+  }
+
   if (currentAnimation?.showButton) {
     const image = BUTTONS[currentAnimation.type].image;
     ctx.drawImage(
@@ -142,14 +164,19 @@ useKeyDown((key) => {
     store.showConfirmationPopup
   )
     return;
+
   switch (key) {
     case "NDS_LEFT":
+      if (store.currentProject > 0) {
         startButtonAnimation("prev");
         store.scrollProjects("left");
+      }
       break;
     case "NDS_RIGHT":
+      if (store.currentProject < store.projects.length - 1) {
         startButtonAnimation("next");
         store.scrollProjects("right");
+      }
       break;
     case "NDS_A":
     case "NDS_START":