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 it’s 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. It’s rare, but 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.
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.