Improve viewer UX by moving stats near cursor

[SrZorro]

Problem

Viewers (and new players) struggle to correlate on-map actions with context info shown in the top-right corner (player-info-overlay). Especially as a viewer it's difficult to keep track of where the mouse is and the top right overlay info to understand what its hovering.

chrome_7eUyPhOmHr.mp4

Proposed Solution

Mirror or relocate the contents of player-info-overlay next to the mouse position.

chrome_jVJ4T14SOL.mp4

A simple dynamic HUD under the cursor can:

• Instantly show stats using clear visual emojis
• Visually link context data to the cursor position
• Improve UX with a simple UI change

Try it now

If any youtuber (plis Ultimus_Rex) want to try it now, here is the user script I did for the demo.

Just copy and paste it to the dev tools (F12) at any point while playing to get the HUD.

https://gist.github.com/SrZorro/0d77e96d60faa5e5654da26e497e258f

Benefits

• Greatly improves accessibility and clarity in videos and streams
• Helps players make faster decisions during gameplay

[scilone]

Thx @SrZorro for this idea and your POC, I make this PR for you and add user settings to toggle between three display modes: overlay only, mouse cursor only, or both.
Hope you like it 🙃