Game Action - Computer 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 setDecisionComputer here.

actions/set-decision-computer.ts

//  random
import random from 'random';
//  local utilities
import getResult from './get-result';
import choices from '../state/choices';
import { SetState, State } from '../state/interfaces';

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

type ComputerDecision = {
  beats: string;
  value: string;
};

const setDecisionComputer = (payload: Payload) => {
  const { setState, userDecision } = payload;
  const randomiser = random.int(0, choices.index.length - 1);
  const choice = choices.index.at(randomiser);
  const decision = choices[choice as keyof typeof choices] as ComputerDecision;

  const result = getResult({
    computerDecision: decision,
    userDecision,
  });

  setState((prevState: State) => ({
    ...prevState,
    decision: {
      ...prevState.decision,
      computer: decision.value,
    },
    games: {
      total: prevState.games.total + 1,
      computer: prevState.games.computer + result.computer,
      user: prevState.games.user + result.user,
    },
    result: {
      label: result.judgement,
      computer: result.computer === 1,
      user: result.user === 1,
    },
  }));
};

export default setDecisionComputer;

But What Does It Do?

Let’s look at our imports first.

Imports

First we grab random from the random package . We need that because it is our artificial intelligence - it is how we get the computer’s decision.

Next we grab some local stuff. We’ll need a helper function called getResult and we'll need choices from the choices file in the state directory and also the defined typescript interfaces of SetState and State.

Let’s look at getResult in more detail. In another article.

TypeScript

Now let’s look at the typings required to help this critter along.

The first thing is we need to tell the function what to expect in it’s payload. That is done with the Payload interface. This funtion expects SetState and a userDecision.

Next we want to type the computer decision because we are grabbing this object from the choices constant.

Now let’s look at the function itself.

setDecisionComputer function

The first thing this bad boy does is deconstruct the payload into the pieces expected by the Payload interface definition.

After that a random number called randomiser is generated by the random utility.

This randomiser is then fed into the choices.index and returns the choice at the randomiser location. Nifty right?

Finally, a decision is returned from choices at the key location of the choice and we tell TypeScript to expect it returned as the ComputerDecision type.

Now that the computer has made a decision, a result can be determined. And that is exactly what happens next.

getResult

So, a result is generated from the getResult function. The getResult function expects the computerDecision and the userDecision as items within an object. Don’t worry, how this function works will be explained one day.

Once the result is retrieved, the game state can be updated using the setState function which is already available.

setState

OK. Setting state is not going to be trivial this time. We will set the computer state and the results based on whether the computer won or the user won or whether there was a tie.

The decision key records the computer decision value in the computer key of the decision object.

In the games key we simply replace everything with updated values for total, computer and user.

In the result key we replace everything with information directly from the result object. The label comes from the result.judgement, and a boolean result for computer and user is returned based on whether result.computer is exactly equal to 1 or not (and same for result.user). This means that the computer result value could be true or false and the user result value could be true or false and it is possible for both values to be false. This is important because we use these results to color the result label in the View.

And we are done describing this function. Yay.