diff --git a/src/ui/render.ts b/src/ui/render.ts index e2c6ba5..b98ee5a 100644 --- 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 index f1c822e..efe652e 100644 --- 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'];