Login

**esilverm** · 09-29-2020, 12:11 PM

Silver’s SHL Index Blog Episode 1

Hi. I need money on the site and have been working on this for a season by now so why not capitalize on it. I could stream but I’d rather just write an essay about it and hope that people will actually read it but instead know wholeheartedly that they will just look at my screenshots and demo gifs (nothing wrong with that because I wouldn’t read my own stuff).

Ok let’s get on with it.

Introduction

So I’ve wanted to rebuild the SHL index all the way since SimonT days (that was 4 seasons ago???) and had plans to make a site with a better user interface with way more statistics. This led to me creating ungodly SQL table schema writeups. This is literally something I sent to @LukeTD on Discord nearly a year ago (October 9th 2019) about making a way to store player game data from the sim play by plays.

Quote:ok so i got a list of the player game data we can collect from the sim. it is basically everything that [Aaron Wilson] collects for his advanced stats but we can do it with a bit more depth

goals, primary assists, secondary assists, shots made, shots for on ice, shots against on ice, +/-, hits made, hits taken, shots blocked, minutes played, power play goals, power play primary assists, power play secondary assists, power play shots, power play minutes, penalty kill goals, penalty kill primary assists, penalty kill secondary assists, penalty kill shots, penalty kill minutes, steals, turnovers, icings, posts hit, pass attempts, pass completions

this would be for each period and over time
so we will have a shit ton of columns but it will let us have more advanced stats like player performance per period and shit

i honestly might as well make it a per minute thing

Honestly, it could have worked but the sheer amount of data would be so hard to parse. Honestly, I don’t know how we plan on doing box scores yet.

Anyway, we decided to move to FHM eventually and I had plans on making an index from scratch since we didn’t have anything. At the same time, I got really busy, so I went inactive. Eventually, an index was made using php and is the one we use now. It is good. It delivers the data and is usable. Is it great? No, but when we only had so much time to prepare what else could we ask for?

Well now that I am back, I have been working on the index for a season. Things have been moving relatively slowly just until recently.

Part one: The Planning

Back when I came back, I had several ideas on how to go about building the index. I would be using Next.js (a React.js framework) to make the site and would do most of the styling myself. Pretty straightforward, right? Wrong. I can’t really do much designing without having any data. The database was in a very odd format where data was separated into seasons and each league’s data was in its own database. When I set up a database connection, I would rather have all my data be in one source rather than contained in separate sources. Luckily, we have @grok, database wizard. Grok and I (but mostly grok) worked together to create a plan on how to port all these databases into a single database with all the tables combined together such that I can query by league and season. In other words, we made a much better way to handle the data.

Awesome! Now we have the data all together. It isn’t a constant feed yet but having that singular unified data source makes life a whole lot easier. Now, this is great but in practice you don’t want to tell your client-facing code to directly access the database. You need a middleman to handle that connection. That middleman is the API. At the beginning of the project that was the job of @caltroit_red_flames. He basically wrote the initial API in Nodejs to query the database and send that data to the frontend. This changed later on but we will discuss it later.

Know how I was talking about the box score data earlier? With FHM6, handling that is a pain. Not only do we need to be able to know what game logs correspond to individual games, we also need to parse those logs to get data. The main problem with this is that these logs are not as easy to parse as SimonT’s logs. They rely on a structured data file that contains strings that the sim uses to generate the text when in-game events happen. Some of these events don’t even say who does what. We managed to find this file and modified it to make parsing this data easier. I don’t know what skeleton’s username is, but he has been working on a parse for these files to generate that data. We aren’t done with it but have made great progress so far.

Finally, once all these aspects had been worked out, we were ready to start working.

Part dos: The Logos

From now on I’ll just focus on my part. There will be a lot of rambling so bear with me. When I started gathering resources for the site such as team logos and league logos, I found that many of these images were low quality and overall a pain to work with. Because of this I decided to recreate all the logos in SVG format. If you would like to use my SVG logos please visit this link.

I used Adobe Illustrator’s image trace to trace every image and convert it to SVG. Then I took the time and tried to clean up all the artifacts left over from the conversion. This was a pain for some files. For example the Calgary Dragons logo.

[Image: AXvoLSF.png]

I can count the amount of pixels in that image on one hand. This dragons logo needed work and has been abused by compression algorithms over the years. I spent like 2 hours cleaning up the file and removing all the artifacts from the jpeg hell that is the image above and ended up with this image. I highly recommend opening it up in another tab. It is such a big image that you can zoom in and it still looks good.

[Image: Calgary_upgrade.png]

Speaking of zooming in and still looking good, that is exactly why I chose SVG. SVG stands for scalable vector graphics. It is composed of vectors instead of pixels so no matter how far you zoom in, it will scale properly and still look clear. Since we will be using these images repeatedly as icons in multiple sizes, this was the ideal image format.

Part 3: Actually building the site

Finally, we get to the interesting part. At least the pictures will be interesting. Anyway, for research on design I took a look at many different sports sites. The one that just felt right, was the NHL site. Because of this I decided to “borrow” a few ideas from the NHL website to make it user friendly and nice to use. However, I will get to those things later. Let’s start off with our homepage

[Image: ts30yEH.png]

This part was tough to design. I wanted to make a unified homepage where you could easily access any of the leagues. This has a similar feel to things like, “choose an account” on Netflix or Disney+. It is a decent UI and is subject to change in the future.

Ok now let’s get to what we have so far with the design. The answer for this is literally only 2 parts of the site: the header, and the standings table.

Let’s take a look at the header.

[Image: QhyHwHN.png]

First of all, let me state that the styling is all custom, the design is just borrowed. This is all my code. With that out of the way, this was inspired by the header of the NHL site. Since the database has info up to the finals of this past season, we can see the last few games of the finals. In practice, this header will show the last 4 in-game days and a look to the future with a list of games that are scheduled for the next in-game day. Writing this component was challenging. Honestly the easiest part was getting it to function properly since there was and existing library that I could use to make it work. The hard part was adapting the data to properly display it, along with handling resources in a manageable way. Since I wanted to reduce load times by including the logos as sprites on the page rather than links to their files I had to use dynamic imports to load the images while the data is loading from our api. However, once this is loaded it is cached so the user doesn’t experience any problems with future page loads. That was a lot of big words what does it mean? In other words, I mean that the images only need to be loaded once on the site rather than once per game played. This has many benefits. It’s main drawback, however, is a larger initial load size.

[Image: CxkaR77.png]

Did I mention that the site is also mobile friendly?? Scrolling through games isn’t a pain on mobile and neither is navigation! This is big.

Ok I started writing this a different day so it is on another train of thought. So you know how Cal was working on the API, he got busy with ISFL stuff so I had to take it from him. I put together a whole bunch of endpoints that can be used (when the site is running) so people can make applications using the data from the sim! This is really exciting since it means that the bot will 100% be back in all its glory soon. When the site is done I’m going to be revamping the bot’s codebase and will be rewriting the code to make it run. I can’t wait to bring back the SHL scraper bot (now not a scraper anymore)!

Ok so now the final thing I have designed so far is the standings table. Even though it is designed, this is still a work in progress. As of writing this I am working on building it so it can switch between showing Conference, Division, and League totals!

[Image: LXo4yx6.png]

Here is a sneak peek of the standings table in all its glory (yes it has built in sorting with column and row hover highlighting. This is pretty much as accurate of a recreation of the NHL standings table as I can make in a day. I still have work to do but the outlook of the project is very exciting.

Part IV: What is next?

Alright now what are our next steps right now? Well we are not done yet. We still have a lot to do. Every day I come up with new data endpoints I need to put together. It is crazy how much work needs to be done to make this shit, and it isn’t my first time. I want this shit to look amazing, so nobody has to go through this hell after me. I estimate that the index will be done in a season or two so there will be a lot to look forward to.

For me, my next steps are the initialization of designing the team pages. I have a header (which I’ll show off in my next blog post if I decide to continue this). I have some really great ideas for how we will handle the team rosters and statistics.

Sorry for the brain dump and rambling, there will be more of this to come. If you have any ideas that you feel would be interesting, definitely reach out to me and I will consider them (if I think they are possible). Maybe next time I will actually try designing the stuff before I implement them so I can have things I can show off to y'all

Word count ~2150

EDIT: Here is a screenshot example of what the header bar looks like with a few more game days.

[Image: kpSQO8P.png]

EDIT 2: Made some modifications to the standings table and gave it some capabilities to handle the data loading time

[Image: 7758fa96fa569b3202994e6b83492ccf.gif]

[Image: 7758fa96fa569b3202994e6b83492ccf.gif]

Pass Forfeit (D) ● Player Profile
Kraken

Special thanks to Blitz, jhockey, Ragnarr, and sulo for the gorgeous sigs <3

[Image: DG0jZcS.png]

Sopath · 09-29-2020, 12:16 PM

That's actually pretty amazing. If it's realistic to do that would be nothing short of incredible! Using the site on mobile would be so much nicer.

*fishy* · 09-29-2020, 12:17 PM

This is incredible

@esilverm ily

***luke*** · 09-29-2020, 12:18 PM

I remember sitting in a lecture hall when you dmed me that a year ago lmao. Feels like 2 years ago

***Ace*** · 09-29-2020, 12:21 PM

This looks fucking amazing. I can't wait and I wish I had dev skills to help.

PremierBromanov · 09-29-2020, 12:21 PM

Great job, you deserve 50m for redoing the logos alone.

Have you considered using any styling libraries for react, like material-ui or anything like that?

**esilverm** · 09-29-2020, 12:25 PM

09-29-2020, 12:16 PMSopath Wrote: That's actually pretty amazing. If it's realistic to do that would be nothing short of incredible! Using the site on mobile would be so much nicer.

All the screenshots are from the actual production deployment. However, since the site isn't close to ready yet I'm not gonna share the link. I already said it in the media, but I want this shit to look as good as possible while also being usable on any device.

Pass Forfeit (D) ● Player Profile
Kraken

Special thanks to Blitz, jhockey, Ragnarr, and sulo for the gorgeous sigs <3

[Image: DG0jZcS.png]

Sopath · 09-29-2020, 12:26 PM

09-29-2020, 12:25 PMesilverm Wrote:
09-29-2020, 12:16 PMSopath Wrote: That's actually pretty amazing. If it's realistic to do that would be nothing short of incredible! Using the site on mobile would be so much nicer.

All the screenshots are from the actual production deployment. However, since the site isn't close to ready yet I'm not gonna share the link. I already said it in the media, but I want this shit to look as good as possible while also being usable on any device.

well it's looking fantastic so far!

***bluesfan55*** · 09-29-2020, 12:27 PM

@esilverm this looks fire my guy, keep up the outstanding work!

ty to @High Stick King @EvilAllBran and @Ragnar for the sigs

**esilverm** · 09-29-2020, 12:27 PM

09-29-2020, 12:21 PMPremierBromanov Wrote: Great job, you deserve 50m for redoing the logos alone.

Have you considered using any styling libraries for react, like material-ui or anything like that?

I considered it but I find them very limiting. I managed to make the table completely from scratch with react-table from tanstack. I like the experience of writing my own styles since it gives me a ton of freedom to make things as unique as possible. I really recommend using Styled Components. It is honestly my favorite css-in-js solution and makes so much sense.

Pass Forfeit (D) ● Player Profile
Kraken

Special thanks to Blitz, jhockey, Ragnarr, and sulo for the gorgeous sigs <3

[Image: DG0jZcS.png]

***Chevy*** · 09-29-2020, 12:28 PM

I had started doing something like this for the SMJHL using wordpress & the SportsPress plugin, then dropped it due to time.

This homebrew I'm sure will be 100% better!

JSS · 09-29-2020, 12:44 PM

this is so sick

*roastpuff* · 09-29-2020, 12:51 PM

This looks absolutely amazing! Great work!

Henrik · 09-29-2020, 01:00 PM

This is absolutely amazing..!!

***honkerrs*** · 09-29-2020, 01:07 PM

can't freakin wait. you deserve to never have to pay for training/equipment ever in your shl life once its a finished working product. appreciate the hard work

Navigation

Extra Menu

About us