add 'Todays stats' section to extendedTribeProfile

This commit is contained in:
Dawid Wysokiński 2020-07-17 14:16:07 +02:00
parent 1a6e1b8220
commit 67e298ad62
6 changed files with 273 additions and 153 deletions

View File

@ -352,7 +352,52 @@ var _default = function _default() {
};
exports.default = _default;
},{}],"fCHX":[function(require,module,exports) {
},{}],"yQib":[function(require,module,exports) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _default = v => v === undefined || v === null;
exports.default = _default;
},{}],"dPMc":[function(require,module,exports) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _isNil = _interopRequireDefault(require("./isNil"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
const getTodaysStatsTdStyle = value => {
const statIncreaseStyle = 'color: #000; background-color: #0f0';
const statDecreaseStyle = 'color: #000; background-color: #f00';
const defaultStyle = 'color: #000; background-color: #808080';
return value > 0 ? statIncreaseStyle : value < 0 ? statDecreaseStyle : defaultStyle;
};
var _default = (container, stats) => {
let todaysStats = container.querySelector('#todaysStats');
if (!todaysStats) {
todaysStats = document.createElement('div');
todaysStats.id = 'todaysStats';
todaysStats.width = '100%';
container.prepend(todaysStats);
}
const renderODS = !(0, _isNil.default)(stats.rankSup);
todaysStats.innerHTML = "\n <table width=\"100%\" class=\"vis\">\n <tbody>\n <tr>\n <th colspan=\"2\">\n Today's stats\n </th>\n </tr>\n <tr>\n <td>\n Points:\n </td>\n <td style=\"".concat(getTodaysStatsTdStyle(stats.points), "\">\n ").concat(Math.abs(stats.points).toLocaleString(), "\n </td>\n </tr>\n <tr>\n <td>\n Rank:\n </td>\n <td style=\"").concat(getTodaysStatsTdStyle(stats.rank), "\">\n ").concat(Math.abs(stats.rank), "\n </td>\n </tr>\n <tr>\n <td>\n Villages:\n </td>\n <td style=\"").concat(getTodaysStatsTdStyle(stats.villages), "\">\n ").concat(Math.abs(stats.villages).toLocaleString(), "\n </td>\n </tr>\n <tr>\n <td>\n ODA:\n </td>\n <td style=\"").concat(getTodaysStatsTdStyle(stats.scoreAtt), "\">\n ").concat(Math.abs(stats.scoreAtt).toLocaleString(), "\n </td>\n </tr>\n <tr>\n <td>\n ODA Rank:\n </td>\n <td style=\"").concat(getTodaysStatsTdStyle(stats.rankAtt), "\">\n ").concat(Math.abs(stats.rankAtt), "\n </td>\n </tr>\n <tr>\n <td>\n ODD:\n </td>\n <td style=\"").concat(getTodaysStatsTdStyle(stats.scoreDef), "\">\n ").concat(Math.abs(stats.scoreDef).toLocaleString(), "\n </td>\n </tr>\n <tr>\n <td>\n ODD Rank:\n </td>\n <td style=\"").concat(getTodaysStatsTdStyle(stats.rankDef), "\">\n ").concat(Math.abs(stats.rankDef), "\n </td>\n </tr>\n ").concat(renderODS ? "<tr>\n <td>\n ODS:\n </td>\n <td style=\"".concat(getTodaysStatsTdStyle(stats.scoreSup), "\">\n ").concat(Math.abs(stats.scoreSup).toLocaleString(), "\n </td>\n </tr>\n <tr>\n <td>\n ODS Rank:\n </td>\n <td style=\"").concat(getTodaysStatsTdStyle(stats.rankSup), "\">\n ").concat(Math.abs(stats.rankSup), "\n </td>\n </tr>") : '', "\n <tr>\n <td>\n OD:\n </td>\n <td style=\"").concat(getTodaysStatsTdStyle(stats.scoreTotal), "\">\n ").concat(Math.abs(stats.scoreTotal).toLocaleString(), "\n </td>\n </tr>\n <tr>\n <td>\n OD Rank:\n </td>\n <td style=\"").concat(getTodaysStatsTdStyle(stats.rankTotal), "\">\n ").concat(Math.abs(stats.rankTotal), "\n </td>\n </tr>\n </tbody>\n </table>\n ");
};
exports.default = _default;
},{"./isNil":"yQib"}],"fCHX":[function(require,module,exports) {
"use strict";
Object.defineProperty(exports, "__esModule", {
@ -716,6 +761,8 @@ var _subDays = _interopRequireDefault(require("date-fns/subDays"));
var _requestCreator = _interopRequireDefault(require("./libs/requestCreator"));
var _renderTodaysStats = _interopRequireDefault(require("./utils/renderTodaysStats"));
var _pagination = require("./utils/pagination");
var _getIDFromURL = _interopRequireDefault(require("./utils/getIDFromURL"));
@ -889,26 +936,6 @@ const renderPlayerOtherNames = player => {
}).join(''), "\n </tbody>\n </table>\n ");
};
const getTodaysStatsTdStyle = value => {
const statIncreaseStyle = 'color: #000; background-color: #0f0';
const statDecreaseStyle = 'color: #000; background-color: #f00';
const defaultStyle = 'color: #000; background-color: #808080';
return value > 0 ? statIncreaseStyle : value < 0 ? statDecreaseStyle : defaultStyle;
};
const renderTodaysStats = stats => {
let todaysStats = document.querySelector('#todaysStats');
if (!todaysStats) {
todaysStats = document.createElement('div');
todaysStats.id = 'todaysStats';
todaysStats.width = '100%';
otherElementsContainer.prepend(todaysStats);
}
todaysStats.innerHTML = "\n <table width=\"100%\" class=\"vis\">\n <tbody>\n <tr>\n <th colspan=\"2\">\n Today's stats\n </th>\n </tr>\n <tr>\n <td>\n Points:\n </td>\n <td style=\"".concat(getTodaysStatsTdStyle(stats.points), "\">\n ").concat(Math.abs(stats.points).toLocaleString(), "\n </td>\n </tr>\n <tr>\n <td>\n Rank:\n </td>\n <td style=\"").concat(getTodaysStatsTdStyle(stats.rank), "\">\n ").concat(Math.abs(stats.rank), "\n </td>\n </tr>\n <tr>\n <td>\n Villages:\n </td>\n <td style=\"").concat(getTodaysStatsTdStyle(stats.villages), "\">\n ").concat(Math.abs(stats.villages).toLocaleString(), "\n </td>\n </tr>\n <tr>\n <td>\n ODA:\n </td>\n <td style=\"").concat(getTodaysStatsTdStyle(stats.scoreAtt), "\">\n ").concat(Math.abs(stats.scoreAtt).toLocaleString(), "\n </td>\n </tr>\n <tr>\n <td>\n ODA Rank:\n </td>\n <td style=\"").concat(getTodaysStatsTdStyle(stats.rankAtt), "\">\n ").concat(Math.abs(stats.rankAtt), "\n </td>\n </tr>\n <tr>\n <td>\n ODD:\n </td>\n <td style=\"").concat(getTodaysStatsTdStyle(stats.scoreDef), "\">\n ").concat(Math.abs(stats.scoreDef).toLocaleString(), "\n </td>\n </tr>\n <tr>\n <td>\n ODD Rank:\n </td>\n <td style=\"").concat(getTodaysStatsTdStyle(stats.rankDef), "\">\n ").concat(Math.abs(stats.rankDef), "\n </td>\n </tr>\n <tr>\n <td>\n ODS:\n </td>\n <td style=\"").concat(getTodaysStatsTdStyle(stats.scoreSup), "\">\n ").concat(Math.abs(stats.scoreSup).toLocaleString(), "\n </td>\n </tr>\n <tr>\n <td>\n ODS Rank:\n </td>\n <td style=\"").concat(getTodaysStatsTdStyle(stats.rankSup), "\">\n ").concat(Math.abs(stats.rankSup), "\n </td>\n </tr>\n <tr>\n <td>\n OD:\n </td>\n <td style=\"").concat(getTodaysStatsTdStyle(stats.scoreTotal), "\">\n ").concat(Math.abs(stats.scoreTotal).toLocaleString(), "\n </td>\n </tr>\n <tr>\n <td>\n OD Rank:\n </td>\n <td style=\"").concat(getTodaysStatsTdStyle(stats.rankTotal), "\">\n ").concat(Math.abs(stats.rankTotal), "\n </td>\n </tr>\n </tbody>\n </table>\n ");
};
const renderInADayRanks = player => {
let inADayRanks = document.querySelector('#inADayRanks');
@ -953,7 +980,7 @@ const render = (_ref2) => {
renderInADayRanks(player);
if (dailyPlayerStats && dailyPlayerStats.items.length > 0) {
renderTodaysStats(dailyPlayerStats.items[0]);
(0, _renderTodaysStats.default)(otherElementsContainer, dailyPlayerStats.items[0]);
}
if (player.nameChanges.length > 0) {
@ -1214,4 +1241,4 @@ const renderActions = () => {
console.log('extended player profile', error);
}
})();
},{"date-fns/subDays":"mRRL","./libs/requestCreator":"Ph2E","./utils/pagination":"fCHX","./utils/getIDFromURL":"tQUs","./utils/getCurrentServer":"DMkL","./utils/formatDate":"V6Mf","./utils/renderPopup":"P4rL","./utils/twstats":"Syko","./utils/tribalwars":"fHHP","./utils/localStorage":"KWxH"}]},{},["yRop"], null)
},{"date-fns/subDays":"mRRL","./libs/requestCreator":"Ph2E","./utils/renderTodaysStats":"dPMc","./utils/pagination":"fCHX","./utils/getIDFromURL":"tQUs","./utils/getCurrentServer":"DMkL","./utils/formatDate":"V6Mf","./utils/renderPopup":"P4rL","./utils/twstats":"Syko","./utils/tribalwars":"fHHP","./utils/localStorage":"KWxH"}]},{},["yRop"], null)

View File

@ -158,7 +158,52 @@ var _default = function _default() {
};
exports.default = _default;
},{}],"tQUs":[function(require,module,exports) {
},{}],"yQib":[function(require,module,exports) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _default = v => v === undefined || v === null;
exports.default = _default;
},{}],"dPMc":[function(require,module,exports) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _isNil = _interopRequireDefault(require("./isNil"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
const getTodaysStatsTdStyle = value => {
const statIncreaseStyle = 'color: #000; background-color: #0f0';
const statDecreaseStyle = 'color: #000; background-color: #f00';
const defaultStyle = 'color: #000; background-color: #808080';
return value > 0 ? statIncreaseStyle : value < 0 ? statDecreaseStyle : defaultStyle;
};
var _default = (container, stats) => {
let todaysStats = container.querySelector('#todaysStats');
if (!todaysStats) {
todaysStats = document.createElement('div');
todaysStats.id = 'todaysStats';
todaysStats.width = '100%';
container.prepend(todaysStats);
}
const renderODS = !(0, _isNil.default)(stats.rankSup);
todaysStats.innerHTML = "\n <table width=\"100%\" class=\"vis\">\n <tbody>\n <tr>\n <th colspan=\"2\">\n Today's stats\n </th>\n </tr>\n <tr>\n <td>\n Points:\n </td>\n <td style=\"".concat(getTodaysStatsTdStyle(stats.points), "\">\n ").concat(Math.abs(stats.points).toLocaleString(), "\n </td>\n </tr>\n <tr>\n <td>\n Rank:\n </td>\n <td style=\"").concat(getTodaysStatsTdStyle(stats.rank), "\">\n ").concat(Math.abs(stats.rank), "\n </td>\n </tr>\n <tr>\n <td>\n Villages:\n </td>\n <td style=\"").concat(getTodaysStatsTdStyle(stats.villages), "\">\n ").concat(Math.abs(stats.villages).toLocaleString(), "\n </td>\n </tr>\n <tr>\n <td>\n ODA:\n </td>\n <td style=\"").concat(getTodaysStatsTdStyle(stats.scoreAtt), "\">\n ").concat(Math.abs(stats.scoreAtt).toLocaleString(), "\n </td>\n </tr>\n <tr>\n <td>\n ODA Rank:\n </td>\n <td style=\"").concat(getTodaysStatsTdStyle(stats.rankAtt), "\">\n ").concat(Math.abs(stats.rankAtt), "\n </td>\n </tr>\n <tr>\n <td>\n ODD:\n </td>\n <td style=\"").concat(getTodaysStatsTdStyle(stats.scoreDef), "\">\n ").concat(Math.abs(stats.scoreDef).toLocaleString(), "\n </td>\n </tr>\n <tr>\n <td>\n ODD Rank:\n </td>\n <td style=\"").concat(getTodaysStatsTdStyle(stats.rankDef), "\">\n ").concat(Math.abs(stats.rankDef), "\n </td>\n </tr>\n ").concat(renderODS ? "<tr>\n <td>\n ODS:\n </td>\n <td style=\"".concat(getTodaysStatsTdStyle(stats.scoreSup), "\">\n ").concat(Math.abs(stats.scoreSup).toLocaleString(), "\n </td>\n </tr>\n <tr>\n <td>\n ODS Rank:\n </td>\n <td style=\"").concat(getTodaysStatsTdStyle(stats.rankSup), "\">\n ").concat(Math.abs(stats.rankSup), "\n </td>\n </tr>") : '', "\n <tr>\n <td>\n OD:\n </td>\n <td style=\"").concat(getTodaysStatsTdStyle(stats.scoreTotal), "\">\n ").concat(Math.abs(stats.scoreTotal).toLocaleString(), "\n </td>\n </tr>\n <tr>\n <td>\n OD Rank:\n </td>\n <td style=\"").concat(getTodaysStatsTdStyle(stats.rankTotal), "\">\n ").concat(Math.abs(stats.rankTotal), "\n </td>\n </tr>\n </tbody>\n </table>\n ");
};
exports.default = _default;
},{"./isNil":"yQib"}],"tQUs":[function(require,module,exports) {
"use strict";
Object.defineProperty(exports, "__esModule", {
@ -231,6 +276,8 @@ exports.default = _default;
var _requestCreator = _interopRequireDefault(require("./libs/requestCreator"));
var _renderTodaysStats = _interopRequireDefault(require("./utils/renderTodaysStats"));
var _getIDFromURL = _interopRequireDefault(require("./utils/getIDFromURL"));
var _getCurrentServer = _interopRequireDefault(require("./utils/getCurrentServer"));
@ -256,8 +303,9 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
const SERVER = (0, _getCurrentServer.default)();
const TRIBE_ID = (0, _getIDFromURL.default)(window.location.search);
const LOCAL_STORAGE_KEY = 'kichiyaki_extended_tribe_profile' + TRIBE_ID;
const TRIBE_QUERY = "\n query tribe($server: String!, $id: Int!) {\n tribe(server: $server, id: $id) {\n id\n bestRank\n bestRankAt\n mostPoints\n mostPointsAt\n mostVillages\n mostVillagesAt\n createdAt\n dominance\n }\n }\n";
const TRIBE_QUERY = "\n query tribe($server: String!, $id: Int!, $dailyTribeStatsFilter: DailyTribeStatsFilter!) {\n tribe(server: $server, id: $id) {\n id\n bestRank\n bestRankAt\n mostPoints\n mostPointsAt\n mostVillages\n mostVillagesAt\n createdAt\n dominance\n }\n dailyTribeStats(server: $server, filter: $dailyTribeStatsFilter) {\n items {\n rank\n rankAtt\n rankDef\n rankTotal\n points\n scoreAtt\n scoreAtt\n scoreDef\n scoreTotal\n villages\n }\n }\n }\n";
const profileInfoTBody = document.querySelector('#content_value > table:nth-child(3) > tbody > tr > td:nth-child(1) > table > tbody');
const otherElementsContainer = document.querySelector('#content_value > table:nth-child(3) > tbody > tr > td:nth-child(2)');
const loadDataFromCache = () => {
return (0, _localStorage.getItem)(LOCAL_STORAGE_KEY);
@ -273,7 +321,12 @@ const loadData = async () => {
query: TRIBE_QUERY,
variables: {
server: SERVER,
id: TRIBE_ID
id: TRIBE_ID,
dailyTribeStatsFilter: {
sort: 'createDate DESC',
limit: 1,
tribeID: [TRIBE_ID]
}
}
});
cacheTribeData(data);
@ -302,7 +355,8 @@ const renderTr = (_ref) => {
const render = (_ref2) => {
let {
tribe
tribe,
dailyTribeStats
} = _ref2;
[{
title: 'Created at:',
@ -327,6 +381,10 @@ const render = (_ref2) => {
}].forEach(data => {
renderTr(data);
});
if (dailyTribeStats && dailyTribeStats.items.length > 0) {
(0, _renderTodaysStats.default)(otherElementsContainer, dailyTribeStats.items[0]);
}
};
(async function () {
@ -346,4 +404,4 @@ const render = (_ref2) => {
console.log('extended tribe profile', error);
}
})();
},{"./libs/requestCreator":"Ph2E","./utils/getIDFromURL":"tQUs","./utils/getCurrentServer":"DMkL","./utils/localStorage":"KWxH","./utils/formatDate":"V6Mf"}]},{},["r4nF"], null)
},{"./libs/requestCreator":"Ph2E","./utils/renderTodaysStats":"dPMc","./utils/getIDFromURL":"tQUs","./utils/getCurrentServer":"DMkL","./utils/localStorage":"KWxH","./utils/formatDate":"V6Mf"}]},{},["r4nF"], null)

View File

@ -1,5 +1,6 @@
import subDays from 'date-fns/subDays';
import requestCreator from './libs/requestCreator';
import renderTodaysStats from './utils/renderTodaysStats';
import { generatePaginationItems, setPage, getPage } from './utils/pagination';
import getIDFromURL from './utils/getIDFromURL';
import getCurrentServer from './utils/getCurrentServer';
@ -334,128 +335,6 @@ const renderPlayerOtherNames = (player) => {
`;
};
const getTodaysStatsTdStyle = (value) => {
const statIncreaseStyle = 'color: #000; background-color: #0f0';
const statDecreaseStyle = 'color: #000; background-color: #f00';
const defaultStyle = 'color: #000; background-color: #808080';
return value > 0
? statIncreaseStyle
: value < 0
? statDecreaseStyle
: defaultStyle;
};
const renderTodaysStats = (stats) => {
let todaysStats = document.querySelector('#todaysStats');
if (!todaysStats) {
todaysStats = document.createElement('div');
todaysStats.id = 'todaysStats';
todaysStats.width = '100%';
otherElementsContainer.prepend(todaysStats);
}
todaysStats.innerHTML = `
<table width="100%" class="vis">
<tbody>
<tr>
<th colspan="2">
Today's stats
</th>
</tr>
<tr>
<td>
Points:
</td>
<td style="${getTodaysStatsTdStyle(stats.points)}">
${Math.abs(stats.points).toLocaleString()}
</td>
</tr>
<tr>
<td>
Rank:
</td>
<td style="${getTodaysStatsTdStyle(stats.rank)}">
${Math.abs(stats.rank)}
</td>
</tr>
<tr>
<td>
Villages:
</td>
<td style="${getTodaysStatsTdStyle(stats.villages)}">
${Math.abs(stats.villages).toLocaleString()}
</td>
</tr>
<tr>
<td>
ODA:
</td>
<td style="${getTodaysStatsTdStyle(stats.scoreAtt)}">
${Math.abs(stats.scoreAtt).toLocaleString()}
</td>
</tr>
<tr>
<td>
ODA Rank:
</td>
<td style="${getTodaysStatsTdStyle(stats.rankAtt)}">
${Math.abs(stats.rankAtt)}
</td>
</tr>
<tr>
<td>
ODD:
</td>
<td style="${getTodaysStatsTdStyle(stats.scoreDef)}">
${Math.abs(stats.scoreDef).toLocaleString()}
</td>
</tr>
<tr>
<td>
ODD Rank:
</td>
<td style="${getTodaysStatsTdStyle(stats.rankDef)}">
${Math.abs(stats.rankDef)}
</td>
</tr>
<tr>
<td>
ODS:
</td>
<td style="${getTodaysStatsTdStyle(stats.scoreSup)}">
${Math.abs(stats.scoreSup).toLocaleString()}
</td>
</tr>
<tr>
<td>
ODS Rank:
</td>
<td style="${getTodaysStatsTdStyle(stats.rankSup)}">
${Math.abs(stats.rankSup)}
</td>
</tr>
<tr>
<td>
OD:
</td>
<td style="${getTodaysStatsTdStyle(stats.scoreTotal)}">
${Math.abs(stats.scoreTotal).toLocaleString()}
</td>
</tr>
<tr>
<td>
OD Rank:
</td>
<td style="${getTodaysStatsTdStyle(stats.rankTotal)}">
${Math.abs(stats.rankTotal)}
</td>
</tr>
</tbody>
</table>
`;
};
const renderInADayRanks = (player) => {
let inADayRanks = document.querySelector('#inADayRanks');
if (!inADayRanks) {
@ -585,7 +464,7 @@ const render = ({ player, dailyPlayerStats }) => {
renderInADayRanks(player);
if (dailyPlayerStats && dailyPlayerStats.items.length > 0) {
renderTodaysStats(dailyPlayerStats.items[0]);
renderTodaysStats(otherElementsContainer, dailyPlayerStats.items[0]);
}
if (player.nameChanges.length > 0) {
renderPlayerOtherNames(player);

View File

@ -1,4 +1,5 @@
import requestCreator from './libs/requestCreator';
import renderTodaysStats from './utils/renderTodaysStats';
import getIDFromURL from './utils/getIDFromURL';
import getCurrentServer from './utils/getCurrentServer';
import { setItem, getItem } from './utils/localStorage';
@ -21,7 +22,7 @@ const SERVER = getCurrentServer();
const TRIBE_ID = getIDFromURL(window.location.search);
const LOCAL_STORAGE_KEY = 'kichiyaki_extended_tribe_profile' + TRIBE_ID;
const TRIBE_QUERY = `
query tribe($server: String!, $id: Int!) {
query tribe($server: String!, $id: Int!, $dailyTribeStatsFilter: DailyTribeStatsFilter!) {
tribe(server: $server, id: $id) {
id
bestRank
@ -33,11 +34,28 @@ const TRIBE_QUERY = `
createdAt
dominance
}
dailyTribeStats(server: $server, filter: $dailyTribeStatsFilter) {
items {
rank
rankAtt
rankDef
rankTotal
points
scoreAtt
scoreAtt
scoreDef
scoreTotal
villages
}
}
}
`;
const profileInfoTBody = document.querySelector(
'#content_value > table:nth-child(3) > tbody > tr > td:nth-child(1) > table > tbody'
);
const otherElementsContainer = document.querySelector(
'#content_value > table:nth-child(3) > tbody > tr > td:nth-child(2)'
);
const loadDataFromCache = () => {
return getItem(LOCAL_STORAGE_KEY);
@ -53,6 +71,11 @@ const loadData = async () => {
variables: {
server: SERVER,
id: TRIBE_ID,
dailyTribeStatsFilter: {
sort: 'createDate DESC',
limit: 1,
tribeID: [TRIBE_ID],
},
},
});
cacheTribeData(data);
@ -72,7 +95,7 @@ const renderTr = ({ title, data, id }) => {
tr.children[1].innerHTML = data;
};
const render = ({ tribe }) => {
const render = ({ tribe, dailyTribeStats }) => {
[
{
title: 'Created at:',
@ -105,6 +128,10 @@ const render = ({ tribe }) => {
].forEach((data) => {
renderTr(data);
});
if (dailyTribeStats && dailyTribeStats.items.length > 0) {
renderTodaysStats(otherElementsContainer, dailyTribeStats.items[0]);
}
};
(async function () {

1
src/utils/isNil.js Normal file
View File

@ -0,0 +1 @@
export default (v) => v === undefined || v === null;

View File

@ -0,0 +1,128 @@
import isNil from './isNil';
const getTodaysStatsTdStyle = (value) => {
const statIncreaseStyle = 'color: #000; background-color: #0f0';
const statDecreaseStyle = 'color: #000; background-color: #f00';
const defaultStyle = 'color: #000; background-color: #808080';
return value > 0
? statIncreaseStyle
: value < 0
? statDecreaseStyle
: defaultStyle;
};
export default (container, stats) => {
let todaysStats = container.querySelector('#todaysStats');
if (!todaysStats) {
todaysStats = document.createElement('div');
todaysStats.id = 'todaysStats';
todaysStats.width = '100%';
container.prepend(todaysStats);
}
const renderODS = !isNil(stats.rankSup);
todaysStats.innerHTML = `
<table width="100%" class="vis">
<tbody>
<tr>
<th colspan="2">
Today's stats
</th>
</tr>
<tr>
<td>
Points:
</td>
<td style="${getTodaysStatsTdStyle(stats.points)}">
${Math.abs(stats.points).toLocaleString()}
</td>
</tr>
<tr>
<td>
Rank:
</td>
<td style="${getTodaysStatsTdStyle(stats.rank)}">
${Math.abs(stats.rank)}
</td>
</tr>
<tr>
<td>
Villages:
</td>
<td style="${getTodaysStatsTdStyle(stats.villages)}">
${Math.abs(stats.villages).toLocaleString()}
</td>
</tr>
<tr>
<td>
ODA:
</td>
<td style="${getTodaysStatsTdStyle(stats.scoreAtt)}">
${Math.abs(stats.scoreAtt).toLocaleString()}
</td>
</tr>
<tr>
<td>
ODA Rank:
</td>
<td style="${getTodaysStatsTdStyle(stats.rankAtt)}">
${Math.abs(stats.rankAtt)}
</td>
</tr>
<tr>
<td>
ODD:
</td>
<td style="${getTodaysStatsTdStyle(stats.scoreDef)}">
${Math.abs(stats.scoreDef).toLocaleString()}
</td>
</tr>
<tr>
<td>
ODD Rank:
</td>
<td style="${getTodaysStatsTdStyle(stats.rankDef)}">
${Math.abs(stats.rankDef)}
</td>
</tr>
${
renderODS
? `<tr>
<td>
ODS:
</td>
<td style="${getTodaysStatsTdStyle(stats.scoreSup)}">
${Math.abs(stats.scoreSup).toLocaleString()}
</td>
</tr>
<tr>
<td>
ODS Rank:
</td>
<td style="${getTodaysStatsTdStyle(stats.rankSup)}">
${Math.abs(stats.rankSup)}
</td>
</tr>`
: ''
}
<tr>
<td>
OD:
</td>
<td style="${getTodaysStatsTdStyle(stats.scoreTotal)}">
${Math.abs(stats.scoreTotal).toLocaleString()}
</td>
</tr>
<tr>
<td>
OD Rank:
</td>
<td style="${getTodaysStatsTdStyle(stats.rankTotal)}">
${Math.abs(stats.rankTotal)}
</td>
</tr>
</tbody>
</table>
`;
};