Make changing an element's styles trigger element to re-stylize

README.md

@@ -35,7 +35,7 @@ class Hello < CyberarmEngine::GuiState
     background Gosu::Color::GRAY
 
     stack do
-      label "Hello World!"
+      banner "Hello World!"
 
       button "close" do
         window.close

lib/cyberarm_engine/game_state.rb

@@ -3,11 +3,12 @@ module CyberarmEngine
     include Common
 
     attr_accessor :options, :global_pause
-    attr_reader :game_objects
+    attr_reader :game_objects, :timers
 
     def initialize(options = {})
       @options = options
       @game_objects = []
+      @timers = []
       @global_pause = false
       window.text_input = nil unless options[:preserve_text_input]
 
@@ -28,6 +29,8 @@ module CyberarmEngine
 
     def update
       @game_objects.each(&:update)
+      @timers.each(&:update)
+      @timers.delete_if(&:dead?)
     end
 
     def needs_redraw?
@@ -120,5 +123,9 @@ module CyberarmEngine
     def add_game_object(object)
       @game_objects << object
     end
+
+    def add_timer(timer)
+      @timers << timer
+    end
   end
 end

lib/cyberarm_engine/timer.rb

@@ -19,5 +19,9 @@ module CyberarmEngine
         @block.call if @block
       end
     end
+
+    def dead?
+      @triggered && !@looping
+    end
   end
 end

lib/cyberarm_engine/ui/border_canvas.rb

@@ -62,36 +62,36 @@ module CyberarmEngine
 
     def update
       # TOP
-      @top.x = @element.x + @element.style.border_thickness_left
+      @top.x = @element.x + @element.styled(:border_thickness_left)
       @top.y = @element.y
       @top.z = @element.z
 
-      @top.width  = @element.width - @element.style.border_thickness_left
-      @top.height = @element.style.border_thickness_top
+      @top.width  = @element.width - @element.styled(:border_thickness_left)
+      @top.height = @element.styled(:border_thickness_top)
 
       # RIGHT
       @right.x = @element.x + @element.width
-      @right.y = @element.y + @element.style.border_thickness_top
+      @right.y = @element.y + @element.styled(:border_thickness_top)
       @right.z = @element.z
 
-      @right.width  = -@element.style.border_thickness_right
-      @right.height = @element.height - @element.style.border_thickness_top
+      @right.width  = -@element.styled(:border_thickness_right)
+      @right.height = @element.height - @element.styled(:border_thickness_top)
 
       # BOTTOM
       @bottom.x = @element.x
       @bottom.y = @element.y + @element.height
       @bottom.z = @element.z
 
-      @bottom.width  = @element.width - @element.style.border_thickness_right
-      @bottom.height = -@element.style.border_thickness_bottom
+      @bottom.width  = @element.width - @element.styled(:border_thickness_right)
+      @bottom.height = -@element.styled(:border_thickness_bottom)
 
       # LEFT
       @left.x = @element.x
       @left.y = @element.y
       @left.z = @element.z
 
-      @left.width  = @element.style.border_thickness_left
-      @left.height = @element.height - @element.style.border_thickness_bottom
+      @left.width  = @element.styled(:border_thickness_left)
+      @left.height = @element.height - @element.styled(:border_thickness_bottom)
 
       @top.update
       @right.update

lib/cyberarm_engine/ui/dsl.rb

@@ -1,5 +1,17 @@
 module CyberarmEngine
   module DSL
+    def every(milliseconds, &block)
+      element_parent.gui_state.add_timer(
+        CyberarmEngine::Timer.new(milliseconds, true, &block)
+      )
+    end
+
+    def after(milliseconds, &block)
+      element_parent.gui_state.add_timer(
+        CyberarmEngine::Timer.new(milliseconds, false, &block)
+      )
+    end
+
     def flow(options = {}, &block)
       container(CyberarmEngine::Element::Flow, options, &block)
     end
@@ -101,7 +113,7 @@ module CyberarmEngine
     end
 
     def background(color = Gosu::Color::NONE)
-      element_parent.style.default[:background] = color
+      element_parent.style.background = color
     end
 
     def theme(theme)

lib/cyberarm_engine/ui/element.rb

@@ -38,10 +38,10 @@ module CyberarmEngine
       @style.width  = default(:width)  || nil
       @style.height = default(:height) || nil
 
-      @style.background_canvas = Background.new
-      @style.background_nine_slice_canvas = BackgroundNineSlice.new
-      @style.background_image_canvas = BackgroundImage.new
-      @style.border_canvas = BorderCanvas.new(element: self)
+      @background_canvas = Background.new
+      @background_nine_slice_canvas = BackgroundNineSlice.new
+      @background_image_canvas = BackgroundImage.new
+      @border_canvas = BorderCanvas.new(element: self)
 
       @style_event = :default
 
@@ -58,27 +58,38 @@ module CyberarmEngine
       set_color
       set_font
 
-      set_padding
-      set_margin
-
       set_background
       set_background_nine_slice
       set_background_image
 
-      set_border_thickness
-      set_border_color
+      set_border
 
       root.gui_state.request_repaint
     end
 
+    def styled(key)
+      case key
+      when :border_color_bottom, :border_color_left, :border_color_right, :border_color_top
+        safe_style_fetch(key, :border_color)
+      when :border_thickness_bottom, :border_thickness_left, :border_thickness_right, :border_thickness_top
+        safe_style_fetch(key, :border_thickness)
+      when :margin_bottom, :margin_left, :margin_right, :margin_top
+        safe_style_fetch(key, :margin)
+      when :padding_bottom, :padding_left, :padding_right, :padding_top
+        safe_style_fetch(key, :padding)
+      else
+        safe_style_fetch(key)
+      end
+    end
+
     def safe_style_fetch(key, fallback_key = nil)
       # Attempt to return value for requested key
-      v = @style.hash.dig(@style_event, key)
+      v = @style.send(@style_event)&.send(key) || @style.send(key)
       return v if v
 
       # Attempt to return overriding value
       if fallback_key
-        v = @style.hash.dig(@style_event, fallback_key)
+        v = @style.send(@style_event)&.send(fallback_key) || @style.send(fallback_key)
         return v if v
       end
 
@@ -92,8 +103,7 @@ module CyberarmEngine
     end
 
     def set_color
-      @style.color = safe_style_fetch(:color)
-      @text&.color = @style.color
+      @text&.color = safe_style_fetch(:color)
     end
 
     def set_font
@@ -101,77 +111,43 @@ module CyberarmEngine
     end
 
     def set_background
-      @style.background = safe_style_fetch(:background)
-
-      @style.background_canvas.background = @style.background
+      @background_canvas.background = safe_style_fetch(:background)
     end
 
     def set_background_nine_slice
-      @style.background_nine_slice = safe_style_fetch(:background_nine_slice)
+      @background_nine_slice_canvas.x = @x
+      @background_nine_slice_canvas.y = @y
+      @background_nine_slice_canvas.z = @z
+      @background_nine_slice_canvas.width = width
+      @background_nine_slice_canvas.height = height
 
-      @style.background_nine_slice_mode = safe_style_fetch(:background_nine_slice_mode) || :stretch
-      @style.background_nine_slice_color = safe_style_fetch(:background_nine_slice_color) || Gosu::Color::WHITE
-      @style.background_nine_slice_canvas.color = @style.background_nine_slice_color
+      @background_nine_slice_canvas.mode = safe_style_fetch(:background_nine_slice_mode) || :stretch
 
-      @style.background_nine_slice_from_edge = safe_style_fetch(:background_nine_slice_from_edge)
+      @background_nine_slice_canvas.color = safe_style_fetch(:background_nine_slice_color) || Gosu::Color::WHITE
 
-      @style.background_nine_slice_left      = safe_style_fetch(:background_nine_slice_left, :background_nine_slice_from_edge)
-      @style.background_nine_slice_top       = safe_style_fetch(:background_nine_slice_top, :background_nine_slice_from_edge)
-      @style.background_nine_slice_right     = safe_style_fetch(:background_nine_slice_right, :background_nine_slice_from_edge)
-      @style.background_nine_slice_bottom    = safe_style_fetch(:background_nine_slice_bottom, :background_nine_slice_from_edge)
+      @background_nine_slice_canvas.left   = safe_style_fetch(:background_nine_slice_left, :background_nine_slice_from_edge)
+      @background_nine_slice_canvas.top    = safe_style_fetch(:background_nine_slice_top, :background_nine_slice_from_edge)
+      @background_nine_slice_canvas.right  = safe_style_fetch(:background_nine_slice_right, :background_nine_slice_from_edge)
+      @background_nine_slice_canvas.bottom = safe_style_fetch(:background_nine_slice_bottom, :background_nine_slice_from_edge)
+
+      @background_nine_slice_canvas.image = safe_style_fetch(:background_nine_slice)
     end
 
     def set_background_image
-      @style.background_image = safe_style_fetch(:background_image)
-      @style.background_image_mode = safe_style_fetch(:background_image_mode) || :stretch
-      @style.background_image_color = safe_style_fetch(:background_image_color) || Gosu::Color::WHITE
-      @style.background_image_canvas.mode = @style.background_image_mode
-      @style.background_image_canvas.color = @style.background_image_color
+      @background_image_canvas.image = safe_style_fetch(:background_image)
+      @background_image_canvas.mode = safe_style_fetch(:background_image_mode) || :stretch
+      @background_image_canvas.color = safe_style_fetch(:background_image_color) || Gosu::Color::WHITE
     end
 
-    def set_border_thickness
-      @style.border_thickness = safe_style_fetch(:border_thickness)
-
-      @style.border_thickness_left   = safe_style_fetch(:border_thickness_left, :border_thickness)
-      @style.border_thickness_right  = safe_style_fetch(:border_thickness_right, :border_thickness)
-      @style.border_thickness_top    = safe_style_fetch(:border_thickness_top, :border_thickness)
-      @style.border_thickness_bottom = safe_style_fetch(:border_thickness_bottom, :border_thickness)
-    end
-
-    def set_border_color
-      @style.border_color = safe_style_fetch(:border_color)
-
-      @style.border_color_left   = safe_style_fetch(:border_color_left, :border_color)
-      @style.border_color_right  = safe_style_fetch(:border_color_right, :border_color)
-      @style.border_color_top    = safe_style_fetch(:border_color_top, :border_color)
-      @style.border_color_bottom = safe_style_fetch(:border_color_bottom, :border_color)
-
-      @style.border_canvas.color = [
-        @style.border_color_top,
-        @style.border_color_right,
-        @style.border_color_bottom,
-        @style.border_color_left
+    def set_border
+      @border_canvas.color = [
+        styled(:border_color_top),
+        styled(:border_color_right),
+        styled(:border_color_bottom),
+        styled(:border_color_left)
       ]
     end
 
-    def set_padding
-      @style.padding = safe_style_fetch(:padding)
-
-      @style.padding_left   = safe_style_fetch(:padding_left, :padding)
-      @style.padding_right  = safe_style_fetch(:padding_right, :padding)
-      @style.padding_top    = safe_style_fetch(:padding_top, :padding)
-      @style.padding_bottom = safe_style_fetch(:padding_bottom, :padding)
-    end
-
-    def set_margin
-      @style.margin = safe_style_fetch(:margin)
-
-      @style.margin_left   = safe_style_fetch(:margin_left, :margin)
-      @style.margin_right  = safe_style_fetch(:margin_right, :margin)
-      @style.margin_top    = safe_style_fetch(:margin_top, :margin)
-      @style.margin_bottom = safe_style_fetch(:margin_bottom, :margin)
-    end
-
     def update_styles(event = :default)
       old_width = width
       old_height = height
@@ -322,10 +298,10 @@ module CyberarmEngine
       return unless visible?
       return unless element_visible?
 
-      @style.background_canvas.draw
-      @style.background_nine_slice_canvas.draw
-      @style.background_image_canvas.draw
-      @style.border_canvas.draw
+      @background_canvas.draw
+      @background_nine_slice_canvas.draw
+      @background_image_canvas.draw
+      @border_canvas.draw
 
       render
     end
@@ -357,6 +333,11 @@ module CyberarmEngine
 
     def update
       recalculate_if_size_changed
+
+      if @style.dirty?
+        @style.mark_clean!
+        stylize
+      end
     end
 
     def button_down(id)
@@ -394,11 +375,11 @@ module CyberarmEngine
     end
 
     def outer_width
-      @style.margin_left + width + @style.margin_right
+      styled(:margin_left) + width + styled(:margin_right)
     end
 
     def inner_width
-      (@style.border_thickness_left + @style.padding_left) + (@style.padding_right + @style.border_thickness_right)
+      (styled(:border_thickness_left) + styled(:padding_left)) + (styled(:padding_right) + styled(:border_thickness_right))
     end
 
     def height
@@ -418,11 +399,11 @@ module CyberarmEngine
     end
 
     def outer_height
-      @style.margin_top + height + @style.margin_bottom
+      styled(:margin_top) + height + styled(:margin_bottom)
     end
 
     def inner_height
-      (@style.border_thickness_top + @style.padding_top) + (@style.padding_bottom + @style.border_thickness_bottom)
+      (styled(:border_thickness_top) + styled(:padding_top)) + (styled(:padding_bottom) + styled(:border_thickness_bottom))
     end
 
     def scroll_width
@@ -454,9 +435,9 @@ module CyberarmEngine
 
         pairs_ << a_ unless pairs_.last == a_
 
-        @cached_scroll_height = pairs_.sum { |pair|  + @style.padding_top + @style.border_thickness_top + pair.map(&:outer_height).max } + @style.padding_bottom + @style.border_thickness_bottom
+        @cached_scroll_height = pairs_.sum { |pair|  + styled(:padding_top) + styled(:border_thickness_top) + pair.map(&:outer_height).max } + styled(:padding_bottom) + styled(:border_thickness_bottom)
       else
-        @cached_scroll_height = @style.padding_top + @style.border_thickness_top + @children.sum(&:outer_height) + @style.padding_bottom + @style.border_thickness_bottom
+        @cached_scroll_height = styled(:padding_top) + styled(:border_thickness_top) + @children.sum(&:outer_height) + styled(:padding_bottom) + styled(:border_thickness_bottom)
       end
     end
 
@@ -478,79 +459,60 @@ module CyberarmEngine
                  end
 
       # Handle fill behavior
-      if @parent && @style.fill &&
+      if @parent && styled(:fill) &&
          (dimension == :width && @parent.is_a?(Flow) ||
           dimension == :height && @parent.is_a?(Stack))
         new_size = space_available_width - noncontent_width if dimension == :width && @parent.is_a?(Flow)
         new_size = space_available_height - noncontent_height if dimension == :height && @parent.is_a?(Stack)
       end
 
-      return @style.send(:"min_#{dimension}") if @style.send(:"min_#{dimension}") && new_size.to_f < @style.send(:"min_#{dimension}")
-      return @style.send(:"max_#{dimension}") if @style.send(:"max_#{dimension}") && new_size.to_f > @style.send(:"max_#{dimension}")
+      return styled(:"min_#{dimension}") if styled(:"min_#{dimension}") && new_size.to_f < styled(:"min_#{dimension}")
+      return styled(:"max_#{dimension}") if styled(:"max_#{dimension}") && new_size.to_f > styled(:"max_#{dimension}")
 
       new_size
     end
 
     def space_available_width
       # TODO: This may get expensive if there are a lot of children, probably should cache it somehow
-      fill_siblings = @parent.children.select { |c| c.style.fill }.count.to_f # include self since we're dividing
+      fill_siblings = @parent.children.select { |c| c.styled(:fill) }.count.to_f # include self since we're dividing
 
-      available_space = ((@parent.content_width - (@parent.children.reject { |c| c.style.fill }).map(&:outer_width).sum) / fill_siblings)
+      available_space = ((@parent.content_width - (@parent.children.reject { |c| c.styled(:fill) }).map(&:outer_width).sum) / fill_siblings)
       (available_space.nan? || available_space.infinite?) ? 0 : available_space.floor # The parent element might not have its dimensions, yet.
     end
 
     def space_available_height
       # TODO: This may get expensive if there are a lot of children, probably should cache it somehow
-      fill_siblings = @parent.children.select { |c| c.style.fill }.count.to_f # include self since we're dividing
+      fill_siblings = @parent.children.select { |c| c.styled(:fill) }.count.to_f # include self since we're dividing
 
-      available_space = ((@parent.content_height - (@parent.children.reject { |c| c.style.fill }).map(&:outer_height).sum) / fill_siblings)
+      available_space = ((@parent.content_height - (@parent.children.reject { |c| c.styled(:fill) }).map(&:outer_height).sum) / fill_siblings)
       (available_space.nan? || available_space.infinite?) ? 0 : available_space.floor # The parent element might not have its dimensions, yet.
     end
 
     def background=(_background)
       root.gui_state.request_repaint
 
-      @style.background_canvas.background = _background
+      @background_canvas.background = _background
       update_background
     end
 
     def update_background
-      @style.background_canvas.x = @x
-      @style.background_canvas.y = @y
-      @style.background_canvas.z = @z
-      @style.background_canvas.width  = width
-      @style.background_canvas.height = height
+      @background_canvas.x = @x
+      @background_canvas.y = @y
+      @background_canvas.z = @z
+      @background_canvas.width  = width
+      @background_canvas.height = height
 
-      @style.background_canvas.update
-      update_background_nine_slice
+      @background_canvas.update
+      set_background_nine_slice
       update_background_image
-      @style.border_canvas.update
+      @border_canvas.update
     end
 
     def background_nine_slice=(_image_path)
       root.gui_state.request_repaint
 
-      @style.background_nine_slice_canvas.image = _image_path
-      update_background_nine_slice
-    end
-
-    def update_background_nine_slice
-      @style.background_nine_slice_canvas.x = @x
-      @style.background_nine_slice_canvas.y = @y
-      @style.background_nine_slice_canvas.z = @z
-      @style.background_nine_slice_canvas.width = width
-      @style.background_nine_slice_canvas.height = height
-
-      @style.background_nine_slice_canvas.mode = @style.background_nine_slice_mode
-
-      @style.background_nine_slice_canvas.color = @style.background_nine_slice_color
-
-      @style.background_nine_slice_canvas.left   = @style.background_nine_slice_left
-      @style.background_nine_slice_canvas.top    = @style.background_nine_slice_top
-      @style.background_nine_slice_canvas.right  = @style.background_nine_slice_right
-      @style.background_nine_slice_canvas.bottom = @style.background_nine_slice_bottom
-
-      @style.background_nine_slice_canvas.image = @style.background_nine_slice
+      @background_nine_slice_canvas.image = _image_path
+      set_background_nine_slice
     end
 
     def background_image=(image_path)
@@ -561,16 +523,16 @@ module CyberarmEngine
     end
 
     def update_background_image
-      @style.background_image_canvas.x = @x
-      @style.background_image_canvas.y = @y
-      @style.background_image_canvas.z = @z
-      @style.background_image_canvas.width = width
-      @style.background_image_canvas.height = height
+      @background_image_canvas.x = @x
+      @background_image_canvas.y = @y
+      @background_image_canvas.z = @z
+      @background_image_canvas.width = width
+      @background_image_canvas.height = height
 
-      @style.background_image_canvas.mode = @style.background_image_mode
-      @style.background_image_canvas.color = @style.background_image_color
+      @background_image_canvas.mode = safe_style_fetch(:background_image_mode) || :stretch
+      @background_image_canvas.color = safe_style_fetch(:background_image_color) || Gosu::Color::WHITE
 
-      @style.background_image_canvas.image = @style.background_image
+      @background_image_canvas.image = safe_style_fetch(:background_image)
     end
 
     def recalculate_if_size_changed

lib/cyberarm_engine/ui/elements/button.rb

@@ -10,7 +10,7 @@ module CyberarmEngine
 
         super(text_or_image, options, block)
 
-        @style.background_canvas.background = @style.background
+        @background_canvas.background = styled(:background)
       end
 
       def render
@@ -23,8 +23,8 @@ module CyberarmEngine
 
       def draw_image
         @image.draw(
-          @style.border_thickness_left + @style.padding_left + @x,
-          @style.border_thickness_top + @style.padding_top + @y,
+          styled(:border_thickness_left) + styled(:padding_left) + @x,
+          styled(:border_thickness_top) + styled(:padding_top) + @y,
           @z + 2,
           @scale_x, @scale_y, @text.color
         )
@@ -36,19 +36,19 @@ module CyberarmEngine
 
       def layout
         unless @enabled
-          @style.background_canvas.background = @style.disabled[:background]
-          @text.color = @style.disabled[:color]
+          @background_canvas.background = @style.disabled.background
+          @text.color = @style.disabled.color
         else
-          @style.background_canvas.background = @style.background
-          @text.color = @style.color
+          @background_canvas.background = styled(:background)
+          @text.color = styled(:color)
         end
 
         if @image
           @width = 0
           @height = 0
 
-          _width = dimensional_size(@style.image_width, :width)
-          _height = dimensional_size(@style.image_height, :height)
+          _width = dimensional_size(styled(:image_width), :width)
+          _height = dimensional_size(styled(:image_height), :height)
 
           if _width && _height
             @scale_x = _width.to_f / @image.width

lib/cyberarm_engine/ui/elements/container.rb

@@ -80,8 +80,8 @@ module CyberarmEngine
 
       def render
         Gosu.clip_to(
-          @x + @style.border_thickness_left + @style.padding_left,
-          @y + @style.border_thickness_top + @style.padding_top,
+          @x + styled(:border_thickness_left) + styled(:padding_left),
+          @y + styled(:border_thickness_top) + styled(:padding_top),
           content_width + 1,
           content_height + 1
         ) do
@@ -98,7 +98,7 @@ module CyberarmEngine
       end
 
       def update
-        update_scroll if @style.scroll
+        update_scroll if styled(:scroll)
         @children.each(&:update)
       end
 
@@ -154,7 +154,7 @@ module CyberarmEngine
       end
 
       def recalculate
-        @current_position = Vector.new(@style.margin_left + @style.padding_left, @style.margin_top + @style.padding_top)
+        @current_position = Vector.new(styled(:margin_left) + styled(:padding_left), styled(:margin_top) + styled(:padding_top))
 
         return unless visible?
 
@@ -173,7 +173,7 @@ module CyberarmEngine
         @cached_scroll_height = nil
 
         if is_root?
-          @width  = @style.width  = window.width
+          @width  = @style.width = window.width
           @height = @style.height = window.height
         else
           @width = 0
@@ -188,10 +188,10 @@ module CyberarmEngine
 
         # FIXME: Correctly handle alignment when element has siblings
         # FIXME: Enable alignment for any element, not just containers
-        if @style.v_align
+        if styled(:v_align)
           space = space_available_height
 
-          case @style.v_align
+          case styled(:v_align)
           when :center
             @y = parent.height / 2 - height / 2
           when :bottom
@@ -199,10 +199,10 @@ module CyberarmEngine
           end
         end
 
-        if @style.h_align
+        if styled(:h_align)
           space = space_available_width
 
-          case @style.h_align
+          case styled(:h_align)
           when :center
             @x = parent.width / 2 - width / 2
           when :right
@@ -213,8 +213,8 @@ module CyberarmEngine
         # t = Gosu.milliseconds
         # Move children to parent after positioning
         @children.each do |child|
-          child.x += (@x + @style.border_thickness_left) - style.margin_left
-          child.y += (@y + @style.border_thickness_top) - style.margin_top
+          child.x += (@x + styled(:border_thickness_left)) - styled(:margin_left)
+          child.y += (@y + styled(:border_thickness_top)) - styled(:margin_top)
 
           child.stylize
           child.recalculate
@@ -249,13 +249,6 @@ module CyberarmEngine
       end
 
       def max_width
-        # _width = dimensional_size(@style.width, :width)
-        # if _width
-        #   outer_width
-        # else
-        #   window.width - (@parent ? @parent.style.margin_right + @style.margin_right : @style.margin_right)
-        # end
-
         outer_width
       end
 
@@ -265,8 +258,8 @@ module CyberarmEngine
       end
 
       def position_on_current_line(element) # Flow
-        element.x = element.style.margin_left + @current_position.x
-        element.y = element.style.margin_top  + @current_position.y
+        element.x = element.styled(:margin_left) + @current_position.x
+        element.y = element.styled(:margin_top)  + @current_position.y
 
         @current_position.x += element.outer_width
       end
@@ -282,24 +275,24 @@ module CyberarmEngine
       end
 
       def position_on_next_line(element) # Flow
-        @current_position.x = @style.margin_left + @style.padding_left
+        @current_position.x = styled(:margin_left) + styled(:padding_left)
         @current_position.y += tallest_neighbor(element, @current_position.y).outer_height
 
-        element.x = element.style.margin_left + @current_position.x
-        element.y = element.style.margin_top  + @current_position.y
+        element.x = element.styled(:margin_left) + @current_position.x
+        element.y = element.styled(:margin_top)  + @current_position.y
 
         @current_position.x += element.outer_width
       end
 
       def move_to_next_line(element) # Stack
-        element.x = element.style.margin_left + @current_position.x
-        element.y = element.style.margin_top  + @current_position.y
+        element.x = element.styled(:margin_left) + @current_position.x
+        element.y = element.styled(:margin_top)  + @current_position.y
 
         @current_position.y += element.outer_height
       end
 
       def mouse_wheel_up(sender, x, y)
-        return unless @style.scroll
+        return unless styled(:scroll)
 
         # Allow overscrolling UP, only if one can scroll DOWN
         return unless height < scroll_height
@@ -314,7 +307,7 @@ module CyberarmEngine
       end
 
       def mouse_wheel_down(sender, x, y)
-        return unless @style.scroll
+        return unless styled(:scroll)
 
         return unless height < scroll_height
 
@@ -328,7 +321,7 @@ module CyberarmEngine
       end
 
       def scroll_jump_to_top(sender, x, y)
-        return unless @style.scroll
+        return unless styled(:scroll)
 
         @scroll_position.y = 0
         @scroll_target_position.y = 0
@@ -337,7 +330,7 @@ module CyberarmEngine
       end
 
       def scroll_jump_to_end(sender, x, y)
-        return unless @style.scroll
+        return unless styled(:scroll)
 
         @scroll_position.y = -max_scroll_height
         @scroll_target_position.y = -max_scroll_height
@@ -346,7 +339,7 @@ module CyberarmEngine
       end
 
       def scroll_page_up(sender, x, y)
-        return unless @style.scroll
+        return unless styled(:scroll)
 
         @scroll_position.y += height
         @scroll_position.y = 0 if @scroll_position.y > 0
@@ -356,7 +349,7 @@ module CyberarmEngine
       end
 
       def scroll_page_down(sender, x, y)
-        return unless @style.scroll
+        return unless styled(:scroll)
 
         @scroll_position.y -= height
         @scroll_position.y = -max_scroll_height if @scroll_position.y < -max_scroll_height

lib/cyberarm_engine/ui/elements/edit_line.rb

@@ -197,9 +197,9 @@ module CyberarmEngine
 
       def text_input_position_for(method)
         if @type == :password
-          @text.x + @text.width(default(:password_character) * @text_input.text[0...@text_input.send(method)].length) - @style.border_thickness_left
+          @text.x + @text.width(default(:password_character) * @text_input.text[0...@text_input.send(method)].length) - styled(:border_thickness_left)
         else
-          @text.x + @text.width(@text_input.text[0...@text_input.send(method)]) - @style.border_thickness_left
+          @text.x + @text.width(@text_input.text[0...@text_input.send(method)]) - styled(:border_thickness_left)
         end
       end
 

lib/cyberarm_engine/ui/elements/image.rb

@@ -14,10 +14,10 @@ module CyberarmEngine
 
       def render
         @image.draw(
-          @style.border_thickness_left + @style.padding_left + @x,
-          @style.border_thickness_top + @style.padding_top + @y,
+          styled(:border_thickness_left) + styled(:padding_left) + @x,
+          styled(:border_thickness_top) + styled(:padding_top) + @y,
           @z + 2,
-          @scale_x, @scale_y, @style.color
+          @scale_x, @scale_y, styled(:color)
         )
       end
 

lib/cyberarm_engine/ui/elements/list_box.rb

@@ -10,7 +10,7 @@ module CyberarmEngine
 
         super(@choose, options, block)
 
-        @style.background_canvas.background = default(:background)
+        @background_canvas.background = default(:background)
 
         @menu = Menu.new(parent: self, theme: @options[:theme])
 
@@ -21,7 +21,7 @@ module CyberarmEngine
         super
 
         w = @text.textobject.text_width("▼")
-        @text.textobject.draw_text("▼", @x + content_width - w, @y + @style.padding_top, @z, 1, 1, @text.color)
+        @text.textobject.draw_text("▼", @x + content_width - w, @y + styled(:padding_top), @z, 1, 1, @text.color)
       end
 
       def choose=(item)

lib/cyberarm_engine/ui/elements/progress.rb

@@ -11,7 +11,7 @@ module CyberarmEngine
         @marquee_offset = 0
         @marquee_animation_time = Gosu.milliseconds
         @type = options[:type] || :linear
-        @fraction_background = Background.new(background: @style.fraction_background)
+        @fraction_background = Background.new(background: styled(:fraction_background))
         self.value = options[:fraction] || 0.0
       end
 
@@ -31,13 +31,13 @@ module CyberarmEngine
       def update_background
         super
 
-        @fraction_background.x = (@style.border_thickness_left + @style.padding_left + @x) + @marquee_offset
-        @fraction_background.y = @style.border_thickness_top + @style.padding_top + @y
+        @fraction_background.x = (styled(:border_thickness_left) + styled(:padding_left) + @x) + @marquee_offset
+        @fraction_background.y = styled(:border_thickness_top) + styled(:padding_top) + @y
         @fraction_background.z = @z
         @fraction_background.width = @width * (@type == :marquee ? @marquee_width : @fraction)
         @fraction_background.height = @height
 
-        @fraction_background.background = @style.fraction_background
+        @fraction_background.background = styled(:fraction_background)
       end
 
       def update

lib/cyberarm_engine/ui/elements/slider.rb

@@ -62,10 +62,10 @@ module CyberarmEngine
       end
 
       def position_handle
-        @handle.x = @x + @handle.style.margin_left + @style.padding_left + @style.border_thickness_left +
+        @handle.x = @x + @handle.styled(:margin_left) + styled(:padding_left) + styled(:border_thickness_left) +
                     ((content_width - @handle.outer_width) * (@value - @range.min) / (@range.max - @range.min).to_f)
 
-        @handle.y = @y + @handle.style.margin_top + @style.border_thickness_top + @style.padding_top
+        @handle.y = @y + @handle.styled(:margin_top) + styled(:border_thickness_top) + styled(:padding_top)
       end
 
       def draw

lib/cyberarm_engine/ui/elements/text_block.rb

@@ -42,9 +42,9 @@ module CyberarmEngine
 
       def layout
         unless @enabled
-          @text.color = @style.disabled[:color]
+          @text.color = @style.disabled.color
         else
-          @text.color = @style.color
+          @text.color = styled(:color)
         end
 
         @width  = 0
@@ -62,21 +62,21 @@ module CyberarmEngine
         @width  = _width  || @text_width.floor
         @height = _height || @text_height.floor
 
-        @text.y = @style.border_thickness_top + @style.padding_top + @y
+        @text.y = styled(:border_thickness_top) + styled(:padding_top) + @y
         @text.z = @z + 3
 
         if (text_alignment = @options[:text_align] || @options[:text_h_align])
           case text_alignment
           when :left
-            @text.x = @style.border_thickness_left + @style.padding_left + @x
+            @text.x = styled(:border_thickness_left) + styled(:padding_left) + @x
           when :center
             @text.x = if @text_width <= width
                         @x + width / 2 - @text_width / 2
                       else # Act as left aligned
-                        @style.border_thickness_left + @style.padding_left + @x
+                        styled(:border_thickness_left) + styled(:padding_left) + @x
                       end
           when :right
-            @text.x = @x + outer_width - (@text_width + @style.border_thickness_right + @style.padding_right)
+            @text.x = @x + outer_width - (@text_width + styled(:border_thickness_right) + styled(:padding_right))
           end
         end
 
@@ -86,10 +86,10 @@ module CyberarmEngine
             @text.y = if @text_height <= height
                         @y + height / 2 - @text_height / 2
                       else
-                        @style.border_thickness_top + @style.padding_top + @y
+                        styled(:border_thickness_top) + styled(:padding_top) + @y
                       end
           when :bottom
-            @text.y = @y + outer_height - (@text_height + @style.border_thickness_bottom + @style.padding_bottom)
+            @text.y = @y + outer_height - (@text_height + styled(:border_thickness_bottom) + styled(:padding_bottom))
           end
         end
 
@@ -99,7 +99,7 @@ module CyberarmEngine
       def handle_text_wrapping(max_width)
         max_width ||= @parent&.content_width
         max_width ||= @x - (window.width + noncontent_width)
-        wrap_behavior = style.text_wrap
+        wrap_behavior = styled(:text_wrap)
         copy = @raw_text.to_s.dup
 
         # Only perform text wrapping: if it is enabled, is possible to wrap, and text is too long to fit on one line

lib/cyberarm_engine/ui/gui_state.rb

@@ -6,6 +6,7 @@ module CyberarmEngine
     def initialize(options = {})
       @options = options
       @game_objects = []
+      @timers = []
       @global_pause = false
 
       @down_keys = {}

lib/cyberarm_engine/ui/style.rb

@@ -16,8 +16,11 @@ module Gosu
 end
 
 module CyberarmEngine
-  class Style
-    attr_reader :hash
+  class StyleData
+    def initialize(hash = {})
+      @hash = hash
+      @dirty = false
+    end
 
     %i[
       x y z width height min_width min_height max_width max_height color background
@@ -28,34 +31,56 @@ module CyberarmEngine
       border_thickness border_thickness_left border_thickness_right border_thickness_top border_thickness_bottom
       padding padding_left padding_right padding_top padding_bottom
       margin margin_left margin_right margin_top margin_bottom
-      background_canvas background_nine_slice_canvas background_image_canvas border_canvas
 
-      fraction_background scroll fill text_wrap v_align h_align delay tag
+      fraction_background scroll fill text_wrap v_align h_align delay tag font text_size
       image_width image_height
-
-      default hover active disabled
     ].each do |item|
       define_method(item) do
         @hash[item]
       end
       define_method(:"#{item}=") do |value|
+        @dirty = true if @hash[item] != value
+
         @hash[item] = value
       end
     end
 
+    # NOTE: do not change return value
+    def default
+      nil
+    end
+
+    def dirty?
+      @dirty
+    end
+
+    def mark_clean!
+      @dirty = false
+    end
+  end
+
+  class Style < StyleData
+    attr_reader :hash, :hover, :active, :disabled
+
     def initialize(hash = {})
-      h = hash
-      # h = Marshal.load(Marshal.dump(hash))
+      @hash = hash
 
-      h[:default] = {}
+      @hover = StyleData.new(hash[:hover] || {})
+      @active = StyleData.new(hash[:active] || {})
+      @disabled = StyleData.new(hash[:disabled] || {})
 
-      h.each do |key, value|
-        next if value.is_a?(Hash)
+      @substyles = [@hover, @active, @disabled]
 
-        h[:default][key] = value
-      end
+      super
+    end
 
-      @hash = h
+    def dirty?
+      @dirty || @substyles.any?(&:dirty?)
+    end
+
+    def mark_clean!
+      @substyles.each(&:mark_clean!)
+      @dirty = false
     end
   end
 end