A visual UI cleanup of the in-game HUD (same layout, same controls) #6363

Purpose

I play OpenFront a lot and I think the game deserves a better looking HUD than the one it has. The layout is good, but the look is mid, and I'm a bit fed up with it. So I spent some time on what it could be.

Update: thanks for approving this. Everything below is the current state of the mockup, after the feedback I got on Discord (bottom bar, notifications, modals, leaderboard). As Wonder asked, I'll send it as several smaller PRs that all reference this issue, instead of one big one.

I also posted everything in #suggestions on Discord so players can react to it: discord link

Objectives

• One consistent look across the in-game HUD: the same surfaces, corners, spacing, icons and states on every panel.
• Keep every control where it is. No button moves and no hotkey changes.
• Use the game's own icons where the HUD uses emoji today.
• Clean up the small visual defects listed below.
• Visual only, with no gameplay change.

Description

What bothers me today

The HUD works. It's compact and it stays out of the map's way, and I wouldn't touch that. But it looks like it was built one panel at a time:

• The settings menu, quick chat, the player panel and the end screen each have their own background, border and close button.
• Corner rounding changes from one panel to the next.
• Emoji are used as icons: a red cross to cancel an attack, a gear for the leaderboard columns, and a money bag, a shield and a warning sign in the player panel. They look different on Windows, macOS, Android and Linux, and the game already has its own gold and troop icons right next to them.
• Important events get a red stripe that bends around the corners of the box, even for good news like "Morocco accepted your alliance request".
• On the troop bar the soldier icon and the edge of the fill cut through the numbers.
• The attack slider is the browser's default one, so it looks different in Chrome, Firefox and Safari.
• The buttons in the top right (speed, pause, settings, exit) can't be reached with the keyboard.
• On phones the count badges in the build sheet sit in the gap between two cards.

Some of this is taste, I know. To keep that part small, the mockup doesn't move anything. Every panel keeps its position and its order, and only the way it's drawn changes. Three things are added where I felt they were missing: the price on each hotbar tile, a countdown on alliance requests, and three stats on the end screen.

What it looks like now

Each picture shows today first, then the mockup. Both come from the same singleplayer game.

Small details will still move while I write the PRs, but this is the direction.

Bottom bar. It keeps its three rows. The troop count is on the left and the max sits on its own plate on the right, so the fill never crosses the digits. Troops that are out attacking are a lighter part of the bar, like today. The slider has marks at 25, 50, 75 and 100%. The hotbar tiles are flat, about today's size, with the price above each one.

Leaderboard. Same columns and same sorting. Your own row is easier to spot, the gear becomes a columns button, and the game ID stays visible at the top. The number of rows follows the height of the window, from 5 on a small screen up to 10 on a tall one.

The columns menu shows everything at once, grouped, instead of a list you have to scroll.

Notifications. Still two blocks like today, routine on top and important below, at about the same size. The colour coding stays, but it moves from the text to an icon, a light fade and the timer line under each row. Names and amounts are in bold so you can see who and how much at a glance. Alliance requests keep Focus as the first button, Accept is green, Reject is red, and you can see how long you have left to answer.

Player panel. I was careful here because people have muscle memory. Same rows, same buttons in the same places, with the game's icons instead of emoji.

Hover card and top-right buttons. The hover card keeps its two rows. The buttons in the top right get hover, pressed and focus states.

Menus. Settings, quick chat, the emoji picker and the end screen share one header and one look. The promo block on the end screen stays.

Phones. Same treatment. The build sheet opens from the bottom and each tile carries its own count.

Fifteen seconds of a normal game with the mockup, then the same fifteen seconds today:

What stays as it is

• The radial menu and the desktop build menu.
• Everything outside a running game: homepage, lobby, store, account.
• The map.
• The order of the hotbar and the buttons in the player panel.
• The HUD opacity setting.

How I'll send it

Split PRs, each one referencing this issue:

1. The shared base (colours, spacing, icons) and the menus: settings, quick chat, emoji picker, tutorial card, end screen, player panel.
2. The bottom bar.
3. Notifications and alliance requests.
4. The leaderboard.

The hover card, the top-right buttons and the phone build sheet come after those.

Still open, tell me what you think:

• The end screen title uses the pixel "OpenFront" font from the homepage. It's the only place I used it. OK or too much?
• Is there a panel you'd rather leave alone?

Assignment

• I'd like to be assigned to this issue and work on it myself

discord: @LouisACR