GUI upgrade for settings and match stats

[applenick]

GUI Upgrades 🎉

Time for an upgrade to GUI menus!

SmartInv Framework

Since the introduction of Observer Tools our current inventory GUI framework was extracted originally from the picker menu into a util package and over the past year has received some changes, notably with the contribution of the verbose stats menu. However, there have been some limitations in usability, main one being the menu system is a bit cumbersome to work with. This has the potential to discourage new contributors from implementing their ideas! While we could continue using our own menu framework, there are plenty of lightweight alternatives which could serve as viable replacements.

I've opted for the SmartInvs library. A well known and flexible framework for creating clean GUIs. Some of the highlights of this framework include an easy to understand API, powerful pagination, support for multiple inventory types, plus a whole lot more. We've also been using this library in Community for over three months and it has worked well.

Within this PR I've gone through and converted and redesigned some existing menus along with creating a brand new one.

Verbose Match Stats

The first menu to receive an upgrade was the verbose match stats menu. For a while there's been an issue related to pagination on maps with more than ~30 players in a match. The redesign includes that fix along with a few improvements. Now users can navigate more easily between teams with a back button on each team's sub-menu. The main match stats menu can also hold any number of teams, thanks to our powerful new pagination system.

Here is an example of the menu. You'll notice how the player head is on the first row, with teams on the rows underneath. Once in the blue menu, since there were 0 online we account for instances where the teams are empty.

verbose-stats.mov

Another example showcasing how pagination looks with multiple team members.

full-teams.mp4

To showcase how teams are arranged, here are two additional screenshots. The first on a map with 9 teams and a second with 20. You'll notice how we have a "fancy" layout for smaller # of teams, but a more standard paginated format for maps with over. Note, due to the flexible nature of SmartInvs, the fancy layout is only applied to teams. The sub-menus only display players in a standard format (see each implementation for more details).

Observer Tools

Next up was converting the observer tools menu. The whole thing has been converted to use SmartInvs and everything works as intended. Also luckily this PR resolves #726 🥳

Settings Menu

The final and most exciting part of this upgrade was creating a brand new menu. What better way to showoff the advantage of SmartInvs than with the long requested settings menu! This new menu allows users to view a visual representation of their current settings. Each setting has an icon above with value below, clicking either results in that setting being toggled.

settings.mov

You also may have noticed the anvil under observer tools. That's because in addition to using /settings, users will be able to instantly access the settings menu from observer tools.

Dark/Light mode

Fulfilling a recent request by @Electroid, also included is a new setting related to player time preference. The new time setting allows the user to choose what time of day they prefer. For those of us who prefer to play in the dark, now we'll no longer be blinded by different maps! You can choose between auto, dark, and light. auto is the default, which keeps your time in-sync with the time given by the map.

time.mp4

Final Notes & Feedback

I chose to not convert everything, the missing GUI menus which have not been touched by this PR include those used in the Picker and View Inventory match modules. Being more specialized instances, thought it would be safer to convert them at a later date. However, if requested they can be included in this PR.

Open to feedback on everything changed! If you have suggestions regarding the settings icons that'd be especially helpful. I attempted to make each related the best I could, but if there's any alternatives let me know. Also suggestions for the descriptions & translation keys would be appreciated too.

As always, the changes here have been well tested and should all work as intended 👍

Signed-off-by: applenick [email protected]

[Electroid]

Overall approach looks good, not sure I have much feedback. Will take another look later this week.

[applenick]

Thanks @Electroid!
Some pesky tabs got in the way, but all resolved. Let me know if there's any other feedback 👍

[calcastor]

Would this have closed #217?