templates/partials/setup/select-characters.html.twig line 1

Open in your IDE?
  1. <button type="button" class="button button--full-height" id="select-characters" data-dialog="#character-select" disabled>{{ 'setup.buttons.select_characters'|trans }}</button>
  3. {% embed 'includes/dialog.html.twig' with {
  4.     id: 'character-select',
  5.     background: 'blur',
  6.     title: 'setup.character_select.title'|trans
  7. } %}
  8.     {% import 'macros/forms.html.twig' as forms %}
  9.     {% block body %}
  10.     <form id="player-select">
  12.         {{ forms.range({
  13.             classes: 'mb-4',
  14.             label: 'setup.character_select.number_players'|trans,
  15.             name: 'player-count',
  16.             id: 'player-count',
  17.             output: 'player-count-output',
  18.             min: 5,
  19.             max: 15,
  20.             step: 1,
  21.             value: 7
  22.         }) }}
  24.         {{ forms.switch({
  25.             node: 'div',
  26.             classes: 'mb-4',
  27.             label: 'setup.character_select.toggle_abilities'|trans,
  28.             name: 'toggle-abilities',
  29.             id: 'toggle-abilities',
  30.             checked: true
  31.         }) }}
  33.         {{ forms.switch({
  34.             node: 'div',
  35.             classes: 'mb-4',
  36.             label: 'setup.character_select.toggle_duplicates'|trans,
  37.             name: 'toggle-duplicates',
  38.             id: 'toggle-duplicates',
  39.             checked: false
  40.         }) }}
  42.         <p><button type="button" class="button" id="player-select-random">{{ 'setup.character_select.highlight_random'|trans }}</button></p>
  44.         {% set teams = {
  45.             townsfolk: 'groups.townsfolk'|trans,
  46.             outsider: 'groups.outsider'|trans,
  47.             minion: 'groups.minion'|trans,
  48.             demon: 'groups.demon'|trans,
  49.             traveller: 'groups.traveller'|trans
  50.         } %}
  51.         {% for team, name in teams %}
  52.         <fieldset class="sidebar character-select__group is-hide-duplicates" data-team="{{ team }}">
  53.             <legend class="sr-only">{{ name }}</legend>
  54.             <div class="sidebar__side character-select__score">
  55.                 <div class="sidebar__side-content character-select__heading">
  56.                     <div class="character-select__title" aria-hidden="true">{{ name }}</div>
  57.                     <div class="character-select__score-box">
  58.                         <span class="js--character-select--count">0</span>
  59.                         <span class="character-select__score-seperator" data-vertical="-" data-horizontal="|"></span>
  60.                         <span class="js--character-select--total">X</span>
  61.                     </div>
  62.                 </div>
  63.             </div>
  64.             <div class="sidebar__body">
  65.                 <div class="character-select__characters js--character-select--list"></div>
  66.             </div>
  67.         </fieldset>
  68.         {% endfor %}
  69.         
  70.         <p style="text-align: center;">
  71.             {% set teamsummary = {
  72.                 townsfolk: 'groups.short.townsfolk'|trans,
  73.                 outsider: 'groups.short.outsider'|trans,
  74.                 minion: 'groups.short.minion'|trans,
  75.                 demon: 'groups.short.demon'|trans,
  76.                 traveller: 'groups.short.traveller'|trans
  77.             } %}
  78.             {% for team, name in teamsummary %}
  79.             <span data-team-summary="{{ team }}">
  80.                 {{ name }}:<span class="js--character-select--count">0</span>/<span class="js--character-select--total">X</span>
  81.             </span>
  82.             {% endfor %}
  83.             {{ 'groups.short.all'|trans }}:<span class="js--tokens--count">0</span>/<span class="js--players--total">X</span>
  84.         </p>
  86.         <p>
  87.             <label for="token-layout">{{ 'setup.character_select.layout'|trans }}</label>
  88.             <select name="token-layout" id="token-layout" class="input">
  89.                 <option value="ellipse">{{ 'setup.character_select.ellipse'|trans }}</option>
  90.                 <option value="rectangular_ellipse">{{ 'setup.character_select.rectangular_ellipse'|trans }}</option>
  91.                 <option value="rectangle">{{ 'setup.character_select.rectangle'|trans }}</option>
  92.                 <option value="diagonal">{{ 'setup.character_select.diagonal'|trans }}</option>
  93.                 <option value="horizontal">{{ 'setup.character_select.horizontal'|trans }}</option>
  94.                 <option value="vertical">{{ 'setup.character_select.vertical'|trans }}</option>
  95.             </select>
  96.         </p>
  98.         <input type="text" name="validation" id="player-select-validation" class="sr-only" aria-label="Validation" aria-description="This field exists just to aid with validation">
  100.         <ul class="button-list">
  101.             <li><button type="submit" class="button button--full-height">{{ 'setup.character_select.draw_characters'|trans }}</button></li>
  102.             <li><button type="submit" class="button button--full-height" id="player-select-all">{{ 'setup.character_select.add_all'|trans }}</button></li>
  103.         </ul>
  105.     </form>
  106.     {% endblock %}
  107. {% endembed %}
  109. {% embed 'includes/dialog.html.twig' with {
  110.     id: 'character-choice',
  111.     background: 'hide',
  112.     title: 'setup.character_choice.title'|trans,
  113.     hideClickBackground: false,
  114.     confirmXButton: 'setup.character_choice.return_confirm'|trans
  115. } %}
  116.     {% block body %}
  117.     <p>{{ 'setup.character_choice.description'|trans }}</p>
  118.     <div id="character-choice-wrapper" class="slot slot--3">
  119.     </div>
  120.     {% endblock %}
  121. {% endembed %}
  123. <template id="character-choice-template">
  124.     <div>
  125.         <button type="button" data-id="" class="character-choice">
  126.             <span class="character">
  127.                 <span class="character__unknown js--character-choice--number"></span>
  128.             </span>
  129.         </button>
  130.     </div>
  131. </template>
  133. {% embed 'includes/dialog.html.twig' with {
  134.     id: 'character-decision',
  135.     background: 'hide',
  136.     hideClickBackground: false,
  137.     title: 'setup.character_decision.title'|trans
  138. } %}
  139.     {% block body %}
  140.     <div id="character-decision-wrapper" class="mb-4"></div>
  141.     <p id="character-decision-ability"></p>
  142.     <p>
  143.         <label for="player-name" class="d-block text-small">{{ 'setup.character_decision.name'|trans }}</label>
  144.         <input type="text" class="input" name="player-name" id="player-name" list="player-name-options">
  145.     </p>
  146.     <datalist id="player-name-options"></datalist>
  147.     <p><button type="button" class="button" data-dialog-hide>{{ 'setup.character_decision.return'|trans }}</button></p>
  148.     {% endblock %}
  149. {% endembed %}
  151. <template id="character-select-template">
  152.     <div class="character-select__character js--character-select">
  153.         <div class="character-select__duplicate js--character-select--duplicate-wrapper">
  154.             <button type="button" class="character-select__button character-select__button--prev" data-quantity-amount="-1">
  155.                 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="character-select__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="M0 256C0 114.6 114.6 0 256 0C397.4 0 512 114.6 512 256C512 397.4 397.4 512 256 512C114.6 512 0 397.4 0 256zM168 232C154.7 232 144 242.7 144 256C144 269.3 154.7 280 168 280H344C357.3 280 368 269.3 368 256C368 242.7 357.3 232 344 232H168z"/></svg>
  156.             </button>
  157.             <input type="number" step="1" min="0" value="0" name="count-" tabindex="-1" class="character-select__count js--character-select--count" readonly>
  158.             <button type="button" class="character-select__button character-select__button--next" data-quantity-amount="1">
  159.                 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="character-select__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="M0 256C0 114.6 114.6 0 256 0C397.4 0 512 114.6 512 256C512 397.4 397.4 512 256 512C114.6 512 0 397.4 0 256zM256 368C269.3 368 280 357.3 280 344V280H344C357.3 280 368 269.3 368 256C368 242.7 357.3 232 344 232H280V168C280 154.7 269.3 144 256 144C242.7 144 232 154.7 232 168V232H168C154.7 232 144 242.7 144 256C144 269.3 154.7 280 168 280H232V344C232 357.3 242.7 368 256 368z"/></svg>
  160.             </button>
  161.         </div>
  162.         <label class="js--character-select--label" for="">
  163.             <input type="checkbox" name="character" value="" class="sr-only tick-select__checkbox character-select__input js--character-select--input">
  164.             <span class="tick-select__highlight character-select__image-wrapper">
  165.                 <img src="" alt="" width="177" height="124" aria-hidden="true" class="tick-select__icon character-select__image js--character-select--image" loading="lazy">
  166.             </span>
  167.             <span class="character-select__name js--character-select--name"></span>
  168.             <span class="character-select__ability js--character-select--ability"></span>
  169.         </label>
  170.     </div>
  171. </template>
  173. <template id="player-name-template">
  174.     <option class="js--player-name--option">
  175. </template>