Designing Boardgames and How Tech (and React) Can Help

I think in these weird times, we all have one question. The question is what to do with that much time at home. I think there's one simple answer for that. It's to invent more board games and potentially use React. I'm a professional web developer at a tech startup in London at the moment and I like to burn my tech money on publishing board games. I'm going to give you some advice or some tips if you also want to make some games in the current times.

First thing, actually know better about the history of board games. I think there's one quote which you should know or be connected to. It's, play is older than culture. For culture, however inadequately defined always presupposed human society. Animals have not waited for men to teach them the playing. And why is it relevant for us? It's basically saying, OK, we need to look as a game or as a play from a much deeper perspective from just the silly thing we do. So read Homo Ludens if you want a bit more background there.

So let's say you never invented a game before. What can we do for you? First rule know the market, but that's much too capitalistic. Let's say, hey, know the history of games and know what's going on at the moment. Know what people like to play. Let's look into very popular current games, which will be, for example, on the left Gloom Haven on the right Spirit Island. You notice some things about them. It's a lot of complicated fiddly rules because there's a lot of different pieces. People might feel dumb because they don't get the rules, which are both very bad things. You want to make a new game, especially the first game, as accessible as possible because it's easier to test for you. It's easier to test it with other people. In the end, I would even say these games are not fun. They are much more mechanical stuff. And what does this remind of us? It reminds us of Gee Crabby and Spaghetti Co. But we are a React conference, so we want to look at easy games. Every rule one can cut is a good rule, is the quote for this kind of thing. It's by Sid Saxon, one of the most popular and famous American boardgame authors. So let's invent a simple game.

What's trick number one here? Trick number one is don't repeat yourself, which basically means don't do the same game again, but do repeat someone else. Because what is very easy and accessible for a new designer to do is copy a game you like, copy a game you think which is interesting, which has some potential for even more, and then modify it a bit, modify it into that direction. This gives you a good base to start on and it still gives you some freedom to actually be this designer introducing first on the rules.

So I hope all of you know this game, it's Connect Four. And you basically win the game by having four pieces in a row. So what could we do about this game to get it to this next level, put it into modern times? I made the simple decision of just rotating it by 45 degrees. Now it's called Diagonal Four and the same rules still apply. On a player's turn, he's putting one piece into the board, but in this game he actually has to put them from the left or from the right, on top and they fall down, and you still win by having four in a row. There's some extra rules we could go into some other time, but it's basically the same, just flip 45 degrees, which introduces a lot more possibilities and it's not as easily calculable by a computer.

So we are also a tech conference, so how much effort would it be to turn this game into a playable version on a computer? Actually not that much effort, because there's a great library called BoardGame.IO. So BoardGame.io is basically the Redux for board games. You just define your read user, you have some initial state. In our case, it's just saying, okay, we have this grid of eight by eight pieces and we fill up a specific stuff and then you declare all possible actions. In this game, there's only one possible action because you can only put a piece on top of the row, so there's one action, there's some insert as you click them on, so there's some standard arguments to an action, which should all be very familiar to all of us. And there are some utility functions calculating valid moves and some utility functions, some actually wins because it's a game, some might win, it's relevant to check that. And then how do you make it visual because this is just a reducer. BoardGame.io is providing a pretty simple react interface for you. You just declare with some standard React code what your board looks like with any given state. You can still use tables if you want to, because they're actually quite easy to put this game on the computer and then use some CSS transform to rotate them 45 degrees.

The question now is, why do we actually need BoardGame.io? What's cool about this pretty simple thing. Let's estimate how much time would it take to add AI to this? It's probably a big estimate, but with BoardGame.io you can basically just say, hey, I need five lines of code for five, depending on how you count it, and I have my AI. How does it work? I'm just going to show you the video of the AI in action. The AI is literally just this thing on my programming side. There's definitely some stuff going on in the library. Let's watch a video. Now the computer is playing against himself, and you see the piece is falling down. What's happening? Every turn, the computer is randomly sampling one of the possible moves and then playing the game out depending on that move. It's basically starting a tree for some of the possible moves, and then checking who is more likely to win in the end. For every of these trees, there are some probabilities of a win or loss calculated, and there's some configuration you can say, how many iterations, how many playout deaths you want to go. You see the computer playing here, and Redd is putting Blue into the Zwickmühle, because Blue is forced to play specific stones, but Redd has four pieces in a row now.

That is the full AI for this game. You just get this out of the box with BoardGame.io by just providing a reducer and the actions. You get everything for free.

Why it's important, if you are making an abstract game, you always need to check that there is not one winner. There needs to be an alteration. There needs to be some variability, even if the computer plays. So actual program is a great thing to check.

And what's even more interesting, our games, the computer can't simulate, because there's so much more happening with a board game on the table. All the social interaction, you can't model that. But we don't have time for that today, so that's left as an exercise for the reader.