Include the unchecked words in the share output

To test this we need a reliable order - not great having a boolean flag
at all, let alone one which is only used in tests - maybe there's a
better way?

Author: dgmstuart

src/components/Card.test.tsx

@@ -12,7 +12,7 @@ describe("'New card' button", () => {
   test("changes the words on the card", () => {
     render(
       <BrowserRouter>
-        <Card wordList={wordList} name={""} url={""} id={""} />
+        <Card wordList={wordList} name={""} url={""} id={""} randomise={true} />
       </BrowserRouter>,
     );
     const initialCells = screen.queryAllByRole("gridcell");
@@ -29,7 +29,7 @@ describe("'New card' button", () => {
   test("clears any stamped cells", () => {
     render(
       <BrowserRouter>
-        <Card wordList={wordList} name={""} url={""} id={""} />
+        <Card wordList={wordList} name={""} url={""} id={""} randomise={true} />
       </BrowserRouter>,
     );
     const cells = screen.queryAllByRole("gridcell");
@@ -48,7 +48,7 @@ describe("'Clear' button", () => {
   test("clears any stamped cells", () => {
     render(
       <BrowserRouter>
-        <Card wordList={wordList} name={""} url={""} id={""} />
+        <Card wordList={wordList} name={""} url={""} id={""} randomise={true} />
       </BrowserRouter>,
     );
     const cells = screen.queryAllByRole("gridcell");
@@ -70,13 +70,47 @@ describe("'Clear' button", () => {
 
 describe("'Share' button", () => {
   test("copies a representation of the card to the clipboard", async () => {
+    const coordinates = [
+      "A1",
+      "A&nbsp;2", // non-breaking space
+      "A&shy;3", // soft hyphen (only displays if the text wraps)
+      "A&shy;&shy;4", // multiple hyphens
+      "B1",
+      "A5", // out of alphabetical order
+      "B2",
+      "B3",
+      "B4",
+      "B5",
+      "C1",
+      "C2",
+      "C3",
+      "C4",
+      "C5",
+      "D1",
+      "D2",
+      "D3",
+      "D4",
+      "D5",
+      "E1",
+      "E2",
+      "E3",
+      "E4",
+      "E5",
+    ];
     const user = userEvent.setup();
     render(
       <BrowserRouter>
-        <Card wordList={wordList} name={""} url={""} id={""} />
+        <Card
+          wordList={coordinates}
+          name={""}
+          url={""}
+          id={""}
+          randomise={false}
+        />
         <textarea rows={5} />
       </BrowserRouter>,
     );
+    fireEvent.click(screen.getByText("New card"));
     const cells = screen.queryAllByRole("gridcell");
     const firstCell = cells[0];
     const lastCell = cells[24];
@@ -94,12 +128,36 @@ describe("'Share' button", () => {
     await user.click(textBox);
     await user.paste();
 
-    const emojiGrid = `
+    const message = `
       🟦⬜⬜⬜⬜
       ⬜⬜⬜⬜⬜
       ⬜⬜⬜⬜⬜
       ⬜⬜⬜⬜⬜
-      ⬜⬜⬜⬜🟦`;
-    expect(textBox).toHaveValue(stripIndent(emojiGrid).trim());
+      ⬜⬜⬜⬜🟦
+      Remaining:
+      - A 2
+      - A3
+      - A4
+      - A5
+      - B1
+      - B2
+      - B3
+      - B4
+      - B5
+      - C1
+      - C2
+      - C3
+      - C4
+      - C5
+      - D1
+      - D2
+      - D3
+      - D4
+      - D5
+      - E1
+      - E2
+      - E3
+      - E4`;
+    expect(textBox).toHaveValue(stripIndent(message).trim());
   });
 });

src/components/Card.tsx

@@ -5,19 +5,22 @@ import Grid from "./Grid";
 import MainLayout from "../layouts/MainLayout";
 import emojiGrid from "../lib/emojiGrid";
 import share from "../lib/share";
-import type { CellProps } from "./Cell";
+import { formatWord } from "../lib/normaliseWord";
+import type { CellProps, CellData } from "./Cell";
 import type { ButtonClickHandler } from "../clickHandler";
 
 const Card: React.FC<{
   id: string;
   name?: string;
   url: string;
   wordList: string[];
+  randomise: boolean;
   videoListUrl?: string;
-}> = ({ id, name, url, wordList, videoListUrl }) => {
+}> = ({ id, name, url, wordList, randomise = true, videoListUrl }) => {
   const [cellDataList, toggleStamped, setNewWords, clearAllCells] = useCard(
     id,
     wordList,
+    randomise,
   );
 
   const cellPropsList: CellProps[] = cellDataList.map((cellData, index) => ({
@@ -26,14 +29,26 @@ const Card: React.FC<{
   }));
 
   const shareCard: ButtonClickHandler = () => {
-    const message = emojiGrid(cellDataList);
+    const wordBullets = remainingWords(cellDataList).map((word) => `- ${word}`);
+    const message = [
+      emojiGrid(cellDataList),
+      "Remaining:",
+      ...wordBullets,
+    ].join("\n");
     share({
       title: `${name} Bingo`,
       text: message,
       url: url,
     });
   };
 
+  const remainingWords = (cellDataList: CellData[]): string[] =>
+    cellDataList
+      .filter((cellData) => !cellData.stamped)
+      .map((cellData) => cellData.word)
+      .map(formatWord)
+      .sort();
+
   const headerContent = (
     <CardActions
       newClick={setNewWords}

src/hooks/useCard.ts

@@ -1,5 +1,5 @@
 import useSession from "../hooks/useSession";
-import shuffle from "../lib/shuffle";
+import shuffle, { ArrayTransformation } from "../lib/shuffle";
 import type { CellData, CellClickHandler } from "../components/Cell";
 import type { ButtonClickHandler } from "../clickHandler";
 
@@ -10,8 +10,22 @@ type GetterSetters = [
   ButtonClickHandler,
 ];
 
-const useCard = (id: string, wordList: string[]): GetterSetters => {
-  const newWords = (): string[] => shuffle(wordList).slice(0, 25);
+const useCard = (
+  id: string,
+  wordList: string[],
+  randomise: boolean,
+): GetterSetters => {
+  const newWords = (): string[] => orderer()(wordList).slice(0, 25);
+
+  const orderer = (): ArrayTransformation => {
+    if (randomise) {
+      return shuffle;
+    } else {
+      return nullOrderer;
+    }
+  };
+
+  const nullOrderer: ArrayTransformation = (array) => array;
 
   const newCellDataList = function (): CellData[] {
     return newWords().map((word) => {

src/lib/normaliseWord.ts

@@ -7,4 +7,9 @@ const normaliseWord = (string: string): string =>
     .replace(new RegExp(htmlSoftHyphen, "g"), unicodeSoftHyphen)
     .replace(new RegExp(htmlNonBreakingSpace, "g"), unicodeNonBreakingSpace);
 
+export const formatWord = (string: string): string =>
+  string
+    .replace(new RegExp(htmlSoftHyphen, "g"), "")
+    .replace(new RegExp(htmlNonBreakingSpace, "g"), " ");
+
 export default normaliseWord;

src/lib/shuffle.ts

@@ -1,7 +1,7 @@
 // Implementation of the Fisher-Yates (aka Knuth) Shuffle
 // Lifted from https://stackoverflow.com/a/2450976
 
-type ArrayTransformation = <T>(array: T[]) => T[];
+export type ArrayTransformation = <T>(array: T[]) => T[];
 
 const shuffle: ArrayTransformation = (array) => {
   let currentIndex = array.length,