Andrew Scripts

Musings about Programming and Programmer Life-Skills

Making a Card Game in JS, pt. 2 – The Surprises

This is the second part of my series on creating a card game based on Dungeon Solitaire by Matthew Lowes. You can find the first part of this series here.

The Surprises

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.

In the Beginning, there was a Glitch, and it was Good

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 Glitch, 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 import or export 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.

CodeKit is It – Until I Break It

My favorite tool for running local projects is CodeKit. 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.

A More Modern Setup

Because I almost never start things from scratch well, I decided to look up tutorials on what others recommend. I found this article from Gina Trapani which echoed a lot of frustrations us web devs have over the moving-target which is JS development these days. That article led to this extensive guide 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.

All’s Well That Ends…

Okay, so now I’m back on track. NEXT time I’ll get back to the actual code at hand!

Making a Card Game in JavaScript, pt 1 – The Setup

I haven’t written here in a long, long time, but I think now’s as good a time as any to get back into it. I recently found myself looking for a new job; as part of the search, I created a portfolio website for myself here. But I found myself with a problem: I had no non-proprietary code I could show off on my portfolio. I decided I would make a game, one which I’ve been wanting to make for some time.

I’ve been playing this solitaire card game for awhile now called Dungeon Solitaire by Matthew Lowes. The game simulates deep diving into a tomb searching for the treasures buried there along with four kings. What I’ve always loved about this patience-style game is that it has simple-to-learn rules, uses a standard deck of cards so it can be played anywhere, and yet brings a rich story element to what would otherwise be ‘just another solitaire game’.

The Setup

I made the choice early on to create this game using plain, pure, vanilla JavaScript. I’m a front-end engineer by trade, so I figure making this game in plain JS would give me the broadest appeal to potential employers. I’ve used and liked Ember and React, and I’ve even tried Angular, but I have always felt MVC frameworks often are overkill for most applications.

The first iteration of this game is going to be text-based, with few or no graphics. A proof-of-concept. One of the first things I did was create a helper for DOM manipulation:

function getById(_id) {
  return document.getElementById(_id)
}

I could have made an alias to document.querySelectorAll(), but my general preference is to use IDs for JavaScript hooks, so if I know I’m going to have a unique ID for the majority of actions, then there’s no reason not to use getElementById.

The first object type I created was a Card object since this is a card game. JavaScript prior to ES6/ES2015 didn’t have a real ‘class’ system, so my first instinct was to create a plain object, especially since the Card object was going to be a very simple one. Here’s how it looked at first:

var Card = function(data) {
  this.rank = data.rank;
  this.suit = data.suit;
  this.value = data.value;
  this.name = this.rank + " of " + this.suit;
}

This would have been fine, of course, but as I refactored some things as I went I reconfigured it into a class. Here’s what it looks like now:

class Card {
  constructor(data) {
    this.rank = data.rank
    this.value = data.value
    this.suit = data.suit
    this.name = this.rank + " of " + this.suit
    this.graphic = '' // TODO
  }

  listItem() {
    var el = document.createElement('li')
    el.innerText = this.name
    return el
  }
}

As you can see, not very different, but the class syntax does make some of it a little bit simpler to read. Also, I dropped the semicolons at the end of every line; again, for readability.

The second thing I added was a listItem() method. This gives me a quick and easy way to display this card in the DOM, similar to the convenience property for Card.name.

That’s it for this post. Next time, I’ll start looking at the Game object and the Level object, as well as give you a look into the HTML structure of the app.

If You Commit to Nothing, You’ll Be Distracted by Everything: Lessons from the “Marathon Monks”

If You Commit to Nothing, You’ll Be Distracted by Everything: Lessons from the “Marathon Monks”

Here’s the biggest thing I took away from this article:

If something is important to you, complete it. If not, kill it.

As James Clear, the author, comments, we often have many half-finished projects sitting in the backlog of our minds. Too much “soul clutter” can lead to exhaustion. If you can complete them now, do so. If you can’t, but you also can’t bring yourself to kill them, write out somewhere all of those ideas and half-planned or half-finished things that you really do want to do, and get them out of your head. Take a deep breath, and practice single-tasking. You can’t be 100% focused on something if you’ve got more than one ‘something’ in your head. 😉

Pixar’s 22 Rules of Storytelling

Pixar’s 22 Rules of Storytelling

Such great stuff. My favorite is #14 – Why must you tell THIS story? What’s the belief burning within you that your story feeds off of? That’s the heart of it.

I’ve been working on a few novels for years, and these 22 rules challenge so much of my work. The novel I have gotten the farthest on (in terms of getting it close to completion) is severely struggling with rule 14 here. My answer so far as to why I must tell THIS story? “Because, it sounds like a fun story!”

Is that enough?

1:1 criticism ratio

1:1 criticism ratio

“Think before you speak” meets “always be humble”. I’m not a huge fan of bashing, whether towards yourself or others, but there’s definitely something to remembering that everyone’s human, and we all make mistakes, and we – ourselves – make just as many or more mistakes than the next guy.

Keep this in mind any time you have a criticism. Is it really a big deal? Is it really a mistake that needs pointing out? If so, is it really necessary to berate the other person? Or is there a gentler way of saying, “Hey, don’t know if you noticed this…”?

When I worked for Pizza Hut, the first place that made me a manager (shift manager, but management all the same), one of the first things they trained me on was how to humanely deal with issues. Remember that not all mistakes are intentional, and that most people *want* to know how to do things correctly.

An Alternative to To-Do Lists for Getting Tasks Done | World of Psychology

An Alternative to To-Do Lists for Getting Tasks Done | World of Psychology.

Instead of thinking about what you should do or even what you need to do, think about what you could do.

Zappos CEO Tony Hsieh asks these interview questions to get people off their script

Zappos CEO Tony Hsieh asks these interview questions to get people off their script

Whether or not you’re looking to hire soon, or interview for a job, there are some very deep, thought-provoking questions here that everyone should ask themselves.

Pixar’s 22 Rules of Storytelling

Pixar’s 22 Rules of Storytelling

Same great principles here, useful for general business thinking too.

Anxiety

Anxiety

Have you ever thought, “maybe anxiety is normal”? What about… healthy?

Use verbose naming in JavaScript – Oliver.prototype.blog

Use verbose naming in JavaScript – Oliver.prototype.blog.

Hallelujah!

%d bloggers like this: