redesign director.html

[kprevas]

director.html was hastily thrown together and could probably use some ergonomics improvements.

An initial though I had was to lay out the page in a manner corresponding to the stream overlay, so it feels more like editing that data inline. Life/poison adjustment buttons could go under the life totals and the win/reset buttons could go underneath the win totals.

@cdanis @vslashg as users of this page do you guys think that would make things easier? If not, what are the actual issues you've encountered using the current page and what could be made easier?

[cdanis]

One of the things I've been wondering about is if the 'modes' functionality belongs in there at all.

It might make sense to make a few different HTML pages, and then have different browser overlays for each scene in OBS. For instance, we almost always want to display either the big logotype or a chyron in the commentator view. And we almost always want to display the game overlay, or the sideboard view, when displaying the battlefield camera. It's very rare we want to do anything else, and it means that there's a bunch of alt-tabbing / window switching around in the common cases of switching scenes.

[cdanis]

Independent of that, I do like the idea of a visual / usability re-design. Laying things out like they appear onscreen is a great idea.

[vslashg]

The most un-ergonomic part of directing is the need to switch between three windows (slack chat, director pane, OBS). Anything we can do to merge these would be a great win.

Can we embed chat in the director pane somehow? Showing channel chat and/or twitch chat right on the director page would be useful.

Making the director pane more compact so that we could have it and OBS both visible on the laptop screen might be useful too.