Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Allow missing solutions #76

Merged
merged 10 commits into from
Mar 8, 2024
Merged

Allow missing solutions #76

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
817abbf
incomplete grid
tblackwell-tm Mar 6, 2024
85d3385
initialiseCells accept object for params and include allowMissingSolu…
tblackwell-tm Mar 6, 2024
2cba04e
allowMissingSolutions prop
tblackwell-tm Mar 8, 2024
71bf172
improve app constants
tblackwell-tm Mar 8, 2024
648ad62
add new prop to readme
tblackwell-tm Mar 8, 2024
82e0477
tweak allowMissingSolutions logic
tblackwell-tm Mar 8, 2024
b3de4e4
add tests
tblackwell-tm Mar 8, 2024
788e686
revert example
tblackwell-tm Mar 8, 2024
2e511dd
fix crossword component tests
tblackwell-tm Mar 8, 2024
d16718e
fix crossword date
tblackwell-tm Mar 8, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 14 additions & 13 deletions README.md
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Loading