デモ

# The reference: everything in this file is what Wakakusa takes. The
# app is an object, its state is its instance variables, and a handler
# is a block that closes over it.
#
#   wakakusa run  demo/counter.rb
#   wakakusa gate demo/counter.rb --script "click:+1,input:Momo"
require "wakakusa"

class Counter
  def initialize
    @count = 0
    @name = ""
  end

  def view
    column(
      text("count: #{@count}", size: 34.0),
      row(
        button("+1") { @count += 1 },
        button("+10") { @count += 10 },
        button("reset") { @count = 0 },
        spacing: 8.0
      ),
      text_field(@name, placeholder: "your name") { |s| @name = s },
      text("hello, #{@name}"),
      spacing: 12.0,
      padding: 16.0
    )
  end
end

run(Counter.new, title: "counter")

# The same counter as demo/counter.rb, written the other way. A
# container takes its children as a block, and each element inside
# joins the one that is open.
#
# Both spellings build the same tree; this demo exists to say so.
require "wakakusa"

class Counter
  def initialize
    @count = 0
    @name = ""
  end

  def view
    column(spacing: 12.0, padding: 16.0) {
      text "count: #{@count}", size: 34.0
      row(spacing: 8.0) {
        button("+1") { @count += 1 }
        button("+10") { @count += 10 }
        button("reset") { @count = 0 }
      }
      text_field(@name, placeholder: "your name") { |s| @name = s }
      text "hello, #{@name}"
    }
  end
end

run(Counter.new, title: "blockform")

# Ordinary Ruby inside a view: `if`, `unless`, a ternary, a loop, and a
# method that answers part of the screen. Nothing here is a special
# form — the block is Ruby, and each element joins the container that
# is open.
#
# The one shape that is refused is a block written inside a loop's
# block. `line` below is what to write instead, and `wakakusa check`
# says so with the line.
require "wakakusa"

class Control
  def initialize
    @items = ["milk", "eggs", "rice"]
    @picked = -1
    @show_hint = true
    @tab = 0
  end

  def hint
    text "pick one", size: 12.0, color: "#8a8f98"
  end

  def line(name, i)
    row(spacing: 8.0) {
      text(i == @picked ? "▸ #{name}" : "  #{name}")
      button("pick #{i}") { @picked = i }
    }
  end

  def tab_button(n)
    button("tab #{n}") { @tab = n }
  end

  def view
    column(spacing: 10.0, padding: 14.0) {
      text "control flow", size: 18.0, bold: true

      if @show_hint
        hint
      else
        text "hidden", size: 12.0
      end

      @items.each_with_index { |name, i| line(name, i) }

      unless @picked < 0
        text "picked #{@items[@picked]}", color: @picked.even? ? "accent" : "#f38ba8"
      end

      row(spacing: 6.0) {
        button("hint") { @show_hint = !@show_hint }
        3.times { |n| tab_button(n) }
      }
      text "tab #{@tab}"
    }
  end
end

run(Control.new, 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`.
require "wakakusa"

class Todo
  def initialize
    @items = ["milk"]
    @draft = ""
    @done = -1
  end

  def add(t)
    items = @items.dup
    items.push(t)
    @items = items
    @draft = ""
  end

  def line(i)
    cells = [text("#{i + 1}. #{@items[i]}")]
    cells.push(text("done", color: "accent")) if i == @done
    cells.push(button("done") { @done = i })
    row(*cells, spacing: 8.0)
  end

  def view
    column(
      text("todo — #{@items.length} items", size: 16.0),
      text_field(@draft, placeholder: "add and press enter",
                 on_submit: -> { add(event_text) }) { |t| @draft = t },
      list_view(@items.length, item_height: 26.0, height: 280.0) { |i| line(i) },
      button("clear") { @items = [] },
      spacing: 10.0,
      padding: 14.0
    )
  end
end

run(Todo.new, title: "todo")

# A calculator: one accumulator, one pending operation, and a display
# the app builds as a string. The look is a Hash of properties, handed
# to each key with `**`.
require "wakakusa"
require_relative "calc_style"

class Calc
  def initialize
    @display = "0"
    @acc = 0.0
    @op = ""
    @fresh = true
    @has_dot = false
  end

  def to_f_or_zero(s)
    Float(s)
  rescue ArgumentError, TypeError
    0.0
  end

  def press(d)
    if @fresh
      @display = d
      @fresh = false
      @has_dot = false
    elsif @display == "0"
      @display = d
    else
      @display = @display + d
    end
  end

  def dot
    if @fresh
      @display = "0."
      @fresh = false
      @has_dot = true
    elsif !@has_dot
      @display = @display + "."
      @has_dot = true
    end
  end

  def negate
    v = to_f_or_zero(@display)
    return if v == 0.0

    @display = "#{0.0 - v}"
    @fresh = false
  end

  def percent
    @display = "#{to_f_or_zero(@display) / 100.0}"
    @fresh = true
    @has_dot = false
  end

  def apply(nxt)
    if @fresh && @op != ""
      @op = nxt
      return
    end
    cur = to_f_or_zero(@display)
    @acc = cur if @op == ""
    @acc += cur if @op == "+"
    @acc -= cur if @op == "-"
    @acc *= cur if @op == "×"
    if @op == "÷"
      if cur == 0.0
        @display = "Error"
        @acc = 0.0
        @op = ""
        @fresh = true
        return
      end
      @acc /= cur
    end
    @display = "#{@acc}"
    @op = nxt
    @fresh = true
  end

  def clear
    @display = "0"
    @acc = 0.0
    @op = ""
    @fresh = true
    @has_dot = false
  end

  def digit(d)
    button(d, **KEY) { press(d) }
  end

  def op_key(name)
    button(name, **OP) { apply(name) }
  end

  def view
    column(spacing: 8.0, padding: 16.0, grow: 1.0) {
      text @display, **READOUT
      row(**KEYS) {
        button("C", **FUN) { clear }
        button("±", **FUN) { negate }
        button("%", **FUN) { percent }
        op_key("÷")
      }
      row(**KEYS) {
        digit("7")
        digit("8")
        digit("9")
        op_key("×")
      }
      row(**KEYS) {
        digit("4")
        digit("5")
        digit("6")
        op_key("-")
      }
      row(**KEYS) {
        digit("1")
        digit("2")
        digit("3")
        op_key("+")
      }
      row(**KEYS) {
        button("0", **WIDE) { press("0") }
        button(".", **KEY) { dot }
        button("=", **OP) { apply("") }
      }
    }
  end
end

run(Calc.new, title: "calc")

# The same calculator as demo/calc.rb, on a grid instead of five rows.
# `col_span:` is what makes the zero key twice as wide.
require "wakakusa"
require_relative "calc_style"

class CalcGrid
  def initialize
    @display = "0"
    @acc = 0.0
    @op = ""
    @fresh = true
    @has_dot = false
  end

  def to_f_or_zero(s)
    Float(s)
  rescue ArgumentError, TypeError
    0.0
  end

  def press(d)
    if @fresh
      @display = d
      @fresh = false
      @has_dot = false
    elsif @display == "0"
      @display = d
    else
      @display = @display + d
    end
  end

  def dot
    if @fresh
      @display = "0."
      @fresh = false
      @has_dot = true
    elsif !@has_dot
      @display = @display + "."
      @has_dot = true
    end
  end

  def negate
    v = to_f_or_zero(@display)
    return if v == 0.0

    @display = "#{0.0 - v}"
    @fresh = false
  end

  def percent
    @display = "#{to_f_or_zero(@display) / 100.0}"
    @fresh = true
    @has_dot = false
  end

  def apply(nxt)
    if @fresh && @op != ""
      @op = nxt
      return
    end
    cur = to_f_or_zero(@display)
    @acc = cur if @op == ""
    @acc += cur if @op == "+"
    @acc -= cur if @op == "-"
    @acc *= cur if @op == "×"
    if @op == "÷"
      if cur == 0.0
        @display = "Error"
        @acc = 0.0
        @op = ""
        @fresh = true
        return
      end
      @acc /= cur
    end
    @display = "#{@acc}"
    @op = nxt
    @fresh = true
  end

  def clear
    @display = "0"
    @acc = 0.0
    @op = ""
    @fresh = true
    @has_dot = false
  end

  def digit(d)
    button(d, **KEY) { press(d) }
  end

  def op_key(name)
    button(name, **OP) { apply(name) }
  end

  def view
    column(spacing: 8.0, padding: 16.0, grow: 1.0) {
      text @display, **READOUT
      grid(columns: 4, rows: 5, spacing: 8.0, grow: 5.0) {
        button("C", **FUN) { clear }
        button("±", **FUN) { negate }
        button("%", **FUN) { percent }
        op_key("÷")
        digit("7")
        digit("8")
        digit("9")
        op_key("×")
        digit("4")
        digit("5")
        digit("6")
        op_key("-")
        digit("1")
        digit("2")
        digit("3")
        op_key("+")
        button("0", col_span: 2, **KEY) { press("0") }
        button(".", **KEY) { dot }
        button("=", **OP) { apply("") }
      }
    }
  end
end

run(CalcGrid.new, title: "calcgrid")

# State an app keeps and a field that writes into it.
require "wakakusa"

class Mixer
  def initialize
    @volume = 5
    @title = "untitled"
    @muted = false
  end

  def view
    cells = [
      text("#{@title} — vol #{@volume}", size: 16.0),
      row(
        button("+1") { @volume += 1 },
        button("mute") { @muted = true },
        button("unmute") { @muted = false },
        spacing: 8.0
      ),
    ]
    cells.push(text("(muted)", size: 12.0, color: "#8a8f98")) if @muted
    cells.push(text_field(@title, placeholder: "title") { |t| @title = t })
    column(*cells, spacing: 10.0, padding: 14.0)
  end
end

run(Mixer.new, title: "mixer")

# A Hash on the app: reading with a fallback, asking whether a key is
# there, and adding one while the window is open.
require "wakakusa"

class Lookup
  def initialize
    @prices = { "apple" => 120, "banana" => 80 }
    @picked = 0
    @label = "none"
  end

  def pick_apple
    @picked = @prices.fetch("apple", -1)
    @label = @prices.key?("cherry") ? "cherry known" : "no cherry"
  end

  def add_cherry
    @prices["cherry"] = 200
    @picked = @prices.fetch("cherry", -1)
    @label = "cherry known" if @prices.key?("cherry")
  end

  def view
    column(spacing: 8.0, padding: 12.0) {
      text "picked=#{@picked} n=#{@prices.length} #{@label}"
      text "apple costs #{@prices.fetch("apple", -1)} right now", size: 12.0
      row(spacing: 6.0) {
        button("apple") { pick_apple }
        button("cherry") { add_cherry }
        button("miss") { @picked = @prices.fetch("durian", -7) }
      }
    }
  end
end

run(Lookup.new, title: "lookup")

# A small class of values, carried on the app's own state.
require "wakakusa"

class Point
  attr_reader :x, :y

  def initialize(x, y = 0)
    @x = x
    @y = y
  end
end

class Points
  def initialize
    @sel = Point.new(3, 4)
    @dist = 0
  end

  def view
    column(
      text("p=(#{@sel.x}, #{@sel.y}) d2=#{@dist}"),
      row(
        button("right") { @sel = Point.new(@sel.x + 5, @sel.y) },
        button("swap") { @sel = Point.new(@sel.y, @sel.x) },
        button("measure") { @dist = @sel.x * @sel.x + @sel.y * @sel.y },
        spacing: 6.0
      ),
      spacing: 8.0,
      padding: 12.0
    )
  end
end

run(Points.new, title: "points")

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

class Node
  attr_accessor :label, :kid, :parent

  def initialize(label)
    @label = label
    @kid = nil
    @parent = nil
  end
end

class Tree
  def initialize
    @root = nil
    @keep = nil
    @note = "-"
  end

  def build
    a = Node.new("alpha")
    b = Node.new("beta")
    a.kid = b
    b.parent = a
    @root = a
    @keep = b
  end

  def peek
    @note = if @root.nil?
              @keep.nil? ? "no root" : "kept #{@keep.label}, parent=#{@keep.parent.label}"
            elsif @root.kid.nil?
              "no kid"
            else
              "kid=#{@root.kid.label} parent=#{@root.kid.parent.label}"
            end
  end

  def view
    column(spacing: 8.0, padding: 12.0) {
      text "note: #{@note}"
      if @root.nil?
        text "root: (none)"
      else
        text "root: #{@root.label}"
      end
      row(spacing: 6.0) {
        button("build") { build }
        button("peek") { peek }
        button("drop") { @root = nil }
      }
    }
  end
end

run(Tree.new, title: "links")

# Values that are one of a few named things, and a value that may be
# nothing at all. Ruby writes the first as symbols and the second as
# nil, and `case` tells them apart.
require "wakakusa"

class Tracker
  attr_reader :last, :trend

  def initialize
    @last = nil
    @trend = :happy
  end

  def note(v)
    @last = v
    @trend = case @trend
             when :happy then :sad
             else :happy
             end
  end

  def wipe
    @last = nil
  end
end

class Moods
  def initialize
    @mood = :happy
    @sel = nil
    @note = "-"
    @tracker = Tracker.new
  end

  def flip
    @mood = case @mood
            when :happy then :sad
            else :happy
            end
  end

  def describe
    @note = @sel.nil? ? "nothing chosen" : "chose #{@sel}"
  end

  def mood_line
    return text("mood: up", size: 18.0, color: "accent", animate: 120.0, easing: "out") if @mood == :happy

    text("mood: down", size: 18.0, color: "#f38ba8", animate: 120.0, easing: "out")
  end

  def view
    column(spacing: 8.0, padding: 12.0) {
      mood_line
      if @sel.nil?
        text "(no selection)"
      else
        text "selection: #{@sel}"
      end
      text "note: #{@note}"
      if @tracker.last.nil?
        text "(nothing tracked)", size: 12.0
      else
        text "tracked: #{@tracker.last}", size: 12.0
      end
      row(spacing: 6.0) {
        button("flip") { flip }
        button("pick") { @sel = 7 }
        button("clear") { @sel = nil }
        button("describe") { describe }
        button("track", animate: 100.0, easing: "inOut") { @tracker.note(9) }
        button("wipe") { @tracker.wipe }
      }
    }
  end
end

run(Moods.new, title: "moods")

# The controls a person changes: a box, a switch, a track, and the four
# choosers. Each hands its new value to the block.
require "wakakusa"

class Forms
  def initialize
    @dark = false
    @wifi = true
    @volume = 5.0
    @fruits = ["apple", "banana", "cherry"]
    @fruit = 0
    @sizes = ["small", "medium", "large"]
    @size = 1
    @tabs = ["General", "Details", "About"]
    @tab = 0
    @note = ""
  end

  def panel
    return text("general panel", size: 12.0) if @tab == 0
    return text("details panel", size: 12.0) if @tab == 1

    text("about panel", size: 12.0)
  end

  def view
    column(
      checkbox("Dark mode", checked: @dark,
               tooltip: "the whole window follows this") { |on| @dark = on },
      switch("Wi-Fi", checked: @wifi) { |on| @wifi = on },
      slider(value: @volume, min: 0.0, max: 10.0, step: 1.0,
             tooltip: "0 to 10, in whole steps") { |v| @volume = v },
      select(options: @fruits, selected: @fruit) { |i| @fruit = i },
      radio_group(options: @sizes, selected: @size) { |i| @size = i },
      tab_bar(labels: @tabs, active: @tab) { |i| @tab = i },
      panel,
      text_field(@note, placeholder: "notes (enter writes a newline)",
                 multiline: true, rows: 3.0) { |t| @note = t },
      text("dark=#{@dark}  wifi=#{@wifi}  vol=#{format("%.1f", @volume)}"),
      text("fruit##{@fruit}  size##{@size}  tab##{@tab}"),
      spacing: 10.0,
      padding: 14.0
    )
  end
end

run(Forms.new, title: "forms", width: 460.0, height: 420.0)

# The two fields that hold a number rather than text: enter or leaving
# them commits, text that is not a number is dropped and the shown
# value returns to what the app holds.
require "wakakusa"

class Order
  def initialize
    @qty = 1
    @price = 0.0
  end

  def reset
    @qty = 1
    @price = 0.0
  end

  def view
    column(
      text("Order line", size: 18.0),
      row(
        text("quantity"),
        int_field(@qty, min: 1, max: 99, placeholder: "qty") { |n| @qty = n },
        spacing: 8.0
      ),
      row(
        text("unit price"),
        number_field(@price, min: 0.0, max: 1000.0, step: 0.5,
                     placeholder: "price") { |p| @price = p },
        spacing: 8.0
      ),
      text("total  #{@qty * @price}"),
      button("reset") { reset },
      spacing: 10.0,
      padding: 14.0
    )
  end
end

run(Order.new, title: "quantities")

# spacer and divider: a filler and a rule. The header row's spacer
# pushes "ping" to the far edge; the footer's does the same for the
# count. divider draws the rules, the second one heavier and colored.
require "wakakusa"

class Layout
  def initialize
    @pings = 0
  end

  def view
    column(
      row(
        text("Layout", size: 18.0),
        spacer,
        button("ping") { @pings += 1 }
      ),
      divider,
      column(
        text("Section one", size: 14.0),
        text("spacer takes the slack a row leaves behind."),
        divider(thickness: 2.0, color: "accent"),
        text("Section two", size: 14.0),
        text("divider draws a rule across its parent."),
        spacing: 6.0
      ),
      row(
        spacer,
        text("pings: #{@pings}")
      ),
      spacing: 12.0,
      padding: 16.0
    )
  end
end

run(Layout.new, title: "layout")

# A piece of screen with a name is a method that answers an element,
# and one that wraps other elements takes them as arguments.
require "wakakusa"

class Cards
  def initialize
    @a = 0
    @b = 0
  end

  def card(title, *kids)
    column(
      text(title, size: 18.0),
      *kids,
      spacing: 4.0, padding: 8.0,
      border_width: 1.0, border_color: "accent", border_radius: 8.0
    )
  end

  def view
    column(
      card("counters",
           row(text("a: #{@a}"), button("+1") { @a += 1 }, spacing: 6.0),
           row(text("b: #{@b}"), button("+10") { @b += 10 }, spacing: 6.0)),
      text("outside the card", size: 12.0),
      spacing: 10.0,
      padding: 16.0
    )
  end
end

run(Cards.new, title: "cards")

# A look kept in one place: a Hash of properties, merged and handed to
# an element with `**`. `theme:` swaps the palette its subtree resolves
# colors in, so one keyword flips the whole panel.
require "wakakusa"

CHIP = { size: 18.0, color: "accent" }.freeze
KEY = { background: "#313244", hover_background: "#45475a" }.freeze
HOT = { background: "#fab387" }.freeze
KEY_HOT = KEY.merge(HOT).freeze

class Styled
  def initialize
    @mode = "dark"
    @n = 0
  end

  def flip
    @mode = @mode == "dark" ? "light" : "dark"
  end

  def view
    column(
      text("n=#{@n}", **CHIP),
      row(
        button("+1", **KEY) { @n += 1 },
        button("flip", **KEY_HOT) { flip },
        spacing: 6.0
      ),
      spacing: 8.0, padding: 12.0, background: "panel", theme: @mode
    )
  end
end

run(Styled.new, title: "styled")

# Text as a pill: a background with padding and a radius. And the rest
# of what a run of text can be — monospace, underlined, italic, clipped
# with an ellipsis, or wrapped and then clamped.
require "wakakusa"

PILL = { size: 11.0, color: "#11111b", padding: 4.0, border_radius: 10.0 }.freeze
PILL_OK = PILL.merge({ background: "#2fa84f" }).freeze
PILL_WARN = PILL.merge({ background: "#fab387" }).freeze
PILL_CRIT = PILL.merge({ background: "#f38ba8" }).freeze

class Badges
  def initialize
    @tint = "#45475a"
    @hot = false
  end

  def flip
    @hot = !@hot
    @tint = @hot ? "#f38ba8" : "#45475a"
  end

  def view
    column(
      text("Badges", size: 20.0, bold: true),
      row(
        text("● OK", **PILL_OK),
        text("● WARN", **PILL_WARN),
        text("● CRIT", **PILL_CRIT),
        text("● BUILD", size: 11.0, color: "#cdd6f4", background: @tint,
             padding: 4.0, border_radius: 10.0, border_width: 1.0,
             border_color: "#585b70"),
        spacing: 6.0
      ),
      button("flip") { flip },
      text("commit 9f2c1ab8e04d", mono: true, size: 12.0),
      text("an underlined note", underline: true),
      text("in italics, for contrast", italic: true),
      # An ellipsis needs a bounded box to clip against.
      text("a single line far too long for the box it was given, so it ends in an ellipsis",
           wrap: "ellipsis", width: 260.0),
      # The clamp is the other half: this one wraps, then stops.
      text("a paragraph that wraps at the window's width and then stops after two lines, " \
           "because a clamped label is what a card summary wants",
           max_lines: 2, width: 260.0),
      spacing: 8.0,
      padding: 12.0
    )
  end
end

run(Badges.new, title: "badges")

# The elements that arrange or cover: tracks, layers, panes that
# scroll, and a panel over the rest of the window.
require "wakakusa"

class Panels
  def initialize
    @open = false
    @view = 0
    @views = ["grid", "stack", "scrolls"]
  end

  def tracks
    grid(
      text("one"), text("two"),
      grid_cell(text("across both", align: "center", background: "#313244",
                     padding: 4.0, border_radius: 6.0), col_span: 2),
      text("three"), text("four"),
      columns: 2, spacing: 6.0
    )
  end

  def layers
    stack(
      image("demo/assets/postcard.png", width: 180.0, height: 90.0),
      text("over the picture", size: 14.0, color: "#11111b",
           background: "#f9e2af", padding: 4.0)
    )
  end

  def scrolls
    column(
      scroll_view(
        column(*(1..12).map { |n| text("line #{n}") }, spacing: 2.0),
        height: 90.0
      ),
      h_scroll_view(
        row(*(1..10).map { |n| text("col #{n}", width: 70.0) }, spacing: 6.0)
      ),
      spacing: 8.0
    )
  end

  def panel
    return tracks if @view == 0
    return layers if @view == 1

    scrolls
  end

  def view
    stack(
      column(
        row(
          text("Panels", size: 18.0),
          spacer,
          link("pixie", "https://example.invalid", size: 12.0),
          spinner(size: 14.0),
          spacing: 8.0
        ),
        segmented(options: @views, selected: @view) { |i| @view = i },
        panel,
        button("about") { @open = true },
        spacing: 10.0,
        padding: 14.0
      ),
      modal(
        column(
          text("A panel over the rest of it.", size: 14.0),
          button("close") { @open = false },
          spacing: 8.0, padding: 12.0, background: "panel"
        ),
        open: @open
      )
    )
  end
end

run(Panels.new, title: "panels")