Rock Paper Scissors React

This project is a modern implementation of the classic Rock, Paper, Scissors game, built using React, Next.js, TypeScript, and Tailwind CSS. It features a sleek, responsive UI, score tracking, day/night mode, and reusable components for scalability and maintainability.

🚀 Live Demo

Check out the live demo here: Demo Link

🎮 Features

• Responsive UI: The design adapts seamlessly to various screen sizes, from mobile to desktop.
• Score Tracking: Keep track of player and computer scores across multiple rounds.
• Reset Game: Restart the game without refreshing the page for a smooth user experience.
• Day/Night Mode: Toggle between day and night themes with a stylish switch.
• Object-Oriented Logic: Game logic is encapsulated to promote clean and reusable code.
• Optimized Performance: Utilizes Next.js for server-side rendering and TypeScript for type safety.

🛠️ Tech Stack

• React: UI library for building interactive game components.
• Next.js: Framework for server-side rendering and static site generation.
• TypeScript: Strongly typed JavaScript for better code quality.
• Tailwind CSS: Utility-first CSS framework for rapid styling and customization.
• HTML/CSS/JavaScript: Base technologies supporting the game logic and styling.

📷 Screenshots

Day Mode	Night Mode

📋 How to Play

1. Choose Rock, Paper, or Scissors by clicking on the corresponding symbol.
2. The computer will randomly choose its move.
3. The result will be displayed, indicating the winner of the round.
4. The score will update based on the result.
5. You can toggle between Day and Night modes for a different visual experience.
6. Click Reset to start a new game.

🖥️ Installation

To run the project locally, follow these steps:

1. Clone the repository:

   git clone https://github.com/gurgant/rock_paper_scissors_react.git
   

2. Navigate to the project directory:

   cd rock_paper_scissors_react
   

3. Install dependencies:

   npm install
   

4. Start the development server:

   npm run dev
   

5. Open http://localhost:3000 to view the app in your browser.

🌐 Deployment on GitHub Pages

If you want to deploy your own version of this project to GitHub Pages, follow these steps:

1. Push your changes to the main branch of your own GitHub repository.
2. Go to the Settings of your GitHub repository on GitHub.
3. Scroll down to the GitHub Pages section.
4. In the Source section, select main branch and save.
5. After a few minutes, your project will be live at: https://.github.io//.
   • Replace <your-username> with your GitHub username.
   • Replace <your-repo-name> with the name of your GitHub repository (e.g., rock_paper_scissors_react).

🚧 Customization

• Modify the game logic or styles by editing the source files in the src folder.
• You can also change the day/night mode styles in globals.css to fit your preference.
• Add more game options or expand the UI as desired.

🤝 Contributing

Contributions are welcome! Feel free to fork the repository, submit issues, or create pull requests to improve the game or add new features.

📝 License

This project is licensed under the MIT License. See the LICENSE file for more details.