Drop CPU arch dependent browser tests

Both Firefox and Safari on Linux desktop were rendering differently on
arm64 and amd64.  Technically fixable by running amd64 images on arm64,
but parcel was hanging on startup, causing Playwright to fail to run.

It is possible we're running into Parcel issue #8978:
parcel-bundler/parcel#8978.

Also updated dependencies and fixed audit vulnerabilities.

.eslintrc.json

@@ -54,6 +54,7 @@
  "@typescript-eslint/no-non-null-assertion": ["off"],
  "@typescript-eslint/unbound-method": "off",
  "capitalized-comments": ["error", "always", { "ignorePattern": "jscpd" }],
+ "dot-notation": ["error", { "allowPattern": "^CI$" }],
  "func-style": "off",
  "id-length": ["error", { "exceptions": ["_"] }],
  "max-lines": ["error", { "max": 343 }],

README.md

@@ -22,8 +22,9 @@ Code in `main` is automatically built on `git push` and deployed to [GitHub Page
 - Remove out of date screenshots: `rm tests-e2e/index.spec.ts-snapshots/*.png`
 - Generate now expected browser screenshots:
  - `npm run test-e2e`
- - If on macOS:
- - Run the Playwright Docker image: `docker run -it --rm --ipc=host -v "$PWD":/usr/src/app -w /usr/src/app mcr.microsoft.com/playwright:v1.34.3-jammy /bin/bash`:
- - Install `make` and `g++` to ensure that Parcel can run: `apt update && apt install make gcc g++`
- - Remove any potentially non-Linux build or install artifacts then install: `npm install && npm run clean && rm -rf node_modules && npm install`
- - Generate now expected browser screenshots on Linux (required for GitHub Actions continuous integration to pass): `npm run test-e2e`
+ - If not on Linux, also:
+ - Run the Playwright Docker image: `docker run -it --rm --ipc=host -v "$PWD":/usr/src/app -w /usr/src/app mcr.microsoft.com/playwright:v1.36.0-jammy /bin/bash`:
+ - Install `make` and `g++` to ensure that Parcel can run: `apt update && apt install --yes make gcc g++`,
+ - Remove any potentially non-Linux build or install artifacts then install: `npm install && npm run clean && rm -rf node_modules && npm install`.
+ - Generate now expected browser screenshots on Linux (required for GitHub Actions continuous integration to pass): `npm run test-e2e`, and
+ - Remove Linux-specific build output: `rm -rf node_modules`.

package.json

@@ -31,8 +31,8 @@
  "@types/react": "^18.0.34",
  "@types/react-dom": "^18.0.6",
  "@types/seedrandom": "^3.0.5",
- "@typescript-eslint/eslint-plugin": "^5.58.0",
- "@typescript-eslint/parser": "^5.58.0",
+ "@typescript-eslint/eslint-plugin": "^6.2.0",
+ "@typescript-eslint/parser": "^6.2.0",
  "babel-jest": "^29.5.0",
  "cspell": "^6.26.3",
  "eslint": "^8.38.0",
@@ -46,11 +46,11 @@
  "jest-environment-jsdom": "^29.5.0",
  "jscpd": "^3.5.3",
  "parcel": "^2.8.3",
- "prettier": "^2.8.4",
+ "prettier": "^3.0.0",
  "process": "^0.11.10",
  "seedrandom": "^3.0.5",
  "stylelint": "^15.2.0",
- "stylelint-config-standard": "^33.0.0",
+ "stylelint-config-standard": "^34.0.0",
  "typescript": "^5.0.4"
  },
  "repository": {
@@ -70,6 +70,7 @@
  "homepage": "https://github.com/markafitzgerald1/cribbage-trainer#readme",
  "dependencies": {
  "js-combinatorics": "^2.1.1",
+ "Package": "^0.0.1",
  "react": "^18.2.0",
  "react-dom": "^18.2.0"
  }

playwright.config.ts

@@ -19,14 +19,6 @@ export default defineConfig({
  name: "Mobile Safari",
  use: { ...devices["iPhone 14"] },
  },
- {
- name: "webkit",
- use: { ...devices["Desktop Safari"] },
- },
- {
- name: "firefox",
- use: { ...devices["Desktop Firefox"] },
- },
  ],
  reporter: "html",
  retries: process.env["CI"] ? continuousIntegrationRetryLimit : 0,

src/analysis/analysis.test.ts

@@ -22,13 +22,13 @@ describe("allScoredKeepDiscardsByScoreDescending", () => {
  it("two card deal with duplicate cards throws", () => {
  const cards = [c.ACE, c.ACE];
  expect(() => allScoredKeepDiscardsByScoreDescending(cards)).toThrow(
- "Duplicate cards exist"
+ "Duplicate cards exist",
  );
  });
 
  function expectAllScoredKeepDiscardsByScoreDescendingToStrictEqual(
  cards: readonly Card[],
- points: readonly number[]
+ points: readonly number[],
  ): void {
  const scoreKeepDiscards: ScoredKeepDiscard<Card>[] = [];
  let pointsIndex = 0;
@@ -37,7 +37,7 @@ describe("allScoredKeepDiscardsByScoreDescending", () => {
  scoreKeepDiscards.push({
  discard: [cards[index1]!, cards[index2]!],
  keep: cards.filter(
- (_, index) => index !== index1 && index !== index2
+ (_, index) => index !== index1 && index !== index2,
  ),
  points: points[pointsIndex]!,
  });
@@ -47,28 +47,28 @@ describe("allScoredKeepDiscardsByScoreDescending", () => {
  scoreKeepDiscards.sort((card1, card2) => card2.points - card1.points);
 
  expect(allScoredKeepDiscardsByScoreDescending(cards)).toStrictEqual(
- scoreKeepDiscards
+ scoreKeepDiscards,
  );
  }
 
  it("two card deal", () => {
  expectAllScoredKeepDiscardsByScoreDescendingToStrictEqual(
  [c.ACE, c.TWO],
- [0]
+ [0],
  );
  });
 
  it("three card deal", () => {
  expectAllScoredKeepDiscardsByScoreDescendingToStrictEqual(
  [c.JACK, c.FOUR, c.FIVE],
- [0, 0, 0]
+ [0, 0, 0],
  );
  });
 
  it("four card random ranks deal", () => {
  expectAllScoredKeepDiscardsByScoreDescendingToStrictEqual(
  [c.TEN, c.TWO, c.EIGHT, c.FIVE],
- [0, 0, 0, FIFTEEN_TWO, 0, 0]
+ [0, 0, 0, FIFTEEN_TWO, 0, 0],
  );
  });
 
@@ -86,7 +86,7 @@ describe("allScoredKeepDiscardsByScoreDescending", () => {
  0,
  FIFTEEN_TWO,
  0,
- ]
+ ],
  );
  });
 
@@ -109,7 +109,7 @@ describe("allScoredKeepDiscardsByScoreDescending", () => {
  RUN,
  FIFTEEN_SIX + RUN,
  RUN,
- ]
+ ],
  );
  });
 });

src/analysis/analysis.ts

@@ -10,7 +10,7 @@ export interface ScoredKeepDiscard<T extends Card> {
 }
 
 export const allScoredKeepDiscardsByScoreDescending = <T extends Card>(
- cards: readonly T[]
+ cards: readonly T[],
 ): ScoredKeepDiscard<T>[] => {
  if (new Set(cards).size !== cards.length) {
  throw new Error("Duplicate cards exist");

src/game/Card.ts

@@ -53,7 +53,7 @@ const NAMED_CARDS = Object.fromEntries(
  CARD_INDICES.map((index) => index as Rank).map((rank) => [
  Rank[rank] as RankName,
  RANKED_CARDS[rank],
- ])
+ ]),
 ) as NamedCards;
 
 type Cards = {

src/game/dealHand.test.ts

@@ -18,7 +18,7 @@ describe("dealHand", () => {
  it("returns the same cards on uses of equal random number generators", () => {
  const seed = "my fixed seed value";
  expect(dealHand(seedrandom(seed))).toStrictEqual(
- dealHand(seedrandom(seed))
+ dealHand(seedrandom(seed)),
  );
  });
 
@@ -38,13 +38,13 @@ describe("dealHand", () => {
 
  it("returns cards with non-negative ranks", () => {
  expect(dealHand(mathRandom).every((card) => card.rankValue >= 0)).toBe(
- true
+ true,
  );
  });
 
  it(`returns cards with ranks less than ${INDICES_PER_SUIT}`, () => {
  expect(
- dealHand(mathRandom).every((card) => card.rankValue < INDICES_PER_SUIT)
+ dealHand(mathRandom).every((card) => card.rankValue < INDICES_PER_SUIT),
  ).toBe(true);
  });
 

src/game/dealHand.ts

@@ -3,7 +3,7 @@ import { CARDS_PER_DEALT_HAND } from "../game/facts";
 
 export const dealHand = (generateRandomNumber: () => number) =>
  Array.from({ length: CARDS_PER_DEALT_HAND }, () =>
- Math.floor(generateRandomNumber() * INDICES_PER_SUIT)
+ Math.floor(generateRandomNumber() * INDICES_PER_SUIT),
  ).map((rankValue, dealOrder) => ({
  ...CARDS[rankValue]!,
  dealOrder,

src/game/discardIsComplete.test.ts

@@ -26,7 +26,7 @@ describe("discardIsComplete", () => {
  ...createCard(rankValue),
  dealOrder,
  kept: dealOrder < keptCount,
- })
+ }),
  );
  expect(discardIsComplete(hand)).toBe(expected);
  });

src/game/scoring.test.ts

@@ -15,7 +15,7 @@ const {
 const expectTypePoints = (
  keep: readonly Card[],
  type: keyof HandPoints,
- expectedPoints: number
+ expectedPoints: number,
 ) => expect(handPoints(keep)[type]).toBe(expectedPoints);
 
 describe("handPoints", () => {
@@ -89,7 +89,7 @@ describe("handPoints", () => {
  describe("fifteens", () => {
  const expectFifteensPoints = (
  keep: readonly Card[],
- expectedPoints: number
+ expectedPoints: number,
  ) => expectTypePoints(keep, "fifteens", expectedPoints);
 
  it("empty hand", () => {
@@ -284,15 +284,15 @@ describe("handPoints", () => {
  const expectedRunCount = 2;
  expectTotalPoints(
  parseCards("6788"),
- FIFTEEN_FOUR + PAIR + expectedRunCount * RUN
+ FIFTEEN_FOUR + PAIR + expectedRunCount * RUN,
  );
  });
 
  it("four fifteens and two pairs", () => {
  const expectedPairCount = 2;
  expectTotalPoints(
  parseCards("TT55"),
- FIFTEEN_EIGHT + expectedPairCount * PAIR
+ FIFTEEN_EIGHT + expectedPairCount * PAIR,
  );
  });
 

src/game/scoring.ts

@@ -17,7 +17,7 @@ export const HAND_POINTS = {
 
 const pairsPoints = (keep: readonly RankedCard[]) =>
  [...new Combination(keep, CARDS_PER_PAIR)].filter(
- ([first, second]) => first!.rankValue === second!.rankValue
+ ([first, second]) => first!.rankValue === second!.rankValue,
  ).length * HAND_POINTS.PAIR;
 
 const COUNT = {
@@ -29,7 +29,7 @@ const fifteensPoints = (keep: readonly CountedCard[]) =>
  (possibleFifteen) =>
  possibleFifteen
  .map((card) => card.count)
- .reduce((count1, count2) => count1 + count2, 0) === COUNT.FIFTEEN
+ .reduce((count1, count2) => count1 + count2, 0) === COUNT.FIFTEEN,
  ).length * HAND_POINTS.FIFTEEN_TWO;
 
 enum RunLength {
@@ -41,13 +41,13 @@ const runLengthPoints = (keep: readonly RankedCard[], runLength: RunLength) =>
  [...new Combination(keep, runLength)]
  .map((combination) => combination.map((card) => card.rankValue))
  .map((combination) =>
- [...combination].sort((rank1, rank2) => rank1 - rank2)
+ [...combination].sort((rank1, rank2) => rank1 - rank2),
  )
  .filter((combination) =>
  combination
  .slice(1)
  .map((rank, index) => rank - combination[index]!)
- .every((diff) => diff === 1)
+ .every((diff) => diff === 1),
  ).length *
  HAND_POINTS.RUN_PER_CARD *
  runLength;

src/index.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
  <head>
  <meta charset="utf-8" />

src/index.test.tsx

@@ -30,7 +30,7 @@ describe("app entrypoint", () => {
  expect(renderMock).toHaveBeenCalledWith(
  <StrictMode>
  <Trainer generateRandomNumber={Math.random} />
- </StrictMode>
+ </StrictMode>,
  );
  } finally {
  jest.resetAllMocks();

src/index.tsx

@@ -7,8 +7,8 @@ ReactDOMClient.createRoot(document.querySelector("#trainer")!).render(
  <StrictMode>
  <Trainer
  generateRandomNumber={create(
- new URLSearchParams(window.location.search).get("seed")
+ new URLSearchParams(window.location.search).get("seed"),
  )}
  />
- </StrictMode>
+ </StrictMode>,
 );

src/ui-react/Calculation.test.tsx

@@ -24,18 +24,18 @@ describe("calculation component", () => {
  keep={keep}
  points={points}
  sortOrder={sortOrder}
- />
+ />,
  );
 
  const keepString = handToSortedString(keep, sortOrder);
  const discardString = handToSortedString(discard, sortOrder);
 
  const pattern = new RegExp(
  `${keepString}.*-.*${discardString}.*\\s${points}\\spoints`,
- "u"
+ "u",
  );
 
  expect(container.textContent).toMatch(pattern);
- }
+ },
  );
 });

src/ui-react/Calculation.tsx

@@ -4,10 +4,10 @@ import React from "react";
 import { SortOrder } from "../ui/SortOrder";
 
 interface CalculationProps {
- keep: readonly DealtCard[];
- discard: readonly DealtCard[];
- points: number;
- sortOrder: SortOrder;
+ readonly keep: readonly DealtCard[];
+ readonly discard: readonly DealtCard[];
+ readonly points: number;
+ readonly sortOrder: SortOrder;
 }
 
 export function Calculation({

src/ui-react/Calculations.test.tsx

@@ -19,7 +19,7 @@ describe("calculations component", () => {
  <Calculations
  dealtCards={dealtHand}
  sortOrder={SortOrder.Ascending}
- />
+ />,
  );
 
  return { container, dealtHand };
@@ -37,11 +37,11 @@ describe("calculations component", () => {
  const { container } = dealAndRender();
 
  const nCombs = Number(
- new Combination(dealHand(mathRandom), CARDS_PER_DISCARD).length
+ new Combination(dealHand(mathRandom), CARDS_PER_DISCARD).length,
  );
  const handPartsPerDeal = 2;
  expect(container.querySelectorAll(".keep-discard")).toHaveLength(
- nCombs * handPartsPerDeal
+ nCombs * handPartsPerDeal,
  );
  });
 
@@ -53,13 +53,13 @@ describe("calculations component", () => {
  expect(container.textContent).toContain(
  `${handToSortedString(
  scoredKeepDiscard.keep,
- SortOrder.Ascending
+ SortOrder.Ascending,
  )}-${handToSortedString(
  scoredKeepDiscard.discard,
- SortOrder.Ascending
- )} for ${scoredKeepDiscard.points} points`
+ SortOrder.Ascending,
+ )} for ${scoredKeepDiscard.points} points`,
  );
- }
+ },
  );
  });
 });