Wednesday 29 April 2020

Social Justice League: A TeochewThunder Project

During the Circuit-breaker period introduced by the Singapore Government to combat the COVID-19 outbreak, many Singaporeans found themselves at a loss as they adjusted to a life without socializing, dine-in options and various other services. I had my own problems, which I won't go into here, but cabin fever wasn't one of them.

You see, I'm a programmer. And one thing about the introvert stereotype that's often applied to those of my ilk - there's a discomfiting amount of truth in it. I'm comfortable enough around people, but it's when I'm imposing my will upon a hapless machine to do my bidding that I'm truly at home. Suffice to say, being made to stay home didn't bother me nearly as much as most others.

The time spent staying home resulted in me catching up on an awful lot of code. And I completed projects, some of which I had started years prior to this.

Social Justice League

One of them was a browser-based game I had written in using jQuery - Social Justice League.

And yes, that name is a ripoff of the Justice League. But it's nothing like the comic or the movie. In fact, it plays more like a desktop version of Magic: The Gathering.

How did I get that idea?

Back in 2018, I was playing this really awesome card game. It's a mobile app, Stormbound. And that's where I derived most of my inspiration for gameplay. Each card needs a certain amount of points to play, and what card you play against is also a factor. Certain cards have certain attributes that can be incredibly powerful in conjunction with other cards, or against other cards.

Stormbound

Sometime around then, the SJW phenomenon had exploded all over USA and Canada. People were yammering on about Safe Spaces, intersectionality and micro-aggressions, and seemingly engaged in some obnoxious competition to see who was more "woke". Every day, on my news feed, all sorts of really bizarre shit just popped up. Some terms kept coming up, such as "mainsplaining", "Participation Trophy" and "Virtue-signalling".

That's when I started thinking: what if each of these terms were their own card, and I could play them against each other? What if I could literally play the Race Card, Victim Card and Gender Card? What would I call the points used to play those cards? Woke points.

When those cards got attacked and lost, I would call it being Triggered.

When they were returned to the deck like Magic: The Gathering, instead of calling it The Graveyard, I would call it The Safe Space.

Heck, this game just about wrote itself as far as concept was concerned. The terms I kept reading were now being put to good use. Feminazi, Snowflake, Keyboard Warrior, Tone Police, Whitewashing... all these were terms I now turned into cards.

Plenty of my friends were pretty enthusiastic about coming up with suggestions once I pitched the idea.

Coding begins...

After the conceptualization had started to take shape, it was time to stop thinking, stop talking, and just do it.

The Interface. First of all, I needed a visual layout in which to place the cards. This took the better part of two weekends as I hashed out what worked and what didn't. HTML and CSS is easy in principle, depending on what you want it to do. But manage I did.

Gameplay. And then came animation and Human-computer Interaction. What did I want users to click on? What would happen when they did? And how would they understand when they were to click, and on what? How could I design the flow in a way that made sense?

Cards

Cards. The visual aspect of the cards was simple enough. Since I wasn't planning to profit off ths game, I was quite comfortable using free stock photos from Pixabay. The various stats had to be arranged nicely, and there had to be three different sizes - the large one for more information, the medium one for representation in the player's hand, and the tiny one for the deck. But no, it was the game mechanics that I had to be very careful with here. Nothing game-breaking or totally useless.

Early on, I figured out that attempting to code animations by hand for such a big project was just asking for a lot of grief. So I learned jQuery UI. Best investment I ever made. After all, I was already using jQuery.

After I had coded the layout and the visuals and the main animations, all that was left was providing special abilities for each card... all forty plus of them.

Distractions, and eventual completion

While two years passed in the meantime, it's not like I had an entire two years to do this. Between work and learning new stuff, it was a struggle to find time to work on this. Sometimes I would achieve a lot in one spurt of enthusiasm, and other times I was just too tired. There were shiny new things to learn too - Ruby, ReactJS, D3, to name a few.

And then I got married, and things took a back seat for a while. I'd work on Social Justice League maybe once every few months. The inevitable happened; the project began to gather dust.

In the second week of the Circuit-breaker period, I sat down seriously and took stock of where I had left off with Social Justice League . And found, to my astonishment, that there wasn't that much left to do. Some cards needed to be coded, and others were ideas I discarded. All I needed was a little time.

And time was something I had an abundance of now.

It was done sooner than I expected. Sure, I'm a better coder now than I was in 2018, but even back then, I had the sense to write my code in such a way that I could recycle whatever I needed, and produce new functionality with a bit of copy-paste-editing. Over the course of a few hours, the last remaining cards were coded into the system.

The final piece.

I was done. Social Justice League was no longer "in progress". It was ready to play.

Aftermath

Words can't adequately express the emotional release that came from finally completing something that I've incubated in my mind for so long. Sure, Social Justice League is nothing ground-breaking. There's tons of room for improvement. It's nothing more than an amalgamation of cultural references packaged in snarky homage to self-righteous SJWs everywhere. But I made it. It's mine. Even if no more than ten people ever play it, I've completed a sizeable (by my standards) project.

At the risk of sounding dramatic, it's like this great weight has been lifted off my shoulders. Could I have done anything different? Of course. But that's no mean feat considering just how crap I was two years ago.

The sweetest thing about this whole deal was, I learned. My command of JavaScript probably increased exponentially. And being forced to use jQuery UI to handle the animations, added a new tool to my ever-growing arsenal. I made mistakes along the way, and learned from them.

No matter how Social Justice League is received by the world, it's been great.

Play your cards right!
T___T

No comments:

Post a Comment