Overview
This page is a scoreboard for the Over/Under League, a fantasy basketball game I've been running with my friends for a couple years. Since the rules of this game are different from the typical fantasy basketball you'll find on ESPN or other sites, I needed to create my own utilities to run the league. The scoreboard below is a snapshot from midway through the 2020/2021 season (although actually, when retesting the web scraping script, the current January 17th 2022 standings were brought in, so this is a bizarro scoreboard showing the players/picks from 2020/2021 with the following year's team stats).

Game rules:
In typical fantasy basketball, participants draft NBA players and score based on the stats those players accumulate. In the Over/Under League, instead of drafting players you draft teams. Every year before the NBA season starts, various oddsmakers will release each team's expected win total for the season. Players can draft the "under" or "over" for NBA teams' expected win totals for the upcoming season. At the end of the season, players earn points according to how correct they were. If a team beats its expected win total, the player who drafted that team's Over will earn points equal to the overage. The player who picked the Under will lose points equal to the overage. Conversely, if a team falls short of its expected wins, the player who picked that team's Under will get points equal to the difference, while the player who picked that team's Over will lose points. Essentially: predict which teams will be better (or worse) than expected, and you'll come out on top.

Development:
The scoreboard below is an embedded Google Sheet. ImportHTML and ImportXML functions were used to pull in the current NBA standings to gather wins/losses (as well as team hex color codes) into the Sheet. A simple Google Script refreshes the imports daily. The Sheet formats the imported data, organizes it according to which player picked which team, computes projections, and then ranks players by projected score. An additional script is used to color the scoreboard page according to team colors. Finally, this webpage displays a snippet of the Sheet inside an iframe.

UI:
It was important to make this page with the needs of the players in mind. This is a super low-maintenance casual form of fantasy basketball, so a mobile-friendly layout was the goal: portrait orientation, and only one tab.

Issues/Lessons:
Using Google Sheets for this project was great in some senses and not so great in others. Embedding the Sheet into an HTML page had some formatting hiccups (scroll-bars, things not looking quite the same as they do on Sheets, etc). By using Sheets I was able to iterate on the "database" as well as the visual design simultaneously. This had its advantages, but in the future I might decouple the data and the display by opting for a standalone database and just use front-end web-dev tools for the visuals. This would allow me to bypass some of the annoying automatic features that Sheets comes with. Importing the NBA standings every day using ImportHTML/ImportXML is a fragile implementation in that the format of the site I'm importing from could change at any time. A check/alert system could be added to the import scripts to prevent incompatibly formatted scraped data from affecting the Sheet.