Add partial cache invalidation and wrap up virology

src/index.ts

@@ -46,6 +46,11 @@ async function load() {
       icons.removeChild(icons.querySelector(`img[data-tab=${tab.page}]`));
     });
   });
+
+  // DEV: If you only need one page just comment the block above and uncomment this:
+  // manager.createSection("Medical");
+  // const promises = [manager.openTab("Medical", "Infections", {})];
+
   Promise.all(promises).then(() => {
     // Remove app-wide loading
     manager.setLoading(false);

src/scripts/index.ts

@@ -5,7 +5,10 @@ import { processGlobal } from "./pages/global";
 
 // This is used for cache busting when userscript changes significantly.
 // Only change it when you made changes to the processHTML part!
-export const CURRENT_VERSION = "bb7abd544a19369d4b6b7e3dde3eb3cc34c023d4";
+export const PAGE_VERSIONS = {
+  Infections: "fcebeda2fddb46d924f4538cd9c0daeb55aa4c9b",
+  $DEFAULT: "bb7abd544a19369d4b6b7e3dde3eb3cc34c023d4",
+};
 
 const MAX_WIDTH = 440;
 
@@ -16,6 +19,9 @@ export function processHTML(root: HTMLElement, docname: string): void {
     case "Guide_to_chemistry":
       processChemistry(root);
       break;
+    case "Infections":
+      processVirology(root);
+      break;
     default:
   }
 }
@@ -39,9 +45,6 @@ export function postProcessHTML(root: HTMLElement, docname: string): void {
   });
 
   switch (docname) {
-    case "Infections":
-      processVirology(root);
-      break;
     default:
   }
 }
@@ -63,7 +66,7 @@ export function bindFunctions(root: HTMLElement, docname: string): void {
 }
 
 export default {
-  CURRENT_VERSION,
+  PAGE_VERSIONS,
   postProcessHTML,
   processHTML,
   bindFunctions,

src/scripts/pages/virology.ts

@@ -27,8 +27,45 @@ export function processVirology(root: HTMLElement): void {
   const symptomsTable = root.querySelector<HTMLElement>(
     "#Symptoms_Table .wikitable"
   );
-  const symptoms = parseTable(symptomsTable);
-  //symptomsTable.replaceWith(document.createElement("span"));
+  const symptoms = parseTable(symptomsTable)
+    .sort(
+      (a, b) =>
+        parseInt(a["Level"].textContent, 10) -
+        parseInt(b["Level"].textContent, 10)
+    )
+    .map((row) => {
+      const symptomBlock = document.createElement("td");
+      symptomBlock.innerHTML = `
+    <div class="disease-name">${row["Symptom"].innerHTML}</div>
+    <p class="level">${row["Level"].innerHTML}</p>
+    <p class="chemical">${row["Required Chemical"].innerHTML}</p>
+    <p class="description">${row["Effect"].innerHTML}</p>
+    `;
+      const symptomStats = document.createElement("td");
+      symptomStats.innerHTML = `
+    <table class="stats">
+      <tr><th>Stealth</th><td>${row["Stealth"].innerHTML}</td></tr>
+      <tr><th>Resistance</th><td>${row["Resistance"].innerHTML}</td></tr>
+      <tr><th>Stage speed</th><td>${row["Stage speed"].innerHTML}</td></tr>
+      <tr><th>Transmission</th><td>${row["Transmission"].innerHTML}</td></tr>
+    </table>
+    `;
+      const thresholds = row["Threshold (hover mouse over for details)"];
+      thresholds.innerHTML = `<ul class="thresholds"><li>${thresholds.innerHTML
+        .split(",")
+        .join("</li><li>")}</li></ul>`;
+      return {
+        Symptom: symptomBlock,
+        Stats: symptomStats,
+        Thresholds: thresholds,
+      };
+    });
+  const symptomsBetterTable = makeTable(
+    ["Symptom", "Stats", "Thresholds"],
+    symptoms
+  );
+  symptomsBetterTable.className = "symptoms-ext wikitable";
+  symptomsTable.replaceWith(symptomsBetterTable);
 }
 
 export function virologyScript(root: HTMLElement): void {

src/ui/TabManager.ts

@@ -4,7 +4,7 @@ import { getPageHTML } from "../wiki";
 import {
   processHTML,
   bindFunctions,
-  CURRENT_VERSION,
+  PAGE_VERSIONS,
   postProcessHTML,
 } from "../scripts/index";
 import cache from "../cache";
@@ -31,7 +31,10 @@ async function loadPage(page: string, elem: HTMLElement): Promise<HTMLElement> {
   try {
     const cachedPage = await cache.get<string>(key);
     if (cachedPage) {
-      if (cachedPage.version === CURRENT_VERSION) {
+      // Get expected version
+      const expectedVersion =
+        page in PAGE_VERSIONS ? PAGE_VERSIONS[page] : PAGE_VERSIONS.$DEFAULT;
+      if (cachedPage.version === expectedVersion) {
         console.log(`${page}: found cached entry`);
         html = cachedPage.value;
       } else {
@@ -70,8 +73,12 @@ async function loadPage(page: string, elem: HTMLElement): Promise<HTMLElement> {
     console.log(`${page}: processing`);
     processHTML(div, page);
 
+    // Get version to set
+    const version =
+      page in PAGE_VERSIONS ? PAGE_VERSIONS[page] : PAGE_VERSIONS.$DEFAULT;
+
     // Save result to cache
-    cache.set(key, div.innerHTML, CURRENT_VERSION).then(() => {
+    cache.set(key, div.innerHTML, version).then(() => {
       console.log(`${page}: saved to cache`);
     });
 

style/pages/global.scss

@@ -10,6 +10,7 @@
   padding-left: 25pt;
   li {
     margin-top: 0.6em;
+    padding-right: 8pt;
   }
   ul,
   ol {

style/pages/virology.scss

@@ -1,15 +1,11 @@
 div[data-tab="Infections"] {
-    .disease-ext {
+    .disease-ext,
+    .symptoms-ext {
         width: 100%;
         th,
         td:first-child {
             background-color: #2f4257;
         }
-        td:nth-child(2) {
-            width: 30vw;
-            max-width: 300px;
-            text-align: center;
-        }
         .disease-name {
             font-size: 12pt;
             text-align: left;
@@ -22,7 +18,27 @@ div[data-tab="Infections"] {
             font-weight: 300;
             line-height: 1.2em;
             word-spacing: -0.1em;
+            margin: 5pt 0;
         }
+
+        .bgus_fz_selected {
+            background: $nanotrasen !important;
+            th,
+            td {
+                border-top: 2px solid lighten($nanotrasen, 20%);
+                border-bottom: 2px solid lighten($nanotrasen, 15%);
+            }
+            th {
+                background: lighten($nanotrasen, 5%) !important;
+            }
+            div.tooltiptext {
+                border-color: lighten($nanotrasen, 20%);
+                background: darken($nanotrasen, 10%);
+            }
+        }
+    }
+
+    .disease-ext {
         .vector {
             font-size: 9pt;
             &:before {
@@ -44,27 +60,48 @@ div[data-tab="Infections"] {
                 font-weight: bold;
             }
         }
-        p {
-            margin: 5pt 0;
+        .description {
+            margin: 10pt 0;
+            line-height: 1.5em;
+        }
+        td:nth-child(2) {
+            width: 30vw;
+            max-width: 300px;
+            text-align: center;
+        }
+    }
+
+    .symptoms-ext {
+        .level {
+            font-size: 9pt;
+            font-weight: bold;
+            &:before {
+                content: "Level ";
+            }
         }
         .description {
             margin: 10pt 0;
             line-height: 1.5em;
         }
-
-        .bgus_fz_selected {
-            background: $nanotrasen !important;
-            th,
-            td {
-                border-top: 2px solid lighten($nanotrasen, 20%);
-                border-bottom: 2px solid lighten($nanotrasen, 15%);
-            }
+        .stats {
+            width: 100%;
+            border: 2px solid $nanotrasen;
             th {
-                background: lighten($nanotrasen, 5%) !important;
+                text-align: right;
+                padding: 3px 6px;
             }
-            div.tooltiptext {
-                border-color: lighten($nanotrasen, 20%);
-                background: darken($nanotrasen, 10%);
+            td {
+                padding: 3px 6px;
+                text-align: center;
+            }
+        }
+        .thresholds {
+            white-space: nowrap;
+            margin: 0;
+            padding: 0;
+            list-style-type: none;
+            span {
+                cursor: help;
             }
         }
     }