path: root/app/app/ui/widgets.rb

# some extensions to shoes (subclasses of Shoes::Widget)
# and auxiliary methods for the hh app (the HH::Widgets mixin)

#def scroll_box(opts = {}, &blk)
#  opts = {:width => 1.0, :height => 300, :scroll => true}.merge(opts)
#  stack opts, &blk
#end

# a glossy button
class Glossb < Shoes::Widget
  def initialize(name, opts={}, &blk)
    fg, bgfill = "#777", "#DDD"
    case opts[:color]
      when "dark"; fg, bgfill = "#CCC", "#000"
      when "yellow"; fg, bgfill = "#FFF", "#7AA"
      when "red"; fg, bgfill = "#FF5", "#F30"
    end

    txt = link(name, :underline => 'none', :stroke => fg) {}
    stack :margin => 4 do
      background bgfill, :curve => 5
      @txt = para txt, :align => 'center', :margin => 4, :size => 11
      hover { @over.show }
      leave { @over.hide }
    end

    @over = stack :top => 0, :left => 0, :margin => 2, :hidden => true do
      background bgfill, :curve => 5
      @txt_over = para txt, :align => 'center', :margin => 4, :size => 14, :weight => "bold"
    end
    @fg = fg
    click &blk
  end

  def text= txt
    new_link = link(txt, :underline => 'none', :stroke => @fg) {}
    @txt.replace(new_link)
    @txt_over.replace(new_link)
  end
end

class IconButton < Shoes::Widget
#  BSIZE = 16
#  MARGIN = 8
#  SIZE = BSIZE + MARGIN * 2
  def initialize (type, tooltip, opts={}, &blk)
    strokewidth 1
    nofill

    @tooltip_text = tooltip

    stack do
      stack :margin => 8, :width => 32, :height => 32 do
        stroke white
        send type
      end

      hover do
        @over.show
        if @tooltip_text
          create_tooltip
        end
      end
      leave do
        @over.hide
        if @tooltip
          @tooltip.hide
          @tooltip.remove
          @tooltip = nil
        end
      end
    end

    style(:width => 32)

    stack :margin => 8, :top => 0, :left => 0 do
       @over = stack :width => 16, :height => 16, :hidden => true do
        background gray(0.8)
        stroke black
        send type
      end
    end

    click &blk
  end
  
  def create_tooltip
    slot = parent
    x, y = left, top
    while not slot.respond_to? :tooltip
      x += slot.left
      y += slot.top
      slot = slot.parent
    end

    @tooltip = slot.tooltip(@tooltip_text, x, y-20,
          :fill => red, :stroke => white)
  end

  def arrow_right
    line(1, 8, 14, 8)
    line(14, 8, 10, 1+3)
    line(14, 8, 10, 15-3)
  end

  def arrow_left
    line(1, 8, 14, 8)
    line(1, 8, 6, 1+3)
    line(1, 8, 6, 15-3)
  end

  def x
    line(2, 2, 13, 13)
    line(2, 13, 13, 2)
  end

  def menu
    rect 2, 2, 11, 11
    line 4, 6, 11, 6
    line 4, 8, 11, 8
    line 4, 10, 11, 10
  end
end

module HH::Tooltip
  def tooltip str, x, y, opts={}
    f = nil
    #opts[:wrap] = "trim"
    slot = self
    app do
    slot.append do
    f = flow  :left => x, :top => y do
      para str, opts
    end
    end
    end
    f
  end
end

#class Lightboard < Shoes::Widget
#  def initialize(width, height, actual = width * height)
#    @opts = []
#    nostroke
#    resize(width, height, actual)
#  end
#  def coords(x, y, opts)
#    at((y * @width) + x, opts)
#  end
#  def at(i, opts)
#    return if i > @actual
#    r, p = self.contents[i * 2], self.contents[(i * 2) + 1]
#    @opts[i] = (@opts[i] || {}).update(opts)
#    if opts[:text]
#      p.text = opts[:text]
#    end
#    if opts[:fill]
#      r.fill = opts[:fill]
#    end
#  end
#  def fits(length)
#    r = Math.sqrt(length)
#    resize(r.round, r.ceil, length)
#  end
#  def resize(width, height, actual = width * height)
#    @width, @height, @actual = width, height, actual
#    build
#  end
#  def build
#    height = parent.height / @height
#    width = parent.width / @width
#    clear do
#      @actual.times do |i|
#        y = i / @width
#        x = i % @width
#        top = y * height
#        left = x * width
#        opts = @opts[i] || {}
#        rect left + 4, top + 4, width - 8, height - 8,
#          :curve => 12, :fill => opts[:fill] || white
#        para opts[:text] || "", :top => top + (height * 0.5) - 32,
#          :left => left, :width => width, :align => "center",
#          :size => 31, :font => "Lacuna Regular"
#      end
#    end
#  end
#end

# splash screen and a link with a similar appearance as the gloss buttons
# included by the hh app
module HH::Widgets
  def splash
    nostroke
    background black
    color_names = Shoes::COLORS.keys

    @c = :gray
    @r = star :top => 410, :left => 310, :outer => 80, :inner => 100
    @s =
      stack :top => -400, :left => 100, :width => 370, :height => 370 do
        @mask = mask do
          star 210, 210, 130, 500, 90
        end
        image "#{HH::STATIC}/splash-hand.png", :top => 84, :left => 84
      end
    @t = title span(" Welcome to\n", :size => 15), strong("Hackety Hack"),
           :stroke => black, :top => 180, :left => 80, :font => "Lacuna Regular"
    @b = glossb "Ready", :top => 280, :left => 80, :width => 80, :hidden => true do
      @an.stop
      @ban = @s.parent.animate(30) do |i|
        @s.parent.move(-(i*40), 0)
        if i == 30
          @s.parent.remove
        end
      end
    end
    # @v = video "music.wav",
    #       :autoplay => true, :width => 0, :height => 0, :top => -100, :left => -100
    @an = animate(30) do |i|
      @mask.clear do
        rotate 1
        star 210, 210, 130, 500, 90
      end
      if i == 60
        @b.show
      end
      if @s.top < 198
        dist = (208 - @s.top) / 6
        dist = 10 if dist > 10
        @s.top += dist
        if @s.top > -40
          @t.stroke = gray(@s.top + 55)
        end
      else
        if @v
          @v.remove
          @v = nil
        end
        o = @r.style[:outer]
        if o > 500
          @r.style :inner => 100, :outer => 80, :points => (10..80).rand
          @c = color_names[(0..color_names.length).rand]
        elsif o > 200
          @r.style :fill => send(@c, (500 - o).abs * 0.01), :outer => o + 10
        else
          @r.style :fill => send(@c, (0.1..0.6).rand), :outer => o + 1
        end
      end
    end
  end

  # creates a link having a similar appearance as the gloss buttons
  def britelink icon, name, time = nil, bg = "#8c9", &blk
    bg = background bg, :curve => 6, :height => 29, :hidden => true
    flow :margin => 4, :width => 300 do
      image HH::STATIC + "/" + icon, :margin_right => 6, :margin => 3
      p1 = link(name, :stroke => black, :underline => "none", &blk)
      para p1, :size => 13, :font => "Lacuna Regular", :margin => 0,
        :wrap => "trim", :width => 280
      if time
        p2 = para time.short, :stroke => "#396", :font => "Lacuna Regular",
          :size => 9, :margin => 4, :margin_bottom => 0
      end
      ele = image 1, 1
      p1.hover do
        p1.parent.stroke = p1.stroke = white
        p2.stroke = "#FF5" if time
        bg.width = ele.left + 10
        bg.show
      end
      p1.leave do
        p1.parent.stroke = p1.stroke = black
        p2.stroke = "#396" if time
        bg.hide
      end
    end
  end

  # method to create a side tab (actually is just a stack with an image in it)
  # +icon_path+:: the icon displayed in the tab
  # +top+:: if > 0 indicates the distance from the top, else the distance from
  #         the bottom
  # +name+:: text displayed on icon hover
  # +blk+:: the block passed is executed on click
  def sidetab(icon_path, top, name, &blk)
    v = top < 0 ? :bottom : :top
    stack v => top.abs, :left => 0, :width => 38, :margin => 4 do
      bg = background "#DFA", :height => 26, :curve => 6, :hidden => true
      image(icon_path, :margin => 4).
        hover { bg.show; @tip.parent.width = 122; @tip.top = nil; @tip.bottom = nil
          @tip.send("#{v}=", top.abs); @tip.contents[1].text = name; @tip.show }.
        leave { bg.hide; @tip.hide; @tip.parent.width = 40 }.
        click &blk
    end
  end
end