Adds progress bars

README.md

@@ -210,3 +210,31 @@ button {
   }
 }
 ```
+
+### Progress
+
+An animated progress bar.
+
+| Attribute | Default                                     | Valid            | Note                                 |
+|-----------|---------------------------------------------|------------------|--------------------------------------|
+| width     | 400                                         | Integer          | Set the width of the progress bar    |
+| height    | 42                                          | Integer          | Set the height of the progress bar   |
+| speed     | 1                                           | Integer          | Rate of change when animating        |
+| max       | 100                                         | Integer          | Maximum possible value in range      |
+| background| sprites/draco-ui/progress/background_01.png | Relative path    | Sprite path for background image     |
+| fill      | sprites/draco-ui/progress/background_03.png | Relative path    | Sprite path for fill image           |
+| value     | `-> { 0 }`                                  | Proc             | Returns the current value every tick |
+
+#### Example
+
+```ruby
+progress {
+  width 400
+  height 42
+  speed 1
+  max 100
+  background 'sprites/draco-ui/progress/background_01.png'
+  fill 'sprites/draco-ui/progress/background_04.png'
+  value -> { 90 }
+}
+```

Smaug.toml

@@ -1,8 +1,8 @@
 [package]
 name = "draco-ui"
 authors = ["Logan Koester <[email protected]>"]
-version = "0.2.1"
-homepage = "https://smaug.dev/draco-ui"
+version = "0.3.0"
+homepage = "https://smaug.dev/packages/draco-ui"
 keywords = []
 
 # Optional:
@@ -34,12 +34,15 @@ requires = [
 "templates/app/components/stateful_sprite.rb" = "app/components/draco-ui/stateful_sprite.rb"
 "templates/app/components/text.rb" = "app/components/draco-ui/text.rb"
 "templates/app/components/tree.rb" = "app/components/draco-ui/tree.rb"
+"templates/app/components/display_progress.rb" = "app/components/draco-ui/display_progress.rb"
 "templates/app/components/index.rb" = "app/components/draco-ui/index.rb"
 
 "templates/app/entities/button.rb" = "app/entities/draco-ui/button.rb"
 "templates/app/entities/label.rb" = "app/entities/draco-ui/label.rb"
 "templates/app/entities/layout.rb" = "app/entities/draco-ui/layout.rb"
 "templates/app/entities/panel.rb" = "app/entities/draco-ui/panel.rb"
+"templates/app/entities/progress.rb" = "app/entities/draco-ui/progress.rb"
+"templates/app/entities/progress_value.rb" = "app/entities/draco-ui/progress_value.rb"
 "templates/app/entities/index.rb" = "app/entities/draco-ui/index.rb"
 
 "templates/app/systems/click.rb" = "app/systems/draco-ui/click.rb"
@@ -50,8 +53,14 @@ requires = [
 "templates/app/systems/render_button_labels.rb" = "app/systems/draco-ui/render_button_labels.rb"
 "templates/app/systems/render_labels.rb" = "app/systems/draco-ui/render_labels.rb"
 "templates/app/systems/sprite_state.rb" = "app/systems/draco-ui/sprite_state.rb"
+"templates/app/systems/update_progress.rb" = "app/systems/draco-ui/update_progress.rb"
 "templates/app/systems/index.rb" = "app/systems/draco-ui/index.rb"
 
+"templates/sprites/progress/background_01.png" = "sprites/draco-ui/progress/background_01.png"
+"templates/sprites/progress/background_02.png" = "sprites/draco-ui/progress/background_02.png"
+"templates/sprites/progress/background_03.png" = "sprites/draco-ui/progress/background_03.png"
+"templates/sprites/progress/background_04.png" = "sprites/draco-ui/progress/background_04.png"
+
 [dragonruby]
 version = "2"
 edition = "standard"

examples/demo/Smaug.toml

@@ -8,7 +8,7 @@ authors = ["Logan Koester <[email protected]>"]
 icon = "metadata/icon.png"
 
 [dragonruby]
-version = "2.10"
+version = "2.14"
 edition = "pro"
 
 [itch]
@@ -20,7 +20,7 @@ username = "todo-change-me"
 
 [dependencies]
 draco = "0.6.1"
-draco-common = "0.1.1"
+draco-common = "0.2.1"
 draco-state = "0.2.0"
 draco-events = "0.2.0"
 draco-scenes = "0.2.0"

examples/demo/app/components/common/belongs_to.rb

@@ -0,0 +1,3 @@
+class BelongsTo < Draco::Component
+  attribute :id
+end

examples/demo/app/components/common/index.rb

@@ -5,3 +5,4 @@
 require "app/components/common/speed.rb"
 require "app/components/common/sprite.rb"
 require "app/components/common/visible.rb"
+require "app/components/common/belongs_to.rb"

examples/demo/app/components/common/position.rb

@@ -4,4 +4,6 @@ class Position < Draco::Component
 
   attribute :dx, default: 0
   attribute :dy, default: 0
+
+  attribute :absolute, default: false
 end

examples/demo/app/components/common/sprite.rb

@@ -2,4 +2,9 @@ class Sprite < Draco::Component
   attribute :path
   attribute :flip_vertically, default: false
   attribute :flip_horizontally, default: false
+  attribute :color, default: nil
+  attribute :source_w
+  attribute :source_h
+  attribute :source_x
+  attribute :source_y
 end

examples/demo/app/components/draco-ui/display_progress.rb

@@ -0,0 +1,8 @@
+class DisplayProgress < Draco::Component
+  attribute :_value, default: 0
+  attribute :value, default: ->() { 0 }
+  attribute :max, default: 100
+  attribute :progress_value_id, default: nil
+  attribute :background, default: 'sprites/draco-ui/progress/background_01.png'
+  attribute :fill, default: 'sprites/draco-ui/progress/background_03.png'
+end

examples/demo/app/components/draco-ui/index.rb

@@ -5,3 +5,4 @@
 require 'app/components/draco-ui/layout_grid.rb'
 require 'app/components/draco-ui/clickable.rb'
 require 'app/components/draco-ui/text.rb'
+require 'app/components/draco-ui/display_progress.rb'

examples/demo/app/entities/draco-ui/index.rb

@@ -2,3 +2,5 @@
 require 'app/entities/draco-ui/button.rb'
 require 'app/entities/draco-ui/layout.rb'
 require 'app/entities/draco-ui/label.rb'
+require 'app/entities/draco-ui/progress.rb'
+require 'app/entities/draco-ui/progress_value.rb'

examples/demo/app/entities/draco-ui/progress.rb

@@ -0,0 +1,13 @@
+class Progress < Draco::Entity
+  component Visible
+  component Position, x: 355, y: 64, absolute: true
+  component Size, width: 400, height: 42
+  component Speed, speed: 1
+  component Sprite,
+            path: 'sprites/draco-ui/progress/background_01.png',
+            source_x: 0,
+            source_y: 0,
+            source_w: 400,
+            source_h: 41
+  component DisplayProgress
+end

examples/demo/app/entities/draco-ui/progress_value.rb

@@ -0,0 +1,10 @@
+class ProgressValue < Draco::Entity
+  component Position
+  component Size
+  component Sprite,
+            path: 'sprites/draco-ui/progress/background_03.png',
+            source_x: 0,
+            source_y: 0,
+            source_w: 400,
+            source_h: 41
+end

examples/demo/app/systems/change_scene.rb

@@ -20,6 +20,10 @@ def tick(args)
     if args.inputs.keyboard.key_down.five
       world.scene = :scene5
     end
+
+    if args.inputs.keyboard.key_down.six
+      world.scene = :scene6
+    end
   end
 
 end

examples/demo/app/systems/common/render_sprites.rb

@@ -1,3 +1,38 @@
+class SpriteEntity
+  attr_sprite
+
+  def initialize(entity, camera)
+    if camera && !entity.position.absolute
+      position = camera.translate_pos(entity.position)
+    else
+      position = entity.position
+    end
+
+    if entity.sprite.color
+      rgba = entity.sprite.color.to_h
+      @a = rgba[:a] # alpha
+      @r = rgba[:r] # red saturation
+      @g = rgba[:g] # green saturation
+      @b = rgba[:b] # blue saturation
+    end
+
+    @source_w = entity.sprite.source_w if entity.sprite.source_w
+    @source_h = entity.sprite.source_h if entity.sprite.source_h
+
+    @source_x = entity.sprite.source_x if entity.sprite.source_x
+    @source_y = entity.sprite.source_y if entity.sprite.source_y
+
+    @x = position.x
+    @y = position.y
+    @w = entity.size.width
+    @h = entity.size.height
+    @path = entity.sprite.path
+    @angle = entity.components[:rotation] ? entity.rotation.angle : 0
+    @flip_vertically = entity.sprite.flip_vertically
+    @flip_horizontally = entity.sprite.flip_horizontally
+  end
+end
+
 class RenderSprites < Draco::System
   filter Position, Size, Sprite, Visible
 
@@ -6,24 +41,10 @@ def tick(args)
 
     camera = world.respond_to?(:camera) ? world.camera : world.filter([Draco::Tag(:default_camera)]).first
 
-    sprites = entities.map do |entity|
-      if camera
-        position = camera.translate_pos(entity.position)
-      else
-        position = entity.position
-      end
-      {
-        x: position.x,
-        y: position.y,
-        w: entity.size.width,
-        h: entity.size.height,
-        path: entity.sprite.path,
-        angle: entity.components[:rotation] ? entity.rotation.angle : 0,
-        flip_vertically: entity.sprite.flip_vertically,
-        flip_horizontally: entity.sprite.flip_horizontally,
-      }
+    @sprites = entities.map do |entity|
+      SpriteEntity.new(entity, camera)
     end
 
-    args.outputs.sprites << sprites
+    args.outputs.sprites << @sprites
   end
 end

examples/demo/app/systems/draco-ui/index.rb

@@ -6,3 +6,4 @@
 require 'app/systems/draco-ui/focus.rb'
 require 'app/systems/draco-ui/click.rb'
 require 'app/systems/draco-ui/sprite_state.rb'
+require 'app/systems/draco-ui/update_progress.rb'

examples/demo/app/systems/draco-ui/position_alignment.rb

@@ -7,7 +7,8 @@ def tick(args)
     entities.each do |entity|
       entity.components << Position.new(
         x: (args.grid.w / 2 - (entity.size.width / 2)),
-        y: (args.grid.h / 2 - (entity.size.height / 2))
+        y: (args.grid.h / 2 - (entity.size.height / 2)),
+        absolute: true
       )
     end
   end

examples/demo/app/systems/draco-ui/position_layout.rb

@@ -43,7 +43,8 @@ def space_start(layout, parent, children)
 
       child.components << Position.new(
         x: align(layout, parent, child),
-        y: y
+        y: y,
+        absolute: true
       )
     end
   end
@@ -59,7 +60,8 @@ def space_end(layout, parent, children)
 
       child.components << Position.new(
         x: align(layout, parent, child),
-        y: y
+        y: y,
+        absolute: true
       )
     end
   end
@@ -78,7 +80,8 @@ def space_evenly(layout, parent, children)
 
       child.components << Position.new(
         x: align(layout, parent, child),
-        y: y
+        y: y,
+        absolute: true
       )
 
       y -= space_per_child / 2

examples/demo/app/systems/draco-ui/update_progress.rb

@@ -0,0 +1,55 @@
+class UpdateProgress < Draco::System
+  filter DisplayProgress, Visible
+
+  def tick(args)
+    entities.each do |entity|
+      new_value = entity.display_progress.value.call
+      entity.display_progress._value = new_value
+
+      progress_value = get_progress_value(entity)
+      multiplier = entity.size.width.idiv(entity.display_progress.max)
+      progress_value.position.x = entity.position.x
+      progress_value.position.y = entity.position.y
+      progress_value.size.height = entity.size.height
+      target_width = (entity.display_progress._value * multiplier).greater(0)
+
+      if progress_value.size.width > target_width
+        progress_value.size.width -= entity.speed.speed
+      elsif progress_value.size.width < target_width
+        progress_value.size.width += entity.speed.speed
+      end
+
+      args.outputs.sprites << {
+        x: entity.position.x,
+        y: entity.position.y,
+        w: entity.size.width,
+        h: entity.size.height,
+        path: entity.display_progress.background,
+        source_x: 0,
+        source_y: 0,
+        source_w: 400,
+        source_h: 41
+      }
+
+      args.outputs.sprites << SpriteEntity.new(progress_value, nil)
+    end
+  end
+
+  def get_progress_value(entity)
+    progress_value_id = entity.display_progress.progress_value_id
+    progress_value = world.entities[progress_value_id].first
+
+    unless progress_value
+      progress_value = ProgressValue.new({
+        sprite: {
+          path: entity.display_progress.fill
+        }
+      })
+      world.entities << progress_value
+      entity.display_progress.progress_value_id = progress_value.id
+    end
+
+    progress_value
+  end
+
+end

examples/demo/app/worlds/demo.rb

@@ -1,6 +1,6 @@
 class Demo < Draco::World
-  include Draco::Events
   include Draco::Scenes
+  include Draco::Events
   include Draco::UI
   include Draco::Common::World
 
@@ -260,6 +260,49 @@ class Demo < Draco::World
   scene :scene5 do
     include Draco::UI
 
+    layout {
+      align :center
+      space :evenly
+      padding 32
+
+      label {
+        text "Progress"
+        size 10
+        font 'fonts/kenney-fonts/future.ttf'
+      }
+
+      progress {
+        width 400
+        height 42
+        speed 2
+        value -> { 90 }
+        max 100
+      }
+
+      progress {
+        width 200
+        height 21
+        speed 1
+        background 'sprites/draco-ui/progress/background_01.png'
+        fill 'sprites/draco-ui/progress/background_04.png'
+        value -> { 50 }
+      }
+
+      button {
+        text 'Continue'
+        variant :green
+        size 16
+        padding 24
+        on_click ->(entity, world, args) {
+          world.scene = :scene6
+        }
+      }
+    }
+  end
+
+  scene :scene6 do
+    include Draco::UI
+
     panel {
       width $gtk.args.grid.w - 90
       height 400