search

dreamland-mud / mudjs

WebSocket MUD client for DreamLand
https://dreamland.rocks/mudjs/
GNU General Public License v3.0
16 stars 9 forks source link
bootstrap4 dreamland-mud jquery material-ui mud mud-client reactjs websocket

readme

MUDJS: Web-Socket MUD client

Stand With Ukraine License Build Status

Содержание

Обзор

Клиент mudjs первоначально был разработан для мира DreamLand и сейчас доступен по адресу https://dreamland.rocks/mudjs. Для полноценного его использования в код DreamLand была добавлена поддержка web sockets. Это дало возможность поддерживать SSL-соединения, а также видеть реальный IP адрес тех, кто соединяется с миром.

Сейчас в репозитории есть две ветки:

Основная разработка ведется в ветке dreamland. Master по сути заморожен.

Разработка в gitpod.io

Gitpod предоставляет встроенную в браузер среду разработки на базе Visual Studio Code, а также полноценный контейнер со множеством установленных программ.

Доступ к репозиторию из gitpod.io

Изнутри контейнера, который предоставляет gitpod.io, можно сделать git pull или git fetch, но нет прав для заливки своих изменений обратно в репозиторий, git push. Вот как можно добавить права контейнеру с помощью SSH-ключей:

Локальная сборка

Для сборки ветки dreamland, cклонируйте основной репозиторий или свой форк, например:

git clone https://github.com/dreamland-mud/mudjs.git

Затем установите NodeJs и npm, скачав последнюю рекомендуемую версию для вашей системы с официального сайта NodeJs. Под Linux может понадобиться прописать путь к бинарникам node и npm в переменной окружения PATH. Это можно сделать с командной строки или же прописать в файле ~/.bashrc:

export NODEJS_HOME=/opt/node-v8.11.3-linux-x64 # путь может отличаться
export PATH=$NODEJS_HOME/bin:$PATH

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

cd mudjs
npm install

И, наконец, сборка из исходников:

npm run build

Локальный запуск

Запустите клиент в режиме разработчика: все изменения в исходных файлах будут подхватываться и пересобираться автоматически. Клиент станет доступен по адресу http://localhost:3000/ и по умолчанию соединится с основным сервером Дримленд.

npm run start

Можно указать различные фрагменты после /#, для доступа к различным серверам:

Если клиент запускается, но не удается соедениться с сервером, в первую очередь проверьте, не активирован ли AdBlock на текущей странице.

Описание протокола общения с сервером мира DreamLand

Общение между сервером и клиентом происходит в виде команд с аргументами, передаваемых в формате JSON.

{ "command": "имя команды", "args": ["первый аргумент", "второй аргумент", "и так далее"] }

Поддерживаемые команды:

RPC-протокол

TODO

Web Prompt: расширенная строка состояния

Расширенная строка состояния - это JSON-структура, содержащая поля для каждого из видов сообщений (эффекты, кто в мире, положение персонажа и т. д.). На основании этих полей будут заполнены окошки на правой панели клиента. Если между двумя последовательными выводами от сервера к клиенту какое-то из полей не изменилось, оно не будет включено в вывод, и клиент будет знать, что его перерисовывать не надо. Если какое-то поле исчезло (исчезла группа эффектов, стала не видна погода), его значение будет выслано как 'none', и клиент будет знать, что соответствующую секцию на правой панели надо спрятать.

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

Пример строки состояния с подробными комментариями можно увидеть в этой статье вики.

Поддержка цветов

Веб-клиент умеет парсить ANSI-последовательности с цветами, кроме того, он распознает псевдотеги разметки, которые ему посылает сервер DreamLand. Например,

<c c='fgbg'>ярко-зеленое сообщение</c>

превратится в

<span class='fgbg'>ярко-зеленое сообщение</span>

Названия классов основаны на названиях цветов внутри мира, fgbg - (foreground) bright green, fgdr - dark red, и т. д. Они все объявлены в файле main.css.

Контекстное меню манипуляции с предметами

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

Пример разметки для предмета в инвентаре:

<m c='бросить $, надеть $, смотреть $, использовать $, легенды $' id='1773732900'>хитрость лаеркаи</m>

Для компактности символ $ будет заменен на стороне клиента на уникальный ID предмета. ID используется в качестве аргумента для однозначности при манипуляциях.

Пример разметки для команд с дополнительным аргументом. Здесь 5394478976633 - ID бочонка, найденного в инвентаре персонажа, который можно было бы наполнить из этого фонтана.

<m c='пить $, наполнить 5394478976633 $, смотреть $' id='1614907783901'>Большой фонтан (fountain) здесь, бьет нескончаемым потоком воды.</m>

Некоторые манипуляции контекстно-зависимы и могут быть проделаны только в какой-то комнате (магазине, у ремонтника). Такие команды отделяются в меню вертикальной чертой, а внутри псевдотега будут переданы аттрибутом 'l':

<m c='бросить $, надеть $, смотреть $, легенды $' l='чинить $, стоимость $' id='5573732900'>хитрость лаеркаи</m>

Подробнее о командах и тэгах веб-клиента можно почитать в этой статье вики.

Использование клиента для других MUD-ов

Для использования master версии клиента в своем мире нужна либо поддержка web sockets, либо можно воспользоваться утилитой websockify. Например, если мир обычно доступен по протоколу telnet на порту 9000, на хостинге запустите:

websockify :4321 :9000

После чего в странице веб-клиента (например, /mudjs/index.html) установите переменную wsUrl, указывающую на ваш хост и порт 4321:

    <script>
        var wsUrl = "ws://yourmud.com:4321";
    </script>

Хост "yourmud.com" должен совпадать с именем сайта, на котором размещен вебклиент. Внутри main.js, первое что посылается при соединении с сервером, это цифра 7, что соответствует выбору кодировки UTF8 в DreamLand. У себя вы можете изменить эту цифру на тот номер кодировки, который соответствует UTF8 в вашем мире:

    ws.onopen = function(e) {
        send('7');
    }

Готово. Теперь при заходе на страницу http://yourmud.com/mudjs/index.html пройзойдет подключение к серверу, и можно будет начинать играть.