Game Action - User Decision Rock Paper Scissors

What you will be building

Please check this link: Rock Paper Scissors Game

This app uses components from Chakra UI . You should check it out.

Reference

We first looked at setDecisionUser here.

actions/set-decision-user.ts

//  local utilities
import { SetState, State } from '../state/interfaces';

interface Payload {
  decision: string;
  setState: SetState;
}

const setDecisionUser = (payload: Payload) => {
  const { decision, setState } = payload;

  setState((prevState: State) => ({
    ...prevState,
    decision: {
      ...prevState.decision,
      user: decision,
    },
  }));
};

export default setDecisionUser;

But What Does It Do?

The function is fairly simple. It accepts a payload. The payload is typed by a TypeScript interface called Payload. We import SetState and State from state/interfaces. We first looked at the interfaces for SetState and State here.

setState calls an internal react function which is used to modify state. We need to modify the user decision so we grab the previous state (declared with the name of prevState) and return the modified version which is most of the prevState as is, and then the decision is modified, but we want some of the prevState decision to be returned as is, and the user portion is changed to whatever the user decided.

And job done!