Assignment
This is a readme-driven project. This means that I first figure out what I want to make and document this in my readme. The application I am making is based on user interaction and works in real-time for multiple users.
Project: Dungeon and Dragons playground
Description
This app is made for Dungeon and Dragons groups that have use for an online tool. Since Corona we are limited in playing DnD in groups, so often groups go online to continue their quests online. In this app, you can upload your own map and your friends can join you. Everyone gets their character on the screen with a colored dot. You can move around on the map by clicking on the grid. There is also a chat function that lets you share your notes and roll the dice using a dice API.
Concept
One of the three concepts is a Dungeon and Dragons helper where you should be able to upload a map and move your character real time around. Also, I want to add a dice function that throws the dice for you and calculates its outcome. Sharing notes and displaying the dice rolls should be added to the chat function I intend to add.
Highlights
Rooms
Enter a room to use this application with just your friends.
Choose realtime position
You can click on the grid map to change your position in real-time. This way the other players know of your movements.
Chat
Share your notes in the chat
Dice
Use the dice function to throw the dice and calculate the result
Login
To use this application you have to log in. You can log in with your Google credentials. For this login process, I used the firebase authentication method that easily lets me use Google authentication. Others as well, but I choose to only use google for this prototype.
Database - Firestore
Before I used the Firestore database, the data was lost on a disconnect. But with the Firestore database, you can continue where you left. If you enter a room, the Firestore database will look through all my databases if there is one matching your room name. If there is, it will add the last player locations on the map. So if you refresh or close your windows by accident you can always reconnect with the same room and you can continue the game.
If there isn't a matching database for this room, it will create one on the first player location move. Every move gets updated in the database. Then every move the sockets fetches this data from the database again and updates the dom via the client socket.
The database looks like this:
Web application & Github
More information about this project can be read in the readme on Github. Also, the web application can be viewed and used online, just hit the button below.
Open the application Visit the Github Repo