feat: extended map popup

src/extended-map-popup.user.ts

@@ -6,6 +6,7 @@ import {
   UnitInfo,
 } from './lib/twhelp';
 import { Cache, InMemoryStorage } from './lib/cache';
+import { calcDistance, calcLoyalty } from './lib/tw';
 
 declare global {
   interface Window {
@@ -70,7 +71,7 @@ class TWHelpConnector {
       return this.inMemoryCache.get<Ennoblement | null>(key);
     }
 
-    return this.inMemoryCache.load(key, 60, async () => {
+    return this.inMemoryCache.load(key, 86400, async () => {
       const ennoblements = await this.client.villageEnnoblements(
         this.version,
         this.server,
@@ -86,6 +87,9 @@ class TWHelpConnector {
 }
 
 class Popup {
+  private static readonly ID_ENNOBLED_AT = 'extended_map_popup_ennobled_at';
+  private static readonly ID_LOYALTY = 'extended_map_popup_loyalty';
+
   constructor(
     private readonly config: ServerConfig,
     private readonly unitInfo: UnitInfo,
@@ -104,20 +108,23 @@ class Popup {
   private async loadVillage(villageId: string) {
     window.TWMap.popup._loadVillage(villageId);
 
-    await this.displayLatestEnnoblement(parseInt(villageId), false);
+    await this.displayLatestEnnoblementAndLoyalty(parseInt(villageId), false);
   }
 
   private async display(village: { id: string }, x: number, y: number) {
     window.TWMap.popup._displayForVillage(village, x, y);
+
     this.displayArrivalTimes(x, y);
-    await this.displayLatestEnnoblement(parseInt(village.id), true);
+    this.displayCanSendNobleman(x, y);
+    await this.displayLatestEnnoblementAndLoyalty(parseInt(village.id), true);
   }
 
   private displayArrivalTimes(x: number, y: number) {
-    const dist = Math.hypot(
-      x - this.currentVillage.x,
-      y - this.currentVillage.y
-    );
+    const dist = calcDistance({ x, y }, this.currentVillage);
+    if (dist <= 0) {
+      return;
+    }
+
     const imgs = document.querySelectorAll(
       '#map_popup #info_content tbody img[src*="unit/unit_"]'
     );
@@ -160,7 +167,31 @@ class Popup {
     tbody.appendChild(tr);
   }
 
-  private async displayLatestEnnoblement(id: number, cacheOnly: boolean) {
+  private displayCanSendNobleman(x: number, y: number) {
+    const dist = calcDistance({ x, y }, this.currentVillage);
+    if (dist <= 0) {
+      return;
+    }
+
+    const tbody = document.querySelector('#map_popup #info_content tbody');
+    if (!(tbody instanceof HTMLTableSectionElement)) {
+      return;
+    }
+
+    const tr = document.createElement('tr');
+
+    tr.innerHTML = `
+      <td>Can send a nobleman:</td>
+      <td>${dist <= this.config.snob.maxDist ? 'Yes' : 'No'}</td>
+    `;
+
+    tbody.appendChild(tr);
+  }
+
+  private async displayLatestEnnoblementAndLoyalty(
+    id: number,
+    cacheOnly: boolean
+  ) {
     const ennoblement = await this.connector.latestEnnoblement(id, cacheOnly);
 
     const tbody = document.querySelector('#map_popup #info_content tbody');
@@ -168,23 +199,35 @@ class Popup {
       return;
     }
 
-    let tr = tbody.querySelector('#extended_map_popup_ennobled_at');
-    if (!tr) {
-      tr = document.createElement('tr');
-      tr.id = 'extended_map_popup_ennobled_at';
-      tbody.appendChild(tr);
-    }
-
-    tr.innerHTML = `
-     <td>
-      Ennobled at:
-    </td>
-    <td>
-      ${
-        ennoblement ? new Date(ennoblement.createdAt).toLocaleString() : 'Never'
+    [
+      {
+        id: Popup.ID_ENNOBLED_AT,
+        title: 'Ennobled at',
+        value: ennoblement
+          ? new Date(ennoblement.createdAt).toLocaleString()
+          : 'Never',
+      },
+      {
+        id: Popup.ID_LOYALTY,
+        title: 'Loyalty',
+        value: calcLoyalty(
+          ennoblement?.createdAt ?? new Date(0),
+          this.config.speed
+        ),
+      },
+    ].forEach(({ id, title, value }) => {
+      let tr = tbody.querySelector('#' + id);
+      if (!tr) {
+        tr = document.createElement('tr');
+        tr.id = id;
+        tbody.appendChild(tr);
       }
-    </td>
+
+      tr.innerHTML = `
+       <td>${title}:</td>
+       <td>${value}</td>
 `;
+    });
   }
 }
 

src/lib/tw/constants.ts

@@ -0,0 +1,2 @@
+export const LOYALTY_AFTER_CONQUER = 25;
+export const MAX_LOYALTY = 100;

src/lib/tw/in-a-day-client.ts

@@ -1,6 +1,6 @@
 import axios, { AxiosInstance } from 'axios';
 import random from 'lodash/random';
-import { wait } from '../utils';
+import { wait } from '../../utils';
 
 type InADayScore = {
   player: {

src/lib/tw/index.ts

@@ -0,0 +1,3 @@
+export * from './in-a-day-client';
+export * from './utils';
+export * from './constants';

src/lib/tw/utils.ts

@@ -0,0 +1,22 @@
+import differenceInMinutes from 'date-fns/differenceInMinutes';
+import { LOYALTY_AFTER_CONQUER, MAX_LOYALTY } from './constants';
+
+export const calcLoyalty = (
+  ennobledAt: Date | string | number,
+  speed: number
+) => {
+  const loyalty =
+    LOYALTY_AFTER_CONQUER +
+    Math.abs(differenceInMinutes(new Date(ennobledAt), new Date())) *
+      (speed / 60);
+  return loyalty > MAX_LOYALTY ? MAX_LOYALTY : Math.floor(loyalty);
+};
+
+export type Coords = {
+  x: number;
+  y: number;
+};
+
+export const calcDistance = (coords1: Coords, coords2: Coords) => {
+  return Math.hypot(coords1.x - coords2.x, coords1.y - coords2.y);
+};