DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 963,673 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Roman Sery
Roman Sery

Posted on • Originally published at coderdreams.com

Themeable React Monopoly board

Game board

I’ve been working on a Monopoly game with a customized rule set and more gameplay options for players to try different strategies. I feel the standard rules make the game mostly based on luck.

It’s been a lot of fun so far mostly because it’s different from the stuff I usually work on and I’ve been learning a lot. Specifically React, CSS grid/flex, NodeJS, Express, Socket.IO, and more. I think the biggest challenge is getting the networking code to work right and to deal with slow/lagging connections, disconnects, and so on.

Live Demo

I want to share some early React/CSS code for displaying the game board, you can see it here.

You can also find the full source here

Planned game features

One of the features of the game will allow players to create and save their own themes. Other players will be able to select from a list of existing themes. The demo is NYC-themed and you will be able to create your own by giving custom names to the squares.

Instead of having the player that lands on a square immediately purchase it, there will be a new auction system. There will also be more trading and negotiation possibilities between players including loans and rent forgiveness.

If you’re familiar with RPG video games, there will be some elements of that as well. Similar to collecting $200 when you pass GO, each player will also receive ability points they can put into a variety of categories.

About the code

The GameBoard component renders a set of GameSquare components. Each square is assigned an id that used to lookup configuration data. SquareConfigData configures various properties for each square such as color, position, type, and group.

The components in the squares folder are different display implementations that are used by the different square types.

To change the theme data, just change the names in NyThemeData.

Top comments (0)

🌚 Friends don't let friends browse without dark mode.

Sorry, it's true.