Как сделать проверку на совпадение содержимого ячеек судоку?

Question

[evg_96]

class Grid extends Component {
  constructor() {
    super();

    this.state = {
      grid: [
        [8, 9, 0, 0, 0, 0, 0, 0, 4],
        [0, 3, 0, 0, 9, 1, 0, 0, 7],
        [5, 0, 0, 2, 3, 4, 0, 9, 0],
        [9, 0, 0, 0, 0, 0, 3, 0, 0],
        [0, 4, 5, 0, 1, 0, 0, 7, 0],
        [6, 0, 0, 0, 4, 0, 0, 1, 0],
        [0, 8, 9, 0, 5, 0, 0, 2, 0],
        [0, 2, 0, 0, 8, 0, 0, 0, 0],
        [4, 0, 6, 0, 0, 0, 7, 0, 0]
      ]
    };
  }

  render() {
    return (
      <table className="grid">
        <tbody>

          {
            this.state.grid.map((row, rowIndex) => (
              <tr key = { rowIndex }>
                {
                  row.map((item, itemIndex) => (
                    <td key = { itemIndex } className="grid-item">{ item !== 0 ? item : <input className="grid-input" type="text"/> }</td>
                  ))
                }
              </tr>
            ))
          }

        </tbody>
      </table>
    );
  }
}

Делаю судоку на реакте. Как лучше реализовать проверку условий того, что введенное значение в ячейке не будет повторяться в строке в столбце и в блоке 3x3?
Как проверять строки и столбы вроде как на словах понятно, нужно просто взять координаты вводимого числа (не понятно как), и пройтись в цикле по столбцу и строке пересекающих эту координату.
А вот как проверить блок 3x3 при такой модели состояния, непонятно.

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

Answer 1

[0xD34F]

Пытался нагуглить, но самостоятельно разобраться в простыне кода не могу.

Что-то вы странное нагуглили - на всё про всё строчек десять, никакой "простыни".

Вычисляете координаты начала текущего блока, затем обходите его (два цикла, один вложен в другой, от начальных координат до начальных + 3). Типа так.

Comments

[evg_96]

0xD34F Спасибо, но подскажите что значит данная запись row / 3 | 0, что я туплю сегодня сильно, не могу ничего понять

[0xD34F]

Примерно (примерно, о взаимозаменяемости речи не идёт) то же самое, что и Math.floor(row / 3). Битовые операции выполняются над целыми числами, так что дробная часть отбрасывается.

[evg_96]

0xD34F, А не подскажите как реализовать добавление и удаление класса ячейкам которые совпадают в блоке, строке или столбце? Хочу чтобы при вводе неподходящего числа, было выделение например красным, ячеек которые совпали с этим числом. Непонятно в каком месте добавлять классы. Или может быть вообще нужно это сделать в рендере...

Codepen

[0xD34F]

В продолжение ответа на ваш следующий вопрос - можно просто добавить свойство, указывающее на задублированность числа, и в зависимости от его значения назначать или нет класс. Типа так (это не полностью рабочий вариант - так, чтобы показать куда двигаться).

[evg_96]

0xD34F, спасибо большое что помогаете

Answer 2

[imhuman]

составь новый массив по числу маленьких квадратов, пройдись по матрице циклом и разнеси числа по новому массиву, предварительно по индексам определив в какой именно пойдет число. А дальше проверь так же как проверяешь строки