<script>
  require.config({
    paths: { "game-{{ version }}": "/gamedata/{{ version }}" },
  });
  require(["jquery", "client"], function ($, client) {
    client.inhibit_messages();
    window.game_loading = true;
    require(["game-{{ version }}/game"], function (game) {
      $(document).trigger("game_preinit");
      $(document).trigger("game_init");
      client.uninhibit_messages();
    });
  });
</script>
<link
  rel="stylesheet"
  type="text/css"
  href="/gamedata/{{ version }}/style.css"
/>
<link
  rel="stylesheet"
  type="text/css"
  href="/gamedata/{{ version }}/simplebar.css"
/>

<div id="crt" style="display: none"></div>

<div id="normal" style="display: none">
  <div id="left_column">
    <canvas id="dungeon"></canvas>
    <div id="mobile_input" style="display: none">
      <input
        autocomplete="off"
        autocorrect="off"
        autocapitalize="off"
        spellcheck="false"
        type="text"
        placeholder="Tap here for keyboard input"
      />
    </div>
    <canvas
      id="action-panel"
      class="action-panel hidden"
      style="display: none"
    ></canvas>
    <div id="message_pane">
      <div id="messages_container">
        <div id="messages"></div>
      </div>
      <div id="more" style="display: none">--more--</div>
    </div>
  </div>
  <div id="right_column">
    <div id="stats">
      <div id="stats_wizmode" style="float: right"></div>
      <div id="stats_titleline"></div>
      <div>
        <span id="stats_species_god"></span>
        <span id="stats_piety"></span>
        <span id="stats_gozag_gold_label" class="stats_caption"></span>
        <span id="stats_gozag_gold"></span>
      </div>
      <div id="stats_hpline">
        <!-- These <span>s must be on the same logical line to prevent rendering bugs -->
        <span id="stats_hp_bar" class="bar" style="float: right; width: 55%; height: 1em"><span id="stats_hp_bar_full"></span><span id="stats_hp_bar_poison"></span><span id="stats_hp_bar_decrease"></span><span id="stats_hp_bar_increase"></span></span>
        <span class="stats_caption">HP:</span>
        <!-- These <span>s must be on the same logical line to prevent rendering bugs -->
        <span id="stats_hp"></span><span id="stats_hp_separator">/</span><span id="stats_hp_max"></span>
        <span id="stats_real_hp_max"></span>
      </div>
      <div id="stats_mpline">
        <!-- These <span>s must be on the same logical line to prevent rendering bugs -->
        <span id="stats_mp_bar" class="bar" style="float: right; width: 55%; height: 1em"><span id="stats_mp_bar_full"></span><span id="stats_mp_bar_decrease"></span><span id="stats_mp_bar_increase"></span></span>
        <span class="stats_caption">Magic:</span>
        <!-- These <span>s must be on the same logical line to prevent rendering bugs -->
        <span id="stats_mp"></span><span id="stats_mp_separator">/</span><span id="stats_mp_max"></span>
        <span id="stats_dd_real_mp_max"></span>
      </div>
      <div>
        <div id="stats_leftcolumn" style="float: left; width: 45%">
          <div>
            <span class="stats_caption">AC:</span> <span id="stats_ac"></span>
          </div>
          <div>
            <span class="stats_caption">EV:</span> <span id="stats_ev"></span>
          </div>
          <div>
            <span class="stats_caption">SH:</span> <span id="stats_sh"></span>
          </div>
          <div>
            <span class="stats_caption">XL:</span>
            <span id="stats_xl"></span>
            <span class="stats_caption">Next:</span>
            <span id="stats_progress"></span>%
          </div>
          <div id="stats_noise" style="float: left; width: 95%">
            <div id="stats_noise_inter" style="float: right; height: 1em">
              <!-- These <span>s must be on the same logical line to prevent rendering bugs -->
              <span
                id="stats_noise_bar"
                class="bar"
                style="float: left; height: 1em"
                ><span id="stats_noise_bar_full"></span
                ><span id="stats_noise_bar_decrease"></span
              ></span>
            </div>
            <span
              id="stats_noise_status"
              style="float: right; width: 0%"
            ></span>
            <span class="stats_caption">Noise:</span>
            <span id="stats_noise_num"></span>
          </div>
        </div>
        <div id="stats_rightcolumn" style="float: right; width: 55%">
          <div>
            <span class="stats_caption">Str:</span> <span id="stats_str"></span>
            <span id="stats_doom_ui"><span class="stats_caption" style="margin-left:2.2em">Doom:</span><span id="stats_doom"></span></span>
          </div>
          <div>
            <span class="stats_caption">Int:</span> <span id="stats_int"></span>
            <span id="stats_contam_ui"><span class="stats_caption" style="margin-left:1.1em">Contam:</span><span id="stats_contam"></span></span>
          </div>
          <div>
            <span class="stats_caption">Dex:</span> <span id="stats_dex"></span>
          </div>
          <div>
            <span class="stats_caption">Place:</span>
            <span id="stats_place"></span>
          </div>
          <div>
            <span class="stats_caption" id="stats_time_caption"></span>
            <span id="stats_time"></span>
          </div>
        </div>
        <div style="float: left; width: 100%">
          <span class="stats_caption" id="stats_weapon_letter"></span>
          <span id="stats_weapon_container"
            ><span id="stats_weapon"></span
          ></span>
        </div>
        <div id="stats_offhand_weapon_line" style="float: left; width: 100%">
          <span class="stats_caption" id="stats_offhand_weapon_letter"></span>
          <span id="stats_offhand_weapon_container"
            ><span id="stats_offhand_weapon"></span
          ></span>
        </div>
        <div id="stats_quiver_line" style="float: left; width: 100%">
          <span class="stats_caption" id="stats_quiver_letter"></span>
          <span id="stats_quiver"></span>
        </div>
        <div id="stats_quiver_line" style="float: left; width:100%;">
          <span class="stats_caption" id="stats_quiver_letter"></span>
          <span id="stats_quiver"></span>
        </div>
        <div id="stats_status_lights" style="float: left; width: 100%"></div>
        <div id="stats_status_lights_tooltip" class="fg7" style="display: none;"></div>
      </div>
    </div>
    <div id="minimap_block">
      <canvas id="minimap"></canvas>
      <canvas id="minimap_overlay"></canvas>
    </div>
    <div id="monster_list"></div>
  </div>
  <div id="tooltip" style="display: none"></div>
</div>

<div class="templates" style="display: none">
  <div class="menu"></div>
  <div id="input_dialog"></div>
  <div class="ui-popup">
    <div class="ui-popup-overlay"></div>
    <div class="ui-popup-outer">
      <div class="ui-popup-inner"></div>
    </div>
  </div>

  <div class="progress-bar">
    <div class="header"><span></span></div>
    <div class="bar-text"></div>
    <div class="status"><span></span></div>
  </div>

  <div class="describe-generic">
    <div class="header">
      <canvas class="glyph-mode-hidden"></canvas>
      <span></span>
    </div>
    <div class="body fg7"></div>
  </div>

  <div class="describe-feature"></div>

  <div class="describe-item">
    <div class="header">
      <canvas class="glyph-mode-hidden"></canvas>
      <span></span>
    </div>
    <div class="body fg7"></div>
    <div class="actions"></div>
  </div>

  <div class="describe-spell">
    <div class="header">
      <canvas class="glyph-mode-hidden"></canvas>
      <span></span>
    </div>
    <div class="body fg7"></div>
    <div class="actions hidden">(M)emorise this spell.</div>
  </div>

  <div class="describe-cards"></div>

  <div id="describe-god-basic" class="describe-god fg7">
    <div class="header">
      <canvas class="glyph-mode-hidden"></canvas>
      <span></span>
    </div>
    <div class="body paneset">
      <div class="pane">
        <div class="desc"></div>
        <table class="god-favour">
          <tr>
            <td>Title</td>
            <td>-</td>
            <td class="title"></td>
          </tr>
          <tr>
            <td>Favour</td>
            <td>-</td>
            <td class="favour"></td>
          </tr>
        </table>
        <div class="god-powers">
          <div class="power">
            <div>Granted powers</div>
            <div>(Cost)</div>
          </div>
        </div>
      </div>
      <div class="pane"></div>
      <div class="pane"></div>
    </div>
    <div class="footer">
      <div><b class="fg3">!</b>/<b class="fg3">^</b>:&nbsp;</div>
      <div class="paneset">
        <div class="pane">
          <b class="fg15">Overview</b> | Powers | Wrath
          <span class="join-keyhelp"
            >&nbsp;&nbsp;<b class="fg3">J</b>/<b class="fg3">Enter</b>: join
            religion</span
          >
        </div>
        <div class="pane">
          Overview | <b class="fg15">Powers</b> | Wrath
          <span class="join-keyhelp"
            >&nbsp;&nbsp;<b class="fg3">J</b>/<b class="fg3">Enter</b>: join
            religion</span
          >
        </div>
        <div class="pane">
          Overview | Powers | <b class="fg15">Wrath</b>
          <span class="join-keyhelp"
            >&nbsp;&nbsp;<b class="fg3">J</b>/<b class="fg3">Enter</b>: join
            religion</span
          >
        </div>
      </div>
    </div>
  </div>
  <div id="describe-god-extra" class="describe-god fg7">
    <div class="header">
      <canvas class="glyph-mode-hidden"></canvas>
      <span></span>
    </div>
    <div class="body paneset">
      <div class="pane">
        <div class="desc"></div>
        <table class="god-favour">
          <tr>
            <td>Title</td>
            <td>-</td>
            <td class="title"></td>
          </tr>
          <tr>
            <td>Favour</td>
            <td>-</td>
            <td class="favour"></td>
          </tr>
        </table>
        <div class="god-powers">
          <div class="power">
            <div>Granted powers</div>
            <div>(Cost)</div>
          </div>
        </div>
      </div>
      <div class="pane"></div>
      <div class="pane"></div>
      <div class="pane"></div>
    </div>
    <div class="footer">
      <div><b class="fg3">!</b>/<b class="fg3">^</b>:&nbsp;</div>
      <div class="paneset">
        <div class="pane">
          <b class="fg15">Overview</b> | Powers | Wrath | Extra
          <span class="join-keyhelp"
            >&nbsp;&nbsp;<b class="fg3">J</b>/<b class="fg3">Enter</b>: join
            religion</span
          >
        </div>
        <div class="pane">
          Overview | <b class="fg15">Powers</b> | Wrath | Extra
          <span class="join-keyhelp"
            >&nbsp;&nbsp;<b class="fg3">J</b>/<b class="fg3">Enter</b>: join
            religion</span
          >
        </div>
        <div class="pane">
          Overview | Powers | <b class="fg15">Wrath</b> | Extra
          <span class="join-keyhelp"
            >&nbsp;&nbsp;<b class="fg3">J</b>/<b class="fg3">Enter</b>: join
            religion</span
          >
        </div>
        <div class="pane">
          Overview | Powers | Wrath | <b class="fg15">Extra</b>
          <span class="join-keyhelp"
            >&nbsp;&nbsp;<b class="fg3">J</b>/<b class="fg3">Enter</b>: join
            religion</span
          >
        </div>
      </div>
    </div>
  </div>
  <div class="describe-monster">
    <div class="header">
      <canvas class="glyph-mode-hidden"></canvas>
      <span></span>
    </div>
    <div class="body paneset fg7">
      <div class="pane"></div>
      <div class="pane"></div>
      <div class="pane"></div>
    </div>
    <div class="footer">
      <div>[<b class="fg3">!</b>]:&nbsp;</div>
      <div class="paneset">
        <div class="pane"></div>
        <div class="pane"></div>
        <div class="pane"></div>
      </div>
    </div>
  </div>

  <div class="formatted-scroller">
    <div class="header"></div>
    <div class="body fg7"></div>
    <div class="more"></div>
  </div>
  <div class="msgwin-get-line">
    <div class="header"></div>
    <input type="text" data-sync-id="input" />
    <div data-hotkey="Enter"></div>
    <div data-hotkey="Escape"></div>
  </div>
  <div class="newgame-choice">
    <div class="header"></div>
    <div class="body fg7">
      <div>
        <div class="main-items grid"></div>
      </div>
      <div class="descriptions paneset"></div>
      <div class="sub-items grid"></div>
    </div>
  </div>
  <div class="game-over">
    <div class="header">
      <canvas class="glyph-mode-hidden"></canvas>
      <span></span>
    </div>
    <div class="body fg7"></div>
  </div>
  <div class="seed-selection">
    <div class="header fg3"></div>
    <div class="body fg7">
      <p class="body-text"></p>
      <div class="seed-input">
        <span>Enter seed: </span>
        <input type="text" data-sync-id="seed" />
        <button data-hotkey="-" data-sync-id="btn-clear">
          <span>[-] Clear</span>
        </button>
        <button data-hotkey="d" data-sync-id="btn-daily">
          <span>[d] Today's daily seed</span>
        </button>
      </div>
      <p class="footer"></p>
      <div class="pregen-toggle">
        <label>
          <input type="checkbox" data-sync-id="pregenerate" />
          <span>Fully pregenerate the Dungeon</span>
        </label>
      </div>
    </div>
    <div class="button-bar">
      <button data-hotkey="Enter" data-sync-id="btn-begin">
        <span>[Enter] Begin!</span>
      </button>
    </div>
  </div>
</div>

<div id="action-panel-tooltip" style="display: none"></div>
<div id="action-panel-settings" style="display: none">
  <fieldset>
    <legend>Orientation:</legend>
    <div>
      <input
        type="radio"
        class="text"
        id="action-orient-horizontal"
        name="action_panel_orientation"
        value="horizontal"
      />
      <label for="action-orient-horizontal">horizontal</label>
    </div>
    <div>
      <input
        type="radio"
        class="text"
        id="action-orient-vertical"
        name="action_panel_orientation"
        value="vertical"
      />
      <label for="action-orient-vertical">vertical</label>
    </div>
  </fieldset>
  <fieldset id="scale-set" class="option">
    <legend>Scale, %:</legend>
    <input
      type="number"
      class="text"
      id="scale-val"
      min="50"
      max="500"
      name="action_panel_scale"
      required
    />
    <button class="reset" type="button" tabindex="-1">reset</button>
  </fieldset>
  <fieldset id="font-size-set" class="option">
    <legend>Font size, px:</legend>
    <input
      type="number"
      class="text"
      id="font-size-val"
      min="1"
      max="40"
      name="action_panel_font_size"
      required
    />
    <button class="reset" type="button" tabindex="-1">reset</button>
  </fieldset>
  <div class="settings-buttons">
    <button id="minimize-panel" type="button" tabindex="-1">Minimize</button>
    <button id="close-settings" type="button" tabindex="-1">Close</button>
  </div>
</div>
<div
  id="action-panel-placeholder"
  class="action-panel hidden"
  style="display: none"
>
  <a href="javascript:">+</a>
</div>

<div id="ui-stack"></div>

<!-- Tile images -->
<div style="display: none">
  <img id="floor" src="/gamedata/{{ version }}/floor.png" />
  <img id="wall" src="/gamedata/{{ version }}/wall.png" />
  <img id="feat" src="/gamedata/{{ version }}/feat.png" />
  <img id="main" src="/gamedata/{{ version }}/main.png" />
  <img id="player" src="/gamedata/{{ version }}/player.png" />
  <img id="icons" src="/gamedata/{{ version }}/icons.png" />
  <img id="gui" src="/gamedata/{{ version }}/gui.png" />
</div>
