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;
+ }
}
+ }
}