We are siblings, a coder and an artist/designer who decided to give this project a go. It was challenging, but rewarding and most importantly fun and educational.

Team Members

Launch Site

Bonus Eventus - Online Dice Rooms

Online multiplayer dice rooms, create a simple profile, create a room and invite your friends to roll dice together in real time.

V800 be screenshot

Description

About

Bonus Eventus helps a group of people roll dice together, perfect for quick Dungeons & Dragons sessions or other games that involve dice. No registration is needed and no data is saved to persistent storage.

All clients in the same room instantly see what the dice roll results of their "roommates" are, thanks to socket.io

How it works

Very simple on the inside, all data is stored in-memory on the server. Rooms keep the latest 20 messages in history (50 on the client) and delete themselves if not used in more than an hour. User profiles is deleted after logout.

Upon creating a character a cookie with the ID is saved in the browser, which is used to attempt to restore the character. This is to prevent having to create a character every time page is refreshed.

Initially I planned on using Redis to cache and store some data, but due to time constraints decided to drop the idea and make all data volatile.

Instructions

How to use

Notice: please use Chrome or Firefox with a screen resolution of at least 1000px

  1. Create a character, choose a name, an avatar and a color that will represent you on.
  2. Create and/or join a Roll Room
  3. Click one of the standard dice or use the custom roller to roll any dice from 1d2 (a single roll of a 2-sided die) to 100d100 (a hundred rolls of a hundred-sided die)

Use incognito mode or a different browser to join the same room with a different profile to see the real-time functionality

View the screencast:
https://www.youtube.com/watch?v=u6ubBMLim0o

Built With

Starter Project

I used the Express/React boilerplate project provided by Heroku for this event as a starter.

Tech used

  • Backend. NodeJS server with Express and Socket.io. Express is used to serving the static HTML pages, while Socket.io is used for all the client-server communications in real time.
  • Frontend. ReactJS is used with Styled Components for CSS-in-JS and React Easy State for global state management. CSS Flexbox and Grid were both used to help create the layouts.

Art used

Character avatars and dice icons were made by Ana Bezgacheva ([email protected]).

Feedback / Ratings (6)

All Feedback