afewminutesofcode.com

Create a Cricket Points Table in Javascript - Part 2

Cover Image for Create a Cricket Points Table in Javascript - Part 2

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

Jump To Section

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

You might also like

Cover Image for Check if a string contains a substring in JavaScript

Check if a string contains a substring in JavaScript

Since ES6 you can now use the built in includes method eg string.includes(substring).

Cover Image for Create a Cricket Points Table in Javascript - Part 5

Create a Cricket Points Table in Javascript - Part 5

In this tutorial we are going to build our points table based off our previous work.

Cover Image for Create a Cricket Points Table in Javascript - Part 4

Create a Cricket Points Table in Javascript - Part 4

In this tutorial we are going to complete the rest of the calculations required for the points table.

Cover Image for Create a Cricket Points Table in Javascript - Part 3

Create a Cricket Points Table in Javascript - Part 3

In this tutorial we are going to create functions to calculate the total number of wins, losses, no results and points a team has for the tournament.

Cover Image for Create a Cricket Points Table in Javascript - Part 2

Create a Cricket Points Table in Javascript - Part 2

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

Cover Image for Create a Cricket Points Table in Javascript - Part 1

Create a Cricket Points Table in Javascript - Part 1

In this tutorial we are going to Create a Cricket Points Table in JavaScript.

Cover Image for Create a weather voice assistant in React

Create a weather voice assistant in React

In this tutorial we are going to create a simple React app that will use the speechSynthesis API to speak the current temperature in the city we type in.

Cover Image for Getting to know the many voices in your browser

Getting to know the many voices in your browser

The Speech Synthesis API has been around since about 2014 but still has not gained a huge amount of traction on many sites.

Cover Image for How to create a custom sort order in javascript

How to create a custom sort order in javascript

When sorting an array of objects in JavaScript, usually we will want to sort alphabetically or numerically, but there are also some cases were we might need a custom sort order.

Cover Image for How to sort an array alphabetically in javascript

How to sort an array alphabetically in javascript

To sort an array alphabetically in javascript you can use the sort function.

Cover Image for How to sort an array numerically in javascript

How to sort an array numerically in javascript

To sort an array in javascript use the sort method sort((a, b) => a - b)

Cover Image for How to convert an array into an object in javascript

How to convert an array into an object in javascript

To convert an array into an object we will create a function and give it 2 properties, an array and a key..

Cover Image for How to filter an array in javascript

How to filter an array in javascript

To filter an array in Javascript we can pass in a condition to the built in filter function.