feat: extended player profile

src/common/DialogTable.ts

@@ -5,6 +5,8 @@ const translations: Record<string, Record<string, string>> = {
     Loading: 'Wczytywanie',
     'Previous page': 'Poprzednia strona',
     'Next page': 'Następna strona',
+    'Something went wrong while loading the data':
+      'Coś poszło nie tak podczas wczytywania danych',
   },
 };
 
@@ -18,6 +20,9 @@ export type DialogTableColumn<T> = {
 };
 
 export class DialogTable<T> {
+  prevPageId: string;
+  selectId: string;
+  nextPageId: string;
   constructor(
     private readonly id: string,
     private readonly columns: DialogTableColumn<T>[],
@@ -26,7 +31,11 @@ export class DialogTable<T> {
       page: number,
       limit: number
     ) => Promise<ListResult<T>>
-  ) {}
+  ) {
+    this.prevPageId = `${this.id}_page_prev`;
+    this.selectId = `${this.id}_page_select`;
+    this.nextPageId = `${this.id}_page_next`;
+  }
 
   public async render() {
     await this.renderPage(1);
@@ -35,9 +44,28 @@ export class DialogTable<T> {
   private async renderPage(page: number) {
     window.Dialog.show(`${this.id}_loading`, `<p>${t('Loading')}...</p>`);
 
-    const { data, total } = await this.loadData(page, this.limit);
+    try {
+      const { data, total } = await this.loadData(page, this.limit);
 
+      window.Dialog.show(
+        this.id,
+        `
+      ${this.buildPagination(page, total)}
+      ${this.buildTable(data)}
+    `
+      );
+
+      this.addEventListeners(page);
+    } catch (err) {
+      console.error(err);
+      window.Dialog.close();
+      window.UI.ErrorMessage(t('Something went wrong while loading the data'));
+    }
+  }
+
+  private buildPagination(page: number, total: number): string {
     const maxPage = Math.ceil(total / this.limit);
+
     const pageOpts = [];
     for (let i = 1; i <= (page > maxPage ? page : maxPage); i++) {
       pageOpts.push(
@@ -47,26 +75,25 @@ export class DialogTable<T> {
       );
     }
 
-    const prevPageId = `${this.id}_page_prev`;
+    return `
-    const selectId = `${this.id}_page_select`;
-    const nextPageId = `${this.id}_page_next`;
-
-    window.Dialog.show(
-      this.id,
-      `
       <div style="display: flex; flex-direction: row; align-items: center; justify-content: center; margin-bottom: 10px">
           <button title="${t(
             'Previous page'
-          )}" style="margin-right: 5px" class="btn" id="${prevPageId}"${
+          )}" style="margin-right: 5px" class="btn" id="${this.prevPageId}"${
-        page <= 1 ? ' disabled' : ''
+      page <= 1 ? ' disabled' : ''
-      }>&lt;</button>
+    }>&lt;</button>
-          <select style="margin-right: 5px" id="${selectId}">
+          <select style="margin-right: 5px" id="${this.selectId}">
               ${pageOpts.join('')}
           </select>
-          <button title="${t('Next page')}" class="btn" id="${nextPageId}"${
+          <button title="${t('Next page')}" class="btn" id="${
-        page >= maxPage ? ' disabled' : ''
+      this.nextPageId
-      }>&gt;</button>
+    }"${page >= maxPage ? ' disabled' : ''}>&gt;</button>
-      </div>
+      </div>    
+    `;
+  }
+
+  private buildTable(data: T[]) {
+    return `
       <table style="width: 100%" class="vis">
         <tbody>
           <tr>
@@ -84,18 +111,19 @@ export class DialogTable<T> {
             )
             .join('')}
         </tbody>
-      </table>
+      </table>      
-    `
+      `;
-    );
+  }
 
+  private addEventListeners(page: number) {
     document
-      .querySelector('#' + prevPageId)
+      .querySelector('#' + this.prevPageId)
-      ?.addEventListener('click', (e: Event) => {
+      ?.addEventListener('click', () => {
         this.renderPage(page - 1);
       });
 
     document
-      .querySelector('#' + selectId)
+      .querySelector('#' + this.selectId)
       ?.addEventListener('change', (e: Event) => {
         if (!(e.currentTarget instanceof HTMLSelectElement)) {
           return;
@@ -105,8 +133,8 @@ export class DialogTable<T> {
       });
 
     document
-      .querySelector('#' + nextPageId)
+      .querySelector('#' + this.nextPageId)
-      ?.addEventListener('click', (e: Event) => {
+      ?.addEventListener('click', () => {
         this.renderPage(page + 1);
       });
   }

src/extendedPlayerProfile.ts

@@ -2,7 +2,6 @@
 
 import { Player, TWHelpClient } from './lib/twhelp';
 import { DialogTable } from './common/DialogTable';
-import { buildURL } from './lib/twstats';
 
 const SCREEN = 'info_player';
 const MODE = null;
@@ -14,7 +13,6 @@ const translations: Record<string, Record<string, string>> = {
     'Best rank': 'Najlepszy ranking',
     'Most points': 'Najwięcej punktów',
     'Most villages': 'Najwięcej wiosek',
-    'Show other servers': 'Pokaż inne światy',
     'Show tribe changes': 'Pokaż zmiany plemion',
     'Show history': 'Pokaż historię',
     'Show ennoblements': 'Pokaż przejęcia',
@@ -83,7 +81,6 @@ class TWHelpConnector {
 }
 
 enum DialogId {
-  OTHER_SERVERS = 'kichiyaki_other_servers',
   TRIBE_CHANGES = 'kichiyaki_tribe_changes',
   ENNOBLEMENTS = 'kichiyaki_ennoblements',
   HISTORY = 'kichiyaki_history',
@@ -148,10 +145,6 @@ class UI {
     }
 
     [
-      {
-        name: t('Show other servers'),
-        handler: this.showOtherServers.bind(this),
-      },
       {
         name: t('Show tribe changes'),
         handler: this.showTribeChanges.bind(this),
@@ -176,39 +169,6 @@ class UI {
     });
   }
 
-  private async showOtherServers(e: Event) {
-    e.preventDefault();
-
-    await new DialogTable(
-      DialogId.OTHER_SERVERS,
-      [
-        {
-          header: t('Server'),
-          accessor: (s) =>
-            `<a href="${buildURL({
-              entity: 'player',
-              server: s.key,
-              id: this.player.id,
-            })}">${s.key}</a>`,
-        },
-        {
-          header: t('Deleted'),
-          accessor: (s) =>
-            s.deletedAt
-              ? `${t('Yes')} (${new Date(s.deletedAt).toLocaleString()})`
-              : t('No'),
-        },
-      ],
-      this.player.otherServers.length,
-      () => {
-        return Promise.resolve({
-          data: this.player.otherServers,
-          total: this.player.otherServers.length,
-        });
-      }
-    ).render();
-  }
-
   private async showTribeChanges(e: Event) {
     e.preventDefault();
 
@@ -314,25 +274,29 @@ class UI {
         },
         {
           header: t('Old owner'),
-          accessor: (e) =>
+          accessor: ({ village: { player } }) => {
-            e.oldOwner
+            if (!player) {
-              ? `<a href="${e.oldOwner.profileUrl}">${e.oldOwner.name}</a>${
+              return t('Barbarian');
-                  e.oldOwner.tribe
+            }
-                    ? ` (<a href="${e.oldOwner.tribe.profileUrl}">${e.oldOwner.tribe.tag}</a>)`
+            return `<a href="${player.profileUrl}">${player.name}</a>${
-                    : ''
+              player.tribe
-                }`
+                ? ` (<a href="${player.tribe.profileUrl}">${player.tribe.tag}</a>)`
-              : t('Barbarian'),
+                : ''
+            }`;
+          },
         },
         {
           header: t('New owner'),
-          accessor: (e) =>
+          accessor: ({ newOwner }) => {
-            e.newOwner
+            if (!newOwner) {
-              ? `<a href="${e.newOwner.profileUrl}">${e.newOwner.name}</a>${
+              return t('Unknown');
-                  e.newOwner.tribe
+            }
-                    ? ` (<a href="${e.newOwner.tribe.profileUrl}">${e.newOwner.tribe.tag}</a>)`
+            return `<a href="${newOwner.profileUrl}">${newOwner.name}</a>${
-                    : ''
+              newOwner.tribe
-                }`
+                ? ` (<a href="${newOwner.tribe.profileUrl}">${newOwner.tribe.tag}</a>)`
-              : t('Unknown'),
+                : ''
+            }`;
+          },
         },
         {
           header: t('Date/time'),
@@ -379,5 +343,9 @@ class ExtendedPlayerProfile {
 
   await new ExtendedPlayerProfile(
     new TWHelpClient(process.env.TWHELP_API_BASE_URL ?? '')
-  ).render();
+  )
+    .render()
+    .catch((err) => {
+      console.log(err);
+    });
 })();

src/global.d.ts

@@ -30,6 +30,7 @@ declare global {
     };
     Dialog: {
       show: (id: string, html: string) => void;
+      close: () => void;
     };
   }
 }

src/lib/twhelp.ts

@@ -10,11 +10,6 @@ export type Version = {
   timezone: string;
 };
 
-export type PlayerServer = {
-  key: string;
-  deletedAt: string | null;
-};
-
 export type Player = {
   id: number;
   bestRank: number;
@@ -25,7 +20,6 @@ export type Player = {
   mostVillagesAt: string;
   lastActivityAt: string;
   createdAt: string;
-  otherServers: PlayerServer[];
 };
 
 export type TribeMeta = {
@@ -49,6 +43,7 @@ export type VillageMeta = {
   x: number;
   y: number;
   continent: string;
+  player: PlayerMeta | null;
 };
 
 export type TribeChange = {
@@ -62,7 +57,6 @@ export type Ennoblement = {
   id: number;
   points: number;
   newOwner: PlayerMeta | null;
-  oldOwner: PlayerMeta | null;
   village: VillageMeta;
   createdAt: string;
 };