Orkuncakilkaya
66a2bc2214
A `view Name { field = x; function q(..); on e(..) }` declaration is the one bridge between a
program and its UI: it writes view_<name>() -> UiView, whose model is a Value of every field and
whose call runs a query or an event by name.
ludic.ui is a template runtime:
- HTML-shaped XML screens and components, loaded at run time;
- {expression} bindings, if/else/each, props, slots, per-instance state;
- on-press / onclick actions (event, set, emit);
- component libraries (export="true", <import src as>).
Styling:
- stylesheets in <style> or importable .lss files (@import);
- CSS selectors (#id, .class, [attr=v], descendant and > combinators, :hover, :disabled,
:first-child, :last-child, :nth-child, :not) weighed by specificity;
- the box model and flex under CSS's property names.
Also:
- default parameters, and positional-then-named calls;
- Value gains a float kind;
- a function shadowing a runtime one is refused;
- an index is evaluated before the slice is read;
- runtime errors name the right file.
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
48 lines
2.5 KiB
Text
48 lines
2.5 KiB
Text
# ui_templates.ludic — ludic.ui without a renderer: a shop written as a template, reading a view
|
|
# of the program's state and answering with its events. A press is made as a pointer would make
|
|
# it; it runs the view's event once the frame is built, and a component's own state keeps. The
|
|
# row comes from a component library, whose unexported Price no other file can use.
|
|
import "ludic.ui"
|
|
program UiTemplates {
|
|
numbers float
|
|
property Item {
|
|
name: string = ""
|
|
cost: int = 0
|
|
}
|
|
var stock: []Item = new []Item
|
|
var purse: int = 100
|
|
var bought: []int = new []int
|
|
function add(name: string, cost: int) -> void {
|
|
let it = new Item
|
|
it.name = name
|
|
it.cost = cost
|
|
push(stock, it)
|
|
}
|
|
view Shop {
|
|
purse = purse
|
|
stock = stock
|
|
owned: int = len(bought)
|
|
function afford(i: int) -> bool { return purse >= stock[i].cost }
|
|
on buy(i: int) {
|
|
purse -= stock[i].cost
|
|
push(bought, i)
|
|
}
|
|
}
|
|
const KIT: string = "<ui>\n<component name='Price'><text>${cost}</text></component>\n<component name='Line' export='true'>\n <state picks='{0}'/>\n <row gap='8' w='fill' align='center'>\n <text color='{picked ? \"#ffcc00\" : \"#eeeeee\"}'>{item.name} -</text>\n <Price cost='{item.cost}'/>\n <spacer w='fill'/>\n <text>{picks}</text>\n <button enabled='{afford(i)}' on-press='buy(i); set picks = picks + 1; emit chose'>Buy</button>\n </row>\n</component>\n</ui>\n"
|
|
const PAGE: string = "<ui>\n<import src='kit.xml' as='kit'/>\n<screen name='shop' gap='4' pad='10'>\n <state pick='{-1}'/>\n <text size='24'>The purse: ${purse}</text>\n <each in='{stock}' as='item' index='i'>\n <kit:Line item='{item}' i='{i}' picked='{pick == i}' on-chose='set pick = i'/>\n </each>\n <if test='{owned == 0}'><text>Nothing bought yet</text></if>\n <else><text>{owned} bought, the last {pick + 1}</text></else>\n</screen>\n</ui>\n"
|
|
const PRIVATE: string = "<ui><import src='kit.xml' as='kit'/><screen name='peek'><kit:Price cost='{1}'/></screen></ui>"
|
|
entry {
|
|
add("Rope", 30)
|
|
add("Lantern", 80)
|
|
ui_load_text(KIT, "ui/kit.xml")
|
|
ui_load_text(PAGE, "ui/shop.xml")
|
|
ui_load_text(PRIVATE, "ui/peek.xml")
|
|
var root: UiNode = ui_nodes("shop", view_shop())
|
|
ui_place(root, 0.0, 0.0, 600.0, 400.0)
|
|
let press = root.children[1].children[4]
|
|
ui_press(ui_hit(root, press.x + 1.0, press.y + 1.0))
|
|
root = ui_nodes("shop", view_shop())
|
|
ui_place(root, 0.0, 0.0, 600.0, 400.0)
|
|
print(`purse {purse}, bought {len(bought)}; the lantern is enabled: {root.children[2].children[4].enabled}`)
|
|
}
|
|
}
|