feat(ui): popovers, tooltips, progress; the render3d backend installs itself; duplicate names caught first

- `popover`: a top layer that keeps the pointer and the keyboard, closed by a press outside or Esc.
- `title` tooltips after half a second's rest, styled by .ui-tooltip.
- `<progress>` and `<meter>`.
- Atlases take rows and number cells, and importing ludic.ui/render3d.ludic is enough to draw with
  render3d.
- The compiler reports two declarations of one name before it type-checks, so a package global
  clashing with a program's reads as that, not as 29 type errors.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Orkun ÇAKILKAYA 2026-09-24 17:41:02 +03:00
parent 1dad96102a
commit 0a7525b125
24 changed files with 243 additions and 21 deletions

View file

@ -0,0 +1,59 @@
# ui_popover.ludic — HTML's popover and progress in ludic.ui: a button opens a popover of verbs, the
# keyboard stays inside it, a press outside or Esc closes it, and a progress bar fills to its value.
import "ludic.ui"
import "ui_popover_parts/Verbs.ludic"
program UiPopover {
numbers float
function frame(i: UiInput) -> UiNode {
ui_input(i)
ui_show("Verbs", null, 0.0, 0.0, 400.0, 400.0)
let root: UiNode = ui_nodes("Verbs", null)
ui_place(root, 0.0, 0.0, 400.0, 400.0)
return root
}
function click(x: float, y: float) -> void {
let d = new UiInput
d.x = x
d.y = y
d.down = true
frame(d)
let u = new UiInput
u.x = x
u.y = y
frame(u)
}
function said(root: UiNode) -> string {
let page = root.children[0]
return page.children[len(page.children) - 1].text
}
entry {
ui_backend(new UiBackend)
var root = frame(new UiInput)
let cell = root.children[0].children[0]
click(cell.x + 2.0, cell.y + 2.0)
root = frame(new UiInput)
let tab = new UiInput
tab.tab = true
frame(tab)
frame(tab)
root = frame(tab)
let enter = new UiInput
enter.enter = true
root = frame(enter)
root = frame(new UiInput)
let first = said(root)
click(cell.x + 2.0, cell.y + 2.0)
root = frame(new UiInput)
let opened = said(root)
click(390.0, 390.0)
root = frame(new UiInput)
let outside = said(root)
click(cell.x + 2.0, cell.y + 2.0)
let esc = new UiInput
esc.escape = true
frame(esc)
root = frame(new UiInput)
let bar = root.children[0].children[1]
print(`{first} | {opened} | {outside} | {said(root)} | fill {int(bar.children[0].cw)} of {int(bar.cw)}`)
}
}

View file

@ -0,0 +1,3 @@
.page { width: 300px; height: 200px; gap: 4px }
.verbs { top: 40px; left: 10px; width: 120px }
progress { width: 200px }

View file

@ -0,0 +1,6 @@
# Verbs.ludic - a grid cell that opens a popover of verbs
component Verbs {
state open: bool = false
state used: string = "none"
state health: int = 30
}

View file

@ -0,0 +1,11 @@
<div class="page">
<button id="cell" on-click="set open = true">Axe</button>
<if test="{open}">
<div popover class="verbs" on-close="set open = false">
<button on-click="set used = 'drop'; set open = false">Drop</button>
<button on-click="set used = 'give'; set open = false">Give</button>
</div>
</if>
<progress value="{health}" max="{100}"/>
<p title="how much is left">{used} {open}</p>
</div>