search

breadweb / extralife-helper

The Extra Life Helper is a web app that can be used by Extra Life participants and teams to display their fundraising progress. Works in OBS and any modern browser. Features donation alerts, an event countdown timer, a timer for hours played, and multiple themes and display options.
https://breadweb.net/extralife-helper/
MIT License
27 stars 17 forks source link

Support other aspect ratios #16

Closed ryandesign closed 8 months ago

ryandesign commented 2 years ago

Helper appears to be designed for a fixed aspect ratio of 12:5 (WIDTH_ORIGINAL = 264, HEIGHT_ORIGINAL = 110). That can be fine if it's going to be inserted as a small element of a larger scene, but I was looking to use Helper to be the sole content on a standard 16:9 HDTV screen. I tried increasing HEIGHT_ORIGINAL, which did increase the height of the background rectangle, but the content within the rectangle did not move so it appeared to be aligned to the top which wasn't very pleasing. Perhaps a simple solution could be that the content would be centered vertically within the available space, as it already appears to be centered horizontally.

breadweb commented 1 year ago

Thanks for the feedback! I can take a look at this as well. 👍

ryandesign commented 1 year ago

A friend of mine led a playthrough of Twilight Imperium at a local board game cafe as a precursor to his Extra Life livestream this year. We had Extra Life Helper on a TV in the room to inform onlookers about the event and to keep the players motivated by donations.

fullscreen

Donors could purchase opportunities to influence the game by forcing a die to be rerolled or compelling a faction to vote for a particular outcome.

donation

I had to adjust the positioning of each text element in helper.js to recenter it on its new 16:9 canvas. I also replaced the logo svg with one with more information about the event and how to donate, and here too I had to adjust the script to account for the different dimensions and aspect ratio of the new svg. If the hardcoded positions and sizes could be replaced with percentages, and if the svg were placed and sized based on the svg's actual size, that would make such customization easier.

breadweb commented 1 year ago

Thanks for sharing how your friend used the Helper! It always makes me very happy to hear how Extra Lifers are using it to assist with their fundraising efforts. It gets me excited about working on it again.

Yep, the implementation of the Helper is very, very old. Embarrassingly old and using an unnecessary vector library for layout and animation. I've been wanting to rebuild it for a while now using a simple responsive layout and CSS animation that would work for any size and aspect ratio.

breadweb commented 8 months ago

Closing this as I am currently re-writing the Extra Life Helper from scratch and will be ensuring that the layout is responsive.