🤖 test(CardLabel): Add stories

README.md

@@ -64,8 +64,8 @@ If the changes are visually acceptable, update the visual regression test
 screenshots via the following steps:
 
 - Remove out of date screenshots:
-  - Linux: `rm tests-e2e/index.screenshots.ts-snapshots/*-linux.png`
-  - macOS: `rm tests-e2e/index.screenshots.ts-snapshots/*-darwin.png`
+  - Linux: `rm tests-e2e/index.screenshots.spec.ts-snapshots/*-linux.png`
+  - macOS: `rm tests-e2e/index.screenshots.spec.ts-snapshots/*-darwin.png`
 - Generate the now expected browser screenshots for your development platform:
   `npm run test-e2e`.
 - If not developing on Linux, generate the now expected browser screenshots for
@@ -77,7 +77,7 @@ screenshots via the following steps:
 
   ```sh
   docker run -it --rm --ipc=host -v "$PWD":/usr/src/app -w /usr/src/app \
-  mcr.microsoft.com/playwright:v1.40.0-jammy /bin/bash
+  mcr.microsoft.com/playwright:v1.40.1-jammy /bin/bash
   ```
 
   - Then, in that container:

jest.config.json

@@ -3,7 +3,7 @@
   "collectCoverageFrom": [
     "src/**/*.{ts,tsx}",
     "!src/**/*.d.ts",
-    "!src/stories/*.stories.ts"
+    "!src/ui-react/*.stories.ts"
   ],
   "coverageThreshold": {
     "global": {

package.json

@@ -21,34 +21,34 @@
     "test-storybook": "storybook build && npx --no-install concurrently --kill-others --success first --names 'Storybook,Test' 'npx --no-install http-server storybook-static --port 6006 --silent > /dev/null 2>&1 | tail -f /dev/null' 'npx --no-install wait-on --timeout 1s tcp:6006 && test-storybook --browsers chromium webkit firefox'"
   },
   "devDependencies": {
-    "@babel/preset-env": "^7.23.3",
+    "@babel/preset-env": "^7.23.5",
     "@babel/preset-react": "^7.23.3",
     "@babel/preset-typescript": "^7.23.3",
     "@jest/globals": "^29.7.0",
-    "@playwright/test": "^1.40.0",
-    "@storybook/addon-essentials": "^7.5.3",
-    "@storybook/addon-interactions": "^7.5.3",
-    "@storybook/addon-links": "^7.5.3",
-    "@storybook/addon-onboarding": "^1.0.8",
-    "@storybook/blocks": "^7.5.3",
-    "@storybook/react": "^7.5.3",
-    "@storybook/react-vite": "^7.5.3",
-    "@storybook/test-runner": "^0.15.2",
+    "@playwright/test": "^1.40.1",
+    "@storybook/addon-essentials": "^7.6.3",
+    "@storybook/addon-interactions": "^7.6.3",
+    "@storybook/addon-links": "^7.6.3",
+    "@storybook/addon-onboarding": "^1.0.9",
+    "@storybook/blocks": "^7.6.3",
+    "@storybook/react": "^7.6.3",
+    "@storybook/react-vite": "^7.6.3",
+    "@storybook/test-runner": "^0.16.0",
     "@storybook/testing-library": "^0.2.2",
     "@testing-library/react": "^14.1.2",
     "@testing-library/user-event": "^14.5.1",
-    "@types/node": "^20.10.0",
-    "@types/react": "^18.2.38",
+    "@types/node": "^20.10.3",
+    "@types/react": "^18.2.42",
     "@types/react-dom": "^18.2.17",
     "@types/seedrandom": "^3.0.8",
-    "@typescript-eslint/eslint-plugin": "^6.12.0",
-    "@typescript-eslint/parser": "^6.12.0",
+    "@typescript-eslint/eslint-plugin": "^6.13.2",
+    "@typescript-eslint/parser": "^6.13.2",
     "babel-jest": "^29.7.0",
     "better-npm-audit": "^3.7.3",
     "concurrently": "^8.2.2",
-    "cspell": "^8.0.0",
-    "eslint": "^8.54.0",
-    "eslint-config-prettier": "^9.0.0",
+    "cspell": "^8.1.2",
+    "eslint": "^8.55.0",
+    "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-jest": "^27.6.0",
     "eslint-plugin-jsx-a11y": "^6.8.0",
     "eslint-plugin-react": "^7.33.2",
@@ -65,11 +65,11 @@
     "prettier": "^3.1.0",
     "process": "^0.11.10",
     "seedrandom": "^3.0.5",
-    "storybook": "^7.5.3",
+    "storybook": "^7.6.3",
     "stylelint": "^15.11.0",
     "stylelint-config-standard": "^34.0.0",
     "typescript": "^5.3.2",
-    "vite": "^5.0.2",
+    "vite": "^5.0.5",
     "wait-on": "^7.2.0"
   },
   "repository": {

src/game/Card.test.ts

@@ -1,25 +1,25 @@
 import {
-  CARD_INDICES,
   CARD_LABELS,
+  CARD_RANKS,
   MAXIMUM_CARD_COUNTING_VALUE,
   createCard,
 } from "./Card";
 import { describe, expect, it } from "@jest/globals";
 
-describe.each(CARD_INDICES)("createCard %p", (rankValue) => {
-  it(`rankValue is ${rankValue}`, () => {
-    expect(createCard(rankValue).rankValue).toBe(rankValue);
+describe.each(CARD_RANKS)("createCard %p", (rank) => {
+  it(`rank is ${rank}`, () => {
+    expect(createCard(rank).rank).toBe(rank);
   });
 
-  const expectedRankLabel = CARD_LABELS[rankValue]!;
+  const expectedRankLabel = CARD_LABELS[rank]!;
 
   it(`rankLabel is ${expectedRankLabel}`, () => {
-    expect(createCard(rankValue).rankLabel).toBe(expectedRankLabel);
+    expect(createCard(rank).rankLabel).toBe(expectedRankLabel);
   });
 
-  const expectedCount = Math.min(rankValue + 1, MAXIMUM_CARD_COUNTING_VALUE);
+  const expectedCount = Math.min(rank + 1, MAXIMUM_CARD_COUNTING_VALUE);
 
   it(`count is ${expectedCount}`, () => {
-    expect(createCard(rankValue).count).toBe(expectedCount);
+    expect(createCard(rank).count).toBe(expectedCount);
   });
 });

src/game/Card.ts

@@ -1,5 +1,21 @@
+export enum Rank {
+  ACE,
+  TWO,
+  THREE,
+  FOUR,
+  FIVE,
+  SIX,
+  SEVEN,
+  EIGHT,
+  NINE,
+  TEN,
+  JACK,
+  QUEEN,
+  KING,
+}
+
 export interface RankedCard {
-  rankValue: number;
+  rank: Rank;
 }
 
 export interface CountedCard {
@@ -13,36 +29,20 @@ export interface Card extends RankedCard, CountedCard {
 export const MAXIMUM_CARD_COUNTING_VALUE = 10;
 export const CARD_LABELS = [..."A23456789".split(""), "10", ..."JQK".split("")];
 
-export const createCard = (rankValue: number): Card => ({
-  count: Math.min(rankValue + 1, MAXIMUM_CARD_COUNTING_VALUE),
+export const createCard = (rank: Rank): Card => ({
+  count: Math.min(rank + 1, MAXIMUM_CARD_COUNTING_VALUE),
+  rank,
   // eslint-disable-next-line security/detect-object-injection
-  rankLabel: CARD_LABELS[rankValue]!,
-  rankValue,
+  rankLabel: CARD_LABELS[rank]!,
 });
 
 export const INDICES_PER_SUIT = 13;
 
-export const CARD_INDICES: readonly number[] = [
-  ...Array(INDICES_PER_SUIT).keys(),
-];
+export const CARD_RANKS: Rank[] = Object.values(Rank).filter(
+  Number.isInteger,
+) as Rank[];
 
-const RANKED_CARDS: readonly Card[] = CARD_INDICES.map(createCard);
-
-enum Rank {
-  ACE,
-  TWO,
-  THREE,
-  FOUR,
-  FIVE,
-  SIX,
-  SEVEN,
-  EIGHT,
-  NINE,
-  TEN,
-  JACK,
-  QUEEN,
-  KING,
-}
+const RANKED_CARDS: readonly Card[] = CARD_RANKS.map(createCard);
 
 type RankName = keyof typeof Rank;
 
@@ -51,7 +51,7 @@ type NamedCards = {
 };
 
 const NAMED_CARDS = Object.fromEntries(
-  CARD_INDICES.map((index) => index as Rank).map((rank) => [
+  CARD_RANKS.map((index) => index as Rank).map((rank) => [
     // eslint-disable-next-line security/detect-object-injection
     Rank[rank] as RankName,
     // eslint-disable-next-line security/detect-object-injection

src/game/dealHand.test.ts

@@ -1,6 +1,5 @@
 import { describe, expect, it } from "@jest/globals";
 import { CARDS_PER_DEALT_HAND } from "./facts";
-import { INDICES_PER_SUIT } from "./Card";
 import { dealHand } from "./dealHand";
 import seedrandom from "seedrandom";
 
@@ -36,18 +35,6 @@ describe("dealHand", () => {
     ]);
   });
 
-  it("returns cards with non-negative ranks", () => {
-    expect(dealHand(mathRandom).every((card) => card.rankValue >= 0)).toBe(
-      true,
-    );
-  });
-
-  it(`returns cards with ranks less than ${INDICES_PER_SUIT}`, () => {
-    expect(
-      dealHand(mathRandom).every((card) => card.rankValue < INDICES_PER_SUIT),
-    ).toBe(true);
-  });
-
   it("return cards with kept set to true", () => {
     expect(dealHand(mathRandom).every((card) => card.kept)).toBe(true);
   });

src/game/dealHand.ts

@@ -5,9 +5,9 @@ import { DealtCard } from "./DealtCard";
 export const dealHand = (generateRandomNumber: () => number): DealtCard[] =>
   Array.from({ length: CARDS_PER_DEALT_HAND }, () =>
     Math.floor(generateRandomNumber() * INDICES_PER_SUIT),
-  ).map((rankValue, dealOrder) => ({
+  ).map((rank, dealOrder) => ({
     // eslint-disable-next-line security/detect-object-injection
-    ...CARDS[rankValue]!,
+    ...CARDS[rank]!,
     dealOrder,
     kept: true,
   }));

src/game/discardIsComplete.test.ts

@@ -22,8 +22,8 @@ describe("discardIsComplete", () => {
     ],
   ])("%s", (_, keptCount, expected) => {
     const hand = [...Array(CARDS_PER_DEALT_HAND).keys()].map(
-      (rankValue, dealOrder) => ({
-        ...createCard(rankValue),
+      (rank, dealOrder) => ({
+        ...createCard(rank),
         dealOrder,
         kept: dealOrder < keptCount,
       }),

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!.rank === second!.rank,
   ).length * HAND_POINTS.PAIR;
 
 const COUNT = {
@@ -39,7 +39,7 @@ enum RunLength {
 
 const runLengthPoints = (keep: readonly RankedCard[], runLength: RunLength) =>
   [...new Combination(keep, runLength)]
-    .map((combination) => combination.map((card) => card.rankValue))
+    .map((combination) => combination.map((card) => card.rank))
     .map((combination) =>
       [...combination].sort((rank1, rank2) => rank1 - rank2),
     )

src/ui-react/CardLabel.module.css

@@ -0,0 +1,9 @@
+@import url("./vars.css");
+
+.card-label {
+  font-family: var(--card-font-family);
+}
+
+.ten {
+  transform: scaleX(0.5) translateX(-0.3em);
+}

src/ui-react/PossibleHandCard.module.css.d.ts → src/ui-react/CardLabel.module.css.d.ts

@@ -1,5 +1,5 @@
 declare const classes: {
-  readonly card: string;
+  readonly cardLabel: string;
   readonly ten: string;
 };
 export = classes;

src/ui-react/CardLabel.stories.ts

@@ -0,0 +1,51 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { CARDS } from "../game/Card";
+import { CardLabel } from "./CardLabel";
+
+const meta = {
+  component: CardLabel,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  title: "CardLabel",
+} satisfies Meta<typeof CardLabel>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Ace: Story = {
+  args: {
+    rank: CARDS.ACE.rank,
+  },
+};
+
+export const Five: Story = {
+  args: {
+    rank: CARDS.FIVE.rank,
+  },
+};
+
+export const Nine: Story = {
+  args: {
+    rank: CARDS.NINE.rank,
+  },
+};
+
+export const Ten: Story = {
+  args: {
+    rank: CARDS.TEN.rank,
+  },
+};
+
+export const Jack: Story = {
+  args: {
+    rank: CARDS.JACK.rank,
+  },
+};
+
+export const King: Story = {
+  args: {
+    rank: CARDS.KING.rank,
+  },
+};