Home Explore Help
Sign In
games
/
gamenchat
mirror of https://github.com/thatsmydoing/gamenchat.git
1
0
Fork 0
Files Issues 0 Wiki
Browse Source

Split out services

Thomas Dy 11 years ago
parent
7f1ebef0a1
commit
13e20837b9
8 changed files with 254 additions and 160 deletions
Split View Show Diff Stats
  1. 6 4
      app/views/chatRoomNg.scala.html
  2. 0 145
      public/javascripts/chatRoomNg.js
  3. 96 0
      public/javascripts/chatServices.js
  4. 37 0
      public/javascripts/main.js
  5. 88 0
      public/javascripts/tabooServices.js
  6. 10 0
      public/partials/about.html
  7. 12 10
      public/partials/chatRoom.html
  8. 5 1
      public/stylesheets/main.css

+ 6 - 4
app/views/chatRoomNg.scala.html
View File 

@@ -3,7 +3,7 @@
 
 
 <html ng-app="taboo">
 
     <head>
 
-        <title>Websocket Chat-Room</title>
 
+        <title>Game n' Chat</title>
 
         <link rel="stylesheet" media="screen" href="@routes.Assets.at("stylesheets/bootstrap.css")">
 
         <link rel="stylesheet" media="screen" href="@routes.Assets.at("stylesheets/main.css")">
 
         <link rel="shortcut icon" type="image/png" href="@routes.Assets.at("images/favicon.png")">
 
@@ -13,7 +13,7 @@
 
         <div class="topbar">
 
             <div class="fill">
 
                 <div class="container" ng-controller="LoginCtrl">
 
-                    <a class="brand">Websocket Chat-Room</a>
 
+                    <a class="brand">Game n' Chat</a>
 
 
                     <p class="pull-right" ng-show="service.isConnected()">
 
                         Logged in as {{service.username}} —
 
@@ -31,7 +31,7 @@
 
 
         <div class="container" ng-controller="ViewCtrl">
 
 
-            <div class="content" ng-include="partial('chatRoom')">
 
+            <div class="content" ng-include="view(service.isConnected())">
 
             </div>
 
 
             <footer>
 
@@ -43,7 +43,9 @@
 
         <script src="@routes.Application.javascriptRoutes" type="text/javascript"></script>
 
         <script src="@routes.Assets.at("components/jquery/jquery.min.js")" type="text/javascript"></script>
 
         <script src="@routes.Assets.at("components/angular/angular.min.js")" type="text/javascript"></script>
 
-        <script src="@routes.Assets.at("javascripts/chatRoomNg.js")" type="text/javascript"></script>
 
+        <script src="@routes.Assets.at("javascripts/chatServices.js")" type="text/javascript"></script>
 
+        <script src="@routes.Assets.at("javascripts/tabooServices.js")" type="text/javascript"></script>
 
+        <script src="@routes.Assets.at("javascripts/main.js")" type="text/javascript"></script>
 
 
     </body>
 
 </html>

+ 0 - 145
public/javascripts/chatRoomNg.js
View File 

@@ -1,145 +0,0 @@
 
-angular.module('tabooServices', [])
 
-.factory('connectionService', function($rootScope) {
 
-  var WS = window['MozWebSocket'] ? MozWebSocket : WebSocket;
 
-  var chatSocket = null;
 
-
 
-  var service = {
 
-    username: '',
 
-    messages: [],
 
-    teamA: {},
 
-    teamB: {},
 
-    error: null,
 
-    isConnected: function() {
 
-      return this.username != '';
 
-    },
 
-  };
 
-
 
-  service.connect = function(username) {
 
-    chatSocket = new WS(jsRoutes.controllers.Application.chat(username).webSocketURL());
 
-    chatSocket.onmessage = onEvent;
 
-    chatSocket.onopen = function() {
 
-      service.send("/status");
 
-    }
 
-    service.username = username;
 
-  }
 
-
 
-  service.disconnect = function() {
 
-    service.username = '';
 
-    service.messages = [];
 
-    service.members = [];
 
-    chatSocket.close();
 
-    chatSocket = null;
 
-  }
 
-
 
-  service.send = function(message) {
 
-    chatSocket.send(JSON.stringify({text: message}));
 
-  }
 
-
 
-  function onEvent(event) {
 
-    var message = JSON.parse(event.data);
 
-    console.log(message);
 
-    if(message.error) {
 
-      service.error = message;
 
-    }
 
-    else if(message.kind == "talk") {
 
-      service.messages.push(message);
 
-    }
 
-    else if(message.kind == "join") {
 
-      addMessage("join", message.user, " has joined.");
 
-    }
 
-    else if(message.kind == "quit") {
 
-      addMessage("quit", message.user, " has left.");
 
-    }
 
-    else if(message.kind == "point") {
 
-      var text = "";
 
-
 
-      if(message.action == "correct") {
 
-        text = message.user + " got it!";
 
-      }
 
-      else if(message.action == "invalid") {
 
-        text = "Uh-uh! You said a taboo word.";
 
-      }
 
-      else if(message.action == "pass") {
 
-        text = "Tsk tsk. You passed.";
 
-      }
 
-      else if(message.action == "taboo") {
 
-        text = "Oh no! "+message.user+" has called you out.";
 
-      }
 
-
 
-      text += " The last word was "+message.card.word+".";
 
-      gmMessage(text);
 
-      service.points = message.points;
 
-    }
 
-    else if(message.kind == "roundReady") {
 
-      gmMessage("Next round, the player will be "+message.player);
 
-      if(message.player == service.username) {
 
-        service.startReady = true;
 
-      }
 
-    }
 
-    else if(message.kind == "roundStart") {
 
-      gmMessage("Start game!");
 
-      service.startReady = false;
 
-      service.startTime = new Date();
 
-      service.points = 0;
 
-    }
 
-    else if(message.kind == "roundEnd") {
 
-      if(message.card) {
 
-        gmMessage("Time's up! The last word was "+message.card.word+".");
 
-      }
 
-      gmMessage("The round has ended. The team got "+message.points+".");
 
-      service.startReady = false;
 
-    }
 
-    else if(message.kind == "card") {
 
-      service.card = message.card;
 
-    }
 
-    else if(message.kind == "status") {
 
-      updateStatus(message);
 
-    }
 
-    $rootScope.$apply();
 
-  }
 
-
 
-  function updateStatus(message) {
 
-    service.teamA = message.teamA;
 
-    service.teamB = message.teamB;
 
-  }
 
-
 
-  function addMessage(kind, user, message) {
 
-    service.messages.push({
 
-      kind: kind,
 
-      user: user,
 
-      message: message
 
-    });
 
-  }
 
-
 
-  function gmMessage(message) {
 
-    addMessage("talk", "*GM", message);
 
-  }
 
-
 
-  return service;
 
-});
 
-
 
-angular.module('taboo', ['tabooServices']);
 
-
 
-function partial(template) {
 
-  return jsRoutes.controllers.Assets.at('partials/'+template+'.html').url;
 
-}
 
-
 
-function ViewCtrl($scope) {
 
-  $scope.partial = partial;
 
-}
 
-
 
-function LoginCtrl($scope, connectionService) {
 
-  $scope.service = connectionService;
 
-}
 
-
 
-function ChatCtrl($scope, connectionService) {
 
-  $scope.service = connectionService;
 
-
 
-  $scope.onType = function(event) {
 
-    if(event.keyCode == 13) {
 
-      connectionService.send($scope.text);
 
-      $scope.text = '';
 
-      event.originalEvent.preventDefault();
 
-    }
 
-  }
 
-}

+ 96 - 0
public/javascripts/chatServices.js
View File 

@@ -0,0 +1,96 @@
 
+angular.module('chatServices', [])
 
+.factory('Connection', function($rootScope, $timeout) {
 
+  var WS = window['MozWebSocket'] ? MozWebSocket : WebSocket;
 
+  var chatSocket = null;
 
+
 
+  var service = {
 
+    username: '',
 
+    error: null,
 
+    messages: [],
 
+    isConnected: function() {
 
+      return this.username != '';
 
+    },
 
+    addListener: function(f) {
 
+      messageListeners.add(f);
 
+    }
 
+  };
 
+
 
+  function wrap(func) {
 
+    return function() {
 
+      var args = arguments;
 
+      $timeout(function() {
 
+        func.apply(null, args);
 
+      });
 
+    }
 
+  };
 
+
 
+  service.connect = function(username) {
 
+    chatSocket = new WS(jsRoutes.controllers.Application.chat(username).webSocketURL());
 
+    chatSocket.onmessage = wrap(function(event) {
 
+      var message = JSON.parse(event.data);
 
+      $rootScope.$broadcast('ws:message', message);
 
+    });
 
+    chatSocket.onopen = wrap(function() {
 
+      $rootScope.$broadcast('ws:connected', username);
 
+      service.username = username;
 
+    });
 
+    chatSocket.onclose = wrap(function() {
 
+      $rootScope.$broadcast('ws:disconnected');
 
+      service.username = '';
 
+    });
 
+  }
 
+
 
+  service.disconnect = function() {
 
+    chatSocket.close();
 
+    chatSocket = null;
 
+  }
 
+
 
+  service.send = function(message) {
 
+    chatSocket.send(JSON.stringify({text: message}));
 
+  }
 
+
 
+  return service;
 
+})
 
+.factory('Chat', function($rootScope, Connection) {
 
+  var service = {
 
+    username: '',
 
+    messages: [],
 
+    receive: function(message) {
 
+      if(arguments.length == 3) {
 
+        message = {
 
+          kind: arguments[0],
 
+          user: arguments[1],
 
+          message: arguments[2]
 
+        };
 
+      }
 
+      service.messages.push(message);
 
+    },
 
+    isConnected: Connection.isConnected,
 
+    send: Connection.send
 
+  };
 
+
 
+  $rootScope.$on('ws:connected', function(event, username) {
 
+    service.username = username;
 
+  });
 
+  $rootScope.$on('ws:message', function(event, message) {
 
+    if(message.kind == "talk") {
 
+      service.receive(message);
 
+    }
 
+    else if(message.kind == "join") {
 
+      service.receive("join", message.user, " has joined.");
 
+    }
 
+    else if(message.kind == "quit") {
 
+      service.receive("quit", message.user, " has left.");
 
+    }
 
+  });
 
+  $rootScope.$on('ws:disconnected', function() {
 
+    service.messages = [];
 
+    service.username = '';
 
+  });
 
+
 
+  if(Connection.isConnected()) {
 
+    service.username = Connection.username;
 
+  }
 
+
 
+  return service;
 
+})

+ 37 - 0
public/javascripts/main.js
View File 

@@ -0,0 +1,37 @@
 
+angular.module('taboo', ['chatServices', 'tabooServices'])
 
+
 
+function partial(template) {
 
+  return jsRoutes.controllers.Assets.at('partials/'+template+'.html').url;
 
+}
 
+
 
+function ViewCtrl($scope, Connection) {
 
+  $scope.service = Connection;
 
+  $scope.view = function(connected) {
 
+    if(connected) {
 
+      return partial("chatRoom");
 
+    }
 
+    else {
 
+      return partial("about");
 
+    }
 
+  }
 
+}
 
+
 
+function LoginCtrl($scope, Connection) {
 
+  $scope.service = Connection;
 
+}
 
+
 
+function ChatCtrl($scope, Chat) {
 
+  $scope.service = Chat;
 
+
 
+  $scope.onType = function(event) {
 
+    if(event.keyCode == 13) {
 
+      Chat.send($scope.text);
 
+      $scope.text = '';
 
+      event.originalEvent.preventDefault();
 
+    }
 
+  }
 
+}
 
+
 
+function GameCtrl($scope, Taboo) {
 
+  $scope.game = Taboo;
 
+}

+ 88 - 0
public/javascripts/tabooServices.js
View File 

@@ -0,0 +1,88 @@
 
+angular.module('tabooServices', [])
 
+.factory('Taboo', function($rootScope, Chat) {
 
+  var game = {};
 
+  game.startRound = function() {
 
+    Chat.send('/start');
 
+  };
 
+  game.status = function() {
 
+    Chat.send('/status');
 
+  };
 
+  game.roundStart = function() {
 
+    game.pendingRound = false;
 
+    game.startTime = new Date();
 
+    game.points = 0;
 
+  };
 
+  game.roundEnd = function() {
 
+    game.pendingRound = false;
 
+    game.card = null;
 
+  };
 
+
 
+  $rootScope.$on('ws:connected', init);
 
+  $rootScope.$on('ws:message', onmessage);
 
+
 
+  function init() {
 
+    game.teamA = null;
 
+    game.teamB = null;
 
+    game.card = null;
 
+    game.points = 0;
 
+    game.pendingRound = false;
 
+    game.status();
 
+  }
 
+
 
+  function onmessage(event, message) {
 
+    if(message.kind == "point") {
 
+      var text = "";
 
+
 
+      if(message.action == "correct") {
 
+        text = message.user + " got it!";
 
+      }
 
+      else if(message.action == "invalid") {
 
+        text = "Uh-uh! You said a taboo word.";
 
+      }
 
+      else if(message.action == "pass") {
 
+        text = "Tsk tsk. You passed.";
 
+      }
 
+      else if(message.action == "taboo") {
 
+        text = "Oh no! "+message.user+" has called you out.";
 
+      }
 
+
 
+      text += " The last word was "+message.card.word+".";
 
+      gmMessage(text);
 
+      game.points = message.points;
 
+    }
 
+    else if(message.kind == "roundReady") {
 
+      gmMessage("Next round, the player will be "+message.player);
 
+      if(message.player == Chat.username) {
 
+        game.pendingRound = true;
 
+      }
 
+    }
 
+    else if(message.kind == "roundStart") {
 
+      gmMessage("Start game!");
 
+      game.roundStart();
 
+    }
 
+    else if(message.kind == "roundEnd") {
 
+      if(message.card) {
 
+        gmMessage("Time's up! The last word was "+message.card.word+".");
 
+      }
 
+      gmMessage("The round has ended. The team got "+message.points+".");
 
+      game.roundEnd();
 
+    }
 
+    else if(message.kind == "card") {
 
+      game.card = message.card;
 
+    }
 
+    else if(message.kind == "status" || message.kind == "join" || message.kind == "quit") {
 
+      updateStatus(message);
 
+    }
 
+  }
 
+
 
+  function updateStatus(message) {
 
+    game.teamA = message.teamA;
 
+    game.teamB = message.teamB;
 
+  }
 
+
 
+  function gmMessage(message) {
 
+    Chat.receive("gm", "*GM", message);
 
+  }
 
+
 
+  return game;
 
+})

+ 10 - 0
public/partials/about.html
View File 

@@ -0,0 +1,10 @@
 
+<div>
 
+  <div class="page-header">
 
+    <h1>About</h1>
 
+  </div>
 
+  <div class="row">
 
+    <div class="span10" id="main">
 
+      <p>Play games <em>and</em> chat</p>
 
+    </div>
 
+  </div>
 
+</div>

+ 12 - 10
public/partials/chatRoom.html
View File 

@@ -1,6 +1,6 @@
 
 <div ng-controller="ChatCtrl">
 
   <div class="page-header">
 
-    <h1>Welcome to the chat room <small>You are chatting as {{service.username}}</small></h1>
 
+    <h1>Welcome <small>You are playing as {{service.username}}</small></h1>
 
   </div>
 
 
   <div id="onError" class="alert-message error">
 
@@ -19,20 +19,22 @@
 
       </div>
 
       <textarea ng-model="text" id="talk" ng-keypress="onType($event)"></textarea>
 
     </div>
 
-    <div class="span4">
 
-      <button class="btn" ng-show="service.startReady" ng-click="service.send('/start')">Start</button>
 
-      <h2>Card</h2>
 
-      <h3>{{service.card.word}}</h3>
 
-      <ul class="taboo">
 
-        <li ng-repeat="word in service.card.taboo">{{word}}</li>
 
-      </ul>
 
+    <div class="span4" ng-controller="GameCtrl">
 
+      <button class="btn" ng-show="game.pendingRound" ng-click="game.startRound()">Start</button>
 
+      <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 service.teamA.members">{{member}}</li>
 
+        <li ng-repeat="member in game.teamA.members">{{member}}</li>
 
       </ul>
 
       <h2>Team B</h2>
 
       <ul class="members">
 
-        <li ng-repeat="member in service.teamB.members">{{member}}</li>
 
+        <li ng-repeat="member in game.teamB.members">{{member}}</li>
 
       </ul>
 
     </div>
 
   </div>

+ 5 - 1
public/stylesheets/main.css
View File 

@@ -108,6 +108,10 @@ body {
 
     background: #FFC;
 
 }
 
 
+.message.gm {
 
+    background: #D9FBE7;
 
+}
 
+
 
 .message.join, .message.quit {
 
     background: #D9E7FB;
 
-}
 
+}