dario.genga/FE_Charts
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add page for the fe classes

Browse Source
This commit is contained in:
dario-cfpt
2020-02-25 08:26:30 +01:00
parent fa173d1f19
commit d2fa8edb74
9 changed files with 211 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
mobile/www/css/index.css
View File

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

1
mobile/www/index.html
View File

@ -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>

51
mobile/www/js/feclass-stats.js Normal file
View File

@ -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);
}

44
mobile/www/js/feclass.js
View File

@ -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;
}

30
mobile/www/js/routes.js
View File

@ -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);
}
}
},

55
mobile/www/js/stats.js
View File

@ -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);
}

13
mobile/www/pages/classes.html
View File

@ -12,8 +12,17 @@
</div>
</div>
<div class="page-content">
<div class="block block-strong">
<p>Classes page</p>
<div class="card data-table data-table-collapsible data-table-init">
<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>

48
mobile/www/pages/feclass.html Normal file
View File

@ -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>

2
mobile/www/pages/stat.html
View File

@ -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...">