119 lines
4.1 KiB
TypeScript
119 lines
4.1 KiB
TypeScript
import { PanelLeftOpen, PanelRightOpen } from 'lucide-react'
|
|
import desertBg from '../../assets/desert.png'
|
|
import muleSprites from '../../assets/mule-sprites.png'
|
|
|
|
interface TopBarProps {
|
|
leftSidebarOpen: boolean
|
|
rightSidebarOpen: boolean
|
|
onExpandLeft: () => void
|
|
onExpandRight: () => void
|
|
}
|
|
|
|
// Block-character ASCII rendering of "Mulimago" — sits on a black plate
|
|
// in place of the old text title.
|
|
const MULIMAGO_ASCII = `▖ ▖ ▜ ▘
|
|
▛▖▞▌▌▌▐ ▌▛▛▌▀▌▛▌█▌
|
|
▌▝ ▌▙▌▐▖▌▌▌▌█▌▙▌▙▖`
|
|
|
|
const ROMAN_PAIRS: [number, string][] = [
|
|
[1000, 'M'], [900, 'CM'], [500, 'D'], [400, 'CD'],
|
|
[100, 'C'], [90, 'XC'], [50, 'L'], [40, 'XL'],
|
|
[10, 'X'], [9, 'IX'], [5, 'V'], [4, 'IV'], [1, 'I'],
|
|
]
|
|
|
|
function toRoman(n: number): string {
|
|
let result = ''
|
|
for (const [value, symbol] of ROMAN_PAIRS) {
|
|
while (n >= value) {
|
|
result += symbol
|
|
n -= value
|
|
}
|
|
}
|
|
return result
|
|
}
|
|
|
|
/**
|
|
* Slim top bar — animated walking mule on the left over a tiled desert
|
|
* backdrop, settings gear on the right. The active heap badge moved into
|
|
* the Heaps panel in the left sidebar (where it actually relates to the
|
|
* heap rows the user navigates to).
|
|
*
|
|
* Also hosts the "expand sidebar" affordances: when a side panel is
|
|
* collapsed, a small panel-open icon appears on the corresponding edge
|
|
* so the user has a way to bring it back without hunting for the
|
|
* keyboard shortcut. When the panel is open, the button hides — its
|
|
* collapse twin lives in the panel's own header.
|
|
*/
|
|
export function TopBar({
|
|
leftSidebarOpen,
|
|
rightSidebarOpen,
|
|
onExpandLeft,
|
|
onExpandRight,
|
|
}: TopBarProps) {
|
|
return (
|
|
<header
|
|
className="relative flex h-16 items-center justify-between overflow-hidden border-b border-border px-4"
|
|
style={{
|
|
// Two layers: desert tile on top (scrolls right→left), dusk-sky
|
|
// gradient underneath (static). Tile width is fixed at 200px so
|
|
// the `desert-scroll` keyframe can move by exactly one tile and
|
|
// loop seamlessly.
|
|
backgroundImage: `url(${desertBg}), linear-gradient(to bottom, #2b3a5c 0%, #6b6b8a 35%, #d68a5c 75%, #f0c188 100%)`,
|
|
backgroundRepeat: 'repeat-x, no-repeat',
|
|
backgroundSize: '200px 100%, 100% 100%',
|
|
backgroundPosition: '0 bottom, 0 0',
|
|
imageRendering: 'pixelated',
|
|
animation: 'desert-scroll 24s linear infinite',
|
|
}}
|
|
>
|
|
<div className="relative flex items-center gap-3">
|
|
{!leftSidebarOpen && (
|
|
<button
|
|
onClick={onExpandLeft}
|
|
className="rounded bg-black/30 p-1.5 text-text-muted backdrop-blur-sm transition-colors hover:bg-black/50 hover:text-text"
|
|
title="Expand panel (Tab)"
|
|
aria-label="Expand left panel"
|
|
>
|
|
<PanelLeftOpen className="h-4 w-4" />
|
|
</button>
|
|
)}
|
|
<div
|
|
aria-label="Mulimago"
|
|
className="h-12 w-14"
|
|
style={{
|
|
backgroundImage: `url(${muleSprites})`,
|
|
backgroundSize: '300% 200%',
|
|
backgroundRepeat: 'no-repeat',
|
|
imageRendering: 'pixelated',
|
|
animation: 'mule-walk 0.6s steps(1) infinite',
|
|
}}
|
|
/>
|
|
<pre
|
|
aria-label="Mulimago"
|
|
className="rounded bg-black px-2 py-1 font-mono text-[8px] leading-[1.05] text-text"
|
|
style={{ letterSpacing: 0 }}
|
|
>
|
|
{MULIMAGO_ASCII}
|
|
</pre>
|
|
</div>
|
|
<div className="flex h-full items-end gap-2 self-stretch pb-1">
|
|
{!rightSidebarOpen && (
|
|
<button
|
|
onClick={onExpandRight}
|
|
className="self-center rounded bg-black/30 p-1.5 text-text-muted backdrop-blur-sm transition-colors hover:bg-black/50 hover:text-text"
|
|
title="Expand panel (I)"
|
|
aria-label="Expand right panel"
|
|
>
|
|
<PanelRightOpen className="h-4 w-4" />
|
|
</button>
|
|
)}
|
|
<span
|
|
className="text-[10px] font-serif text-black/80"
|
|
>
|
|
Built with hubris • {toRoman(new Date().getFullYear())}
|
|
</span>
|
|
</div>
|
|
</header>
|
|
)
|
|
}
|