Skip to content

Commit

Permalink
Allow missing solutions (#76)
Browse files Browse the repository at this point in the history 
* incomplete grid

* initialiseCells accept object for params and include allowMissingSolutions logic

* allowMissingSolutions prop

* improve app constants

* add new prop to readme

* tweak allowMissingSolutions logic

* add tests

* revert example

* fix crossword component tests

* fix crossword date

---------

Co-authored-by: tblackwell-tm <[email protected]>
  • Loading branch information
@t-blackwell @tblackwell-tm
t-blackwell and tblackwell-tm authored Mar 8, 2024
1 parent 90ec949 commit 71da198
Show file tree
Hide file tree
Showing 14 changed files with 642 additions and 130 deletions.
27 changes: 14 additions & 13 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,19 +51,20 @@ export default function MyPage() {

## Props

| Property | Description |
| ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `allowedHtmlTags` | `string[]` = ['b', 'strong', 'i', 'em', 'sub', 'sup']<br />Optional list of HTML tags allowed within the clues. Use `[]` to prevent all HTML tags. Defaults to `['b', 'strong', 'i', 'em', 'sub', 'sup']`. |
| `cellMatcher` | `RegExp` = '/[A-Z]/'<br />Optional regular expression to match against entered cell characters. Defaults to `/[A-Z]/`. |
| `className` | `string`<br />Optional string to apply a space-delimited list of class names. |
| `data` | `GuardianCrossword`<br />Required object that contains crossword clues, solutions and other information needed to draw the grid. See [crossword data](#crossword-data) below for more information. |
| `id` | `string`<br />Required string to uniquely identify the crossword. |
| `loadGrid` | `GuessGrid \| undefined`<br />Optional object to override storage mechanism. Called when the component is initialized with the ID of the crossword. Should return an array-based representation of the crossword grid. See [guess grid](#guess-grid) below for more information. |
| `onCellChange` | `(cellChange: CellChange) => void \| undefined`<br />Optional function. Called after a grid cell has changed its guess. The object contains the properties `pos`, `guess` and `previousGuess`. |
| `onCellFocus` | `(cellFocus: CellFocus) => void \| undefined`<br />Optional function. Called after the focus switches to a new cell. The object returned contains the properties `pos` and `clueId`. |
| `saveGrid` | `(value: GuessGrid \| ((val: GuessGrid) => GuessGrid)) => void \| undefined`<br />Optional function to override storage mechanism. Called after the grid has changed with the ID of the crossword and array-based representation of the grid. See [guess grid](#guess-grid) below for more information. |
| `stickyClue` | `'always' \| 'never' \| 'auto'` = 'auto'<br />Optional value to define when to show the sticky clue above the grid. Defaults to `'auto'` (shown on `xs` and `sm` breakpoints). |
| `theme` | `'red' \| 'pink' \| 'purple' \| 'deepPurple' \| 'indigo' \| 'blue' \| 'lightBlue' \| 'cyan' \| 'teal' \| 'green' \| 'deepOrange' \| 'blueGrey'` = 'blue'<br />Optional value to override the main colour applied to the highlighted cells and clues. Defaults to `'blue'`. |
| Property | Description |
| ----------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `allowedHtmlTags` | `string[]` = ['b', 'strong', 'i', 'em', 'sub', 'sup']<br />Optional list of HTML tags allowed within the clues. Use `[]` to prevent all HTML tags. Defaults to `['b', 'strong', 'i', 'em', 'sub', 'sup']`. |
| `allowMissingSolutions` | `boolean` = false<br />Optional flag to relax grid validation. This will allow the `data` prop to have missing or incomplete solutions in its entries. |
| `cellMatcher` | `RegExp` = '/[A-Z]/'<br />Optional regular expression to match against entered cell characters. Defaults to `/[A-Z]/`. |
| `className` | `string`<br />Optional string to apply a space-delimited list of class names. |
| `data` | `GuardianCrossword`<br />Required object that contains crossword clues, solutions and other information needed to draw the grid. See [crossword data](#crossword-data) below for more information. |
| `id` | `string`<br />Required string to uniquely identify the crossword. |
| `loadGrid` | `GuessGrid \| undefined`<br />Optional object to override storage mechanism. Called when the component is initialized with the ID of the crossword. Should return an array-based representation of the crossword grid. See [guess grid](#guess-grid) below for more information. |
| `onCellChange` | `(cellChange: CellChange) => void \| undefined`<br />Optional function. Called after a grid cell has changed its guess. The object contains the properties `pos`, `guess` and `previousGuess`. |
| `onCellFocus` | `(cellFocus: CellFocus) => void \| undefined`<br />Optional function. Called after the focus switches to a new cell. The object returned contains the properties `pos` and `clueId`. |
| `saveGrid` | `(value: GuessGrid \| ((val: GuessGrid) => GuessGrid)) => void \| undefined`<br />Optional function to override storage mechanism. Called after the grid has changed with the ID of the crossword and array-based representation of the grid. See [guess grid](#guess-grid) below for more information. |
| `stickyClue` | `'always' \| 'never' \| 'auto'` = 'auto'<br />Optional value to define when to show the sticky clue above the grid. Defaults to `'auto'` (shown on `xs` and `sm` breakpoints). |
| `theme` | `'red' \| 'pink' \| 'purple' \| 'deepPurple' \| 'indigo' \| 'blue' \| 'lightBlue' \| 'cyan' \| 'teal' \| 'green' \| 'deepOrange' \| 'blueGrey'` = 'blue'<br />Optional value to override the main colour applied to the highlighted cells and clues. Defaults to `'blue'`. |

For more type information, see [interfaces](./src/interfaces).

Expand Down
33 changes: 18 additions & 15 deletions example/src/App.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,26 +4,27 @@ import * as React from 'react';
import './App.css';
import data from './guardian.cryptic.28505';

const ALLOWED_HTML_TAGS = ['b', 'strong', 'i', 'em', 'sub', 'sup'] as const;

// TODO: import from MyCrossword
const themeColors = [
'red',
'pink',
'purple',
const THEME_COLORS = [
'blue',
'blueGrey',
'cyan',
'deepOrange',
'deepPurple',
'green',
'indigo',
'blue',
'lightBlue',
'cyan',
'pink',
'purple',
'red',
'teal',
'green',
'deepOrange',
'blueGrey',
] as const;
type Theme = typeof themeColors[number];
type ThemeColor = typeof THEME_COLORS[number];

export default function App() {
const allowedHtmlTags = ['b', 'strong', 'i', 'em', 'sub', 'sup'];
const [theme, setTheme] = React.useState<Theme>('blue');
const [theme, setTheme] = React.useState<ThemeColor>(THEME_COLORS[0]);
const [showDefinitions, setShowDefinitions] = React.useState(false);

return (
Expand Down Expand Up @@ -52,9 +53,9 @@ export default function App() {
<select
id="theme"
value={theme}
onChange={(e) => setTheme(e.target.value as Theme)}
onChange={(e) => setTheme(e.target.value as ThemeColor)}
>
{themeColors.map((color) => (
{THEME_COLORS.map((color) => (
<option key={color} value={color}>
{color}
</option>
Expand All @@ -73,7 +74,9 @@ export default function App() {
</div>
<MyCrossword
allowedHtmlTags={
showDefinitions ? [...allowedHtmlTags, 'u'] : allowedHtmlTags
showDefinitions
? [...ALLOWED_HTML_TAGS, 'u']
: [...ALLOWED_HTML_TAGS]
}
id={data.id}
data={data}
Expand Down
4 changes: 2 additions & 2 deletions example/src/guardian.prize.25220.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -463,8 +463,8 @@ const data: GuardianCrossword = {
name: 'Araucaria',
webUrl: 'https://www.theguardian.com/profile/araucaria',
},
date: 123,
dateSolutionAvailable: 123,
date: 1295049600000,
dateSolutionAvailable: 1295049600000,
solutionAvailable: true,
};

Expand Down
Loading

0 comments on commit 71da198

Please sign in to comment.