Читаете дальше? Отлично! Наверняка вы уже не первый год играете в DnD, WoD, warhammer или какую-нибудь другую хорошую игру. Я уже который год играю по разным сеттингам Мира Тьмы — однако, пост будет про универсальные чарники, а не какую-то конкретную систему.
Постановка задачи
Если вы долго играете, то знаете, что бумажки имеют склонность теряться, уничтожаться, порой очень сложно поднять последние события (новые статы, опыт и прочие), и очень обидно всё это терять. Мне тоже. В голову сразу приходит мысль о электронном чарнике. Конечно, некоторое их количество есть на просторе интернета, но меня не удовлетворило ничего из предложенного. Почему? Давайте прикинем требования.
- Он должен редактироваться в онлайне. Потому что какого чёрта иначе?
- Должна быть возможность расшарить чарник на мастера других заинтересованных лиц
- Он должен быть красивым. Например, используемые всеми для Мира Тьмы Mr Gone’s Character Sheets выглядят вот так (осторожно, по ссылке тяжёлый pdf). Электронный должен быть не хуже.
- Он должен адекватно печататься. Электронная версия это хорошо, но ничто не заменит тёплого лампового листа на столе.
- У него должно быть понятие ревизий. Ревизии должны обладать комментариями, возможностью сравнения и восстановления.
- Желательна возможность оставлять комментарии.
- Желателен вспомогательный алгоритм для генерации нового персонажа. В системах генерёжки обычно сам чёрт ногу сломит, и проверять по 10 раз, правильно ли ты распределил очки — очень уныло.
- Должна быть возможность кому угодно сделать произвольный чарник. Ну или должен быть со старта полный набор требуемых чарников.
К сожалению, полному набору этих требований (даже без учёта “желательных”) не удовлетворяет ничего. Поэтому два года назад я решил, что быстренько сделаю свою систему для работы с чарниками. Гмм, быстренько… Как же я сильно ошибался.
Решение
В общем, долго ли, коротко ли — я сделал такую систему. На момент двухлетней давности она была на PHP+MySQL, для отображения всякого хитрого добра использовал JQuery+Bootstrap. Сразу прошу не кидаться тухлыми помидорами — я бэкендер, а не фронтендер, так что делал на том, что под руку попало. Зато у сделанного был большой плюс — оно работает и реализовывает все мои хотелки:
- Возможность добавлять любые красивые чарники. Сами чарники представляют собой автономные сущности, написанные чисто на HTML+CSS+JS.
- Чарники можно распечатать, хоть для этого и приходилось сильно извращаться в некоторых местах;
- Есть авторизация через Google и возможность давать доступ к чарникам;
- Есть ревизии с возможностью отката и просмотра изменений;
- Есть возможность комментирования;
- Отлично смотрится с планшета и даже телефона;
Как пример — вот так выглядит чарник смертного, а вот так — чарник вампира со стилизацией под vampire the requiem.
Оказалось безумно удобно, однако создание красивого чарника времени отнимает немерянно. Поэтому я закинул удочку в пару сообществ на предмет совместного доделывания… Но энтузиастов не нашлось. Так что на этих двух чарниках я и остановился.
Так почему я пишу этот пост спустя два года? Я всё ещё надеюсь на помощь играющего сообщества, да и повод всплыл хороший. На днях я решил поправить мелкий баг в чарнике для смертных… И опомнился только тогда, когда сделал построение чарника при помощи Node.JS, gulp, babel и browserify. Увы, полностью выпилить JQuery пока что не в моих силах, поскольку я не владею всякими хорошими вещами вроде Angular, React, Vue и так далее — да и будет довольно долго искать и допиливать новые компоненты под новый стек. Однако, начало положено — можно писать на ES6, JQuery Deferreds были заменены на bluebird Promises, HTTP запросы вместо JQuery реализованы при помощи request-promise, часть зависимостей теперь подтягиваются из npm, и так далее. Рефакторингом кода я почти не занимался — задачей было просто завести вариант двухлетней давности — поэтому там есть некоторое количество ужаса. Но повторюсь — у этого кода есть большой плюс — он работает!
Планы
Теоретически, планов есть довольно много:
- Сделать mock для HTTP запросов из чарника, чтобы можно полноценно тестировать чарник без взаимодействия с сервисом;
- Переползти на какой-то адекватный фронтендовый стек;
- Сделать больше красивых хороших чарников;
- Переписать бэкенд самого сервиса на Node.JS.
Практически, времени безумно мало, и в гордом одиночестве я буду только доделывать полезные для меня вещи с такой же периодичностью раз в два года.
Хотелось бы написать, что можно делать всякие хорошие вещи за пожертвования — но увы, времени это занимает слишком долго, и выходит очень дорого. Так что надеюсь только на энтузиазм разработчиков. Если вам интересно, то я буду очень рад участию. Сами чарники есть в open source на github, лицензия MIT. Если вы хотите использовать их для чего-то ещё — я только за — но рассказывайте, любопытно же!
Ссылки
- Система
- То же самое в виде Android приложения;
- Автор дизайна, который я использовал;
- Чарник смертного — свежая переделка;
- Красивый чарник вампира, без Node.JS.
Комментарии (13)
CrondFx
04.03.2017 11:17Чем плох старый-добрый Google Drive с его таблицами?
jehy
04.03.2017 11:20В смысле — с Google Sheets? Ну так некрасиво же, и при распечатывании выйдет таблица, а не бумажный чарник. А если отдельно хранить таблицу для совместной работы и отдельно чарник для игры, то это куча геморроя по сверке и синхронизации.
shf
04.03.2017 17:32+1Как и во многих случаях, всё уже сделано до вас — Генератор чаршитов, престиж классы итд.
jehy
04.03.2017 17:37+1Ага. Но там есть всего несколько сеттингов, в которых нет Мира Тьмы, и скриншоты с чарниками показывают, что оные весьма просты и схематичные. Возможно, это так там и принято, не знаю. Как бы то ни было, мне этот генератор бесполезен, и он не отвечают большинству требований — в том числе ревизиям, шарингу, онлайновому редактированию и так далее.
mindcaster
04.03.2017 20:00Не совсем понятно вот что. Одно дело просто «редактировать страничку» — изменять, переносить элементы, менять цвета и т.п. А если я хочу сделать чарник для вообще другой системы, не имеющей ничего общего с МТ, насколько мне придется углубиться в реализацию? Ведь, грубо говоря, в Мире Тьмы нет понятия «уровень», а в ДнД есть, соответственно надо как-то добавить поле в БД, и т.п.?
jehy
04.03.2017 20:04Здесь всё просто. Грубо говоря, у вас есть два метода, которые вам (чарнику) предоставляет сервис — загрузка объекта данных и его сохранение. При этом внутри там может быть что угодно — уровни, цвета радуги, биографии на сотни страниц, и так далее. Минус только в том, что раскидывание полей объекта по контролем и обратное сохранение из контроля в объект придётся делать самостоятельно.
mindcaster
04.03.2017 20:14Интересно. У меня когда то был свой электронный чарлист для своей системы, которым я пользовался до тех пор, пока тот безнадежно не устарел. А новый написать
все никак времени не найдулень. Надо попробовать, спасибо :)
Stalker_RED
05.03.2017 19:47Что вы имеете в виду под «делать самостоятельно»? Если имена у инпутов в верстке совпадают с названиями полей в базе, или если в базу пишется просто сериализированный массив, то «раскидывание по контролам» делается в три строчки, а обратный сбор — в одну.
// load data to form for (let fieldName in data) { let input = document.querySelector('input[name='+fieldName+']') input.value = data[fieldName] } // serialize form let form = document.querySelector('form') let serialized = new FormData(form) // send it with AJAX
Live demo: https://jsfiddle.net/1yr4vh0h/
UPD: ну ок, нужно еще пару строк дописать для поддержки textarea или select-ов. Хотя, если jQuery еще не выбросили, то все очень просто.jehy
05.03.2017 20:19Ага. Только есть некоторое число "но". Это то, что часто приходится использовать нестандартные контролы, иногда есть последовательность инициализации, есть инициализация дефолтными значениями и сохранёнными, и так далее. В общем, практика несколько отличается. Это не какой-то космос, и само самой разумеется для любого, кто пишет на JS — просто уточнение было для тех, кто умеет только HTML.
OlegZorin
А остался первоначальный проект (то что на PHP, MySQL, jQuery и Bootstrap)?
И что там работало и не работало?
jehy
Наверное, я не совсем внятно написал.
В самих чарниках PHP не было никогда — чарник представляет собой HTML страничку, которая общается с API. А именно API и прочие системные функции вроде логина, работы с БД и шаринга написаны на PHP. И до сих пор на нём написаны. И работает там всё что есть и перечислено в посте.