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>
99 lines
3.9 KiB
Text
99 lines
3.9 KiB
Text
# draw.ludic - the laid-out nodes through the renderer: the background (rounded by border-radius),
|
|
# the border, the content, the children in painting order (a scroll box's clipped to it, with its
|
|
# bar), then the outline, which is where a focus ring is drawn
|
|
var fr_ga: float = 1.0 # the opacity of everything around this element, which it multiplies
|
|
function fr_draw(n: UiNode) -> void {
|
|
let outer = fr_ga
|
|
fr_ga = outer * n.alpha
|
|
fr_draw_in(n)
|
|
fr_ga = outer
|
|
}
|
|
function fr_draw_in(n: UiNode) -> void {
|
|
if n.kind == UI_NATIVE {
|
|
n.native.draw(n)
|
|
return
|
|
}
|
|
fr_background(n)
|
|
fr_border(n)
|
|
if n.kind == UI_TEXT { fr_text(n) }
|
|
if n.kind == UI_IMAGE and ui_be.image != null { ui_be.image(n.src, n.x + n.pl + n.border, n.y + n.pt + n.border, n.cw - ly_hin(n), n.ch - ly_vin(n), n.rfg, fr_ga * n.rfg_a) }
|
|
let clipped = n.kind == UI_SCROLL and ui_be.clip != null
|
|
if clipped { fr_clip_push(n.x, n.y, n.cw, n.ch) }
|
|
if n.children != null { fr_children(n) }
|
|
if clipped { fr_clip_pop() }
|
|
if n.kind == UI_SCROLL { sc_bar(n) }
|
|
if n.outline_w > 0.0 { fr_outline(n) }
|
|
}
|
|
# the shadow, then the background: a nine-slice tinted by the background colour, or the colour
|
|
# (rounded), then a picture over it
|
|
function fr_background(n: UiNode) -> void {
|
|
if n.sh_c >= 0 { fr_fill(n, n.x + n.sh_x, n.y + n.sh_y, n.sh_c, fr_ga * n.sh_a) }
|
|
if n.bg >= 0 or n.bi_src != "" {
|
|
var c = n.bg
|
|
var a = fr_ga * n.bg_a
|
|
if c < 0 {
|
|
c = 16777215
|
|
a = fr_ga
|
|
}
|
|
fr_fill(n, n.x, n.y, c, a)
|
|
}
|
|
if n.bg_img != "" and ui_be.image != null { ui_be.image(n.bg_img, n.x, n.y, n.cw, n.ch, 16777215, fr_ga) }
|
|
}
|
|
function fr_fill(n: UiNode, x: float, y: float, c: int, a: float) -> void {
|
|
if n.bi_src != "" and ui_be.nine != null {
|
|
ui_be.nine(n.bi_src, n.bi_slice, x, y, n.cw, n.ch, Math.min(n.bi_width, Math.min(n.cw, n.ch) / 2.0), c, a)
|
|
return
|
|
}
|
|
fr_box(x, y, n.cw, n.ch, n.radius, c, a)
|
|
}
|
|
function fr_box(x: float, y: float, w: float, h: float, r: float, c: int, a: float) -> void {
|
|
if r > 0.0 and ui_be.round != null { ui_be.round(x, y, w, h, r, c, a) } else if ui_be.rect != null { ui_be.rect(x, y, w, h, c, a) }
|
|
}
|
|
function fr_border(n: UiNode) -> void {
|
|
if n.border <= 0.0 or ui_be.rect == null { return }
|
|
var c = n.border_c
|
|
var ca = fr_ga * n.border_a
|
|
if c < 0 {
|
|
c = n.rfg
|
|
ca = fr_ga * n.rfg_a
|
|
}
|
|
fr_frame(n.x, n.y, n.cw, n.ch, n.border, c, ca)
|
|
}
|
|
function fr_frame(x: float, y: float, w: float, h: float, b: float, c: int, a: float) -> void {
|
|
ui_be.rect(x, y, w, b, c, a)
|
|
ui_be.rect(x, y + h - b, w, b, c, a)
|
|
ui_be.rect(x, y + b, b, h - b * 2.0, c, a)
|
|
ui_be.rect(x + w - b, y + b, b, h - b * 2.0, c, a)
|
|
}
|
|
# an outline follows the box's corners, as CSS's does: rounded by border-radius, grown by its offset
|
|
function fr_outline(n: UiNode) -> void {
|
|
var c = n.outline_c
|
|
if c < 0 { c = n.rfg }
|
|
let o = n.outline_off + n.outline_w
|
|
let a = fr_ga * n.outline_a
|
|
if n.radius > 0.0 and ui_be.ring != null {
|
|
ui_be.ring(n.x - o, n.y - o, n.cw + o * 2.0, n.ch + o * 2.0, n.radius + o, n.outline_w, c, a)
|
|
return
|
|
}
|
|
fr_frame(n.x - o, n.y - o, n.cw + o * 2.0, n.ch + o * 2.0, n.outline_w, c, a)
|
|
}
|
|
# a text's lines (one, or the wrapped ones), each placed by text-align, the last cut by an ellipsis
|
|
function fr_text(n: UiNode) -> void {
|
|
let y = n.y + n.pt + n.border
|
|
let a = n.rfg_a * fr_ga
|
|
if n.lines == null {
|
|
var s = n.text
|
|
if n.ellipsis { s = ly_ellipsis(s, n.rsize, n.cw - ly_hin(n)) }
|
|
ui_be.text(fr_line_x(n, s), y, s, n.rsize, n.rfg, a)
|
|
return
|
|
}
|
|
for i in 0 .. len(n.lines) { ui_be.text(fr_line_x(n, n.lines[i]), y + float(i) * n.rsize * 1.25, n.lines[i], n.rsize, n.rfg, a) }
|
|
}
|
|
# where a line starts: text-align within the room the box gives it
|
|
function fr_line_x(n: UiNode, s: string) -> float {
|
|
let x = n.x + n.pl + n.border
|
|
if n.talign == UI_START { return x }
|
|
let spare = n.cw - ly_hin(n) - ly_text_w(s, n.rsize)
|
|
if n.talign == UI_CENTER { return x + spare / 2.0 }
|
|
return x + spare
|
|
}
|