Concentration/Angular

by

During my job search in 2014, I dusted off my old Concentration game, and polished it up, and came up with a nice version with spinning trilons. I wrote it in Javascript and jQuery, and it helped me get the appScatter job.

A couple of years ago, while I was interviewing for Andela, Tom offhandedly asked me if I had any code samples they could look at. I said it was old, but I’d send them the link to the Concentration game repo. When I looked at the repo, I cringed — front end development has changed a lot in the past couple of years, and the Javascript code was very old school. A promise is a promise, though, so I sent off the link to the repo, and asked them not to look at the syntax itself, but the code organization and program logic. I was really afraid I’d shot myself in the foot.

I, and the rest of my team were laid off at the beginning of September, and I was determined not to repeat the mistake, so I decided to re-implement the game in Angular, to demonstrate what I can do. Along the way, I also rectified the major issues with the original:

  • The original was not responsive, and not really playable on mobile. Although I planned to, I never did fix this on the original, because I never could figure out how to preserve the look of the scoreboard and figure out a place to put it. In this version, I solved it by making the scoreboards variable height, and stacking them vertically underneath the puzzle, on mobile.
  • The way the original code was organized, I could never solve what I called the “Double-wild” problem. It’s rare, but possible to match the two Wild Cards with each other. On the show, this is handled by letting the player pick two more numbers for two more prizes. Although rare, I ran into this an annoying number of times with the original version, which treated the Wild Cards as just another prize. The new version now handles this during the number-click handler.
  • It’s also possible for a player to match the same prize twice via Wild Cards. On the show, this was handled by showing a checkmark next to the prize if two had been won; on the original version, I simply showed two copies of the prize in the scoreboard. The scoreboard now recognizes duplicates.
  • The original version did not recognize retina screens. The new version does; I’ve re-created the puzzles, and now there is a high res version of each puzzle. There are also two new puzzles.
  • There were no unit tests on the original, this version has complete coverage.
  • I also added an animation as prizes are added to the scoreboard that pleases me no end.

At first glance, the new version looks the same as its predecessor, but it’s very much changed. I did start with the original styles and basic HTML, but the code layout is very different. The original consists of one HTML file, one stylesheet, and one Javascript file. The new version has one main component, the ConcentrationComponent, which handles the work of randomizing the puzzles and prizes, handling clicks on numbers, and recognizing and handling matches.

I’ve offloaded other parts of the game to subcomponents, though. There is one component to handle entering the player names, or choosing to play single handed, another to lay out the solution form, a dedicated component for the trilons that comprise the game board, and a separate component for the scoreboard, which handles the complexities of showing the prizes won and dealing with Takes and Forfeits.

It’s been interesting comparing the differences in approaches between the two versions. A lot of the game board in the original was generated in code, via direct DOM (Document Object Model) accesses. In this version I created HTML templates, and let Angular deal with creating multiple trilons, or iterating over the set of prizes in the score board.

One problem I ran into when I pushed the game up to the website was that the links to the images didn’t work. The original is in a subfolder of the site. I was able to get the new game working by changing the base href of the html file, but the images still didn’t work. I’ll have to figure this out, but I decided to set up a subdomain, which is probably easier to remember anyway. You can find the game at http://concentration.tedohara.net/ Give it a whirl, and if you’re so inclined, take a look at the code.