viresh-ratnakar / exolve

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

Unicode Clue label & positioning #44

Closed lenniebriscoe closed 3 years ago

lenniebriscoe commented 3 years ago

I would like to highlight cells in my crossword so once the user has completed the crossword puzzle they have an anagram to solve from the individual letters. I have done this exolve-colour, however, I would like to add a clue to the cells to help them with the order. I was thinking of adding a unicode character (a number in a circle) in the top right of the cell so that it isn't confused with the main question numbering. Is this possible or is it down to CSS again?

For example: 1 Don't click if it's __? (10)

g17 [1]

You can see that 1 down has the correct number. The next cell down has a clue with the number one in the top left but it is confusing with the number above. So the red unicode\font number in a circle is a suggested clue position. Is this possible please?

Thanks again

viresh-ratnakar commented 3 years ago

I can add a JavaScript function that can help you do this, and will provide an example of how to use it. I don't really think this corner case needs an exolve-*/option adding complexity.

I'll try to include the added API in the next update.

viresh-ratnakar commented 3 years ago

I've added this API in v0.92 now.

You can find the documentation here: https://github.com/viresh-ratnakar/exolve/blob/master/README.md#customized-additional-text-within-cells

I am also pasting the relevant bits here:

Customized additional text within cells

Exolve provides you with a JavaScript API that you can call from customizeExolve() that lets you add arbitrary text within any cell. The function to call is:

addCellText(row, col, text, h=16, w=10, atTop=true, toRight=false);

This will add text (which should be just raw text, not HTML) with font size h px in a box of size w px by h px in one of the corners of the cell at row, col (which should be a light cell or a diagramless cell). It will also return an SVG 'text' element that you can style further if needed. Examples:

function customizeExolve(p) {
  p.addCellText(0, 1, '@', 12, 10, true, false)
  let c = p.addCellText(0, 3, '①', 16, 14, true, true)
  c.style.stroke = 'blue'
  c = p.addCellText(1, 0, '*', 18, 10, false, true)
  c = p.addCellText(1, 2, '%', 12, 8, false, false)
}
viresh-ratnakar commented 3 years ago

Closing out old bugs that I did take some action on. If I haven't fixed every aspect as expected, apologies, but please open a new bug (hard for me to parse out what remains to be fixed).