Game Picker 9000

The Game Picker 9000 is a Node.js app with Express that queries the Steam Web API. It was designed to solve two problems:

1. It’s hard to pick a new game to play when your backlog is over 100 games deep.
2. I don’t get to do a lot of server-side fetching and routing in my day job.

Since I’m already familiar with JavaScript, Node.js was the logical choice to bridge the gap from front-end to back-end.

Game Picker Concept

The Game Picker 9000 consists of an input field that takes a user’s Steam ID and then pings the Steam Web API to return a random game from their library. It also spits out a list of all their other games for good measure. If you don’t like the initial random selection, you can hit the “Reshuffle” button to swap it for another. I also added some instructions and a dirt simple animated “Loading…” message just to grease the UX a little.

Development Hurdles

Game Picker 9000 was not a Node.js project from the get-go. I built most of it client-side initially using fetch API to grab a list of games from a local JSON file. I wasn’t satisfied with having to manually copy the games out of my Steam account and convert them to JSON though, so I tweaked it to ping the Steam Web API and got hit with a big fat CORS error. Turns out Steam didn’t want to send data to any old client-side request… Duh.

The request had to come from a server with valid CORS headers. After stumbling on this nifty video by Fireship, the single-line Express solution was singing to me, so I decided to convert my code to a Node.js project. Many minutes of Net Ninja later, I had a little Node.js server setup pulling user data from the Steam API and spitting it back out in my own instance for my client-side script to play with.

Developing Game Picker Further

I have some more ideas for this setup. The Steam Web API spits out all kinds of user data, so I’ll probably end up cloning it out into a more comprehensive application. Some buddies from work suggested I add an option to filter out games that’ve already been played. Right now it just grabs everything in your library. It shouldn’t be too hard to add in a simple conditional based on the play time of each game. Another nifty feature would be for it to take a handle instead of the ID number. No one knows their Steam ID off the top of their head and it’s a pain to have to look it up.

Known Bugs

• If you hit Reshuffle too many times and too quickly it chokes out and doesn’t work anymore unless you refresh the browser.
• NEW – 11/16/21 – The Game listing doesn’t clear out when you toggle the played filter. So, if you submit with the box checked and then submit again with the box unchecked, you get both played and un-played games in the listing. Browser refresh is required before the second submit. FIXED 1/11/22.

UPDATE – 9/2/21

• Added a playtime filter that excludes games you’ve already played for more than two hours.
• Added playtime in hours to each returned game in the total listing.

UPDATE – 9/15/21

• Added the player name to the intro text above the game selection.
• Repositioned the loading animation for aesthetic clarity.

UPDATE – 1/11/22

• Fixed the game listing bug by adding a line to the generateList function that clears the output container on each submission.