examples/wordplay.jade

head
  title Word Play!

body
  +page

template(name="page")
  #main
    #left
      +board
    #right
      +lobby
      +scratchpad
      +postgame
      +scores

template(name="board")
  #clock= clock
  #board
    div
      div(class="square #{selected 0}")= square 0
      div(class="square #{selected 1}")= square 1
      div(class="square #{selected 2}")= square 2
      div(class="square #{selected 3}")= square 3
    div
      div(class="square #{selected 4}")= square 4
      div(class="square #{selected 5}")= square 5
      div(class="square #{selected 6}")= square 6
      div(class="square #{selected 7}")= square 7
    div
      div(class="square #{selected 8}")= square 8
      div(class="square #{selected 9}")= square 9
      div(class="square #{selected 10}")= square 10
      div(class="square #{selected 11}")= square 11
    div
      div(class="square #{selected 12}")= square 12
      div(class="square #{selected 13}")= square 13
      div(class="square #{selected 14}")= square 14
      div(class="square #{selected 15}")= square 15

template(name="lobby")
  div
    if show
      #lobby
        h1 What's your name?
        input#myname(type="text")
        if count
          h1 #{count} other players are in the lobby:
          each waiting
            div.player= name
    div: button#startgame#startgame($dyn = disabled)
      if count
        | It's on!
      else
        | Play solo

template(name="scratchpad")
  if show
    #scratchpad
    input#scratchpad_input(type="text")
    button.submit(name="submit") Submit

template(name="postgame")
  if show
    #postgame
      button.lobby(name="backtolobby") Back to lobby

template(name="scores")
  div
    if show
      #scores
        each players
          +player

template(name="player")
  .player
    .header(class=winner)
      if name
        = name
      else
        span.unnamed no name
      .score = total_score
      if winner
        .winner_text Winner!
    +words

template(name="words")
  .words
    each words
      .word(id="word_#{_id}" class=state)
        span.score= score
        = word

//-
  <head>
    <title>Word play!</title>
  </head>

  <body>
    {{> page}}
  </body>

  <template name="page">
    <div id="main">
      <div id="left">
        {{> board }}
      </div>
      <div id="right">
        {{> lobby }}
        {{> scratchpad }}
        {{> postgame }}
        {{> scores }}
      </div>
    </div>
  </template>

  <template name="board">
    <div id="clock">
      {{ clock }}
    </div>
    <div id="board">
      <div>
        <div class="square {{ selected 0 }}">{{ square 0 }}</div>
        <div class="square {{ selected 1 }}">{{ square 1 }}</div>
        <div class="square {{ selected 2 }}">{{ square 2 }}</div>
        <div class="square {{ selected 3 }}">{{ square 3 }}</div>
      </div>
      <div>
        <div class="square {{ selected 4 }}">{{ square 4 }}</div>
        <div class="square {{ selected 5 }}">{{ square 5 }}</div>
        <div class="square {{ selected 6 }}">{{ square 6 }}</div>
        <div class="square {{ selected 7 }}">{{ square 7 }}</div>
      </div>
      <div>
        <div class="square {{ selected 8 }}">{{ square 8 }}</div>
        <div class="square {{ selected 9 }}">{{ square 9 }}</div>
        <div class="square {{ selected 10 }}">{{ square 10 }}</div>
        <div class="square {{ selected 11 }}">{{ square 11 }}</div>
      </div>
      <div>
        <div class="square {{ selected 12 }}">{{ square 12 }}</div>
        <div class="square {{ selected 13 }}">{{ square 13 }}</div>
        <div class="square {{ selected 14 }}">{{ square 14 }}</div>
        <div class="square {{ selected 15 }}">{{ square 15 }}</div>
      </div>
    </div>
  </template>

  <template name="lobby">
    <div>
      {{#if show }}
      <div id="lobby">
        <h1>What's your name?</h1>
        <input id="myname" type="text" />
        {{#if count}}
        <h1>{{count}} other players are in the lobby:</h1>
        {{#each waiting }}
        <div class="player">{{name}}</div>
        {{/each}}
        {{/if}}
        <div>
          <button id="startgame" class="startgame" {{disabled}}>
            {{#if count}} It's on! {{else}} Play solo {{/if}}
          </button>
        </div>
      </div>
      {{/if}}
    </div>
  </template>

  <template name="scratchpad">
    {{#if show}}
    <div id="scratchpad">
      <input id="scratchpad_input" type="text" />
      <button name="submit" class="submit">Submit</button>
    </div>
    {{/if}}
  </template>

  <template name="postgame">
    <div>
      {{#if show}}
      <div id="postgame">
        <button name="backtolobby" class="lobby">Back to lobby</button>
      </div>
      {{/if}}
    </div>
  </template>

  <template name="scores">
    <div>
      {{#if show}}
      <div id="scores">
        {{#each players}}
          {{> player }}
        {{/each}}
      </div>
      {{/if}}
    </div>
  </template>

  <template name="player">
    <div class="player">
      <div class="header {{winner}}">
        {{#if name}}
          {{name}}
        {{else}}
          <span class="unnamed">no name</span>
        {{/if}}
        <span class="score">{{total_score}}</span>
        {{#if winner}}
          <span class="winner_text">Winner!</span>
        {{/if}}
      </div>
      {{> words}}
    </div>
  </template>

  <template name="words">
    <div class="words">
      {{#each words}}
      <div id="word_{{_id}}" class="word {{state}}">
        <span class="score">
          {{score}}
        </span>
        {{word}}
      </div>
      {{/each}}
    </div>
  </template>