Add spacers

jcreedcmu · Feb 5, 2024 · ba8e774 · ba8e774
1 parent 43195e7
commit ba8e774
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 1 deletion.
diff --git a/src/ui/render.ts b/src/ui/render.ts
@@ -20,7 +20,7 @@ import { drawAnimation } from './drawAnimation';
 import { drawBonus } from './drawBonus';
 import { CanvasInfo } from './use-canvas';
 import { cell_in_canvas, drawBubble, pan_canvas_from_world_of_state } from './view-helpers';
-import { GLOBAL_BORDER, PANIC_THICK, canvas_bds_in_canvas, canvas_from_hand, canvas_from_toolbar, effective_toolbar_bds_in_canvas, getWidgetPoint, hand_bds_in_canvas, inner_hand_bds_in_canvas, panic_bds_in_canvas, pause_button_bds_in_canvas, score_bds_in_canvas, shuffle_button_bds_in_canvas, toolbar_bds_in_canvas, world_bds_in_canvas } from './widget-helpers';
+import { GLOBAL_BORDER, PANIC_THICK, canvas_bds_in_canvas, canvas_from_hand, canvas_from_toolbar, effective_toolbar_bds_in_canvas, getWidgetPoint, hand_bds_in_canvas, inner_hand_bds_in_canvas, panic_bds_in_canvas, pause_button_bds_in_canvas, score_bds_in_canvas, shuffle_button_bds_in_canvas, spacer1_bds_in_canvas, spacer2_bds_in_canvas, toolbar_bds_in_canvas, world_bds_in_canvas } from './widget-helpers';
 
 const INTERFACE_RADIUS = 2 * GLOBAL_BORDER;
 const PANIC_RADIUS = Math.min(INTERFACE_RADIUS, PANIC_THICK / 2);
@@ -143,6 +143,9 @@ function drawToolbar(d: CanvasRenderingContext2D, state: CoreState): void {
   d.fillStyle = grad;
   d.fill();
 
+  fillRect(d, spacer1_bds_in_canvas, grad);
+  fillRect(d, spacer2_bds_in_canvas, grad);
+
   // Draw gradient for panic bar
   if (!hasLost) {
     // XXX Probably should hoist this gradient construction up

diff --git a/src/ui/widget-helpers.ts b/src/ui/widget-helpers.ts
@@ -12,6 +12,7 @@ const HAND_VERT_PADDING = 10;
 const HAND_VERT_MARGIN = 12;
 const HAND_HORIZ_MARGIN = 16;
 export const PANIC_THICK = 10;
+const SPACER_WIDTH = 5;
 
 export const canvas_bds_in_canvas: Rect = { p: { x: 0, y: 0 }, sz: { x: 1024, y: 768 } };
 export const DEFAULT_TILE_SCALE = 48;
@@ -42,7 +43,11 @@ const widgetTree = packVert(
           packHoriz(
             pauseButton,
             fixedRect({ y: 0, x: HAND_HORIZ_MARGIN }),
+            nameRect('spacer1', fixedRect({ y: 0, x: SPACER_WIDTH })),
+            fixedRect({ y: 0, x: HAND_HORIZ_MARGIN / 2 }),
             innerHand,
+            fixedRect({ y: 0, x: HAND_HORIZ_MARGIN / 2 }),
+            nameRect('spacer2', fixedRect({ y: 0, x: SPACER_WIDTH })),
             fixedRect({ y: 0, x: HAND_HORIZ_MARGIN }),
             scoreRect,
           ),
@@ -55,6 +60,8 @@ const widgetTree = packVert(
 const rects = layout(canvas_bds_in_canvas, widgetTree);
 
 export const score_bds_in_canvas = rects['score'];
+export const spacer1_bds_in_canvas = rects['spacer1'];
+export const spacer2_bds_in_canvas = rects['spacer2'];
 export const hand_bds_in_canvas = rects['hand'];
 export const inner_hand_bds_in_canvas = rects['inner_hand'];
 export const hand_tile_bds_in_canvas = rects['hand_tiles'];