- Overview
- Components
- Game Logic
- Additional Features
- Project Structure
- Deployment
- How to Run Locally
- Contact
This project is a React-based implementation of the classic Jan Ken Pon (Rock, Paper, Scissors) game. It includes features such as a timer for move showing, dynamic display of player and computer moves, game status tracking, and a responsive layout. The project utilizes react-icons, react-toastify, and Tailwind for styling.
- Header: Displays the name of the game.
- Main: Encompasses all application components.
- Score: Shows the current game status.
- Control: Handles player moves.
- GameBoard: Displays timer and player/computer moves.
- Home: Displays a friendly Home Page enabling to start the game.
- Instructions: Provide a modal for displaying the instructions of the game.
- Move Type: A standardized type for controlling moves.
- MoveHelpers: Manages move types, options, and possible outcomes.
- Result Function: Calculates the game result.
- RandomMove Function: Generates a random move for the computer.
- Logic: Implements the game logic using states such as player1Win, player2Win, player1Move, player2Move, and score.
- useEffect Statements: Handle game logic and synchronize values across the application.
- Toast Notifications: Utilizes react-toastify to provide alerts about round results.
- GameBoard Component: it handles the game layout.
- Home Page: Includes instructions and a modal for additional information.
- Business Rule: The game runs in matches of three rounds, and the player who wins three rounds first wins the match.
- Hooks: Created hooks for opening/closing the game and showing/hiding the modal.
The project is deployed on Vercel. During deployment, there were some issues due to a deprecated type of react-toastify. Refer to the deployment section for troubleshooting details.
To run the project locally, follow these steps:
- Clone the repository:
git clone https://github.com/alefnsc/react-jan-ken-pon-web.git - Install dependencies:
npm install - Start the development server:
npm run dev
Feel free to contribute and keep rocking!
- Maintainer: Alexandre Fonseca
- Email: alexandrefonsecach@gmail.com