Merge pull request #80 from TF2Stadium/dev

Version v0.3.1-alpha
TF2Stadium · Dec 1, 2015 · 5fdad80 · 5fdad80
2 parents 0b1949f + 6d5b777
commit 5fdad80
Show file tree

Hide file tree

Showing 22 changed files with 322 additions and 137 deletions.
diff --git a/bower.json b/bower.json
@@ -7,8 +7,9 @@
   "version": "0.0.0",
   "dependencies": {
     "angular": "~1.4.7",
-    "angular-material": "1.0.0-rc4",
     "angular-animate": "~1.4.0",
+    "angular-audio": "~1.7.1",
+    "angular-material": "1.0.0-rc4",
     "angular-scroll-glue": "~2.0.6",
     "angular-ui-router": "~0.2.15",
     "clipboard": "~1.5.3",

diff --git a/package.json b/package.json
@@ -4,7 +4,7 @@
   "license": "GPL-3.0",
   "repository": "https://github.com/TF2Stadium/Frontend",
   "readme": "readme.md",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "dependencies": {
     "del": "~1.2.0",
     "uglify-save-license": "~0.4.1",

diff --git a/src/app/app.filter.js b/src/app/app.filter.js
@@ -1,13 +1,15 @@
 (function () {
   'use strict';
 
+
   angular.module('tf2stadium')
     .filter('capitalize', capitalize)
     .filter('reverse', reverse)
     .filter('trusted', trusted)
     .filter('slotNameToClassName', slotNameToClassName)
     .filter('stripSlotNameNumber', stripSlotNameNumber)
-    .filter('secondsToMinutes', secondsToMinutes);
+    .filter('secondsToMinutes', secondsToMinutes)
+    .filter('unique', unique);
 
   /** @ngInject */
   function capitalize() {
@@ -71,4 +73,23 @@
     };
   }
 
+  /** @ngInject */
+  function unique() {
+    return function (array, uniqueKey) {
+      var uniqueArray = [];
+      for (var key in array) {
+        var existsInArray = false;
+        for (var j in uniqueArray) {
+          if (uniqueArray[j][uniqueKey] === array[key][uniqueKey]) {
+            existsInArray = true;
+          }
+        }
+        if (!existsInArray) {
+          uniqueArray.push(array[key]);
+        }
+      }
+      return uniqueArray;
+    };
+  }
+
 })();
diff --git a/src/app/app.module.js b/src/app/app.module.js
@@ -6,7 +6,8 @@
     'ngAnimate',
     'ui.router',
     'ngMaterial',
-    'luegg.directives'
+    'luegg.directives',
+    'ngAudio'
   ]);
 
   angular.module('tf2stadium.services', []);

diff --git a/src/app/app.notifications.js b/src/app/app.notifications.js
@@ -6,7 +6,7 @@
     .controller('NotificationsController', NotificationsController);
 
   /** @ngInject */
-  function NotificationsFactory($mdToast, $document, $timeout, $log) {
+  function NotificationsFactory($mdToast, $document, $timeout, $log, ngAudio) {
 
     var notificationsService = {};
 
@@ -77,6 +77,10 @@
         options.icon = options.icon || '/assets/img/logo-no-text.png';
         options.tag = options.tag || 'tf2stadium';
 
+        if (options.soundFile) {
+          ngAudio.play(options.soundFile).volume = options.soundVolume;
+        }
+
         var html5notification = new Notification(options.title, options);
 
         if (options.timeout) {

diff --git a/src/app/app.settings.js b/src/app/app.settings.js
@@ -53,6 +53,10 @@
       dark:   {name: 'TF2Stadium Dark', selector: 'dark-theme'}
     };
 
+    SettingsProvider.constants.sound = {
+      soundVolume:      {name: 'Notifications volume'}
+    };
+
     function setDefaultValues() {
       SettingsProvider.settings.currentTheme = 'default-theme';
 

diff --git a/src/app/pages/lobby/lobby.factory.js b/src/app/pages/lobby/lobby.factory.js
@@ -6,13 +6,18 @@
 
   /** @ngInject */
   function LobbyService($rootScope, $state, $mdDialog, $timeout, $interval,
-                        $window, Websocket, Notifications) {
+                        $window, Websocket, Notifications, Settings) {
     var factory = {};
 
     factory.lobbyList = {};
+
+    factory.lobbySpectated = Object.create(null);
+    factory.lobbyJoined = Object.create(null);
+
+    factory.lobbySpectatedId = -1;
+    factory.lobbyJoinedId = -1;
+
     factory.subList = {};
-    factory.lobbySpectated = {};
-    factory.lobbyJoined = {};
     factory.lobbyJoinInformation = {};
 
     var playerPreReady = false;
@@ -31,14 +36,42 @@
       return factory.lobbyList;
     };
 
+    // Will return undefined when a lobby is not currently being
+    // spectated
     factory.getLobbySpectated = function () {
       return factory.lobbySpectated;
     };
 
+    // Will return -1 when a lobby is not currently being
+    // spectated
+    factory.getLobbySpectatedId = function () {
+      return factory.lobbySpectatedId;
+    };
+
+    factory.leaveSpectatedLobby = function () {
+      if (factory.lobbySpectatedId === -1) {
+        return;
+      }
+      Websocket.emitJSON('lobbySpectatorLeave', {id: factory.lobbySpectatedId}, function () {
+        factory.lobbySpectatedId = -1;
+        factory.lobbySpectated = {};
+        $rootScope.$emit('lobby-spectated-changed');
+        $rootScope.$emit('lobby-spectated-updated');
+      });
+    };
+
+    // Will return undefined when not currently joined in any
+    // lobby
     factory.getLobbyJoined = function () {
       return factory.lobbyJoined;
     };
 
+    // Will return -1 when not currently joined in any
+    // lobby
+    factory.getLobbyJoinedId = function () {
+      return factory.lobbyJoinedId;
+    };
+
     factory.getPlayerPreReady = function () {
       return playerPreReady;
     };
@@ -122,10 +155,25 @@
 
     factory.spectate = function (lobby) {
       Websocket.emitJSON('lobbySpectatorJoin', {id: lobby}, function (response) {
-        if (!response.success) {
-          if($state.current.name === 'lobby-page') {
-            $state.go('lobby-list');
+        if (response.success) {
+          /*
+          This code assumes that the only way we'll ever spectate
+          a lobby is when we asked the backend to let us do it.
+
+          However, the backend might have some ideas of its own and
+          force us to spectate a lobby (for example, on websocket connection).
+
+          This code needs to be moved to the lobbyData handler, but the backend
+          is sending us bogus lobbyData on lobbyJoin that makes the page stutter,
+          so it stays here for the moment.
+          */
+          var oldLobbyId = factory.lobbySpectatedId;
+          factory.lobbySpectatedId = lobby;
+
+          if (lobby !== oldLobbyId) {
+            $rootScope.$emit('lobby-spectated-changed');
           }
+          $rootScope.$emit('lobby-spectated-updated');
         }
       });
     };
@@ -169,8 +217,7 @@
           timeout: 30
         },
         bindToController: true
-      })
-      .then(function (response) {
+      }).then(function (response) {
         if (response.readyUp) {
           Websocket.emitJSON('playerReady', {});
           localStorage.setItem('tabCommunication', '');
@@ -180,8 +227,8 @@
         Websocket.emitJSON('playerNotReady', {});
         localStorage.setItem('tabCommunication', '');
         localStorage.setItem('tabCommunication', 'closeDialog');
-      }
-      );
+      });
+
       Notifications.notifyBrowser({
         title: 'Click here to ready up!',
         body: 'All the slots are filled, ready up to start',
@@ -196,17 +243,21 @@
 
     Websocket.onJSON('lobbyStart', function (data) {
       factory.lobbyJoinInformation = data;
-      $state.go('lobby-page', {lobbyID: factory.lobbySpectated.id});
+      $state.go('lobby-page', {lobbyID: factory.lobbySpectatedId});
       $rootScope.$emit('lobby-start');
-      Notifications.notifyBrowser({
-        title: 'Lobby is starting!',
-        body: 'Come back to the site to join the server',
-        timeout: 5,
-        callbacks: {
-          onclick: function () {
-            $window.focus();
+      Settings.getSettings(function (settings) {
+        Notifications.notifyBrowser({
+          title: 'Lobby is starting!',
+          body: 'Come back to the site to join the server',
+          soundFile: '/assets/sound/lobby-start.wav',
+          soundVolume: settings.soundVolume * 0.01,
+          timeout: 5,
+          callbacks: {
+            onclick: function () {
+              $window.focus();
+            }
           }
-        }
+        });
       });
     });
 
@@ -219,34 +270,40 @@
       factory.lobbyList = data.lobbies;
       $rootScope.$emit('lobby-list-updated');
 
-      if (!factory.lobbyJoined.id) {
+      if (factory.lobbyJoinedId === -1) {
         return;
       }
+
       factory.lobbyList.forEach(function (lobby) {
-        if (lobby.id === factory.lobbyJoined.id) {
-          factory.lobbyJoined.players = lobby.players;
-          factory.lobbyJoined.maxPlayers = lobby.maxPlayers;
+        if (lobby.id === factory.lobbyJoinedId) {
+          factory.getLobbyJoined().players = lobby.players;
+          factory.getLobbyJoined().maxPlayers = lobby.maxPlayers;
         }
       });
       $rootScope.$emit('lobby-joined-updated');
     });
 
-    Websocket.onJSON('lobbyData', function (data) {
-      var oldLobbyId = factory.lobbySpectated.id;
-      factory.lobbySpectated = data;
-      if (data.id !== oldLobbyId) {
-        $rootScope.$emit('lobby-spectated-changed');
+    Websocket.onJSON('lobbyData', function (newLobby) {
+      factory.lobbySpectated = newLobby;
+
+      if (newLobby.id === factory.lobbySpectatedId) {
+        $rootScope.$emit('lobby-spectated-updated');
+      }
+
+      if (newLobby.id === factory.lobbyJoinedId) {
+        $rootScope.$emit('lobby-joined-updated');
       }
-      $rootScope.$emit('lobby-spectated-updated');
     });
 
     Websocket.onJSON('lobbyJoined', function (data) {
+      factory.lobbyJoinedId = data.id;
       factory.lobbyJoined = data;
       $rootScope.$emit('lobby-joined');
       $rootScope.$emit('lobby-joined-updated');
     });
 
     Websocket.onJSON('lobbyLeft', function () {
+      factory.lobbyJoinedId = -1;
       factory.lobbyJoined = {};
       factory.lobbyJoinInformation = {};
       $rootScope.$emit('lobby-joined-updated');

diff --git a/src/app/pages/lobby/page/header.controller.js b/src/app/pages/lobby/page/header.controller.js
@@ -26,22 +26,23 @@
 
     vm.shouldShowLobbyInformation = function () {
       return !error &&
+        vm.lobbyInformation &&
         vm.lobbyInformation.id &&
         vm.lobbyInformation.id === parseInt($state.params.lobbyID);
     };
 
     vm.shouldShowLobbyControls = function () {
       var user = $rootScope.userProfile;
       var lobby = vm.lobbyInformation;
-      return lobby.state < 5 && user &&
+      return user && lobby && lobby.state < 5 &&
         (user.steamid === lobby.leader.steamid ||
          user.role === 'administrator');
     };
 
     vm.shouldShowProgress = function () {
-      return !error &&
-        !(vm.lobbyInformation.id &&
-          vm.lobbyInformation.id === parseInt($state.params.lobbyID));
+      var lobby = vm.lobbyInformation;
+      var curLobbyId = parseInt($state.params.lobbyID);
+      return !error && !(lobby && lobby.id && lobby.id === curLobbyId);
     };
 
     vm.shouldShowError = function () {

diff --git a/src/app/pages/lobby/page/lobby-page.controller.js b/src/app/pages/lobby/page/lobby-page.controller.js
@@ -54,6 +54,10 @@
       vm.preReadyUpTimer = LobbyService.getPreReadyUpTimer();
     });
 
+    $scope.$on('$destroy', function (){
+      LobbyService.leaveSpectatedLobby();
+    });
+
     vm.join = function (lobby, team, position) {
       LobbyService.join(lobby, team, position);
     };
@@ -87,7 +91,7 @@
     };
 
     vm.shouldShowLobbyInformation = function () {
-      return vm.lobbyInformation.id && vm.lobbyInformation.id === parseInt($state.params.lobbyID);
+      return vm.lobbyInformation && vm.lobbyInformation.id && vm.lobbyInformation.id === parseInt($state.params.lobbyID);
     };
 
     LobbyService.spectate(parseInt($state.params.lobbyID));

diff --git a/src/app/pages/lobby/page/spectators.controller.js b/src/app/pages/lobby/page/spectators.controller.js
@@ -28,7 +28,8 @@
     };
 
     vm.shouldShowSpectators = function () {
-      return vm.lobbyInformation.id &&
+      return vm.lobbyInformation &&
+        vm.lobbyInformation.id &&
         vm.lobbyInformation.id === parseInt($state.params.lobbyID);
     };
   }

diff --git a/src/app/pages/lobby/page/spectators.html b/src/app/pages/lobby/page/spectators.html
@@ -4,7 +4,7 @@ <h1 class="spectators-title">
     Spectators
   </h1>
   <md-menu ng-repeat="spectator in spectators.lobbyInformation.spectators"
-  md-position-mode="target-right target" md-offset="-180 0">
+           md-position-mode="target-right target" md-offset="-180 0">
     <md-button class="sidebar-link" ng-click="$mdOpenMenu($event)">
       {{::spectator.name}}
     </md-button>
@@ -21,4 +21,4 @@ <h1 class="spectators-title">
       </md-menu-item>
     </md-menu-content>
   </md-menu>
-</div>
+</div>
diff --git a/src/app/pages/settings/section-sound.html b/src/app/pages/settings/section-sound.html
@@ -0,0 +1,11 @@
+<div  class="settings-section">
+  <h1>Notification volume</h1>
+  <md-slider md-discrete
+    ng-model="settings.soundVolume"
+    step="1" min="0" max="100"
+    ng-change="settings.saveSetting('soundVolume', settings.soundVolume)">
+  </md-slider>
+  <md-button ng-click="settings.playSoundSample()">
+    Test sound
+  </md-button>
+</div>