Group Final project for Code Fellows Advanced Javascript
Check out our app out in the wild here!
This app will perfectly simulate an in person “dinner table” style game session virtually by linking multiple people to the same game board with easy to use features that make playing table top games fun!
Pandemic has killed the tabletop game community. Access to online tools to play tabletop games are expensive, computer intensive, and complicated. Other competitors to our app are very game/rule specific.
This project is licensed under the free MIT license. As such, if you are interested in getting a version of this project locally for testing or added development, here are the steps needed to get started:
-
Prerequisites:
- Knowledge of HTML, CSS and JavaScript
- Experience working with node.js servers
- Understanding of server-side templating
- Working knowledge of REST APIs
- A text editor (VSCode is recommended)
- A web browser (We recommend using Google Chrome)
- A desire to build cools stuff!
-
Clone repo from GitHub here.
- On the GitHub repo page, click the
clone or downloadbutton and copy the provided url. - In your command-line, or CLI, run this command:
git clone <url goes here>
- On the GitHub repo page, click the
-
Inside of the repo on your local machine, install the necessary dependencies and libraries:
- In your CLI, run the command
npm initwhich will initialize the project withnode.js. If you don't have npm package manager installed, you can download node.js here which includes npm. - Follow the prompts to fill out the
package.jsonfile thatnode.jswill pull from to run the server.- Important! Ensure that your
package.jsonhasserver.jslisted under thestartparameter!
- Important! Ensure that your
- Install these libraries from npm that are used on this project with the
npm installcommand on your CLI (more info below):
"@material-ui/core": "^4.11.0"
"@material-ui/icons": "^4.9.1"
"axios": "^0.19.2"
"cors": "^2.8.5"
"fs": "0.0.1-security"
"jsonwebtoken": "^8.5.1"
"node-sass": "^4.14.1"
"path": "^0.12.7"
"react": "^16.13.1"
"react-dom": "^16.13.1"
"react-draggable": "^4.4.3"
"react-redux": "^7.2.1"
"react-router-dom": "^5.2.0"
"react-scripts": "^3.4.3"
"react-zoom-pan-pinch": "^1.6.1"
"redux": "^4.0.5"
"redux-devtools-extension": "^2.13.8"
"redux-thunk": "^2.3.0"
"socket.io": "^2.3.0"
"socket.io-client": "^2.3.0"
"socket.io-mock": "^1.3.1"
"enzyme": "^3.11.0"
"enzyme-adapter-react-16": "^1.15.3"
"eslint-plugin-react": "^7.20.5"
"react-test-renderer": "^16.13.1"
- In your CLI, run the command
-
You should now have a full copy of this project on your local machine. If you would like to contribute to this project in any way, checkout the Contributing section below!
- HTML - A standard markup language used for web site structure.
- CSS - A simple language used to add styling to web documents.
- JavaScript - A dynamically typed programming language used heavily in front-end development.
- Dotenv - An npm package used to create and load environmental variables from a hidden .env file.
- Express - A node.js web application framework.
- Mongoose - Mongoose is an npm package that connects to MongoDB using object modeling, designed to work in an asynchronous environment.
- MongoDB - MongoDB is a document database with the scalability and flexibility that you want with the querying and indexing that you need.
- Base64 Base64 is a robust base64 encoder/decoder
- BCrypt A library to help you hash passwords
- Jest Jest is a delightful JavaScript Testing Framework with a focus on simplicity.
- JSONWebToken JSON Web Token (JWT) is an open standard (RFC 7519) that defines a compact and self-contained way for securely transmitting information between parties as a JSON object.
- Faker faker.js contains a super useful generator method Faker.fake for combining faker API methods using a mustache string format.
- RPG Dice Roller This library is a JS based dice roller that can roll various types of dice and modifiers, along with mathematical equations.
- React React is a JavaScript library for building user interfaces. Learn what React is all about on our homepage or in the tutorial.
- Redux Centralizing your application's state and logic enables powerful capabilities like undo/redo, state persistence, and much more.
- Material UI React components for faster and easier web development. Build your own design system, or start with Material Design.
- Custom Game Servers that pass through state information via socket.io to multiple clients in the same room.
Utilizing a modularized express router and socket.io connector, we are able to update state data in real time to verified, signed-in users attached to the same room.
- An authorized api route for protected user data
user {
"username": "paul",
"hashedPassword": "*******"
}- sets a JWT as your bearer header for future authorization. This JWT can be decrypted and checked against user information on the /users route.
- utilizing a socket held in our redux state, we can connect X amount of sockets to any room
- Rooms can be automatically created or joined with a special name that is entered into a front end form
- This socket listens for state variables to be updated and then sends those state variables to every socket connected to the room.
- The front end clients then update their own states to reflect the universal state.
This app will perfectly simulate an in person “dinner table” style game session virtually by linking multiple people to the same game board with easy to use features that make playing table top games fun!
- As a user, I want to be in control of the rules of the game.
- You, as the main player can set your game rules how you would like
- As a user, I want to be able to use text commands that will generate a random dice roll.
- We have the ability to create any chat commands that we feel are pertinent to game mechanics and have them respond in the messages archive
- As a user I would like to roll a variety of dice styles
- Utilizing RPG Dice Roller we can accommodate any kind of dice roll a game might need
- Stretch: As a user, I want to be able to zoom in and zoom out of the game board.
- As a host user, I want to be able to save my game board visuals for easy access.
- Utilizing AWS, we can store and load a game board image customized to the room
- As a developer, I want to persist (oauth) logged in user information in a database
- Utilizing OAuth we can login via discord or create a user
- As a user, I want to be able to message the other players in my game.
- As a host user, I would like to be able to invite others to my friends.
- As a user, I want to be able to join a game when I'm invited.
- As a user, I want to be able to move my piece around the game board.
- As a host user, I want to be able to keep track of player scores.
- As a user, I want to know who's turn it is.
This diagram is a visual representation of the data structure for this project.
If you would like to contribute to this project, open up an issue on the project's GitHub.
- Use the
bugflag for any problems using the application. - Use the
enhancementflag if you have a recommendation on something to improve - Use the
questionflag if you simply have questions about the development of this project.
- Dave Wolf - Full-stack Javascript Developer GitHub
- David Palagashvili - Full-stack Javascript Developer GitHub
- Paul Depew - Full-stack Javascript Developer GitHub
- Marlene Rinker - Full-stack Javascript Developer GitHub
- Garhett Morgan - Full-stack Javascript Developer GitHub
- Ashley Biermann - Full-stack Javascript Developer GitHub
This section goes out to Jacob Knaack.
See the attached LICENSE file for details.