How to let user toggle highlighting a cell?

[DKMiller71]

Is there a way that a user can mark / toggle highlighting in a cell? I think I know how to add a cell dynamically to the highlights list, but is there a well to capture that the user wants to do this (key sequence or whatever mobile equivalent might be)?

[DKMiller71]

Not sure if there's a better way, but here's what I came up with...

var userHighlights = {}		// cells to be highlighted dynamically

function customizeExolve(puz) {
  puz.gridInput.addEventListener('keyup', handleToggleHighlight.bind(this, puz, 'red'));
}

function handleToggleHighlight(puz, color, e) {

  let key = e.which || e.keyCode
  if(key != 49) return // 1

  puz.usingGnav = true;
  const gridCell = puz.currCell()
  if (!gridCell) return
  if (!gridCell.isLight) return

  const row = puz.currRow
  const col = puz.currCol
	
  // Un-highlight:
  if ([row, col] in userHighlights) {
    puz.colourGroup.removeChild(userHighlights[[row, col]])
    delete userHighlights[[row, col]]
    return
  }

  // Highlight:
  userHighlights[[row, col]] = puz.makeCellDiv(row, col, color, 1)
  puz.colourGroup.appendChild(userHighlights[[row, col]] )

  puz.colourGroup.style.display = (Object.keys(userHighlights).length > 0) ||
      this.colourfuls.length > 0)? '' : 'none';
}

[viresh-ratnakar]

Sure, this seems fine to me!

I had implemented something related in a test: in this, the cell has a colour that depends on the letter that's been entered.

[DKMiller71]

yeah... I wanted the user to be able to add the marking. Though it looks like it resets when the puzzle is reloaded.

[viresh-ratnakar]

Maybe you can save the state of the highlighting directly in local storage using window.localStorage.{set,get}Item()?