Browse Source

Convert reaction conditions to a prettier table

master
Hamcha 10 months ago
parent
commit
5074d6180f
Signed by: Hamcha GPG Key ID: 41467804B19A3315
  1. 2
      src/scripts/index.ts
  2. 55
      src/scripts/pages/chemistry.ts
  3. 262
      style/pages/chemistry.scss

2
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",
};

55
src/scripts/pages/chemistry.ts

@ -123,7 +123,7 @@ export function processChemistry(root: HTMLElement): void {
content += `<p>${desc.innerHTML}</p>`;
}
if (ph) {
content += `<p class="ph">${ph.innerHTML}</p>`;
content += `<div class="ph">${ph.innerHTML}</div>`;
}
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>(.+):<\/b>(.+)/i;
el.forEach((element, id) => {
element.querySelectorAll<HTMLElement>(".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("<br>").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 += `<p>${extras.join("<br>")}</p>`;
ph.classList.add("ph-ext");
});
});
}
export default { chemistryScript, processChemistry };

262
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;
}
}
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;
table.wikitable {
border: 0 !important;
div.tooltiptext {
margin-left: -5px;
}
.table-head {
text-align: center;
}
table.wikitable {
border: 0 !important;
.table-head {
text-align: center;
}
th {
background-color: darken($nanotrasen, 5%) !important;
}
th {
background-color: darken($nanotrasen, 5%) !important;
}
& > tbody > tr > td:nth-child(2) {
width: 45%;
padding: 10px;
}
& > 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%);
}
}
}
.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;
}
}
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 ";
}
}
.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: 0.2rem 0.3rem;
line-height: 1rem;
}
td {
background-color: darken($nanotrasen, 10%) !important;
text-align: center;
font-weight: normal;
}
}
}
}

Loading…
Cancel
Save