Implement a HUD using the web technology stack

[aschaeffer]

What's a HUD?

• It stands for Head Up Display
• It shows game data like health, armor, crosshair, minimap...
• It's a layer that is being rendered over the rendered game scene.
• It does not accept any keyboard or mouse inputs.

What is not part of the HUD?

The following components are not part of the head up display and should be developed and discussed separately:

• Main menu
• Scoreboard
• Developer console
• Chat console
• Server browser
• Options window
• About window
• Map selection window
• Administration window ...

Features

The following characteristics must be considered when developing a HUD:

• The HUD can be activated or deactivated completely with /hidehud 0 and /hidehud 1
• The HUD consists of multiple widgets. A widget is an isolated component (a chat console for example).
• Users can customize which widgets are visible.
• Users can customize the position and size of a widget using a grid technology (see below)

Grid Technology

• Use simple HTML to arrange an grid (see demo in the first link)
• https://troolee.github.io/gridstack.js/
• https://github.com/troolee/gridstack.js

    <div class="grid-stack">
        <div class="grid-stack-item"
            data-gs-x="0" data-gs-y="0"
            data-gs-width="4" data-gs-height="2">
                <div class="grid-stack-item-content"></div>
        </div>
        <div class="grid-stack-item"
            data-gs-x="4" data-gs-y="0"
            data-gs-width="4" data-gs-height="4">
                <div class="grid-stack-item-content"></div>
        </div>
    </div>

    <script type="text/javascript">
    $(function () {
        var options = {
            cell_height: 80,
            vertical_margin: 10
        };
        $('.grid-stack').gridstack(options);
    });
    </script>

• The grid structure is stored in the Inexor Tree (of course, we store everything in the tree!)
  • An hierarchical representation of the grid HTML (see example above)
• A component reads the structure from the Inexor Tree and configures the grid
• By modifying the structure in the Inexor Tree, the grid will be rearranged / rendered

Declarative Widgets

• The declarative description of a widget is stored in the Inexor Tree (of course)
  • Name / Title
  • Description
  • location of the HTML
  • location of the CSS
• The HUD reads the declarative description from the Inexor Tree and constructs the widget
• Each widget
  • can use simple templating in order to replace Inexor Tree variables like ${inexor.tree.instances.31416.gamestate.player1.frags}
  • has an updating mechanism for updating the Tree variables

Metrics

The following table illustrates which data is available in HUD renderer.

Personal state metrics	Tree
Current weapon	player1.gunselect
Next weapon	player1.gunselect + 1
Previous weapon	player1.gunselect - 1
Current amount of ammo for the current weapon	player1.ammo[player1.gunselect]
Max amount of ammo for the current weapon	gamemodes.[currentmode].maxAmmo[player1.gunselect]
Quad-Damage	player1.quad
Armour	player1.armour
Flag	player1.hasFlag

Personal stats metrics	Tree
Damage dealt	player1.damage.dealt
Damage received	player1.damage.received
Frags	player1.frags
Deaths	player1.deaths
Suicides	player1.suicides
Accuracy	player1.accuracy
Kills per death	player1.kpd

Game time metrics	Tree
Max time (current round)	gamestate.time.max
Past time (current round)	gamestate.time.past
Remaining time (current round)	gamestate.time.remaining

Widgets

This list should give you an idea which widgets should be developed:

Widget	Metrics	Description	Graphical visualisation
Ammo	Current ammo, Max ammo	Shows how much ammo is left for the current weapon	Bar, Circle
Weapon	Current weapon, Next weapon, Previous weapon	Shows the current weapon and the switchable weapons	Text, Icons
Game timer	Max time, Past time, Remaining time	Shows information about the game time	Text, Bar, Clock
Personal stats	Frags, Deaths, ...	Shows stats about you or the currently spectated player	Text, Bars

Data

• See #442

[aschaeffer]

This is how it could look like:

• https://dsmorse.github.io/gridster.js/
• https://troolee.github.io/gridstack.js/
• https://hootsuite.github.io/grid/

[MartinMuzatko]

This would be a great addition, but first we need to settle what HUD elements we want, besides the usual (Health, armor, map, etc) and edithud elements.

[Fohlen]

Since gridster is the most well-known, documented and maintained of the above, probably best would be to focus on that. The following elements should be backported from sauer:

• Health, armor
• performance (ping, fps)
• log (this should at start behave similiar to the sauer one)
• stats (time, frags/deaths/kpd, team stats)

Each elements should be drag & drop with gridster, and as well have a small option set (just checkboxes literally), what to display exactly.

[aschaeffer]

"log" == web based console? --> see #386

[Fohlen]

@aschaeffer quiet alrighty @IAmNotHanni wanted to dig into this since it's a thing that one can do really nicely independant

[aschaeffer]

The web console is a separate component and isn't part of this issue.

[MartinMuzatko]

@aschaeffer when designing a crosshair there are many aspects to take into account.

About the non-editmode crosshair: Are there different crosshairs for different weapons? Kill feedback (Related to #91 ) - we could flash the crosshair red on kill. All other attributes like size would go into the widget settings object.

Your thoughts? We do not have to decide on the weapons specific stuff yet, but having the possibility would be nice.