Create a Cricket Points Table in Javascript - Part 2

Overview

Click on the following links to read part1 of the series.

Follow @afewminutesofcode on Instagram and YouTube for video content for this series and view original article at afewminutesofcode.com

In this tutorial we are going to create a function to calculate when a team has won, lost or there is no result.

Initial Setup

We are going to develop our app in codesandbox so to begin we will head over to https://codesandbox.io/s/ and select the React Icon as shown below.

We are going to create some folders to structure our code.

• data Contains all the matches from the tournament and can be viewed here.
• helpers - We will create 3 files calcCompletedMatches, getOppTeam and constants.
• points-table - We will create 3 files teamWon, teamLost, teamNoResult
• tests - where we will add our unit tests.

Calculate Completed Matches

In our data structure we can tell a match is completed when fin === 1 and we also are only concerned about matches of type===1 (group matches). So we will create a helper function to filter out only completed matches for us.

export const calcCompletedMatches = (
  matches,
  teamNum,
  team
) =>
  matches.filter(
    match =>
      match[teamNum] === team &&
      match["type"] === 1 &&
      match["fin"] === 1
  );

We should expect our first test below to return 45 matches (all completed group matches) and our second test to return 9 the amount of matches where England where team1.

import { calcCompletedMatches } from "../helpers/calcCompletedMatches";
import { matches } from "../data/matches";

it("calcCompletedMatches", () => {
  expect(calcCompletedMatches(matches)).toHaveLength(45);
  expect(calcCompletedMatches(matches, "t1", "ENG")).toHaveLength(9);
});

Constants

We will use the below constants throughout the application to make our code more readable.

export const SHOW_TEAM = false;
export const SHOW_OPP = true;
export const WON = "won";
export const LOST = "lost";
export const DRAWN = "drawn";
export const POINTS = "points";
export const NORESULT = "nr";
export const TEAM1 = "t1";
export const TEAM2 = "t2";

getOppTeam

We will create a helper function to enable us to easily access the opposition team in our matches array.

import { TEAM1, TEAM2 } from "./constants";

export const getOppTeam = teamNum => teamNum === TEAM2 ? TEAM1 : TEAM2;

Tests

import { getOppTeam } from "../helpers/getOppTeam";

it("getOppTeam.", () => {
  expect(getOppTeam("t1")).toBe("t2");
  expect(getOppTeam("t2")).toBe("t1");
});

Calculate Matches Won

To see who has won from our data structure we will pass in four parameters.

• matches
• teamNum (t1,t2)
• team eg ENG
• stat (will always be Ru in this example but gives flexibility to extend in the future).

Then the below gets all the completed matches and returns an array of all the matches where the teams runs are greater than the opposition. Then returns the length.

import { calcCompletedMatches } from "../helpers/calcCompletedMatches";
import { getOppTeam } from "../helpers/getOppTeam";

export const teamWon = ({
  matches,
  teamNum,
  team,
  stat
}) => {
  const oppTeam = getOppTeam(teamNum);
  return calcCompletedMatches(
    matches,
    teamNum,
    team
  ).filter(
    match =>
      match[`${teamNum}${stat}`] >
      match[`${oppTeam}${stat}`]
  ).length;
};

Test - Our test returns all the matches ENG won as t1

import { teamWon } from "../points-table/teamWon";
import { matches } from "../data/matches";

it("teamWon.", () => {
  expect(
    teamWon({
      matches,
      teamNum: "t1",
      team: "ENG",
      stat: "Ru"
    })
  ).toBe(6);
});

Calculate Matches Lost

Our Matches Lost function will be very similar to the won function except instead of returning matches where runs is greater and opposition we will do where runs are less than opposition.

.filter(
    match =>
      match[`${teamNum}${stat}`] <
      match[`${oppTeam}${stat}`]
  )

Calculate No Results

To calculate matches with no result we change our filter to look for where NR === 1

eg

.filter(match => match[`${teamNum}NR`] === 1)

In this lesson we have started to create the building blocks required for our points table application and in Part 3 we are going to create a function to handle the totals for the points standings eg P/W/L/NR/RF

To follow the code so far head over to codesandbox.