diff --git a/src/index.ts b/src/index.ts index 1b403df..520f654 100644 --- a/src/index.ts +++ b/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); diff --git a/src/scripts/index.ts b/src/scripts/index.ts index 2b59e4f..0c74497 100644 --- a/src/scripts/index.ts +++ b/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, diff --git a/src/scripts/pages/virology.ts b/src/scripts/pages/virology.ts index 1383216..7281f89 100644 --- a/src/scripts/pages/virology.ts +++ b/src/scripts/pages/virology.ts @@ -27,8 +27,45 @@ export function processVirology(root: HTMLElement): void { const symptomsTable = root.querySelector( "#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 = ` +
${row["Symptom"].innerHTML}
+

${row["Level"].innerHTML}

+

${row["Required Chemical"].innerHTML}

+

${row["Effect"].innerHTML}

+ `; + const symptomStats = document.createElement("td"); + symptomStats.innerHTML = ` + + + + + +
Stealth${row["Stealth"].innerHTML}
Resistance${row["Resistance"].innerHTML}
Stage speed${row["Stage speed"].innerHTML}
Transmission${row["Transmission"].innerHTML}
+ `; + const thresholds = row["Threshold (hover mouse over for details)"]; + thresholds.innerHTML = ``; + 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 { diff --git a/src/ui/TabManager.ts b/src/ui/TabManager.ts index 99a8b6e..2360c27 100644 --- a/src/ui/TabManager.ts +++ b/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 { try { const cachedPage = await cache.get(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 { 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`); }); diff --git a/style/pages/global.scss b/style/pages/global.scss index a893851..dd7d78d 100644 --- a/style/pages/global.scss +++ b/style/pages/global.scss @@ -10,6 +10,7 @@ padding-left: 25pt; li { margin-top: 0.6em; + padding-right: 8pt; } ul, ol { diff --git a/style/pages/virology.scss b/style/pages/virology.scss index 5285470..b710866 100644 --- a/style/pages/virology.scss +++ b/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; } } }