Add the Anagram helper to the Interactive grid (#1832)

Add the anagram helper to the interactive grid Add toggle to show Anagram helper in interactive grid remove unneeded CSS from anagram helper component Make Controls one exported component Only show clue controls if there is a clue selected
guardian · Dec 3, 2024 · b740b35 · b740b35
1 parent 240c044
commit b740b35
Show file tree

Hide file tree

Showing 4 changed files with 65 additions and 57 deletions.
diff --git a/libs/@guardian/react-crossword/src/components/AnagramHelper.tsx b/libs/@guardian/react-crossword/src/components/AnagramHelper.tsx
@@ -103,13 +103,10 @@ export const AnagramHelper = ({ onClickClose }: AnagramHelperProps) => {
 		<div
 			css={css`
 				display: flex;
-				box-sizing: border-box;
 				flex-direction: column;
 				background-color: ${theme.anagramHelperBackground};
 				padding: 10px;
 				min-height: fit-content;
-				width: fit-content;
-				max-width: 500px;
 			`}
 		>
 			<div

diff --git a/libs/@guardian/react-crossword/src/components/Controls.stories.tsx b/libs/@guardian/react-crossword/src/components/Controls.stories.tsx
@@ -6,9 +6,7 @@ import { Controls } from './Controls';
 const meta: Meta<typeof Controls> = {
 	component: Controls,
 	title: 'Components/Controls',
-	args: {
-		progress: [],
-	},
+	args: {},
 	decorators: [
 		(Story) => {
 			localStorage.removeItem(data.id);
@@ -27,26 +25,19 @@ type Story = StoryObj<typeof Controls>;
 
 export const Default: Story = {};
 
-export const ClueControls: StoryFn = () => {
-	return <Controls.Clues />;
+export const WithAnagramHelperToggle: StoryFn = () => {
+	return <Controls toggleAnagramHelper={() => {}} />;
 };
 
-export const GridControls: StoryFn = () => {
-	return <Controls.Grid />;
-};
-
-export const CustomLayout: StoryFn = () => {
-	return (
-		<div
-			style={{
-				display: 'flex',
-				flexDirection: 'column-reverse',
-				alignItems: 'flex-start',
-				gap: 5,
-			}}
-		>
-			<Controls.Clues />
-			<Controls.Grid />
-		</div>
-	);
+export const NoSelectedEntry: Story = {
+	decorators: [
+		(Story) => {
+			localStorage.removeItem(data.id);
+			return (
+				<ContextProvider data={data}>
+					<Story />
+				</ContextProvider>
+			);
+		},
+	],
 };
diff --git a/libs/@guardian/react-crossword/src/components/Controls.tsx b/libs/@guardian/react-crossword/src/components/Controls.tsx
@@ -3,6 +3,7 @@ import { space } from '@guardian/source/foundations';
 import type { ThemeButton } from '@guardian/source/react-components';
 import { useCallback } from 'react';
 import type { Cell, Progress } from '../@types/crossword';
+import type { EntryID } from '../@types/Entry';
 import { useCurrentClue } from '../context/CurrentClue';
 import { useData } from '../context/Data';
 import { useProgress } from '../context/Progress';
@@ -17,11 +18,16 @@ const controlStyles = css`
 	gap: ${space[1]}px;
 	padding: ${space[1]}px 0;
 `;
-const ClueControls = () => {
+const ClueControls = ({
+	toggleAnagramHelper,
+	currentEntryId,
+}: {
+	toggleAnagramHelper?: () => void;
+	currentEntryId: EntryID;
+}) => {
 	const theme = useTheme();
 	const { cells, solutionAvailable } = useData();
-	const { progress, setCellProgress, clearProgress } = useProgress();
-	const { currentEntryId } = useCurrentClue();
+	const { progress, setCellProgress } = useProgress();
 
 	const crosswordButtonTheme: Partial<ThemeButton> = {
 		backgroundPrimary: theme.buttonBackground,
@@ -30,7 +36,7 @@ const ClueControls = () => {
 
 	const revealEntry = useCallback(() => {
 		for (const cell of cells.values()) {
-			if (currentEntryId && cell.group?.includes(currentEntryId)) {
+			if (cell.group?.includes(currentEntryId)) {
 				setCellProgress({
 					x: cell.x,
 					y: cell.y,
@@ -42,7 +48,7 @@ const ClueControls = () => {
 
 	const clearEntry = useCallback(() => {
 		for (const cell of cells.values()) {
-			if (currentEntryId && cell.group?.includes(currentEntryId)) {
+			if (cell.group?.includes(currentEntryId)) {
 				setCellProgress({
 					x: cell.x,
 					y: cell.y,
@@ -69,34 +75,32 @@ const ClueControls = () => {
 
 	const checkEntry = useCallback(() => {
 		for (const cell of cells.values()) {
-			if (currentEntryId && cell.group?.includes(currentEntryId)) {
+			if (cell.group?.includes(currentEntryId)) {
 				checkCell(cell);
 			}
 		}
 	}, [cells, checkCell, currentEntryId]);
 
 	return (
 		<div css={controlStyles}>
-			{currentEntryId && (
+			<Button onSuccess={clearEntry} theme={crosswordButtonTheme}>
+				Clear Word
+			</Button>
+			{solutionAvailable && (
 				<>
-					<Button onSuccess={clearEntry} theme={crosswordButtonTheme}>
-						Clear Word
+					<Button onSuccess={checkEntry} theme={crosswordButtonTheme}>
+						Check Word
+					</Button>
+					<Button onSuccess={revealEntry} theme={crosswordButtonTheme}>
+						Reveal Word
 					</Button>
-					{solutionAvailable && (
-						<>
-							<Button onSuccess={checkEntry} theme={crosswordButtonTheme}>
-								Check Word
-							</Button>
-							<Button onSuccess={revealEntry} theme={crosswordButtonTheme}>
-								Reveal Word
-							</Button>
-						</>
-					)}
 				</>
 			)}
-			<Button onSuccess={clearProgress} theme={crosswordButtonTheme}>
-				Anagram Helper
-			</Button>
+			{toggleAnagramHelper && (
+				<Button onSuccess={toggleAnagramHelper} theme={crosswordButtonTheme}>
+					Anagram Helper
+				</Button>
+			)}
 		</div>
 	);
 };
@@ -157,14 +161,21 @@ const GridControls = () => {
 	);
 };
 
-export const Controls = () => {
+export const Controls = ({
+	toggleAnagramHelper,
+}: {
+	toggleAnagramHelper?: () => void;
+}) => {
+	const { currentEntryId } = useCurrentClue();
 	return (
 		<>
-			<ClueControls />
+			{currentEntryId && (
+				<ClueControls
+					toggleAnagramHelper={toggleAnagramHelper}
+					currentEntryId={currentEntryId}
+				/>
+			)}
 			<GridControls />
 		</>
 	);
 };
-
-Controls.Clues = ClueControls;
-Controls.Grid = GridControls;
diff --git a/libs/@guardian/react-crossword/src/components/InteractiveGrid.tsx b/libs/@guardian/react-crossword/src/components/InteractiveGrid.tsx
@@ -1,13 +1,22 @@
-import { memo } from 'react';
+import { memo, useState } from 'react';
+import { AnagramHelper } from './AnagramHelper';
 import { Controls } from './Controls';
 import { Grid } from './Grid';
 
 export const InteractiveGrid = memo(() => {
+	const [showAnagramHelper, setShowAnagramHelper] = useState(false);
+
+	const toggleAnagramHelper = () =>
+		setShowAnagramHelper((prevState) => !prevState);
+
 	return (
 		<>
-			<Grid />
-			<Controls.Clues />
-			<Controls.Grid />
+			{showAnagramHelper ? (
+				<AnagramHelper onClickClose={() => setShowAnagramHelper(false)} />
+			) : (
+				<Grid />
+			)}
+			<Controls toggleAnagramHelper={toggleAnagramHelper} />
 		</>
 	);
 });