Play with your Game Collection

Hello folks, it has been over a month since the last status post and I wanted to make sure this place didn’t turn into a ghost town! The project is not abandoned – far from it, as a matter of fact. I bought a sick new dev laptop and, as fate would have it, it arrived on exactly the day that the shit hit the fan at work. We’re releasing a major project on Wednesday morning and the past two to three weeks have been all-hands-on-deck, working 10+ hours most days, including the weekends.

What that means is, until this site launches, Project Gameshelf is on a bit of a dev told. Luckily, that will turn around later this week, and I hope to be back working on it next week. I have been getting some messages regarding Gameshelf and I truly appreciate the interest.

At the moment, Gameshelf itself is in a very stable place. Currently it’s tied to the database and can save the shelves you’re working on, and allows configuration as for the orientation of each shelf as well as the arrangement of said shelves. It’s still got a lot of work to go, but high in priority is working on the look and feel of the site so it feels more “alive.”

Alongside these types of changes, there are some major-league features planned for the foreseeable future. It’s been an often-requested feature to allow adding connections to storefronts other than Steam, and while a Steam account will be a hard requirement to create a user account, tying in other services such as GOG will be a priority. Of course, a lot of research is needed here – so much of what is possible for Gameshelf is 100% dictated by the availability of open-source APIs from which to pull data. If GOG doesn’t allow developers to pull data, well, I’m out of luck there.

However, one of the biggest features of the site is in the pipeline – the ability to add absolutely any game manually, by simply searching for the title.

A full integration with the Internet Game Database API is planned, and you’ll not only be able to auto-add all of your digital games from Steam and (hopefully) other services, but you can of course add all of your other games manually. The idea here is to have a place to centralize all of your games and let you play and interact with your collection. The only way to achieve that 100% is to allow for manual game additions. IGDB will allow that to happen!

So that’s what’s going on right now. I’m eager to share more information about the progress as soon as I have it. Once I catch back up following the madness at work, expect to hear from me. Thanks for reading!

What a week it’s been! I’ve officially and completely lost all count of the hours spent on Gameshelf, but that’s probably because I’ve been focusing almost exclusively on backend stuff. What’s backend stuff exactly? Well, in layman’s terms, it’s all the fancy behind-the-scenes interactions that make the magic happen on the frontend. In short, “login with Steam” requires lots of fancy session footwork so that you can login and edit your own shelf, and somebody else can’t forge some browser data and take over your account.

Cause that wouldn’t be fun!

Login Sessions

This was a real pain in the ass to figure out. Somehow in my decade of professional web development, I’ve never run into the situation where I had to implement an OpenID “sign in with…” system. Getting an understanding of sessions took literal days and about 8 hours of frustrating work… and last night I ended up completely deleting it all and re-writing it from scratch.

When it comes to programming, and in particular learning a new language or concept, it’s very easy to fall into a trap where you just “want to see it working.” As a result, you get something that’s vaguely functionality, but you don’t bother to understand the why it works – just the fact that it does.

Back in the 90s and early 2000s the term script kiddie was fairly common when young programmers would get a hold of others’ code, paste chunks of code into a program, and call it their own. God, I miss the 90s.

Anyway! The login sessions are now rock-solid. I’m extremely happy to have gotten past this. It was a MASSIVE roadblock for me that almost toasted my motivation.

MongoDB Implementation

Ok, so I mentioned how login session management was a huge roadblock. Database implementation was the other roadblock.

I realized that I hadn’t directly interacted with a database in years – any time professionally, there’s been a layer of abstraction so that the developers next went straight to the source. That being said, I also never usedMongoDB, despite knowing of it for many years, but I was pleasantly surprised how nice it was to work with.

Part of this ease of use is due to the library I’m using, called Mongoose. It’s pretty much a standard but I was very happy with how quickly I was able to build data models and blast up some data. It’s a good time!

Enough of this Backend Stuff, What about Frontend?

Great question! I reached a huge milestone with the frontend development this week.

I found an incredible library called Muuri that’s everything I needed to make the Gameshelf interface happen, and more. It’s so well-built, in fact, that it actually tweaked the direction I want to take the look and feel of Gameshelf entirely. More on that at a later date, though.

This library supports dragging and dropping elements all over the page, which aligns them automagically and positions them in the most space-optimized way. It’s buttery smooth.

What I still need of course is a design of the shelf. The idea is that each shelf can be any size you want, much like “cube shelves” I believe they’re called. Much like the one below:

Muuri lets you do that. Keep in mind that this is just modeled out, this is far from the final appearance which will actually be a bookshelf. Imagine the borders between each cell being shelving on a bookshelf. There are so many little touches that need to go into this sort of thing to capture the look and feel I’m going for – this is merely the beginning.

Feature List

Aside from database and login, a few key features pertaining to the interface:

Dragging shelves to reposition

Dragging shelves vertically or horizontally to resize

Maximum/minimum sizing support during resizing

Toggle shelf rotation between horizontal/vertical

Vertically-stacked game boxes are now supported, rewritten from scratch so that rotational transforms are no longer used

Priority List for Next Week

Simply put, getting something together for the beta testers!

Draggable functionality between shelves. This is a huge one, obviously. If there’s nothing to test, what’s the point!?

Saving shelves to the database. Again, what’s the point if you can’t save your work?

Additional filters on Your Games, specifically filtering by playtime_2weeks. This way you can see the games you’re already more familiar with right away without having to search.

Again, if you’d like to apply to be a beta tester, I added to the requirements that you have a Github account. While not totally 100% required, it’d be much appreciated as that way there’s a better process for reporting bugs. Although, using the Feedback form is the preferred method, currently.

I came to the realization the other day that, while I’d love to spend the time right now building all the fun things on the site, I have to make sure the thing will work logistically first. In that sense, I mean that I need to get a data storage solution figured out.

Node.js plays very nicely with the database system MongoDB, and I’ll be needing to store a ton of data, as not to rely 100% on expensive queries to the Steam Web API.

Of course, before we can worry about storing any user game data, we need someone to own that data. In short, I need to build the whole user system first and foremost.

For the uninitiated, when you login to a web site using an account from another site (ex. “Sign in with Twitter”, “Sign in with Facebook”) what really happens behind the scenes is that website is making a new account for you that references your Facebook or Twitter (or in this case, Steam) account.

After you verify that you want to sign into a website using an account, like the image below, a secret token is passed back to that website, which is then associated with a user. This way, the website can maintain your data and give you an experience.

For Project Gameshelf, the data that will need to be stored has to do with your Games collection, the Shelves you create, and of course, Users to store your email and Steam ID.

This is a necessary part of the build process, and while it isn’t very much fun to be honest, once the User system is complete, I can begin setting up all of the data that the app needs to be intelligently pulled from the database when possible.

It seriously tested my patience this morning, but I will continue to work at it later!

Login with Steam

All accounts (initially) are created by first logging in with Steam. That is temporary, as you’ll eventually be able to sign up with just an email address, since Steam eventually will be not be required. The idea is that you sign in once, it makes you an account, and pulls in all of your games.

You need to have your Steam profile set to Public – if you don’t, you simply won’t see any. games pulled in, and the site is rather useless!

Other Features

Games pulled in and themes into PC game boxes using the Steam game logo.

Create Shelf functionality is a work in progress. Currently it creates a shelf, but I need to make it look nicer when it actually has games on it.

Deployment to Heroku working great, meaning beta testers can actually, ya know, access the site to test.

“Welcome User” section, which displays your Steam username, logo icon, total games owned, and how old your Steam account is.

Your Games shelf is functional.

Currently limited to displaying 100 games at a time for performance reasons.

Filtering by text.

Left/right scrolling works buttery smooth and has nice gradients so you know there are more games to scroll through.

Implementation of Vuex store for storing/getting/fetching/mutating data from Steam API.

Beta Test Results

Thanks to my awesome beta testers for Round 1, we found a pretty nice handful of bugs and improvements to make. I’m so glad I reached out early in the project because I was able to prioritize getting these little issues fixed. I honestly had no idea that people had so many Steam games. There were some bad performance issues if you had more than >300 games (one of the testers had over 1,500 which basically nuked the browser) – these have all been fixed.

Even better (for me, at least) is a big time improvement in server logging, so I can watch the data fly by and make sure nothing is overly taxing or causing issue.

Priority List for Next Week

Decide on a database solution. We need to store all of this data somewhere – Vuex is temporary (browser-session-wise), we need something permanent. Firebase seems to be what I may be looking for.

“Feel good” improvements. Adding some effects and little animations. This may sound trivial but it’s the life blood of the “fun” factor that makes users want to use a web app like this. It’s also a HUGE break from screwing around with databases.

Keeping week 2 light on the workload so I don’t burn myself out too fast.