Add page for the fe classes

mobile/www/css/index.css

@@ -2,3 +2,9 @@
     width: 256px;
     height: 256px;
 }
+
+#table-classes-content > tr > td {
+    text-align: center;
+    display: block !important;
+    padding-top: 1%;
+}

mobile/www/index.html

@@ -92,6 +92,7 @@
 <script src="js/graph.js"></script>
 <script src="js/feclass.js"></script>
 <script src="js/stats.js"></script>
+<script src="js/feclass-stats.js"></script>
 <script src="js/comparator.js"></script>
 <script src="js/index.js"></script>
 

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()
+                    createListOfAvailableClasses();
-                    displayTableOfGrowthRates();
+                    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() {
+function displayCharGrowthRates() {
-    const charGrowthRates = feData.charGrowthRates.map(x => (x.idCharacter == actualCharId) ? x : null).filter((x) => x != null);
+    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);
     });
-
+    $$("td:empty").text(0);
-    displayGraphOfGrowthRates();
+    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) {
+function displayColumnChartOfCharGrowthRates() {
-    const charFirstName = feData.characters.find(x => x.id == charId).firstName;
+    const char = feData.characters.find(x => x.id == actualCharId);
-    const charGrowthRates = feData.charGrowthRates.map(x => (x.idCharacter == charId) ? x : null).filter((x) => x != null);
     const statsNames = feData.stats.map(x => x.name);
-    const statsValues = [];
+    const charData = [computeCharacterGrowthRatesWithClass(char)]; // The data must be an array
-    const charData = {
-        name: charFirstName,
-    };
 
-    charGrowthRates.forEach(gr => {
+    displayColumnChart(GRAPH_CONTAINER_CHAR_GR_ID, statsNames, charData);
-        statsValues.push(gr.value);
-    });
-    charData.data = statsValues;
-
-    displayColumnChart(GRAPH_CONTAINER_GR_ID, statsNames, [charData]); // The data must be an array
 }
 
-function displayPolarSpiderOfGrowthRates(charId) {
+function displayPolarSpiderOfCharGrowthRates() {
-    const charGrowthRates = feData.charGrowthRates.map(x => (x.idCharacter == charId) ? x : null).filter((x) => x != null);
+    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 = [computeCharacterGrowthRatesWithClass(char)]; // The data must be an array
-    const charData = [{
-        name: feData.characters.find(x => x.id == charId).firstName,
-        data: statsValues,
-    }];
 
-    displayPolarSpider(GRAPH_CONTAINER_GR_ID, statsNames, charData);
+    displayPolarSpider(GRAPH_CONTAINER_CHAR_GR_ID, statsNames, charData);
 }

mobile/www/pages/classes.html

@@ -12,8 +12,17 @@
             </div>
         </div>
         <div class="page-content">
-            <div class="block block-strong">
+            <div class="card data-table data-table-collapsible data-table-init">
-                <p>Classes page</p>
+                <div class="data-table-title">Classes</div>
+                <table id="table-classes">
+                    <thead>
+                    <tr id="table-classes-header">
+                        <th>Name</th>
+                    </tr>
+                    </thead>
+                    <tbody id="table-classes-content">
+                    </tbody>
+                </table>
             </div>
         </div>
     </div>

mobile/www/pages/feclass.html

@@ -0,0 +1,48 @@
+<div class="page page-feclass">
+    <div class="navbar">
+        <div class="navbar-inner">
+            <div class="left">
+                <a href="#" class="link back">
+                    <i class="icon icon-back"></i>
+                    <span class="if-not-md">Back</span>
+                </a>
+            </div>
+            <div id="title-char" class="title sliding">Fire Emblem Charts</div>
+        </div>
+    </div>
+    <div class="page-content">
+        <div class="card data-table data-table-collapsible data-table-init">
+            <div class="data-table-title">Growth rates :</div>
+            <table id="table-growth-rates">
+                <thead>
+                <tr id="table-gr-header">
+                </tr>
+                </thead>
+                <tbody>
+                <tr id="table-gr-content">
+                </tr>
+                </tbody>
+            </table>
+        </div>
+        <div>
+            <div class="list no-hairlines-md">
+                <ul>
+                    <li class="item-content item-input">
+                        <div class="item-media">
+                            <i class="icon demo-list-icon"></i>
+                        </div>
+                    </li>
+                </ul>
+                <figure class="highcharts-figure">
+                    <div id="container-class-gr"></div>
+                </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>
+                    </p>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>

mobile/www/pages/stat.html

@@ -32,7 +32,7 @@
                         <div class="item-media">
                             <i class="icon demo-list-icon"></i>
                         </div>
-                        <div class="item-inner">
+                        <div id="item-select-classes" class="item-inner">
                             <div class="item-title item-label">Class</div>
                             <div class="item-input-wrap input-dropdown-wrap">
                                 <select id="select-classes" placeholder="Please choose...">