932 lines
25 KiB
JavaScript
932 lines
25 KiB
JavaScript
import differenceInDays from 'date-fns/differenceInDays';
|
|
import getTranslations from './i18n/extendedTribeProfile';
|
|
import requestCreator from './libs/requestCreator';
|
|
import {
|
|
setPage,
|
|
getPage,
|
|
generatePaginationItems,
|
|
getContainerStyles,
|
|
} from './utils/pagination';
|
|
import renderTodaysStats from './common/renderTodaysStats';
|
|
import showEnnoblementsPopup from './common/showEnnoblementsPopup';
|
|
import showHistoryPopup from './common/showHistoryPopup';
|
|
import showPopup from './utils/showPopup';
|
|
import getIDFromURL from './utils/getIDFromURL';
|
|
import getCurrentServer from './utils/getCurrentServer';
|
|
import { setItem, getItem } from './utils/localStorage';
|
|
import { formatDate } from './utils/date';
|
|
import getServerVersionCode from './utils/getServerVersionCode';
|
|
import * as twstatsutils from './utils/twstats';
|
|
import * as twhelputils from './utils/twhelp';
|
|
import * as twutils from './utils/tribalwars';
|
|
|
|
// ==UserScript==
|
|
// @name Extended tribe profile
|
|
// @namespace https://github.com/tribalwarshelp/scripts
|
|
// @updateURL https://raw.githubusercontent.com/tribalwarshelp/scripts/master/dist/extendedTribeProfile.js
|
|
// @downloadURL https://raw.githubusercontent.com/tribalwarshelp/scripts/master/dist/extendedTribeProfile.js
|
|
// @version 1.1.6
|
|
// @description Extended tribe profile
|
|
// @author Kichiyaki https://dwysokinski.me/
|
|
// @match *://*/game.php*screen=info_ally*
|
|
// @grant none
|
|
// @run-at document-end
|
|
// ==/UserScript==
|
|
|
|
const SERVER = getCurrentServer();
|
|
const VERSION = getServerVersionCode(SERVER);
|
|
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!
|
|
$dailyTribeStatsSort: [String!]
|
|
$dailyTribeStatsLimit: Int
|
|
$playersLimit: Int
|
|
$playersSort: [String!]
|
|
$playerFilter: PlayerFilter!
|
|
$dailyTribeStatsFilter: DailyTribeStatsFilter!
|
|
) {
|
|
tribe(server: $server, id: $id) {
|
|
id
|
|
bestRank
|
|
bestRankAt
|
|
mostPoints
|
|
mostPointsAt
|
|
mostVillages
|
|
mostVillagesAt
|
|
createdAt
|
|
dominance
|
|
}
|
|
dailyTribeStats(
|
|
server: $server
|
|
limit: $dailyTribeStatsLimit
|
|
sort: $dailyTribeStatsSort
|
|
filter: $dailyTribeStatsFilter
|
|
) {
|
|
items {
|
|
rank
|
|
rankAtt
|
|
rankDef
|
|
rankTotal
|
|
points
|
|
scoreAtt
|
|
scoreAtt
|
|
scoreDef
|
|
scoreTotal
|
|
villages
|
|
members
|
|
}
|
|
}
|
|
players(server: $server, sort: $playersSort, filter: $playerFilter, limit: $playersLimit) {
|
|
items {
|
|
id
|
|
rankAtt
|
|
rankDef
|
|
rankSup
|
|
rankTotal
|
|
scoreAtt
|
|
scoreAtt
|
|
scoreDef
|
|
scoreSup
|
|
scoreTotal
|
|
dailyGrowth
|
|
}
|
|
}
|
|
}
|
|
`;
|
|
const ENNOBLEMENTS_QUERY = `
|
|
query ennoblements($server: String!, $limit: Int, $offset: Int, $sort: [String!], $filter: EnnoblementFilter!) {
|
|
ennoblements(server: $server, limit: $limit, offset: $offset, sort: $sort, filter: $filter) {
|
|
total
|
|
items {
|
|
village {
|
|
id
|
|
name
|
|
x
|
|
y
|
|
}
|
|
oldOwner {
|
|
id
|
|
name
|
|
}
|
|
oldOwnerTribe {
|
|
id
|
|
tag
|
|
}
|
|
newOwner {
|
|
id
|
|
name
|
|
}
|
|
newOwnerTribe {
|
|
id
|
|
tag
|
|
}
|
|
ennobledAt
|
|
}
|
|
}
|
|
}
|
|
`;
|
|
const ENNOBLEMENTS_PER_PAGE = 15;
|
|
const TRIBE_HISTORY_AND_TRIBE_DAILY_STATS_QUERY = `
|
|
query tribeHistoryAndTribeDailyStats($server: String!,
|
|
$tribeHistoryFilter: TribeHistoryFilter!,
|
|
$dailyTribeStatsFilter: DailyTribeStatsFilter!,
|
|
$sort: [String!],
|
|
$offset: Int,
|
|
$limit: Int) {
|
|
tribeHistory(server: $server, sort: $sort, limit: $limit, offset: $offset, filter: $tribeHistoryFilter) {
|
|
total
|
|
items {
|
|
totalVillages
|
|
points
|
|
rank
|
|
scoreAtt
|
|
rankAtt
|
|
scoreDef
|
|
rankDef
|
|
scoreTotal
|
|
rankTotal
|
|
createDate
|
|
totalMembers
|
|
}
|
|
}
|
|
dailyTribeStats(server: $server, sort: $sort, limit: $limit, offset: $offset, filter: $dailyTribeStatsFilter) {
|
|
items {
|
|
points
|
|
scoreAtt
|
|
scoreDef
|
|
scoreTotal
|
|
villages
|
|
createDate
|
|
members
|
|
}
|
|
}
|
|
}
|
|
`;
|
|
const TRIBE_HISTORY_PER_PAGE = 15;
|
|
const TRIBE_MEMBERS_DAILY_STATS_QUERY = `
|
|
query tribeMembersDailyStats($server: String!,
|
|
$filter: DailyPlayerStatsFilter!,
|
|
$limit: Int,
|
|
$sort: [String!]) {
|
|
dailyPlayerStats(server: $server, limit: $limit, sort: $sort, filter: $filter) {
|
|
items {
|
|
player {
|
|
id
|
|
name
|
|
}
|
|
points
|
|
scoreAtt
|
|
scoreDef
|
|
scoreSup
|
|
scoreTotal
|
|
villages
|
|
createDate
|
|
}
|
|
}
|
|
}
|
|
`;
|
|
let MEMBERS_GROWTH_MODE = 'points';
|
|
const TRIBE_CHANGES_QUERY = `
|
|
query tribeChanges($server: String!, $limit: Int, $offset: Int, $sort: [String!], $filter: TribeChangeFilter!) {
|
|
tribeChanges(server: $server, offset: $offset, limit: $limit, sort: $sort, filter: $filter) {
|
|
total
|
|
items {
|
|
player {
|
|
id
|
|
name
|
|
}
|
|
newTribe {
|
|
id
|
|
tag
|
|
}
|
|
createdAt
|
|
}
|
|
}
|
|
}
|
|
`;
|
|
const TRIBE_CHANGES_PAGINATION_CONTAINER_ID = 'tribeChangesPagination';
|
|
const TRIBE_CHANGES_PER_PAGE = 15;
|
|
const profileInfoTBody = document.querySelector(
|
|
'#content_value > table:nth-child(3) > tbody > tr > td:nth-child(1) > table > tbody'
|
|
);
|
|
const actionContainer = profileInfoTBody;
|
|
const otherElementsContainer = document.querySelector(
|
|
'#content_value > table:nth-child(3) > tbody > tr > td:nth-child(2)'
|
|
);
|
|
const membersContainer = document
|
|
.querySelector('#content_value h3')
|
|
.nextElementSibling.querySelector('tbody');
|
|
const translations = getTranslations();
|
|
|
|
const loadDataFromCache = () => {
|
|
return getItem(LOCAL_STORAGE_KEY);
|
|
};
|
|
|
|
const cacheTribeData = (data = {}) => {
|
|
setItem(LOCAL_STORAGE_KEY, data);
|
|
};
|
|
|
|
const getMemberIDs = () => {
|
|
const ids = [];
|
|
membersContainer.querySelectorAll('a').forEach(a => {
|
|
const href = a.getAttribute('href');
|
|
if (href.includes('info_player')) {
|
|
ids.push(getIDFromURL(href));
|
|
}
|
|
});
|
|
return ids;
|
|
};
|
|
|
|
const getMemberNames = () => {
|
|
const ids = [];
|
|
membersContainer.querySelectorAll('a').forEach(a => {
|
|
if (a.getAttribute('href').includes('info_player')) {
|
|
ids.push(a.innerText.trim());
|
|
}
|
|
});
|
|
return ids;
|
|
};
|
|
|
|
const loadData = async () => {
|
|
const memberIDs = getMemberIDs();
|
|
const data = await requestCreator({
|
|
query: TRIBE_QUERY,
|
|
variables: {
|
|
server: SERVER,
|
|
id: TRIBE_ID,
|
|
dailyTribeStatsSort: ['createDate DESC'],
|
|
dailyTribeStatsLimit: 1,
|
|
dailyTribeStatsFilter: {
|
|
tribeID: [TRIBE_ID],
|
|
},
|
|
playersSort: ['rank ASC'],
|
|
playersLimit: memberIDs.length,
|
|
playerFilter: {
|
|
id: memberIDs,
|
|
},
|
|
},
|
|
});
|
|
cacheTribeData(data);
|
|
return data;
|
|
};
|
|
|
|
const renderTr = ({ title, data, id }) => {
|
|
let tr = document.querySelector('#' + id);
|
|
if (!tr) {
|
|
tr = document.createElement('tr');
|
|
tr.id = id;
|
|
tr.appendChild(document.createElement('td'));
|
|
tr.appendChild(document.createElement('td'));
|
|
profileInfoTBody.append(tr);
|
|
}
|
|
tr.children[0].innerHTML = title;
|
|
tr.children[1].innerHTML = data;
|
|
};
|
|
|
|
const extendMembersData = players => {
|
|
membersContainer.parentElement.style.width = '100%';
|
|
const heading = membersContainer.querySelector('tr:first-child');
|
|
if (heading.children.length !== 11) {
|
|
[
|
|
translations.oda,
|
|
translations.odd,
|
|
translations.ods,
|
|
translations.od,
|
|
translations.dailyGrowth,
|
|
translations.playerLinks,
|
|
].forEach(v => {
|
|
const th = document.createElement('th');
|
|
th.innerHTML = v;
|
|
heading.appendChild(th);
|
|
});
|
|
}
|
|
membersContainer.querySelectorAll('tr').forEach(tr => {
|
|
const a = tr.querySelector('a');
|
|
if (!a) {
|
|
return;
|
|
}
|
|
const playerID = getIDFromURL(a.getAttribute('href'));
|
|
const player = players.items.find(p => p.id === playerID);
|
|
if (player) {
|
|
[
|
|
[player.scoreAtt, player.rankAtt],
|
|
[player.scoreDef, player.rankDef],
|
|
[player.scoreSup, player.rankSup],
|
|
[player.scoreTotal, player.rankTotal],
|
|
player.dailyGrowth,
|
|
[
|
|
{
|
|
link: twhelputils.buildPlayerURL(VERSION, SERVER, player.id),
|
|
label: 'TWHelp',
|
|
},
|
|
{
|
|
link: twstatsutils.buildPlayerURL(SERVER, player.id),
|
|
label: 'TWStats',
|
|
},
|
|
],
|
|
].forEach((data, index) => {
|
|
let td = tr.children[5 + index];
|
|
if (!td) {
|
|
td = document.createElement('td');
|
|
tr.appendChild(td);
|
|
}
|
|
if (Array.isArray(data)) {
|
|
if (typeof data[0] === 'number') {
|
|
td.innerHTML = `${data[0].toLocaleString()} (<strong>${
|
|
data[1]
|
|
}</strong>)`;
|
|
} else if (data[0].link) {
|
|
td.innerHTML = data
|
|
.map(
|
|
({ link, label }) =>
|
|
`<a target="_blank" href="${link}">${label}</a>`
|
|
)
|
|
.join('<br>');
|
|
}
|
|
} else if (typeof data === 'number') {
|
|
td.innerHTML = data.toLocaleString();
|
|
}
|
|
});
|
|
}
|
|
});
|
|
};
|
|
|
|
const render = ({ tribe, dailyTribeStats, players }) => {
|
|
[
|
|
{
|
|
title: translations.createdAt + ':',
|
|
data: formatDate(tribe.createdAt),
|
|
id: 'created_at',
|
|
},
|
|
{
|
|
title: translations.dominance + ':',
|
|
data: tribe.dominance.toFixed(2) + '%',
|
|
id: 'dominance',
|
|
},
|
|
{
|
|
title: translations.bestRank + ':',
|
|
data: tribe.bestRank + ' ' + `(${formatDate(tribe.bestRankAt)})`,
|
|
id: 'best_rank',
|
|
},
|
|
{
|
|
title: translations.mostPoints + ':',
|
|
data:
|
|
tribe.mostPoints.toLocaleString() +
|
|
' ' +
|
|
`(${formatDate(tribe.mostPointsAt)})`,
|
|
id: 'most_points',
|
|
},
|
|
{
|
|
title: translations.mostVillages + ':',
|
|
data: tribe.mostVillages + ' ' + `(${formatDate(tribe.mostVillagesAt)})`,
|
|
id: 'most_villages',
|
|
},
|
|
].forEach(data => {
|
|
renderTr(data);
|
|
});
|
|
|
|
if (dailyTribeStats && dailyTribeStats.items.length > 0) {
|
|
renderTodaysStats(otherElementsContainer, dailyTribeStats.items[0]);
|
|
}
|
|
|
|
if (players && players.items.length > 0) {
|
|
extendMembersData(players);
|
|
}
|
|
};
|
|
|
|
const handleShowTribeEnnoblementsClick = async e => {
|
|
e.preventDefault();
|
|
const page = getPage(e.target);
|
|
if (!isNaN(page)) {
|
|
const data = await requestCreator({
|
|
query: ENNOBLEMENTS_QUERY,
|
|
variables: {
|
|
filter: {
|
|
or: {
|
|
oldOwnerTribeID: [TRIBE_ID],
|
|
newOwnerTribeID: [TRIBE_ID],
|
|
},
|
|
},
|
|
offset: ENNOBLEMENTS_PER_PAGE * (page - 1),
|
|
limit: ENNOBLEMENTS_PER_PAGE,
|
|
sort: ['ennobledAt DESC'],
|
|
server: SERVER,
|
|
},
|
|
});
|
|
showEnnoblementsPopup(e, data.ennoblements, {
|
|
currentPage: page,
|
|
limit: ENNOBLEMENTS_PER_PAGE,
|
|
onPageChange: handleShowTribeEnnoblementsClick,
|
|
});
|
|
}
|
|
};
|
|
|
|
const handleShowTribeHistoryClick = async e => {
|
|
e.preventDefault();
|
|
const page = getPage(e.target);
|
|
if (!isNaN(page)) {
|
|
try {
|
|
const filter = {
|
|
tribeID: [TRIBE_ID],
|
|
};
|
|
const { tribeHistory, dailyTribeStats } = await requestCreator({
|
|
query: TRIBE_HISTORY_AND_TRIBE_DAILY_STATS_QUERY,
|
|
variables: {
|
|
server: SERVER,
|
|
offset: TRIBE_HISTORY_PER_PAGE * (page - 1),
|
|
limit: TRIBE_HISTORY_PER_PAGE,
|
|
sort: ['createDate DESC'],
|
|
tribeHistoryFilter: filter,
|
|
dailyTribeStatsFilter: filter,
|
|
},
|
|
});
|
|
showHistoryPopup(e, tribeHistory, dailyTribeStats, {
|
|
currentPage: page,
|
|
limit: TRIBE_HISTORY_PER_PAGE,
|
|
tribe: true,
|
|
onPageChange: handleShowTribeHistoryClick,
|
|
});
|
|
} catch (error) {
|
|
console.log('cannot load tribe history', error);
|
|
}
|
|
}
|
|
};
|
|
|
|
const getMembersGrowthTdStyle = 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 mapMembersGrowthTdValue = i => {
|
|
switch (MEMBERS_GROWTH_MODE) {
|
|
case 'points':
|
|
return i.points;
|
|
case 'villages':
|
|
return i.villages;
|
|
case 'od':
|
|
return i.scoreTotal;
|
|
case 'oda':
|
|
return i.scoreAtt;
|
|
case 'odd':
|
|
return i.scoreDef;
|
|
case 'ods':
|
|
return i.scoreSup;
|
|
default:
|
|
return 0;
|
|
}
|
|
};
|
|
|
|
const buildMembersGrowthTBody = stats => {
|
|
const dates = [
|
|
...new Set(stats.items.map(item => item.createDate)),
|
|
].reverse();
|
|
|
|
return `
|
|
<tbody>
|
|
<tr>
|
|
<th>${translations.player}</th>
|
|
${dates
|
|
.map(date => {
|
|
return `<th>${formatDate(date, {
|
|
year: 'numeric',
|
|
month: '2-digit',
|
|
day: '2-digit',
|
|
})}</th>`;
|
|
})
|
|
.join('')}
|
|
<th>${translations.total}</th>
|
|
</tr>
|
|
${getMemberIDs()
|
|
.map(id => {
|
|
const filtered = stats.items
|
|
.filter(item => item.player && item.player.id === id)
|
|
.reverse();
|
|
let player = undefined;
|
|
if (filtered.length > 0) {
|
|
player = filtered[0].player;
|
|
}
|
|
const tds = [];
|
|
let total = 0;
|
|
for (let date of dates) {
|
|
const i = filtered.find(i => i.createDate === date);
|
|
let val = 0;
|
|
if (i) {
|
|
val = mapMembersGrowthTdValue(i);
|
|
}
|
|
total += val;
|
|
tds.push(
|
|
`<td style="${getMembersGrowthTdStyle(
|
|
val
|
|
)}">${val.toLocaleString()}</td>`
|
|
);
|
|
}
|
|
return `<tr>
|
|
<td>
|
|
${
|
|
player
|
|
? `<a href="${twutils.buildPlayerURL(id)}">${player.name}</a>`
|
|
: '-'
|
|
}
|
|
</td>
|
|
${tds.join('')}
|
|
<td style="${getMembersGrowthTdStyle(
|
|
total
|
|
)}"><strong>${total.toLocaleString()}</strong></td>
|
|
</tr>`;
|
|
})
|
|
.join('')}
|
|
</tbody>
|
|
`;
|
|
};
|
|
|
|
const MEMBERS_GROWTH_TABLE_ID = 'membersGrowth';
|
|
const MEMBERS_GROWTH_FORM = MEMBERS_GROWTH_TABLE_ID + 'Form';
|
|
|
|
const createChangeTypeHandler = stats => e => {
|
|
e.preventDefault();
|
|
MEMBERS_GROWTH_MODE = e.target[0].value;
|
|
document.querySelector('#' + MEMBERS_GROWTH_TABLE_ID).innerHTML =
|
|
buildMembersGrowthTBody(stats);
|
|
};
|
|
|
|
const renderMembersGrowthPopup = (e, stats) => {
|
|
const formOptions = [
|
|
['points', translations.points],
|
|
['villages', translations.villages],
|
|
['od', translations.opponentsDefeated],
|
|
['oda', translations.opponentsDefeatedAsAttacker],
|
|
['odd', translations.opponentsDefeatedAsDefender],
|
|
['ods', translations.opponentsDefeatedAsSupporter],
|
|
].map(
|
|
v =>
|
|
`<option ${
|
|
MEMBERS_GROWTH_MODE === v[0] ? 'selected="selected"' : ''
|
|
} value="${v[0]}">${v[1]}</option>`
|
|
);
|
|
const html = `
|
|
<form id="${MEMBERS_GROWTH_FORM}">
|
|
<select>
|
|
${formOptions.join('')}
|
|
</select>
|
|
<button type="submit">${translations.change}</button>
|
|
</form>
|
|
<table id="${MEMBERS_GROWTH_TABLE_ID}" class="vis" style="border-collapse: separate; border-spacing: 2px; width: 100%;">
|
|
${buildMembersGrowthTBody(stats)}
|
|
</table>
|
|
`;
|
|
|
|
showPopup({
|
|
e,
|
|
title: translations.membersGrowth,
|
|
id: 'mg',
|
|
html,
|
|
});
|
|
|
|
document
|
|
.querySelector('#' + MEMBERS_GROWTH_FORM)
|
|
.addEventListener('submit', createChangeTypeHandler(stats));
|
|
};
|
|
|
|
const loadMembersGrowthData = async ({ createDateLTE, createDateGT } = {}) => {
|
|
const memberIDs = getMemberIDs();
|
|
const limit =
|
|
memberIDs.length * differenceInDays(createDateLTE, createDateGT);
|
|
const filter = {
|
|
playerID: memberIDs,
|
|
createDateLTE,
|
|
createDateGT,
|
|
};
|
|
const data = await requestCreator({
|
|
query: TRIBE_MEMBERS_DAILY_STATS_QUERY,
|
|
variables: {
|
|
filter,
|
|
limit,
|
|
sort: ['createDate DESC'],
|
|
server: SERVER,
|
|
},
|
|
});
|
|
return data;
|
|
};
|
|
|
|
const handleShowMembersGrowthClick = async e => {
|
|
e.preventDefault();
|
|
const createDateGT = new Date();
|
|
createDateGT.setDate(createDateGT.getDate() - 7);
|
|
const data = await loadMembersGrowthData({
|
|
createDateLTE: new Date(),
|
|
createDateGT,
|
|
});
|
|
renderMembersGrowthPopup(e, data.dailyPlayerStats);
|
|
};
|
|
|
|
const renderTribeChanges = (e, currentPage, tribeChanges) => {
|
|
const paginationItems = generatePaginationItems({
|
|
total: tribeChanges.total,
|
|
limit: TRIBE_CHANGES_PER_PAGE,
|
|
currentPage,
|
|
});
|
|
|
|
const html = `
|
|
<div style="${getContainerStyles()}" id="${TRIBE_CHANGES_PAGINATION_CONTAINER_ID}">
|
|
${paginationItems.join('')}
|
|
</div>
|
|
<table class="vis" style="border-collapse: separate; border-spacing: 2px; width: 100%;">
|
|
<tbody>
|
|
<tr>
|
|
<th>
|
|
${translations.date}
|
|
</th>
|
|
<th>
|
|
${translations.player}
|
|
</th>
|
|
<th>
|
|
${translations.act}
|
|
</th>
|
|
</tr>
|
|
${tribeChanges.items
|
|
.map(tribeChange => {
|
|
let rowHTML =
|
|
'<tr>' + `<td>${formatDate(tribeChange.createdAt)}</td>`;
|
|
if (tribeChange.player) {
|
|
rowHTML += `<td><a href="${twutils.buildPlayerURL(
|
|
tribeChange.player.id
|
|
)}">${tribeChange.player.name}</a></td>`;
|
|
} else {
|
|
rowHTML += '<td>-</td>';
|
|
}
|
|
rowHTML += `<td><strong>${
|
|
tribeChange.newTribe && tribeChange.newTribe.id === TRIBE_ID
|
|
? translations.joined
|
|
: translations.left
|
|
}</strong></td>`;
|
|
return rowHTML + '</tr>';
|
|
})
|
|
.join('')}
|
|
</tbody>
|
|
</table>
|
|
`;
|
|
|
|
showPopup({
|
|
e,
|
|
title: translations.tribeChanges,
|
|
id: 'tribeChanges',
|
|
html,
|
|
});
|
|
|
|
document
|
|
.querySelectorAll('#' + TRIBE_CHANGES_PAGINATION_CONTAINER_ID + ' a')
|
|
.forEach(el => {
|
|
el.addEventListener('click', handleShowTribeChangesClick);
|
|
});
|
|
};
|
|
|
|
const handleShowTribeChangesClick = async e => {
|
|
e.preventDefault();
|
|
const page = getPage(e.target);
|
|
if (!isNaN(page)) {
|
|
const data = await requestCreator({
|
|
query: TRIBE_CHANGES_QUERY,
|
|
variables: {
|
|
filter: {
|
|
or: {
|
|
oldTribeID: [TRIBE_ID],
|
|
newTribeID: [TRIBE_ID],
|
|
},
|
|
},
|
|
offset: TRIBE_CHANGES_PER_PAGE * (page - 1),
|
|
limit: TRIBE_CHANGES_PER_PAGE,
|
|
sort: ['createdAt DESC'],
|
|
server: SERVER,
|
|
},
|
|
});
|
|
renderTribeChanges(e, page, data.tribeChanges);
|
|
}
|
|
};
|
|
|
|
const handleGenerateMailingListClick = e => {
|
|
e.preventDefault();
|
|
|
|
const members = getMemberNames();
|
|
const chunks = [];
|
|
for (let i = 0; i < members.length; i += 50) {
|
|
chunks.push(members.slice(i, i + 50));
|
|
}
|
|
|
|
let html = '';
|
|
chunks.forEach((names, index) => {
|
|
html += `<h3 style="margin-bottom: 5px;">${index + 1}.</h3>
|
|
<textarea cols=30 rows=8 readonly style="margin-bottom: 15px;">${names.join(
|
|
';'
|
|
)}</textarea>`;
|
|
});
|
|
|
|
Dialog.show('mailinglist', html);
|
|
};
|
|
|
|
const loadVillages = async (variables, total = false) => {
|
|
try {
|
|
const data = await requestCreator({
|
|
variables,
|
|
query: `
|
|
query villages($server: String!, $sort: [String!], $limit: Int, $offset: Int, $filter: VillageFilter!) {
|
|
villages(server: $server, sort: $sort, limit: $limit, offset: $offset, filter: $filter) {
|
|
${total ? 'total' : ''}
|
|
items {
|
|
id
|
|
x
|
|
y
|
|
}
|
|
}
|
|
}
|
|
`,
|
|
});
|
|
if (data && data.villages && Array.isArray(data.villages.items)) {
|
|
return data.villages;
|
|
}
|
|
} catch (error) {
|
|
console.log('load villages', error);
|
|
}
|
|
return {
|
|
total: 0,
|
|
items: [],
|
|
};
|
|
};
|
|
|
|
const showLoadingDialog = (current = 0, total = 0) => {
|
|
if (!current || !total) {
|
|
return Dialog.show('loading', '<strong>Loading...</strong>');
|
|
}
|
|
return Dialog.show(
|
|
'loading',
|
|
`Loaded: <strong>${current}</strong>/<strong>${total}</strong>`
|
|
);
|
|
};
|
|
|
|
const handleExportTribeVillagesFormSubmit = async e => {
|
|
e.preventDefault();
|
|
let limit = parseInt(e.target[4].value);
|
|
const variables = {
|
|
filter: {
|
|
xLTE: parseInt(e.target[0].value),
|
|
xGTE: parseInt(e.target[1].value),
|
|
yLTE: parseInt(e.target[2].value),
|
|
yGTE: parseInt(e.target[3].value),
|
|
playerID: getMemberIDs(),
|
|
},
|
|
limit: isNaN(limit) || !limit ? 0 : limit,
|
|
sort: ['id ASC'],
|
|
server: SERVER,
|
|
};
|
|
showLoadingDialog();
|
|
|
|
let { total, items } = await loadVillages(variables, true);
|
|
const length = items.length;
|
|
if (limit !== 0 && limit < total) {
|
|
total = limit;
|
|
}
|
|
if (isNaN(limit) || !limit || limit > length) {
|
|
for (let offset = length; offset < total; offset += length) {
|
|
showLoadingDialog(offset, total);
|
|
const more = await loadVillages({
|
|
...variables,
|
|
filter: {
|
|
...variables.filter,
|
|
},
|
|
offset,
|
|
});
|
|
items = [...items, ...more.items];
|
|
}
|
|
}
|
|
|
|
Dialog.show(
|
|
'exportTribeVillages',
|
|
`
|
|
<textarea cols=60 rows=8 readonly>${items
|
|
.map(item => `${item.x}|${item.y}`)
|
|
.join(' ')}</textarea>
|
|
`
|
|
);
|
|
};
|
|
|
|
const handleExportTribeVillagesClick = e => {
|
|
e.preventDefault();
|
|
const FORM_ID = 'etvForm';
|
|
|
|
const html = `
|
|
<div style="display: flex; align-items: center; justify-content: center;">
|
|
<form id="${FORM_ID}">
|
|
<div>
|
|
<label>X <= </label>
|
|
<input type="number" min="0" value="1000" required />
|
|
</div>
|
|
<div>
|
|
<label>X >= </label>
|
|
<input type="number" min="0" value="0" required />
|
|
</div>
|
|
<div>
|
|
<label>Y <= </label>
|
|
<input type="number" min="0" value="1000" required />
|
|
</div>
|
|
<div>
|
|
<label>Y >= </label>
|
|
<input type="number" min="0" value="0" required />
|
|
</div>
|
|
<div>
|
|
<label>Limit: </label>
|
|
<input type="number" min="0" value="0" required />
|
|
</div>
|
|
<button type="submit">Export</button>
|
|
</form>
|
|
</div>
|
|
`;
|
|
|
|
Dialog.show('exportTribeVillages', html);
|
|
|
|
document
|
|
.querySelector('#' + FORM_ID)
|
|
.addEventListener('submit', handleExportTribeVillagesFormSubmit);
|
|
};
|
|
|
|
const wrapAction = action => {
|
|
const actionWrapperTd = document.createElement('td');
|
|
actionWrapperTd.colSpan = '2';
|
|
actionWrapperTd.append(action);
|
|
const actionWrapperTr = document.createElement('tr');
|
|
actionWrapperTr.appendChild(actionWrapperTd);
|
|
return actionWrapperTr;
|
|
};
|
|
|
|
const renderActions = () => {
|
|
const linkToTWHelp = document.createElement('a');
|
|
linkToTWHelp.href = twhelputils.buildTribeURL(VERSION, SERVER, TRIBE_ID);
|
|
linkToTWHelp.innerHTML = translations.action.linkToTWHelp;
|
|
actionContainer.appendChild(wrapAction(linkToTWHelp));
|
|
|
|
const showEnnoblements = document.createElement('a');
|
|
showEnnoblements.href = '#';
|
|
setPage(showEnnoblements, '1');
|
|
showEnnoblements.innerHTML = translations.action.showEnnoblements;
|
|
showEnnoblements.addEventListener('click', handleShowTribeEnnoblementsClick);
|
|
actionContainer.appendChild(wrapAction(showEnnoblements));
|
|
|
|
const showHistory = document.createElement('a');
|
|
showHistory.href = '#';
|
|
setPage(showHistory, '1');
|
|
showHistory.innerHTML = translations.action.showHistory;
|
|
showHistory.addEventListener('click', handleShowTribeHistoryClick);
|
|
actionContainer.appendChild(wrapAction(showHistory));
|
|
|
|
const showTribeChanges = document.createElement('a');
|
|
showTribeChanges.href = '#';
|
|
setPage(showTribeChanges, '1');
|
|
showTribeChanges.innerHTML = translations.action.showTribeChanges;
|
|
showTribeChanges.addEventListener('click', handleShowTribeChangesClick);
|
|
actionContainer.appendChild(wrapAction(showTribeChanges));
|
|
|
|
const showMembersGrowth = document.createElement('a');
|
|
showMembersGrowth.href = '#';
|
|
showMembersGrowth.innerHTML = translations.action.showMembersGrowth;
|
|
showMembersGrowth.addEventListener('click', handleShowMembersGrowthClick);
|
|
actionContainer.appendChild(wrapAction(showMembersGrowth));
|
|
|
|
const generateMailingList = document.createElement('a');
|
|
generateMailingList.href = '#';
|
|
generateMailingList.innerHTML = translations.action.generateMailingList;
|
|
generateMailingList.addEventListener('click', handleGenerateMailingListClick);
|
|
actionContainer.appendChild(wrapAction(generateMailingList));
|
|
|
|
const exportVillages = document.createElement('a');
|
|
exportVillages.href = '#';
|
|
exportVillages.innerHTML = translations.action.exportVillages;
|
|
exportVillages.addEventListener('click', handleExportTribeVillagesClick);
|
|
actionContainer.appendChild(wrapAction(exportVillages));
|
|
};
|
|
|
|
(async function () {
|
|
try {
|
|
renderActions();
|
|
|
|
const dataFromCache = loadDataFromCache();
|
|
if (dataFromCache && dataFromCache.tribe) {
|
|
render(dataFromCache);
|
|
}
|
|
|
|
const dataFromAPI = await loadData();
|
|
if (dataFromAPI) {
|
|
render(dataFromAPI);
|
|
}
|
|
} catch (error) {
|
|
console.log('extended tribe profile', error);
|
|
}
|
|
})();
|