Wheel of Fortune: Building My First Ruby App
By: Jessica Bradham
Tags: Flatiron School, Learn To Code, Wheel Of Fortune, Web Development, Women In Tech

Wheel of Fortune Banner Logo

Go big or go home right? When I started the bootcamp prep program for Flatiron in early September, I did their mini Javascript, and Ruby programs. Since my cohort didn’t start until mid October, I decided to practice by building a Wheel of Fortune game in Repl. Looking at it today, I can see everything I did wrong. So when I came to the end of Phase 1 in my cohort, with the opportunity to build a command line application in Ruby that utilized an API, I decided to go further than just going through an API. I rebuilt Wheel of Fortune.

I remember thinking. “I already built it once. How hard could it be to build it again?”

“How hard could it be?” Always famous last words.

The answer was ‘very hard’, you see my first app was technically object oriented but there was no separation of concerns and it relied entirely on if statements and iteration for problems that could’ve been solved much more efficiently. Everything was in one class. I don’t think I ended up reusing any of my old code.

So I had 3 major challenges to tackle in my project.

Including the API Remaking the project more efficiently As a designer I really wanted to make the project more beautiful, the constraints of a text based project were rankling me.

Including the API

The primary objective of the project was to utilize an API, so the very first thing I did was work on the API. I knew I could turn in the entire project if I had a working command line application that interacted with the API and returned results. The rest was all bonus. I selected Quote Garden as an easy to interact with API with a simple structure. I utilized net/http, and open-uri, and json to access the API, extract and parse the data. I set this up in a class of it’s own so I could pull quotes as needed.

A screenshot of an API getting taken in and parsed

Remaking the Project

This was challenging, I was taking a project that had been built in one class, and rebuilding it to be more efficient, and with separation of issues. One of the big challenges was rebuilding how I rendered my game board. I needed to take the quote and convert it to dashes so the player knew the format of the quote they were guessing, and how many letters they had remaining to guess. Every time a letter was guessed, the board needed to re-render with the letter they had guessed included. In my old version I handled the board like this. I used an array of excluded characters (which included punctuation) to check if each character was in that array, and if it wasn’t I popped a “-” into a temporary array, if it was, I placed the character into the temporary array, then I joined the temporary array I had made, and displayed that. Obviously this was a lot. It meant iterating through every letter each turn. And it made handling vowels and consonants very difficult (since you have to buy a vowel and spin for consonants).

The code I used to update my game board in my old Wheel of Fortune Application

When I went about rewriting this, I created a module that could be included in my CLI file. I used gsub then passed the quote solution, an array of remaining consonants, and an array of remaining vowels as arguments to the method and used the arguments in a regex with a case insensitive modifier. This allowed me to easily render the new puzzle board every turn with one line, using the same symbols I was using to track the players moves (so they couldn’t pick the same letter twice) which meant I didn’t need two different sets of information doing the similar jobs.

The refactored code I used to update my game board in my new Wheel of Fortune Application

Making it Pretty

The constraints of making a text based application were painful as a designer and I was really researching to see how I could add some great design to my application. My answer game in the form of Ruby Gems and ASCII banners.

ASCII banners

I started with ASCII banners and a few Ruby gems to help improve the formatting of my game. ASCII banners simply use text characters to build beautiful text banners. And gems like TTY-Prompt help make nicely formatted prompts. But I wanted to see if I could push it any further, and after hours of research I found a gem called Catpix. This lead me down a rabbit hole which included 4 Development dependencies, 2 Runtime dependencies, the need to upgrade Homebrew, installing a patch for one of the dependencies, and a custom modification to one of the links in one of the dependencies before I got Catpix working. Honestly, I wanted to give up at times. But the end result was WORTH IT.

The title banner of my Wheel of Fortune Application

Catpix works by taking an image, creating a text version of it using block characters (such as █), and then coloring them with an extended color palette. The gem does so much work it is a bit slow, so I am only using it once for the title image, but I’m extremely happy with the result.

Final Thoughts

I had said a few times, “I made it once before, how hard could it be?”

And there were honestly a few times I really thought I wasn’t going to be finished. I still have a few things I may go in and tweak, but at this point it’s all gold plating, and I’m currently extremely happy with what I’ve created.