Add Puzzle Page: generic template for iframe-based puzzles, print scoped to Sudoku

dotcom-rendering/fixtures/manual/gamePage.ts

@@ -0,0 +1,106 @@
+import type { CrosswordProps } from '@guardian/react-crossword';
+import { gameConfigs } from '../../src/model/games/gameConfigs';
+import type { FEGamePageType } from '../../src/types/gamePage';
+import type { PuzzleItem } from '../../src/types/puzzlesPage';
+import { Standard } from '../generated/fe-articles/Standard';
+
+const sampleMoreFromPuzzlesAndGames: PuzzleItem[] = [
+	{
+		id: 'sudoku-easy-daily',
+		title: 'Sudoku easy',
+		type: 'sudoku-easy',
+		set: 'all',
+		cardVariant: 'compact',
+		cadence: 'Daily',
+		slug: 'sudoku-easy',
+	},
+	{
+		id: 'word-wheel-daily',
+		title: 'Word wheel',
+		type: 'word-wheel',
+		set: 'all',
+		cardVariant: 'compact',
+		cadence: 'Daily',
+		slug: 'word-wheel',
+	},
+];
+
+const sampleCrosswordData: CrosswordProps['data'] = {
+	crosswordType: 'quick',
+	date: Date.now(),
+	dimensions: { cols: 3, rows: 1 },
+	id: 'quick/1',
+	name: 'Quick crossword No 1',
+	number: 1,
+	solutionAvailable: false,
+	entries: [
+		{
+			id: '1-across',
+			number: 1,
+			humanNumber: '1',
+			clue: 'Sample clue (3)',
+			direction: 'across',
+			position: { x: 0, y: 0 },
+			separatorLocations: {},
+			length: 3,
+			group: ['1-across'],
+		},
+	],
+};
+
+/**
+ * Builds a `FEGamePageType` fixture for the given `slug`, defaulting to a
+ * generic instance for that slug's `GameConfig`. Pass `overrides` to
+ * customise individual fields (deep-merged only one level for `instance`).
+ */
+export const createGamePage = (
+	slug: string,
+	overrides: Partial<FEGamePageType> = {},
+): FEGamePageType => {
+	const gameConfig = gameConfigs[slug];
+
+	if (!gameConfig) {
+		throw new Error(`Unknown game slug in fixture: ${slug}`);
+	}
+
+	const isCrossword = gameConfig.componentKey === 'crossword';
+
+	return {
+		id: `game-page-${slug}`,
+		slug,
+		webTitle: `${slug} | The Guardian`,
+		config: {
+			...Standard.config,
+			contentType: 'Game',
+			// DCR no longer gates /GamePage on any AB test participation (the
+			// former 'game-page-experiment' gate was removed; routes will be
+			// mapped/exposed via a different project instead), so this is left
+			// empty rather than implying any particular value is required.
+			serverSideABTests: {},
+		},
+		nav: Standard.nav,
+		pageFooter: Standard.pageFooter,
+		canonicalUrl: `https://www.theguardian.com/games/${slug}`,
+		editionId: Standard.editionId,
+		instance: {
+			title: isCrossword ? 'Quick crossword No 1' : `${slug} puzzle`,
+			puzzleType: isCrossword ? 'Quick crossword' : undefined,
+			setterName: gameConfig.setterEnabled ? 'Sample Setter' : undefined,
+			date: '1 January 2025',
+			discussionId: gameConfig.commentsEnabled
+				? `game/${slug}`
+				: undefined,
+			crosswordData: isCrossword ? sampleCrosswordData : undefined,
+			moreFromPuzzlesAndGames: sampleMoreFromPuzzlesAndGames,
+		},
+		...overrides,
+	};
+};
+
+/** One fixture per supported slug, for local dev preview and tests. */
+export const gamePageFixtures: Record<string, FEGamePageType> = Object.keys(
+	gameConfigs,
+).reduce<Record<string, FEGamePageType>>((acc, slug) => {
+	acc[slug] = createGamePage(slug);
+	return acc;
+}, {});

dotcom-rendering/src/components/GameIframe.island.tsx

@@ -0,0 +1,28 @@
+import { css } from '@emotion/react';
+
+interface Props {
+	/** The already-resolved iframe src URL (with `{slug}` substituted). */
+	src: string;
+	title: string;
+}
+
+const frameStyles = css`
+	width: 100%;
+	min-height: 500px;
+	border: none;
+`;
+
+/**
+ * Generic sandboxed iframe wrapper for third-party (or in-house, non-React)
+ * puzzle/game providers, such as AmuseLabs-hosted games or bespoke providers
+ * like wordiply.com. Used for any `GameConfig` with `renderMode: 'iframe'`.
+ */
+export const GameIframe = ({ src, title }: Props) => (
+	<iframe
+		css={frameStyles}
+		src={src}
+		title={title}
+		loading="lazy"
+		sandbox="allow-scripts allow-same-origin allow-popups allow-forms"
+	/>
+);

dotcom-rendering/src/components/GamePage.tsx

@@ -0,0 +1,58 @@
+import { Global } from '@emotion/react';
+import { StrictMode } from 'react';
+import { GameLayout, type ResolvedGamePage } from '../layouts/GameLayout';
+import { ArticleDesign, ArticleDisplay, Pillar } from '../lib/articleFormat';
+import { rootStyles } from '../lib/rootStyles';
+import type { NavType } from '../model/extract-nav';
+import { AdmiralScript } from './AdmiralScript.island';
+import { AlreadyVisited } from './AlreadyVisited.island';
+import { useConfig } from './ConfigContext';
+import { FocusStyles } from './FocusStyles.island';
+import { Island } from './Island';
+import { Metrics } from './Metrics.island';
+import { SetABTests } from './SetABTests.island';
+import { SkipTo } from './SkipTo';
+
+type Props = {
+	gamePage: ResolvedGamePage;
+	NAV: NavType;
+};
+
+export const GamePage = ({ gamePage, NAV }: Props) => {
+	const format = {
+		display: ArticleDisplay.Standard,
+		design: ArticleDesign.Standard,
+		theme: Pillar.News,
+	};
+	const { darkModeAvailable } = useConfig();
+
+	return (
+		<StrictMode>
+			<Global styles={rootStyles(format, darkModeAvailable)} />
+			<SkipTo id="maincontent" label="Skip to main content" />
+			<SkipTo id="navigation" label="Skip to navigation" />
+			<Island priority="feature" defer={{ until: 'idle' }}>
+				<AlreadyVisited />
+			</Island>
+			<Island priority="feature" defer={{ until: 'idle' }}>
+				<AdmiralScript />
+			</Island>
+			<Island priority="feature" defer={{ until: 'idle' }}>
+				<FocusStyles />
+			</Island>
+			<Island priority="critical">
+				<Metrics
+					commercialMetricsEnabled={
+						!!gamePage.config.switches.commercialMetrics
+					}
+				/>
+			</Island>
+			<Island priority="critical">
+				<SetABTests
+					serverSideABTests={gamePage.config.serverSideABTests}
+				/>
+			</Island>
+			<GameLayout gamePage={gamePage} NAV={NAV} />
+		</StrictMode>
+	);
+};

dotcom-rendering/src/layouts/GameLayout.test.tsx

@@ -0,0 +1,90 @@
+import { render, screen } from '@testing-library/react';
+import { createGamePage } from '../../fixtures/manual/gamePage';
+import { ConfigProvider } from '../components/ConfigContext';
+import { extractNAV } from '../model/extract-nav';
+import { getGameConfig } from '../model/games/gameConfigs';
+import { GameLayout } from './GameLayout';
+
+jest.mock('../lib/bridgetApi', () => jest.fn());
+jest.mock('../lib/useMatchMedia', () => ({
+	...jest.requireActual('../lib/useMatchMedia'),
+	useMatchMedia: jest.fn(() => true),
+}));
+
+const renderGameLayout = (
+	slug: string,
+	overrides: Parameters<typeof createGamePage>[1] = {},
+) => {
+	const gamePage = createGamePage(slug, overrides);
+	const gameConfig = getGameConfig(slug);
+	if (!gameConfig) throw new Error(`missing config for ${slug}`);
+
+	return render(
+		<ConfigProvider
+			value={{
+				renderingTarget: 'Web',
+				darkModeAvailable: false,
+				assetOrigin: '/',
+				editionId: 'UK',
+			}}
+		>
+			<GameLayout
+				gamePage={{ ...gamePage, gameConfig }}
+				NAV={extractNAV(gamePage.nav)}
+			/>
+		</ConfigProvider>,
+	);
+};
+
+describe('GameLayout', () => {
+	it('renders a working PDF version link when crosswordData.pdf is present', () => {
+		renderGameLayout('crossword', {
+			instance: {
+				...createGamePage('crossword').instance,
+				crosswordData: {
+					...(createGamePage('crossword').instance
+						.crosswordData as Record<string, unknown>),
+					pdf: 'https://example.com/crossword.pdf',
+				},
+			},
+		});
+
+		const pdfLink = screen.getByRole('link', { name: 'PDF version' });
+		expect(pdfLink).toHaveAttribute(
+			'href',
+			'https://example.com/crossword.pdf',
+		);
+	});
+
+	it('does not render a PDF version link when crosswordData.pdf is absent', () => {
+		renderGameLayout('crossword');
+
+		expect(
+			screen.queryByRole('link', { name: 'PDF version' }),
+		).not.toBeInTheDocument();
+	});
+
+	it('does not render CrosswordLinks for a non-crossword slug', () => {
+		renderGameLayout('sudoku-easy');
+
+		expect(
+			screen.queryByRole('link', { name: 'PDF version' }),
+		).not.toBeInTheDocument();
+	});
+
+	it('renders the crosswords group label as a styled link to /crosswords', () => {
+		renderGameLayout('crossword');
+
+		const label = screen.getByRole('link', { name: 'Quick crossword' });
+		expect(label).toHaveAttribute('href', '/crosswords');
+	});
+
+	it('renders a non-crosswords group label as plain, non-linked text', () => {
+		renderGameLayout('sudoku-easy');
+
+		expect(
+			screen.queryByRole('link', { name: 'Logic puzzles' }),
+		).not.toBeInTheDocument();
+		expect(screen.getByText('Logic puzzles')).toBeInTheDocument();
+	});
+});