Don't Eat the Onion!

Sat Jul 06 2019

My most recent project is Don't Eat the Onion, a subreddit guessing game. I pick random submissions from two different subreddits and have the user ascertain their subreddit of origin. Users can play the default mode, which picks submissions from /r/theonion or /r/nottheonion, the former's nonfictional counterpart; alternatively, users can input two subreddits of their choosing as a custom game.

Like this blog, the entire app is written in JavaScript on the front end and JavaScript on the back end. On my Express webserver, I'm using SnooWrap to facilitate contact with the official Reddit API. Once initialized, Snoowrap is ready to connect to Reddit. When a user loads submissions in either game mode, my web server receives a request from the client-side JavaScript; my web server returns a JSON packet with the requested information. Using my server as a middleman between the Reddit API and the client allows me to hide my credentials and preserve the integrity of the request; in other words, I'm asking Reddit only for what I've permitted in my code, which is unreachable. Building a web server to export data to my client as a sort of middleman rather than using a web server to simply build pages before they're rendered was a new concept for me, and I think this ability will make it easier for me to build applications that utilize external data sources.

The data that Reddit provides to my server is first iterated over by one of my functions, which assigns each index a unique number; indeed, the joshNumber is a visible property in the JSON that eventually reaches the client. I give each entry a joshNumber to easily randomize the sequence of this array so that the user never plays the game in the same exact order as before. Excluding the joshNumber, the same logic that handles my submission retrieval is essentially copied in my code that handles my top comment retrieval, although that function loops over every comment in a particular submission until it can find the highest-upvoted comment.

The code that reaches the client is straightforward; so straightforward, in fact, that you can read it in the page's source. Building the client took more time than the server because I was conceptualizing the program as a giant do-while loop instead of embracing the event-driven nature of JavaScript; now, every click simply calls a series of functions. I use AJAX to request and render all outside data from Reddit, thereby allowing the rest of the page to function while everything is loading. Speaking of loading, I actually use a spinner to make the page all the more responsive. I added the shop feature late in development to make my app a little more complex; there was originally a "skip" item that sold for 15 gold until I realized how silly it was in a game with only two options.

Comments