feat: extended tribe profile

.terserrc.js

@@ -34,6 +34,18 @@ const preambles = {
 // @icon         https://www.google.com/s2/favicons?domain=plemiona.pl
 // @grant        none
 // @run-at       document-end
+// ==/UserScript==`,
+  'extended-tribe-profile': `// ==UserScript==
+// @name         Extended tribe profile
+// @version      1.0.0
+// @description  Adds additional info and actions on a tribe overview.
+// @author       Dawid Wysokiński - Kichiyaki - contact@dwysokinski.me
+// @match        https://*/game.php?*screen=info_ally*
+// @downloadURL  ${process.env.PUBLIC_URL}/extended-tribe-profile.user.js
+// @updateURL    ${process.env.PUBLIC_URL}/extended-tribe-profile.user.js
+// @icon         https://www.google.com/s2/favicons?domain=plemiona.pl
+// @grant        none
+// @run-at       document-end
 // ==/UserScript==`,
 };
 

package.json

@@ -10,6 +10,8 @@
     "build:extended-map-popup-quickbar": "yarn build-single ./src/extended-map-popup.quickbar.ts",
     "build:extended-village-profile-user": "PREAMBLE=extended-village-profile yarn build-single ./src/extended-village-profile.user.ts",
     "build:extended-village-profile-quickbar": "yarn build-single ./src/extended-village-profile.quickbar.ts",
+    "build:extended-tribe-profile-user": "PREAMBLE=extended-tribe-profile yarn build-single ./src/extended-tribe-profile.user.ts",
+    "build:extended-tribe-profile-quickbar": "yarn build-single ./src/extended-tribe-profile.quickbar.ts",
     "build": "npm-run-all build:*",
     "lint": "eslint src/**/*.ts"
   },

src/extended-tribe-profile.quickbar.ts

@@ -0,0 +1,2 @@
+// Parcel doesn't have an option to rename output files
+import './extended-tribe-profile.user';

src/extended-tribe-profile.user.ts

@@ -0,0 +1,241 @@
+import { Tribe, TribeSnapshot, TWHelpClient } from './lib/twhelp';
+import { createTranslationFunc } from './utils';
+
+const t = createTranslationFunc({
+  pl_PL: {
+    'Created at': 'Data/czas utworzenia',
+    Dominance: 'Dominacja',
+    'Best rank': 'Najwyższy ranking',
+    'Most points': 'Najwięcej punktów',
+    'Most villages': 'Najwięcej wiosek',
+    Changes: 'Zmiany',
+    Points: 'Punkty',
+    Rank: 'Ranking',
+    Villages: 'Wioski',
+    OD: 'Pokonani ogólnie',
+    'OD - rank': 'Pokonani ogólnie - ranking',
+    ODA: 'Pokonani agresor',
+    'ODA - rank': 'Pokonani agresor - ranking',
+    ODD: 'Pokonani obrońca',
+    'ODD - rank': 'Pokonani obrońca - ranking',
+  },
+});
+
+class TWHelpConnector {
+  constructor(
+    private readonly client: TWHelpClient,
+    private readonly version: string,
+    private readonly server: string,
+    private readonly id: number
+  ) {}
+
+  tribe() {
+    return this.client.tribe(this.version, this.server, this.id);
+  }
+
+  async latestSnapshot() {
+    const history = await this.tribeHistory(1, 1);
+    return history.data.length > 0 ? history.data[0] : null;
+  }
+
+  tribeHistory(page: number, limit: number) {
+    return this.client.tribeHistory(this.version, this.server, this.id, {
+      offset: (page - 1) * limit,
+      limit,
+      sort: ['date:desc'],
+    });
+  }
+}
+
+class UI {
+  constructor(
+    private readonly tribe: Tribe,
+    private readonly latestSnapshot: TribeSnapshot | null,
+    private readonly twhelpConnector: TWHelpConnector
+  ) {}
+
+  public render() {
+    this.renderAdditionalInfo();
+    this.renderStats();
+  }
+
+  private renderAdditionalInfo() {
+    const tbody = document
+      .querySelector('#content_value a[href*="twstats"]')
+      ?.closest('tbody');
+    if (!(tbody instanceof HTMLTableSectionElement)) {
+      return;
+    }
+
+    tbody.insertAdjacentHTML(
+      'beforeend',
+      `
+    <tr>
+        <td>${t('Created at')}:</td>
+        <td>${new Date(this.tribe.createdAt).toLocaleString()}</td>
+    </tr>
+    <tr>
+        <td>${t('Dominance')}:</td>
+        <td>${this.tribe.dominance.toFixed(2)}%</td>
+    </tr>
+    <tr>
+        <td>${t('Best rank')}:</td>
+        <td>${this.tribe.bestRank} (${new Date(
+        this.tribe.bestRankAt
+      ).toLocaleString()})</td>
+    </tr>
+    <tr>
+        <td>${t('Most points')}:</td>
+        <td>${this.tribe.mostPoints.toLocaleString()} (${new Date(
+        this.tribe.mostPointsAt
+      ).toLocaleString()})</td>
+    </tr>
+    <tr>
+        <td>${t('Most villages')}:</td>
+        <td>${this.tribe.mostVillages.toLocaleString()} (${new Date(
+        this.tribe.mostVillagesAt
+      ).toLocaleString()})</td>
+    </tr>
+  `
+    );
+  }
+
+  private renderStats() {
+    const td = document.querySelector(
+      '#content_value td[valign="top"]:nth-child(2)'
+    );
+    if (!(td instanceof HTMLTableCellElement)) {
+      return;
+    }
+
+    const rows = [
+      {
+        header: t('Points'),
+        value: this.tribe.allPoints - (this.latestSnapshot?.allPoints ?? 0),
+      },
+      {
+        header: t('Dominance'),
+        value: this.tribe.dominance - (this.latestSnapshot?.dominance ?? 0),
+      },
+      {
+        header: t('Rank'),
+        value: this.tribe.rank - (this.latestSnapshot?.rank ?? 0),
+        rank: true,
+      },
+      {
+        header: t('Villages'),
+        value: this.tribe.numVillages - (this.latestSnapshot?.numVillages ?? 0),
+      },
+      {
+        header: t('ODA'),
+        value: this.tribe.scoreAtt - (this.latestSnapshot?.scoreAtt ?? 0),
+      },
+      {
+        header: t('ODA - rank'),
+        value: this.tribe.rankAtt - (this.latestSnapshot?.rankAtt ?? 0),
+        rank: true,
+      },
+      {
+        header: t('ODD'),
+        value: this.tribe.scoreDef - (this.latestSnapshot?.scoreDef ?? 0),
+      },
+      {
+        header: t('ODD - rank'),
+        value: this.tribe.rankDef - (this.latestSnapshot?.rankDef ?? 0),
+        rank: true,
+      },
+      {
+        header: t('OD'),
+        value: this.tribe.scoreTotal - (this.latestSnapshot?.scoreTotal ?? 0),
+      },
+      {
+        header: t('OD - rank'),
+        value: this.tribe.rankTotal - (this.latestSnapshot?.rankTotal ?? 0),
+        rank: true,
+      },
+    ];
+
+    td.insertAdjacentHTML(
+      'afterbegin',
+      `
+    <table style="width: 100%" class="vis">
+       <tbody>
+          <tr>
+            <th colspan="2">
+              ${t('Changes')}
+            </th>
+          </tr>
+          ${rows
+            .map(
+              (r) => `
+            <tr>
+             <td>${r.header}</td>
+             <td style="color: #000; background-color: ${this.getStatBgColor(
+               r.value,
+               r.rank
+             )}">${Math.abs(r.value).toLocaleString()}</td>
+            </tr>
+          `
+            )
+            .join('')}
+      </tbody>
+    </table>
+  `
+    );
+  }
+
+  private getStatBgColor(val: number, rank?: boolean): string {
+    if ((val > 0 && !rank) || (val < 0 && rank)) {
+      return '#0f0';
+    }
+    if ((val < 0 && !rank) || (val > 0 && rank)) {
+      return '#f00';
+    }
+    return '#808080';
+  }
+}
+
+class ExtendedTribeProfile {
+  private readonly twhelpConnector: TWHelpConnector;
+
+  constructor(twhelpClient: TWHelpClient) {
+    this.twhelpConnector = new TWHelpConnector(
+      twhelpClient,
+      window.game_data.market,
+      window.game_data.world,
+      this.getTribeId()
+    );
+  }
+
+  async run() {
+    const tribe = await this.twhelpConnector.tribe();
+    const latestSnapshot = await this.twhelpConnector.latestSnapshot();
+
+    await new UI(tribe, latestSnapshot, this.twhelpConnector).render();
+  }
+
+  private getTribeId() {
+    const str = new URLSearchParams(window.location.search).get('id');
+    if (!str) {
+      throw new Error(`couldn't extract tribe id`);
+    }
+    return parseInt(str);
+  }
+}
+
+(async () => {
+  if (
+    window.game_data.screen !== 'info_ally' ||
+    window.game_data.mode !== null
+  ) {
+    return;
+  }
+
+  await new ExtendedTribeProfile(
+    new TWHelpClient(process.env.TWHELP_API_BASE_URL ?? '')
+  )
+    .run()
+    .catch((err) => {
+      console.log(err);
+    });
+})();

src/lib/twhelp.ts

@@ -4,18 +4,38 @@ import axios, {
   RawAxiosResponseHeaders,
 } from 'axios';
 
-export type Version = {
-  code: string;
-  host: string;
-  name: string;
-  timezone: string;
-};
-
 export type ServerMeta = {
   key: string;
   open: boolean;
 };
 
+export type Tribe = {
+  id: number;
+  name: string;
+  tag: string;
+  numMembers: number;
+  numVillages: number;
+  points: number;
+  allPoints: number;
+  rank: number;
+  dominance: number;
+  rankAtt: number;
+  scoreAtt: number;
+  rankDef: number;
+  scoreDef: number;
+  rankTotal: number;
+  scoreTotal: number;
+  profileUrl: string;
+  bestRank: number;
+  bestRankAt: string;
+  mostPoints: number;
+  mostPointsAt: string;
+  mostVillages: number;
+  mostVillagesAt: string;
+  createdAt: string;
+  deletedAt: string | null;
+};
+
 export type TribeMeta = {
   id: number;
   name: string;
@@ -83,6 +103,23 @@ export type Ennoblement = {
   createdAt: string;
 };
 
+export type TribeSnapshot = {
+  id: number;
+  numMembers: number;
+  numVillages: number;
+  points: number;
+  allPoints: number;
+  rank: number;
+  dominance: number;
+  rankAtt: number;
+  scoreAtt: number;
+  rankDef: number;
+  scoreDef: number;
+  rankTotal: number;
+  scoreTotal: number;
+  date: string;
+};
+
 export type PlayerSnapshot = {
   id: number;
   tribe: TribeMeta | null;
@@ -145,6 +182,12 @@ export type ListEnnoblementsParams = {
   sort?: string[];
 };
 
+export type ListTribeSnapshotsParams = {
+  offset?: number;
+  limit?: number;
+  sort?: string[];
+};
+
 export type ListPlayerSnapshotsParams = {
   offset?: number;
   limit?: number;
@@ -166,14 +209,6 @@ export class TWHelpClient {
     });
   }
 
-  public async versions(): Promise<ListResult<Version>> {
-    const resp = await this.client.get('/api/v1/versions');
-    return {
-      data: resp.data.data,
-      total: this.parseTotal(resp.headers),
-    };
-  }
-
   public async serverConfig(
     version: string,
     server: string
@@ -191,6 +226,33 @@ export class TWHelpClient {
     return resp.data.data;
   }
 
+  public async tribe(
+    version: string,
+    server: string,
+    id: number
+  ): Promise<Tribe> {
+    const resp = await this.client.get(
+      `/api/v1/versions/${version}/servers/${server}/tribes/${id}`
+    );
+    return resp.data.data;
+  }
+
+  public async tribeHistory(
+    version: string,
+    server: string,
+    id: number,
+    queryParams?: ListTribeSnapshotsParams
+  ): Promise<ListResult<TribeSnapshot>> {
+    const queryString = queryParams ? this.buildQueryString(queryParams) : '';
+    const resp = await this.client.get(
+      `/api/v1/versions/${version}/servers/${server}/tribes/${id}/history?${queryString}`
+    );
+    return {
+      data: resp.data.data,
+      total: this.parseTotal(resp.headers),
+    };
+  }
+
   public async player(
     version: string,
     server: string,