Karty postaci i szablony

Gdzie karta żyje przy stole

Dolny panel ma notatniki. Do notatnika wczytujesz szablon z serwera albo własny plik. Ta sama karta może wisieć przy tokenie postaci, w panelu tokenu. Każda otwarta kopia ma własne pola: zmiana punktów życia u wojownika nie rusza karty maga.

Nazwa pola, na przykład str_mod, jest też nazwą, którą makro czyta jako @str_mod. Karta i rzut w panelu kości mówią tym samym językiem.

Dwie drogi dla Mistrza Gry

W bocznym panelu stołu, po zalogowaniu hasłem MG, jest sekcja „Zarządzaj szablonami”. Przycisk „Stwórz w edytorze” składa kartę z sekcji i wierszy: pole tekstowe, obszar tekstu, checkbox albo pole z przyciskiem rzutu. Przy każdym polu podajesz etykietę i identyfikator. Ten identyfikator później wstawiasz do formuł jako @nazwa.

Druga droga to plik .html. Kładziesz go w backend/assets/templates/ albo wgrywasz z poziomu „Wgraj plik HTML”. Nazwa pliku staje się nazwą na liście: dnd_5e.html widać jako „Dnd 5e”. Gotowe karty z edytora da się poprawiać w edytorze. Plik napisany ręcznie, ze skryptem, otwierasz do podglądu albo duplikujesz i dopiero kopię układasz w edytorze.

Pola, które gracze wypełniają

W pliku HTML każde pole dostaje atrybut data-field z unikalną nazwą. Ta nazwa trzyma wartość między sesjami. Wygląd dokładają klasy: .plain stapia się z tekstem, .box ma ramkę, .circle jest bańką na cechę. Szerokość: .xs, .sm, .wide.

<input data-field="character_name" type="text" class="plain wide">
<input data-field="hp" type="text" class="box sm" value="12">
<input data-field="str" type="text" class="circle">

Zawartość znacznika <title> staje się tytułem notatki w chwili wczytania szablonu. Długi opis, ekwipunek i historia postaci lepiej siedzą w <textarea>.

Rzut prosto z karty

Przycisk z data-roll rzuca kośćmi i wrzuca wynik do wspólnej historii. Formuła może być stała, d20+5, albo brać liczbę z pola, d20+@str_mod. Biegłość dopisujesz warunkiem: wartość dochodzi tylko wtedy, gdy zaznaczony jest checkbox.

<input data-field="athletics" type="text" class="box xs" value="+3">
<input data-field="athletics_prof" type="checkbox">
<button
  data-roll="d20+@athletics+@prof_bonus?@athletics_prof"
  data-roll-label="Atletyka"
  class="roll-btn">🎲</button>

data-roll-label to nazwa, którą drużyna widzi w historii, na przykład „Atletyka” albo „Atak: @weapon_name”. W edytorze to samo ustawiasz jako formułę rzutu i etykietę przy wierszu „Pole z przyciskiem rzutu”.

Wygląd i liczenie pól

Do prostej karty wystarczą pola i przyciski. Gdy karta ma własny kolor, w pliku HTML dodajesz blok <style>. Style zostają przy tej karcie: druga notatka obok nie dziedziczy tła. Skrypt jest opcjonalny. Dostaje obiekt vtt i nim czyta oraz zapisuje pola, na przykład modyfikator cechy ze współczynnika.

<script>
  function abilityModifier(score) {
    var n = parseInt(score, 10);
    if (isNaN(n)) return '';
    var m = Math.floor((n - 10) / 2);
    return (m >= 0 ? '+' : '') + m;
  }

  vtt.onFieldChange(function (name) {
    if (name === 'str_score') {
      vtt.setField('str_mod', abilityModifier(vtt.getField('str_score')));
    }
  });
</script>

vtt.getField czyta pole, vtt.setField je zapisuje, vtt.onFieldChange reaguje na wpisywanie. Skrypt nie woła się ponownie od własnego setField, więc nie wpada w pętlę. Zewnętrznych plików <script src> stół nie uruchamia. Pliki z katalogu szablonów są treścią MG: wgrywaj tylko karty, którym ufasz.

Zapis karty

Uzupełniona karta zostaje w przeglądarce gracza, osobno dla każdego notatnika. Przycisk zapisu oddaje dwa pliki: JSON z szablonem i wartościami pól, albo HTML z wpisanymi liczbami, wygodny do druku. Przyciski rzutu w eksporcie HTML są ukryte. Wczytanie JSON przywraca pola. Wczytanie samego HTML zaczyna od wartości wpisanych w atrybucie value.

Pełna składnia pól, scopowania CSS i API vtt jest w instrukcji w repozytorium. Przewodnik tworzenia szablonów na GitHubie.