Сегодня пятница, так что самое время предаться нашим весёлым странным страстям. Надеюсь, что здесь найдётся аудитория, которая при словосочетании “ролевые игры” представляет себе нечто отличное от девки с плёткой в латексе… Если вы именно о ней и подумали, то дальше читать вам, скорее всего, будет неинтересно.

На самом деле речь идёт про это.


Кадр из фильма восхитительной серии The Gamers.

Читаете дальше? Отлично! Наверняка вы уже не первый год играете в 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. Если вы хотите использовать их для чего-то ещё — я только за — но рассказывайте, любопытно же!

Ссылки


  1. Система
  2. То же самое в виде Android приложения;
  3. Автор дизайна, который я использовал;
  4. Чарник смертного — свежая переделка;
  5. Красивый чарник вампира, без Node.JS.
Поделиться с друзьями
-->

Комментарии (13)


  1. OlegZorin
    04.03.2017 11:12

    А остался первоначальный проект (то что на PHP, MySQL, jQuery и Bootstrap)?

    И что там работало и не работало?


    1. jehy
      04.03.2017 11:16

      Наверное, я не совсем внятно написал.


      В самих чарниках PHP не было никогда — чарник представляет собой HTML страничку, которая общается с API. А именно API и прочие системные функции вроде логина, работы с БД и шаринга написаны на PHP. И до сих пор на нём написаны. И работает там всё что есть и перечислено в посте.


  1. CrondFx
    04.03.2017 11:17

    Чем плох старый-добрый Google Drive с его таблицами?


    1. jehy
      04.03.2017 11:20

      В смысле — с Google Sheets? Ну так некрасиво же, и при распечатывании выйдет таблица, а не бумажный чарник. А если отдельно хранить таблицу для совместной работы и отдельно чарник для игры, то это куча геморроя по сверке и синхронизации.


  1. shf
    04.03.2017 17:32
    +1

    Как и во многих случаях, всё уже сделано до вас — Генератор чаршитов, престиж классы итд.


    1. jehy
      04.03.2017 17:37
      +1

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


  1. nyakman
    04.03.2017 17:37

    Сколько примерно по времени может занять добавления чарника по 5й редакции?


    1. jehy
      04.03.2017 17:39

      Одностраничный чарник без особых украшательств можно при наличии некоторого скилла сверстать за день. Это в первый раз. Во второй и дальше уйдёт имхо 2-4 часа.


  1. mindcaster
    04.03.2017 20:00

    Не совсем понятно вот что. Одно дело просто «редактировать страничку» — изменять, переносить элементы, менять цвета и т.п. А если я хочу сделать чарник для вообще другой системы, не имеющей ничего общего с МТ, насколько мне придется углубиться в реализацию? Ведь, грубо говоря, в Мире Тьмы нет понятия «уровень», а в ДнД есть, соответственно надо как-то добавить поле в БД, и т.п.?


    1. jehy
      04.03.2017 20:04

      Здесь всё просто. Грубо говоря, у вас есть два метода, которые вам (чарнику) предоставляет сервис — загрузка объекта данных и его сохранение. При этом внутри там может быть что угодно — уровни, цвета радуги, биографии на сотни страниц, и так далее. Минус только в том, что раскидывание полей объекта по контролем и обратное сохранение из контроля в объект придётся делать самостоятельно.


      1. mindcaster
        04.03.2017 20:14

        Интересно. У меня когда то был свой электронный чарлист для своей системы, которым я пользовался до тех пор, пока тот безнадежно не устарел. А новый написать все никак времени не найду лень. Надо попробовать, спасибо :)


      1. 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 еще не выбросили, то все очень просто.


        1. jehy
          05.03.2017 20:19

          Ага. Только есть некоторое число "но". Это то, что часто приходится использовать нестандартные контролы, иногда есть последовательность инициализации, есть инициализация дефолтными значениями и сохранёнными, и так далее. В общем, практика несколько отличается. Это не какой-то космос, и само самой разумеется для любого, кто пишет на JS — просто уточнение было для тех, кто умеет только HTML.