feat(projects): display scroll bar

app/components/Projects/BottomScreen/Buttons.vue

@@ -117,16 +117,37 @@ onClick((x, y) => {
   }
 });
 
+const DOT_SIZE = 3;
+const DOT_GAP = 5;
+const SCROLLBAR_Y = 8;
+
 onRender((ctx) => {
-  // Draw disabled buttons
+  const projectsCount = store.projects.length;
+  const step = DOT_SIZE + DOT_GAP;
+  const totalWidth = projectsCount * DOT_SIZE + (projectsCount - 1) * DOT_GAP;
+  const startX = Math.floor((LOGICAL_WIDTH - totalWidth) / 2);
+
+  for (let i = 0; i < projectsCount; i++) {
+    const x = startX + i * step;
+
+    if (i === store.currentProject) {
+      ctx.fillStyle = "#304961";
+      ctx.fillRect(x - 1, SCROLLBAR_Y - 1, DOT_SIZE + 2, DOT_SIZE + 2);
+      ctx.fillStyle = "#f8f8f8";
+      ctx.fillRect(x, SCROLLBAR_Y, DOT_SIZE, DOT_SIZE);
+    } else {
+      ctx.fillStyle = "#4a7898";
+      ctx.fillRect(x, SCROLLBAR_Y, DOT_SIZE, DOT_SIZE);
+    }
+  }
+
   if (store.currentProject === 0) {
     assets.images.projects.bottomScreen.prevDisabled.draw(
       ctx,
       BUTTONS.prev.position[0] - 14,
       BUTTONS.prev.position[1] - 14,
     );
-  }
+  } else if (store.currentProject === store.projects.length - 1) {
-  if (store.currentProject === store.projects.length - 1) {
     assets.images.projects.bottomScreen.nextDisabled.draw(
       ctx,
       BUTTONS.next.position[0] - 14,