add lastEnnoblements.js

lastEnnoblements.js

@@ -0,0 +1,244 @@
+// ==UserScript==
+// @name         Show last ennoblements
+// @namespace    https://gist.github.com/Kichiyaki/3c273582cc6856512e22c86c375f795a
+// @version      0.1
+// @description  Show last ennoblements
+// @author       http://dawid-wysokinski.pl/
+// @match        *://*.plemiona.pl/game.php*
+// @grant        none
+// ==/UserScript==
+
+const SERVER = window.location.host.split('.')[0];
+const CONTAINER_ID = 'kiszkowaty_show_last_ennoblements';
+let container = undefined;
+const query = `
+    query ennoblements($server: String!) {
+      ennoblements(server: $server) {
+        newOwner {
+          id
+          name
+          tribe {
+            id
+            name
+            tag
+          }
+        }
+        oldOwner {
+          id
+          name
+          tribe {
+            id
+            name
+            tag
+          }
+        }
+        ennobledAt
+        village {
+          id
+          name
+          x
+          y
+        }
+      }
+    }
+  `;
+
+const wait = (t = 1000) => new Promise((resolve) => setTimeout(resolve, t));
+
+const loadLastEnnoblementsFromCache = () => {
+  const json = localStorage.getItem(CONTAINER_ID + '_cache');
+  let obj = {};
+  if (json) {
+    obj = JSON.parse(json);
+  }
+  return obj;
+};
+
+const cacheEnnoblements = (data = {}) => {
+  localStorage.setItem(CONTAINER_ID + '_cache', JSON.stringify(data));
+};
+
+const loadLastEnnoblements = () => {
+  return fetch('https://api.tribalwarshelp.com/graphql', {
+    method: 'POST',
+    body: JSON.stringify({
+      query,
+      variables: {
+        server: SERVER,
+      },
+    }),
+    headers: {
+      'Content-Type': 'application/json',
+    },
+  })
+    .then((res) => {
+      return res.json();
+    })
+    .then(({ data, errors }) => {
+      if (errors && Array.isArray(errors) && errors.length > 0) {
+        throw new Error(errors[0].message);
+      }
+      cacheEnnoblements(data);
+      return new Promise((resolve) => resolve(data));
+    });
+};
+
+//draggable
+const loadCoordinatesFromLocalStorage = () => {
+  const data = localStorage.getItem(CONTAINER_ID + '_drag');
+  let coords = {};
+  if (data) {
+    coords = JSON.parse(data);
+  }
+  if (!coords.x) {
+    coords.x = 5;
+  }
+  if (!coords.y) {
+    coords.y = 32;
+  }
+  return coords;
+};
+
+const saveCoordinatesInLocalStorage = (x, y) => {
+  localStorage.setItem(CONTAINER_ID + '_drag', JSON.stringify({ x, y }));
+};
+
+const { x: startX, y: startY } = loadCoordinatesFromLocalStorage();
+let initialX = startX;
+let initialY = startY;
+let currentX = startX;
+let currentY = startY;
+let xOffset = startX;
+let yOffset = startY;
+
+const startDrag = (e) => {
+  initialX = e.clientX - xOffset;
+  initialY = e.clientY - yOffset;
+  container.style.pointer = 'move';
+  container.addEventListener('mousemove', dragElement);
+};
+
+const dragElement = (e) => {
+  currentX = e.clientX - initialX;
+  currentY = e.clientY - initialY;
+
+  container.style.left = currentX + 'px';
+  container.style.top = currentY + 'px';
+
+  xOffset = currentX;
+  yOffset = currentY;
+};
+
+const stopDrag = () => {
+  initialX = currentX;
+  initialY = currentY;
+  saveCoordinatesInLocalStorage(initialX, initialY);
+  container.style.pointer = 'auto';
+  container.removeEventListener('mousemove', dragElement);
+};
+
+const formatPlayerHTML = (player) => {
+  return player && player.name
+    ? `<a href="${
+        window.location.origin +
+        TribalWars.buildURL('', { screen: 'info_player', id: player.id })
+      }">${player.name}</a> (${
+        player.tribe && player.tribe.tag
+          ? `<a href="${
+              window.location.origin +
+              TribalWars.buildURL('', {
+                screen: 'info_ally',
+                id: player.tribe.id,
+              })
+            }">${player.tribe.tag}</a>`
+          : '-'
+      })`
+    : '-';
+};
+
+const formatVillageHTML = (village) => {
+  const continent = 'K' + String(village.y)[0] + String(village.x)[0];
+  return `<a href="${
+    window.location.origin +
+    TribalWars.buildURL('', { screen: 'info_village', id: village.id })
+  }">${village.name} (${village.x}|${village.y}) ${continent}</a>`;
+};
+
+const formatDate = (date) => {
+  return new Date(date).toLocaleDateString('pl', {
+    year: 'numeric',
+    month: 'numeric',
+    day: 'numeric',
+    hour: 'numeric',
+    minute: 'numeric',
+    second: 'numeric',
+  });
+};
+
+const render = (ennoblements = []) => {
+  if (!container) {
+    container = document.createElement('aside');
+    container.id = CONTAINER_ID;
+    container.style.maxHeight = '150px';
+    container.style.maxWidth = '100%';
+    container.style.marginTop = '15px';
+    container.style.overflowY = 'scroll';
+    container.style.display = 'block';
+    container.style.position = 'fixed';
+    container.style.left = initialX + 'px';
+    container.style.top = initialY + 'px';
+    container.style.zIndex = '10000000';
+    container.style.cursor = 'move';
+    container.classList.add('content-border');
+    container.addEventListener('mousedown', startDrag);
+    container.addEventListener('mouseup', stopDrag);
+    container.addEventListener('mouseleave', stopDrag);
+    document.body.appendChild(container);
+  }
+
+  container.innerHTML = '';
+
+  const heading = document.createElement('h3');
+  heading.style.textAlign = 'center';
+  heading.innerHTML = `Ostatnie podboje na świecie ${SERVER}`;
+  container.appendChild(heading);
+
+  const table = document.createElement('table');
+  table.classList.add('vis');
+  table.innerHTML = `
+        <thead>
+          <tr>
+            <th>Wioska</th>
+            <th>Podbił</th>
+            <th>Stracił</th>
+            <th>Data</th>
+          </tr>
+        </thead>
+        <tbody>
+          ${ennoblements.reverse().map((ennoblement) => {
+            return `
+              <tr>
+                <td>${formatVillageHTML(ennoblement.village)}</td>
+                <td>${formatPlayerHTML(ennoblement.newOwner)}</td>
+                <td>${formatPlayerHTML(ennoblement.oldOwner)}</td>
+                <td>${formatDate(ennoblement.ennobledAt)}</td>
+              </tr>
+            `;
+          })}
+        </tbody>
+    `;
+  container.appendChild(table);
+};
+
+(async function () {
+  try {
+    const cache = loadLastEnnoblementsFromCache();
+    if (Array.isArray(cache.ennoblements) && cache.ennoblements.length > 0) {
+      render(cache.ennoblements);
+    }
+    const { ennoblements } = await loadLastEnnoblements();
+    render(ennoblements);
+  } catch (error) {
+    console.log(error);
+  }
+})();