Crossword states update availability.

[dreamer01]

Its great what you have built here. And your approach toward customization and composable nature of the lib is nice.

I would like to add few use cases to be covered which will really enhance the whole dev experience of the library :

• [x] onCheck : Function returning whether the current filled crossword is correct or not, as onLoadedCorrect is invoked only on load and not every update.
• [x] onReset : Resets the state of crossword, i.e erase user inputs.
• [x] onFillCorrect : Updates the crossword state with correct answers.
• [x] onChange : Function returning the current state of crossword.

Thanks.

[dreamer01]

I was able to implement two off the above usecase using public method available on crossword.

Sharing snippet of implementation here :

  const crosswordRef = React.useRef(null);

  // Usecase : onFillCorrect
  const onShowAnswers = () => {
    crosswordRef.current.fillAllAnswers();
  };

 // Usecase : onReset
  const onReset = () => {
    crosswordRef.current.reset();
  };

  return  <Crossword ref={crosswordRef} />

[JaredReisinger]

I'm not sure I'm fully understanding the request. Properties with an "on" prefix typically represent callbacks when something inside the component happens. For something like "onReset", that would mean that when the Crossword resets (as in when the reset() method is called), the Crossword component calls back so that a parent component knows that the reset happened. What I'm seeing in your examples, though, is a more imperative style... which is exactly what reset() was already designed for. You can do exactly what you did in your snippet and use a ref to the Crossword and call reset() in the onClick handler of a button (for instance).

Maybe I'm not understanding how you'd use something like "onReset"... could you provide an example of your desired use case?

[dreamer01]

My bad totally, yes by convention "on" implies handling callback as you explained. I was looking for handleReset and handleFillCorrect which I was able to achieve using Public fxn available on Crossword.

In my case I have onReset and onShowAnswers on button click.

For the other usecases mentioned :

• onChnage is a callback fxn which returns me which cell was edited, i.e grid[row][cell] and what its value.
• onCheck say handleCheck is a function which will return a boolean value about current state of crossword, whether the crossword is correctly filled on not. Say I want user to submit his answer but before that I would like to validate he has correctly filled it.

I hope this makes sense, sorry for mis-understanding. I would like to share codesandbox link, but import is not working for codesandbox. Link to not working codesandbox

Thanks.

[JaredReisinger]

Hey, @dreamer01... the onChange functionality exists as of 2.1.0 (called onCellChange just to avoid ambiguity).

I haven't addressed your onCheck/handleCheck because I'm still not sure I really understand the use-case. When you say you want the chance to validate the answer before the user "submits" it... are you envisioning something like a puzzle site/app where you want the player to get credit for fully-completing a crossword? (For example, something like a stage in a PuzzleHunt-style game?)

Would something analogous to onCorrect/onLoadedCorrect, but that applies to the entire crossword work? Something like onCrosswordCorrect? Instead of having to imperatively ask the crossword, you could get notified when the entire crossword was complete (and then enable a "submit" button). And actually, I think it'd be pretty easy to track the overall-completeness of the crossword and also provide an imperative "is it entirely correct yet?" method.

Is this what you're looking for, or am I completely off the mark? 😄

[dreamer01]

are you envisioning something like a puzzle site/app where you want the player to get credit for fully-completing a crossword? (For example, something like a stage in a PuzzleHunt-style game?) Would something analogous to onCorrect/onLoadedCorrect, but that applies to the entire crossword work? Something like onCrosswordCorrect?

This totatly sumarizes my requirement. onCrosswordCorrect if implemented imperatively then the cost will be high, as at every change it has to be calculated, so if you can add it as public method(returning boolean) it would be great. Then one can always call it when required.

Thanks again @JaredReisinger . I am looking forward to this implementation.

[JaredReisinger]

(@dreamer01, you should shortly see a note that this has been fixed in release 2.2.0, which is currently building.)

[JaredReisinger]

:tada: This issue has been resolved in version 2.2.0 :tada:

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot :package::rocket:

[JaredReisinger]

Just for reference, the "check the entire crossword" cost is low, as it builds on top of existing knowledge. We already check to see if the 'across' or 'down' answers that intersect the just-typed cell have become correct (this is needed for the onCorrect() callback). If not, there's no need to check anything else. If it did result in a new correct answer, we make use of the "correct" property that's been recently added to each clue (for the purposes of styling them differently); we only need to iterate the clues to see if they have all been marked as correct, we don't need to check each and every cell in the crossword again.

[dreamer01]

Ah right, I totally ignored that and looked it as an whole new effort.

Thanks 🙏 for the providing with all use cases. I am sure it will help others also while developing apps with the crosswords.