Rock Paper Scissors Game

This assignment is about practicing React state. You will complete a Rock Paper Scissors game by filling in the missing pieces: using useState in the parent, passing state and handlers via props to child components, and handling user input. The game logic (random computer pick, win/loss calculation) is already implemented in src/utils/index.js—your job is to connect the UI to that logic using React state and props.

You must have played "Rock Paper Scissors" at least once. Here you will build it on the web: the user picks Rock, Paper, or Scissors; the computer picks at random; the app shows the result (Win / Lost / Peace).

Demo: Go to demo website

Submit: When you're done, submit your assignment on Discord using the /submit command.

Where should I work?

• Branch: Work on the master branch. Do not edit the solution branch; that holds the reference implementation.
• Locations: Search the repo for "Your code here" to find every spot you must complete. You should only change those designated areas; leave the rest of the codebase as is.

All of these are in the src/components/ folder (and the state lives in src/components/Main.js). The src/utils/index.js and src/App.js are provided; you don't need to change them for the assignment.

User Story

• User plays "Rock Paper Scissors" against the computer.
• User selects "Rock", "Paper", or "Scissors"; the game runs.
• User selection triggers the computer's (random) selection.
• The result is shown immediately (Win / Lost / Peace).

Branches and setup

Repository: nauqh/m2-rock-paper-scissor

Branches:

• master — This is where you code. All "Your code here" placeholders are on this branch.
• solution — Reference solution. Use it only to check answers; don't edit it.

Get started:

1. Fork the repo on GitHub: nauqh/m2-rock-paper-scissor → click "Fork". (That gives you your own copy to push to.)
2. Clone your fork to your machine (replace YOUR_USERNAME with your GitHub username):
   git clone https://github.com/YOUR_USERNAME/m2-rock-paper-scissor.git
3. Checkout the master branch (default):
   git checkout master
4. Search the codebase for "Your code here" to see every spot you need to complete.

To view the solution later:
git checkout solution

Explain code: src/utils/index.js

The game logic is already written. Here is what the two helpers do.

getRandomGameItem(gamesItems)

• Input: gamesItems is a list of items.
• Return: A random item in the list.
• Description: Returns a random item from the gamesItems list.

export const getRandomGameItem = (gamesItems) => {
  const index = Math.floor(Math.random() * gamesItems.length); // index between 0 and gamesItems.length - 1
  return gamesItems[index]; // return that item
};

calculatorUserWinner(user1GameItem, user2GameItem)

• Input: user1GameItem, user2GameItem — game objects, each with a game item id and a list of ids they can beat.
  Example:

  user1GameItem = {
    url: "/images/paper.png",
    id: 0,
    winItemIds: [1],
    name: "Paper",
  };

• Return: The game result ("Win" / "Lost" / "Peace").
• Description: Computes who wins from the two players’ choices.

export const calculatorUserWinner = (user1GameItem, user2GameItem) => {
  if (user1GameItem.id === user2GameItem.id) {
    return "Peace"; // same choice => tie
  } else if (user1GameItem.winItemIds.includes(user2GameItem.id)) {
    return "Win"; // player 1's winItemIds contains player 2's id => player 1 wins
  } else {
    return "Lost"; // otherwise player 1 loses
  }
};

Your task is to wire the UI in the components (using useState and props) so that when the user picks a choice, you call these utils and show the result.