Server stats

src/login/controller.js

@@ -1,8 +1,19 @@
 'use strict';
 
 // @ngInject
-function LoginController(CardshifterServerAPI, $scope, $location, $rootScope) {
+function LoginController(CardshifterServerAPI, $scope, $location, $rootScope, $timeout) {
     var SUCCESS = 200;
+    var UPDATE_DELAY = 10000;
+    var REFRESH_DELAY = 3000;
+
+    $scope.refreshing = false;
+
+    $scope.servers = [
+        new ServerInfo("Local Host", "ws://127.0.0.1:4243"),
+        new ServerInfo("Dwarf Towers", "ws://dwarftowers.com:4243"),
+        new ServerInfo("Zomis.net", "ws://stats.zomis.net:4243"),
+        new ServerInfo("Other...", "other")
+    ];
 
     $scope.login = function() {
         $scope.loggedIn = true;
@@ -48,6 +59,97 @@ function LoginController(CardshifterServerAPI, $scope, $location, $rootScope) {
             $scope.$apply();
         });
     }
+
+    $scope.refreshServers = function() {
+        $scope.refreshing = true;
+        $timeout(function() {
+            $scope.refreshing = false;
+        }, REFRESH_DELAY);
+
+        /**
+        * This is a recursive function that is called
+        * once the Websocket has successfully connected
+        * with the server. Once it is connected, the
+        * Websocket is obliterated.
+        *
+        * This is used in place of the loop because
+        * API.init is a mostly async method, so the
+        * loop would rapidly terminate, and the sockets
+        * will be destroyed at the incorrect points in
+        * order for the "blank users"(#92) to be prevented.
+        */
+        var i = 0;
+        (function getServerInfo() {
+            var thisServer = $scope.servers[i];
+
+            if(thisServer.name === "Other...") {
+                return;
+            }
+
+            var now = Date.now();
+
+            CardshifterServerAPI.init(thisServer.address, false, function() {
+                thisServer.latency = Date.now() - now;
+                thisServer.isOnline = true;
+
+                /* This must be created here because this is run after init is don't, so command is set properly */
+                var getUsers = new CardshifterServerAPI.messageTypes.ServerQueryMessage("STATUS", "");
+
+                CardshifterServerAPI.sendMessage(getUsers);
+                CardshifterServerAPI.setMessageListener(function(message) {
+
+                    /* For some reason, local host always said 1 user online, but dwarftowers did not. */
+                    thisServer.userCount = message.users;
+                    thisServer.availableMods = message.mods.length;
+                    thisServer.gamesRunning = message.games;
+                    thisServer.ais = message.ais;
+
+                    // Should these (^^) be dynamically loaded?
+
+                    CardshifterServerAPI.socket.close();
+                    CardshifterServerAPI.socket = null;
+
+                    i++;
+                    if($scope.servers[i]) {
+                        getServerInfo();
+                    }
+                }, ["status"]);
+            }, function() {
+                thisServer.latency = 0;
+                thisServer.isOnline = false;
+                thisServer.userCount = 0;
+
+                i++;
+                if($scope.servers[i]) {
+                    getServerInfo();
+                }
+            })
+        })();
+    };
+
+    $scope.refreshServers(); // call it on startup
+
+    /**
+    * The ServerInfo class.
+    * @constructor
+    *
+    * @param name:string -- The name of the server
+    * @param address:string -- The address of the server
+    *
+    * This class is used for displaying the various
+    * available servers at the top of the screen
+    * in the server status table.
+    */
+    function ServerInfo(name, address) {
+        this.name = name;
+        this.address = address;
+        this.isOnline = false;
+        this.userCount = 0;
+        this.latency = 0;
+        this.availableMods = 0;
+        this.gamesRunning = 0;
+        this.ais = 0;
+    }
 };
 
 module.exports = LoginController;

src/login/login.html

@@ -6,14 +6,38 @@
 
 <h4>Please log in to continue, or see below for instructions and assistance.</h4>
 
+<!-- Server status -->
+<div>
+    <table>
+        <!-- Should these be dynamically loaded? -->
+        <tr>
+            <th>Server</th>
+            <th>Online</th>
+            <th>Users</th>
+            <th>Mods</th>
+            <th>Games</th>
+            <th>AIs</th>
+            <th>Latency</th>
+        </tr>
+        <tr ng-repeat="server in servers" ng-if="server.name !== 'Other...'">
+            <td>{{server.name}}</td>
+            <td>{{server.isOnline}}</td>
+            <td>{{server.userCount}} users</td>
+            <td>{{server.availableMods}} mods</td>
+            <td>{{server.gamesRunning}} games</td>
+            <td>{{server.ais}} AIs</td>
+            <td>{{server.latency}} ms</td>
+        </tr>
+    </table>
+    <input ng-click="refreshServers()" ng-disabled="refreshing" type="button" value="Refresh"/>
+    <p ng-show="refreshing">Refreshing...</p>
+</div>
+
 <form name="login_information" id="login_information" class="login-form">
     <div class="form-group">
         <label for="server" aria-label="Server">Server:</label>
         <select ng-model="server" name="server" id="server" class="form-control">
-            <option value="ws://127.0.0.1:4243">Local host</option>
-            <option value="ws://dwarftowers.com:4243">dwarftowers.com</option>
-            <option value="ws://stats.zomis.net:4243">zomis.net</option>
-            <option value="other">Other...</option>
+            <option ng-repeat="server in servers" value="{{server.address}}">{{server.name}}</option>
         </select>
         <label for="secure">Is secure server:</label>
         <input ng-model="is_secure" name="secure" id="secure" type="checkbox" value="secure" />
@@ -65,4 +89,4 @@ <h3 style="text-decoration: underline;">About Cardshifter</h3>
 <ul>
     <li><h4><a href="http://stats.zomis.net/io-web">Official Website</a></h4></li>
     <li><h4><a href="https://github.com/Cardshifter">On GitHub</a></h4></li>
-</ul>
+</ul>

src/server_interface/server_interface.js

@@ -284,7 +284,7 @@ var CardshifterServerAPI = {
 
         this.socket.onmessage = function(message) {
             var data = JSON.parse(message.data);
-            if(eventTypes) {
+            if(eventTypes !== []) {
                 if(eventTypes.indexOf(data.command) !== -1) { // if contains
                     listener(data);
                 }