shoes 3.0.1 → 4.0.0.pre1

data/samples/simple-editor.rb

@@ -1,11 +1,11 @@
 str, t = "", nil
-Shoes.app :height => 500, :width => 450 do
+Shoes.app height: 500, width: 450 do
   background rgb(77, 77, 77)
-  stack :margin => 10 do
-    para span("TEXT EDITOR", :stroke => red, :fill => white), " * USE ALT-Q TO QUIT", :stroke => white
+  stack margin: 10 do
+    para span("TEXT EDITOR", stroke: red, fill: white), " * USE ALT-Q TO QUIT", stroke: white
   end
-  stack :margin => 10 do
-    t = para "", :font => "Monospace 12px", :stroke => white
+  stack margin: 10 do
+    t = para "", font: "Monospace 12px", stroke: white
     t.cursor = -1
   end
   keypress do |k|

data/samples/simple-face.rb

@@ -0,0 +1,14 @@
+#
+# Smiling face by Coraline Clark (age 5), 2013
+#
+Shoes.app do
+  stack :top => 150 do
+    @oval = oval  200, 1, 200, 200, :fill => mintcream
+    @hair = star 200,  1, 80,  80
+    @eye1 = star 300, 58, 10,  10, 6
+    @eye2 = star 330, 58, 10,  10, 6
+    @mouth= oval 310, 120, 70, 40, :fill => red
+    @nose = line 310, 80, 340, 110
+    @line = line 310, 140, 380, 140
+  end
+end

data/samples/simple-flow-wrap.rb

@@ -0,0 +1,11 @@
+Shoes.app width: 200 do
+  flow margin: 12, fill: red do
+    background red
+    # Set up three buttons
+    button "button 1"
+    button "button 2"
+    button "button 3"
+    button "button 4"
+    button "button 5"
+  end
+end

data/samples/simple-font.rb

@@ -0,0 +1,17 @@
+Shoes.app height: 200 do
+  font File.join(Shoes::DIR, 'fonts/Coolvetica.ttf')
+  stack do
+    flow do
+      title 'Good Question'
+      para 'Arial (default)', left: 400, top: 20
+    end
+    flow do
+      title 'Cool Question', font: 'Coolvetica'
+      para 'Coolvetica', left: 400, top: 20
+    end
+    flow do
+      title 'Lucid Question', font: 'Lucida console'
+      para 'Lucida Console', left: 400, top: 20
+    end
+  end
+end

data/samples/simple-form.rb

@@ -1,25 +1,26 @@
-Shoes.app :width => 320, :height => 420 do
-  background "../static/menu-gray.png"
-  background "../static/menu-top.png", :height => 50
-  background "../static/menu-left.png", :top => 50, :width => 55
-  background "../static/menu-right.png", :right => 0, :top => 50, :width => 55
-  image "../static/menu-corner1.png", :top => 0, :left => 0
-  image "../static/menu-corner2.png", :right => 0, :top => 0
+Shoes.app width: 320, height: 420 do
+  static_dir = Shoes::DIR + "/static/"
+  background static_dir + "menu-gray.png"
+  background static_dir + "menu-top.png", height: 50
+  background static_dir + "menu-left.png", top: 50, width: 55
+  background static_dir + "menu-right.png", right: 0, top: 50, width: 55
+  image static_dir + "menu-corner1.png", top: 0, left: 0
+  image static_dir + "menu-corner2.png", right: 0, top: 0
 
-  stack :margin => 40 do
-    stack :margin => 10 do
+  stack margin: 40 do
+    stack margin: 10 do
       para "Name"
-      @name = list_box :items => ["Phyllis", "Ronald", "Wyatt"]
+      @name = list_box items: ["Phyllis", "Ronald", "Wyatt"]
     end
-    stack :margin => 10 do
+    stack margin: 10 do
       para "Address"
       @address = edit_line
     end
-    stack :margin => 10 do
+    stack margin: 10 do
       para "Phone"
       @phone = edit_line
     end
-    stack :margin => 10 do
+    stack margin: 10 do
       button "Save" do
         Shoes.p [@name.text, @address.text, @phone.text]
       end

data/samples/simple-fullscreen.rb

@@ -0,0 +1,4 @@
+Shoes.app do
+  button('fullscreen') { self.fullscreen = true }
+  button('turn back')  { self.fullscreen = false }
+end

data/samples/simple-guess-game.rb

@@ -0,0 +1,28 @@
+class Answer < Shoes::Widget
+  attr_reader :mark
+  def initialize word
+    mark = nil
+    flow do
+      flow(width: 70, height: 20){para word}
+      mark = image(File.join(Shoes::DIR, 'samples/loogink.png'), width: 20, height: 20).hide
+    end
+    @mark = mark
+  end
+end
+
+Shoes.app width: 200, height: 85 do
+  stack width: 0.5, height:1.0 do
+    background palegreen
+    para '1. apple'
+    ans = answer '2. tomato'
+    para '3. orange'
+    button('Ans.'){ans.mark.toggle}
+  end
+  stack width: 0.5, height: 1.0 do
+    background lightsteelblue
+    para '1. cat'
+    para '2. dog'
+    ans = answer '3. bird'
+    button('Ans.'){ans.mark.toggle}
+  end
+end

data/samples/simple-keypress.rb

@@ -0,0 +1,14 @@
+Shoes.app do
+  s = stack do
+    title 'come on press some keys'
+  end
+
+  keypress do |key|
+    s.append do para 'You pressed ' + key.to_s end
+    p key
+  end
+  keyrelease do |key|
+    s.append do para 'You released ' + key.to_s end
+    p key
+  end
+end

data/samples/simple-manual.rb

@@ -0,0 +1,2 @@
+Shoes.show_manual 'English'
+#Shoes.show_manual 'Japanese'

data/samples/simple-mask.rb

@@ -1,19 +1,19 @@
 Shoes.app do
   background black
 
-  stack :top => 0.4, :left => 0.2 do
+  stack top: 0.4, left: 0.2 do
     @stripes = stack
 
     mask do
-      title "Shoes", :weight => "bold", :size => 82
+      title "Shoes", weight: "bold", size: 82
     end
   end
-  
+
   animate 10 do
     @stripes.clear do
       20.times do |i|
         strokewidth 4
-        stroke rgb((0.0..0.5).rand, (0.0..1.0).rand, (0.0..0.3).rand)
+        stroke rgb(rand(0.0..0.5), rand(0.0..1.0), rand(0.0..0.3))
         line 0, i * 5, 400, i * 8
       end
     end

data/samples/simple-menu.rb

@@ -1,13 +1,26 @@
 class MenuPanel < Shoes::Widget
   @@boxes = []
+
+  # Handling width against internal stack until widget widths are fixed
+  # https://github.com/shoes/shoes4/issues/641
+  def width
+    @stack.width
+  end
+
+  def width=(value)
+    @stack.width = value
+  end
+
   def initialize(color, args)
     @@boxes << self
-    background color
-    para link("Box #{@@boxes.length}", :stroke => white, :fill => nil).
-      click { visit "/" },
-        :margin => 18, :align => "center", :size => 20
-    hover { expand }
+    @stack = stack(args) do
+      background color
+      para link("Box #{@@boxes.length}", fg: white, fill: nil, click: "/"),
+        margin: 18, align: "center", size: 20
+      hover { expand }
+    end
   end
+
   def expand
     if self.width < 170
       a = animate 30 do
@@ -21,11 +34,14 @@ class MenuPanel < Shoes::Widget
   end
 end
 
-Shoes.app :width => 400, :height => 130 do
-  style(Link, :underline => nil)
-  style(LinkHover, :fill => nil, :underline => nil)
-  menu_panel green,  :width => 170, :height => 120, :margin => 4
-  menu_panel blue,   :width => 140, :height => 120, :margin => 4
-  menu_panel red,    :width => 140, :height => 120, :margin => 4
-  menu_panel purple, :width => 140, :height => 120, :margin => 4
+Shoes.app width: 600, height: 130 do
+  style(Shoes::Link, underline: nil)
+
+  # hover styling currently a no-op https://github.com/shoes/shoes4/issues/638
+  style(Shoes::LinkHover, fill: nil, underline: nil)
+
+  menu_panel green,  width: 170, height: 120, margin: 4
+  menu_panel blue,   width: 140, height: 120, margin: 4
+  menu_panel red,    width: 140, height: 120, margin: 4
+  menu_panel purple, width: 140, height: 120, margin: 4
 end

data/samples/simple-mouse-follow.rb

@@ -0,0 +1,8 @@
+Shoes.app width: 200, height: 200 do
+  background black
+  fill white
+  @circ = oval 0, 0, 100
+  motion do |top, left|
+    @circ.move top - 50, left - 50
+  end
+end

data/samples/simple-move.rb

@@ -0,0 +1,13 @@
+Shoes.app do
+  flow margin: 12 do
+    # Set up three buttons
+    button "One"
+    @two = button "Two"
+    button "Three"
+
+    # Bounce the second button
+    animate do |i|
+      @two.move(40, 40 + (Math.sin(i) * 6).to_i)
+    end
+  end
+end

data/samples/simple-oval.rb

@@ -0,0 +1,3 @@
+Shoes.app do
+  oval 100, 100, 100
+end

data/samples/simple-sample-executor.rb

@@ -0,0 +1,6 @@
+Shoes.app width: 450, height: 32 do
+  4.times do |i|
+    i+=1
+    button("sample#{i}"){ load "samples/sample#{i}.rb" }
+  end
+end

data/samples/simple-shoes-intro.rb

@@ -0,0 +1,22 @@
+Shoes.app width: 700, height: 600 do
+  title "Shoes is a ", link("tiny"){alert "Cool!"}, " graphics toolkit. "
+
+  flow width: 0.4 do
+    image File.join(Shoes::DIR, 'static/shoes-icon.png') do
+      alert "You're soooo quick!"
+    end
+  end
+
+  flow width: 0.6 do
+    tagline "It's simple and straightforward. ", 
+      link("Shoes "){alert "Yay!"}, 
+      "was born to be easy! ", 
+      link("Shoes "){alert "Yay!"}, 
+      "was born to be easy! ", 
+      link("Shoes "){alert "Yay!"}, 
+      "was born to be easy! ", 
+      "Really, it was made for absolute beginners. "
+  end
+
+  subtitle link(strong em("There's ", fg(bg("really ", "really ", yellow), "#f00"), "nothing to it. ")){alert "Have fun!"}
+end

data/samples/simple-slide.rb

@@ -7,10 +7,12 @@ Shoes.app do
     @anim.stop
     @anim = nil
   end
+
   def slide_anim &blk
     stop_anim if @anim
     @anim = animate 30, &blk
   end
+
   def slide_out slot
     slide_anim do |i|
       slot.height = 150 - (i * 3)
@@ -21,6 +23,7 @@ Shoes.app do
       end
     end
   end
+
   def slide_in slot
     slot.show
     slide_anim do |i|
@@ -31,14 +34,22 @@ Shoes.app do
   end
 
   background white
-  stack :margin => 10 do
+  stack margin: 10 do
     para link("slide out") { slide_out @lipsum }, " | ",
       link("slide in") { slide_in @lipsum }
-    @lipsum = stack :width => 1.0, :height => 150 do
+    @lipsum = stack width: 1.0, height: 150 do
       stack do
         background "#ddd"
-        border "#eee", :strokewidth => 5
-        para "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.", :margin => 10
+        border "#eee", strokewidth: 5
+        para "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed " +
+               "do eiusmod tempor incididunt ut labore et dolore magna " +
+               "aliqua. Ut enim ad minim veniam, quis nostrud exercitation " +
+               "ullamco laboris nisi ut aliquip ex ea commodo consequat. " +
+               "Duis aute irure dolor in reprehenderit in voluptate velit " +
+               "esse cillum dolore eu fugiat nulla pariatur. Excepteur sint " +
+               "occaecat cupidatat non proident, sunt in culpa qui officia " +
+               "deserunt mollit anim id est laborum.",
+             margin: 10
       end
     end
   end

data/samples/simple-sound.rb

@@ -0,0 +1,30 @@
+Shoes.app do
+
+  boing     = sound("./samples/sounds/61847__simon-rue__boink-v3.wav")
+  fog_horn  = sound("./samples/sounds/145622__andybrannan__train-fog-horn-long-wyomming.aiff")
+  explosion = sound("./samples/sounds/102719__sarge4267__explosion.mp3")
+  shields   = sound("./samples/sounds/46492__phreaksaccount__shields1.ogg")
+
+  # Set up three buttons
+  button "Boing WAV (740ms)" do
+    puts "Boing clicked"
+    boing.play
+  end
+
+  @two = button "Fog Horn AIFF (18.667s)" do
+    puts "Fog Horn clicked"
+    fog_horn.play
+  end
+
+  button "Explosion MP3 (4.800s)" do
+    puts "Explosion clicked"
+    explosion.play
+  end
+
+  button "Shields UP! OGG (2.473s)" do
+    puts "Shields clicked"
+    shields.play
+  end
+
+
+end

data/samples/simple-sphere.rb

@@ -1,25 +1,25 @@
-Shoes.app :width => 500, :height => 500, :resizable => false do
-  image 400, 470, :top => 30, :left => 50 do
+Shoes.app width: 500, height: 500, resizable: false do
+  image 400, 470, top: 30, left: 50 do
     nostroke
     fill "#127"
-    image :top => 230, :left => 0 do
+    image top: 230, left: 0 do
       oval 70, 130, 260, 40
       blur 30
     end
     oval 10, 10, 380, 380
-    image :top => 0, :left => 0 do
+    image top: 0, left: 0 do
       fill "#46D"
       oval 30, 30, 338, 338
       blur 10
     end
     fill gradient(rgb(1.0, 1.0, 1.0, 0.7), rgb(1.0, 1.0, 1.0, 0.0))
     oval 80, 14, 240, 176
-    image :top => 0, :left => 0 do
+    image top: 0, left: 0 do
       fill "#79F"
       oval 134, 134, 130, 130
       blur 40
     end
-    image :top => 150, :left => 40, :width => 320, :height => 260 do
+    image top: 150, left: 40, width: 320, height: 260 do
       fill gradient(rgb(0.7, 0.9, 1.0, 0.0), rgb(0.7, 0.9, 1.0, 0.6))
       oval 60, 60, 200, 136
       blur 20

data/samples/simple-stripes.rb

@@ -0,0 +1,8 @@
+Shoes.app do
+  spacing = 20
+
+  50.times do |i|
+    line(0, spacing * i, 1000, 1000 + (spacing * i))
+    line(spacing * (i + 1), 0, 1000 + (spacing * (i + 1)), 1000)
+  end
+end

data/samples/simple-timer.rb

@@ -1,13 +1,15 @@
-Shoes.app :height => 150, :width => 250 do
+Shoes.app height: 150, width: 250 do
   background rgb(240, 250, 208)
-  stack :margin => 10 do
+  stack margin: 10 do
     button "Start" do
       @time = Time.now
       @label.replace "Stop watch started at #@time"
     end
+
     button "Stop" do
       @label.replace "Stopped, ", strong("#{Time.now - @time}"), " seconds elapsed."
     end
+
     @label = para "Press ", strong("start"), " to begin timing."
   end
 end

data/samples/simple-video.rb

@@ -1,6 +1,6 @@
-Shoes.app :width => 408, :height => 346, :resizable => false do
+Shoes.app width: 408, height: 346, resizable: false do
   background "#eee"
-  stack :margin => 4 do
+  stack margin: 4 do
     @vid = video "http://www.rin-shun.com/shoes/AdventureTimewithFinnandJakeFinnTime.mp4"
   end
   para "controls: ",