diff --git a/app/components/Projects/BottomScreen/Buttons.vue b/app/components/Projects/BottomScreen/Buttons.vue index 3605b60..e142c50 100644 --- a/app/components/Projects/BottomScreen/Buttons.vue +++ b/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, ); - } - if (store.currentProject === store.projects.length - 1) { + } else if (store.currentProject === store.projects.length - 1) { assets.images.projects.bottomScreen.nextDisabled.draw( ctx, BUTTONS.next.position[0] - 14,