t-blackwell / mycrossword Goto Github PK

When using a framework that supports SSR, say Remix, the initial render does not display particularly well. The reason for this is because the MyCrossword component makes use of the useBreakpoint hook, and all of the responsive CSS code is built on top of it. Therefore the relevant media queries only work with CSR i.e. after hydration.

React escapes HTML by default. There needs to be a way to show markup in the Clue and StickyClue components. The display should be limited to specific tags:

• <b> or <strong>
• <i> or <em>
• <u>
• <sub>
• <sup>
• plus others?

Hi, I’m successfully using this library in a React16 project at work, but since bumping my npm version my dependencies are subject to stricter peerDependencies checks, and this library fails them by pinning react at version 17 in its peerDependencies, despite it not using any features exclusively available from 17+. I think it’d be safer to pin react to version 17 in the peer dependencies.

Confirm the correct node version to use and include it in an NVM config file.

When a puzzle has been filled it would be good to have an onComplete prop to allow the developer to run a function e.g. to show a message.

Update README with overview and examples. It would also be useful generate another markdown doc to show the functional benefits and technical improvements when compared to the Guardian component.

There should be a mechanism to allow setters to display a message at the start of a crossword. This message should overlay the grid area and prevent the puzzle from being started until it's been acknowledged. One thing to bear in mind is that this function should be designed in a way to allow adverts (image or video) to be displayed in the future.

When the initial render (SSR) happens, the grid is put into a loading state. This is most likely due to it needing access to localStorage to display the user's progress. Consider useLocalStorage hook with initializeWithValue prop set to false.

When pressing the enter key in the anagram helper input on mobile*, it results in a focus switch i.e. moves to the next available input.

*Pixel 7 / Android 14 / Chrome 122.0.6261.119

Unfortunately I’ve just found out that the guesses grid is initialised with the wrong dimensions for non-square puzzles.

The guesses grid is currently built as a rowsXcols matrix:

export function initialiseGuessGrid(
  cols: number,
  rows: number,
  char: string = '',
) {
  const grid: GuessGrid = {
    value: new Array(rows).fill(char).map(() => new Array(cols).fill(char)),
  };
  return grid;
}

whereas everywhere else in the codebase we work with a colsXrows matrix:

export function validateGuessGrid(
  guessGrid: GuessGrid,
  cols: number,
  rows: number,
  cellMatcher: RegExp,
) {
  // ...

  for (let i = 0; i < cols; i += 1) {
    for (let j = 0; j < rows; j += 1) {
      const cell = guessGrid.value[i][j];
      if (cell !== '' && !isValidChar(cell, cellMatcher)) {
        return false;
      }
    }
  }

  // ...
}

This breaks initialisation for non-square puzzle matrices.

The strict validation currently in place means that you can only use data for a complete grid i.e. all of the solution props have been populated. There are scenarios where it would be useful to allow an incomplete grid to be displayed. The validation logic could be driven by a prop e.g. allowMissingSolutions, which would default to false.

When checking solutions in the grid, it's not obvious if the characters are correct. Currently if the characters aren't removed it means the cells are correct. This would be clearer if the cells were highlighted in some way e.g. green and red for a few seconds.

Now that the grid isn't overlaid with an input control anymore, the on-screen keyboard doesn't trigger on mobile devices.

NB the grid component already has the attribute role="textbox" but it looks like it might need contenteditable="true" as well: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/textbox_role

Move build over to use Vite. Also, improve import paths.

It would be nice to have previous and next arrows on the sticky clue component to allow users to cycle through the clues when on mobile devices.

By default the grid should be interactive but there are some use cases where it's useful to make the entire component read-only. Therefore a new optional interactive prop could be added which would be defaulted to true to satisfy the majority of the cases.

The onCellChange prop needs to be added to the Controls component and called when invoking the menu functions. There also needs to be a onCellFocus prop added to MyCrossword that's called whenever a cell receives focus via a cell or clue selection.

Add ESLint for TS with the AirBnB ruleset.

The anagram helper word wheel shape becomes oval when the screen width is too narrow to display a circle.

If you press the vertical arrow keys to switch cell when the grid has been scrolled such that the top row is above the viewport, it scrolls the entire page.

☝️ Example of holding down ArrowDown and scrolling downwards on the mouse.

I've tried playing around with different combinations of tabindex, preventDefault(), stopPropagation() and focus({ preventScroll: true }) but haven't made any progress.

Send help!

Changes for PR #18 mean that the grid component now has an input element but that has broken the keypress tests.

In the anagram helper, you can click on the words in the clue to enter them into the text input. The words are split by non-alpha characters like hyphens, spaces and apostrophes. Unfortunately this means characters with accents also split words. Where possible these characters should be translated to their A-Z equivalent.

When changing clues, the URI fragment is updated. This should not append an entry to the browser's history but overwrite the existing one.

The anagram helper component needs to be created. It should be largely analogous to the original Guardian version with a few changes:

• the cells should be editable
• it should show how many characters you're over or under by e.g. 8/11
• it should have a central letter in the word wheel
• put letters in squares - give it a scrabble tile feel
• nice to have: click words to add them to the fodder
• nice to have: shuffle animations - nothing naff though

The repo needs to be rejigged in preparation for release to npm.

There needs to be an accessible version of the crossword component for people using screen readers. The Guardian provide an accessible version but it's not currently interactive. I think this could be improved upon by having the cells inline with the clues, something like this perhaps...

When typing in a letter, the cell switches focus and this causes the window to scroll to ensure it's in the viewport. This issue is most prominent when entering a solution to a long, down clue.

Edit: this seems to be a problem with the window having focus.

I think mycrossword.co.uk is awesome!

You've clearly put a lot of good effort into the solver interface (https://github.com/t-blackwell/mycrossword). I should know, because I have put in a lot of effort doing similar things in Exolve (https://github.com/viresh-ratnakar/exolve) :-).

I think it is totally fine to have such multiple efforts go on in parallel, occasionally picking up ideas from each other. Both the projects are open-source, which is great.

We should at least briefly and periodically consider the possibility of collaborating, imo.

I think Exolve can easily be a snap-in infrastructure that can be used to do the interactive solving part in mycrossword. I'm not sure if you've looked at the Exolve format, but it is a pretty simple plaintext format. And it supports loads of tiny and big features that are currently not there in mycrossword (afaik). A few examples:

• Clue numbers are right-aligned and formatted as in a newspaper, including when there are linked clues
• 3-d crosswords.
• Barred grids, diagramless squares, circles, colours, ninas.
• Creating 2- or 3-column PDFs formatted similar to newspapers.
• Annotations that can be revealed inline within clues.
• Arbitrary languages.
• Taking notes on the crossword (overall/per-clue) to be provided as feedback (I use this extensively when test-solving)
• Support for an accessibility interface ("webifi") that is text-only and can be used with audio.
• Non-numeric clue labels
• Automatic conversion of just the text of the clues to a solvable grid (i.e., automatic inference of the grid)

You can experiment with the idea by simply adding support for Exolve-based puzzles in addition to the current interface. I can help with coding the changes if needed. Exolve can be easily customized to any look-and-feel.

And of course, along similar lines, Exet can be used for powering the construction interface, but we can discuss that separately/later (unless that intrigues you more).

Cheers,
Viresh 

A clue's group isn't currently being validated. The following conditions need to be checked as part of the initialiseCells util:

• group cannot be empty
• if group length is 1 then it must match the clue id
• if group length is greater than 1 then the clue id must appear in the array
• all group ids must be valid i.e. appear as an entry in the data

iOS: 9.3.5
Safari: 9? (TBC)

It looks like there are some CSS styles that don't play well with older versions of Safari. Without the means to reproduce the issue this is going to be very difficult to resolve.