Wait Template

To follow along with this section, start with tag v2.1.6.

This section will create the new wait template for rendering the wait page. There is nothing new about pedestal-app to learn from this section.

Creating the wait template

The process of rendering something should now be familiar.

Add a link to tutorial-client/tools/public/design.html for the new wait template.

<li><a href="/design/wait.html">Wait</a></li>

Create the page tutorial-client/app/templates/wait.html. This HTML contains two templates, the main template for the wait page and the template for each player. This is just like the original counter template which was created in Part 1.

<_within file="application.html">

  <div id="content">

    <div class="row-fluid" template="wait" field="id:id">

      <div>
        <button class="btn btn-success" id="start-button">Start Game</button>
      </div>

      <h2>Current Players</h2>
      <div id="players">
        <div template="player" class="player-row" field="id:id,content:player-name">Feanor</div>
        <div class="player-row">Fingolfin</div>
        <div class="player-row">Morgoth</div>
        <div class="player-row">Morwen</div>
      </div>
      <!-- this is required because of a bug -->
      <div field="content:something"></div>

    </div>

  </div>

</_within>

Make some minor modifications to the CSS in app/assets/stylesheets/tutorial-client.css.

.player-row {
    line-height: 40px;
    font-size: 30px;
    font-weight: bold;
    padding-left: 10px;
    color: #888;
}

.high-score td {
    line-height: 40px;
    font-size: 30px;
    font-weight: bold;
    padding-right: 20px;
    color: #888;
}

.winner {
    font-size: 30px;
    line-height: 40px;
    text-align: center;
    color: #888;
}

Some of these styles will not be used until later.

Next steps

In the next section, you will render this template. In the section after that you will work on declaring a winner and ending the game.

The tag for this step is v2.1.7.

Home | Rendering the Wait Screen