<h1 class="text-3xl font-bold mb-2 font-elza ml-1 mt-3" id="On the Sideline">| On the Sideline</h1>

On The Sideline

<h1 class="text-3xl font-bold mb-2 font-elza ml-1 mt-3" id="Background">| Background</h1><hr>
<p class='text-md font-forma-mono m-2'>In late 2024, I had gotten involved with live streaming sports games at my high school. While our team had everything needed to pull off a simple live stream, We had no budget. However, we wanted to make our stream look more professional, and the first step was to get good looking graphics. While through my searches, I did find a lot of ways to almost make what I wanted, Nothing fully fit the bill. </p><p class='text-md font-forma-mono m-2'>As for the requirements, It needed to be platform agnostic as we didn't have a specific computer for the streams and would often have a mac for one stream and a PC for another. We also needed to have remote control for the scorebug since many of our locations didn't have the proper visability for scoreboards or needed someone entirely seprate to track the games score. Lastly, I wanted it to be easily customizable since we weren't sure what sports we would be streaming and might need different information shown based on the sport.</p><h1 class="text-3xl font-bold mb-2 font-elza ml-1 mt-3" id="The Solution">| The Solution</h1><hr>
<p class='text-md font-forma-mono m-2'>For this project, I chose to use what I knew best— Python and JS. The server would be built in <a href="https://fastapi.tiangolo.com/" class="text-blue-500 hover:text-blue-700 underline" target="_blank" rel="noopener noreferrer">FastAPI</a>, a python framework I was famillar with which had good enough performance. For the frontend, it would be built using HTML and JavaScript with Websockets to provide status updates and inital info. Originally, I had used websockets to send control signals but changed to using rest API calls to avoid parsing messages from websockets since I just had 1-2 varibles.</p><p class='text-md font-forma-mono m-2'><img src="./scorebug/diagram.png" alt="Diagram showing general archetecture of the scorebug system" /></p>

Scorebug

<h1 class="text-3xl font-bold mb-2 font-elza ml-1 mt-3" id="Why">| Why</h1><hr>
<p class='text-md font-forma-mono m-2'>Back in early 2022, I played a <strong>lot</strong> of <em>Valorant</em>. In the game, as any other free game would, there is skins. There is a daily store, where you can get almost any skin previously released for sale, and then a multi-week bundle based shop where new sets and limited editon items would be placed. After the bundles left, they would rotate into the daily item pool.
Often, I would be looking for a few specific skins in my daily shop, but I wouldn't be on every day or be able to check it. So when I discovered that <em>Valorant</em> just uses a REST API for pretty much everything in the game, I set out to build a way to check my daily store when I wasn't able to acess my computer to do so. </p><h1 class="text-3xl font-bold mb-2 font-elza ml-1 mt-3" id="The Setup">| The Setup</h1><hr>
<p class='text-md font-forma-mono m-2'>To begin, I needed to get a token, which was by far the most difficult part since I didn't (and still don't) understand SSO. To get the token, You need to send a username and password to their server. In response, you get a token. The main issues with this setup for logging in is that there isn't an secure obvious way to store credentials since you can't hash them. </p>