<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">

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

<div id="normal" style="display: none;">
  <div id="left_column">
    <canvas id="dungeon"></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 id="stats_titleline" />
      <div>
        <span id="stats_species_god" />
        <span id="stats_piety" />
      </div>
      <div id="stats_hpline">
        <span id="stats_hp_bar" class="bar" style="float:right; width:55%; height:1em;"><!-- Whitespace...
       --><span id="stats_hp_bar_full" /><!--
       --><span id="stats_hp_bar_poison" /><!--
       --><span id="stats_hp_bar_decrease" /><!--
       --><span id="stats_hp_bar_increase" /><!--
     --></span>
        <span class="stats_caption">HP:</span>
        <span id="stats_hp" /><span id="stats_hp_separator">/</span><span id="stats_hp_max" />
        <span id="stats_real_hp_max" />
      </div>
      <div id="stats_mpline">
        <span id="stats_mp_bar" class="bar" style="float:right; width:55%; height:1em;"><!-- Whitespace...
       --><span id="stats_mp_bar_full" /><!--
       --><span id="stats_mp_bar_decrease" /><!--
       --><span id="stats_mp_bar_increase" /><!--
     --></span>
        <span class="stats_caption">Magic:</span>
        <span id="stats_mp" /><span id="stats_mp_separator">/</span><span id="stats_mp_max" />
      </div>
      <div id="stats_contamline">
        <span id="stats_contam_bar" class="bar" style="float:right; width:55%; height:1em;"><!-- Whitespace...
       --><span id="stats_contam_bar_full" /><!--
       --><span id="stats_contam_bar_decrease" /><!--
       --><span id="stats_contam_bar_increase" /><!--
     --></span>
        <span class="stats_caption">Contam:</span>
      </div>
      <div id="stats_heatline">
        <span id="stats_heat_bar" class="bar" style="float:right; width:55%; height:1em;"><!-- Whitespace...
       --><span id="stats_heat_bar_full" /><!--
       --><span id="stats_heat_bar_decrease" /><!--
       --><span id="stats_heat_bar_increase" /><!--
     --></span>
        <span class="stats_caption">Temperature:</span>
      </div>
      <div>
        <div id="stats_leftcolumn" style="float:left;width:45%;">
          <div><span class="stats_caption">AC:</span>
            <span id="stats_ac" /></div>
          <div><span class="stats_caption">EV:</span>
            <span id="stats_ev" /></div>
          <div><span class="stats_caption">SH:</span>
            <span id="stats_sh" /></div>
          <div><span class="stats_caption">XL:</span>
            <span id="stats_xl" />
            <span class="stats_caption">Next:</span>
            <span id="stats_progress" />%</div>
          <div class="stats_zot_defense">
            <span class="stats_caption">ZP:</span>
            <span id="stats_zp" /></div>
          <div><span class="stats_caption">Gold:</span>
            <span id="stats_gold" /></div>
        </div>
        <div id="stats_rightcolumn" style="float:right;width:55%;">
          <div><span class="stats_caption">Str:</span>
            <span id="stats_str" /></div>
          <div><span class="stats_caption">Int:</span>
            <span id="stats_int" /></div>
          <div><span class="stats_caption">Dex:</span>
            <span id="stats_dex" /></div>
          <div><span class="stats_caption">Place:</span>
            <span id="stats_place" /></div>
          <div class="stats_zot_defense">&nbsp;</div>
          <div><span class="stats_caption" id="stats_time_caption"></span>
            <span id="stats_time" /></div>
        </div>
        <div><span class="stats_caption">Wp:</span>
          <span id="stats_weapon" /></div>
        <div><span class="stats_caption">Qv:</span>
          <span id="stats_quiver" /></div>
        <div id="stats_status_lights" />
      </div>
    </div>
    <div id="minimap_block">
      <canvas id="minimap"></canvas>
      <canvas id="minimap_overlay"></canvas>
    </div>
    <div id="monster_list"></div>
  </div>
</div>

<div id="menu" style="display: none;" class="floating_dialog"></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>
