jonahchoi / braking-friendships

Braking Friendships

A real-time/multiplayer card game that allows up to 4 player gameplay (Featuring - Exploding Kittens)

Contributors

Josh Garza, Jonah Choi, Hieu Ngo, Fernando Gamboa, Joseph Redmond, Eric Pei

About the Project

Our team built a fully functional web application for an online card game featuring Exploding Kittens with all the features such as login, profile, lobby, gameplay, and chat.

This project includes the following sections:

1. Main Page
2. Game Lobby
3. Gameplay
4. Chat Feature
5. Login/Signup
6. Profile

(back to top)

App Features

Main Page:

This is the main page of the website. Here contains the Navigation Bar on top, with the options to create a game room, join a game room, or join a random game room.

Navigation Bar: The navigation bar inclues the company logo, profile, and login process. The navigation bar changes depending on user's login status. Users with an account can acces their profile and search for other users.

(back to top)

Game Lobby:

The game lobby allows users to communicate with each other and prepare to enter the gameplay. Up to 4 players are allowed to be in the game lobby at any time.

Lobby for joining players: Joining players do not have the option to start the game, that's a host privilege

(back to top)

Gameplay:

Once the game is started, players are taken to the game board. Here, there are several animations that bring the cards to life and make the game more fun. Players are able to hover over cards to see their description, drag cards upward to play them, and draw a new card. There are several unique abilities that cards can perform, including seeing the next three cards in the deck and cancelling out previous cards. Real time updates were achieved using web sockets to provide a seamless experience for all players.

(back to top)

Chat Feature:

Chat feature is available in the game lobby and during gameplay. The game chat allows players to communicate with each other more effectively while being immersed in the game. The chat notifies user's with a live notification badge, removing the need the keep the chat component open at all times but while being at ease that no message will be missed.

	Lobby Chat: The chat bar opens on the right side of the screen and can be collapsed to allow players more versatlity and control. Chat displays an interactive icon to show any new messages.
	Gameplay Chat: Gameplay chat is also on the right side and can be toggled to close as needed.

(back to top)

Login/Signup:

Users have the ability to login and/or signup for an account.

	Login Page: User can login with their email and password. If user forgot password, they can reset it with the 'forget password' button. User can signup for a new account by clicking the 'signup' button.
	Account Registration Page: In order to register for an account, user needs to input a username, email, password, and confirm password.

(back to top)

Profile:

The profile page is only available for users who has an account. The user can access their profile page to see their username, avatar, game info, and friends. User also has the ability to change their username and avatar.

	Guest Account: Guest accounts have a defaulted avatar with a random guest ID number. They have the option to login to be able to view their profile.
	User Account: User account will show the user's avatar and their username in the landing page. They also have the option to search for other users and add them as friend.
	Edit Username/Avatar: User can edit their username. New username must be different than the ones from the database. Users can also choose from one of the 9 avatars ta
	Friend's Profile: Clicking on a friend's profile in the user's profile page will render the page to view the friend's profile.
	Search: User can search for other users by their username. User can then view the profile page upon clicking on the username.
	Add Friend: Searched profile page has the option to add the user as a friend. This will add the profile to the user's friend list.

(back to top)

Getting Started:

• Install dependencies in Client:

  1. cd into blueocean/client
  2. npm install

• Make a copy of example.env and rename to .env

• Install dependencies in Server:

  1. cd into blueocean/server
  2. npm install

• Run Servers:

  1. In client - npm run start
     • client run on PORT 3000
  2. In server - npm run server
     • server runs on PORT 5001

• Launch site: http://localhost:3000

(back to top)