KGS Leader Board

---

Описание структуры репозитория

├── public
├── src
│   ├── assets # test files
│   ├── components
│   ├── configs
│   ├── hooks
│   ├── icons
│   ├── stories # storybook files
│   ├── styles
│   ├── types
│   └── utils
└── types # dev environment and browser types

Нами была испльзована стандартная структура ReactJS проекта, представленная выше.
Также, во время написания всего проекта мы активно использовали github workflow для форматирования кода и отслеживания ошибок синтаксиса.

Описание методологии взаимодействия API и схема архитектуры системы

Взаимодействие с API было реализовано посредством использвания проксисервера. Данное решение позволило сделать все запросы на сервер более безпасными (возможно установить cors same-origin).

            |fronted(React JS APP) <---> proxy| <---> www.gokgs.com
            |_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _|
                       (same origin)

Взаимодействие с API начинается с отправки POST запроса с типом LOGIN. В случае если он был выполнен успешно, запускается функция, которая отправляет GET запрос на сервер, ждёт его выполнение и в случае успеха передаёт полученные с сервера сообщения в reducer и повторно вызывает сама себя. Это — функция, которая в зависимости от типа сообщения выполняет некоторые дествия. Метод получения их результата зависит от конкретного запроса, так как, например, в случае с получением ТОПа участников, устанавливается созданный ранее глобальный стейт, а в случае получения отдельной игры, запрос ожидает пока данные не появятся в базе данных.

В обоих случаях, при отправке POST запроса в базе данных сохраняется некоторая информация о нём

Описание реализованной функциональности

1. ТОП 100 игроков

Была реализована возможность просматривать ТОП 100 игроков с отображением информации 2 последних игр каждого участника ТОПа. Информация об играх:

1. Имена игроков партии и их цвета
2. Размер игрового поля
3. Информация о резуьтатах игры(колличество очков)

2. Просмотр определенной партии с возможностью перемотки игры

Реализована возможность просмотра любой партии с сайта www.gokgs.com, используя уникальный идентификатор timestamp.

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

3. Авторизация на сайте, исполльзуя аккаунт www.gokgs.com

Для получения доступа ко всем функциям сайта, необходимо авторизоваться, используя данные аккаунта www.gokgs.com

Видео демонстрация, подтверждающая работоспособность заявленного

Сначал будет продемонстрирована загрузка данных ТОПа непосредственно с сервера, а далее его подгрузка из внутренней базы данных приложения.

Видео демонстрация это хорошо, но самостоятельно протестировать сайт можно тут: gokgs.stuvars.com

Описание стека технологий и библиотек

NodeJS

1. ReactJS
2. TypeScript

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

Список всех библиотек представлен в файле package.json:

"dependencies": {
    "bootstrap": "^5.0.0-beta3", // Глобальные стили
    "bootstrap-icons": "^1.4.1",
    "idb-keyval": "^5.0.4", // Интерфейс для взимодействия с IndexedDB
    "react": "^17.0.0",
    "react-dom": "^17.0.0",
    "react-router-dom": "^5.2.0",
    "styled-components": "^5.2.2", // Применялась для стилищации компонента board
    "@types/styled-components": "^5.1.9"
  },
  "devDependencies": {
    "snowpack": "^3.0.1", // Система для разработки и сборки приложения
    "snowpack-plugin-svgr": "^0.1.2",
    "@snowpack/plugin-dotenv": "^2.0.5",
    "@snowpack/plugin-react-refresh": "^2.4.0",
    "@snowpack/plugin-typescript": "^1.2.0",
    "@snowpack/web-test-runner-plugin": "^0.2.0",
    "@storybook/addon-actions": "^6.1.21", // Инструмент для разработки UI компонентов
    "@storybook/addon-essentials": "^6.1.21",
    "@storybook/addon-links": "^6.1.21",
    "@storybook/react": "^6.1.21",
    "storybook-css-modules-preset": "^1.0.7",
    "@types/bootstrap": "^5.0.9",
    "@types/node": "^14.14.35",
    "@types/react": "^17.0.0",
    "@types/react-dom": "^17.0.0",
    "@types/react-router-dom": "^5.1.7",
    "@types/snowpack-env": "^2.3.2",
    "@typescript-eslint/eslint-plugin": "^4.20.0",
    "@typescript-eslint/parser": "^4.20.0",
    "eslint": "^7.23.0", // Линтер для проверки качества кода
    "eslint-config-prettier": "^8.1.0",
    "eslint-plugin-prettier": "^3.3.1",
    "eslint-plugin-react": "^7.23.1",
    "http-proxy": "^1.18.1", // Прокси для обращений к апи во время разработки
    "lint-staged": "^10.5.4", // Хук для форматирования кода при коммите
    "husky": "^6.0.0",
    "prettier": "^2.0.5", // Инструмент для форматирования кода
    "typescript": "^4.0.0"
  }

Pyhton

1. Brython
   Используется для просчета логики игры ГО. При запуске, происходит трансляция python кода в javascript, после чего он выполняется. Мы пробросили необходимые методы в объект window для того, чтобы иметь к ним доступ в javascript коде

Инструкция по запуску

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

docker run -dp <your port>:5000 sshkk/gokgs-leaderboard:main

Данная команда запустит приложение в контейнере фоновом режиме.