gamenchat/public/partials/chatRoom.html

<div ng-controller="ChatCtrl">
<div ng-hide="service.isConnected()">
  <div class="page-header">
    <h1>Not connected</h1>
  </div>
  <div ng-show="service.getError()" class="alert-message error">
    <p>
    <strong>Oops!</strong> <span>{{service.getError()}}</span>
    </p>
  </div>
  <div class="span10">
    <p>Please sign in at the top bar.</p>
  </div>
</div>
<div ng-show="service.isConnected()">
  <div class="page-header">
    <h1>Welcome <small>You are playing as {{service.username}}</small></h1>
  </div>
  <div class="row">
    <div class="span10" id="main">
      <div id="messages">
        <div class="message {{message.kind}} {{message.user == service.username ? 'me' : ''}}" ng-repeat="message in service.messages">
          <span>{{message.user}}</span>
          <p>{{message.message}}</p>
        </div>
      </div>
      <textarea ng-model="text" id="talk" ng-keypress="onType($event)"></textarea>
    </div>
    <div class="span4" ng-controller="GameCtrl">
      <button class="btn" ng-show="game.pendingRound" ng-click="game.startRound()">Start</button>
      <div ng-if="game.roundRunning()">
        <h2><ng-pluralize count="game.timer.count" when="{'0': 'Time\'s up!', 'one': '1 second', 'other': '{} seconds'}" /></h2>
        <h2><ng-pluralize count="game.points" when="{'one': '1 point', 'other': '{} points'}" /></h2>
        <hr>
      </div>
      <div ng-if="game.roundRunning()">
        <button class="btn" ng-show="game.isPlayer()" ng-click="game.pass()">Pass</button>
        <button class="btn" ng-show="game.isMonitor()" ng-click="game.taboo()">Uh-uh!</button>
        <button class="btn" ng-show="game.isMonitor() || game.isPlayer()" ng-click="game.correct()">Correct</button>
      </div>
      <div ng-show="game.card">
        <h2>Card</h2>
        <h3>{{game.card.word}}</h3>
        <ul class="taboo">
          <li ng-repeat="word in game.card.taboo">{{word}}</li>
        </ul>
      </div>
      <h2>Team A</h2>
      <ul class="members">
        <li ng-repeat="member in game.teamA.members">{{member}}</li>
      </ul>
      <h2>Team B</h2>
      <ul class="members">
        <li ng-repeat="member in game.teamB.members">{{member}}</li>
      </ul>
    </div>
  </div>
</div>
</div>