Submitted
What are you most proud of, and what would you do differently next time?
This project is a Rock-Paper-Scissors game built with React , Typescript and Tailwind Css. The game features the following components and functionalities:
Components:
Hero: The main component that houses the game logic and state management.
Score: Displays the current score of the player.
Icons: Represents the selectable icons for rock, paper, and scissors.
Rules: Shows the game rules in a modal.
Winner: Displays the result of the game round, indicating whether the player won, lost, or drew.
State Management:
Score: Keeps track of the player's score.
isRulesOpen: Boolean state to control the visibility of the rules modal.
myChoice: The player's choice (rock, paper, or scissors).
computersChoice: The computer's random choice.
winner: Indicates the result of the game round (You, The House, Draw, or null).
Game Logic:
Icon Selection: The player selects an icon, triggering the computer's random choice after a brief delay.
Determining the Winner: The winner is determined based on the rules of Rock-Paper-Scissors. The game checks combinations to see if the player wins, loses, or if it is a draw.
Score Update: The score is updated based on the result of the game round.
User Interface:
Before Choice: The player is presented with three icons (rock, paper, scissors) to choose from.
After Choice: Displays the player's choice, the computer's choice, and the result of the game round.
Rules Modal: Displays the rules of the game when the rules button is clicked.
Styling:
The project uses Tailwind CSS for styling the components, ensuring a responsive and visually appealing interface.
What challenges did you encounter, and how did you overcome them?
Writing the correct Type for every variable in Typescript.
