Why Would I Build This ?
If you’re a football fan then you might already know about the term “silly season”. If you haven’t heard of that term before it generally refers to the time of the year when news stories “become less serious and more frivolous”, and in a footballing context refers to the off-season when rumours run rampant about who a team might sign or part ways with.
Depth Chart was created as a solution to my problem of making lists of players of who my local football team signed, grouped by the player’s position, to fuel conversations about who the team should/shouldn’t try to sign or where they still needed to add depth.
Originally Depth Chart was written in React because I wanted to learn and practice with the technology. After a couple years I wanted to revisit the application using Sveltekit and add some improvements to the app that have been suggested to me by users and fix the state management that was a mess.
I chose to rebuild the app in Sveltekit over updating the React project because I liked the look of Svelte more than React, and in use, prefer coding in Svelte much more than in React.
About Depth Chart
Depth Chart lets you choose a formation to track which will determines the layout of the positional boxes and the threshold values for what is considered “enough depth” in the position. In some cases where there are 2 of the same position I combined the boxes into 1 to make it easier to work with. Centreback and Centremid are 2 examples of this. All the saved information is stored locally and can be easily cleared with the “Clear All Players” button.
Formations & Positions
There are positional boxes that are arranged based on the selected formation and signify the different positions that make up that formation (striker, winger, midfielder, etc).
The colour of the header bar for each position box changes as you add or remove players. A player can be added to multiple positions and when the “X” is clicked on a player they are removed from the position box where the “X” was clicked.
The position box header colours have the following meanings:
- Red: not enough players for a starting line up
- Yellow: enough players for a starting line up but more depth needed
- Green: enough depth in this position
”Enough depth” is simply defined as 2 players in a specific position, a starter and 1 depth. For the positions that have been combined (ex: CB) “enough depth” will be 2 * (number of players needed in this box for a starting lineup). So in a 4231 “enough depth” for the centrebacks would be 4 players.
The formations currently supported are:
- 343
- 351
- 4231
- 424
- 442
- 433
- 523
- 532
Data Storage
All data is saved to local storage of the browser. This means your line up will be there when you come back as long as you use the same browser (and don’t clear your caches).