Merge branch 'feature/gui-conversion' into feature/pr-gui-reworks

config/_file_loader.lua

@@ -43,7 +43,7 @@ return {
     --'modules.gui.science-info',
     --'modules.gui.warp-list',
     --'modules.gui.task-list',
-    --'modules.gui.player-list',
+    'modules.gui.player-list',
     --'modules.commands.debug',
     -- Config Files
     'config.expcore-commands.auth_admin', -- commands tagged with admin_only are blocked for non admins

config/action_buttons.lua

@@ -15,12 +15,16 @@ local Jail = require 'modules.control.jail' --- @dep modules.control.jail
 local Colors = require 'resources.color_presets' --- @dep resources.color_presets
 local format_chat_player_name = ext_require('expcore.common','format_chat_player_name') --- @dep expcore.common
 
+Gui.require_concept('button')
+
 local action_player_store = 'gui.left.player-list.action-player'
 local action_name_store = 'gui.left.player-list.action-name'
 
 -- common style used by all action buttons
-local function tool_button_style(style)
-    Gui.set_padding_style(style,-1,-1,-1,-1)
+local function tool_button_style(properties,parent,element)
+    element.style = 'tool_button'
+    local style = element.style
+    style.padding = -1
     style.height = 28
     style.width = 28
 end
@@ -55,11 +59,12 @@ end
 --- Teleports the user to the action player
 -- @element goto_player
 local goto_player =
-Gui.new_button()
-:set_sprites('utility/export')
+Gui.new_concept('button')
+:set_sprite('utility/export')
 :set_tooltip{'player-list.goto-player'}
-:set_style('tool_button',tool_button_style)
-:on_click(function(player,element)
+:define_draw(tool_button_style)
+:on_click(function(event)
+    local player = event.player
     local action_player_name = get_action_player_name(player)
     local action_player = Game.get_player_from_any(action_player_name)
     if not player.character or not action_player.character then
@@ -72,11 +77,12 @@ end)
 --- Teleports the action player to the user
 -- @element bring_player
 local bring_player =
-Gui.new_button()
-:set_sprites('utility/import')
+Gui.new_concept('button')
+:set_sprite('utility/import')
 :set_tooltip{'player-list.bring-player'}
-:set_style('tool_button',tool_button_style)
-:on_click(function(player,element)
+:define_draw(tool_button_style)
+:on_click(function(event)
+    local player = event.player
     local action_player_name = get_action_player_name(player)
     local action_player = Game.get_player_from_any(action_player_name)
     if not player.character or not action_player.character then
@@ -89,11 +95,12 @@ end)
 --- Kills the action player, if there are alive
 -- @element kill_player
 local kill_player =
-Gui.new_button()
-:set_sprites('utility/too_far')
+Gui.new_concept('button')
+:set_sprite('utility/too_far')
 :set_tooltip{'player-list.kill-player'}
-:set_style('tool_button',tool_button_style)
-:on_click(function(player,element)
+:define_draw(tool_button_style)
+:on_click(function(event)
+    local player = event.player
     local action_player_name = get_action_player_name(player)
     local action_player = Game.get_player_from_any(action_player_name)
     if action_player.character then
@@ -106,11 +113,12 @@ end)
 --- Reports the action player, requires a reason to be given
 -- @element report_player
 local report_player =
-Gui.new_button()
-:set_sprites('utility/spawn_flag')
+Gui.new_concept('button')
+:set_sprite('utility/spawn_flag')
 :set_tooltip{'player-list.report-player'}
-:set_style('tool_button',tool_button_style)
-:on_click(function(player,element)
+:define_draw(tool_button_style)
+:on_click(function(event)
+    local player = event.player
     local action_player_name = get_action_player_name(player)
     if Reports.is_reported(action_player_name,player.name) then
         player.print({'expcom-report.already-reported'},Colors.orange_red)
@@ -130,11 +138,12 @@ end
 --- Gives the action player a warning, requires a reason
 -- @element warn_player
 local warn_player =
-Gui.new_button()
-:set_sprites('utility/spawn_flag')
+Gui.new_concept('button')
+:set_sprite('utility/spawn_flag')
 :set_tooltip{'player-list.warn-player'}
-:set_style('tool_button',tool_button_style)
-:on_click(function(player,element)
+:define_draw(tool_button_style)
+:on_click(function(event)
+    local player = event.player
     Store.set(action_name_store,player.name,'command/give-warning')
 end)
 
@@ -148,11 +157,12 @@ end
 --- Jails the action player, requires a reason
 -- @element jail_player
 local jail_player =
-Gui.new_button()
-:set_sprites('utility/item_editor_icon')
+Gui.new_concept('button')
+:set_sprite('utility/item_editor_icon')
 :set_tooltip{'player-list.jail-player'}
-:set_style('tool_button',tool_button_style)
-:on_click(function(player,element)
+:define_draw(tool_button_style)
+:on_click(function(event)
+    local player = event.player
     local action_player_name,action_player_name_color = get_action_player_name(player)
     if Jail.is_jailed(action_player_name) then
         player.print({'expcom-jail.already-jailed',action_player_name_color},Colors.orange_red)
@@ -171,11 +181,12 @@ end
 --- Temp bans the action player, requires a reason
 -- @element temp_ban_player
 local temp_ban_player =
-Gui.new_button()
-:set_sprites('utility/clock')
+Gui.new_concept('button')
+:set_sprite('utility/clock')
 :set_tooltip{'player-list.temp-ban-player'}
-:set_style('tool_button',tool_button_style)
-:on_click(function(player,element)
+:define_draw(tool_button_style)
+:on_click(function(event)
+    local player = event.player
     local action_player_name,action_player_name_color = get_action_player_name(player)
     if Jail.is_jailed(action_player_name) then
         player.print({'expcom-jail.already-banned',action_player_name_color},Colors.orange_red)
@@ -194,11 +205,12 @@ end
 --- Kicks the action player, requires a reason
 -- @element kick_player
 local kick_player =
-Gui.new_button()
-:set_sprites('utility/warning_icon')
+Gui.new_concept('button')
+:set_sprite('utility/warning_icon')
 :set_tooltip{'player-list.kick-player'}
-:set_style('tool_button',tool_button_style)
-:on_click(function(player,element)
+:define_draw(tool_button_style)
+:on_click(function(event)
+    local player = event.player
     Store.set(action_name_store,player.name,'command/kick')
 end)
 
@@ -210,11 +222,12 @@ end
 --- Bans the action player, requires a reason
 -- @element ban_player
 local ban_player =
-Gui.new_button()
-:set_sprites('utility/danger_icon')
+Gui.new_concept('button')
+:set_sprite('utility/danger_icon')
 :set_tooltip{'player-list.ban-player'}
-:set_style('tool_button',tool_button_style)
-:on_click(function(player,element)
+:define_draw(tool_button_style)
+:on_click(function(event)
+    local player = event.player
     Store.set(action_name_store,player.name,'command/ban')
 end)
 

expcore/gui/core.lua

@@ -147,9 +147,9 @@ end
 @treturn[2] boolean if the element was found, found
 @treturn[2] LuaGuiElement the element that was found
 @usage-- Getting the center gui
-local exists, center = Gui.find(player,'gui','center')
+local exists, center = Gui.exists(player,'gui','center')
 ]]
-function Gui.find(element,...)
+function Gui.exists(element,...)
     local path = tostring(element.name)
     for _,next_element_name in pairs{...} do
         if type(next_element_name) == 'table' then
@@ -165,18 +165,22 @@ function Gui.find(element,...)
     return true, element
 end
 
---[[-- Checks if a gui element exists or not, returns it if found else the path where it failed
-@see Gui.find
+--[[-- Checks if a gui element exists or not, if not found will throw an error
+@see Gui.exists
 @tparam LuaGuiElement element the root element to start checking from
 @tparam ?string|table ... element names or element concepts that point to your element
-@treturn[1] boolean if the element was found, failed
-@treturn[1] string the path of the element that the search stoped at
-@treturn[2] boolean if the element was found, found
-@treturn[2] LuaGuiElement the element that was found
+@treturn LuaGuiElement the element that was found
 @usage-- Getting the center gui
-local exists, center = Gui.exists(player,'gui','center')
+local exists, center = Gui.find(player,'gui','center')
 ]]
-Gui.exists = Gui.find
+function Gui.find(element,...)
+    local exists, element = Gui.exists(element,...)
+    if not exists then
+        return error('Could not find element: '..element,2)
+    else
+        return element
+    end
+end
 
 --[[-- Toggles the enabled state of an element
 @tparam LuaGuiElement element the element that you want to toggle the enabled state of

expcore/gui/styles/expstyle/data_label.lua

@@ -40,7 +40,7 @@ end)
 -- Draw
 :define_draw(function(properties,parent,element)
     -- Make the label right aligned
-    local data_name = properties.data_label_name or properties.name..'_data' 
+    local data_name = properties.data_label_name or properties.name..'_data'
     local right_align_element = right_align:draw(parent,data_name)
 
     -- Add a new label

expcore/gui/styles/expstyle/footer.lua

@@ -31,19 +31,21 @@ Gui.new_concept('frame')
     -- Update the table style
     Gui.set_padding(element,2,2,4,4)
     element.style = 'subfooter_frame'
-    element.caption = nil
+    element.caption = ''
 
     local style = element.style
     style.horizontally_stretchable = true
     style.use_header_filler = false
 
     -- Add the caption to the frame
-    element.add{
-        type = 'label',
-        name = 'footer_caption',
-        caption = properties.title,
-        tooltip = properties.tooltip
-    }
+    if properties.title then
+        element.add{
+            type = 'label',
+            name = 'footer_caption',
+            caption = properties.title,
+            tooltip = properties.tooltip
+        }
+    end
 
     -- Add the right align area
     local align = right_align:draw(element,'footer_content')

expcore/gui/styles/expstyle/scroll_table.lua

@@ -27,7 +27,7 @@ Gui.new_concept('scroll_table')
 
 Gui.new_concept('table')
 :save_as('scroll_table')
-:new_property('hight',nil,100)
+:new_property('height',nil,100)
 
 -- Add a scroll before the table is drawn
 :define_pre_draw(function(properties,parent,element)
@@ -36,7 +36,7 @@ Gui.new_concept('table')
     -- Set the scroll style
     Gui.set_padding(scroll,1,1,2,2)
     scroll.style.horizontally_stretchable = true
-    scroll.style.maximal_height = properties.hight
+    scroll.style.maximal_height = properties.height
 
     -- Change the name of the element to table before it is drawn
     properties.name = 'table'

expcore/gui/styles/expstyle/unit_label.lua

@@ -4,11 +4,6 @@
 
 local Gui = require 'expcore.gui' -- @dep expcore.gui
 
-Gui.require_concept 'label' -- @dep gui.concept.frame
-
-local right_align =
-Gui.new_concept('alignment')
-
 --[[-- A label triplet which has a static label, a data label which can be changed, and a unit label
 @see Gui.label
 @see data_label
@@ -34,11 +29,8 @@ end)
 local unit_label =
 Gui.new_concept('data_label')
 :save_as('unit_label')
-:new_property('data_label_name')
-:new_property('data_caption')
-:new_property('data_tooltip')
 :new_property('data_unit')
-:new_property('data_format',nil,function(concept,element,data,...)
+:set_data_format(function(concept,element,data,...)
     local base_unit = concept.properties.data_unit
     local caption = tostring(data)
     local unit = data == 1 and base_unit or base_unit..'s'
@@ -53,6 +45,7 @@ end)
     -- Add the unit label
     parent.add{
         name = element.name..'_unit',
+        type='label',
         caption = unit or '',
         tooltip = element.tooltip
     }

expcore/toolbar.lua

@@ -232,9 +232,9 @@ Gui.new_concept('toolbar-button')
 :save_as('toolbar-frame')
 
 -- Properties
-:new_property('open_by_default',false)
-:new_property('use_container',true)
-:new_property('direction','horizontal')
+:new_property('open_by_default',nil,false)
+:new_property('use_container',nil,true)
+:new_property('direction',nil,'horizontal')
 :new_event('on_update')
 
 -- Clone
@@ -258,7 +258,6 @@ end)
 
     frame.style.padding = 2
 
-    -- Add and return the container if a container is used
     if properties.use_container then
         local container =
         frame.add{
@@ -270,7 +269,6 @@ end)
         Gui.set_padding(container)
 
         return container
-
     end
 
     return frame

modules/gui/player-list.lua

@@ -9,16 +9,25 @@ local Roles = require 'expcore.roles' --- @dep expcore.roles
 local Store = require 'expcore.store' --- @dep expcore.store
 local Game = require 'utils.game' --- @dep utils.game
 local Event = require 'utils.event' --- @dep utils.event
-local format_time = ext_require('expcore.common','format_time') --- @dep expcore.common
 local config = require 'config.action_buttons' --- @dep config.action_buttons
 local Colors = require 'resources.color_presets' --- @dep resources.color_presets
+require 'expcore.toolbar' --- @dep expcore.toolbar
+
+Gui.require_concept('label')
+Gui.require_concept('button')
+Gui.require_concept('text_field')
+Gui.require_concept('frame')
+Gui.require_style('expstyle')
 
 local action_player_store = 'gui.left.player-list.action-player'
 local action_name_store = 'gui.left.player-list.action-name'
 
---- used on player name label to allow zoom to map
-local zoom_to_map_name = Gui.uid_name()
-Gui.on_click(zoom_to_map_name,function(event)
+--- Name label that alows zoom to map
+-- @element zoom_to_map
+local zoom_to_map =
+Gui.new_concept('label')
+:new_event('on_click',defines.events.on_gui_click)
+:on_click(function(event)
     local action_player_name = event.element.caption
     local action_player = Game.get_player_from_any(action_player_name)
     if event.button == defines.mouse_button_type.left then
@@ -36,136 +45,130 @@ Gui.on_click(zoom_to_map_name,function(event)
         end
     end
 end)
+:define_pre_draw(function(properties,parent,element)
+    -- Place the button into a flow
+    local flow =
+    parent.add{
+        type = 'flow',
+    }
+
+    return element, flow
+end)
+:define_draw(function(properties,parent,element,player,role_name)
+    local player_name = player.name
+    element.caption = player_name
+    element.tooltip = {'player-list.open-map',player_name,player.tag,role_name}
+
+    Gui.set_padding(element,0,0,0,2)
+    element.style.font_color = player.chat_color
+end)
+
+--- Right align for the time label
+-- @element right_align
+local right_align =
+Gui.new_concept('alignment')
+
+--- Shows the players online time
+-- @element time_label
+local time =
+Gui.new_concept('time_label')
+:set_time_format{minutes = true}
+:set_time(0)
+:define_draw(function(properties,parent,element)
+    Gui.set_padding(element)
+end)
 
 --- Button used to open the action bar
 -- @element open_action_bar
 local open_action_bar =
-Gui.new_button()
-:set_sprites('utility/expand_dots_white')
+Gui.new_concept('button')
+:set_sprite('utility/expand_dots_white')
 :set_tooltip{'player-list.open-action-bar'}
-:set_embedded_flow(function(element,action_player_name)
-    return action_player_name
+:define_pre_draw(function(properties,parent,element,action_player_name)
+    -- Place the button into a flow
+    local flow =
+    parent.add{
+        type = 'flow',
+        name = action_player_name
+    }
+
+    return element, flow
 end)
-:set_style('frame_button',function(style)
-    Gui.set_padding_style(style,-2,-2,-2,-2)
+:define_draw(function(properties,parent,element)
+    -- Update the style of the element
+    element.style = 'frame_button'
+    local style = element.style
+    style.padding = -2
     style.width = 8
     style.height = 14
 end)
-:on_click(function(player,element)
+:on_click(function(event)
+    -- Open the action bar when pressed
+    local element = event.element
+    local player_name = event.player.name
     local new_action_player_name = element.parent.name
-    local action_player_name = Store.get(action_player_store,player.name)
+    local action_player_name = Store.get(action_player_store,player_name)
     if action_player_name == new_action_player_name then
-        Store.clear(action_player_store,player.name) -- will close if already open
+        Store.clear(action_player_store,player_name) -- will close if already open
     else
-        Store.set(action_player_store,player.name,new_action_player_name)
+        Store.set(action_player_store,player_name,new_action_player_name)
     end
 end)
 
 --- Button used to close the action bar
 -- @element close_action_bar
 local close_action_bar =
-Gui.new_button()
-:set_sprites('utility/close_black','utility/close_white')
+Gui.new_concept('button')
+:set_sprite('utility/close_black','utility/close_white')
 :set_tooltip{'player-list.close-action-bar'}
-:set_style('tool_button',function(style)
-    Gui.set_padding_style(style,-1,-1,-1,-1)
+:define_draw(function(properties,parent,element)
+    -- Update the style of the element
+    element.style = 'tool_button'
+    local style = element.style
+    style.padding = -1
     style.height = 28
     style.width = 28
 end)
-:on_click(function(player,element)
-    Store.clear(action_player_store,player.name)
-    Store.clear(action_name_store,player.name)
+:on_click(function(event)
+    -- Close the action bar
+    local player_name = event.player.name
+    Store.clear(action_player_store,player_name)
+    Store.clear(action_name_store,player_name)
 end)
 
---- Button used to confirm a reason
--- @element reason_confirm
-local reason_confirm =
-Gui.new_button()
-:set_sprites('utility/confirm_slot')
-:set_tooltip{'player-list.reason-confirm'}
-:set_style('tool_button',function(style)
-    Gui.set_padding_style(style,-1,-1,-1,-1)
-    style.height = 28
-    style.width = 28
-end)
-:on_click(function(player,element)
-    local reason = element.parent.entry.text or 'Non Given'
-    local action_name = Store.get(action_name_store,player.name)
-    local reason_callback = config[action_name].reason_callback
-    reason_callback(player,reason)
-    Store.clear(action_player_store,player.name)
-    Store.clear(action_name_store,player.name)
-    element.parent.entry.text = ''
+--- Adds all the player info into the content table
+-- @element player_info
+local player_info =
+Gui.new_concept()
+:define_draw(function(properties,parent,element,player,role_name)
+    local player_name = player.name
+    open_action_bar:draw(parent,nil,player_name)
+    zoom_to_map:draw(parent,nil,player,role_name)
+    time:update_time(time:draw(right_align:draw(parent,time.name..player_name)),player.online_time)
 end)
 
---[[ Creates the main gui areas for the player list
-    element
-    > container
-    >> scroll
-    >>> table
-    >> action_bar
-]]
-local function generate_container(player,element)
-    Gui.set_padding(element,2,2,2,2)
-    element.style.minimal_width = 200
+--- Stores all the online players
+-- @element content_table
+local content_table =
+Gui.new_concept('scroll_table')
+:set_height(188)
+:set_column_count(3)
 
-    -- main container which contains the other elements
-    local container =
-    element.add{
-        name='container',
-        type='frame',
-        direction='vertical',
-        style='window_content_frame_packed'
-    }
-    Gui.set_padding(container)
+--- Stores all the action buttons
+-- @element action_bar
+local action_bar =
+Gui.new_concept('frame')
+:define_draw(function(properties,parent,element)
+    element.style = 'subfooter_frame'
+    Gui.set_padding(element,1,1,3,3)
 
-    -- 3 wide table to contain: action button, player name, and play time
-    local list_table = Gui.create_scroll_table(container,3,188)
+    local style = element.style
+    style.horizontally_stretchable = true
+    style.height = 35
 
-    -- action bar which contains the different action buttons
-    local action_bar =
-    container.add{
-        name='action_bar',
-        type='frame',
-        style='subfooter_frame'
-    }
-    Gui.set_padding(action_bar,1,1,3,3)
-    action_bar.style.horizontally_stretchable = true
-    action_bar.style.height = 35
+    close_action_bar:draw(element)
 
-    -- reason bar which contains the reason text field and confirm button
-    local reason_bar =
-    container.add{
-        name='reason_bar',
-        type='frame',
-        style='subfooter_frame'
-    }
-    Gui.set_padding(reason_bar,-1,-1,3,3)
-    reason_bar.style.horizontally_stretchable = true
-    reason_bar.style.height = 35
-    local action_name = Store.get(action_name_store,player.name)
-    reason_bar.visible = action_name ~= nil
-
-    -- text entry for the reason bar
-    local reason_field =
-    reason_bar.add{
-        name='entry',
-        type='textfield',
-        style='stretchable_textfield',
-        tooltip={'player-list.reason-entry'}
-    }
-    Gui.set_padding(reason_field)
-    reason_field.style.height = 28
-    reason_field.style.minimal_width = 160
-
-    reason_confirm(reason_bar)
-
-    return list_table, action_bar
-end
-
---- Adds buttons and permission flows to the action bar
-local function generate_action_bar(player,element)
-    close_action_bar(element)
+    local player = Gui.get_player_from_element(element)
     local action_player = Store.get(action_player_store,player.name)
 
     for action_name,buttons in pairs(config) do
@@ -176,7 +179,7 @@ local function generate_action_bar(player,element)
         }
 
         for _,button in ipairs(buttons) do
-            button(permission_flow)
+            button:draw(permission_flow)
         end
 
         if not Roles.player_allowed(player,action_name) then
@@ -186,18 +189,79 @@ local function generate_action_bar(player,element)
         if buttons.auth and action_player and not buttons.auth(player,action_player) then
             permission_flow.visible = false
         end
+
     end
 
     if not action_player then
         element.visible = false
     end
-end
+end)
+
+--- Text entry for reason
+-- @element reason_field
+local reason_field =
+Gui.new_concept('text_field')
+:set_tooltip{'player-list.reason-entry'}
+:define_draw(function(properties,parent,element)
+    element.style = 'stretchable_textfield'
+    local style = element.style
+    style.padding = 0
+    style.minimal_width = 160
+    style.height = 28
+end)
+
+--- Button used to confirm a reason
+-- @element reason_confirm
+local reason_confirm =
+Gui.new_concept('button')
+:set_sprite('utility/confirm_slot')
+:set_tooltip{'player-list.reason-confirm'}
+:define_draw(function(properties,parent,element)
+    -- Update the style of the element
+    element.style = 'tool_button'
+    local style = element.style
+    style.padding = -1
+    style.height = 28
+    style.width = 28
+end)
+:on_click(function(event)
+    -- Confirm the reason given
+    local element = event.element
+    local player_name = event.player.name
+    local reason = element.parent.entry.text or 'Non Given'
+    local action_name = Store.get(action_name_store,player_name)
+    local reason_callback = config[action_name].reason_callback
+    reason_callback(event.player,reason)
+    Store.clear(action_player_store,player_name)
+    Store.clear(action_name_store,player_name)
+    element.parent.entry.text = ''
+end)
+
+--- Stores the reason entry and confirmation button
+-- @element reason_bar
+local reason_bar =
+Gui.new_concept('frame')
+:define_draw(function(properties,parent,element)
+    element.style = 'subfooter_frame'
+    Gui.set_padding(element,-1,-1,3,3)
+
+    local style = element.style
+    style.horizontally_stretchable = true
+    style.height = 35
+
+    local player = Gui.get_player_from_element(element)
+    local action_name = Store.get(action_name_store,player.name)
+    element.visible = action_name ~= nil
+
+    reason_field:draw(element)
+    reason_confirm:draw(element)
+end)
 
 --- Updates the action bar
-local player_list_name
+local player_list
 local function update_action_bar(player)
-    local frame = Gui.classes.left_frames.get_frame(player_list_name,player)
-    local element = frame.container.action_bar
+    local content = player_list:get_content(player)
+    local element = Gui.find(content,action_bar)
     local action_player_name = Store.get(action_player_store,player.name)
 
     if not action_player_name then
@@ -212,6 +276,7 @@ local function update_action_bar(player)
             element.visible = true
             for action_name,buttons in pairs(config) do
                 if buttons.auth and not buttons.auth(player,action_player) then
+                    print(action_name)
                     element[action_name].visible = false
                 elseif Roles.player_allowed(player,action_name) then
                     element[action_name].visible = true
@@ -221,70 +286,37 @@ local function update_action_bar(player)
     end
 end
 
---- Adds a player to the player list
-local function add_player(list_table,player,role_name)
-    open_action_bar(list_table,player.name)
-
-    -- flow to contain player_name to allow all to have trigger for zoom to map
-    local player_name_flow =
-    list_table.add{
-        type='flow'
-    }
-    Gui.set_padding(player_name_flow)
-
-    -- player name with the tooltip of their highest role and in they colour
-    local player_name =
-    player_name_flow.add{
-        name=zoom_to_map_name,
-        type='label',
-        caption=player.name,
-        tooltip={'player-list.open-map',player.name,player.tag,role_name}
-    }
-    Gui.set_padding(player_name,0,0,0,2)
-    player_name.style.font_color = player.chat_color
-
-    -- flow which allows right align for the play time
-    local time_flow = Gui.create_alignment(list_table,'player-time-'..player.index)
-
-    -- time given in Xh Ym and is right aligned
-    local tick = game.tick > 0 and game.tick or 1
-    local percent = math.round(player.online_time/tick,3)*100
-    local time =
-    time_flow.add{
-        name='label',
-        type='label',
-        caption=format_time(player.online_time),
-        tooltip={'player-list.afk-time',percent,format_time(player.afk_time,{minutes=true,long=true})}
-    }
-    Gui.set_padding(time)
-end
-
 --- Adds fake players to the player list
-local function add_fake_players(list_table,count)
+local function add_fake_players(content_area,count)
     local role_name = 'Fake Player'
     for i = 1,count do
-        add_player(list_table,{
+        local player = {
             name='Player '..i,
             index=0-i,
             tag='',
             online_time=math.random(0,game.tick),
             afk_time=math.random(0,game.tick),
             chat_color=table.get_random_dictionary_entry(Colors)
-        },role_name)
+        }
+
+        player_info:draw(content_area,nil,player,role_name)
     end
 end
 
 --- Registers the player list
 -- @element player_list
-local player_list =
-Gui.new_left_frame('gui/player-list')
-:set_sprites('entity/character')
+player_list =
+Gui.new_concept('toolbar-frame')
+:set_permission_alias('gui/player-list')
+:set_sprite('entity/character')
 :set_tooltip{'player-list.main-tooltip'}
-:set_open_by_default()
+:set_open_by_default(true)
 :set_direction('vertical')
-:on_creation(function(player,element)
-    local list_table,action_bar = generate_container(player,element)
-    generate_action_bar(player,action_bar)
+:define_draw(function(properties,parent,element)
+    local content_area =
+    content_table:draw(element)
+    action_bar:draw(element)
+    reason_bar:draw(element)
 
     local players = {}
     for _,next_player in pairs(game.connected_players) do
@@ -298,55 +330,49 @@ Gui.new_left_frame('gui/player-list')
     for _,role_name in pairs(Roles.config.order) do
         if players[role_name] then
             for _,next_player in pairs(players[role_name]) do
-                add_player(list_table,next_player,role_name)
+                player_info:draw(content_area,nil,next_player,role_name)
             end
         end
     end
 
-    --add_fake_players(list_table,6)
-    --add_fake_players(list_table,20)
+    add_fake_players(content_area,4)
 end)
-:on_update(function(player,element)
-    local list = element.container.scroll.table
+:on_update(function(event)
+    local list = Gui.find(event.element,content_table,'table')
     for _,next_player in pairs(game.connected_players) do
-        local time_element_name = 'player-time-'..next_player.index
-        local time_element = list[time_element_name]
+        local time_element = Gui.find(list,time.name..next_player.name,time)
         if time_element and time_element.valid then
-            time_element.label.caption = format_time(next_player.online_time)
-            local tick = game.tick > 0 and game.tick or 1
-            local percent = math.round(next_player.online_time/tick,3)*100
-            time_element.label.tooltip = {'player-list.afk-time',percent,format_time(next_player.afk_time,{minutes=true,long=true})}
+            time:update_time(time_element,next_player.online_time)
         end
     end
 end)
 
-player_list_name = player_list:uid()
-
 --- When the action player is changed the action bar will update
 Store.register(action_player_store,function(value,category)
     local player = Game.get_player_from_any(category)
     update_action_bar(player)
 
-    local frame = player_list:get_frame(player)
-    local data_table = frame.container.scroll.table
+    local frame = player_list:get_content(player)
+    local data_table = Gui.find(frame,content_table,'table')
     for _,next_player in pairs(game.connected_players) do
-        local element = data_table[next_player.name][open_action_bar.name]
+        local element = Gui.find(data_table,next_player.name,open_action_bar)
         local style = 'frame_button'
         if next_player.name == value then
             style = 'tool_button'
         end
         element.style = style
-        Gui.set_padding(element,-2,-2,-2,-2)
-        element.style.width = 8
-        element.style.height = 14
+        style = element.style
+        style.padding = -2
+        style.width = 8
+        style.height = 14
     end
 end)
 
 --- When the action name is changed the reason input will update
 Store.register(action_name_store,function(value,category)
     local player = Game.get_player_from_any(category)
-    local frame = Gui.classes.left_frames.get_frame(player_list_name,player)
-    local element = frame.container.reason_bar
+    local frame = player_list:get_content(player)
+    local element = Gui.find(frame,reason_bar)
     if value then
         local action_player_name = Store.get(action_player_store,category)
         local action_player = Game.get_player_from_any(action_player_name)
@@ -362,10 +388,11 @@ Store.register(action_name_store,function(value,category)
 end)
 
 --- Many events which trigger the gui to be re drawn, it will also update the times every 30 seconds
-Event.on_nth_tick(1800,player_list 'update_all')
-Event.add(defines.events.on_player_joined_game,player_list 'redraw_all')
-Event.add(defines.events.on_player_left_game,player_list 'redraw_all')
-Event.add(Roles.events.on_role_assigned,player_list 'redraw_all')
-Event.add(Roles.events.on_role_unassigned,player_list 'redraw_all')
+local update = function(event) player_list:update_all(event) end
+Event.on_nth_tick(1800,update)
+Event.add(defines.events.on_player_joined_game,update)
+Event.add(defines.events.on_player_left_game,update)
+Event.add(Roles.events.on_role_assigned,update)
+Event.add(Roles.events.on_role_unassigned,update)
 
 return player_list