A Few Minutes Of Code
A Few Minutes Of Code

    Create a Cricket Points Table in JavaScript - Part 2

    August 09, 2019

    Video Blogger

    image from undraw.co

    Overview

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

    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 codesandbox.io/s/ and select the React Icon as shown below.

    codesandbox.io

    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.

    Edit new

    Categories:
    Previous Create a Cricket Points Table in JavaScript - Part 3Next Create a Cricket Points Table in Javascript - Part 1