diff --git a/docs/UI_DESIGN.md b/docs/UI_DESIGN.md index 4402ea4..6aa0b58 100644 --- a/docs/UI_DESIGN.md +++ b/docs/UI_DESIGN.md @@ -24,7 +24,7 @@ This layout keeps the galculator spirit (base visible at a glance next to the bi ## Keypad Grid (Tactile Decoration) Sparse for MVP (no memory, no %, no bitwise, no scientific, no A-F yet). -The keypad is now decorated to evoke a physical, tactile calculator: +The keypad is decorated to evoke a physical, tactile calculator using only the keys themselves (no enclosing background panel or outer border around the grid): - Each key is a bordered mini-panel (NormalBorder color 238) with its own background and foreground. - Base key style: dark bg 236, light fg 250, subtle border — gives a "raised key" appearance. @@ -33,11 +33,12 @@ The keypad is now decorated to evoke a physical, tactile calculator: - Operators (+ - * / =): accent color 63 for quick recognition. - Clears (C, AC): red-tinted bg 52 + fg 203 (warning/danger). - MOD: highlighted (214 orange). - - BASE: prominent border color 63 + bold (the special display function). -- Pressed state: the key inverts to the bright flashStyle (white fg on 63 bg, bold border) for ~140ms on every action. This provides immediate "tactile click" visual feedback (modeled directly on gostations volume/skip/stop flashes). + - BASE: prominent border color 63 + bold (stands out as the special display function). +- Pressed state: the key inverts to the bright flashStyle (white fg on 63 bg, bold) for ~140ms on every action. This provides immediate "tactile click" visual feedback (modeled directly on gostations volume/skip/stop flashes). - Keys use Height(2) for chunkier, more button-like presence. -- Spacing (" " gaps) between keys and a backing panel (bg 234 + its own border) give the whole keypad a "faceplate" or "keyboard tray" look, making the individual keys pop as separate physical buttons. -- The entire keypad backing is full-width (matching the display) and centered. +- Spacing (" " gaps) between keys. + +The keys sit directly on the main card background (no faceplate container). Layout sketch (subject to refinement; 4-5 columns): diff --git a/internal/ui/ui.go b/internal/ui/ui.go index 64e9c5c..b6b75c1 100644 --- a/internal/ui/ui.go +++ b/internal/ui/ui.go @@ -256,9 +256,9 @@ func (a *App) View() string { row3 := lipgloss.JoinHorizontal(lipgloss.Top, makeKey("1"), spacer, makeKey("2"), spacer, makeKey("3"), spacer, makeKey("-"), spacer, makeKey("AC")) row4 := lipgloss.JoinHorizontal(lipgloss.Top, makeKey("0"), spacer, makeKey("."), spacer, makeKey("+/-"), spacer, makeKey("+"), spacer, makeKey("=")) - // Make the BASE row the same width as the other rows so the vertical join - // produces a clean rectangle. This fixes the chopped bottom border on BASE - // and makes the backing panel dimensions match the actual keypad content. + // Make the BASE row the same width as the other rows. + // This ensures the BASE button is nicely centered on its own row + // when the whole grid is centered under the display. fullRowWidth := lipgloss.Width(row1) baseOnly := makeKey("BASE") baseRow := lipgloss.NewStyle(). @@ -266,25 +266,17 @@ func (a *App) View() string { Align(lipgloss.Center). Render(baseOnly) - // Compact grid of keys — now every row has identical width. + // Compact grid of keys — every row has identical width so the BASE + // button sits nicely centered on its row. rawGrid := lipgloss.JoinVertical(lipgloss.Left, row1, row2, row3, row4, baseRow) - // Keypad backing panel sized *tightly* to the (now rectangular) grid content. - // Then we center the whole panel under the display. This makes the black - // background exactly match the keypad's bounding box instead of having - // dangling empty space on the sides of the BASE row. + // Center the key grid directly under the display. + // No enclosing container or background panel — just the individually + // styled keys (each with their own border + color). keypad := lipgloss.NewStyle(). - Border(lipgloss.NormalBorder()). - BorderForeground(lipgloss.Color("238")). - Background(lipgloss.Color("234")). - Padding(1, 2). - Render(rawGrid) - - // Center the compact keypad panel under the wide display row. - keypad = lipgloss.NewStyle(). Width(dispW). Align(lipgloss.Center). - Render(keypad) + Render(rawGrid) // Hint (minimal, non-wrapping, like gostations final player) hint := lipgloss.NewStyle().Faint(true).Render("Tab:BASE 0-9 . = + - * / m:MOD c:C ac:AC q:quit")