Add image of character in the comparator list

Changed the colors of the network graph to match the color of the
differents houses (the color will probably be in the database in the
future).

Reactivate the panel swipe (there are still some problems but it's
better to keep the swipe for the user).

Added various comments and fixed the missing logo in the about page when
using the phone app.

mobile/www/css/index.css

@@ -35,4 +35,14 @@
 h1.about, h2.about, h3.about {
     color: #1f3487;
     margin-top: 0px;
+}
+
+.item-media > img {
+    width: 32px;
+    height: 32px;
+    margin-left: -20px;
+}
+
+.item-checkbox > .item-inner {
+    margin-left: -10px !important;
 }

mobile/www/js/app.js

@@ -16,9 +16,9 @@ var app = new Framework7({
     // App routes
     routes: routes,
 
-    // panel: {
-    //     swipe: "left"
-    // }
+    panel: {
+        swipe: "left"
+    }
 });
 
 // Init/Create main view

mobile/www/js/comparator.js

@@ -18,8 +18,9 @@ function configureSmartSelectOfCharacters() {
         const optgroup = "<optgroup id='optgroup-house-" + house.id + "' label='" + house.name + "'>";
         $$("#select-compare").append(optgroup);
     });
+
     characters.forEach(char => {
-        const option = "<option id='" + char.id + "'>" + char.firstName + "</option>";
+        const option = "<option id='" + char.id + "' data-option-image='" + "img/characters/" + char.firstName + ".png" + "'>" + char.firstName + "</option>";
         $$("#optgroup-house-" + char.idHouse).append(option);
     });
 

mobile/www/js/database.js

@@ -7,6 +7,8 @@ const BASE_URL = "http://localhost/";
 let feData = JSON.parse(localStorage.getItem("feData"));
 
 function isOnline() {
+    // Check that navigator.connection is not undefined to avoid error
+    // Necessary when the app run on the browser
     const networkState = (navigator.connection) ? navigator.connection.type : null;
 
     if (networkState != null && networkState != "none") {

mobile/www/js/feclass.js

@@ -44,6 +44,7 @@ function getClassGrowthRates(idClass) {
     for (let i = 0; i < NB_STATS; i++) {
         let gr = partialClassGrowthRates.find(x => (x.idStat == i + 1) ? x : null);
         if (gr == null) {
+            // Create a default growth rate to avoid missing stats
             gr = {
                 idClass: idClass,
                 idStat: i + 1,

mobile/www/js/index.js

@@ -4,6 +4,8 @@ Description : Display the content of the home page
  */
 
 const PRIMARY_NODE_NAME = "Fire Emblem Three House";
+// TODO: use color from database
+const DEFAUT_COLORS = ["#434348", "#de736d", "#1f3487", "#dfbe4a", "#9be7c0", "#afaad2"];
 
 function displayCharacters() {
     const housesWithCharacters = [];
@@ -24,7 +26,7 @@ function displayCharacters() {
         Highcharts.Series,
         'afterSetOptions',
         function (e) {
-            var colors = Highcharts.getOptions().colors,
+            var colors = DEFAUT_COLORS,
                 i = 0,
                 nodes = {};
 
@@ -85,6 +87,7 @@ function displayCharacters() {
             data: housesWithCharacters,
             events: {
                 click: function (event) {
+                    // Show the stat page of the character when clicking the node
                     const charFirstName = event.point.name;
                     const char = characters.find(x => x.firstName == charFirstName);
                     if (char != null) {

mobile/www/js/stats.js

@@ -32,8 +32,8 @@ function displayTableOfGrowthRates(growthRates, callback) {
 }
 
 function createListOfAvailableClasses() {
-    const char = feData.characters.find(x => x.id == actualCharId);
     // Get all available classes for the character
+    const char = feData.characters.find(x => x.id == actualCharId);
     const availableClasses = getAvailableClassesForCharacter(char);
 
     // Create the select of available classes

mobile/www/pages/about.html

@@ -14,7 +14,7 @@
         <div class="page-content">
             <div class="block block-strong text-center">
                 <section>
-                    <img class="logo" src="/img/logo.png">
+                    <img class="logo" src="img/logo.png">
                     <h1 class="about">Fire Emblem Charts</h1>
                 </section>
                 <section>

mobile/www/pages/feclass.html

@@ -18,8 +18,8 @@
                 </figure>
                 <div class="block">
                     <p class="segmented segmented-raised segmented-round">
-                        <button id="btn-graph-spider-web" class="button button-round button-active">Spider web</button>
-                        <button id="btn-graph-column-chart" class="button button-round">Column chart</button>
+                        <button id="btn-graph-spider-web" class="button button-round">Spider web</button>
+                        <button id="btn-graph-column-chart" class="button button-round button-active">Column chart</button>
                     </p>
                 </div>
             </div>