Добавьте управление выбором квадратов с клавиатуры: стрелки вверх, вниз, влево и вправо должны перемещать выбор на соответствующий соседний квадрат, не выходя за границы сетки.

Храните выбранную ячейку как индекс и проверяйте строку и столбец до перехода, чтобы не перескочить через край.

Короткий ответ

Что ответить на собеседовании

Храните выбранную ячейку как индекс и проверяйте строку и столбец до перехода, чтобы не перескочить через край.

Подробный разбор

Ответ с пояснениями

Храните выбранную ячейку как индекс и проверяйте строку и столбец до перехода, чтобы не перескочить через край.

Для полной прямоугольной сетки:

function move(index, key, rows, cols) {
  const row = Math.floor(index / cols), col = index % cols;
  if (key === 'ArrowLeft' && col > 0) return index - 1;
  if (key === 'ArrowRight' && col + 1 < cols) return index + 1;
  if (key === 'ArrowUp' && row > 0) return index - cols;
  if (key === 'ArrowDown' && row + 1 < rows) return index + cols;
  return index;
}

Предполагаются положительные размеры и валидный исходный индекс. Обработчик keydown ставят на сфокусированную сетку, обновляют selection и фокус; preventDefault вызывают для обработанных стрелок.

ИИ-помощник для собеседований

Хочешь уверенно проходить собеседования?

Попробуй ИИ-помощник для собеседований: слышит вас и собеседника, анализирует экран, подсказывает ответы в реальном времени, работает без VPN и не попадает в захват экрана.

Подробнее