В качестве дипломной работы нужно запрограммировать игру «Крестики-нолики». Фронтенд-разработчик подготовил для вас визуальное оформление, осталось написать логику работы игры.

Игроки по очереди ставят крестики и нолики. Игрок, первый заполнивший своими символами диагональ, вертикаль или горизонталь, выигрывает.

Стартовый код для реализации проекта. Страница отображается во вкладке result, отладочная информация во вкладке console.

Проект состоит из:

• пустого файла logic.js в котором нужно реализовать логику игры;
• из готовых файлов, которые не нужно изменять (index.html, styles.css, ui.js).

Вам нужно реализовать две основные функции:

1. startGame вызывается без параметров при открытии или перезапуске игры. В ней нужно создать поле игры и выбрать активного игрока.
2. click вызывается при клике игрока по полю. Вызов происходит с двумя значениями — номер строки и колонки, по которой произошёл клик. В этой функции нужно обновить игровое поле и проверить, выиграл ли игрок, либо можно передавать ход следующему.

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

Как работает игра:

1. Когда страница загружается, вызывается функция startGame. Она должна сказать, кто ходит первый, затем создать игровое поле и отрисовать его.
2. Когда игрок кликает на игровом поле, происходит вызов функции click. Нужно поставить метку игрока в этом поле, отрисовать поле на экране. Затем проверить, не выиграл ли игрок. Если выиграл, то поздравить его, а если ещё нет — передать ход следующему игроку.

Внутреннее устройство игры делится на три части:

• логическая модель игры;
• отрисовка логической модели на экране (реализовано);
• реакция на действия игрока (реализовано).

Ваша задача — создать и поддержать актуальность логической модели игры. Логическая схема игры — информация об игровом поле и метках в нём.

Игровое поле — таблица 3х3 клетки. Предлагается представить игровое поле в виде массива массивов (см. примеры ниже).

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

Для отрисовки на экране нового состояния игрового поля нужно вызвать функцию renderBoard и передать в неё информацию о поле в виде массива.

Если игра закончилась победой одного из игроков, нужно вызвать функцию showWinner и передать в неё номер игрока-победителя.

Информация об игроках хранится в массиве. Каждому игроку соответсвует проставляемый символ на поле: let players = ['x', 'o'];.

Функция будет вызываться без параметров внешним кодом. В этой функции нужно:

1. Создать игровое поле. Оно должно представлять из себя массив массивов. Для обращения к ячейке игрового поля нужно знать строку и колонку этого поля.
2. Установить активного игрока.
3. Вызвать функцию renderBoard для отрисовки игрового поля.

Функция будет вызываться с двумя параметрами — номером строки и колонки ячейки, на которой произошёл клик.

В этой функции нужно:

1. Обновить игровое поле, записать в нужную ячейку символ игрока.
2. Вызвать функцию renderBoard для отрисовки игрового поля.
3. Проверить, выигрышная ли сложилась ситуация.
4. Если ситуация выигрышная, вызвать функцию showWinner и передать в неё номер игрока.
5. Если нужно играть дальше, то передать ход следующему игроку.

Выигрыш первого игрока:

[
  ['x', '', ''],
  ['o', 'x', ''],
  ['o', '', 'x']
]

Первый ход:

[
  ['', '', ''],
  ['', 'x', ''],
  ['', '', '']
]

Если передать такое поле в функцию renderBoard, то на экране появится соответствующее поле. Например:

let board = [
  ['', '', ''],
  ['', 'x', ''],
  ['', '', '']
];
renderBoard(board);

Отрисовка срабатывает только в функциях startGame и click.

Напишите код так, чтобы он работал на квадратном поле любого размера.