templates/partials/grimoire.html.twig line 1

Open in your IDE?
  1. {% embed 'includes/details.html.twig' with {
  2.     summary: 'grimoire.title'|trans,
  3.     id: 'grimoire'
  4. } %}
  5.     {% import 'macros/forms.html.twig' as forms %}
  6.     {% block body %}
  7.     <div class="pad-wrapper">
  8.         <div class="pad pad--growable js--pad"></div>
  9.         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 512" class="pad-wrapper__icon"><!--! Font Awesome Pro 6.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path fill="currentColor" d="M246.6 361.4C252.9 367.6 256 375.8 256 384s-3.125 16.38-9.375 22.62l-96 96c-12.5 12.5-32.75 12.5-45.25 0l-96-96c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L96 402.8v-293.5L54.63 150.6c-12.5 12.5-32.75 12.5-45.25 0s-12.5-32.75 0-45.25l96-96c12.5-12.5 32.75-12.5 45.25 0l96 96C252.9 111.6 256 119.8 256 128s-3.125 16.38-9.375 22.62c-12.5 12.5-32.75 12.5-45.25 0L160 109.3v293.5l41.38-41.38C213.9 348.9 234.1 348.9 246.6 361.4z"/></svg>
  10.     </div>
  12.     {% include 'partials/grimoire/demon-bluffs.html.twig' %}
  14.     <ul class="button-list mt-4">
  15.         <li>{% include 'partials/grimoire/add-token.html.twig' %}</li>
  16.         <li>{% include 'partials/grimoire/add-reminder.html.twig' %}</li>
  17.         <li>{% include 'partials/grimoire/add-traveller.html.twig' %}</li>
  18.         <li>{% include 'partials/grimoire/add-fabled.html.twig' %}</li>
  19.         <li>{% include 'partials/grimoire/show-tokens.html.twig' %}</li>
  20.         <li><button type="button" class="button button--full-height" id="reset-height">{{ 'grimoire.grimoire.reset_height'|trans }}</button></li>
  21.         <li><button type="button" class="button button--full-height button--warning" id="clear-grimoire" data-confirm="{{ 'grimoire.grimoire.clear_grimoire_warning'|trans }}">{{ 'grimoire.grimoire.clear_grimoire'|trans }}</button></li>
  22.     </ul>
  24.     <details id="grimoire-settings" class="pad pad--bluffs mt-4">
  25.         <summary class="pad__title">{{ 'grimoire.grimoire.token_settings'|trans }}</summary>
  26.         <div>
  28.             <div class="mt-4">
  29.                 {{ forms.switch({
  30.                     node: 'div',
  31.                     label: 'grimoire.grimoire.show_night_order'|trans,
  32.                     name: 'show-night-order',
  33.                     id: 'show-night-order',
  34.                     checked: true
  35.                 }) }}
  36.             </div>
  38.             <div class="mt-4">
  39.                 {{ forms.range({
  40.                     label: 'grimoire.grimoire.character_size'|trans,
  41.                     name: 'token-size',
  42.                     id: 'token-size',
  43.                     output: 'token-size-output',
  44.                     min: 0.5,
  45.                     max: 2,
  46.                     step: 0.1,
  47.                     value: 1
  48.                 }) }}
  49.             </div>
  50.             <div class="mt-4">
  51.                 {{ forms.range({
  52.                     label: 'grimoire.grimoire.reminder_size'|trans,
  53.                     name: 'reminder-size',
  54.                     id: 'reminder-size',
  55.                     output: 'reminder-size-output',
  56.                     min: 0.5,
  57.                     max: 2,
  58.                     step: 0.1,
  59.                     value: 1
  60.                 }) }}
  61.             </div>
  63.         </div>
  64.     </details>
  66.     {% endblock %}
  67. {% endembed %}
  69. <template id="token-template">
  70.     <button type="button" class="token token--movable js--token--wrapper"></button>
  71. </template>
  73. <template id="character-template">
  74.     <span class="character js--character js--character--leaves">
  75.         <span class="character__image">
  76.             <img src="" alt="" class="character__icon js--character--image" width="177" height="124" loading="lazy">
  77.         </span>
  78.         <svg viewBox="0 0 150 150" class="character__text">
  79.             <path d="M 13 75 C 13 160, 138 160, 138 75" id="curve" fill="transparent"></path>
  80.             <text width="150" x="66.6%" text-anchor="middle" class="character__name">
  81.                 <textPath xlink:href="#curve" style="fill: currentColor;" class="js--character--name"></textPath>
  82.             </text>
  83.         </svg>
  84.         <span class="character__shroud">
  85.             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" class="character__ghost-vote"><!--! Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path fill="currentColor" d="M96 80c0-26.5 21.5-48 48-48H432c26.5 0 48 21.5 48 48V384H96V80zm313 47c-9.4-9.4-24.6-9.4-33.9 0l-111 111-47-47c-9.4-9.4-24.6-9.4-33.9 0s-9.4 24.6 0 33.9l64 64c9.4 9.4 24.6 9.4 33.9 0L409 161c9.4-9.4 9.4-24.6 0-33.9zM0 336c0-26.5 21.5-48 48-48H64V416H512V288h16c26.5 0 48 21.5 48 48v96c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V336z"/></svg>
  86.         </span>
  87.         <span class="character__player-name js--character--player-name"></span>
  88.     </span>
  89. </template>
  91. <template id="reminder-list-template">
  92.     <li class="tick-select reminder-list__item js--reminder-list--item">
  93.         <input type="checkbox" class="tick-select__checkbox reminder-list__checkbox sr-only js--reminder-list--checkbox">
  94.         <button type="button" class="tick-select__highlight reminder-list__button no-btn js--reminder-list--button"></button>
  95.     </li>
  96. </template>
  98. <template id="reminder-template">
  99.     <span class="tick-select__icon reminder">
  100.         <span class="reminder__image">
  101.             <img src="" alt="" class="reminder__icon js--reminder--image" width="177" height="124" loading="lazy">
  102.         </span>
  103.         <svg viewBox="0 0 150 150" class="reminder__text">
  104.             <path d="M 13 75 C 13 -10, 138 -10, 138 75" id="curve-top" fill="transparent"></path>
  105.             <text width="150" x="66.6%" text-anchor="middle" class="reminder__name" dominant-baseline="hanging">
  106.                 <textPath xlink:href="#curve-top" style="fill: currentColor;" class="js--reminder--name"></textPath>
  107.             </text>
  108.         </svg>
  109.         <svg viewBox="0 0 150 150" class="reminder__text">
  110.             <path d="M 13 75 C 13 160, 138 160, 138 75" id="curve-base" fill="transparent"></path>
  111.             <text width="150" x="66.6%" text-anchor="middle" class="reminder__name">
  112.                 <textPath xlink:href="#curve-base" style="fill: currentColor;" class="js--reminder--text"></textPath>
  113.             </text>
  114.         </svg>
  115.     </span>
  116. </template>
  118. {% embed 'includes/dialog.html.twig' with {
  119.     id: 'token',
  120.     background: 'hide',
  121.     hideClickBackground: false
  122. } %}
  123.     {% block title %}
  124.         <form class="settable-title" data-multiple="{{ 'grimoire.token_list.title'|trans|e('html_attr') }}">
  125.             <span class="settable-title__title js--settable-title--title">{{ 'grimoire.token.title'|trans }}</span>
  126.             <input type="text" class="settable-title__input settable-title__input--full js--settable-title--input" list="token-title-list" hidden>
  127.             <datalist id="token-title-list">
  128.                 <option value="{{ 'grimoire.token.title'|trans|e('html_attr') }}" class="js--settable-title--start">
  129.                 <option value="{{ 'grimoire.token.title'|trans|e('html_attr') }}" class="js--settable-title--previous">
  130.                 <option value="{{ 'grimoire.token_list.title'|trans|e('html_attr') }}">
  131.                 <option value="{{ 'grimoire.grimoire.bluffs'|trans|e('html_attr') }}">
  132.             </datalist>
  133.         </form>
  134.     {% endblock %}
  135.     {% block body %}
  136.         <ul class="token-display js--token--holder"></ul>
  137.         <p class="token-display__additional mt-4">
  138.             <button type="button" class="button js--token--add">{{ 'grimoire.token_list.add'|trans }}</button>
  139.         </p>
  140.     {% endblock %}
  141. {% endembed %}
  143. {% embed 'includes/dialog.html.twig' with {
  144.     id: 'character-show',
  145.     background: 'blur'
  146. } %}
  147.     {% block title %}<span id="character-show-name">{{ 'grimoire.character_show.title'|trans }}</span>{% endblock %}
  148.     {% block body %}
  149.     <p id="character-show-ability" class="character-show__ability"></p>
  150.     <ul class="button-list">
  151.         <li><button type="button" class="button button--full-height" id="character-show-token">{{ 'grimoire.character_show.show'|trans }}</button></li>
  152.         <li><button type="button" class="button button--full-height" id="character-shroud-toggle">{{ 'grimoire.character_show.shroud'|trans }}</button></li>
  153.         <li><button type="button" class="button button--full-height" id="character-rotate">{{ 'grimoire.character_show.rotate'|trans }}</button></li>
  154.         <li><button type="button" class="button button--full-height" id="character-reminder">{{ 'grimoire.character_show.reminder'|trans }}</button></li>
  155.         <li><button type="button" class="button button--full-height" id="character-replace">{{ 'grimoire.character_show.replace'|trans }}</button></li>
  156.         <li><button type="button" class="button button--full-height" id="character-ghost-vote">{{ 'grimoire.character_show.ghost_vote'|trans }}</button></li>
  157.     </ul>
  159.     <p class="mt-4">
  160.         <label for="character-name-input" class="d-block text-small">{{ 'messages.player_name'|trans }}</label>
  161.         <input type="text" class="input" name="character-name-input" id="character-name-input" list="character-name-input-options">
  162.         <datalist id="character-name-input-options"></datalist>
  163.         <button type="button" class="button mt-2" id="character-name">{{ 'grimoire.character_show.player_name'|trans }}</button>
  164.     </p>
  166.     <p class="mt-4"><small>{{ 'grimoire.character_show.recent_reminders'|trans }}</small></p>
  167.     <ul id="character-show-reminders" class="button-list button-list--reminder is-show-all"></ul>
  168.     <p class="mt-4"><button type="button" class="button button--warning" id="character-remove">{{ 'grimoire.character_show.remove'|trans }}</button></p>
  170.     <p id="character-show-first-night-reminder" class="character-show__night-reminder"></p>
  171.     <p id="character-show-other-night-reminder" class="character-show__night-reminder"></p>
  172.     {% endblock %}
  173. {% endembed %}
  175. {% embed 'includes/dialog.html.twig' with {
  176.     id: 'reminder-show',
  177.     background: 'blur'
  178. } %}
  179.     {% block title %}<span id="reminder-show-name">{{ 'grimoire.reminder_show.title'|trans }}</span>{% endblock %}
  180.     {% block body %}
  181.     <div id="reminder-show-token" class="character-show__token"></div>
  182.     <p class="mt-4"><button type="button" class="button button--warning" id="reminder-remove">{{ 'grimoire.reminder_show.remove'|trans }}</button></p>
  183.     {% endblock %}
  184. {% endembed %}
  186. <template id="token-entry-template">
  187.     <li class="token-display__item js--token--item">
  188.         <div class="js--token--show"></div>
  189.         <p class="character-show__ability mt-4 js--token--ability"></p>
  190.         <button type="button" class="token-display__remove js--token--remove" aria-label="{{ 'grimoire.reminder_show.remove'|trans }}">
  191.             <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 448 512" aria-hidden="true"><!--! Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path style="fill: currentColor;" d="M135.2 17.7C140.6 6.8 151.7 0 163.8 0H284.2c12.1 0 23.2 6.8 28.6 17.7L320 32h96c17.7 0 32 14.3 32 32s-14.3 32-32 32H32C14.3 96 0 81.7 0 64S14.3 32 32 32h96l7.2-14.3zM32 128H416V448c0 35.3-28.7 64-64 64H96c-35.3 0-64-28.7-64-64V128zm96 64c-8.8 0-16 7.2-16 16V432c0 8.8 7.2 16 16 16s16-7.2 16-16V208c0-8.8-7.2-16-16-16zm96 0c-8.8 0-16 7.2-16 16V432c0 8.8 7.2 16 16 16s16-7.2 16-16V208c0-8.8-7.2-16-16-16zm96 0c-8.8 0-16 7.2-16 16V432c0 8.8 7.2 16 16 16s16-7.2 16-16V208c0-8.8-7.2-16-16-16z"/></svg>
  192.         </button>
  193.     </li>
  194. </template>