Improve upgrade required screen

www/css/app.css

@@ -4,6 +4,13 @@ License, v. 2.0. If a copy of the MPL was not distributed with this
 file, You can obtain one at http://mozilla.org/MPL/2.0/.
 */
 
+/*
+Framework7 and FontAwesome both have a .fab class
+*/
+.fafab {
+    font-family: "Font Awesome 5 Brands";
+}
+
 #app.framework7-root {
     padding-top: 0px;
 }

www/index.html

@@ -7,10 +7,10 @@
 <meta name="apple-mobile-web-app-capable" content="yes">
 <meta name="theme-color" content="#4cd964">
 <link rel="icon" href="img/logo.png">
+<link rel="stylesheet" href="node_modules/framework7/css/framework7.bundle.min.css">
 <link rel="stylesheet" href="fonts/material/Material_Icons.css">
 <link rel="stylesheet" href="fonts/roboto/Roboto.css">
 <link rel="stylesheet" href="fonts/game-icons/game-icons.css">
-<link rel="stylesheet" href="node_modules/framework7/css/framework7.bundle.min.css">
 <link rel="stylesheet" href="node_modules/@fortawesome/fontawesome-free/css/all.min.css">
 <link rel="stylesheet" href="node_modules/mapbox-gl/dist/mapbox-gl.css">
 <link rel="stylesheet" href="node_modules/leaflet/dist/leaflet.css">

www/js/api.js

@@ -13,6 +13,64 @@ function getActionUrl(action) {
     return SETTINGS["server"] + "/" + action;
 }
 
+/**
+ * Compare two version strings.
+ * http://stackoverflow.com/a/16187766/2534036
+ * @param {string} a
+ * @param {string} b
+ * @returns a number < 0 if a < b, a number > 0 if a > b, 0 if a = b
+ */
+function compareVersions(a, b) {
+    var i, diff;
+    var regExStrip0 = /(\.0+)+$/;
+    var segmentsA = a.replace(regExStrip0, '').split('.');
+    var segmentsB = b.replace(regExStrip0, '').split('.');
+    var l = Math.min(segmentsA.length, segmentsB.length);
+
+    for (i = 0; i < l; i++) {
+        diff = parseInt(segmentsA[i], 10) - parseInt(segmentsB[i], 10);
+        if (diff) {
+            return diff;
+        }
+    }
+    return segmentsA.length - segmentsB.length;
+}
+
+function checkClientVersion(success, failure) {
+    return $.ajax({
+        type: 'GET',
+        url: getActionUrl("version.txt"),
+        timeout: 5000,
+        success: function (version) {
+            $.getJSON("package.json", {}, function (local) {
+                if (compareVersions(local.version, version) < 0) {
+                    success(false);
+                } else {
+                    success(true);
+                }
+            });
+        },
+        error: function (xhr, textStatus, errorThrown) {
+            if (typeof failure != 'function') {
+                return;
+            }
+            switch (textStatus) {
+                case "timeout":
+                    failure("Couldn't connect to the server (timeout).", xhr);
+                    break;
+                case "error":
+                    failure("Couldn't connect to the server (error).", xhr);
+                    break;
+                case "parseerror":
+                    failure("The server sent a malformed response.", xhr);
+                    break;
+                default:
+                    failure("Couldn't connect to the server.", xhr);
+            }
+        }
+    });
+}
+
 /**
  * Call an API function on the server.
  * @param {string} action

www/js/main.js

@@ -78,29 +78,6 @@ function isServerAlive(callback) {
     });
 }
 
-/**
- * Compare two version strings.
- * http://stackoverflow.com/a/16187766/2534036
- * @param {string} a
- * @param {string} b
- * @returns a number < 0 if a < b, a number > 0 if a > b, 0 if a = b
- */
-function compareVersions(a, b) {
-    var i, diff;
-    var regExStrip0 = /(\.0+)+$/;
-    var segmentsA = a.replace(regExStrip0, '').split('.');
-    var segmentsB = b.replace(regExStrip0, '').split('.');
-    var l = Math.min(segmentsA.length, segmentsB.length);
-
-    for (i = 0; i < l; i++) {
-        diff = parseInt(segmentsA[i], 10) - parseInt(segmentsB[i], 10);
-        if (diff) {
-            return diff;
-        }
-    }
-    return segmentsA.length - segmentsB.length;
-}
-
 /**
  * Check if the saved username and password are valid.
  * @param {function} callback A function that will be called with a boolean argument indicating validity.
@@ -125,39 +102,32 @@ function checkLogin(callback) {
 if (localStorage.getItem("configured") == null) {
     router.navigate("/signin");
 } else {
-    isServerAlive(function (yes) {
+    checkClientVersion(function (ok) {
-        if (yes) {
+        if (ok) {
-            callAPI("version", {
+            // Version OK
-                username: localStorage.getItem("username"),
+            checkLogin(function (valid) {
-                password: localStorage.getItem("password")
+                if (valid) {
-            }, function (data) {
+                    callAPI("playerexists", {
-                $.getJSON("package.json", {}, function (local) {
+                        username: localStorage.getItem("username"),
-                    if (compareVersions(local.version, data.version) < 0) {
+                        password: localStorage.getItem("password")
-                        router.navigate("/upgrade");
+                    }, function (resp) {
-                    } else {
+                        if (resp.exists == true) {
-                        checkLogin(function (valid) {
+                            router.navigate("/home");
-                            if (valid) {
+                        } else {
-                                callAPI("playerexists", {
+                            router.navigate("/chooseteam");
-                                    username: localStorage.getItem("username"),
+                        }
-                                    password: localStorage.getItem("password")
+                    }, function (msg) {
-                                }, function (resp) {
+                        router.navigate("/signin");
-                                    if (resp.exists == true) {
+                    });
-                                        router.navigate("/home");
+                } else {
-                                    } else {
+                    router.navigate("/signin");
-                                        router.navigate("/chooseteam");
+                }
-                                    }
-                                }, function (msg) {
-                                    router.navigate("/signin");
-                                });
-                            } else {
-                                router.navigate("/signin");
-                            }
-                        });
-                    }
-                });
             });
         } else {
-            router.navigate("/connection");
+            // Version incompatible
+            router.navigate("/upgrade");
         }
+    }, function () {
+        router.navigate("/connection");
     });
 }

www/js/platform.js

@@ -11,7 +11,11 @@ var platform_theme = "md";
 var nw_tray = null;
 
 var openBrowser = function (url) {
+    window.open(url);
+}
 
+var openSystemBrowser = function (url) {
+    window.open(url);
 }
 
 var scanBarcode = function (success, error) {
@@ -85,6 +89,10 @@ function initCordova() {
         cordova.InAppBrowser.open(url, '_blank', 'location=yes');
     }
 
+    openExternalBrowser = function (url) {
+        window.open(url, '_system', '');
+    }
+
     scanBarcode = function (success, error) {
         cordova.plugins.barcodeScanner.scan(
                 function (result) {
@@ -139,6 +147,10 @@ function initNW() {
         });
     }
 
+    openExternalBrowser = function (url) {
+        require('nw.gui').Shell.openExternal(url);
+    }
+
     $("body").append('<script src="node_modules/@zxing/library/umd/index.min.js"></script>');
 
     scanBarcode = function (success, error) {

www/pages/upgrade.html

@@ -13,9 +13,26 @@
 
     <div class="page-content">
 
-        <div class="block text-center">
+        <div class="block">
             <p>This version of TerranQuest is too old to work properly with the
                 game server.</p>
+
+            {{#js_if "platform_type != 'browser'"}}
+            <h3>Download:</h3>
+            <div class="display-flex">
+                {{#js_if "platform_type == 'cordova'"}}
+                {{#each android}}
+                <div class="button round margin-horizontal" onclick='openSystemBrowser("{{this}}")'>{{@key}}</div>
+                {{/each}}
+                {{/js_if}}
+
+                {{#js_if "platform_type == 'nw'"}}
+                {{#each nwjs}}
+                <div class="button round margin-horizontal" onclick='openSystemBrowser("{{this}}")'>{{@key}}</div>
+                {{/each}}
+                {{/js_if}}
+            </div>
+            {{/js_if}}
         </div>
 
     </div>

www/routes.js

@@ -68,8 +68,11 @@ var routes = [
     },
     {
         path: '/upgrade',
-        url: './pages/upgrade.html',
+        templateUrl: './pages/upgrade.html',
-        name: 'upgrade'
+        name: 'upgrade',
+        options: {
+            context: SETTINGS.download_links
+        }
     },
     {
         path: '/connection',

www/settings.template.js

@@ -23,5 +23,16 @@ var SETTINGS = {
         4: {id: 4, name: "Wind", icon: "fas fa-wind", color: "lightblue", textcolor: "black", hue: 180},
         5: {id: 5, name: "Light", icon: "fas fa-sun", color: "yellow", textcolor: "black", hue: 60},
         6: {id: 6, name: "Dark", icon: "fas fa-moon", color: "deeppurple", textcolor: "white", hue: 265}
+    },
+    download_links: {
+        android: {
+            '<i class="fas fa-download"></i> F-Droid Repository': "https://repo.netsyms.com",
+            '<i class="fa fafab fa-android"></i> APK File': "https://repo.netsyms.com/fdroid/TerranQuest.apk",
+            '<i class="fa fafab fa-google-play"></i> Google Play': "https://play.google.com/store/apps/details?id=com.netsyms.terranquest.TerranQuest"
+        },
+        nwjs: {
+            '<i class="fa fafab fa-ubuntu"></i> Ubuntu/Debian': "https://repo.netsyms.com",
+            '<i class="fas fa-download"></i> Other Platforms': "https://build.netsyms.net/job/TerranQuest/"
+        }
     }
 };