chatRoom.html 2.1 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061
  1. <div ng-controller="ChatCtrl">
  2. <div ng-hide="service.isConnected()">
  3. <div class="page-header">
  4. <h1>Not connected</h1>
  5. </div>
  6. <div class="span10">
  7. <p>Please sign in at the top bar.</p>
  8. </div>
  9. </div>
  10. <div ng-show="service.isConnected()">
  11. <div class="page-header">
  12. <h1>Welcome <small>You are playing as {{service.username}}</small></h1>
  13. </div>
  14. <div id="onError" class="alert-message error">
  15. <p>
  16. <strong>Oops!</strong> <span></span>
  17. </p>
  18. </div>
  19. <div class="row">
  20. <div class="span10" id="main">
  21. <div id="messages">
  22. <div class="message {{message.kind}} {{message.user == service.username ? 'me' : ''}}" ng-repeat="message in service.messages">
  23. <span>{{message.user}}</span>
  24. <p>{{message.message}}</p>
  25. </div>
  26. </div>
  27. <textarea ng-model="text" id="talk" ng-keypress="onType($event)"></textarea>
  28. </div>
  29. <div class="span4" ng-controller="GameCtrl">
  30. <button class="btn" ng-show="game.pendingRound" ng-click="game.startRound()">Start</button>
  31. <div ng-if="game.roundRunning()">
  32. <h2><ng-pluralize count="game.timer.count" when="{'0': 'Time\'s up!', 'one': '1 second', 'other': '{} seconds'}" /></h2>
  33. <h2><ng-pluralize count="game.points" when="{'one': '1 point', 'other': '{} points'}" /></h2>
  34. <hr>
  35. </div>
  36. <div ng-if="game.roundRunning()">
  37. <button class="btn" ng-show="game.isPlayer()" ng-click="game.pass()">Pass</button>
  38. <button class="btn" ng-show="game.isMonitor()" ng-click="game.taboo()">Uh-uh!</button>
  39. <button class="btn" ng-show="game.isMonitor() || game.isPlayer()" ng-click="game.correct()">Correct</button>
  40. </div>
  41. <div ng-show="game.card">
  42. <h2>Card</h2>
  43. <h3>{{game.card.word}}</h3>
  44. <ul class="taboo">
  45. <li ng-repeat="word in game.card.taboo">{{word}}</li>
  46. </ul>
  47. </div>
  48. <h2>Team A</h2>
  49. <ul class="members">
  50. <li ng-repeat="member in game.teamA.members">{{member}}</li>
  51. </ul>
  52. <h2>Team B</h2>
  53. <ul class="members">
  54. <li ng-repeat="member in game.teamB.members">{{member}}</li>
  55. </ul>
  56. </div>
  57. </div>
  58. </div>
  59. </div>