I made a website to play Blokus online with friends

• chickenroll

  1 29 0.0 TypeScript

  Online game inspired from the classic board game Can't Stop.

It's not open source, at least not yet, except for one of the games if you are curious.

• React

  1,691 221,535 9.8 JavaScript

  The library for web and native user interfaces.

  

The website itself is coded in React (using Next.js). It loads the games in an so that games are decoupled from the platform. The backend is written in Typescript. Communication between backend and frontend is mostly done using socket.io.

Each game is made of two parts:

• The game logic, written in Typescript. This defines the state of a match, the moves players can make and how they influence the state, options found in the lobby, how bots play, etc. This uses a custom framework that takes care of the boilerplate and tricky parts (things like synchronizing the match state between players, dealing with timers, etc.). This makes coding a new game very straightforward.
• The UI is a React component that defines what should be displayed for a given player and a given match state. The state of a given match is passed to the component using some redux magic (abstracted away from the game developer), again to make the game development as smooth as possible. I use a lot of react-spring for animations and TailwindCSS (most of the color schemes in games are from that library!).

Some of the logic of the game is executed on the frontend, for optimistic UI, but everything ends up running on the backend. Everything is then committed to a database.

That's a quick summary, let me know if you have any questions!

• SurveyJS

  surveyjs.io sponsored

  Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

  

• Next.js

  2,040 120,313 10.0 JavaScript

  The React Framework

  

The website itself is coded in React (using Next.js). It loads the games in an so that games are decoupled from the platform. The backend is written in Typescript. Communication between backend and frontend is mostly done using socket.io.

Each game is made of two parts:

• The game logic, written in Typescript. This defines the state of a match, the moves players can make and how they influence the state, options found in the lobby, how bots play, etc. This uses a custom framework that takes care of the boilerplate and tricky parts (things like synchronizing the match state between players, dealing with timers, etc.). This makes coding a new game very straightforward.
• The UI is a React component that defines what should be displayed for a given player and a given match state. The state of a given match is passed to the component using some redux magic (abstracted away from the game developer), again to make the game development as smooth as possible. I use a lot of react-spring for animations and TailwindCSS (most of the color schemes in games are from that library!).

Some of the logic of the game is executed on the frontend, for optimistic UI, but everything ends up running on the backend. Everything is then committed to a database.

That's a quick summary, let me know if you have any questions!

Suggest a related project