gamenchat/public/partials/chatRoom.html

<div ng-controller="ChatCtrl">
  <div class="page-header">
    <h1 ng-show="service.isConnected()">Welcome <small>You are playing as {{service.username}}</small></h1>
    <h1 ng-hide="service.isConnected()">Welcome <small>login to play</small></h1>
  </div>
  <div ng-show="!service.isConnected()" class="row">
    <div class="alert alert-danger" ng-show="service.error"><strong>Oops!</strong> {{service.error}}.</div>
    <div id="login">
      <form class="form-inline" ng-show="service.status == 'disconnected'">
        <input id="username" name="username" class="form-control" type="text" ng-model="username" placeholder="Username">
        <br>
        <br>
        <button class="btn" type="submit" ng-click="service.connect(username); username=''">{{service.hasRoom() ? 'Join Room' : 'Create New Room'}}</button>
      </form>
    </div>
  </div>
  <div ng-show="service.isConnected()" class="row">
    <div class="col-md-9" id="main">
      <div id="messages">
      <table>
        <tr class="message {{message.kind}} {{message.user == chat.username ? 'me' : ''}}" ng-repeat="message in chat.messages">
          <td class="user">{{message.user}}</td>
          <td>{{message.message}}</td>
        </tr>
      </table>
      </div>
      <input type="text" class="form-control" ng-model="text" id="talk" ng-keypress="onType($event)">
    </div>
    <div class="col-md-3" ng-controller="GameCtrl">
      <button class="btn btn-primary" 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()">
        <h3 ng-show="game.isPlayer()">you are the giver</h3>
        <h3 ng-show="game.isMonitor()">you are a monitor</h3>
        <h3 ng-show="game.isGuesser()">you are a guesser</h3>
        <button class="btn btn-warning" ng-show="game.isPlayer()" ng-click="game.pass()">Pass</button>
        <button class="btn btn-danger" ng-show="game.isMonitor()" ng-click="game.taboo()">Uh-uh!</button>
        <button class="btn btn-success" 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>