add today's stats section to extendedPlayerProfile section
This commit is contained in:
parent
a40c88ccac
commit
bd67c2b503
61
dist/extendedPlayerProfile.js
vendored
61
dist/extendedPlayerProfile.js
vendored
|
@ -342,11 +342,11 @@ if (isNaN(PLAYER_ID) || !PLAYER_ID) {
|
||||||
}
|
}
|
||||||
|
|
||||||
const LOCAL_STORAGE_KEY = 'kichiyaki_extended_player_profile' + PLAYER_ID;
|
const LOCAL_STORAGE_KEY = 'kichiyaki_extended_player_profile' + PLAYER_ID;
|
||||||
const PLAYER_QUERY = "\n query player($server: String!, $id: Int!) {\n player(server: $server, id: $id) {\n id\n name\n servers\n joinedAt\n nameChanges {\n oldName\n newName\n changeDate\n }\n dailyGrowth\n }\n }\n";
|
const query = "\n query pageData($server: String!, $id: Int!, $filter: DailyPlayerStatsFilter) {\n player(server: $server, id: $id) {\n id\n name\n servers\n joinedAt\n nameChanges {\n oldName\n newName\n changeDate\n }\n dailyGrowth\n }\n dailyPlayerStats(server: $server, filter: $filter) {\n items {\n rank\n rankAtt\n rankDef\n rankSup\n rankTotal\n points\n scoreAtt\n scoreAtt\n scoreDef\n scoreSup\n scoreTotal\n villages\n }\n }\n }\n";
|
||||||
const profileInfoTBody = document.querySelector('#player_info > tbody');
|
const profileInfoTBody = document.querySelector('#player_info > tbody');
|
||||||
const otherElementsContainer = document.querySelector(PLAYER_ID === CURRENT_PLAYER_ID ? '#content_value > table:nth-child(7) > tbody > tr > td:nth-child(2)' : '#content_value > table > tbody > tr > td:nth-child(2)');
|
const otherElementsContainer = document.querySelector(PLAYER_ID === CURRENT_PLAYER_ID ? '#content_value > table:nth-child(7) > tbody > tr > td:nth-child(2)' : '#content_value > table > tbody > tr > td:nth-child(2)');
|
||||||
|
|
||||||
const loadPlayerDataFromCache = () => {
|
const loadDataFromCache = () => {
|
||||||
return (0, _localStorage.getItem)(LOCAL_STORAGE_KEY);
|
return (0, _localStorage.getItem)(LOCAL_STORAGE_KEY);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -374,7 +374,6 @@ const loadInADayRankAndScore = async (name, playerID, type) => {
|
||||||
|
|
||||||
return res[0];
|
return res[0];
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.log(error);
|
|
||||||
return {
|
return {
|
||||||
rank: 0,
|
rank: 0,
|
||||||
playerID: 0,
|
playerID: 0,
|
||||||
|
@ -385,12 +384,17 @@ const loadInADayRankAndScore = async (name, playerID, type) => {
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const loadPlayerData = async () => {
|
const loadData = async () => {
|
||||||
const data = await (0, _requestCreator.default)({
|
const data = await (0, _requestCreator.default)({
|
||||||
query: PLAYER_QUERY,
|
query,
|
||||||
variables: {
|
variables: {
|
||||||
server: SERVER,
|
server: SERVER,
|
||||||
id: PLAYER_ID
|
id: PLAYER_ID,
|
||||||
|
filter: {
|
||||||
|
sort: 'createDate DESC',
|
||||||
|
limit: 1,
|
||||||
|
playerID: [PLAYER_ID]
|
||||||
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
@ -442,7 +446,7 @@ const renderPlayerServers = player => {
|
||||||
otherElementsContainer.prepend(playerServers);
|
otherElementsContainer.prepend(playerServers);
|
||||||
}
|
}
|
||||||
|
|
||||||
playerServers.querySelector('td').innerHTML = player.servers.map(server => "<a style=\"margin-right: 5px\" href=\"".concat((0, _twstats.formatPlayerURL)(server, player.id), "\">").concat(server, "</a>")).join('');
|
playerServers.querySelector('td').innerHTML = player.servers.sort().map(server => "<a style=\"margin-right: 5px\" href=\"".concat((0, _twstats.formatPlayerURL)(server, player.id), "\">").concat(server, "</a>")).join('');
|
||||||
};
|
};
|
||||||
|
|
||||||
const renderPlayerOtherNames = player => {
|
const renderPlayerOtherNames = player => {
|
||||||
|
@ -464,7 +468,26 @@ const renderPlayerOtherNames = player => {
|
||||||
}).join(''), "\n </tbody>\n </table>\n ");
|
}).join(''), "\n </tbody>\n </table>\n ");
|
||||||
};
|
};
|
||||||
|
|
||||||
const render = player => {
|
const renderTodaysStats = stats => {
|
||||||
|
let todaysStats = document.querySelector('#todaysStats');
|
||||||
|
|
||||||
|
if (!todaysStats) {
|
||||||
|
todaysStats = document.createElement('div');
|
||||||
|
todaysStats.id = 'todaysStats';
|
||||||
|
todaysStats.width = '100%';
|
||||||
|
otherElementsContainer.prepend(todaysStats);
|
||||||
|
}
|
||||||
|
|
||||||
|
const statIncreaseStyle = 'color: #000; background-color: #0f0';
|
||||||
|
const statDecreaseStyle = 'color: #000; background-color: #f00';
|
||||||
|
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(stats.points > 0 ? statIncreaseStyle : statDecreaseStyle, "\">\n ").concat(Math.abs(stats.points).toLocaleString(), "\n </td>\n </tr>\n <tr>\n <td>\n Rank\n </td>\n <td style=\"").concat(stats.rank > 0 ? statIncreaseStyle : statDecreaseStyle, "\">\n ").concat(Math.abs(stats.rank), "\n </td>\n </tr>\n <tr>\n <td>\n Villages\n </td>\n <td style=\"").concat(stats.villages > 0 ? statIncreaseStyle : statDecreaseStyle, "\">\n ").concat(Math.abs(stats.villages).toLocaleString(), "\n </td>\n </tr>\n <tr>\n <td>\n Score att\n </td>\n <td style=\"").concat(stats.scoreAtt > 0 ? statIncreaseStyle : statDecreaseStyle, "\">\n ").concat(Math.abs(stats.scoreAtt).toLocaleString(), "\n </td>\n </tr>\n <tr>\n <td>\n Rank (ODA)\n </td>\n <td style=\"").concat(stats.rankAtt > 0 ? statIncreaseStyle : statDecreaseStyle, "\">\n ").concat(Math.abs(stats.rankAtt), "\n </td>\n </tr>\n <tr>\n <td>\n Score def\n </td>\n <td style=\"").concat(stats.scoreDef > 0 ? statIncreaseStyle : statDecreaseStyle, "\">\n ").concat(Math.abs(stats.scoreDef).toLocaleString(), "\n </td>\n </tr>\n <tr>\n <td>\n Rank (ODD)\n </td>\n <td style=\"").concat(stats.rankDef > 0 ? statIncreaseStyle : statDecreaseStyle, "\">\n ").concat(Math.abs(stats.rankDef), "\n </td>\n </tr>\n <tr>\n <td>\n Score sup\n </td>\n <td style=\"").concat(stats.scoreSup > 0 ? statIncreaseStyle : statDecreaseStyle, "\">\n ").concat(Math.abs(stats.scoreSup).toLocaleString(), "\n </td>\n </tr>\n <tr>\n <td>\n Rank (ODS)\n </td>\n <td style=\"").concat(stats.rankSup > 0 ? statIncreaseStyle : statDecreaseStyle, "\">\n ").concat(Math.abs(stats.rankSup), "\n </td>\n </tr>\n <tr>\n <td>\n Score total\n </td>\n <td style=\"").concat(stats.scoreTotal > 0 ? statIncreaseStyle : statDecreaseStyle, "\">\n ").concat(Math.abs(stats.scoreTotal).toLocaleString(), "\n </td>\n </tr>\n <tr>\n <td>\n Rank (OD)\n </td>\n <td style=\"").concat(stats.rankTotal > 0 ? statIncreaseStyle : statDecreaseStyle, "\">\n ").concat(Math.abs(stats.rankTotal), "\n </td>\n </tr>\n </tbody>\n </table>\n ");
|
||||||
|
};
|
||||||
|
|
||||||
|
const render = (_ref2) => {
|
||||||
|
let {
|
||||||
|
player,
|
||||||
|
dailyPlayerStats
|
||||||
|
} = _ref2;
|
||||||
[{
|
[{
|
||||||
title: 'Joined at:',
|
title: 'Joined at:',
|
||||||
data: (0, _formatDate.default)(player.joinedAt),
|
data: (0, _formatDate.default)(player.joinedAt),
|
||||||
|
@ -505,6 +528,10 @@ const render = player => {
|
||||||
renderTr(data);
|
renderTr(data);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
if (dailyPlayerStats && dailyPlayerStats.items.length > 0) {
|
||||||
|
renderTodaysStats(dailyPlayerStats.items[0]);
|
||||||
|
}
|
||||||
|
|
||||||
if (player.nameChanges.length > 0) {
|
if (player.nameChanges.length > 0) {
|
||||||
renderPlayerOtherNames(player);
|
renderPlayerOtherNames(player);
|
||||||
}
|
}
|
||||||
|
@ -516,23 +543,19 @@ const render = player => {
|
||||||
|
|
||||||
(async function () {
|
(async function () {
|
||||||
try {
|
try {
|
||||||
const {
|
const dataFromCache = loadDataFromCache();
|
||||||
player: playerDataFromCache
|
|
||||||
} = loadPlayerDataFromCache();
|
|
||||||
|
|
||||||
if (playerDataFromCache) {
|
if (dataFromCache && dataFromCache.player) {
|
||||||
render(playerDataFromCache);
|
render(dataFromCache);
|
||||||
}
|
}
|
||||||
|
|
||||||
const {
|
const dataFromAPI = await loadData();
|
||||||
player
|
|
||||||
} = await loadPlayerData();
|
|
||||||
|
|
||||||
if (player) {
|
if (dataFromAPI) {
|
||||||
render(player);
|
render(dataFromAPI);
|
||||||
}
|
}
|
||||||
|
|
||||||
console.log(player);
|
console.log(dataFromAPI);
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.log('extended player profile', error);
|
console.log('extended player profile', error);
|
||||||
}
|
}
|
||||||
|
|
|
@ -24,8 +24,8 @@ if (isNaN(PLAYER_ID) || !PLAYER_ID) {
|
||||||
PLAYER_ID = CURRENT_PLAYER_ID;
|
PLAYER_ID = CURRENT_PLAYER_ID;
|
||||||
}
|
}
|
||||||
const LOCAL_STORAGE_KEY = 'kichiyaki_extended_player_profile' + PLAYER_ID;
|
const LOCAL_STORAGE_KEY = 'kichiyaki_extended_player_profile' + PLAYER_ID;
|
||||||
const PLAYER_QUERY = `
|
const query = `
|
||||||
query player($server: String!, $id: Int!) {
|
query pageData($server: String!, $id: Int!, $filter: DailyPlayerStatsFilter) {
|
||||||
player(server: $server, id: $id) {
|
player(server: $server, id: $id) {
|
||||||
id
|
id
|
||||||
name
|
name
|
||||||
|
@ -38,8 +38,25 @@ const PLAYER_QUERY = `
|
||||||
}
|
}
|
||||||
dailyGrowth
|
dailyGrowth
|
||||||
}
|
}
|
||||||
|
dailyPlayerStats(server: $server, filter: $filter) {
|
||||||
|
items {
|
||||||
|
rank
|
||||||
|
rankAtt
|
||||||
|
rankDef
|
||||||
|
rankSup
|
||||||
|
rankTotal
|
||||||
|
points
|
||||||
|
scoreAtt
|
||||||
|
scoreAtt
|
||||||
|
scoreDef
|
||||||
|
scoreSup
|
||||||
|
scoreTotal
|
||||||
|
villages
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const profileInfoTBody = document.querySelector('#player_info > tbody');
|
const profileInfoTBody = document.querySelector('#player_info > tbody');
|
||||||
const otherElementsContainer = document.querySelector(
|
const otherElementsContainer = document.querySelector(
|
||||||
PLAYER_ID === CURRENT_PLAYER_ID
|
PLAYER_ID === CURRENT_PLAYER_ID
|
||||||
|
@ -47,7 +64,7 @@ const otherElementsContainer = document.querySelector(
|
||||||
: '#content_value > table > tbody > tr > td:nth-child(2)'
|
: '#content_value > table > tbody > tr > td:nth-child(2)'
|
||||||
);
|
);
|
||||||
|
|
||||||
const loadPlayerDataFromCache = () => {
|
const loadDataFromCache = () => {
|
||||||
return getItem(LOCAL_STORAGE_KEY);
|
return getItem(LOCAL_STORAGE_KEY);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -72,7 +89,6 @@ const loadInADayRankAndScore = async (name, playerID, type) => {
|
||||||
}
|
}
|
||||||
return res[0];
|
return res[0];
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.log(error);
|
|
||||||
return {
|
return {
|
||||||
rank: 0,
|
rank: 0,
|
||||||
playerID: 0,
|
playerID: 0,
|
||||||
|
@ -83,12 +99,17 @@ const loadInADayRankAndScore = async (name, playerID, type) => {
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const loadPlayerData = async () => {
|
const loadData = async () => {
|
||||||
const data = await requestCreator({
|
const data = await requestCreator({
|
||||||
query: PLAYER_QUERY,
|
query,
|
||||||
variables: {
|
variables: {
|
||||||
server: SERVER,
|
server: SERVER,
|
||||||
id: PLAYER_ID,
|
id: PLAYER_ID,
|
||||||
|
filter: {
|
||||||
|
sort: 'createDate DESC',
|
||||||
|
limit: 1,
|
||||||
|
playerID: [PLAYER_ID],
|
||||||
|
},
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
if (data.player) {
|
if (data.player) {
|
||||||
|
@ -170,6 +191,7 @@ const renderPlayerServers = (player) => {
|
||||||
otherElementsContainer.prepend(playerServers);
|
otherElementsContainer.prepend(playerServers);
|
||||||
}
|
}
|
||||||
playerServers.querySelector('td').innerHTML = player.servers
|
playerServers.querySelector('td').innerHTML = player.servers
|
||||||
|
.sort()
|
||||||
.map(
|
.map(
|
||||||
(server) =>
|
(server) =>
|
||||||
`<a style="margin-right: 5px" href="${formatPlayerURL(
|
`<a style="margin-right: 5px" href="${formatPlayerURL(
|
||||||
|
@ -228,7 +250,141 @@ const renderPlayerOtherNames = (player) => {
|
||||||
`;
|
`;
|
||||||
};
|
};
|
||||||
|
|
||||||
const render = (player) => {
|
const renderTodaysStats = (stats) => {
|
||||||
|
let todaysStats = document.querySelector('#todaysStats');
|
||||||
|
if (!todaysStats) {
|
||||||
|
todaysStats = document.createElement('div');
|
||||||
|
todaysStats.id = 'todaysStats';
|
||||||
|
todaysStats.width = '100%';
|
||||||
|
otherElementsContainer.prepend(todaysStats);
|
||||||
|
}
|
||||||
|
const statIncreaseStyle = 'color: #000; background-color: #0f0';
|
||||||
|
const statDecreaseStyle = 'color: #000; background-color: #f00';
|
||||||
|
|
||||||
|
todaysStats.innerHTML = `
|
||||||
|
<table width="100%" class="vis">
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<th colspan="2">
|
||||||
|
Today's stats
|
||||||
|
</th>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
Points
|
||||||
|
</td>
|
||||||
|
<td style="${
|
||||||
|
stats.points > 0 ? statIncreaseStyle : statDecreaseStyle
|
||||||
|
}">
|
||||||
|
${Math.abs(stats.points).toLocaleString()}
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
Rank
|
||||||
|
</td>
|
||||||
|
<td style="${
|
||||||
|
stats.rank > 0 ? statIncreaseStyle : statDecreaseStyle
|
||||||
|
}">
|
||||||
|
${Math.abs(stats.rank)}
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
Villages
|
||||||
|
</td>
|
||||||
|
<td style="${
|
||||||
|
stats.villages > 0 ? statIncreaseStyle : statDecreaseStyle
|
||||||
|
}">
|
||||||
|
${Math.abs(stats.villages).toLocaleString()}
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
Score att
|
||||||
|
</td>
|
||||||
|
<td style="${
|
||||||
|
stats.scoreAtt > 0 ? statIncreaseStyle : statDecreaseStyle
|
||||||
|
}">
|
||||||
|
${Math.abs(stats.scoreAtt).toLocaleString()}
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
Rank (ODA)
|
||||||
|
</td>
|
||||||
|
<td style="${
|
||||||
|
stats.rankAtt > 0 ? statIncreaseStyle : statDecreaseStyle
|
||||||
|
}">
|
||||||
|
${Math.abs(stats.rankAtt)}
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
Score def
|
||||||
|
</td>
|
||||||
|
<td style="${
|
||||||
|
stats.scoreDef > 0 ? statIncreaseStyle : statDecreaseStyle
|
||||||
|
}">
|
||||||
|
${Math.abs(stats.scoreDef).toLocaleString()}
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
Rank (ODD)
|
||||||
|
</td>
|
||||||
|
<td style="${
|
||||||
|
stats.rankDef > 0 ? statIncreaseStyle : statDecreaseStyle
|
||||||
|
}">
|
||||||
|
${Math.abs(stats.rankDef)}
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
Score sup
|
||||||
|
</td>
|
||||||
|
<td style="${
|
||||||
|
stats.scoreSup > 0 ? statIncreaseStyle : statDecreaseStyle
|
||||||
|
}">
|
||||||
|
${Math.abs(stats.scoreSup).toLocaleString()}
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
Rank (ODS)
|
||||||
|
</td>
|
||||||
|
<td style="${
|
||||||
|
stats.rankSup > 0 ? statIncreaseStyle : statDecreaseStyle
|
||||||
|
}">
|
||||||
|
${Math.abs(stats.rankSup)}
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
Score total
|
||||||
|
</td>
|
||||||
|
<td style="${
|
||||||
|
stats.scoreTotal > 0 ? statIncreaseStyle : statDecreaseStyle
|
||||||
|
}">
|
||||||
|
${Math.abs(stats.scoreTotal).toLocaleString()}
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
Rank (OD)
|
||||||
|
</td>
|
||||||
|
<td style="${
|
||||||
|
stats.rankTotal > 0 ? statIncreaseStyle : statDecreaseStyle
|
||||||
|
}">
|
||||||
|
${Math.abs(stats.rankTotal)}
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
`;
|
||||||
|
};
|
||||||
|
|
||||||
|
const render = ({ player, dailyPlayerStats }) => {
|
||||||
[
|
[
|
||||||
{
|
{
|
||||||
title: 'Joined at:',
|
title: 'Joined at:',
|
||||||
|
@ -293,6 +449,9 @@ const render = (player) => {
|
||||||
renderTr(data);
|
renderTr(data);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
if (dailyPlayerStats && dailyPlayerStats.items.length > 0) {
|
||||||
|
renderTodaysStats(dailyPlayerStats.items[0]);
|
||||||
|
}
|
||||||
if (player.nameChanges.length > 0) {
|
if (player.nameChanges.length > 0) {
|
||||||
renderPlayerOtherNames(player);
|
renderPlayerOtherNames(player);
|
||||||
}
|
}
|
||||||
|
@ -303,15 +462,15 @@ const render = (player) => {
|
||||||
|
|
||||||
(async function () {
|
(async function () {
|
||||||
try {
|
try {
|
||||||
const { player: playerDataFromCache } = loadPlayerDataFromCache();
|
const dataFromCache = loadDataFromCache();
|
||||||
if (playerDataFromCache) {
|
if (dataFromCache && dataFromCache.player) {
|
||||||
render(playerDataFromCache);
|
render(dataFromCache);
|
||||||
}
|
}
|
||||||
const { player } = await loadPlayerData();
|
const dataFromAPI = await loadData();
|
||||||
if (player) {
|
if (dataFromAPI) {
|
||||||
render(player);
|
render(dataFromAPI);
|
||||||
}
|
}
|
||||||
console.log(player);
|
console.log(dataFromAPI);
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.log('extended player profile', error);
|
console.log('extended player profile', error);
|
||||||
}
|
}
|
||||||
|
|
Reference in New Issue
Block a user