Skip to content

feat: add a Bar element that fills to a bound fraction - #106

Merged
oglassdev merged 6 commits into
feat/tintsfrom
feat/bar
Oct 11, 2026
Merged

oglassdev merged 6 commits into
feat/tintsfrom
feat/bar

Conversation

@oglassdev

Copy link
Copy Markdown
Contributor

A smooth progress bar had to be built by hand: generate a dozen tile textures per colour, then work out value → columns → per-tile case in consumer Kotlin. Now a bar is one element that takes a fraction, and the compiler generates the rest.

const health = fraction("health");
const tone = tint("tone", { ok: "#3ddc84", low: "#ff4d4d" });

<Bar bind={health} width={80} height={5} fill={art.barFill} track={art.barTrack} tint={tone} />
override fun health(): Float = player.health / player.maxHealth
  • width and height are 1 to 256 px. fill and the optional track are ordinary art. tint is a hex colour or a tint handle.
  • The bar draws round(fraction × width) columns, with the fraction clamped to 0..1.
  • The fill is revealed left to right, not rescaled: every width shows the leftmost columns exactly as they look in the full bar, so a right end cap only appears at 100%.
  • Colour thresholds use a tint handle: the server picks the palette entry from the value. There is no declarative thresholds form.
  • Works in windows and HUDs, including shader-placed HUDs.
  • Previews take [health, 0.42]. A fraction without preview state draws full.

Cost: the fill is cut into clips of 1, 2, 4, … columns and a value is drawn as one clip per set bit, so at most log2(width)+1 glyphs are sent. Clips with identical pixels share a glyph: a uniform 100 px fill costs 7 glyphs, while art that differs in every column can cost up to one per column. The example's two bars (100 px uniform, 152 px rimmed) add 22 glyph textures and take the compiler output from 515.2 KB to 536.1 KB.

The example adds a budget bar to the shop, a wave bar to the status HUD, and a /bar <0..1|auto> command that pins both.

Checked in a real 26.2 client: the shader-placed HUD bar drew exactly 0, 3, 37, 50 and 100 columns for 0, 0.03, 0.37, 0.5 and 1, in the exact palette colour for each tone; the shop bar drew 0, 5, 64, 76 and 152 columns with the right rim only at 152; previews matched the client's bar pixels at three values.

Not checked in a client: a bar redrawing in an open window (covered by a runtime test), bars inside switch cases or indexed families, bars in anvil windows and non-shader HUDs, and fill art with transparent columns or gradients.

Closes #95.

Checks: just test-rust -p window-core, just gradle :runtime:test --rerun, just check-ts, just test-ts, just golden, just lint, just fmt-check.

Stacked on #105.

🤖 Generated with Claude Code

A bar's fill is an art layer cut into clips of 1, 2, 4, ... columns, each a glyph, so the runtime draws any column count from one clip per set bit. Clips with the same pixels share a glyph. Adds the fraction handle kind, the bar manifest entry, Kotlin codegen, and preview state.
Windows and HUDs bind each bar to a lambda returning a fraction, compose the clips for its column count, and recompose only when that count changes.
…tus HUD

The /bar debug command pins the fraction both draw.
@oglassdev
oglassdev added this pull request to stack #101 October 11, 2026 06:54
@oglassdev
oglassdev merged commit c93eadd into main Oct 11, 2026
11 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Add a fill-bar component

1 participant