scripts/src/extendedPlayerProfile.ts

// Extended player profile

import { Player, TWHelpClient } from './lib/twhelp';
import { DialogTable } from './common/DialogTable';
import { InADayClient, InADayPlayerScore } from './lib/tw';

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 in a day ranks': 'Pokaż dzienne rankingi',
    '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',
    Village: 'Wioska',
    'Old owner': 'Stary właściciel',
    'New owner': 'Nowy właściciel',
    Points: 'Punkty',
    Barbarian: 'Barbarzyńska',
    Unknown: 'Nieznany',
    Server: 'Serwer',
    Deleted: 'Usunięty',
    Yes: 'Tak',
    No: 'Nie',
    Date: 'Data',
    Tribe: 'Plemię',
    Villages: 'Wioski',
    OD: 'Pokonani ogólny',
    ODA: 'Pokonani agresor',
    ODD: 'Pokonani obrońca',
    ODS: 'Pokonani wspierający',
    Type: 'Typ',
    Score: 'Wynik',
    'Units defeated while attacking': 'Jednostki pokonane w ataku',
    'Units defeated while defending': 'Jednostki pokonane w obronie',
    'Units defeated while supporting': 'Jednostki pokonane jako wspierający',
    'Resources plundered': 'Zrabowane surowce',
    'Villages plundered': 'Splądrowane wioski',
    'Resources gathered': 'Zebrane surowce',
    'Villages conquered': 'Przejęte wioski',
  },
};

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

  playerTribeChanges(page: number, limit: number) {
    return this.client.playerTribeChanges(this.version, this.server, this.id, {
      offset: (page - 1) * limit,
      limit: limit,
      sort: ['createdAt:desc', 'id:asc'],
    });
  }

  playerEnnoblements(page: number, limit: number) {
    return this.client.playerEnnoblements(this.version, this.server, this.id, {
      offset: (page - 1) * limit,
      limit: limit,
      sort: ['createdAt:desc'],
    });
  }

  playerHistory(page: number, limit: number) {
    return this.client.playerHistory(this.version, this.server, this.id, {
      offset: (page - 1) * limit,
      limit: limit,
      sort: ['date:desc'],
    });
  }
}

class InADayConnector {
  constructor(
    private readonly client: InADayClient,
    private readonly name: string
  ) {}

  player() {
    return this.client.player(this.name);
  }
}

enum DialogId {
  IN_A_DAY_RANKS = 'kichiyaki_in_a_day_ranks',
  TRIBE_CHANGES = 'kichiyaki_tribe_changes',
  ENNOBLEMENTS = 'kichiyaki_ennoblements',
  HISTORY = 'kichiyaki_history',
}

class UI {
  constructor(
    private readonly player: Player,
    private readonly twhelpConnector: TWHelpConnector,
    private readonly inADayConnector: InADayConnector
  ) {}

  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 in a day ranks'),
        handler: this.showInADayRanks.bind(this),
      },
      {
        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 showInADayRanks(e: Event) {
    e.preventDefault();

    const translationKeyByType: Record<string, string> = {
      killAtt: 'Units defeated while attacking',
      killDef: 'Units defeated while defending',
      killSup: 'Units defeated while supporting',
      lootRes: 'Resources plundered',
      lootVil: 'Villages plundered',
      scavenge: 'Resources gathered',
      conquer: 'Villages conquered',
    };

    await new DialogTable(
      DialogId.IN_A_DAY_RANKS,
      [
        {
          header: t('Type'),
          accessor: (s) =>
            s.type in translationKeyByType
              ? t(translationKeyByType[s.type])
              : s.type,
        },
        {
          header: t('Score'),
          accessor: (s) => (s.score ? s.score.toLocaleString() : '0'),
        },
        {
          header: t('Date'),
          accessor: (s) => (s.date ? s.date : '-'),
        },
      ],
      30,
      async () => {
        const player = await this.inADayConnector.player();
        if (!player) {
          return {
            data: [],
            total: 0,
          };
        }
        return {
          data: Object.entries(player?.scores)
            .map(([type, sc]) => ({
              type,
              ...(sc ? sc : {}),
            }))
            .sort((a, b) => (a.type > b.type ? 1 : -1)),
          total: Object.entries(player?.scores).length,
        };
      }
    ).render();
  }

  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(),
        },
      ],
      30,
      (page: number, limit: number) => {
        return this.twhelpConnector.playerTribeChanges(page, limit);
      }
    ).render();
  }

  private async showHistory(e: Event) {
    e.preventDefault();

    await new DialogTable(
      DialogId.HISTORY,
      [
        {
          header: t('Date'),
          accessor: (s) => s.date,
        },
        {
          header: t('Tribe'),
          accessor: (s) =>
            s.tribe
              ? `<a href="${s.tribe.profileUrl}">${s.tribe.tag}</a>`
              : '-',
        },
        {
          header: t('Points'),
          accessor: (s) =>
            `${s.points.toLocaleString()} (<strong>${s.rank}</strong>)`,
        },
        {
          header: t('Villages'),
          accessor: (s) => `${s.numVillages.toLocaleString()}`,
        },
        {
          header: t('OD'),
          accessor: (s) =>
            `${s.scoreTotal.toLocaleString()} (<strong>${
              s.rankTotal
            }</strong>)`,
        },
        {
          header: t('ODA'),
          accessor: (s) =>
            `${s.scoreAtt.toLocaleString()} (<strong>${s.rankAtt}</strong>)`,
        },
        {
          header: t('ODD'),
          accessor: (s) =>
            `${s.scoreDef.toLocaleString()} (<strong>${s.rankDef}</strong>)`,
        },
        {
          header: t('ODS'),
          accessor: (s) =>
            `${s.scoreSup.toLocaleString()} (<strong>${s.rankSup}</strong>)`,
        },
      ],
      30,
      (page: number, limit: number) => {
        return this.twhelpConnector.playerHistory(page, limit);
      }
    ).render();
  }

  private async showEnnoblements(e: Event) {
    e.preventDefault();

    await new DialogTable(
      DialogId.ENNOBLEMENTS,
      [
        {
          header: t('Village'),
          accessor: (e) =>
            `<a href="${e.village.profileUrl}">${e.village.fullName}</a>`,
        },
        {
          header: t('Points'),
          accessor: (e) => e.points.toLocaleString(),
        },
        {
          header: t('Old owner'),
          accessor: ({ village: { player } }) => {
            if (!player) {
              return t('Barbarian');
            }
            return `<a href="${player.profileUrl}">${player.name}</a>${
              player.tribe
                ? ` (<a href="${player.tribe.profileUrl}">${player.tribe.tag}</a>)`
                : ''
            }`;
          },
        },
        {
          header: t('New owner'),
          accessor: ({ newOwner }) => {
            if (!newOwner) {
              return t('Unknown');
            }
            return `<a href="${newOwner.profileUrl}">${newOwner.name}</a>${
              newOwner.tribe
                ? ` (<a href="${newOwner.tribe.profileUrl}">${newOwner.tribe.tag}</a>)`
                : ''
            }`;
          },
        },
        {
          header: t('Date/time'),
          accessor: (e) => new Date(e.createdAt).toLocaleString(),
        },
      ],
      30,
      (page: number, limit: number) => {
        return this.twhelpConnector.playerEnnoblements(page, limit);
      }
    ).render();
  }
}

class ExtendedPlayerProfile {
  private readonly twhelpConnector: TWHelpConnector;
  private readonly inADayConnector: InADayConnector;
  constructor(twhelpClient: TWHelpClient, inADayClient: InADayClient) {
    this.twhelpConnector = new TWHelpConnector(
      twhelpClient,
      window.game_data.market,
      window.game_data.world,
      this.getPlayerId()
    );

    this.inADayConnector = new InADayConnector(
      inADayClient,
      this.getPlayerName()
    );
  }

  async render() {
    const player = await this.twhelpConnector.player();
    new UI(player, this.twhelpConnector, this.inADayConnector).render();
  }

  private getPlayerId() {
    const str = new URLSearchParams(window.location.search).get('id');
    if (!str) {
      return window.game_data.player.id;
    }
    return parseInt(str);
  }

  private getPlayerName() {
    const header = document.querySelector('#map_toggler')?.closest('th');
    if (!(header instanceof HTMLTableCellElement)) {
      return window.game_data.player.name;
    }
    return header.innerText.trim();
  }
}

(async () => {
  if (window.game_data.screen !== SCREEN || window.game_data.mode !== MODE) {
    return;
  }

  await new ExtendedPlayerProfile(
    new TWHelpClient(process.env.TWHELP_API_BASE_URL ?? ''),
    new InADayClient()
  )
    .render()
    .catch((err) => {
      console.log(err);
    });
})();