Merge pull request #151 from Cooldude2606/feature/readme-gui

Information Gui

config/_file_loader.lua

@@ -43,6 +43,7 @@ return {
     'modules.addons.chat-reply',
     'modules.addons.tree-decon',
     -- GUI
+    'modules.gui.readme',
     'modules.gui.rocket-info',
     'modules.gui.science-info',
     'modules.gui.warp-list',

config/chat_reply.lua

@@ -17,6 +17,8 @@ return {
         ['wiki']={'info.wiki'},
         ['status']={'info.status'},
         ['github']={'info.github'},
+        ['patreon']={'info.patreon'},
+        ['donate']={'info.patreon'},
         ['command']={'info.custom-commands'},
         ['commands']={'info.custom-commands'},
         ['softmod']={'info.softmod'},

config/compilatron.lua

@@ -19,6 +19,7 @@ return {
             {'info.status'},
             {'info.lhd'},
             {'info.github'},
+            {'info.patreon'},
         }
     }
 }

config/join_messages.lua

@@ -2,5 +2,7 @@ return {
     Cooldude2606 = 'Lua lets you set metatables on numbers, did you know that? Cooldude2606 knows this.',
     samy115 = 'Tremble in fear as the banhammer is now here, its owner: samy115',
     XenoCyber = '"Fire Fire Fire" oops wrong game, have no fear XenoCyber is here',
-    HunterOfGames = 'Unable to support HunterOfGames. You must construct additional miners.'
+    HunterOfGames = 'Unable to support HunterOfGames. You must construct additional miners.',
+    ookl = 'ookl says: "Pineapples are amazing, hello everyone!"',
+    arty714 = 'Arty\'s Potato made it!'
 }

config/roles.lua

@@ -211,7 +211,7 @@ local default = Roles.new_role('Guest','')
 :allow{
     'command/tag',
     'command/tag-clear',
-    'command/chelp',
+    'command/search-help',
     'command/list-roles',
     'command/find-on-map',
     'command/report',
@@ -221,7 +221,8 @@ local default = Roles.new_role('Guest','')
     'gui/rocket-info',
     'gui/science-info',
     'gui/task-list',
-    'gui/warp-list'
+    'gui/warp-list',
+    'gui/readme'
 }
 
 --- Jail role

expcore/gui/defines.lua

@@ -215,4 +215,84 @@ end)
     local frame_style = element.parent.style
     frame_style.padding = 2
     frame_style.minimal_width = width
+end)
+
+--[[-- Used to make a solid white bar in a gui
+@element Gui.bar
+@tparam LuaGuiElement parent the parent element to which the bar will be added
+@tparam number width the width of the bar that will be made, if not given bar will strech to fill the parent
+
+@usage-- Adding a bar to a gui
+local bar = Gui.bar(parent, 100)
+
+]]
+Gui.bar =
+Gui.element(function(_,parent)
+    return parent.add{
+        type = 'progressbar',
+        size = 1,
+        value = 1
+    }
+end)
+:style(function(style,_,width)
+    style.height = 3
+    style.color = {r=255,g=255,b=255}
+    if width then style.width = width
+    else style.horizontally_stretchable = true end
+end)
+
+--[[-- Used to make a label which is centered and of a certian size
+@element Gui.centered_label
+@tparam LuaGuiElement parent the parent element to which the label will be added
+@tparam number width the width of the label, must be given in order to center the caption
+@tparam ?string|Concepts.LocalizedString caption the caption that will be shown on the label
+@tparam[opt] ?string|Concepts.LocalizedString tooltip the tooltip that will be shown on the label
+
+@usage-- Adding a centered label
+local label = Gui.centered_label(parent, 100, 'This is centered')
+
+]]
+Gui.centered_label =
+Gui.element(function(_,parent,width,caption,tooltip)
+    local label = parent.add{
+        type = 'label',
+        caption = caption,
+        tooltip = tooltip,
+        style = 'description_label'
+    }
+
+    local style = label.style
+    style.horizontal_align = 'center'
+    style.single_line = false
+    style.width = width
+
+    return label
+end)
+
+--[[-- Used to make a title which has two bars on either side
+@element Gui.title_label
+@tparam LuaGuiElement parent the parent element to which the label will be added
+@tparam number width the width of the first bar, this can be used to position the label
+@tparam ?string|Concepts.LocalizedString caption the caption that will be shown on the label
+@tparam[opt] ?string|Concepts.LocalizedString tooltip the tooltip that will be shown on the label
+
+@usage-- Adding a centered label
+local label = Gui.centered_label(parent, 100, 'This is centered')
+
+]]
+Gui.title_label =
+Gui.element(function(_,parent,width,caption,tooltip)
+    local title_flow = parent.add{ type='flow' }
+    title_flow.style.vertical_align = 'center'
+
+    Gui.bar(title_flow,width)
+    local title_label = title_flow.add{
+        type = 'label',
+        caption = caption,
+        tooltip = tooltip,
+        style = 'heading_1_label'
+    }
+    Gui.bar(title_flow)
+
+    return title_label
 end)

expcore/gui/left_flow.lua

@@ -42,28 +42,6 @@ function Gui._prototype_element:add_to_left_flow(open_on_join)
     return self
 end
 
---[[-- Styles a top flow button depending on the state given
-@tparam LuaGuiElement the button element to style
-@tparam boolean state The state the button is in
-
-@usage-- Sets the button to the visible style
-Gui.left_toolbar_button_style(button, true)
-
-@usage-- Sets the button to the hidden style
-Gui.left_toolbar_button_style(button, false)
-
-]]
-function Gui.left_toolbar_button_style(button, state)
-    if state then
-        button.style = Gui.top_flow_button_visible_style
-    else
-        button.style = Gui.top_flow_button_style
-    end
-    button.style.minimal_width = 36
-    button.style.height = 36
-    button.style.padding = -2
-end
-
 --[[-- Creates a button on the top flow which will toggle the given element define, the define must exist in the left flow
 @tparam string sprite the sprite that you want to use on the button
 @tparam ?string|Concepts.LocalizedString tooltip the tooltip that you want the button to have
@@ -78,18 +56,7 @@ end)
 
 ]]
 function Gui.left_toolbar_button(sprite,tooltip,element_define,authenticator)
-    local button = Gui.element{
-        type = 'sprite-button',
-        sprite = sprite,
-        tooltip = tooltip,
-        style = Gui.top_flow_button_style
-    }
-    :style{
-        minimal_width = 36,
-        height = 36,
-        padding = -2
-    }
-    :add_to_top_flow(authenticator)
+    local button = Gui.toolbar_button(sprite,tooltip,authenticator)
 
     -- Add on_click handler to handle click events comming from the player
     button:on_click(function(player,_,_)
@@ -152,7 +119,7 @@ function Gui.draw_left_flow(player)
             local button = top_flow[element_define.toolbar_button]
             if button then
                 -- Style the button
-                Gui.left_toolbar_button_style(button, visible)
+                Gui.toolbar_button_style(button, visible)
             end
         end
     end
@@ -206,7 +173,7 @@ function Gui.hide_left_flow(player)
             local button = top_flow[element_define.toolbar_button]
             if button then
                 -- Style the button
-                Gui.left_toolbar_button_style(button, false)
+                Gui.toolbar_button_style(button, false)
                 -- Get the button define from the reverse lookup on the element
                 local button_define = Gui.defines[element_define.toolbar_button]
                 -- Raise the custom event if all of the top checks have passed
@@ -263,7 +230,7 @@ function Gui.toggle_left_element(player,element_define,state)
         local button = top_flow[element_define.toolbar_button]
         if button then
             -- Style the button
-            Gui.left_toolbar_button_style(button, state)
+            Gui.toolbar_button_style(button, state)
         end
     end
     return state

expcore/gui/prototype.lua

@@ -365,11 +365,11 @@ end
 
 --- Called when the player opens a GUI.
 -- @tparam function handler the event handler which will be called
-Gui._prototype_element.on_opened = event_handler_factory(defines.events.on_gui_opened)
+Gui._prototype_element.on_open = event_handler_factory(defines.events.on_gui_opened)
 
 --- Called when the player closes the GUI they have open.
 -- @tparam function handler the event handler which will be called
-Gui._prototype_element.on_closed = event_handler_factory(defines.events.on_gui_closed)
+Gui._prototype_element.on_close = event_handler_factory(defines.events.on_gui_closed)
 
 --- Called when LuaGuiElement is clicked.
 -- @tparam function handler the event handler which will be called

expcore/gui/top_flow.lua

@@ -101,4 +101,67 @@ function Gui.toggle_top_flow(player,state)
     top_flow.visible = state
 
     return state
+end
+
+--[[-- Get the element define that is in the top flow, use in events without an element refrence
+@tparam LuaPlayer player the player that you want to get the element for
+@tparam table element_define the element that you want to get
+@treturn LuaGuiElement the gui element linked to this define for this player
+
+@usage-- Get your top element
+local button = Gui.get_top_element(game.player, example_button)
+
+]]
+function Gui.get_top_element(player, element_define)
+    local top_flow = Gui.get_top_flow(player)
+    return top_flow[element_define.name]
+end
+
+--[[-- Creates a button on the top flow with consistent styling
+@tparam string sprite the sprite that you want to use on the button
+@tparam ?string|Concepts.LocalizedString tooltip the tooltip that you want the button to have
+@tparam[opt] function authenticator used to decide if the button should be visible to a player
+
+@usage-- Add a button to the toolbar
+local toolbar_button =
+Gui.left_toolbar_button('entity/inserter', 'Nothing to see here', function(player)
+    return player.admin
+end)
+
+]]
+function Gui.toolbar_button(sprite,tooltip,authenticator)
+    return Gui.element{
+        type = 'sprite-button',
+        sprite = sprite,
+        tooltip = tooltip,
+        style = Gui.top_flow_button_style
+    }
+    :style{
+        minimal_width = 36,
+        height = 36,
+        padding = -2
+    }
+    :add_to_top_flow(authenticator)
+end
+
+--[[-- Styles a top flow button depending on the state given
+@tparam LuaGuiElement the button element to style
+@tparam boolean state The state the button is in
+
+@usage-- Sets the button to the visible style
+Gui.toolbar_button_style(button, true)
+
+@usage-- Sets the button to the hidden style
+Gui.toolbar_button_style(button, false)
+
+]]
+function Gui.toolbar_button_style(button, state)
+    if state then
+        button.style = Gui.top_flow_button_visible_style
+    else
+        button.style = Gui.top_flow_button_style
+    end
+    button.style.minimal_width = 36
+    button.style.height = 36
+    button.style.padding = -2
 end

locale/en/addons.cfg

@@ -13,6 +13,7 @@ wiki=https://wiki.explosivegaming.nl/
 feedback=https://exp.fider.io/
 status=https://status.explosivegaming.nl
 github=https://github.com/explosivegaming/scenario
+patreon=https://www.patreon.com/ExpGaming
 
 [info]
 players-online=There are __1__ players online
@@ -23,6 +24,7 @@ wiki=You can get more information about us and the custom scenario from our wiki
 feedback=Do you have feedback? leave it at https://exp.fider.io/
 status=Want to check if out servers are down? Visit: https://status.explosivegaming.nl
 github=Want to help improve our server with some extra features? Help us at: https://github.com/explosivegaming/scenario
+patreon=Consider supporting our server at: https://www.patreon.com/ExpGaming
 custom-commands=We use custom commands, such as /tag and /me, use /chelp for more info.
 read-readme=Make sure you have read the Readme (It can be found through the question mark on the top left)
 softmod=We run a softmod on our servers. A softmod is a custom scenario that runs on this server, an example is the player list.

locale/en/commands.cfg

@@ -10,7 +10,7 @@ to-self=Player can not be teleported to themselves.
 
 [expcom-chelp]
 title=Help results for "__1__": 
-footer=[__1__ results found; page __2__ of __3__]
+footer=[__1__ results found: page __2__ of __3__]
 format=/__1__ __2__ - __3__ __4__
 alias=Alias: __1__
 out-of-range=__1__ is an invalid page number.
@@ -61,8 +61,8 @@ wip=This command is temporary and will be replaced at some point in the future.
 
 [expcom-ratio]
 notSelecting=Please select an entetiy with a recpie.
-item-in=You need __1__ per seconds of [item=__2__].
-fluid-in=You need __1__ per seconds of [fluid=__2__].
+item-in=You need __1__ per second of [item=__2__].
+fluid-in=You need __1__ per second of [fluid=__2__].
 item-out=This will result in: __1__ [item=__2__] per second. 
 fluid-out=This will result in: __1__ [fluid=__2__] per second. 
 machines=And you will need __1__ machines (with the same speed as this one) for this. 

locale/en/gui.cfg

@@ -97,3 +97,62 @@ timer-tooltip=Warp cooldown takes __1__ seconds
 goto-tooltip=Go to x __1__ y __2__
 goto-disabled=You must be on a warp point and have a full charge to warp
 goto-edit=Edit warp icon
+
+[readme]
+main-tooltip=Infomation
+welcome-tab=Welcome
+welcome-tooltip=Welcome to Explosive Gaming
+welcome-general=Welcome to Explosive Gaming, we host many factorio servers. While you are here we require you to follow our rules, you can find these in the tab above. You can also find our custom commands and links to our other servers.\nPlease note that our servers reset periodically, the next reset is: __1__
+welcome-roles=We run a custom role system to help protect the work of others. As a result you may not be able to use your deconstruction planner yet or drop item on the groud. Roles also give you access to some custom features such as adding tasks to our task list or making new warp points.\nYou have been assigned the roles: __1__
+welcome-chat=Chatting can be difficult for new players because it’s different than other games! It’s very simple, the button you need to press is the “GRAVE/TILDE” key (which is located under the “ESC key”) - If you would like to change the key, go to your Controls tab in options.\nThe setting you need to change is “Toggle chat (and Lua console)” you currently have it set to "__CONTROL__toggle-console__"
+rules-tab=Rules
+rules-tooltip=Rules for our server
+rules-general=By playing on our servers you accept the rules below. If you are supected of breaking a rule then you will be questioned by one of our moderators. If required you will be banned from our servers, appeals can be made by contacting an Administrator on our discord.
+rules-1=Hacking / cheating / abusing bugs will not be tolerated.
+rules-2=Any bugs or exploits found should be reported to our staff members.
+rules-3=Be respectful to other players in chat, this includes any other forms of communication.
+rules-4=Taking all items from a belt or logistics network is forbidden: sharing resources is mandatory.
+rules-5=Spamming of chat, bots, unlimited chests, or concrete is not allowed.
+rules-6=Before removing major parts of the factory tell other players why you are removing it.
+rules-7=Do not cause unnecessary lag by placing/removing tiles with bots or using active provider chests, if think some thing might cause lag please ask staff first.
+rules-8=Do not walk in random directions with no reason, this is to reduce map download times.
+rules-9=Do not use speakers on global or with alerts without prior permission, no one wants to hear your music at full volume without knowing where the off switch is.
+rules-10=Do not rotate belts, deactivate belts with wires, or cause production to stop without good reason, this goes for inserters and spliters as well.
+rules-11=Do not make train roundabouts. Other loops such as RoRo stations are allowed.
+rules-12=When using trains, use the same size other players have used, many players use 1-2-1, 2-4-2, or 3-8-3, meaning 1 engine 2 cargo 1 engine.
+rules-13=Trains are Left Hand Drive (LHD) only, this means trains drive on the left side of the tracks.
+rules-14=Do not beg for roles, advertise other servers, or link to harmful sites.
+rules-15=Use common sense, report rule breakers, and Administrators have the final word.
+commands-tab=Commands
+commands-tooltip=Commands which you are able to use
+commands-general=We have lots of custom commands which you are able to use. Below you can find a list of all the commands that you are allowed to use and what they do. If you need more information or want to search for a command you can use our /search-help command.
+servers-tab=Servers
+servers-tooltip=Links to our other servers and sites
+servers-general=This is only one of our servers for factorio, we host alot of others as well. Below you can find details about all the servers that we host as well as links to our external services such as discord or github.
+servers-factorio=Factorio Servers
+servers-1=S1 Public
+servers-d1=This is our 48 hour reset experimental server.
+servers-2=S2 Public
+servers-d2=This is our 48 hour reset stable server.
+servers-3=S3 Weekly
+servers-d3=This is our weekly reset experimental server.
+servers-4=S4 Weekly
+servers-d4=This is our weekly reset stable server.
+servers-5=S5 Modded
+servers-d5=This is our modded server, see discord for details.
+servers-6=S6 Donator
+servers-d6=This is our donator only server, online when requested.
+servers-7=S7 Event
+servers-d7=This is our event server, we try to run events at least once per week.
+servers-8=S8 T̷-̶s̶-̴:̷
+servers-d8=N̵o̴ ̶o̷-̶e̵ ̴k̸n̷-̶w̵s̸ ̴w̷h̷a̶-̶ ̷h̴a̴p̷p̴e̷n̷s̸ ̷o̶n̴ ̷t̶h̴-̶s̶ ̷s̷e̶r̸v̸e̴r̷,̶ ̸i̸t̴ ̷m̶-̸g̴h̶t̷ ̸n̸-̶t̵ ̷e̴v̸e̸n̶t̷ ̵-̷x̴i̵s̶t̸.̸
+servers-external=External Links
+servers-open-in-browser=Open in your browser
+backers-tab=Backers
+backers-tooltip=People who have helped make our server
+backers-general=We would like to thank all our staff and backers who have helped our comunity grow. Our staff have helped to keep our servers safe from trolls and fun places to play. Our backers have helped us to cover our running costs and provide a great comunity for us all to enjoy together.
+backers-management=Administrators
+backers-board=Board Members and Senior Backers
+backers-staff=Staff Members
+backers-backers=Sponsors and Supporters
+backers-active=Active Players

modules/commands/help.lua

@@ -18,7 +18,8 @@ end)
 -- @command chelp
 -- @tparam string keyword the keyword that will be looked for
 -- @tparam number page the page of help to view, must be in range of pages
-Commands.new_command('chelp','Searches for a keyword in all commands you are allowed to use.')
+Commands.new_command('search-help','Searches for a keyword in all commands you are allowed to use.')
+:add_alias('chelp','shelp','commands')
 :add_param('keyword',true)
 :add_param('page',true,'integer')
 :set_defaults{keyword='',page=1}

modules/gui/readme.lua

@@ -0,0 +1,332 @@
+--[[-- Gui Module - Readme
+    - Adds a main gui that contains lots of important information about our server
+    @gui Readme
+    @alias readme
+]]
+
+local Gui = require 'expcore.gui' --- @dep expcore.gui
+local Roles = require 'expcore.roles' --- @dep expcore.roles
+local Commands = require 'expcore.commands' --- @dep expcore.commands
+local Event = require 'utils.event' --- @dep utils.event
+local Game = require 'utils.game' --- @dep utils.game
+
+local tabs = {}
+local function Tab(caption,tooltip,element_define)
+    tabs[#tabs+1] = {caption, tooltip, element_define}
+end
+
+local frame_width = 595 -- controls width of top descritions
+local title_width = 270 -- controls the centering of the titles
+local scroll_hieght = 275 -- controls the height of the scrolls
+
+--- Sub content area used within the content areas
+-- @element sub_content
+local sub_content =
+Gui.element(function(_,parent)
+    return parent.add{
+        type = 'frame',
+        direction = 'vertical',
+        style = 'image_frame'
+    }
+end)
+:style{
+    horizontally_stretchable = true,
+    horizontal_align = 'center'
+}
+
+--- Table which has a title above it above it
+-- @element title_table
+local title_table =
+Gui.element(function(_,parent,bar_size,caption,column_count)
+    Gui.title_label(parent, bar_size, caption)
+
+    return parent.add{
+        type = 'table',
+        column_count = column_count,
+        style = 'bordered_table'
+    }
+end)
+:style{
+    padding = 0,
+    cell_padding = 0,
+    vertical_align = 'center',
+    horizontally_stretchable = true
+}
+
+--- Scroll to be used with Gui.title_label tables
+-- @element title_table_scroll
+local title_table_scroll =
+Gui.element{
+    type = 'scroll-pane',
+    direction = 'vertical',
+    horizontal_scroll_policy = 'never',
+    vertical_scroll_policy = 'auto',
+    style = 'scroll_pane_under_subheader'
+}
+:style{
+    padding = {1,3},
+    maximal_height = scroll_hieght,
+    horizontally_stretchable = true,
+}
+
+--- Content area for the welcome tab
+-- @element welcome_content
+Tab({'readme.welcome-tab'},{'readme.welcome-tooltip'},
+Gui.element(function(_,parent)
+    local server_details = global.server_details or { name='ExpGaming S0 - Local', description='Failed to load description: disconnected from sync api.', reset_time='Non Set', branch='Unknown'}
+    local container = parent.add{ type='flow', direction='vertical' }
+    local player = Gui.get_player_from_element(parent)
+
+    -- Set up the top flow with logos
+    local top_flow = container.add{ type='flow' }
+    top_flow.add{ type='sprite', sprite='file/modules/gui/logo.png' }
+    local top_vertical_flow = top_flow.add{ type='flow', direction='vertical' }
+    top_flow.add{ type='sprite', sprite='file/modules/gui/logo.png' }
+    top_vertical_flow.style.horizontal_align = 'center'
+
+    -- Add the title and description to the top flow
+    Gui.title_label(top_vertical_flow, 62, 'Welcome to '..server_details.name)
+    Gui.centered_label(top_vertical_flow, 380, server_details.description)
+    Gui.bar(container)
+
+    -- Get the names of the roles the player has
+    local player_roles = Roles.get_player_roles(player)
+    local role_names = {}
+    for i,role in ipairs(player_roles) do
+        role_names[i] = role.name
+    end
+
+    -- Add the other information to the gui
+    container.add{ type='flow' }.style.height = 4
+    Gui.centered_label(sub_content(container), frame_width, {'readme.welcome-general', server_details.reset_time})
+    Gui.centered_label(sub_content(container), frame_width, {'readme.welcome-roles', table.concat(role_names,', ')})
+    Gui.centered_label(sub_content(container), frame_width, {'readme.welcome-chat'})
+
+    return container
+end))
+
+--- Content area for the rules tab
+-- @element rules_content
+Tab({'readme.rules-tab'},{'readme.rules-tooltip'},
+Gui.element(function(_,parent)
+    local container = parent.add{ type='flow', direction='vertical' }
+
+    -- Add the title and description to the content
+    Gui.title_label(container, title_width-3, {'readme.rules-tab'})
+    Gui.centered_label(container, frame_width, {'readme.rules-general'})
+    Gui.bar(container)
+    container.add{ type='flow' }
+
+    -- Add a table for the rules
+    local rules = Gui.scroll_table(container, scroll_hieght, 1)
+    rules.style = 'bordered_table'
+    rules.style.cell_padding = 4
+
+    -- Add the rules to the table
+    for i = 1,15 do
+        Gui.centered_label(rules, 565, {'readme.rules-'..i})
+    end
+
+    return container
+end))
+
+--- Content area for the commands tab
+-- @element commands_content
+Tab({'readme.commands-tab'},{'readme.commands-tooltip'},
+Gui.element(function(_,parent)
+    local container = parent.add{ type='flow', direction='vertical' }
+    local player = Gui.get_player_from_element(parent)
+
+    -- Add the title and description to the content
+    Gui.title_label(container, title_width-20, {'readme.commands-tab'})
+    Gui.centered_label(container, frame_width, {'readme.commands-general'})
+    Gui.bar(container)
+    container.add{ type='flow' }
+
+    -- Add a table for the commands
+    local commands = Gui.scroll_table(container, scroll_hieght, 2)
+    commands.style = 'bordered_table'
+    commands.style.cell_padding = 0
+
+    -- Add the rules to the table
+    for name,command in pairs(Commands.get(player)) do
+        Gui.centered_label(commands, 120, name)
+        Gui.centered_label(commands, 450, command.help)
+    end
+
+    return container
+end))
+
+--- Content area for the servers tab
+-- @element servers_content
+Tab({'readme.servers-tab'},{'readme.servers-tooltip'},
+Gui.element(function(_,parent)
+    local container = parent.add{ type='flow', direction='vertical' }
+
+    -- Add the title and description to the content
+    Gui.title_label(container, title_width-10, {'readme.servers-tab'})
+    Gui.centered_label(container, frame_width, {'readme.servers-general'})
+    Gui.bar(container)
+    container.add{ type='flow' }
+
+    -- Draw the scroll
+    local scroll_pane = title_table_scroll(container)
+    scroll_pane.style.maximal_height = scroll_hieght + 20 -- the text is a bit shorter
+
+    -- Add the factorio servers
+    local factorio_servers = title_table(scroll_pane, 225, {'readme.servers-factorio'}, 2)
+    for i = 1,8 do
+        Gui.centered_label(factorio_servers, 110, {'readme.servers-'..i})
+        Gui.centered_label(factorio_servers, 460, {'readme.servers-d'..i})
+    end
+
+    -- Add the external links
+    local external_links = title_table(scroll_pane, 235, {'readme.servers-external'}, 2)
+    for _,key in ipairs{'discord','website','patreon','status','github'} do
+        Gui.centered_label(external_links, 110, key:gsub("^%l", string.upper))
+        Gui.centered_label(external_links, 460, {'links.'..key}, {'readme.servers-open-in-browser'})
+    end
+
+    return container
+end))
+
+--- Content area for the servers tab
+-- @element backers_content
+Tab({'readme.backers-tab'},{'readme.backers-tooltip'},
+Gui.element(function(_,parent)
+    local container = parent.add{ type='flow', direction='vertical' }
+
+    -- Add the title and description to the content
+    Gui.title_label(container, title_width-10, {'readme.backers-tab'})
+    Gui.centered_label(container, frame_width, {'readme.backers-general'})
+    Gui.bar(container)
+    container.add{ type='flow' }
+
+    -- Find which players will go where
+    local done = {}
+    local groups = {
+        Administrator = { _title={'readme.backers-management'}, _width=230 },
+        Sponsor = { _title={'readme.backers-board'}, _width=145 }, -- change role to board
+        Donator = { _title={'readme.backers-backers'}, _width=196 }, -- change to backer
+        Moderator = { _title={'readme.backers-staff'}, _width=235 },
+        Active = { _title={'readme.backers-active'}, _width=235 },
+    }
+
+    -- Fill by player roles
+    for player_name, player_roles in pairs(Roles.config.players) do
+        for role_name, players in pairs(groups) do
+            if table.contains(player_roles, role_name) then
+                done[player_name] = true
+                table.insert(players,player_name)
+                break
+            end
+        end
+    end
+
+    -- Fill by active times
+    local active_time = 3*3600*60
+    for _, player in pairs(game.players) do
+        if not done[player.name] then
+            if player.online_time > active_time then
+                table.insert(groups.Active,player.name)
+            end
+        end
+    end
+
+    -- Add the different tables
+    local scroll_pane = title_table_scroll(container)
+    for _, players in pairs(groups) do
+        local table = title_table(scroll_pane, players._width, players._title, 4)
+        for _,player_name in ipairs(players) do
+            Gui.centered_label(table, 140, player_name)
+        end
+
+        if #players < 4 then
+            for i = 1,4-#players do
+                Gui.centered_label(table, 140)
+            end
+        end
+    end
+
+    return container
+end))
+
+--- Main readme container for the center flow
+-- @element readme
+local readme_toggle
+local readme =
+Gui.element(function(event_trigger,parent)
+    local container = parent.add{
+        name = event_trigger,
+        type = 'frame',
+        style = 'invisible_frame'
+    }
+
+    -- Add the left hand side of the frame back, removed because of frame_tabbed_pane style
+    local left_alignment = Gui.alignment(container, nil, nil, 'bottom')
+    left_alignment.style.padding = {32,0,0,0}
+
+    local left_side =
+    left_alignment.add{
+        type = 'frame',
+        style = 'frame_without_right_side'
+    }
+    left_side.style.vertically_stretchable = true
+    left_side.style.padding = 0
+    left_side.style.width = 5
+
+    -- Add the tab pane
+    local tab_pane = container.add{
+        name = 'pane',
+        type = 'tabbed-pane',
+        style = 'frame_tabbed_pane'
+    }
+
+    -- Add the different content areas
+    for _,tab_details in ipairs(tabs) do
+        local tab = tab_pane.add{ type = 'tab', style = 'frame_tab', caption = tab_details[1], tooltip = tab_details[2] }
+        tab_pane.add_tab(tab, tab_details[3](tab_pane))
+    end
+
+    return container
+end)
+:on_open(function(player)
+    local toggle_button = Gui.get_top_element(player, readme_toggle)
+    Gui.toolbar_button_style(toggle_button, true)
+end)
+:on_close(function(player,element)
+    local toggle_button = Gui.get_top_element(player, readme_toggle)
+    Gui.toolbar_button_style(toggle_button, false)
+    Gui.destroy_if_valid(element)
+end)
+
+--- Toggle button for the readme gui
+-- @element readme_toggle
+readme_toggle =
+Gui.toolbar_button('virtual-signal/signal-info',{'readme.main-tooltip'},function(player)
+    return Roles.player_allowed(player,'gui/readme')
+end)
+:on_click(function(player,_)
+    local center = player.gui.center
+    if center[readme.name] then
+        player.opened = nil
+    else
+        player.opened = readme(center)
+    end
+end)
+
+--- When a player joins the game for the first time show this gui
+Event.add(defines.events.on_player_created,function(event)
+    local player = Game.get_player_by_index(event.player_index)
+    local element = readme(player.gui.center)
+    element.pane.selected_tab_index = 1
+    player.opened = element
+end)
+
+--- When a player joins clear center unless the player has something open
+Event.add(defines.events.on_player_joined_game,function(event)
+    local player = Game.get_player_by_index(event.player_index)
+    if not player.opened then
+        player.gui.center.clear()
+    end
+end)