Browse Source

Add partial cache invalidation and wrap up virology

welcome-page
Hamcha 1 year ago
parent
commit
e5150af485
Signed by: Hamcha GPG Key ID: 41467804B19A3315
  1. 5
      src/index.ts
  2. 13
      src/scripts/index.ts
  3. 41
      src/scripts/pages/virology.ts
  4. 13
      src/ui/TabManager.ts
  5. 1
      style/pages/global.scss
  6. 75
      style/pages/virology.scss

5
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);

13
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,

41
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 {

13
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`);
});

1
style/pages/global.scss

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

75
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;
}
}
.bgus_fz_selected {
background: $nanotrasen !important;
th,
td {
border-top: 2px solid lighten($nanotrasen, 20%);
border-bottom: 2px solid lighten($nanotrasen, 15%);
.symptoms-ext {
.level {
font-size: 9pt;
font-weight: bold;
&:before {
content: "Level ";
}
}
.description {
margin: 10pt 0;
line-height: 1.5em;
}
.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;
}
}
}

Loading…
Cancel
Save