jcbantuelle/dominion-meteor

<template name="game">
{{#with current_game}}
  <div class="row" id="game">

    <div class="col" id="cards-area">
      <div class="row">

        <!-- Not Supply Cards -->
        <div class="col" id="not-supply-cards">
          {{#each game.events}}
            {{> event}}
          {{/each}}
          {{#each game.projects}}
            {{> project}}
          {{/each}}
          {{#each game.landmarks}}
            {{> landmark}}
          {{/each}}
          {{#each game.ways}}
            {{> way}}
          {{/each}}
          {{#if game.way_of_the_mouse}}
            {{#with game.way_of_the_mouse}}
              {{> way_of_the_mouse_card}}
            {{/with}}
          {{/if}}
          {{#each game.druid_boons}}
            {{> druid_boon}}
          {{/each}}
          {{#each game.not_supply_cards}}
            {{> card}}
          {{/each}}
        </div>

        <!-- Kingdom Cards -->
        <div class="col" id="kingdom-cards">
          {{#each game.kingdom_cards}}
            {{> card}}
          {{/each}}
        </div>

        <!-- Common Cards -->
        <div class="col" id="common-cards">
          {{#each game.common_cards}}
            {{> card}}
          {{/each}}
        </div>
      </div>
    </div>

    <div class="col" id="game-area">
      <div id="game-log">
        {{#each game.log}}
          {{> log}}
        {{/each}}
      </div>

      {{#if game.finished}}
        <div id="finished-game">
          {{#with game}}
            {{> game_over}}
          {{/with}}
        </div>
      {{else}}
        <div id="action-area">
          <div id="turn-status">
            {{#with game.turn}}
              {{> turn_status}}
            {{/with}}
          </div>
          <div id="game-info">
            {{#with player_cards}}
              {{> deck}}
            {{/with}}
          </div>
          <div id="turn-actions">
            {{#with game.turn}}
              {{> turn_actions}}
            {{/with}}
          </div>
        </div>
        <!-- required for floating divs in #action-area -->
        <br class="clear" />
        <div id="action-response">
          {{#if turn_event}}
            {{> UI.dynamic template=turn_event.type data=turn_event}}
          {{else}}
            {{#if pending_players}}
              Waiting on {{{pending_players}}}...
            {{/if}}
          {{/if}}
        </div>
        <div id="hand">
          {{#each player_cards.hand}}
            {{> hand_card}}
          {{/each}}
          <!-- give #hand a height corresponding to stacks of cards -->
          <br class="clear" />
        </div>
      {{/if}}
      <pre id="game-chat"></pre>
      <form id="chat" action="">
        <input id="message" class="form-control" autocomplete="off">
      </form>
    </div>
  </div>

  <div id='game-info-modal' class="modal fade" role="dialog">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <div class="modal-header">
          <h3 class="modal-title">Game Info</h3>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        </div>
        <div class="modal-body" id="extra-info">
          {{> game_info game=game player_cards=player_cards public_info=public_info}}
        </div>
      </div>
    </div>
  </div>
{{/with}}
</template>