Autocompletion of nicknames in chat works. this commit will require a npm install to fetch new packages

bower.json

@@ -33,7 +33,8 @@
     "BrowserQuest": "https://github.com/mozilla/BrowserQuest.git",
     "github-buttons": "git://github.com/mdo/github-buttons.git",
     "marked": "~0.2.9",
-    "JavaScriptButtons": "git://github.com/paypal/JavaScriptButtons.git#master"
+    "JavaScriptButtons": "git://github.com/paypal/JavaScriptButtons.git#master",
+    "Angular-At-Directive": "git://github.com/scarletsky/Angular-At-Directive.git#master"
   },
   "resolutions": {
     "jquery": "~2.0.3",

public/css/game-pane.styl

@@ -57,4 +57,38 @@
     margin: 5px
     
 .option-group .option-time
-    padding: 0px 5px
+    padding: 0px 5px
+
+// Autocomplete [TODO] make this nicer
+.list-at-user {
+    width: 100%;
+    max-width: 120px;
+    position: absolute;
+    background: white;
+    border: 1px solid #a4a4a4;
+    z-index: 10;
+    margin-left: -435px;
+    margin-top: -355px;
+}
+
+.list-at-user li {
+    line-height:14px;
+    border-bottom: 1px solid #a4a4a4;
+    list-style-type: none;
+}
+
+.list-at-user li:hover {
+    cursor: pointer;
+    background: #b9dff4;
+}
+
+.list-at-user li span {
+    margin: 2px;
+    font-size: 11.844px;
+    margin-left: 5px;
+    display: inline-block;
+}
+
+.list-cur {
+    background: #b9dff4;
+}

public/js/app.js

@@ -3,7 +3,7 @@
 window.habitrpg = angular.module('habitrpg',
     ['ngResource', 'ngSanitize', 'userServices', 'groupServices', 'memberServices', 'challengeServices',
      'sharedServices', 'authServices', 'notificationServices', 'guideServices',
-     'ui.bootstrap', 'ui.keypress', 'ui.router', 'chieffancypants.loadingBar'])
+     'ui.bootstrap', 'ui.keypress', 'ui.router', 'chieffancypants.loadingBar', 'At'])
 
   // @see https://github.com/angular-ui/ui-router/issues/110 and https://github.com/HabitRPG/habitrpg/issues/1705
   // temporary hack until they have a better solution

public/js/controllers/groupsCtrl.js

@@ -79,6 +79,32 @@ habitrpg.controller("GroupsCtrl", ['$scope', '$rootScope', 'Groups', '$http', 'A
     }
   ])
 
+  .controller('AutocompleteCtrl', ['$scope', 'Groups', 'User', function ($scope,Groups,User) {
+    $scope.clearUserlist = function() {
+      $scope.response = [];
+      $scope.usernames = [];
+    }
+    
+    $scope.addNewUser = function(user) {
+      if($.inArray(user.user,$scope.usernames) == -1) {
+        $scope.usernames.push(user.user);
+        $scope.response.push(user);
+      }
+    }
+    
+    $scope.clearUserlist();
+    
+    $scope.chatChanged = function(newvalue,oldvalue){
+      if($scope.group.chat && $scope.group.chat.length > 0){
+        for(var i = 0; i < $scope.group.chat.length; i++) {
+          $scope.addNewUser($scope.group.chat[i]);
+        }
+      }
+    }
+    
+    $scope.$watch('group.chat',$scope.chatChanged);
+  }])
+  
   .controller('ChatCtrl', ['$scope', 'Groups', 'User', function($scope, Groups, User){
     $scope._chatMessage = '';
     $scope._sending = false;

public/manifest.json

@@ -13,6 +13,8 @@
             "bower_components/angular-ui/build/angular-ui.js",
             "bower_components/angular-ui-utils/modules/keypress/keypress.js",
             "bower_components/angular-loading-bar/build/loading-bar.js",
+            "bower_components/Angular-At-Directive/src/at.js",
+            "bower_components/Angular-At-Directive/src/caret.js",
 
             "bower_components/bootstrap/docs/assets/js/bootstrap.js",
             "bower_components/angular-bootstrap/ui-bootstrap.js",

views/options/social/chat-box.jade

@@ -1,8 +1,12 @@
 form(ng-submit='postChat(group,_chatMessage)')
   .-options
     //FIXME ng-model makes this painfully slow! using jquery for now, which is really non-angular-like
-    .control-group.option-large
+    .control-group.option-large(ng-controller='AutocompleteCtrl')
-      textarea.chat-textarea.option-content(style='height:6em;', ui-keypress='{13:"postChat(group,_chatMessage)"}', ng-model='_chatMessage')
+      textarea.chat-textarea.option-content(style='height:6em;', ui-keypress='{13:"postChat(group,_chatMessage)"}', ng-model='_chatMessage', flag='@', at-user, auto-complete)
+      span.user-list(ng-show='!isAtListHidden', auto-follow='true')
+        ul.list-at-user
+          li(ng-repeat='user in users | filter:query.text | limitTo: 5', ng-click='autoComplete(user)')
+            span.username.label(class='label-contributor-{{user.contributor.level}}') {{user.user}}
     table.pull-right
       tr
         td