Popout progress overview to use as browser source in OBS

[MeemawHustlin]

For past streams what we've done to display the progress bar on screen is to grab a browser source of the entire google spreadsheet and crop is down to just the cell that displayed progress. We can easily do the same thing with our current website design, but an improvement to that would be to have the option of displaying the overview breakdown of objectives in addition to the progress bar, in as condensed of a format as possible. Here's a rough outline of what I'm imagining:

• In the Share section, the user has two buttons, one to make a popout window of their Share Link, or to type in another code and make a popout window of that one.
• This popout window would not be tied to the whole "spectator mode" on/off that overrides the user's ability to interact with their own guide at the same time. It would be unchangeable once made, other than updating that Share Link's progress. This could double as being useful in a race, where a streamer could pull multiple progress popouts up for different runners at the same time to put into an OBS layout.
• The popout window would be as minimalist as possible, with no topbar or other common guide formatting. It would simply be a grid with the progress bar on top, always occupying 100% width, and each overview objective listed below it, varying in column/row behavior depending on window size.
• The popout should probably have a few formatting settings, either selected prior to the creation of the box, or altered via a hover-to-reveal settings menu of some sort. These settings would contain things like font size, specify exact window dimensions, forced stacking behavior, toggle divider lines, changing the code associated with the window, and background/text color/font.
• The background color is a key feature because changing it to green allows for green screening out the background for better implementation into peoples' streaming layouts. I'm imagining this working sort of like livesplit as far as formatting options go.

Overall I think viewers being able to see how many of each objective have been completed on the actual stream layout improves viewer engagement both during the livestream, and especially for those watching afterward on youtube since they can't follow along in real time. Let me know if you have any other ideas to add to this and if you think it's viable with the way the site/spectator mode works.

[MeemawHustlin]

Now that I think about it, an "easy" version of implementing this could be to make a really stripped down copy of the checklist.html page that only has the progress in the topbar, and only the overview in the body. I'd have to update a lot of cellgenerator js to have extra null checks on things it modifies normally. The settings for background color and whatnot could be link params that get read in by a script that exists only on this popout page.