Тестовое задание Frontend-разработчика

Описание приложения

Данное приложение - всем известная игра "Сапер" с небольшими докрутками, такими как возможность задавать свои параметры игры (размер поля, количество мин) и темы приложения

Этот проект ориентирован на обработку и рендер больших данных, поэтому можно смело выставлять размер до тысячи ячеек и тратить свои годы на решение этой головоломки

Функциональное описание

Игра повторяет правила оригинала:
- Левый щелчек открывает ячейку, правый - ставит флаг
- Если вокруг открывшейся ячейки нет мин, игра продолжает открывать ячейки вокруг, пока не наткнется на мину
- Если на открывшейся ячейке бомба, игра заканчивается пройгрышем
- Первый ход никогда не приводит к открытию бомбы
- Если открыты все ячейки без бомб, игра считается успешно завершенной
Реализована поддержка больших полей - данная программа выдерживает нагрузку поля 1000 * 1000 с задержкой в рендере в худшем 1 с
Реализована система автосохранения и хранения данных даже при закрытии вкладки
Реализована миникарта для удобства навигации на больших полях
~~Реализована поддержка переключения цветовых тем~~

Краткое описание технического решения

Чтобы отобразить большое поле на странице в браузере, я опробовал несколько способов перед тем, как прийти к итоговому. Сначала я попытался сделать все на одном canvas, но быстро понял, что большие поля этот способ реализовать не даст.

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

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

Как запустить приложение

Для запуска необходимо скачать все зависимости и запустить сервер следующими командами:

npm install

npm run start

После чего сайт будет доступен по ссылке http://localhost:1234

Стек технологий

HTML5 Canvas
TypeScript
~~WebGL~~ попытка неудачная :(

Структура проекта

Проект реализует принципы Flux архитектуры имеет следующую структуру:

.
├── public/
│   └── index.html
└── src/
    ├── components/
    │   └── Здесь лежат ui компоненты приложения
    ├── store/
    │   └── Здесь лежат файлы хранилища (actions, reducer, store, dispatcher)
    ├── utils/
    │   └── Здесь лежат небольшие утилиты общего назначения
    ├── config
    │   └── Здесь лежат константы, нужные по всему приложению
    │
    └── index.ts - точка старта приложения