Designing Boardgames and How Tech (and React) Can Help

Rate this content
Bookmark
8 min
02 Aug, 2021

Video Summary and Transcription

In these weird times, we all have one question: what to do with that much time at home? The answer is to invent more board games and potentially use React. Modifying existing games and adding AI can bring new possibilities and challenges. The BoardGame.IO library provides a simple interface for creating playable versions of board games on a computer and adding AI. Computer simulations cannot capture the social interaction and dynamics of board games played on a table.

1. Tips for Making Board Games in Current Times

Short description:

In these weird times, we all have one question: what to do with that much time at home? The answer is to invent more board games and potentially use React. As a professional web developer, I like to burn my tech money on publishing board games. If you want to make games, start by understanding the history of board games and the current market. Look at popular games like Gloom Haven and Spirit Island, but remember to make your game accessible and fun. Let's invent a simple game.

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.

2. Modifying Existing Games and Adding AI

Short description:

Trick number one is to not repeat yourself, but instead modify an existing game. For example, by rotating Connect Four by 45 degrees, we get Diagonal Four, which introduces more possibilities and is harder to calculate by a computer. To turn this game into a playable version on a computer, we can use the BoardGame.IO library, which provides a simple react interface. Adding AI to the game is also straightforward with BoardGame.IO, requiring just a few lines of code. The AI uses a tree-based approach to determine the best moves and probabilities of winning. Watch the video to see the AI in action.

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.

3. Implementing AI and Simulations

Short description:

The full AI for this game is available with BoardGame.io. It's important to ensure there is not one winner in abstract games and to introduce variability. Computer simulations cannot capture the social interaction and dynamics of board games played on a table.

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.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

TechLead Conference 2023TechLead Conference 2023
35 min
A Framework for Managing Technical Debt
Let’s face it: technical debt is inevitable and rewriting your code every 6 months is not an option. Refactoring is a complex topic that doesn't have a one-size-fits-all solution. Frontend applications are particularly sensitive because of frequent requirements and user flows changes. New abstractions, updated patterns and cleaning up those old functions - it all sounds great on paper, but it often fails in practice: todos accumulate, tickets end up rotting in the backlog and legacy code crops up in every corner of your codebase. So a process of continuous refactoring is the only weapon you have against tech debt.In the past three years, I’ve been exploring different strategies and processes for refactoring code. In this talk I will describe the key components of a framework for tackling refactoring and I will share some of the learnings accumulated along the way. Hopefully, this will help you in your quest of improving the code quality of your codebases.

React Summit 2023React Summit 2023
24 min
Debugging JS
As developers, we spend much of our time debugging apps - often code we didn't even write. Sadly, few developers have ever been taught how to approach debugging - it's something most of us learn through painful experience.  The good news is you _can_ learn how to debug effectively, and there's several key techniques and tools you can use for debugging JS and React apps.
JS GameDev Summit 2022JS GameDev Summit 2022
33 min
Building Fun Experiments with WebXR & Babylon.js
Top Content
During this session, we’ll see a couple of demos of what you can do using WebXR, with Babylon.js. From VR audio experiments, to casual gaming in VR on an arcade machine up to more serious usage to create new ways of collaboration using either AR or VR, you should have a pretty good understanding of what you can do today.
Check the article as well to see the full content including code samples: article. 
React Advanced Conference 2022React Advanced Conference 2022
22 min
Monolith to Micro-Frontends
Top Content
Many companies worldwide are considering adopting Micro-Frontends to improve business agility and scale, however, there are many unknowns when it comes to what the migration path looks like in practice. In this talk, I will discuss the steps required to successfully migrate a monolithic React Application into a more modular decoupled frontend architecture.
React Advanced Conference 2023React Advanced Conference 2023
22 min
Power Fixing React Performance Woes
Next.js and other wrapping React frameworks provide great power in building larger applications. But with great power comes great performance responsibility - and if you don’t pay attention, it’s easy to add multiple seconds of loading penalty on all of your pages. Eek! Let’s walk through a case study of how a few hours of performance debugging improved both load and parse times for the Centered app by several hundred percent each. We’ll learn not just why those performance problems happen, but how to diagnose and fix them. Hooray, performance! ⚡️

Workshops on related topic

JSNation 2023JSNation 2023
116 min
Make a Game With PlayCanvas in 2 Hours
Featured WorkshopFree
In this workshop, we’ll build a game using the PlayCanvas WebGL engine from start to finish. From development to publishing, we’ll cover the most crucial features such as scripting, UI creation and much more.
Table of the content:- Introduction- Intro to PlayCanvas- What we will be building- Adding a character model and animation- Making the character move with scripts- 'Fake' running- Adding obstacles- Detecting collisions- Adding a score counter- Game over and restarting- Wrap up!- Questions
Workshop levelFamiliarity with game engines and game development aspects is recommended, but not required.
JS GameDev Summit 2022JS GameDev Summit 2022
121 min
PlayCanvas End-to-End : the quick version
Top Content
WorkshopFree
In this workshop, we’ll build a complete game using the PlayCanvas engine while learning the best practices for project management. From development to publishing, we’ll cover the most crucial features such as asset management, scripting, audio, debugging, and much more.
React Summit Remote Edition 2021React Summit Remote Edition 2021
87 min
Building a Shopify App with React & Node
Top Content
WorkshopFree
Shopify merchants have a diverse set of needs, and developers have a unique opportunity to meet those needs building apps. Building an app can be tough work but Shopify has created a set of tools and resources to help you build out a seamless app experience as quickly as possible. Get hands on experience building an embedded Shopify app using the Shopify App CLI, Polaris and Shopify App Bridge.We’ll show you how to create an app that accesses information from a development store and can run in your local environment.
JSNation 2022JSNation 2022
41 min
Build a chat room with Appwrite and React
WorkshopFree
API's/Backends are difficult and we need websockets. You will be using VS Code as your editor, Parcel.js, Chakra-ui, React, React Icons, and Appwrite. By the end of this workshop, you will have the knowledge to build a real-time app using Appwrite and zero API development. Follow along and you'll have an awesome chat app to show off!
GraphQL Galaxy 2021GraphQL Galaxy 2021
164 min
Hard GraphQL Problems at Shopify
WorkshopFree
At Shopify scale, we solve some pretty hard problems. In this workshop, five different speakers will outline some of the challenges we’ve faced, and how we’ve overcome them.

Table of contents:
1 - The infamous "N+1" problem: Jonathan Baker - Let's talk about what it is, why it is a problem, and how Shopify handles it at scale across several GraphQL APIs.
2 - Contextualizing GraphQL APIs: Alex Ackerman - How and why we decided to use directives. I’ll share what directives are, which directives are available out of the box, and how to create custom directives.
3 - Faster GraphQL queries for mobile clients: Theo Ben Hassen - As your mobile app grows, so will your GraphQL queries. In this talk, I will go over diverse strategies to make your queries faster and more effective.
4 - Building tomorrow’s product today: Greg MacWilliam - How Shopify adopts future features in today’s code.
5 - Managing large APIs effectively: Rebecca Friedman - We have thousands of developers at Shopify. Let’s take a look at how we’re ensuring the quality and consistency of our GraphQL APIs with so many contributors.
JSNation 2023JSNation 2023
57 min
0 To Auth In An Hour For Your JavaScript App
WorkshopFree
Passwordless authentication may seem complex, but it is simple to add it to any app using the right tool.
We will enhance a full-stack JS application (Node.js backend + Vanilla JS frontend) to authenticate users with One Time Passwords (email) and OAuth, including:
- User authentication – Managing user interactions, returning session / refresh JWTs- Session management and validation – Storing the session securely for subsequent client requests, validating / refreshing sessions
At the end of the workshop, we will also touch on another approach to code authentication using frontend Descope Flows (drag-and-drop workflows), while keeping only session validation in the backend. With this, we will also show how easy it is to enable biometrics and other passwordless authentication methods.