feat(projects): display scroll bar
This commit is contained in:
@@ -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,
|
||||
|
||||
Reference in New Issue
Block a user