Orkuncakilkaya
1dad96102a
A game no longer writes a host:
- The runtime reads Input itself: focus and keyboard navigation (Tab, arrows, Enter/Space,
autofocus), the pointer (hover, :active, click on release, drag), and scroll boxes with the
wheel, a draggable scrollbar, clipping and scroll-into-view.
- HTML's controls are built in (button, checkbox, radio, range, select, text, key capture), made
of plain parts a stylesheet styles, each reporting with on-change and event.value.
- ludic.ui/render3d.ludic draws with render3d's overlay: textures, named atlases (icon:NAME),
nine-slice border-image, rounded rects and rings, clipping, and a scale.
- Hooks for the program's language, sounds and clock (ui_translator, ui_sounds, ui_clock).
- ui_dev: hot reload, errors on screen, LUDIC_UI_DUMP.
- CSS:
- colours as #rgb / #rrggbbaa / rgb() / rgba() / names;
- border-radius and outline (following the radius), box-shadow, background-image and a tinted
border-image;
- group opacity, @keyframes / animation, transition;
- :focus, :focus-visible and :focus-within.
- HTML mixed content, and boolean attributes.
- render3d gains tex_width / tex_height, and the XML reader keeps text runs in order.
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
70 lines
2.8 KiB
Text
70 lines
2.8 KiB
Text
# elem.ludic - an element made from its template: what kind of node its tag is, its id, classes
|
|
# and attributes (kept for selectors, applied after every rule), its text, and its children
|
|
const EL_BOXES: string = " col div section header footer nav main article aside ul ol li form box "
|
|
const EL_TEXTS: string = " text span p label h1 h2 h3 h4 h5 h6 strong em small b i a option "
|
|
function bd_elem(k: UiTpl, e: UiEnv, key: string) -> UiNode {
|
|
ui_at = k.where
|
|
let n = new UiNode
|
|
n.key = key
|
|
n.tag = k.tag
|
|
n.env = e
|
|
n.sheet = k.sheet
|
|
n.style = k.style
|
|
n.children = new []UiNode
|
|
n.classes = new []string
|
|
n.akeys = new []string
|
|
n.avals = new []string
|
|
n.vals = new []Val
|
|
el_kind(n, k.tag)
|
|
for i in 0 .. len(k.keys) { el_keep(n, k.keys[i], ui_eval(k.vals[i], e)) }
|
|
n.hovered = fr_was_hovered(key)
|
|
n.on_names = k.on_keys
|
|
n.on_acts = k.on_acts
|
|
for i in 0 .. len(k.on_keys) {
|
|
if k.on_keys[i] == "press" { n.act = k.on_acts[i] }
|
|
}
|
|
lc_note(key, k.on_keys, k.on_acts, e)
|
|
bd_kids(k.kids, e, key, n.children)
|
|
if k.text != null { el_text(n, ui_tr(ui_eval_text(k.text, e))) }
|
|
el_inline(n)
|
|
if k.tag == "input" or k.tag == "select" { ct_build(n) }
|
|
return n
|
|
}
|
|
function el_kind(n: UiNode, tag: string) -> void {
|
|
let nv = nt_find(tag)
|
|
if nv != null {
|
|
n.kind = UI_NATIVE
|
|
n.native = nv
|
|
} else if lk_in(EL_TEXTS, tag) { n.kind = UI_TEXT } else if tag == "row" { n.dir = UI_ROW } else if tag == "button" {
|
|
n.dir = UI_ROW
|
|
n.focusable = true
|
|
} else if tag == "input" or tag == "select" { n.focusable = true } else if tag == "spacer" { n.kind = UI_SPACER } else if tag == "scroll" { n.kind = UI_SCROLL } else if tag == "img" { n.kind = UI_IMAGE } else if tag == "hr" { n.kind = UI_RULE } else if not lk_in(EL_BOXES, tag) { ui_err(`<{tag}>: there is no such element`) }
|
|
}
|
|
# a box with words in it holds them as a text of its own, as <div>words</div> does
|
|
function el_text(n: UiNode, s: string) -> void {
|
|
if n.kind != UI_BOX and n.kind != UI_SCROLL {
|
|
n.text = s
|
|
return
|
|
}
|
|
let t = new UiNode
|
|
t.kind = UI_TEXT
|
|
t.text = s
|
|
t.env = n.env
|
|
t.children = new []UiNode
|
|
push(n.children, t)
|
|
}
|
|
# id, class, hidden, disabled and src say what the element is; the rest are applied after the rules
|
|
function el_keep(n: UiNode, key: string, v: Val) -> void {
|
|
let s = vl_text(v)
|
|
if key == "id" { n.id = s } else if key == "class" {
|
|
let parts = lss_split(s, 32)
|
|
for i in 0 .. len(parts) {
|
|
if len(parts[i]) > 0 { push(n.classes, parts[i]) }
|
|
}
|
|
} else if key == "tabindex" { n.focusable = s != "-1" } else if key == "hidden" { n.hidden = el_flag(v) } else if key == "disabled" { n.enabled = not el_flag(v) } else if key == "src" { n.src = s } else {
|
|
if key == "enabled" { n.enabled = el_flag(v) }
|
|
push(n.akeys, key)
|
|
push(n.avals, s)
|
|
push(n.vals, v)
|
|
}
|
|
}
|