Web Game Prototype of Cards Against Humanity

This project is a personal prototype of the original game Cards Against Humanity. All intellectual property rights, including design, branding, and game name, belong to them. You can view the original terms of use and the license CC BY-NC-SA

This project was developed to learn about WebSockets, web components, REST APIs, and authentication using JSON Web Tokens. If you want the text of game cards, you can get the texts contained in the SQL archive cartas_contra_humanidad, specifically in the tables cartas_blancas for white cards and cartas_negras for black cards, under the same license as this project/repository. This also applies to the UI design and code.

Features

• User Account System: Users can register, log in, and manage their accounts.
• Real-Time Gameplay: The game is played in real-time using a REST API and WebSockets, ensuring a smooth and uninterrupted gaming experience.
• Custom Game Interface: Two distinct interfaces for the zar and regular players, tailored to their specific roles in the game.
• Game Creation and Lobby: Users can create new games and join existing lobbies, facilitating the organization and start of games.
• Points System: Implementation of a points system that tracks player scores and determines the winner of the game.

Technologies Used

• React
• Node.js
• Socket.io
• Express
• JSON Web Token [JWT]
• Tailwind CSS
• MySQL

Screenshots

Home page

Login

Register

Change room information according to players within them

Room with owner inside

Room whit other player inside

Room full

Join to a room

Rooms views

Player view

Owner view

Games views

Player gameboard

Zar gameboard

Round finished

Account information

Installation

1. Clone the repository: git clone https://github.com/JoseDHernandez/CHH

2. Import cartas_contra_humanidad.sql to you SQL database.

3. Modify the variables in config.js in the server folder or client folder. [client/scr/api/config.js]

   Server configuration In config.js file:

   PORT          Port on which the server listens
   
   secret        Secret key for encrypting JSON Web Tokens (JWT)
   
   urlClient      URL of the client, used for CORS permissions
   
   DB_HOST        Database host
   
   DB_USER        Database username
   
   DB_PASSWORD    Password to access the database
   
   DB_NAME        Database name
   
   DB_PORT        Port of the database
   

   In index.js file:

   Cors for socket.io:

   const io = new SocketServer(server, {
     cors: {
       origin: urlClient,
       methods: ["GET", "POST", "PUT", "DELETE"],
     },
   });

   Cors for Express:

   app.use(
     cors({
       origin: urlClient,
       methods: ["GET", "POST", "PUT", "DELETE", "OPTIONS"],
     })
   );

   Morgan format:

   app.use(morgan("dev"));

   Client configuration In config.js file, content in the path client/scr/api

   URL is the variable of url the server API, is similar to server (index.js) console information:

   console.log("Server running: " + DB_HOST + ":" + PORT);

4. You can use the demo accounts:

   Username: UserTest

   • Email: test@gmail.com
   • Password: 12345678

   ---

   Username: Test

   • Email: test@test.com
   • Password: 12345678

   ---

   Username: Username

   • Email: test@hotmail.com
   • Password: 12345678

5. For the profile photo use a url of imgur o other picture link, you edit this in account settings (client IU) or the database: table user and column Photo.

6. Not forget execute the command npm run dev or npm run build in the paths of client folder and server folder for use this project in a developer or build mode.

API Routes

Cards Routes

• Black Cards

  • GET /cardsBlack - Get all black cards.
  • POST /cardsBlack - Create a new black card (requires token and admin role).
  • PUT /cardsBlack/:id - Update a black card (requires token and moderator role).
  • GET /cardsBlack/:id - Get a specific black card by ID.
  • DELETE /cardsBlack/:id - Delete a black card (requires token).

• White Cards

  • GET /cardsWhite - Get all white cards.
  • POST /cardsWhite - Create a new white card (requires token and admin role).
  • PUT /cardsWhite/:id - Update a white card (requires token and admin role).
  • GET /cardsWhite/:id - Get a specific white card by ID.
  • DELETE /cardsWhite/:id - Delete a white card (requires token and admin role).

Game Routes

---

Tokens

Account token (is a header):

• [:token] Token is a token by JWT with user information.

Sockets and the parameters :token and :code

• [:code] codeParty is de code of a game room.

• [:tokenParty] tokenParty is the token of information of game room

  NOTE: view the code in sockets.js in server folder (server/routes) for view uses and the local items stored in the local storage of client ( client user context [path client/src/context/User.context.jsx]) and.jsx files for the behavior of the calls sockets, such us:

  • sockets.js in the path server/routes
  • Partida.jsx and Salas.jsx in the path client/src/pages
  • Game.jsx, Zar.jsx, Player.jsx and chat.jsx in the path client/src/components

---

• Lobby and Party Management

  • GET /Game - Verify token.
  • GET /lobby/:code - Join a party (requires token).
  • GET /party/:code - Enter party lobby (requires token).
  • POST /party - Verify party password (requires token).
  • PUT /party - Update party details (requires token).

• Game Management

  • POST /game - Start the game (requires token).
  • GET /game - Get the number of cards (requires token).
  • GET /cards/:token - Get player’s deck (requires token).
  • GET /cardsOther/:token - Get new reserve cards (requires token).
  • POST /cards - Save player’s deck (requires token).
  • GET /cartas/:token - Get selected cards by players (requires token).
  • PUT /game - Update points and round (requires token).
  • GET /points/:token - Get points (requires token).
  • PUT /cards - Save selected cards on the server (requires token).
  • DELETE /party - Delete a party (requires token).

Authentication Routes

• POST /signup - Sign up a new user.
• POST /signin - Sign in an existing user.
• GET /info - Get general information.

User Routes

Note: :id is the ID of an account from database.

• GET /user/:id - Get user achievements (requires token).
• PUT /user - Update user information (requires token).

Author

The view original game Cards Against Humanity

This project is developed by José Hernández.

License

CHH by José David Hernández Hortúa is licensed under CC BY-NC-SA 4.0