viresh-ratnakar / exolve

Online interactive crossword software in JavaScript
MIT License
71 stars 15 forks source link

[Feature Request] A method to specify which parts of clues are definitions and underline (or otherwise highlight) them with ‘Reveal’ operations #45

Closed Antagony1060 closed 3 years ago

Antagony1060 commented 3 years ago

This would allow simplifying of annotations. It's also how most parsing sites work nowadays, wherein they only expand on a definition in the explanation part as necessary.

To implement it I would suggest a default double character tag, like tilde (\~\~) perhaps – e.g. \~\~The two\~\~ barbarians occasionally traded human heads (4) – so the setter can always use the chosen character singly within their clues, if desired. Either that or use a single character tag but provide an override/specify option.

Of course there may be edge cases where a setter wishes to underline part of a clue themself, which is why I suggested “or otherwise highlight” in the title. Could there maybe be a ‘definition background colour’ option for example?

viresh-ratnakar commented 3 years ago

Good idea, will add soon!

Antagony1060 commented 3 years ago

Excellent, thanks!

viresh-ratnakar commented 3 years ago

I've implemented this in v0.92 now, ptal.

The documentation is here: https://github.com/viresh-ratnakar/exolve/blob/master/README.md#in-clue-annotations

I am pasting the relevant bits here:

You can also decorate sub-phrases in the clue with underlines, different styles, colours, backgrounds, etc., by enclosing specific substrings with the special markers, ~{ and }~, like this:

    28 Replace bottles containing ~{questionable medicine}~ (7) Hidden word: (-re)PLACE BO(-ttles).

The default styling for such "in-clue annotations" is to underline the text with a "darkgreen" underline. This styling will get revealed when the solver clicks on "Reveal this" or "Reveal all" (and will get cleared with "Clear this/all").

You can apply different in-clue annotation styles (instead of underlining), by providing an HTML element class name, like this:

    28 ~{{xlv-blue}Replace}~ bottles ~{{my-style}containing}~ ~{questionable medicine}~ (7) Hidden word: (-re)PLACE BO(-ttles).

Here, "xlv-blue" is a class name that Exolve has set up in its CSS (some others are "xlv-red", "xlv-yellow-bg", and "xlv-pink-bg"). But you can use your own class names too (such as "my-style" above) and specify their stylings with your own custom CSS rules.

viresh-ratnakar commented 3 years ago

FYI: ended up pushing another quick follow-up version to fix a couple of minor things, so v0.93 it is now.

viresh-ratnakar commented 3 years ago

Oops, forgot to get the rendering right in the current clue displayed on top of the grid! Hang on, will fix shortly.

viresh-ratnakar commented 3 years ago

OK, fixed the rendering issue with v.0.94. Hopefully stable now, but please check. I think you had a puzzle with line-breaks in verse-like clues. Please do check that one when you get the chance (as I changed some of the code that dealt with that).

Antagony1060 commented 3 years ago

Perfect!

I've only tried it so far on a small crossword locally, but I think it's a big improvement:

image

I like to show solutions in orange-red so I've overridden the underline colour to match it.

I've checked the alphabetical rhyming couplet jigsaw locally and everything seems to be working fine. I added definition tags to a clue where it spans both lines and that also worked just fine.

Great job as usual, thanks! Now I've just got to update all the clues and annotations in all of my crosswords… oh man, what have I done‽ :\^)

Antagony1060 commented 3 years ago

Everything went swimmingly with my local testing, so I decided to update to this version in r/crosswords' and begin updating each grid file one at a time. However, I hit a snag after the initial update as github was reporting the following issue with your readme file (which I always rename to exolve-README.md so it doesn't overwrite ours):

The page build failed for the master branch with the following error:

The variable {{xlv-blue} on line 500 in exolve-README.md was not properly closed with }}.

Unfortunately, that Jekyll error prevents the github 'Pages' site from updating. I tried a few edits, such as commenting out the code block, but the only thing that worked was deleting the block altogether. So that's how I've had to leave it for now. I think it must be a flaw/bug in Jekyll because as far as I can tell there are no orphaned curly brackets. I don't really understand why it's checking for that inside of code or comment blocks in any case. Is there something I can do to avoid this error on an unedited version of the file, do you know?

And while I've got your attention please take a look at our 1st AOTW grid and reveal all. You will see that I've also 'tidied up' the anno formatting more to my liking, by inserting a line break before the solution text and removing the period after it. For now I just did this by edited your exolve-m.js file directly, but it would obviously be better if I could do it externally. But I'm not exactly sure how to do that, so I would appreciate your advice please.

Cheers!

viresh-ratnakar commented 3 years ago

README.md: I think the problem is what's described and solved here: https://stackoverflow.com/questions/24102498/escaping-double-curly-braces-inside-a-markdown-code-block-in-jekyll

I've uploaded a new README.md file that applies the fix suggested in that link. PTAL.

For re-formatting the solution, you can do it in customizeExolve() in your additions.js file, with something like this:

function customizeExolve(puz) { for (let ci of puz.allClueIndices) { let clue = puz.clues[ci] let annoSpan = clue.annoSpan annoSpan.innerHTML = '
' + annoSpan.innerHTML.trim() let solSpan = annoSpan.getElementsByClassName('xlv-solution') if (solSpan.length == 0) continue solSpan[0].innerHTML = clue.solution + ' ' } .... }

I like how the
looks. I worry a bit that the text length appears a bit long with all those extra lines, hence didn't make that the default.

The orange-red makes it too busy/"non-calm"-looking for me, but that's clearly subjective! :-)

On Mon, Oct 5, 2020 at 12:16 PM Antagony1060 notifications@github.com wrote:

Everything went swimmingly with my local testing, so I decided to update to this version in r/crosswords' and begin updating each grid file one at a time. However, I hit a snag after the initial update as github was reporting the following issue with your readme file (which I always rename to exolve-README.md so it doesn't overwrite ours):

The page build failed for the master branch with the following error:

The variable {{xlv-blue} on line 500 in exolve-README.md was not properly closed with }}.

Unfortunately, that Jekyll error prevents the github 'Pages' site from updating. I tried a few edits, such as commenting out the code block, but the only thing that worked was deleting the block altogether. So that's how I've had to leave it for now. I think it must be a flaw/bug in Jekyll because as far as I can tell there are no orphaned curly brackets. I don't really understand why it's checking for that inside of code or comment blocks in any case. Is there something I can do to avoid this error on an unedited version of the file, do you know?

And while I've got your attention please take a look at our 1st AOTW grid https://r-crosswords.github.io/aotw/grids/grid001.html and reveal all. You will see that I've also 'tidied up' the anno formatting more to my liking, by inserting a line break before the solution text and removing the period after it. For now I just did this by edited your exolve-m.js file directly, but it would obviously be better if I could do it externally. But I'm not exactly sure how to do that, so I would appreciate your advice please.

Cheers!

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/viresh-ratnakar/exolve/issues/45#issuecomment-703834876, or unsubscribe https://github.com/notifications/unsubscribe-auth/AJQ562GFSQ5ISXGLGSSJX3LSJILRVANCNFSM4SCWKEXA .

viresh-ratnakar commented 3 years ago

PS: you can make it safe to use even for crosswords without solutions provided with a couple more added lines:

function customizeExolve(puz) { for (let ci of puz.allClueIndices) { let clue = puz.clues[ci] let annoSpan = clue.annoSpan let html = annoSpan.innerHTML.trim() if (!html) continue annoSpan.innerHTML = '
' + html let solSpan = annoSpan.getElementsByClassName('xlv-solution') if (solSpan.length == 0) continue solSpan[0].innerHTML = clue.solution + ' ' } .... }

On Mon, Oct 5, 2020 at 9:45 PM Viresh Ratnakar viresh@gmail.com wrote:

README.md: I think the problem is what's described and solved here: https://stackoverflow.com/questions/24102498/escaping-double-curly-braces-inside-a-markdown-code-block-in-jekyll

I've uploaded a new README.md file that applies the fix suggested in that link. PTAL.

For re-formatting the solution, you can do it in customizeExolve() in your additions.js file, with something like this:

function customizeExolve(puz) { for (let ci of puz.allClueIndices) { let clue = puz.clues[ci] let annoSpan = clue.annoSpan annoSpan.innerHTML = '
' + annoSpan.innerHTML.trim() let solSpan = annoSpan.getElementsByClassName('xlv-solution') if (solSpan.length == 0) continue solSpan[0].innerHTML = clue.solution + ' ' } .... }

I like how the
looks. I worry a bit that the text length appears a bit long with all those extra lines, hence didn't make that the default.

The orange-red makes it too busy/"non-calm"-looking for me, but that's clearly subjective! :-)

On Mon, Oct 5, 2020 at 12:16 PM Antagony1060 notifications@github.com wrote:

Everything went swimmingly with my local testing, so I decided to update to this version in r/crosswords' and begin updating each grid file one at a time. However, I hit a snag after the initial update as github was reporting the following issue with your readme file (which I always rename to exolve-README.md so it doesn't overwrite ours):

The page build failed for the master branch with the following error:

The variable {{xlv-blue} on line 500 in exolve-README.md was not properly closed with }}.

Unfortunately, that Jekyll error prevents the github 'Pages' site from updating. I tried a few edits, such as commenting out the code block, but the only thing that worked was deleting the block altogether. So that's how I've had to leave it for now. I think it must be a flaw/bug in Jekyll because as far as I can tell there are no orphaned curly brackets. I don't really understand why it's checking for that inside of code or comment blocks in any case. Is there something I can do to avoid this error on an unedited version of the file, do you know?

And while I've got your attention please take a look at our 1st AOTW grid https://r-crosswords.github.io/aotw/grids/grid001.html and reveal all. You will see that I've also 'tidied up' the anno formatting more to my liking, by inserting a line break before the solution text and removing the period after it. For now I just did this by edited your exolve-m.js file directly, but it would obviously be better if I could do it externally. But I'm not exactly sure how to do that, so I would appreciate your advice please.

Cheers!

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/viresh-ratnakar/exolve/issues/45#issuecomment-703834876, or unsubscribe https://github.com/notifications/unsubscribe-auth/AJQ562GFSQ5ISXGLGSSJX3LSJILRVANCNFSM4SCWKEXA .

Antagony1060 commented 3 years ago

That's all working great now, thanks! It would have taken me forever to figure out how to externalise the solution formatting and I probably wouldn't have even thought about making it safe for unsolved puzzles.

With r/crosswords' puzzles having usernames and related competition week numbers appended to the solutions, their annos were tending to span several lines anyway. But removing defs from the annos has also helped to compensate, so the overall number of lines used is probably not that different to how it was before. In any event I think the benefit of clearly separating each part outweighs the cost of a few extra lines. :\^)

As for the solution colour: perhaps you're right. I wanted it to be more distinguishable from the clue and remaining anno, but I chose orange-red before deciding to insert the break, so it can probably stand being toned down a bit now. I'll play around with it later.

Thanks again!

Antagony1060 commented 3 years ago

I just updated the files on my DropPages site and I noticed with the alphabetical jigsaw that the overhead clue section is still shaded pink like the selected clue. I don't know if this is intentional for jigsaws or not and it doesn't bother me at all, but I thought you'd want to know if not.

Oh and I couldn't remember the exact Exolve version date so I opened exolve-m.html but it looks like your updating script must have missed it again, as it's showing up as v0.91 September 13.

viresh-ratnakar commented 3 years ago

Ah, updated exolve-m.html, thanks!

The overhead clue for jigsaw clues does have a background colour (but it's not pink, it's "khaki" or something like that).

At some point recently, I removed the "mistyrose" background from the overhead clue, for normal clues (I think that look works well). However, jigsaw clues--basically clues whose location in the grid is not known--still get their distinctive "khaki" background (which can be changed if desired). I have some grids where I mix non-jigsaw clues and jigsaw clues in the same crossword. I think the distinctive visual reminder that you are looking at a jigsaw clue is useful especially in grids like that. But even without that, I think the distinctive appearance is warranted. If you hit tab to go to the next light, the overhead clue will not change when both the old light and the new light are jigsaw targets, and that's different from non-jigsaw clues, so worth colouring differently, imo.

On Wed, Oct 7, 2020 at 2:20 PM Antagony1060 notifications@github.com wrote:

I just updated the files on my DropPages site and I noticed with the alphabetical jigsaw https://antagony.droppages.com/potd/potd010 that the overhead clue section is still shaded pink like the selected clue. I don't know if this is intentional for jigsaws or not and it doesn't bother me at all, but I thought you'd want to know if not.

Oh and I couldn't remember the exact Exolve version date so I opened exolve-m.html but it looks like your updating script must have missed it again, as it's showing up as v0.91 September 13.

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/viresh-ratnakar/exolve/issues/45#issuecomment-705200014, or unsubscribe https://github.com/notifications/unsubscribe-auth/AJQ562CFFHT7KCBITBX3TJLSJTLR3ANCNFSM4SCWKEXA .

Antagony1060 commented 3 years ago

Now you've explained it I agree it's a distinction worth having.

As for the colour: well… it sure looks pink-ish on my screen! :\^) Still, that doesn't really matter, I just wanted to let you know in case you'd overlooked it.