Demos

// The reference: everything in this file is what Gomamochi takes. The
// app is a struct, its state is its fields, `View` is a method, and a
// handler is a closure over the fields.
//
//  gomamochi run  demo/counter.go
//  gomamochi gate demo/counter.go --script "click:+1,input:Momo"
package main

import (
    "fmt"

    . "github.com/i2y/yokan/gomamochi"
)

type Counter struct {
    count int
    name  string
}

func (c *Counter) View() Element {
    return Column(
        Text(fmt.Sprintf("count: %d", c.count)).Size(34),
        Row(
            Button("+1").OnClick(func() { c.count += 1 }),
            Button("+10").OnClick(func() { c.count += 10 }),
            Button("reset").OnClick(func() { c.count = 0 }),
        ).Spacing(8),
        TextField(c.name).Placeholder("your name").OnChange(func(s string) { c.name = s }),
        Text(fmt.Sprintf("hello, %s", c.name)),
    ).Spacing(12).Padding(16)
}

func main() {
    Run(&Counter{}, Title("counter"))
}

// The counter again, written the other way: the package imported under
// a name rather than dot-imported. Every call reads `gm.` in front, the
// app may use any name it likes for its own types, and both runs take
// it the same. Which way to write an app is a matter of taste; the
// tour uses the bare form because the other languages on the engine
// read that way.
package main

import (
    "fmt"

    gm "github.com/i2y/yokan/gomamochi"
)

type Counter struct {
    count int
    name  string
}

func (c *Counter) View() gm.Element {
    return gm.Column(
        gm.Text(fmt.Sprintf("count: %d", c.count)).Size(34),
        gm.Row(
            gm.Button("+1").OnClick(func() { c.count += 1 }),
            gm.Button("+10").OnClick(func() { c.count += 10 }),
            gm.Button("reset").OnClick(func() { c.count = 0 }),
        ).Spacing(8),
        gm.TextField(c.name).Placeholder("your name").OnChange(func(s string) { c.name = s }),
        gm.Text(fmt.Sprintf("hello, %s", c.name)),
    ).Spacing(12).Padding(16)
}

func main() {
    gm.Run(&Counter{}, gm.Title("prefixed"))
}

// Ordinary Go inside a view: `if`, a loop, and a method that answers
// part of the screen. Nothing here is a special form — the view builds
// a list of elements the way any Go builds a slice, and hands it to
// the column.
package main

import (
    "fmt"

    . "github.com/i2y/yokan/gomamochi"
)

type Control struct {
    items    []string
    picked   int
    showHint bool
    tab      int
}

func (c *Control) hint() Element {
    return Text("pick one").Size(12).Color("#8a8f98")
}

func (c *Control) line(name string, i int) Element {
    label := "  " + name
    if i == c.picked {
        label = "▸ " + name
    }
    return Row(
        Text(label),
        Button(fmt.Sprintf("pick %d", i)).OnClick(func() { c.picked = i }),
    ).Spacing(8)
}

func (c *Control) tabButton(n int) Element {
    return Button(fmt.Sprintf("tab %d", n)).OnClick(func() { c.tab = n })
}

func (c *Control) View() Element {
    kids := []Element{Text("control flow").Size(18).Bold(true)}
    if c.showHint {
        kids = append(kids, c.hint())
    } else {
        kids = append(kids, Text("hidden").Size(12))
    }
    for i, name := range c.items {
        kids = append(kids, c.line(name, i))
    }
    if c.picked >= 0 {
        color := "#f38ba8"
        if c.picked%2 == 0 {
            color = "accent"
        }
        kids = append(kids, Text(fmt.Sprintf("picked %s", c.items[c.picked])).Color(color))
    }
    tabs := []Element{Button("hint").OnClick(func() { c.showHint = !c.showHint })}
    for n := 0; n < 3; n++ {
        tabs = append(tabs, c.tabButton(n))
    }
    kids = append(kids, Row(tabs...).Spacing(6), Text(fmt.Sprintf("tab %d", c.tab)))
    return Column(kids...).Spacing(10).Padding(14)
}

func main() {
    Run(&Control{items: []string{"milk", "eggs", "rice"}, picked: -1, showHint: true}, Title("control"))
}

// A list whose rows are built on demand: the builder is called for the
// rows in view, not for all of them. The row number is an ordinary
// argument inside it, so the line, the marker and that row's own button
// all read the same `i`.
package main

import (
    "fmt"

    . "github.com/i2y/yokan/gomamochi"
)

type Todo struct {
    items []string
    draft string
    done  int
}

func (t *Todo) add(s string) {
    t.items = append(t.items, s)
    t.draft = ""
}

func (t *Todo) line(i int) Element {
    cells := []Element{Text(fmt.Sprintf("%d. %s", i+1, t.items[i]))}
    if i == t.done {
        cells = append(cells, Text("done").Color("accent"))
    }
    cells = append(cells, Button("done").OnClick(func() { t.done = i }))
    return Row(cells...).Spacing(8)
}

func (t *Todo) View() Element {
    return Column(
        Text(fmt.Sprintf("todo — %d items", len(t.items))).Size(16),
        TextField(t.draft).Placeholder("add and press enter").
            OnChange(func(s string) { t.draft = s }).
            OnSubmit(func(s string) { t.add(s) }),
        ListView(len(t.items), func(i int) Element { return t.line(i) }).ItemHeight(26).Height(280),
        Button("clear").OnClick(func() { t.items = nil }),
    ).Spacing(10).Padding(14)
}

func main() {
    Run(&Todo{items: []string{"milk"}, done: -1}, Title("todo"))
}

// A calculator: one accumulator, one pending operation, and a display
// the app builds as a string. The look of a key is a function that
// sets the same properties on every button handed to it.
package main

import (
    "strconv"
    "strings"

    . "github.com/i2y/yokan/gomamochi"
)

// The calculator's look.
func key(b *ButtonEl) *ButtonEl {
    return b.Grow(1).Size(20).Background("panel").HoverBackground("#45475a").ActiveBackground("#585b70")
}

func fun(b *ButtonEl) *ButtonEl { return key(b).Background("#313244").Color("#a6adc8") }

func op(b *ButtonEl) *ButtonEl {
    return key(b).Background("#fab387").Color("#1e1e2e").HoverBackground("#f8c49b").ActiveBackground("#f5e0dc")
}

func wide(b *ButtonEl) *ButtonEl { return key(b).Grow(2).Basis(8) }

func keys(r *RowEl) *RowEl { return r.Spacing(8).Grow(1) }

type Calc struct {
    display string
    acc     float64
    op      string
    fresh   bool
    hasDot  bool
}

// The readout reads the way the original's does: a whole number still
// shows its ".0".
func num(v float64) string {
    s := strconv.FormatFloat(v, 'f', -1, 64)
    if !strings.ContainsAny(s, ".e") {
        s += ".0"
    }
    return s
}

// A display that is not a number is worth 0, as it is in the original,
// where a trailing dot is not a number either.
func toFloatOrZero(s string) float64 {
    if strings.HasSuffix(s, ".") {
        return 0
    }
    v, err := strconv.ParseFloat(s, 64)
    if err != nil {
        return 0
    }
    return v
}

func (c *Calc) press(d string) {
    if c.fresh {
        c.display = d
        c.fresh = false
        c.hasDot = false
    } else if c.display == "0" {
        c.display = d
    } else {
        c.display = c.display + d
    }
}

func (c *Calc) dot() {
    if c.fresh {
        c.display = "0."
        c.fresh = false
        c.hasDot = true
    } else if !c.hasDot {
        c.display = c.display + "."
        c.hasDot = true
    }
}

func (c *Calc) negate() {
    v := toFloatOrZero(c.display)
    if v == 0 {
        return
    }
    c.display = num(0 - v)
    c.fresh = false
}

func (c *Calc) percent() {
    c.display = num(toFloatOrZero(c.display) / 100)
    c.fresh = true
    c.hasDot = false
}

func (c *Calc) apply(next string) {
    if c.fresh && c.op != "" {
        c.op = next
        return
    }
    cur := toFloatOrZero(c.display)
    switch c.op {
    case "":
        c.acc = cur
    case "+":
        c.acc += cur
    case "-":
        c.acc -= cur
    case "×":
        c.acc *= cur
    case "÷":
        if cur == 0 {
            c.display = "Error"
            c.acc = 0
            c.op = ""
            c.fresh = true
            return
        }
        c.acc /= cur
    }
    c.display = num(c.acc)
    c.op = next
    c.fresh = true
}

func (c *Calc) clear() {
    c.display = "0"
    c.acc = 0
    c.op = ""
    c.fresh = true
    c.hasDot = false
}

func (c *Calc) digit(d string) Element {
    return key(Button(d)).OnClick(func() { c.press(d) })
}

func (c *Calc) opKey(name string) Element {
    return op(Button(name)).OnClick(func() { c.apply(name) })
}

func (c *Calc) View() Element {
    return Column(
        Text(c.display).Size(40).Color("text").Align("right").Grow(1.4),
        keys(Row(
            fun(Button("C")).OnClick(func() { c.clear() }),
            fun(Button("±")).OnClick(func() { c.negate() }),
            fun(Button("%")).OnClick(func() { c.percent() }),
            c.opKey("÷"),
        )),
        keys(Row(c.digit("7"), c.digit("8"), c.digit("9"), c.opKey("×"))),
        keys(Row(c.digit("4"), c.digit("5"), c.digit("6"), c.opKey("-"))),
        keys(Row(c.digit("1"), c.digit("2"), c.digit("3"), c.opKey("+"))),
        keys(Row(
            wide(Button("0")).OnClick(func() { c.press("0") }),
            key(Button(".")).OnClick(func() { c.dot() }),
            op(Button("=")).OnClick(func() { c.apply("") }),
        )),
    ).Spacing(8).Padding(16).Grow(1)
}

func main() {
    Run(&Calc{display: "0", fresh: true}, Title("calc"))
}

// The same calculator as demo/calc.go, on a grid instead of five rows.
// `ColSpan` is what makes the zero key twice as wide.
package main

import (
    "strconv"
    "strings"

    . "github.com/i2y/yokan/gomamochi"
)

func key(b *ButtonEl) *ButtonEl {
    return b.Grow(1).Size(20).Background("panel").HoverBackground("#45475a").ActiveBackground("#585b70")
}

func fun(b *ButtonEl) *ButtonEl { return key(b).Background("#313244").Color("#a6adc8") }

func op(b *ButtonEl) *ButtonEl {
    return key(b).Background("#fab387").Color("#1e1e2e").HoverBackground("#f8c49b").ActiveBackground("#f5e0dc")
}

type CalcGrid struct {
    display string
    acc     float64
    op      string
    fresh   bool
    hasDot  bool
}

func num(v float64) string {
    s := strconv.FormatFloat(v, 'f', -1, 64)
    if !strings.ContainsAny(s, ".e") {
        s += ".0"
    }
    return s
}

func toFloatOrZero(s string) float64 {
    if strings.HasSuffix(s, ".") {
        return 0
    }
    v, err := strconv.ParseFloat(s, 64)
    if err != nil {
        return 0
    }
    return v
}

func (c *CalcGrid) press(d string) {
    if c.fresh {
        c.display = d
        c.fresh = false
        c.hasDot = false
    } else if c.display == "0" {
        c.display = d
    } else {
        c.display = c.display + d
    }
}

func (c *CalcGrid) dot() {
    if c.fresh {
        c.display = "0."
        c.fresh = false
        c.hasDot = true
    } else if !c.hasDot {
        c.display = c.display + "."
        c.hasDot = true
    }
}

func (c *CalcGrid) negate() {
    v := toFloatOrZero(c.display)
    if v == 0 {
        return
    }
    c.display = num(0 - v)
    c.fresh = false
}

func (c *CalcGrid) percent() {
    c.display = num(toFloatOrZero(c.display) / 100)
    c.fresh = true
    c.hasDot = false
}

func (c *CalcGrid) apply(next string) {
    if c.fresh && c.op != "" {
        c.op = next
        return
    }
    cur := toFloatOrZero(c.display)
    switch c.op {
    case "":
        c.acc = cur
    case "+":
        c.acc += cur
    case "-":
        c.acc -= cur
    case "×":
        c.acc *= cur
    case "÷":
        if cur == 0 {
            c.display = "Error"
            c.acc = 0
            c.op = ""
            c.fresh = true
            return
        }
        c.acc /= cur
    }
    c.display = num(c.acc)
    c.op = next
    c.fresh = true
}

func (c *CalcGrid) clear() {
    c.display = "0"
    c.acc = 0
    c.op = ""
    c.fresh = true
    c.hasDot = false
}

func (c *CalcGrid) digit(d string) Element {
    return key(Button(d)).OnClick(func() { c.press(d) })
}

func (c *CalcGrid) opKey(name string) Element {
    return op(Button(name)).OnClick(func() { c.apply(name) })
}

func (c *CalcGrid) View() Element {
    return Column(
        Text(c.display).Size(40).Color("text").Align("right").Grow(1.4),
        Grid(
            fun(Button("C")).OnClick(func() { c.clear() }),
            fun(Button("±")).OnClick(func() { c.negate() }),
            fun(Button("%")).OnClick(func() { c.percent() }),
            c.opKey("÷"),
            c.digit("7"), c.digit("8"), c.digit("9"), c.opKey("×"),
            c.digit("4"), c.digit("5"), c.digit("6"), c.opKey("-"),
            c.digit("1"), c.digit("2"), c.digit("3"), c.opKey("+"),
            key(Button("0")).ColSpan(2).OnClick(func() { c.press("0") }),
            key(Button(".")).OnClick(func() { c.dot() }),
            op(Button("=")).OnClick(func() { c.apply("") }),
        ).Columns(4).Rows(5).Spacing(8).Grow(5),
    ).Spacing(8).Padding(16).Grow(1)
}

func main() {
    Run(&CalcGrid{display: "0", fresh: true}, Title("calcgrid"))
}

// State an app keeps and a field that writes into it.
package main

import (
    "fmt"

    . "github.com/i2y/yokan/gomamochi"
)

type Mixer struct {
    volume int
    title  string
    muted  bool
}

func (m *Mixer) View() Element {
    cells := []Element{
        Text(fmt.Sprintf("%s — vol %d", m.title, m.volume)).Size(16),
        Row(
            Button("+1").OnClick(func() { m.volume += 1 }),
            Button("mute").OnClick(func() { m.muted = true }),
            Button("unmute").OnClick(func() { m.muted = false }),
        ).Spacing(8),
    }
    if m.muted {
        cells = append(cells, Text("(muted)").Size(12).Color("#8a8f98"))
    }
    cells = append(cells, TextField(m.title).Placeholder("title").OnChange(func(t string) { m.title = t }))
    return Column(cells...).Spacing(10).Padding(14)
}

func main() {
    Run(&Mixer{volume: 5, title: "untitled"}, Title("mixer"))
}

// A map on the app: reading with a fallback, asking whether a key is
// there, and adding one while the window is open. A map is never
// ranged over in a view — its order changes from run to run — but a
// key is read as freely as a field.
package main

import (
    "fmt"

    . "github.com/i2y/yokan/gomamochi"
)

type Lookup struct {
    prices map[string]int
    picked int
    label  string
}

// The price of a fruit, or `fallback` when it is not on the list.
func (l *Lookup) price(name string, fallback int) int {
    if v, ok := l.prices[name]; ok {
        return v
    }
    return fallback
}

func (l *Lookup) pickApple() {
    l.picked = l.price("apple", -1)
    if _, ok := l.prices["cherry"]; ok {
        l.label = "cherry known"
    } else {
        l.label = "no cherry"
    }
}

func (l *Lookup) addCherry() {
    l.prices["cherry"] = 200
    l.picked = l.price("cherry", -1)
    if _, ok := l.prices["cherry"]; ok {
        l.label = "cherry known"
    }
}

func (l *Lookup) View() Element {
    return Column(
        Text(fmt.Sprintf("picked=%d n=%d %s", l.picked, len(l.prices), l.label)),
        Text(fmt.Sprintf("apple costs %d right now", l.price("apple", -1))).Size(12),
        Row(
            Button("apple").OnClick(func() { l.pickApple() }),
            Button("cherry").OnClick(func() { l.addCherry() }),
            Button("miss").OnClick(func() { l.picked = l.price("durian", -7) }),
        ).Spacing(6),
    ).Spacing(8).Padding(12)
}

func main() {
    Run(&Lookup{prices: map[string]int{"apple": 120, "banana": 80}, label: "none"}, Title("lookup"))
}

// A small struct of values, carried on the app's own state.
package main

import (
    "fmt"

    . "github.com/i2y/yokan/gomamochi"
)

type Point struct {
    x, y int
}

type Points struct {
    sel  Point
    dist int
}

func (p *Points) View() Element {
    return Column(
        Text(fmt.Sprintf("p=(%d, %d) d2=%d", p.sel.x, p.sel.y, p.dist)),
        Row(
            Button("right").OnClick(func() { p.sel = Point{p.sel.x + 5, p.sel.y} }),
            Button("swap").OnClick(func() { p.sel = Point{p.sel.y, p.sel.x} }),
            Button("measure").OnClick(func() { p.dist = p.sel.x*p.sel.x + p.sel.y*p.sel.y }),
        ).Spacing(6),
    ).Spacing(8).Padding(12)
}

func main() {
    Run(&Points{sel: Point{3, 4}}, Title("points"))
}

// Values that are one of a few named things, and a value that may be
// nothing at all. Go writes the first as constants and the second as a
// pointer that may be nil.
package main

import (
    "fmt"

    . "github.com/i2y/yokan/gomamochi"
)

const (
    happy = "happy"
    sad   = "sad"
)

type Tracker struct {
    last  *int
    trend string
}

func (t *Tracker) note(v int) {
    t.last = &v
    if t.trend == happy {
        t.trend = sad
    } else {
        t.trend = happy
    }
}

func (t *Tracker) wipe() {
    t.last = nil
}

type Moods struct {
    mood    string
    sel     *int
    note    string
    tracker *Tracker
}

func (m *Moods) flip() {
    if m.mood == happy {
        m.mood = sad
    } else {
        m.mood = happy
    }
}

func (m *Moods) describe() {
    if m.sel == nil {
        m.note = "nothing chosen"
    } else {
        m.note = fmt.Sprintf("chose %d", *m.sel)
    }
}

func (m *Moods) moodLine() Element {
    if m.mood == happy {
        return Text("mood: up").Size(18).Color("accent").Animate(120).Easing("out")
    }
    return Text("mood: down").Size(18).Color("#f38ba8").Animate(120).Easing("out")
}

func (m *Moods) View() Element {
    selection := Text("(no selection)")
    if m.sel != nil {
        selection = Text(fmt.Sprintf("selection: %d", *m.sel))
    }
    tracked := Text("(nothing tracked)").Size(12)
    if m.tracker.last != nil {
        tracked = Text(fmt.Sprintf("tracked: %d", *m.tracker.last)).Size(12)
    }
    return Column(
        m.moodLine(),
        selection,
        Text("note: "+m.note),
        tracked,
        Row(
            Button("flip").OnClick(func() { m.flip() }),
            Button("pick").OnClick(func() { seven := 7; m.sel = &seven }),
            Button("clear").OnClick(func() { m.sel = nil }),
            Button("describe").OnClick(func() { m.describe() }),
            Button("track").Animate(100).Easing("inOut").OnClick(func() { m.tracker.note(9) }),
            Button("wipe").OnClick(func() { m.tracker.wipe() }),
        ).Spacing(6),
    ).Spacing(8).Padding(12)
}

func main() {
    Run(&Moods{mood: happy, note: "-", tracker: &Tracker{trend: happy}}, Title("moods"))
}

// Objects that point at one another. Yokan needs a weak back pointer
// here so a parent and a child cannot own each other forever; Go's
// collector takes a cycle in its stride, so the back pointer is an
// ordinary pointer and the tree is written the way it reads.
package main

import (
    "fmt"

    . "github.com/i2y/yokan/gomamochi"
)

type Node struct {
    label  string
    kid    *Node
    parent *Node
}

type Tree struct {
    root *Node
    keep *Node
    note string
}

func (t *Tree) build() {
    a := &Node{label: "alpha"}
    b := &Node{label: "beta"}
    a.kid = b
    b.parent = a
    t.root = a
    t.keep = b
}

func (t *Tree) peek() {
    switch {
    case t.root == nil && t.keep == nil:
        t.note = "no root"
    case t.root == nil:
        t.note = fmt.Sprintf("kept %s, parent=%s", t.keep.label, t.keep.parent.label)
    case t.root.kid == nil:
        t.note = "no kid"
    default:
        t.note = fmt.Sprintf("kid=%s parent=%s", t.root.kid.label, t.root.kid.parent.label)
    }
}

func (t *Tree) View() Element {
    rootLine := Text("root: (none)")
    if t.root != nil {
        rootLine = Text("root: " + t.root.label)
    }
    return Column(
        Text("note: "+t.note),
        rootLine,
        Row(
            Button("build").OnClick(func() { t.build() }),
            Button("peek").OnClick(func() { t.peek() }),
            Button("drop").OnClick(func() { t.root = nil }),
        ).Spacing(6),
    ).Spacing(8).Padding(12)
}

func main() {
    Run(&Tree{note: "-"}, Title("links"))
}

// The controls a person changes: a box, a switch, a track, and the four
// choosers. Each hands its new value to the closure.
package main

import (
    "fmt"

    . "github.com/i2y/yokan/gomamochi"
)

type Forms struct {
    dark   bool
    wifi   bool
    volume float64
    fruits []string
    fruit  int
    sizes  []string
    size   int
    tabs   []string
    tab    int
    note   string
}

func (f *Forms) panel() Element {
    if f.tab == 0 {
        return Text("general panel").Size(12)
    }
    if f.tab == 1 {
        return Text("details panel").Size(12)
    }
    return Text("about panel").Size(12)
}

func (f *Forms) View() Element {
    return Column(
        Checkbox("Dark mode").Checked(f.dark).Tooltip("the whole window follows this").
            OnChange(func(on bool) { f.dark = on }),
        Switch("Wi-Fi").Checked(f.wifi).OnChange(func(on bool) { f.wifi = on }),
        Slider().Value(f.volume).Min(0).Max(10).Step(1).Tooltip("0 to 10, in whole steps").
            OnChange(func(v float64) { f.volume = v }),
        Select().Options(f.fruits...).Selected(f.fruit).OnChange(func(i int) { f.fruit = i }),
        RadioGroup().Options(f.sizes...).Selected(f.size).OnChange(func(i int) { f.size = i }),
        TabBar().Labels(f.tabs...).Active(f.tab).OnChange(func(i int) { f.tab = i }),
        f.panel(),
        TextField(f.note).Placeholder("notes (enter writes a newline)").Multiline(true).Rows(3).
            OnChange(func(t string) { f.note = t }),
        Text(fmt.Sprintf("dark=%v  wifi=%v  vol=%.1f", f.dark, f.wifi, f.volume)),
        Text(fmt.Sprintf("fruit#%d  size#%d  tab#%d", f.fruit, f.size, f.tab)),
    ).Spacing(10).Padding(14)
}

func main() {
    Run(&Forms{
        wifi:   true,
        volume: 5,
        fruits: []string{"apple", "banana", "cherry"},
        sizes:  []string{"small", "medium", "large"},
        size:   1,
        tabs:   []string{"General", "Details", "About"},
    }, Title("forms"), Size(460, 420))
}