Ebiten XML UI Demo

type Calculator struct {
	ui.Node
	Display    string
}

func NewCalculator() *Calculator {
	c := &Calculator{}
	c.Build(c)
	return c
}

func (c *Calculator) OnClick(btn *ui.Node) {
	if btn.Content() == "=" {
		c.calculate()
	} else {
		c.append(btn.Content())
	}
}

func (c *Calculator) append(s string) {
	c.Display += s
}

func (c *Calculator) backspace() {
	if len(c.Display) > 0 {
		c.Display = c.Display[:len(c.Display)-1]
	}
}

func (c *Calculator) calculate() {
	c.Display = ""
}

func (c *Calculator) Disp() *ui.Style {
	return &ui.Style{
		Extends:  "text",
		FontName: "RobotoMono",
		FontSize: 48,
		Padding:  &ui.Spacing{Top: 12, Bottom: 12, Left: 12, Right: 12},
		Color:    &color.RGBA{R: 255, G: 255, B: 255, A: 255},
		Attrs:    map[string]string{"minWidth": "8em"},
	}
}

func (c *Calculator) Button() *ui.Style {
	return &ui.Style{
		Extends:   "button",
		FontName:  "RobotoMono",
		FontSize:  48,
		Margin:    &ui.Spacing{Top: 4, Bottom: 4, Left: 4, Right: 4},
		Padding:   &ui.Spacing{Top: 12, Bottom: 12, Left: 12, Right: 12},
		NineSlice: ui.NewNineSlice("assets/ui/button.png", 32, [3]int{6, 20, 6}, [3]int{6, 20, 6}),
		Color:     &color.RGBA{R: 255, G: 255, B: 255, A: 255},
	}
}

func (c *Calculator) Grid() *ui.Style {
	return &ui.Style{
		Extends: "grid",
		Margin:  &ui.Spacing{Top: 24, Bottom: 24, Left: 24, Right: 24},
		Attrs: map[string]string{
			"cols": "repeat(4, 1fr)",
			"rows": "auto",
		},
	}
}

func (c *Calculator) UI() string {
	return `<col margin="24px" justify="center">
		<row>
			<Disp minWidth="8em">{Display}</Disp>
		</row>
		<row width="100%" justify="stretch">
			<Button>7</Button>
			<Button>8</Button>
			<Button>9</Button>
			<Button>×</Button>
		</row>
		<row width="100%" justify="stretch">
			<Button>4</Button>
			<Button>5</Button>
			<Button>6</Button>
			<Button>−</Button>
		</row>
		<row width="100%" justify="stretch">
			<Button>1</Button>
			<Button>2</Button>
			<Button>3</Button>
			<Button>+</Button>
		</row>
		<row width="100%" justify="stretch">
			<Button>0</Button>
			<Button>.</Button>
			<Button>÷</Button>
			<Button>=</Button>
		</row>
	</col>`
}

This looks awesome! Can't wait to use your library to develop UI.