Add page for the fe classes

mobile/www/js/feclass-stats.js

@@ -0,0 +1,51 @@
+/*
+File name : feclass-stats.js
+Description : Display the stats of a class with various graphs
+ */
+
+const GRAPH_CONTAINER_CLASS_GR_ID = "container-class-gr";
+let actualClassId;
+
+function displayClassGrowthRates() {
+    const classGrowthRates = feData.classGrowthRates.map(x => (x.idClass == actualClassId) ? x : null).filter((x) => x != null);
+    displayTableOfGrowthRates(classGrowthRates, displayGraphOfGrowthRatesForClass);
+}
+
+function displayGraphOfGrowthRatesForClass() {
+    if ($$("#btn-graph-column-chart").hasClass("button-active")) {
+        displayColumnChartOfClassGrowthRates();
+    } else {
+        displayPolarSpiderOfClassGrowthRates();
+    }
+}
+
+function displayColumnChartOfClassGrowthRates() {
+    const className = feData.classes.find(x => x.id == actualClassId).name;
+    const classGrowthRates = getClassGrowthRates(actualClassId);
+    const statsNames = feData.stats.map(x => x.name);
+    const statsValues = [];
+    const classData = {
+        name: className
+    };
+
+    classGrowthRates.forEach(gr => {
+        statsValues.push(gr.value);
+    });
+    classData.data = statsValues;
+
+    displayColumnChart(GRAPH_CONTAINER_CLASS_GR_ID, statsNames, [classData]);
+}
+
+function displayPolarSpiderOfClassGrowthRates() {
+    const classGrowthRates = getClassGrowthRates(actualClassId);
+    const statsNames = feData.stats.map(x => x.name);
+    const statsValues = classGrowthRates.map(x => x.value);
+
+    const classData = [{
+        name: feData.classes.find(x => x.id == actualClassId).name,
+        data: statsValues,
+    }];
+
+    displayPolarSpider(GRAPH_CONTAINER_CLASS_GR_ID, statsNames, classData);
+}
+

mobile/www/js/feclass.js

@@ -1,3 +1,10 @@
+/*
+File name : feclass.js
+Description : Methods related to the classes of characters
+ */
+
+const NB_STATS = 9;
+
 function getAvailableClassesForCharacter(char) {
     const availableClasses = [];
 
@@ -10,5 +17,40 @@ function getAvailableClassesForCharacter(char) {
             }
         }
     });
-    return availableClasses
+    return availableClasses;
+}
+
+function displayAllClasses() {
+    feData.classes.forEach(feClass => {
+        const tr = $$(`<tr></tr>`)
+        const td = $$(`<td id="feclass-${feClass.id}">${feClass.name}</td>`);
+        tr.append(td);
+        $$("#table-classes-content").append(tr);
+
+        td.on("click", (event) => {
+            const feclassId = event.target.id // Get the string who contains the id of the class
+                .match(/\d/g) // Extract all digits
+                .join(""); // Join the digits to get the id number
+
+            app.views.main.router.navigate("/class/" + feclassId);
+        });
+    });
+}
+
+function getClassGrowthRates(idClass) {
+    const classGrowthRates = [];
+    const partialClassGrowthRates = feData.classGrowthRates.map(x => (x.idClass == idClass) ? x : null).filter(x => x != null);
+
+    for (let i = 0; i < NB_STATS; i++) {
+        let gr = partialClassGrowthRates.find(x => (x.idStat == i + 1) ? x : null);
+        if (gr == null) {
+            gr = {
+                idClass: idClass,
+                idStat: i + 1,
+                value: 0,
+            }
+        }
+        classGrowthRates.push(gr);
+    }
+    return classGrowthRates;
 }

mobile/www/js/routes.js

@@ -9,8 +9,14 @@ routes = [
         }
     },
     {
+        name: 'classes',
         path: '/classes/',
         templateUrl: './pages/classes.html',
+        on: {
+            pageAfterIn: () => {
+                displayAllClasses();
+            }
+        }
     },
     {
         name: 'stat',
@@ -28,10 +34,28 @@ routes = [
                     $$("#picture-char").attr("src", "img/characters/" + char.firstName + ".png");
                     actualCharId = charId;
                     createTableOfStats();
-                    createListOfAvailableClasses()
-                    displayTableOfGrowthRates();
+                    createListOfAvailableClasses();
+                    displayCharGrowthRates();
                 }
-                createEventForGraphSwitch(displayGraphOfGrowthRates);
+                createEventForGraphSwitch(displayGraphOfGrowthRatesForChar);
+            }
+        }
+    },
+    {
+        name: 'feclass',
+        path: '/class/:id',
+        templateUrl: './pages/feclass.html',
+        on: {
+            pageInit: (e, page) => {
+                const id = page.route.params.id;
+                if (id != null) {
+                    const feclass = feData.classes.find(x => x.id == id);
+                    $$("#title-char").text(feclass.name);
+                    actualClassId = id;
+                    createTableOfStats();
+                    displayClassGrowthRates();
+                }
+                createEventForGraphSwitch(displayGraphOfGrowthRatesForClass);
             }
         }
     },

mobile/www/js/stats.js

@@ -1,9 +1,9 @@
 /*
 File name : stats.js
-Description : Display the stats of a character and/or class with various graphs
+Description : Display the stats of a character with various graphs
  */
 
-const GRAPH_CONTAINER_GR_ID = "container-char-gr";
+const GRAPH_CONTAINER_CHAR_GR_ID = "container-char-gr";
 let actualCharId;
 
 function createTableOfStats() {
@@ -16,14 +16,18 @@ function createTableOfStats() {
     });
 }
 
-function displayTableOfGrowthRates() {
-    const charGrowthRates = feData.charGrowthRates.map(x => (x.idCharacter == actualCharId) ? x : null).filter((x) => x != null);
+function displayCharGrowthRates() {
+    const charGrowthRates = feData.charGrowthRates.map(x => (x.idCharacter == actualCharId) ? x : null).filter(x => x != null);
+    displayTableOfGrowthRates(charGrowthRates, displayGraphOfGrowthRatesForChar);
+}
 
-    charGrowthRates.forEach(gr => {
+
+function displayTableOfGrowthRates(growthRates, callback) {
+    growthRates.forEach(gr => {
         $$("#stat-" + gr.idStat).text(gr.value);
     });
-
-    displayGraphOfGrowthRates();
+    $$("td:empty").text(0);
+    callback();
 }
 
 function createListOfAvailableClasses() {
@@ -48,43 +52,30 @@ function createListOfAvailableClasses() {
 
     select.on("change", (e) => {
         char.idClassSelected = Number($$(e.target).val());
-        displayGraphOfGrowthRates();
+        displayGraphOfGrowthRatesForChar();
     });
 }
 
-function displayGraphOfGrowthRates() {
+function displayGraphOfGrowthRatesForChar() {
     if ($$("#btn-graph-column-chart").hasClass("button-active")) {
-        displayColumnChartOfGrowthRates(actualCharId);
+        displayColumnChartOfCharGrowthRates();
     } else {
-        displayPolarSpiderOfGrowthRates(actualCharId);
+        displayPolarSpiderOfCharGrowthRates();
     }
 }
 
-function displayColumnChartOfGrowthRates(charId) {
-    const charFirstName = feData.characters.find(x => x.id == charId).firstName;
-    const charGrowthRates = feData.charGrowthRates.map(x => (x.idCharacter == charId) ? x : null).filter((x) => x != null);
+function displayColumnChartOfCharGrowthRates() {
+    const char = feData.characters.find(x => x.id == actualCharId);
     const statsNames = feData.stats.map(x => x.name);
-    const statsValues = [];
-    const charData = {
-        name: charFirstName,
-    };
+    const charData = [computeCharacterGrowthRatesWithClass(char)]; // The data must be an array
 
-    charGrowthRates.forEach(gr => {
-        statsValues.push(gr.value);
-    });
-    charData.data = statsValues;
-
-    displayColumnChart(GRAPH_CONTAINER_GR_ID, statsNames, [charData]); // The data must be an array
+    displayColumnChart(GRAPH_CONTAINER_CHAR_GR_ID, statsNames, charData);
 }
 
-function displayPolarSpiderOfGrowthRates(charId) {
-    const charGrowthRates = feData.charGrowthRates.map(x => (x.idCharacter == charId) ? x : null).filter((x) => x != null);
+function displayPolarSpiderOfCharGrowthRates() {
+    const char = feData.characters.find(x => x.id == actualCharId);
     const statsNames = feData.stats.map(x => x.name);
-    const statsValues = charGrowthRates.map(x => x.value);
-    const charData = [{
-        name: feData.characters.find(x => x.id == charId).firstName,
-        data: statsValues,
-    }];
+    const charData = [computeCharacterGrowthRatesWithClass(char)]; // The data must be an array
 
-    displayPolarSpider(GRAPH_CONTAINER_GR_ID, statsNames, charData);
+    displayPolarSpider(GRAPH_CONTAINER_CHAR_GR_ID, statsNames, charData);
 }