Skip to content

Latest commit

 

History

History

tgui

README.md

TGUI

Введение

TGUI - фреймворк с /tg/station для создания браузерных интерфейсов с использованием современных технологии и практик из веб-разработки.

Необходимое ПО

  • Node - требуется версия с NPM версией не ниже 7. Достаточно поставить Текущая версию.

Используемые технологии

  • InfernoJS - React-like библиотека для создания интерфейсов на HTML с использование JavaScript и JSX.
  • TypeScript - типизированный язык программирования созданный на основе JavaScript. При компиляции преобразуется в JavaScript.
  • Webpack - сборщик ассетов и кода, также производит минификацю JavaScript и CSS.
  • Babel - транскомпилятор JavaScript кода. Используется для преобразования современных версии языка в старую версию - работающую в Internet Explorer.
  • SASS - более мощная версия CSS.

Для разработки игровых интерфейсов достаточно знания JavaScript/TypeScript, JSX/TSX и InfernoJS.

Для разработок связанных с tgui-panel (используется для чата) - также необходимо уметь работать с Redux (здесь имеется похожая на него реализация).

В качестве используемого языка крайне рекомендуется использовать TypeScript, файлы с использование этого языка имеют расширения .ts и .tsx.

Команды

Все команды ниже необходимо выполнять ТОЛЬКО в папке tgui.

Если вы только что скачали репозитории или у вас по каким-то другим причинам отсутствует папка tgui/node_modules - выполните команду npm install

  • npm run dev - запускает development сервер TGUI (запускать ПОСЛЕ входа на свой локальный сервер через Dream Seeker).
  • npm run lint - запускает только линтер без компиляции кода, позволяет найти ошибки.
  • npm run build - собирает код TGUI в готовый вариант в папку tgui/public. Её НЕОБХОДИМО выполнять после любых изменении в коде TGUI перед отправкой коммита.

Для Visual Studio Code есть возможность запустить команды npm run dev (TGUI Dev) и npm run build (TGUI Build) через нажатие на F5.

Developer Tools

Когда у вас запущен development сервер - вы имеете доступ к некоторым возможностям:

Debug Logs. В терминале где у вас запущен development сервер будут выводиться различные логи, в том числе и время потраченное на рендер. Пытайтесь держать время рендера не выше 16мс.

Kitchen Sink. Нажмите в окне вашего игрового интерфейса F12 для открытия меню где присутствуют большинство разных UI-компонентов.

Layout Debugger. Нажмите в окне вашего игрового интерфейса F11 для включения отображения раскладки UI-компонентов - у границ компонентов появится тонкая обводка.

Ссылки