shayypy / puck-buddy

A scorebug for NHL games (goals + shots), intended for display on a dedicated ~4" screen

nhl-scorebug

A scorebug for NHL games (goals + shots), intended for display on a dedicated ~4", 800x480px screen. This project also includes some typings for the NHL Stats API.

Manifesto & Features

Largely, this project exists because some networks feel it's unnecessary to provide shots in their scorebug, but I like looking at them. That is the crux, but some other fun addendums include:

• Portable & pretty live data intended for viewing at a distance (e.g. at some kind of hockey party where you don't want to show all the games but you do want to show the scores?)
• Nifty web interface to select games (designed for touchscreens)
• Companion page for mobile phones to select a game from your sofa

Screenshots

I do not provide a public instance of this project (you should self-host if you wish to use it), so here are some screenshots.

"SET UP" is a button that leads to the linking page for mobile/controller devices.

The above shows game ID 2022020001. In the event that both teams' scores are the same (during a game), neither box is highlighted.

The newer Safari design (with the address bar at the bottom) obscures the "Linked to [...]" bar, but the app still works fine without it. Pictured is Firefox on iOS 15. "TV" is the DEVICE_NAME of my scorebug device.

Self-hosting

This section will not be too in-depth but it should be sufficient especially if you have done something like this before. If you're having trouble, feel free to reach out to me (click the "holler" button).

1. Install Node.js & Redis

   • Go ahead and start your Redis server if necessary so you don't forget (see above link).

2. Install Yarn

   • NPM should be fine, but I use Yarn.

3. Clone this repository into a directory on your machine (git clone https://github.com/shayypy/nhl-scorebug - this will clone into a new folder named nhl-scorebug)

4. CD into the folder you created. Run yarn to install dependences (or npm i)

5. Create a new file named .env. Fill it with the following keys (separated by line breaks):

   • REDIS_URI=redis://... - URI to your Redis server (like redis://user:password@host:port/dbnum)
   • (optional) COOKIE_SECRET=anything - a secret to sign the link cookie
   • (optional) DEVICE_NAME=anything - the name that clients will see when they link to your scorebug

6. Start the server (yarn start or npm run start - this will build and start the server and put its address in the terminal)

7. Open the latter address (the non-localhost one) on your "host" machine. This is the machine that will be displaying the scores.

   • Users (you and your friends) are now able to visit the URL shown by your scorebug (if they are on the same network) in order to link their phones and control the scorebug remotely.

8. Profit

Contributing

This project ideally does not need much maintenance outside of style updates and bug fixes. You can only fit so much information on a 4" screen while sitting across the room from it. Nevertheless, if you feel this project can be improved, feel free to create a pull request.

See Also

If you like watching hockey, check out Jerso!