return function(state) imfs.begin(size.x, size.y) :padding(0, 0) :bgcolor("#151618", true) imfs.image(0, size.y * 0.08, size.x, size.x * (72/672), default_textures.."menu_header.png") local games = state.games if #games < 1 then imfs.hypertext(0, 0, size.x, size.y, [[ ]]) return imfs.end_() end imfs.scroll_container(0, 0, size.x, size.y, "horizontal", 0, "") :scrollbar(function() imfs.scrollbar(-800, -800, 0, 0, "horizontal", state.scroll_pos) :options({ min = 1, max = #games, smallstep = 1, }) :onchange(function(action, value) if action == "CHG" then state.scroll_pos(value) end end) end) local center = size.x / 2 for i, x in ipairs(games) do imfs.button(center + (i - #games / 2) * 0.25, size.y - 0.5, 0.25, 0.25) :image(theme.icon(i == state.scroll_pos() and "circle_active" or "circle")) :onclick(function() state.scroll_pos(i) end) local dist = i - state.scroll_pos() local scale = 4 / (math.abs(dist) + 1) if scale > 0.1 then --This looks neat, but is useless for UI purposes: center +10^(1 /math.abs(dist)) *math.sign(dist) local lc = center + math.abs(dist * 10) ^ 0.55 * math.sign(dist) if x.menuicon_path == "" then x.menuicon_path = theme.icon("games") end --TODO: Do these need some kind of background? imfs.button(lc - scale /2, size.y / 2 - scale / 2 + (4 - scale) / 2 + 2, scale, scale) :image(x.menuicon_path) :tooltip(x.title, "#444", "#aaa") if dist == 0 then imfs.button(lc - scale / 2, size.y / 2 + 4, 4, 0.5, x.title) :styles(styles_no_background) end end end imfs.scroll_container_end() imfs.button("5%", "30%", 4, 4) :style({ border = false, bgimg = theme.icon("menu_servers"), bgimg_middle = 0, }) :style("hovered", { bgimg = theme.icon("menu_servers_hovered"), bgimg_middle = 0, }) :style("pressed", { bgimg = theme.icon("menu_servers_hovered"), bgimg_middle = 0, }) :onclick(show_servers_menu) imfs.button("5%", size.y * 0.3 + 4, 4, 0.5, "Servers") :styles(styles_no_background) imfs.button(size.x * 0.95 - 4, "30%", 4, 4) :style({ border = false, bgimg = theme.icon("menu_content"), bgimg_middle = 0, }) :style("hovered", { bgimg = theme.icon("menu_content_hovered"), bgimg_middle = 0, }) :style("pressed", { bgimg = theme.icon("menu_content_hovered"), bgimg_middle = 0, }) :onclick(show_content_menu) imfs.button(size.x * 0.95 - 4, size.y * 0.3 + 4, 4, 0.5, "Content") :styles(styles_no_background) imfs.button(1, 0, 2, 0.5, "About") :style({ bgimg = theme.get_background_image("tab") }) :style("hovered", { bgimg = theme.get_background_image("tab", "hovered") }) :style("pressed", { bgimg = theme.get_background_image("tab", "active"), }) :onclick(show_about_menu) imfs.button(size.x - 3, 0, 2, 0.5, "Settings") :style({ bgimg = theme.get_background_image("tab"), }) :style("hovered", { bgimg = theme.get_background_image("tab", "hovered"), }) :style("pressed", { bgimg = theme.get_background_image("tab", "active"), }) :onclick(show_settings_menu) return imfs.end_() end