217 lines
5.4 KiB
TypeScript
217 lines
5.4 KiB
TypeScript
// Extended player profile
|
|
|
|
import { ListResult, Player, TribeChange, TWHelpClient } from './lib/client';
|
|
import { DialogTable } from './common/DialogTable';
|
|
|
|
const SCREEN = 'info_player';
|
|
const MODE = null;
|
|
|
|
const translations: Record<string, Record<string, string>> = {
|
|
pl_PL: {
|
|
'Joined at': 'Dołączył o',
|
|
'Last activity at': 'Ostatnio aktywny o',
|
|
'Best rank': 'Najlepszy ranking',
|
|
'Most points': 'Najwięcej punktów',
|
|
'Most villages': 'Najwięcej wiosek',
|
|
'Show tribe changes': 'Pokaż zmiany plemion',
|
|
'Show history': 'Pokaż historię',
|
|
'Show ennoblements': 'Pokaż przejęcia',
|
|
'Old tribe': 'Stare plemię',
|
|
'New tribe': 'Nowe plemię',
|
|
'Date/time': 'Data/czas',
|
|
},
|
|
};
|
|
|
|
const t = (s: string) => {
|
|
return translations[window.game_data.locale]?.[s] ?? s;
|
|
};
|
|
|
|
class TWHelpConnector {
|
|
constructor(
|
|
private readonly client: TWHelpClient,
|
|
private readonly version: string,
|
|
private readonly server: string,
|
|
private readonly id: number
|
|
) {}
|
|
|
|
player() {
|
|
return this.client.player(this.version, this.server, this.id);
|
|
}
|
|
|
|
tribeChanges(page: number, limit: number) {
|
|
return this.client.tribeChanges(this.version, this.server, this.id, {
|
|
offset: (page - 1) * limit,
|
|
limit: limit,
|
|
sort: ['createdAt:desc', 'id:asc'],
|
|
});
|
|
}
|
|
}
|
|
|
|
enum DialogId {
|
|
TRIBE_CHANGES = 'kichiyaki_tribe_changes',
|
|
}
|
|
|
|
interface UIConnector {
|
|
tribeChanges(page: number, limit: number): Promise<ListResult<TribeChange>>;
|
|
}
|
|
|
|
class UI {
|
|
private static readonly TRIBE_CHANGES_LIMIT = 30;
|
|
constructor(
|
|
private readonly player: Player,
|
|
private readonly connector: UIConnector
|
|
) {}
|
|
|
|
public render() {
|
|
this.renderAdditionalInfo();
|
|
this.renderActions();
|
|
}
|
|
|
|
private renderAdditionalInfo() {
|
|
const tbody = document.querySelector('#player_info tbody');
|
|
if (!(tbody instanceof HTMLTableSectionElement)) {
|
|
return;
|
|
}
|
|
|
|
tbody.insertAdjacentHTML(
|
|
'beforeend',
|
|
`
|
|
<tr>
|
|
<td>${t('Joined at')}:</td>
|
|
<td>${new Date(this.player.createdAt).toLocaleString()}</td>
|
|
</tr>
|
|
<tr>
|
|
<td>${t('Last activity at')}:</td>
|
|
<td>${new Date(this.player.lastActivityAt).toLocaleString()}</td>
|
|
</tr>
|
|
<tr>
|
|
<td>${t('Best rank')}:</td>
|
|
<td>${this.player.bestRank} (${new Date(
|
|
this.player.bestRankAt
|
|
).toLocaleString()})</td>
|
|
</tr>
|
|
<tr>
|
|
<td>${t('Most points')}:</td>
|
|
<td>${this.player.mostPoints.toLocaleString()} (${new Date(
|
|
this.player.mostPointsAt
|
|
).toLocaleString()})</td>
|
|
</tr>
|
|
<tr>
|
|
<td>${t('Most villages')}:</td>
|
|
<td>${this.player.mostVillages.toLocaleString()} (${new Date(
|
|
this.player.mostVillagesAt
|
|
).toLocaleString()})</td>
|
|
</tr>
|
|
`
|
|
);
|
|
}
|
|
|
|
private renderActions() {
|
|
const tbody = document
|
|
.querySelector('#content_value a[href*="twstats"]')
|
|
?.closest('tbody');
|
|
if (!(tbody instanceof HTMLTableSectionElement)) {
|
|
return;
|
|
}
|
|
|
|
[
|
|
{
|
|
name: t('Show tribe changes'),
|
|
handler: this.showTribeChanges.bind(this),
|
|
},
|
|
{ name: t('Show history'), handler: this.showHistory.bind(this) },
|
|
{
|
|
name: t('Show ennoblements'),
|
|
handler: this.showEnnoblements.bind(this),
|
|
},
|
|
].forEach(({ name, handler }) => {
|
|
const tr = document.createElement('tr');
|
|
const td = document.createElement('td');
|
|
td.colSpan = 2;
|
|
const a = document.createElement('a');
|
|
a.innerText = name;
|
|
a.href = '#';
|
|
a.addEventListener('click', handler);
|
|
a.setAttribute('data-player-id', this.player.id.toString());
|
|
td.appendChild(a);
|
|
tr.appendChild(td);
|
|
tbody.appendChild(tr);
|
|
});
|
|
}
|
|
|
|
private async showTribeChanges(e: Event) {
|
|
e.preventDefault();
|
|
|
|
await new DialogTable(
|
|
DialogId.TRIBE_CHANGES,
|
|
[
|
|
{
|
|
header: t('Old tribe'),
|
|
accessor: (tc) =>
|
|
tc.player.tribe
|
|
? `<a href="${tc.player.tribe.profileUrl}">${tc.player.tribe.tag}</a>`
|
|
: '-',
|
|
},
|
|
{
|
|
header: t('New tribe'),
|
|
accessor: (tc) =>
|
|
tc.newTribe
|
|
? `<a href="${tc.newTribe.profileUrl}">${tc.newTribe.tag}</a>`
|
|
: '-',
|
|
},
|
|
{
|
|
header: t('Date/time'),
|
|
accessor: (tc) => new Date(tc.createdAt).toLocaleString(),
|
|
},
|
|
],
|
|
2,
|
|
(page: number, limit: number) => {
|
|
return this.connector.tribeChanges(page, limit);
|
|
}
|
|
).render();
|
|
}
|
|
|
|
private showHistory(e: Event) {
|
|
e.preventDefault();
|
|
}
|
|
|
|
private showEnnoblements(e: Event) {
|
|
e.preventDefault();
|
|
}
|
|
}
|
|
|
|
class ExtendedPlayerProfile {
|
|
connector: TWHelpConnector;
|
|
constructor(client: TWHelpClient) {
|
|
this.connector = new TWHelpConnector(
|
|
client,
|
|
window.game_data.market,
|
|
window.game_data.world,
|
|
this.getPlayerId()
|
|
);
|
|
}
|
|
|
|
async render() {
|
|
const player = await this.connector.player();
|
|
new UI(player, this.connector).render();
|
|
}
|
|
|
|
private getPlayerId() {
|
|
const str = new URLSearchParams(window.location.search).get('id');
|
|
if (!str) {
|
|
return window.game_data.player.id;
|
|
}
|
|
return parseInt(str);
|
|
}
|
|
}
|
|
|
|
(async () => {
|
|
if (window.game_data.screen !== SCREEN || window.game_data.mode !== MODE) {
|
|
return;
|
|
}
|
|
|
|
await new ExtendedPlayerProfile(
|
|
new TWHelpClient(process.env.TWHELP_API_BASE_URL ?? '')
|
|
).render();
|
|
})();
|