Handle multiple crosswords on one page

libs/@guardian/react-crossword/src/@types/crossword.ts

@@ -68,3 +68,5 @@ export type Dimensions = {
 };
 
 export type Axis = 'x' | 'y';
+
+export type GetID = (arg0: string) => string;

libs/@guardian/react-crossword/src/components/Clue.stories.tsx

@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { groupedClues as data } from '../../stories/formats/grouped-clues';
+import { GenerateIdProvider } from '../context/GenerateIdContext';
 import { ThemeContext } from '../context/ThemeContext';
 import { defaultTheme } from '../theme';
 import { Clue } from './Clue';
@@ -16,6 +17,11 @@ const meta: Meta<typeof Clue> = {
 				<Story />
 			</ThemeContext.Provider>
 		),
+		(Story) => (
+			<GenerateIdProvider id={data.id}>
+				<Story />
+			</GenerateIdProvider>
+		),
 	],
 };
 

libs/@guardian/react-crossword/src/components/Clue.tsx

@@ -2,6 +2,7 @@ import { css } from '@emotion/react';
 import { textSans14 } from '@guardian/source/foundations';
 import { memo, useContext } from 'react';
 import type { CAPIEntry } from '../@types/CAPI';
+import { GenerateIdContext } from '../context/GenerateIdContext';
 import { ThemeContext } from '../context/ThemeContext';
 
 interface Props {
@@ -18,11 +19,13 @@ const ClueComponent = ({
 	isComplete,
 }: Props) => {
 	const theme = useContext(ThemeContext);
+	const generateId = useContext(GenerateIdContext);
 
 	return (
 		<div
 			tabIndex={-1}
-			id={entry.id}
+			id={generateId(`${entry.id}`)}
+			data-entry-id={entry.id}
 			role="option"
 			aria-selected={isHighlighted}
 			css={css`
@@ -33,7 +36,7 @@ const ClueComponent = ({
 						: 'transparent'};
 				cursor: ${isHighlighted ? 'default' : 'pointer'};
 				opacity: ${isComplete ? 0.5 : 1};
-				${textSans14}
+				${textSans14};
 				padding: 0.5rem 0;
 				color: currentColor;
 			`}

libs/@guardian/react-crossword/src/components/Clues.stories.tsx

@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { groupedClues as data } from '../../stories/formats/grouped-clues';
 import { progress } from '../../stories/formats/grouped-clues.progress';
+import { GenerateIdProvider } from '../context/GenerateIdContext';
 import { ProgressContext } from '../context/ProgressContext';
 import { ThemeContext } from '../context/ThemeContext';
 import { defaultTheme } from '../theme';
@@ -32,6 +33,11 @@ const meta: Meta<typeof Clues> = {
 				<Story />
 			</ThemeContext.Provider>
 		),
+		(Story) => (
+			<GenerateIdProvider id={data.id}>
+				<Story />
+			</GenerateIdProvider>
+		),
 		(Story) => (
 			<div role="application">
 				<Story />

libs/@guardian/react-crossword/src/components/Clues.tsx

@@ -5,13 +5,14 @@ import { useContext } from 'react';
 import type { Entries } from '../@types/crossword';
 import type { Direction } from '../@types/Direction';
 import type { EntryID } from '../@types/Entry';
+import { GenerateIdContext } from '../context/GenerateIdContext';
 import { ProgressContext } from '../context/ProgressContext';
 import { ThemeContext } from '../context/ThemeContext';
 import { Clue } from './Clue';
 
 const title = css`
 	text-transform: capitalize;
-	${headlineBold17}
+	${headlineBold17};
 	color: currentColor;
 `;
 
@@ -23,6 +24,7 @@ type Props = {
 
 export const Clues = ({ direction, entries, currentEntryId }: Props) => {
 	const { progress } = useContext(ProgressContext);
+	const generateId = useContext(GenerateIdContext);
 	const theme = useContext(ThemeContext);
 	const entriesForClues = [];
 
@@ -42,18 +44,18 @@ export const Clues = ({ direction, entries, currentEntryId }: Props) => {
 		>
 			<label
 				css={title}
-				id={`${direction}-label`}
-				htmlFor={`${direction}-hints`}
+				id={generateId(`${direction}-label`)}
+				htmlFor={generateId(`${direction}-hints`)}
 			>
 				{direction}
 			</label>
 			<DashedLines count={1} color={theme.border} />
 			<div
 				tabIndex={0}
-				id={`${direction}-hints`}
+				id={generateId(`${direction}-hints`)}
 				role="listbox"
-				aria-labelledby={`${direction}-label`}
-				aria-activedescendant={currentEntryId}
+				aria-labelledby={generateId(`${direction}-label`)}
+				aria-activedescendant={currentEntryId && generateId(currentEntryId)}
 			>
 				{entriesForClues
 					.sort((a, b) => a.number - b.number)

libs/@guardian/react-crossword/src/components/Crossword.stories.tsx

@@ -1,6 +1,7 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryFn, StoryObj } from '@storybook/react';
 import { groupedClues as data } from '../../stories/formats/grouped-clues';
 import { progress } from '../../stories/formats/grouped-clues.progress';
+import { quick as quickData } from '../../stories/formats/quick';
 import { Crossword } from './Crossword';
 
 const meta: Meta<typeof Crossword> = {
@@ -16,3 +17,12 @@ export default meta;
 type Story = StoryObj<typeof Crossword>;
 
 export const Default: Story = {};
+
+export const MultiplePlayers: StoryFn = () => {
+	return (
+		<>
+			<Crossword data={data} progress={[]} />
+			<Crossword data={quickData} progress={[]} />
+		</>
+	);
+};

libs/@guardian/react-crossword/src/components/Crossword.tsx

@@ -6,6 +6,10 @@ import type { CAPICrossword } from '../@types/CAPI';
 import type { Coords, Progress, Theme } from '../@types/crossword';
 import type { Direction } from '../@types/Direction';
 import type { EntryID } from '../@types/Entry';
+import {
+	GenerateIdContext,
+	GenerateIdProvider,
+} from '../context/GenerateIdContext';
 import { ProgressContext } from '../context/ProgressContext';
 import { ThemeContext } from '../context/ThemeContext';
 import { useProgress } from '../hooks/useProgress';
@@ -288,7 +292,9 @@ export const Crossword = ({
 			const target = event.target as HTMLElement;
 
 			const entry = entries.get(
-				target.closest('[role="option"][id]')?.id as EntryID,
+				target
+					.closest('[role="option"][data-entry-id]')
+					?.getAttribute('data-entry-id') as EntryID,
 			);
 
 			if (entry) {
@@ -315,76 +321,78 @@ export const Crossword = ({
 
 	return (
 		<ThemeContext.Provider value={theme}>
-			<ProgressContext.Provider
-				value={{ progress, setProgress, setCellProgress, clearProgress }}
-			>
-				<div
-					role="application"
-					ref={applicationRef}
-					css={css`
-						display: flex;
-						flex-direction: row;
-						flex-wrap: wrap;
-						min-width: ${theme.clueMinWidthRem}rem;
-						gap: ${space[4]}px;
-					`}
+			<GenerateIdProvider id={data.id}>
+				<ProgressContext.Provider
+					value={{ progress, setProgress, setCellProgress, clearProgress }}
 				>
 					<div
-						css={css`
-							max-width: ${gridWidth}px;
-							flex-basis: 100%;
-						`}
-					>
-						<Grid
-							setCurrentCell={setCurrentCell}
-							setCurrentEntryId={setCurrentEntryId}
-							cells={cells}
-							entries={entries}
-							separators={separators}
-							currentCell={currentCell}
-							currentEntryId={currentEntryId}
-							dimensions={data.dimensions}
-						/>
-						<Controls
-							cells={cells}
-							solutionsAvailable={data.solutionAvailable}
-							currentEntryId={currentEntryId}
-						/>
-						<p
-							css={css`
-								${textSans12};
-								font-style: italic;
-								color: ${theme.text};
-							`}
-						>
-							{isStored
-								? 'Crosswords are saved automatically.'
-								: 'Crossword will not be saved.'}
-						</p>
-					</div>
-					<div
+						role="application"
+						ref={applicationRef}
 						css={css`
 							display: flex;
 							flex-direction: row;
 							flex-wrap: wrap;
-							flex: 1;
+							min-width: ${theme.clueMinWidthRem}rem;
 							gap: ${space[4]}px;
-							align-content: flex-start;
 						`}
 					>
-						<Clues
-							direction="across"
-							entries={entries}
-							currentEntryId={currentEntryId}
-						/>
-						<Clues
-							direction="down"
-							entries={entries}
-							currentEntryId={currentEntryId}
-						/>
+						<div
+							css={css`
+								max-width: ${gridWidth}px;
+								flex-basis: 100%;
+							`}
+						>
+							<Grid
+								setCurrentCell={setCurrentCell}
+								setCurrentEntryId={setCurrentEntryId}
+								cells={cells}
+								entries={entries}
+								separators={separators}
+								currentCell={currentCell}
+								currentEntryId={currentEntryId}
+								dimensions={data.dimensions}
+							/>
+							<Controls
+								cells={cells}
+								solutionsAvailable={data.solutionAvailable}
+								currentEntryId={currentEntryId}
+							/>
+							<p
+								css={css`
+									${textSans12};
+									font-style: italic;
+									color: ${theme.text};
+								`}
+							>
+								{isStored
+									? 'Crosswords are saved automatically.'
+									: 'Crossword will not be saved.'}
+							</p>
+						</div>
+						<div
+							css={css`
+								display: flex;
+								flex-direction: row;
+								flex-wrap: wrap;
+								flex: 1;
+								gap: ${space[4]}px;
+								align-content: flex-start;
+							`}
+						>
+							<Clues
+								direction="across"
+								entries={entries}
+								currentEntryId={currentEntryId}
+							/>
+							<Clues
+								direction="down"
+								entries={entries}
+								currentEntryId={currentEntryId}
+							/>
+						</div>
 					</div>
-				</div>
-			</ProgressContext.Provider>
+				</ProgressContext.Provider>
+			</GenerateIdProvider>
 		</ThemeContext.Provider>
 	);
 };

libs/@guardian/react-crossword/src/context/GenerateIdContext.tsx

@@ -0,0 +1,20 @@
+import { createContext, useCallback } from 'react';
+import type { Crossword } from '../@types/crossword';
+
+export const GenerateIdContext = createContext((_: string) => _);
+
+export const GenerateIdProvider = ({
+	id,
+	children,
+}: {
+	id: Crossword['id'];
+	children: React.ReactNode;
+}) => {
+	const generateId = useCallback((_: string) => `${_}-${id}`, [id]);
+
+	return (
+		<GenerateIdContext.Provider value={generateId}>
+			{children}
+		</GenerateIdContext.Provider>
+	);
+};