UX improvements of dual screen/remote game clock (buttons are dynamically enabled/disabled depending if the clock is running or not)

Gemfile.lock

@@ -30,4 +30,4 @@ DEPENDENCIES
   releasy
 
 BUNDLED WITH
-   2.3.17
+   2.4.3

lib/game_clock/net/client.rb

@@ -129,7 +129,7 @@ module TAC
           end
 
 
-          return message.strip
+          return message.to_s.strip
         end
 
         def puts(message)

lib/game_clock/remote_control.rb

@@ -80,7 +80,10 @@ module TAC
 
           @jukebox_volume = 1.0
           @jukebox_sound_effects = true
+          @locked_buttons_randomizer_visible = []
+          @locked_buttons_clock_active  = []
           @randomizer_visible = false
+          @clock_updated_at = -1000
 
           RemoteControl.connection.proxy_object.register(:track_changed, method(:track_changed))
           RemoteControl.connection.proxy_object.register(:volume_changed, method(:volume_changed))
@@ -94,25 +97,25 @@ module TAC
           flow width: 1.0, height: 1.0 do
             stack width: 0.5 do
               title "Match", width: 1.0, text_align: :center
-              button "Start Match", width: 1.0, text_size: 48, margin_bottom: 50 do
+              @start_match_btn = button "Start Match", width: 1.0, text_size: 48, margin_bottom: 50 do
                 start_clock(:full_match)
               end
 
               title "Practice", width: 1.0, text_align: :center
-              button "Autonomous", width: 1.0 do
+              @autonomous_btn = button "Autonomous", width: 1.0 do
                 start_clock(:autonomous)
               end
-              button "TeleOp with Countdown", width: 1.0 do
+              @teleop_with_countdown_btn = button "TeleOp with Countdown", width: 1.0 do
                 start_clock(:full_teleop)
               end
-              button "TeleOp", width: 1.0 do
+              @teleop_btn = button "TeleOp", width: 1.0 do
                 start_clock(:teleop_only)
               end
-              button "TeleOp Endgame", width: 1.0, margin_bottom: 50 do
+              @teleop_endgame_btn = button "TeleOp Endgame", width: 1.0, margin_bottom: 50 do
                 start_clock(:endgame_only)
               end
 
-              button "Abort Match", width: 1.0 do
+              @abort_match_btn = button "Abort Match", width: 1.0 do
                 RemoteControl.connection.puts(ClockNet::PacketHandler.packet_abort_clock)
               end
 
@@ -219,7 +222,7 @@ module TAC
                   @randomizer_label = title "Not Visible"
                 end
 
-                button "Randomizer", width: 1.0, **TAC::THEME_DANGER_BUTTON do
+                @randomizer_btn = button "Randomizer", width: 1.0, **TAC::THEME_DANGER_BUTTON do
                   @randomizer_visible = !@randomizer_visible
 
                   RemoteControl.connection.puts(ClockNet::PacketHandler.packet_randomizer_visible(@randomizer_visible))
@@ -227,6 +230,24 @@ module TAC
               end
             end
           end
+
+          @locked_buttons_clock_active.push(
+            @start_match_btn,
+            @autonomous_btn,
+            @teleop_with_countdown_btn,
+            @teleop_btn,
+            @teleop_endgame_btn,
+            @randomizer_btn
+          )
+
+          @locked_buttons_randomizer_visible.push(
+            @start_match_btn,
+            @autonomous_btn,
+            @teleop_with_countdown_btn,
+            @teleop_btn,
+            @teleop_endgame_btn,
+            @abort_match_btn
+          )
         end
 
         def update
@@ -236,6 +257,8 @@ module TAC
             o.call
           end
 
+          manage_button_enablement
+
           return if RemoteControl.connection.connected?
 
           # We've lost connection, unset window's connection object
@@ -258,6 +281,8 @@ module TAC
         end
 
         def clock_changed(string)
+          @clock_updated_at = Gosu.milliseconds if @clock_label.value != string
+
           @clock_label.value = string
         end
 
@@ -265,6 +290,22 @@ module TAC
           @randomizer_label.value = "Visible" if boolean
           @randomizer_label.value = "Not Visible" unless boolean
         end
+
+        def manage_button_enablement
+          if @randomizer_visible
+            @locked_buttons_randomizer_visible.each do |btn|
+              btn.enabled = false
+            end
+          elsif Gosu.milliseconds - @clock_updated_at <= 1_250
+            @locked_buttons_clock_active.each do |btn|
+              btn.enabled = false
+            end
+          else
+            (@locked_buttons_clock_active + @locked_buttons_randomizer_visible).uniq.each do |btn|
+              btn.enabled = true
+            end
+          end
+        end
       end
     end
   end

lib/game_clock/view.rb

@@ -10,7 +10,7 @@ module TAC
         @escape_counter = 0
 
         @background_image = get_image("#{ROOT_PATH}/media/background.png")
-        # Preload duck image since Gosu and windows threads don't get along with OpenGL (image is blank if loaded in a threaded context)
+        # Preload duck image since Gosu and Windows threads don't get along with OpenGL (image is blank if loaded in a threaded context)
         get_image("#{ROOT_PATH}/media/openclipart_ducky.png")
         @menu_background = 0xaa004000
         @mouse = Mouse.new(window)
@@ -25,6 +25,10 @@ module TAC
 
         @last_clock_state = @clock.active?
 
+        @locked_buttons_randomizer_visible = []
+        @locked_buttons_clock_active  = []
+        @randomizer_visible = false
+
         theme(THEME)
 
         @menu_container = flow width: 1.0 do
@@ -32,28 +36,45 @@ module TAC
             background @menu_background
 
             title "Match", width: 1.0, text_align: :center
-            button "Start Match", width: 1.0, margin_bottom: 50 do
+            @start_match_btn = button "Start Match", width: 1.0, margin_bottom: 50 do |btn|
+              @locked_buttons_clock_active << btn
+              @locked_buttons_randomizer_visible << btn
+
               @clock_proxy.start_clock(:full_match)
             end
 
             title "Practice", width: 1.0, text_align: :center
-            button "Autonomous", width: 1.0 do
+            @autonomous_btn = button "Autonomous", width: 1.0 do |btn|
+              @locked_buttons_clock_active << btn
+              @locked_buttons_randomizer_visible << btn
+
               @clock_proxy.start_clock(:autonomous)
             end
 
-            button "TeleOp with Countdown", width: 1.0 do
+            @teleop_with_countdown_btn = button "TeleOp with Countdown", width: 1.0 do |btn|
+              @locked_buttons_clock_active << btn
+              @locked_buttons_randomizer_visible << btn
+
               @clock_proxy.start_clock(:full_teleop)
             end
 
-            button "TeleOp", width: 1.0 do
+            @teleop_btn = button "TeleOp", width: 1.0 do |btn|
+              @locked_buttons_clock_active << btn
+              @locked_buttons_randomizer_visible << btn
+
               @clock_proxy.start_clock(:teleop_only)
             end
 
-            button "TeleOp Endgame", width: 1.0 do
+            @teleop_endgame_btn = button "TeleOp Endgame", width: 1.0 do |btn|
+              @locked_buttons_clock_active << btn
+              @locked_buttons_randomizer_visible << btn
+
               @clock_proxy.start_clock(:endgame_only)
             end
 
-            button "Abort Match", width: 1.0, margin_top: 50 do
+            @abort_match_btn = button "Abort Match", width: 1.0, margin_top: 50 do |btn|
+              @locked_buttons_randomizer_visible << btn
+
               @clock_proxy.abort_clock
             end
 
@@ -139,7 +160,7 @@ module TAC
             end
 
             stack(width: 1.0) do
-              button "Randomizer", width: 1.0, **TAC::THEME_DANGER_BUTTON do
+              @randomizer_btn = button "Randomizer", width: 1.0, **TAC::THEME_DANGER_BUTTON do |btn|
                 unless @clock.active?
                   push_state(Randomizer)
                 end
@@ -148,6 +169,24 @@ module TAC
           end
         end
 
+        @locked_buttons_clock_active.push(
+          @start_match_btn,
+          @autonomous_btn,
+          @teleop_with_countdown_btn,
+          @teleop_btn,
+          @teleop_endgame_btn,
+          @randomizer_btn
+        )
+
+        @locked_buttons_randomizer_visible.push(
+          @start_match_btn,
+          @autonomous_btn,
+          @teleop_with_countdown_btn,
+          @teleop_btn,
+          @teleop_endgame_btn,
+          @abort_match_btn
+        )
+
         @jukebox = Jukebox.new(@clock)
 
         @clock_proxy = ClockProxy.new(@clock, @jukebox)
@@ -191,6 +230,8 @@ module TAC
             @menu_container.hide if @menu_container.visible?
             window.show_cursor = false
           end
+
+          manage_button_enablement
         end
 
         if @clock.value != @last_clock_display_value
@@ -222,9 +263,9 @@ module TAC
         @last_clock_state = @clock.active?
       end
 
-      def request_repaint
+      def needs_repaint?
         if @particle_emitters && @particle_emitters.map(&:particle_count).sum.positive?
-          true
+          @needs_repaint = true
         else
           super
         end
@@ -241,6 +282,22 @@ module TAC
         @jukebox.update
       end
 
+      def manage_button_enablement
+        if @randomizer_visible
+          @locked_buttons_randomizer_visible.each do |btn|
+            btn.enabled = false
+          end
+        elsif @clock.active?
+          @locked_buttons_clock_active.each do |btn|
+            btn.enabled = false
+          end
+        else
+          (@locked_buttons_clock_active + @locked_buttons_randomizer_visible).uniq.each do |btn|
+            btn.enabled = true
+          end
+        end
+      end
+
       def button_down(id)
         super
 
@@ -274,6 +331,8 @@ module TAC
       end
 
       def randomizer_changed(boolean)
+        @randomizer_visible = boolean
+
         if boolean
           push_state(Randomizer) unless @clock.active?
         else

lib/pages/editor.rb

@@ -640,6 +640,8 @@ module TAC
       def update
         super
 
+        current_state.request_repaint unless @highlight_animator.complete?
+
         while (hash = @scroll_into_view_list.shift)
           list_container = hash[:list]
           item_container = hash[:item]

lib/pages/field_planner.rb

@@ -38,7 +38,7 @@ module TAC
               refresh_panel
             end
 
-            list_box items: ["Power Play", "Freight Frenzy", "Ultimate Goal", "Skystone"], width: 200, height: 1.0 do |item|
+            list_box items: ["CENTERSTAGE", "Power Play", "Freight Frenzy", "Ultimate Goal", "Skystone"], width: 200, height: 1.0 do |item|
               season = item.downcase.gsub(" ", "_").to_sym
               @field = TAC::Simulator::Field.new(container: @field_container, season: season, simulation: nil)
             end
@@ -68,7 +68,7 @@ module TAC
           end
         end
 
-        @field = TAC::Simulator::Field.new(container: @field_container, season: :power_play, simulation: nil)
+        @field = TAC::Simulator::Field.new(container: @field_container, season: :centerstage, simulation: nil)
         @nodes ||= []
         @unit = :inches
         @total_distance = 0
@@ -80,12 +80,15 @@ module TAC
         @segment_thickness = 2
 
         @font = CyberarmEngine::Text.new(font: THEME_BOLD_FONT, size: 18, border: true, static: true)
+        @last_mouse_position = CyberarmEngine::Vector.new(window.mouse_x, window.mouse_y)
 
         measure_path
         refresh_panel
       end
 
       def draw
+        super
+
         @field.draw
 
         display_path
@@ -105,15 +108,19 @@ module TAC
             @font.width + 12,
             @font.height + 12,
             0xaa_000000,
-            100_000)
+            100_000
-
+          )
-            @font.draw
 
+          @font.draw
         end
-
       end
 
       def update
+        super
+
+        current_state.request_repaint if window.mouse_x != @last_mouse_position.x || window.mouse_y != @last_mouse_position.y
+        @last_mouse_position = CyberarmEngine::Vector.new(window.mouse_x, window.mouse_y)
+
         @field.update
 
         measure_path

lib/pages/presets.rb

@@ -19,82 +19,197 @@ module TAC
           end
         end
 
+        @scroll_into_view_list = []
+        @highlight_item_container = nil
+        @highlight_from_color = Gosu::Color.rgba(0, 0, 0, 0)
+        @highlight_to_color = Gosu::Color.rgba(THEME_HIGHLIGHTED_COLOR.red, THEME_HIGHLIGHTED_COLOR.green, THEME_HIGHLIGHTED_COLOR.blue, 200)
+
+        @highlight_animator = CyberarmEngine::Animator.new(
+          start_time: Gosu.milliseconds - 1,
+          duration: 0,
+          from: Gosu::Color.rgba(0, 0, 0, 0),
+          to: THEME_HIGHLIGHTED_COLOR
+        )
+
         populate_group_presets
         populate_action_presets
       end
 
+      def draw
+        super
+
+        unless @highlight_animator.complete?
+          item = @highlight_item_container
+
+          Gosu.draw_rect(
+            item.x, item.y,
+            item.width, item.height,
+            @highlight_animator.color_transition,
+            item.z + 1
+          )
+        end
+      end
+
+      def update
+        super
+
+        current_state.request_repaint unless @highlight_animator.complete?
+
+        while (hash = @scroll_into_view_list.shift)
+          list_container = hash[:list]
+          item_container = hash[:item]
+
+          return unless list_container
+          return unless item_container
+
+          unless (item_container.y + item_container.height).between?(list_container.y, list_container.y + list_container.height)
+
+            list_container.scroll_top = (item_container.y + item_container.height) - (list_container.y + list_container.height)
+
+            list_container.recalculate
+          end
+
+          @highlight_item_container = item_container
+          @highlight_animator = CyberarmEngine::Animator.new(
+            start_time: Gosu.milliseconds,
+            duration: 750,
+            from: @highlight_from_color,
+            to: @highlight_to_color,
+            tween: :ease_in_out_back
+          )
+        end
+      end
+
+      def update_list_children(list)
+        list.children.sort_by! { |i| i.style.tag.downcase }
+
+        list.children.each_with_index do |child, i|
+          child.style.default[:background] = i.even? ? THEME_EVEN_COLOR : THEME_ODD_COLOR
+
+          child.root.gui_state.request_recalculate
+        end
+      end
+
+      def scroll_into_view(item)
+        list_container = nil
+        item_container = nil
+
+        if item.is_a?(TAC::Config::Group)
+          list_container = @group_presets
+        elsif item.is_a?(TAC::Config::Action)
+          list_container = @action_presets
+        else
+          raise "Unsupported item type: #{item.class}"
+        end
+
+        item_container = find_element_by_tag(list_container, item.name)
+
+        @scroll_into_view_list << { list: list_container, item: item_container }
+      end
+
+      def add_group_container(group)
+        index = window.backend.config.presets.groups.index(group)
+
+        flow width: 1.0, height: 36, **THEME_ITEM_CONTAINER_PADDING, tag: group.name do |container|
+          background group == @active_group ? THEME_HIGHLIGHTED_COLOR : (index.even? ? THEME_EVEN_COLOR : THEME_ODD_COLOR)
+          @active_group_container = container if group == @active_group
+
+          button group.name, fill: true, text_size: THEME_ICON_SIZE - 3, tag: "label" do
+            page(TAC::Pages::Editor, { group: group, group_is_preset: true })
+          end
+
+          button get_image("#{TAC::ROOT_PATH}/media/icons/gear.png"), image_width: THEME_ICON_SIZE, tip: "Edit group" do
+            push_state(
+              Dialog::NamePromptDialog,
+              title: "Rename Group Preset",
+              renaming: group,
+              list: window.backend.config.presets.groups,
+              callback_method: method(:update_group_preset)
+            )
+          end
+
+          button get_image("#{TAC::ROOT_PATH}/media/icons/trashcan.png"), image_width: THEME_ICON_SIZE, tip: "Delete group", **THEME_DANGER_BUTTON do
+            push_state(
+              Dialog::ConfirmDialog,
+              title: "Are you sure?",
+              message: "Delete group preset and all of its actions and variables?",
+              callback_method: proc { delete_group_preset(group) }
+            )
+          end
+        end
+      end
+
+      def add_action_container(action)
+        index = window.backend.config.presets.actions.index(action)
+
+        stack width: 1.0, height: action.comment.empty? ? 36 : 72, **THEME_ITEM_CONTAINER_PADDING, tag: action.name do |container|
+          background action == @active_action ? THEME_HIGHLIGHTED_COLOR : (index.even? ? THEME_EVEN_COLOR : THEME_ODD_COLOR)
+          @active_action_container = container if action == @active_action
+
+          flow width: 1.0, height: 36 do
+            button action.name, fill: true, text_size: THEME_ICON_SIZE - 3, tag: "label" do
+              page(TAC::Pages::Editor, { action: action, action_is_preset: true })
+            end
+
+            button get_image("#{TAC::ROOT_PATH}/media/icons/gear.png"), image_width: THEME_ICON_SIZE, tip: "Edit action" do
+              push_state(
+                Dialog::ActionDialog,
+                title: "Edit Action Preset",
+                action: action,
+                list: window.backend.config.presets.actions,
+                callback_method: method(:update_action_preset)
+              )
+            end
+
+            button get_image("#{TAC::ROOT_PATH}/media/icons/trashcan.png"), image_width: THEME_ICON_SIZE, tip: "Delete action", **THEME_DANGER_BUTTON do
+              push_state(
+                Dialog::ConfirmDialog,
+                title: "Are you sure?",
+                message: "Delete action preset and all of its actions and variables?",
+                callback_method: proc { delete_action_preset(action) }
+              )
+            end
+          end
+
+          stack(width: 1.0, fill: true, scroll: true, visible: !action.comment.empty?, tag: "comment_container") do
+            caption action.comment.to_s, width: 1.0, text_wrap: :word_wrap, text_border: true, text_border_size: 1, text_border_color: 0xaa_000000, tag: "comment"
+          end
+        end
+      end
+
       def populate_group_presets
         @group_presets.clear do
-          window.backend.config.presets.groups.each_with_index do |group, i|
+          window.backend.config.presets.groups.each do |group|
-            flow(width: 1.0, height: 36, **THEME_ITEM_CONTAINER_PADDING) do
+            add_group_container(group)
-              background i.even? ? THEME_EVEN_COLOR : THEME_ODD_COLOR
-
-              button group.name, fill: true, text_size: THEME_ICON_SIZE - 3 do
-                page(TAC::Pages::Editor, { group: group, group_is_preset: true })
-              end
-
-              button get_image("#{TAC::ROOT_PATH}/media/icons/gear.png"), image_width: THEME_ICON_SIZE, tip: "Edit group preset" do
-                push_state(
-                  Dialog::NamePromptDialog,
-                  title: "Rename Group Preset",
-                  renaming: group,
-                  list: window.backend.config.presets.groups,
-                  callback_method: method(:update_group_preset)
-                )
-              end
-
-              button get_image("#{TAC::ROOT_PATH}/media/icons/trashcan.png"), image_width: THEME_ICON_SIZE, tip: "Delete group preset", **THEME_DANGER_BUTTON do
-                push_state(
-                  Dialog::ConfirmDialog,
-                  title: "Are you sure?",
-                  message: "Delete group preset and all of its actions and variables?",
-                  callback_method: proc { delete_group_preset(group) }
-                )
-              end
-            end
           end
         end
       end
 
       def populate_action_presets
         @action_presets.clear do
-          window.backend.config.presets.actions.each_with_index do |action, i|
+          window.backend.config.presets.actions.each do |action|
-            flow(width: 1.0, height: 36, **THEME_ITEM_CONTAINER_PADDING) do
+            add_action_container(action)
-              background i.even? ? THEME_EVEN_COLOR : THEME_ODD_COLOR
-
-              button action.name, fill: true, text_size: THEME_ICON_SIZE - 3 do
-                page(TAC::Pages::Editor, { action: action, action_is_preset: true })
-              end
-
-              button get_image("#{TAC::ROOT_PATH}/media/icons/gear.png"), image_width: THEME_ICON_SIZE, tip: "Edit action preset" do
-                push_state(
-                  Dialog::NamePromptDialog,
-                  title: "Rename Action Preset",
-                  renaming: action,
-                  list: window.backend.config.presets.actions,
-                  callback_method: method(:update_action_preset)
-                )
-              end
-
-              button get_image("#{TAC::ROOT_PATH}/media/icons/trashcan.png"), image_width: THEME_ICON_SIZE, tip: "Delete action preset", **THEME_DANGER_BUTTON do
-                push_state(
-                  Dialog::ConfirmDialog,
-                  title: "Are you sure?",
-                  message: "Delete action preset and all of its actions and variables?",
-                  callback_method: proc { delete_action_preset(action) }
-                )
-              end
-            end
           end
         end
       end
 
       def update_group_preset(group, name)
+        old_name = group.name
+
         group.name = name
         window.backend.config.presets.groups.sort_by! { |g| g.name.downcase }
         window.backend.config_changed!
 
-        populate_group_presets
+        group_container = find_element_by_tag(@group_presets, old_name)
+        label = find_element_by_tag(group_container, "label")
+
+        label.value = name
+
+        group_container.style.tag = name
+
+        update_list_children(@group_presets)
+
+        scroll_into_view(group)
       end
 
       def delete_group_preset(group)
@@ -102,15 +217,42 @@ module TAC
         window.backend.config.presets.groups.sort_by! { |g| g.name.downcase }
         window.backend.config_changed!
 
-        populate_group_presets
+        # Remove deleted action from list
+        container = find_element_by_tag(@group_presets, group.name)
+        @group_presets.remove(container)
+
+        update_list_children(@group_presets)
       end
 
-      def update_action_preset(action, name)
+      def update_action_preset(action, name, comment)
+        old_name = action.name
+
         action.name = name
+        action.comment = comment
         window.backend.config.presets.actions.sort_by! { |a| a.name.downcase }
         window.backend.config_changed!
 
-        populate_action_presets
+        action_container = find_element_by_tag(@action_presets, old_name)
+        label = find_element_by_tag(action_container, "label")
+        comment_container = find_element_by_tag(action_container, "comment_container")
+        comment_label = find_element_by_tag(action_container, "comment")
+
+        label.value = name
+        if comment.empty?
+          action_container.style.height = 36
+          comment_container.hide
+          comment_label.value = ""
+        else
+          action_container.style.height = 72
+          comment_container.show
+          comment_label.value = comment.to_s
+        end
+
+        action_container.style.tag = name
+
+        update_list_children(@action_presets)
+
+        scroll_into_view(action)
       end
 
       def delete_action_preset(action)
@@ -118,8 +260,12 @@ module TAC
         window.backend.config.presets.actions.sort_by! { |a| a.name.downcase }
         window.backend.config_changed!
 
-        populate_action_presets
+        # Remove deleted action from list
+        container = find_element_by_tag(@action_presets, action.name)
+        @action_presets.remove(container)
+
+        update_list_children(@action_presets)
       end
     end
   end
-end
+end

lib/simulator/field.rb

@@ -336,6 +336,10 @@ module TAC
         end
       end
 
+      def draw_field_centerstage
+
+      end
+
       def draw_tile_box(color)
         Gosu.draw_rect(0,  0, 24, 2, color, @z)
         Gosu.draw_rect(22, 2, 2, 22, color, @z)

lib/simulator/simulation.rb

@@ -8,7 +8,7 @@ module TAC
         @field_container = field_container
 
         @robots = []
-        @field = Field.new(simulation: self, season: :power_play, container: @field_container)
+        @field = Field.new(simulation: self, season: :centerstage, container: @field_container)
         @show_paths = false
 
         @last_milliseconds = Gosu.milliseconds

lib/version.rb

@@ -1,5 +1,5 @@
 module TAC
   NAME = "TimeCrafters Configuration Tool"
-  VERSION = "0.7.0"
+  VERSION = "0.7.2"
   RELEASE_NAME = "Beta"
-end
+end