Контекстное меню для предметов в клиенте mudjs

Очередной «концептуальный прорыв» в вебклиенте. У всех предметов по нажатию на них появляется выпадающее меню, в котором перечисленым команды, которые можно проделать с этим предметом. По нажатию на пункт меню команда попытается выполниться (попытается — т.к. с тех пор предмет мог уже изменить свое местоположение или исчезнуть).

Меню зависит от типа и положения предмета, например:
* для предмета внутри контейнера виден будет только пункт «взять»
* для большиства предметов на полу или в инвентаре: «бросить» или «взять», «смотреть», «использовать»
* для мебели на полу будет видно «сесть, лечь, отдыхать» в зависимости от типа мебели
* для фонтана меню будет содержать «пить, наполнить», для бочонков — «пить, вылить»
* для вещей в инвентаре также видет пункт «легенды», если это умение доступно
* ворам виден пункт меню «украсть» на предмет в чужом инвентаре
* и так далее

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

Пример для предмета в инвентаре:
<m c=«бросить $, надеть $, смотреть $, использовать $, легенды $» id=«1773732900»>хитрость лаеркаи</m>
Для компактности символ $ будет заменен на стороне клиента на id предмета.
ID используется в качестве аргумента для однозначности, т.к. иначе для предметов с одинаковым названием пришлось бы вычислять это 3.бочонок или 2.бочонок, при том что с тех пор позиция в инвентаре могла поменяться, и команда в итоге выполнится с не тем предметом.

Аналогично теперь идет работа и с цветами, т.е. вебклиент больше не парсит ANSI-последовательности, а работает с псевдотегами <c c='fgbg'>ярко-зеленое сообщение</c>, превращая их в <span class='fgbg'>.

Пачка скриншотов под катом:



Читать дальше →

Голосовой интерфейс в МАДах

Был недавно пост в мадере на тему, но я его увидел уже после того, как в голове возникла мысль: а надо бы в МАДы прикрутить голосовое управление (и в целом, голосовой интерфейс) — ведь это идеальный жанр, даже по сути единственный жанр онлайн игр, где подобный «интерфейс» будет удобным и является очень полезным и нужным. Почему эта мысль пришла ко мне в голову? Дело в том, что я недавно повредил правую руку и сейчас как однорукий пират работаю только левой (а я правша). Называется, почувствуй себя disabled person.

Сразу начинаешь понимать, насколько важно развивать в геймдеве альтернативное управление и интерфейсы. Убежден, что если подобный интерфейс будет как следует реализован, это привлечет большое количество новых игроков в жанр и в целом вдохнет в него новую жизнь (сейчас МАДы, как не прискорбно — андеграунд в андеграунде).

Как?

Самое элементарное — www.voicemacro.net/, запиливаем голосовые макросы под нужные гайки. Но было бы здорово заточить какую-то систему под конкретный клиент, более технологически подойти к этому вопросу, чтобы люди могли продукт скачать, настроить под свой голос и играть, а не с нуля все запиливать.

Предлагаю этот вопрос обсудить в комментах и в дискорд канале, посвященном МАДам. С удивлением обнаружил, что в нашем уютном комьюнити до сих пор нет дискорд канала, настало время исправить эту недоработку. Ссылка на дискорд по МАДам: discord.gg/RPaz6ut, добавляйтесь. Фишка дискорда в том, что им удобно пользоваться из браузера, он быстрый и не грузит систему (в отличие от скайпов и проч. мути).

Мой видос на тему:


Источник: tangar.info/analitika/golosovoj-interfejs-v-madah/

Воздействия на персонаже в клиенте mudjs

Новая панель, где в сокращенном виде выводятся большинство воздействий (аффектов) на персонаже. Положительные зеленым, отрицательные красным, те которым жить осталось меньше тика — желтым.



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

Upd: клиент в действии, исходники клиента

Правая панель состояния в клиенте mudjs

Следующий виток интеграции вебклиента с миром: в протокол общения добавлена информация о текущем положении персонажа (если оно и так видно по команде 'где'), о времени и погоде (если она видна). Все это выводится в правой панели клиента. Пока что это всё не настраиваемо, т.е. у игрока нет выбора, какую информацию показывать, какую отключить. С добавлением новых панелей эту задачу придется решить так или иначе.



Upd: клиент в действии, исходники клиента

nmud dev server

Скриншот вебморды

UPD на 05.07.18: начал работу над человеколюбивой формой авторизации. Пока не работает — не обращайте на кнопки «Login» и «Register» внимание.
UPD на 08.07.18: сделал формы авторизации.
UPD на 09.07.18: вебморда теперь умеет работать по https. Но нужен валидный сертификат, а для сертификата — домен.
UPD на 10.07.18: разобрался с доменом и сертификатами, скоро опубликою статью-новость.
12.07.18: добавил редирект http -> https

В общем, у нас уже какое-то время (вроде бы два месяца, но это не точно) есть собственный сервер.

Можно пощупать прямо из браузера: nmud.info

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

Внимание! Не оставляйте на сервере персональной информации (номера, пароли, личные данные)! Сервер никем принципиально не тестировался на безопасность.

В ближайшее время, возможно (только возможно!) буду много коммитить интересного.

Отображение информации о группе в веб-клиенте mudjs

Новая фишка в клиенте: отображение состояния твоей группы, как более сжатая версия того, что выводит команда group.
Вверху показываются все персонажи, дальше — домашние животные и призванные существа. В планах еще добавить флаги, обозначающие самые важные отрицательные или положительные воздействия на согрупнике, такие как слепота или защита святилища.
Табличка группы обновляется мгновенно, так же как и строка подсказки (prompt), т.к. вся информация каждый раз высылается от сервера к клиенту.


Upd: клиент в действии, исходники клиента

Маппер для веб-клиента mudjs

(репост с forum.mudconnector.su)

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

* По нажатию на кнопку «карта» в соседней вкладке откроется обычная ASCII-карта текущей зоны, если она есть среди карт на сайте

* Если эта карта обладает специальной разметкой, текущее положение персонажа будет подсвечено красным. Если сместиться из комнаты в комнату, текущее положение мгновенно обновится.



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



Upd: клиент в действии, исходники клиента

Стройплощадка DreamLand

(репост с forum.mudconnector.su)

Выложен первый, черновой вариант документации по внутримировому редактору зон (OLC) и скриптовому языку.

Со всем этим можно экспериментировать на отдельно поднятом сервере — стройплощадке (dreamland.rocks 7000 или dreamland.rocks/mudjs/build.html)
Там смертным доступны некоторые дополнительные команды, такие как load/vnum/holylight, для удобства редактирования зон.

The Magic Door

The Magic Door это интерактивное приключение, играть в которое нужно отдавая команды голосовому помощнику Alexa. Вам нужно говорить ей какое решение вы принимаете в той или иной ситуации, а Alexa отвечает, что случается затем. На сайте игры https://www.themagicdoor.org/stories/ вы можете почитать про нее подробнее. Также там описана аналогичная игра Rogue's Choice, в нее можно играть через Alexa и Google Assistant.


Как все это примерно выглядит на практике, можно увидеть в шуточном видео: