Jessa Sparks


Hatchlings Game Jam

June 18, 2019

This past weekend my sister Davien and I participated in the Hatchlings Game Jam. It was a 36 hour event where people came together to create all types of games. I've had a couple game ideas I've been wanting to work on for years. This seemed like a good way to meet new people and jump start one of my game projects.

The game we decided to make is a number game we named Elimination (for lack of a better name). The premise of the game is you are given a collection of numbers between 1-9 and try to reduce all of the numbers to zeros using math operations. This is a game I made up when I was a kid. I would see some numbers, e.g. a number on a magazine (what's a magazine?), and do mental math to try to combine the numbers to equal zero. It is similar to the card game Krypto, except you're trying to arrive at zero instead of a magic number.

Going into the game jam I wasn't sure whether we should make a mobile app or a progressive web app (PWA). I have dabbled in mobile development just a tiny bit over the last several years, first with Apache Cordova and a couple years ago with NativeScript/Angular. I never actually finished any of those projects and can't say I really enjoyed mobile development. For the game jam I wanted to try React Native. I'm new to React and have seen some good things about React Native on Twitter so decided to give it a try.

The game jam officially started around 8 pm on Friday night. We spent the evening getting our development environment set up and worked through some of the React Native Getting Started Guide. For our development environment we went with Expo, as the guide recommended for people coming from web development. We were very impressed with how easy it was to run our app on our phones. We downloaded the Expo Client app to our phone, then as long as our phone and laptop were on the same network we could scan a QR code to run our app. The app would refresh any time code changes were made. No USB cable needed or messing around with Android Studio.

On day 2 we got to work on functionality for our game. Davien tackled creating the number tiles and implementing the math operations. I spent a good portion of the day getting drag and drop to work. Originally I wanted to drag number tiles on top of one another, then select the math operation. I was having a hard time figuring out how to have a tile component detect when another tile component is dragged on top of it, so decided to pivot and create a couple "drop zones" instead. This was much easier, but I still had to get a little hacky and use hardcoded coordinates when determining if a number tile was inside a drop zone. The next big struggle on Saturday was removing the tiles once the operation had been performed and adding a new tile for the result if it was something other than zero. First I wasn't properly setting the state, and then I wasn't using truly unique keys when iterating through the array of number tiles. React requires you to set a key when iterating through items and I used the index as a key. I learned that is a big no-no if you plan to remove items from an array! Saturday night we left feeling pretty good about what we had created. There would at least be something demoable. We continued working on the game after we got home that night. Davien had the very important task of showing a funny gif once the player won. I worked on adding reset and new game buttons.

Sunday morning we were pretty relaxed. One feature Davien and I both really wanted was an undo button, but it was lower priority in our backlog. While driving over to the game jam I started thinking about how it could be implemented and realized it would be pretty easy. Once I got to the jam I sat down and implemented it in about 20 minutes. Davien worked on adding more winner gifs that would be randomly selected. Getting to add gifs to our game was her reward for all her hard work. At 10 am it was time to stop working on our projects and everyone demoed what they had created. There was quite a variety of projects worked on, from board games to virtual reality and a dating simulator. It was very impressive how much could get done in such a short time period.

Overall the game jam was an awesome experience and I would definitely do it again. I'm really glad I signed up. I was feeling a little anxious about it when the day arrived and wondering why I put myself in these situations, but I had so much fun. Every once in a while I feel like I'm stuck in a rut and need to do something to get out of my comfort zone. This event was a reminder that only good things come from getting out of my comfort zone. This was my first time coding with my sister. I was very impressed with Davien's ability to take a task and see it through. She is fresh out of college and a very capable developer. I'm excited to see where her career takes her.

So, what's next? Davien and I definitely want to keep working on the game. We have a few small bugs to iron out. We also need to be able to distribute the app. I know it's a pain in the butt to publish iOS apps to the app store. I'm considering whether we should make it a PWA instead. For this type of game I don't see a lot of benefits to making it a mobile app vs a PWA. Some other features we could implement are multiplayer to race against an opponent, difficulty levels, using letters instead of numbers (a = 1, b = 2, z = 26, etc). I'm excited to continue working on it and share it with others! Stay tuned!

Tags: Development

Hello World

May 26, 2019

Welcome to my new blog/website! I wasn't necessarily planning to start a blog, but I stumbled upon a tweet about a new .dev TLD (top level domain) being released. I thought it would be pretty cool to have so I quickly snatched it up.

I decided this would be a good opportunity to try out Gatsby, a React framework for creating "blazing fast" websites. I attended a dsmJS talk about it several months ago and it looked interesting. Overall I found Gatsby to be pretty easy to use. It has plugins available for just about everything I needed to do and the documentation is great. Blogs and static sites are definitely in Gatsby's wheelhouse, but it can be used for applications too.

Gatsby has a lot of options for how to pull in content. To keep it simple I chose to write my blog posts in Markdown files within my repo. It seems like that could become unmanageable if I blog a lot so I'll need to look into a content management system at some point. Gatsby is able to integrate with a lot of different content management systems, as well as APIs.

For hosting I chose to go with Netlify. I've heard a lot of good things about it on Twitter so decided to give it a shot. I've only been using it for a few days, but so far I like that it can integrate with my repository to do continuous deployment. I was a little worried turning that setting on, but I guess that just means I need to follow a proper branching strategy instead of committing everything directly to master. It can also build a live preview of your site from a pull request or a specific branch so you can see what it would look like deployed. Best of all, Netlify has a free tier that meets the needs of a hobby project. In the past I've used Firebase to host Gimme. It also has a very generous free tier, but would be overkill for my website since I don't need a database.

While working on my website I was able to dip my toes a little bit into React and GraphQL, but I wouldn't say I have enough experience to really have an opinion at this point. JSX was really weird and gross to me at first, but I've gotten used to it. My next side project will be using Next.js, a server-side rendering React framework, so I hope to learn more about React as I work on that.

Tags: Development