Making a Card Game in JS, pt. 2 - The Surprises
Tags: javascript, games
Published: 2017-05-11 20:02:20

---
title: Making a Card Game in JS, pt. 2 - The Surprises
published: true
description: In which all goes wrong...
tags: javascript, games
---

This is the second part of my series on creating a card game based on <a href="https://matthewlowes.com/games/">Dungeon Solitaire</a> by Matthew Lowes. You can find the first part of this series <a href="https://andrewscripts.wordpress.com/2017/03/16/how-to-make-a-card-game-in-javascript-part-1/">here</a>.
<h2>The Surprises</h2>
Since my first post in this series, I ran into a very strange occurrence of events which led to the setup I had been working with falling apart to the point that I could no longer use it. As such, this post is going to focus briefly on some of the backend infrastructure changes I've made along the way.
<h2>In the Beginning, there was a Glitch, and it was Good</h2>
From the very beginning, I had envisioned this game being a Single-Page Application (SPA). There's nothing about this game that will require being backed by a database, nor is there any calculation so complex it can't be handled by the front-end. Knowing these things, I decided to start this app in <a href="https://glitch.com/about/">Glitch</a>, an online IDE of sorts that allows you to code in the browser. While there are many things that make Glitch awesome, what I like best is the live-reloading combined with auto-save, so you instantly get an online, up-to-date app that you can test as soon as you write a line of code. (Remixing someone else's app so you don't have to do all of the boilerplate yourself is also really really nice.)

This was a fine setup until I ran into two issues which have more to do with me than they do with Glitch itself. The first was intermittent saving issues due to a spotty internet connection. Word to the wise: never do anythingÂ critical online over public Wi-Fi (looking at you Panera). This was tolerable until the time I lost 20+ minutes worth of work to it.

The second issue was ES6/ES2015 support. I wanted this app to be as cutting-edge as plain JS can get, soÂ I wanted to make use of all of the bells and whistles of ES2015. Glitch's built-in ES2015 support is limited to whatever Node supports, which meant that while most things worked, I couldn't make use of <code>import</code> or <code>export</code> statements to make my classes modular (this was way back in the time before Node added module support). While there are workarounds to this, I decided if I was going to go to all that trouble I would probably be happier just running it all locally.
<h2>CodeKit is It - Until I Break It</h2>
My favorite tool for running local projects is <a href="https://codekitapp.com/">CodeKit</a>. It's one of the easiest-to-use tools for handling all of the finicky backend server stuff and preprocessors that are annoying to configure and set up. Think of it like a GUI version of Grunt or Gulp. Usually, it works great. But because I can't leave well enough alone, I tried to mess with one too many settings while trying to get the import/export keywords to work and ended up breaking something bad enough that I couldn't get it to work anymore. Again, I'm sure this is another PEBKAC error, but I decided again that if I'm going to go to all of the trouble to try and fix what I did, I might as well bite the bullet and start over entirely with a hand-coded task-runner setup.
<h2><b>A More Modern Setup</b></h2>
Because I almost never start things from scratch well, I decided to look up tutorials on what others recommend. I found <a href="https://css-tricks.com/modern-javascript-ancient-web-developers/" target="_blank" rel="noopener noreferrer">this article from Gina Trapani</a>Â whichÂ echoed a lot of frustrations us web devs have over the moving-target which is JS development these days. That article led to <a href="https://github.com/verekia/js-stack-from-scratch">this extensive guide</a>Â fromÂ Jonathan Verrecchia (works at Yelp), which I followed as closely as I could.

The one step that blew me away was enabling Airbnb's styleguide on my code via ESLint. I consider myself a pretty goodÂ developer, soÂ I was shocked by how much sloppiness I had in my code.
<h2>All's Well That Ends...</h2>
Okay, so now I'm back on track. NEXT time I'll get back to the actual code at hand!