From 5074d6180fc8b283bac00b99c6aa2325b797da6b Mon Sep 17 00:00:00 2001 From: Hamcha Date: Fri, 12 Feb 2021 11:05:40 +0100 Subject: [PATCH] Convert reaction conditions to a prettier table --- src/scripts/index.ts | 2 +- src/scripts/pages/chemistry.ts | 55 ++++++- style/pages/chemistry.scss | 280 ++++++++++++++++++--------------- 3 files changed, 202 insertions(+), 135 deletions(-) diff --git a/src/scripts/index.ts b/src/scripts/index.ts index 4363bf9..538d221 100644 --- a/src/scripts/index.ts +++ b/src/scripts/index.ts @@ -10,7 +10,7 @@ import { welcomeScript } from "./pages/welcome"; export const PAGE_VERSIONS = { Infections: "fcebeda2fddb46d924f4538cd9c0daeb55aa4c9b", Guide_to_food_and_drinks: "131e010df66ed689d31df53c3ca17ad16635a827", - Guide_to_chemistry: "20971ee185888fd37128bdc1c097a740982e94b2", + Guide_to_chemistry: "8583fc3b707920eb5cc3a814ec934cfff88803a5", $DEFAULT: "bb7abd544a19369d4b6b7e3dde3eb3cc34c023d4", }; diff --git a/src/scripts/pages/chemistry.ts b/src/scripts/pages/chemistry.ts index 8a8e563..d80992d 100644 --- a/src/scripts/pages/chemistry.ts +++ b/src/scripts/pages/chemistry.ts @@ -123,7 +123,7 @@ export function processChemistry(root: HTMLElement): void { content += `

${desc.innerHTML}

`; } if (ph) { - content += `

${ph.innerHTML}

`; + content += `
${ph.innerHTML}
`; } title.classList.add("reagent-ext"); title.innerHTML = content; @@ -191,12 +191,7 @@ export function chemistryScript(root: HTMLElement): void { "table.wikitable > tbody > tr:not(:first-child)" ) ); - const test = el - .map((element, id) => [ - element, - element.querySelector("th .reagent-header"), - ]) - .filter(([a, b]) => !b); + registerSearchEntries( el.map((element, id) => ({ page: "Guide_to_chemistry", @@ -251,6 +246,52 @@ export function chemistryScript(root: HTMLElement): void { } } }); + + // Prettify reaction conditions + const reactionPropertyRegexp = /(.+):<\/b>(.+)/i; + el.forEach((element, id) => { + element.querySelectorAll(".ph").forEach((ph) => { + // Prepare table + const extras = []; + const table = document.createElement("table"); + const tableHeaderRow = document.createElement("tr"); + const tableValueRow = document.createElement("tr"); + table.appendChild(tableHeaderRow); + table.appendChild(tableValueRow); + + // Parse parameters + ph.innerHTML.split("
").forEach((prop) => { + if (prop.trim() === "N/A") { + return; + } + + const matcher = reactionPropertyRegexp.exec(prop); + if (!matcher) { + extras.push(prop); + return; + } + + const [reactionProperty, propValue] = matcher + .slice(1) + .map((s) => s.trim()); + + const header = document.createElement("th"); + header.appendChild(document.createTextNode(reactionProperty)); + tableHeaderRow.appendChild(header); + const value = document.createElement("td"); + value.appendChild(document.createTextNode(propValue)); + tableValueRow.append(value); + }); + + // Clear and re-add prettified data + ph.innerHTML = ""; + if (tableHeaderRow.children.length > 0) { + ph.appendChild(table); + } + ph.innerHTML += `

${extras.join("
")}

`; + ph.classList.add("ph-ext"); + }); + }); } export default { chemistryScript, processChemistry }; diff --git a/style/pages/chemistry.scss b/style/pages/chemistry.scss index dccffa8..0411a52 100644 --- a/style/pages/chemistry.scss +++ b/style/pages/chemistry.scss @@ -1,136 +1,162 @@ div[data-tab="Guide_to_chemistry"] { - .bgus_twistie:after { - color: red; - display: inline-block; - font-weight: bold; - margin-left: 0.2em; - content: "⯆"; - } + .bgus_twistie:after { + color: red; + display: inline-block; + font-weight: bold; + margin-left: 0.2em; + content: "⯆"; + } - .bgus_collapsed > .bgus_twistie:after { - content: "⯈"; - } + .bgus_collapsed > .bgus_twistie:after { + content: "⯈"; + } + + div.tooltiptext { + display: none; + border: 1px solid #384e68; + background: linear-gradient( + to bottom, + darken(#384e68, 20%), + darken(#384e68, 25%) + ); + } + + span.bgus_nested_element:not(.bgus_collapsed) + div.tooltiptext { + z-index: unset; + visibility: inherit; + display: block; + opacity: 1; + position: relative; + width: auto; + border-left-width: 3px; + margin-left: 5px; + margin-top: 5px; + font-size: 8pt; + padding: 5px 8px; + line-height: 10pt; div.tooltiptext { - display: none; - border: 1px solid #384e68; - background: linear-gradient(to bottom, darken(#384e68, 20%), darken(#384e68, 25%)); + margin-left: -5px; + } + } + + table.wikitable { + border: 0 !important; + + .table-head { + text-align: center; } - span.bgus_nested_element:not(.bgus_collapsed) + div.tooltiptext { - z-index: unset; - visibility: inherit; - display: block; - opacity: 1; - position: relative; - width: auto; - border-left-width: 3px; - margin-left: 5px; - margin-top: 5px; + th { + background-color: darken($nanotrasen, 5%) !important; + } + + & > tbody > tr > td:nth-child(2) { + width: 45%; + padding: 10px; + } + + .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%); + } + } + } + + body.bgus_cbox { + input[type="checkbox"] + span[data-src]:before { + display: inline-block; + width: 1.5em; + content: "[_]"; + } + input[type="checkbox"]:checked + span[data-src]:before { + content: "[X]"; + } + input[type="checkbox"]:checked + span[data-src] { + text-decoration: line-through; + } + input[type="checkbox"] + span[data-src] { + cursor: pointer; + } + input[type="checkbox"] + span[data-src]:before, + input[type="checkbox"] + span[data-src] { + color: orange; + font-weight: bold; + } + input[type="checkbox"]:checked + span[data-src]:before, + input[type="checkbox"]:checked + span[data-src] { + color: green; + } + } + + .reagent-ext { + .reagent-header { + font-size: 12pt; + text-align: left; + padding: 10pt; + padding-bottom: 0; + span:last-child { + margin-left: 0.5em; + } + } + p { + font-size: 8pt; + font-weight: 300; + line-height: 1.4em; + word-spacing: -0.1em; + } + .treatment { + font-size: 10pt; + } + .metabolism:before { + font-size: 9pt; + content: "Metabolism rate: "; + font-weight: bold; + } + .overdose, + .addiction { + font-size: 9pt; + font-weight: bold; + } + .overdose:before { + color: #ffae68; + content: "Overdose at "; + } + .addiction:before { + color: #ffdf97; + content: "Addiction at "; + } + } + + .ph-ext { + p { + font-size: 9pt; + } + table { + margin: 0.5rem 0.7rem; + background-color: $nanotrasen !important; + border: 0; + td, + th { font-size: 8pt; - padding: 5px 8px; - line-height: 10pt; - - div.tooltiptext { - margin-left: -5px; - } - } - - table.wikitable { - border: 0 !important; - - .table-head { - text-align: center; - } - - th { - background-color: darken($nanotrasen, 5%) !important; - } - - & > tbody > tr > td:nth-child(2) { - width: 45%; - padding: 10px; - } - - .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%); - } - } - } - - body.bgus_cbox { - input[type="checkbox"] + span[data-src]:before { - display: inline-block; - width: 1.5em; - content: "[_]"; - } - input[type="checkbox"]:checked + span[data-src]:before { - content: "[X]"; - } - input[type="checkbox"]:checked + span[data-src] { - text-decoration: line-through; - } - input[type="checkbox"] + span[data-src] { - cursor: pointer; - } - input[type="checkbox"] + span[data-src]:before, - input[type="checkbox"] + span[data-src] { - color: orange; - font-weight: bold; - } - input[type="checkbox"]:checked + span[data-src]:before, - input[type="checkbox"]:checked + span[data-src] { - color: green; - } - } - - .reagent-ext { - .reagent-header { - font-size: 12pt; - text-align: left; - padding: 10pt; - padding-bottom: 0; - span:last-child { - margin-left: 0.5em; - } - } - p { - font-size: 8pt; - font-weight: 300; - line-height: 1.4em; - word-spacing: -0.1em; - } - .treatment { - font-size: 10pt; - } - .metabolism:before { - font-size: 9pt; - content: "Metabolism rate: "; - font-weight: bold; - } - .overdose, - .addiction { - font-size: 9pt; - font-weight: bold; - } - .overdose:before { - color: #ffae68; - content: "Overdose at "; - } - .addiction:before { - color: #ffdf97; - content: "Addiction at "; - } + padding: 0.2rem 0.3rem; + line-height: 1rem; + } + td { + background-color: darken($nanotrasen, 10%) !important; + text-align: center; + font-weight: normal; + } } + } }