Add food and drink page tweaks
Some checks failed
continuous-integration/drone/push Build is failing
Some checks failed
continuous-integration/drone/push Build is failing
This commit is contained in:
parent
131e010df6
commit
6c134aa197
7 changed files with 374 additions and 28 deletions
23
src/index.ts
23
src/index.ts
|
@ -7,6 +7,9 @@ import { searchBox } from "./scripts/search";
|
||||||
import unknown from "~/assets/images/tab-icons/unknown.svg";
|
import unknown from "~/assets/images/tab-icons/unknown.svg";
|
||||||
import { bindFunctions } from "./scripts/index";
|
import { bindFunctions } from "./scripts/index";
|
||||||
|
|
||||||
|
// Enable single page mode for developing scripts
|
||||||
|
const devSinglePage = null; //["Other", "Guide_to_food_and_drinks"];
|
||||||
|
|
||||||
async function load() {
|
async function load() {
|
||||||
const sectionListContainer = document.getElementById("section-list");
|
const sectionListContainer = document.getElementById("section-list");
|
||||||
const tabListContainer = document.getElementById("tab-list");
|
const tabListContainer = document.getElementById("tab-list");
|
||||||
|
@ -24,6 +27,12 @@ async function load() {
|
||||||
const spinnerContainer = document.querySelector("#tabs > .speen");
|
const spinnerContainer = document.querySelector("#tabs > .speen");
|
||||||
const icons = document.createElement("div");
|
const icons = document.createElement("div");
|
||||||
icons.className = "loading-icons";
|
icons.className = "loading-icons";
|
||||||
|
|
||||||
|
let promises = [];
|
||||||
|
if (devSinglePage != null) {
|
||||||
|
manager.createSection(devSinglePage[0]);
|
||||||
|
promises = [manager.openTab(devSinglePage[0], devSinglePage[1], {})];
|
||||||
|
} else {
|
||||||
sections.forEach((section) =>
|
sections.forEach((section) =>
|
||||||
section.tabs.forEach((tab) => {
|
section.tabs.forEach((tab) => {
|
||||||
const iconElement = document.createElement("img");
|
const iconElement = document.createElement("img");
|
||||||
|
@ -35,7 +44,7 @@ async function load() {
|
||||||
);
|
);
|
||||||
spinnerContainer.appendChild(icons);
|
spinnerContainer.appendChild(icons);
|
||||||
|
|
||||||
const promises = sections.flatMap((section) => {
|
promises = sections.flatMap((section) => {
|
||||||
manager.createSection(section.name);
|
manager.createSection(section.name);
|
||||||
|
|
||||||
return section.tabs.map(async (tab) => {
|
return section.tabs.map(async (tab) => {
|
||||||
|
@ -48,19 +57,19 @@ async function load() {
|
||||||
icons.removeChild(icons.querySelector(`img[data-tab=${tab.page}]`));
|
icons.removeChild(icons.querySelector(`img[data-tab=${tab.page}]`));
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
}
|
||||||
manager.showSection("Medical");
|
|
||||||
// DEV: If you only need one page just comment the block above and uncomment this:
|
|
||||||
// manager.createSection("Medical");
|
|
||||||
// const promises = [manager.openTab("Medical", "Infections", {})];
|
|
||||||
|
|
||||||
const welcome = document.getElementById("Welcome");
|
const welcome = document.getElementById("Welcome");
|
||||||
bindFunctions(welcome, "$Welcome");
|
bindFunctions(welcome, "$Welcome");
|
||||||
|
|
||||||
Promise.all(promises).then(() => {
|
Promise.all(promises).then(() => {
|
||||||
// Remove app-wide loading
|
// Remove app-wide loading
|
||||||
manager.setLoading(false);
|
manager.setLoading(false);
|
||||||
|
if (devSinglePage) {
|
||||||
|
manager.setActive(devSinglePage[1]);
|
||||||
|
} else {
|
||||||
|
manager.showSection("Medical");
|
||||||
welcome.classList.add("active");
|
welcome.classList.add("active");
|
||||||
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
if ("serviceWorker" in navigator) {
|
if ("serviceWorker" in navigator) {
|
||||||
|
|
|
@ -1,5 +1,6 @@
|
||||||
import { chemistryScript, processChemistry } from "./pages/chemistry";
|
import { chemistryScript, processChemistry } from "./pages/chemistry";
|
||||||
import { processVirology, virologyScript } from "./pages/virology";
|
import { processVirology, virologyScript } from "./pages/virology";
|
||||||
|
import { processFood, foodScript } from "./pages/food";
|
||||||
import { genericScript } from "./pages/generic";
|
import { genericScript } from "./pages/generic";
|
||||||
import { processGlobal } from "./pages/global";
|
import { processGlobal } from "./pages/global";
|
||||||
import { welcomeScript } from "./pages/welcome";
|
import { welcomeScript } from "./pages/welcome";
|
||||||
|
@ -8,6 +9,7 @@ import { welcomeScript } from "./pages/welcome";
|
||||||
// Only change it when you made changes to the processHTML part!
|
// Only change it when you made changes to the processHTML part!
|
||||||
export const PAGE_VERSIONS = {
|
export const PAGE_VERSIONS = {
|
||||||
Infections: "fcebeda2fddb46d924f4538cd9c0daeb55aa4c9b",
|
Infections: "fcebeda2fddb46d924f4538cd9c0daeb55aa4c9b",
|
||||||
|
Guide_to_food_and_drinks: "131e010df66ed689d31df53c3ca17ad16635a827",
|
||||||
$DEFAULT: "bb7abd544a19369d4b6b7e3dde3eb3cc34c023d4",
|
$DEFAULT: "bb7abd544a19369d4b6b7e3dde3eb3cc34c023d4",
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -23,6 +25,9 @@ export function processHTML(root: HTMLElement, docname: string): void {
|
||||||
case "Infections":
|
case "Infections":
|
||||||
processVirology(root);
|
processVirology(root);
|
||||||
break;
|
break;
|
||||||
|
case "Guide_to_food_and_drinks":
|
||||||
|
processFood(root);
|
||||||
|
break;
|
||||||
default:
|
default:
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -63,6 +68,10 @@ export function bindFunctions(root: HTMLElement, docname: string): void {
|
||||||
case "$Welcome":
|
case "$Welcome":
|
||||||
welcomeScript(root);
|
welcomeScript(root);
|
||||||
break;
|
break;
|
||||||
|
case "Guide_to_food_and_drinks":
|
||||||
|
genericScript(root, docname);
|
||||||
|
foodScript(root);
|
||||||
|
break;
|
||||||
default:
|
default:
|
||||||
genericScript(root, docname);
|
genericScript(root, docname);
|
||||||
break;
|
break;
|
||||||
|
|
190
src/scripts/pages/food.ts
Normal file
190
src/scripts/pages/food.ts
Normal file
|
@ -0,0 +1,190 @@
|
||||||
|
import { parseTable, makeTable } from "../utils";
|
||||||
|
import { registerSearchEntries } from "../search";
|
||||||
|
|
||||||
|
export function processFood(root: HTMLElement): void {
|
||||||
|
const drinkTables = ["#Basic_Drink_Ingredients", "#Mixed_Drinks"];
|
||||||
|
drinkTables.forEach((selector) => {
|
||||||
|
const table = root.querySelector<HTMLElement>(`${selector} .wikitable`);
|
||||||
|
const drinks = parseTable(table).map((row) => {
|
||||||
|
const foodBlock = document.createElement("td");
|
||||||
|
foodBlock.innerHTML = `
|
||||||
|
<div class="food-pic">${row["Picture"].innerHTML}</div>
|
||||||
|
<div class="food-name">${row["Cocktail"].innerHTML}</div>
|
||||||
|
<p class="strength">${row["Strength"].innerHTML}</p>
|
||||||
|
<p class="description">${row["Drink Description"].innerHTML}</p>
|
||||||
|
<p class="notes">${row["Notes"].innerHTML}</p>
|
||||||
|
`;
|
||||||
|
const ingredients = row["Ingredients"].innerHTML
|
||||||
|
.split(/,|\+/gi)
|
||||||
|
.map((s) => `<p>${s.trim()}</p>`);
|
||||||
|
row["Ingredients"].innerHTML = ingredients.join("");
|
||||||
|
return { Drink: foodBlock, Ingredients: row["Ingredients"] };
|
||||||
|
});
|
||||||
|
const betterTable = makeTable(["Drink", "Ingredients"], drinks);
|
||||||
|
betterTable.className = "drink-ext wikitable";
|
||||||
|
table.replaceWith(betterTable);
|
||||||
|
});
|
||||||
|
|
||||||
|
const baseFoodTables = [
|
||||||
|
{
|
||||||
|
selector: "#Butchering",
|
||||||
|
title: "Food name",
|
||||||
|
process: "How to acquire",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
selector: "#Knife_\\.26_Rolling_Pin",
|
||||||
|
title: "Food name",
|
||||||
|
process: "How to acquire",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
selector: "#Processor",
|
||||||
|
title: "Processes",
|
||||||
|
process: "Condiments",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
selector: "#All-In-One-Grinder",
|
||||||
|
title: "Blends",
|
||||||
|
process: "How to acquire",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
selector: "#Microwave_Oven",
|
||||||
|
title: "Cooked food",
|
||||||
|
process: "How to acquire",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
selector: "#Junk_Food",
|
||||||
|
title: "Dispenses",
|
||||||
|
process: "Description",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
selector: "#Junk_Drinks",
|
||||||
|
title: "Dispenses",
|
||||||
|
process: "Description",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
selector: "#Hot_Drinks",
|
||||||
|
title: "Dispenses",
|
||||||
|
process: "Description",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
selector: "#Other_food",
|
||||||
|
title: "Item",
|
||||||
|
process: "Description",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
baseFoodTables.forEach(({ selector, title, process }) => {
|
||||||
|
const table = root.querySelector<HTMLElement>(`${selector} .wikitable`);
|
||||||
|
const foods = parseTable(table).map((row) => {
|
||||||
|
const foodBlock = document.createElement("td");
|
||||||
|
foodBlock.innerHTML = `<div class="food-block">
|
||||||
|
<div class="food-pic">${row["Picture"].innerHTML}</div>
|
||||||
|
<div class="food-name">${row[title].innerHTML}</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
const out = {};
|
||||||
|
out[title] = foodBlock;
|
||||||
|
out[process] = row[process];
|
||||||
|
return out;
|
||||||
|
});
|
||||||
|
const betterTable = makeTable([title, process], foods);
|
||||||
|
betterTable.className = "food-base-ext wikitable";
|
||||||
|
table.replaceWith(betterTable);
|
||||||
|
});
|
||||||
|
|
||||||
|
const customTable = root.querySelector<HTMLElement>(
|
||||||
|
`#Custom_Recipes .wikitable`
|
||||||
|
);
|
||||||
|
const customFood = parseTable(customTable).map((row) => {
|
||||||
|
row[
|
||||||
|
"Custom food"
|
||||||
|
].innerHTML = `<div class="food-name">${row["Custom food"].innerHTML}</div>`;
|
||||||
|
return row;
|
||||||
|
});
|
||||||
|
const betterCustomTable = makeTable(Object.keys(customFood[0]), customFood);
|
||||||
|
betterCustomTable.className = "food-base-ext wikitable";
|
||||||
|
customTable.replaceWith(betterCustomTable);
|
||||||
|
|
||||||
|
const recipeBookTable = root.querySelector<HTMLElement>(
|
||||||
|
`#Recipe_Books .wikitable`
|
||||||
|
);
|
||||||
|
const recipeBook = parseTable(recipeBookTable).map((row) => {
|
||||||
|
const bookBlock = document.createElement("td");
|
||||||
|
bookBlock.innerHTML = `<div class="food-pic">${row["Picture"].innerHTML}</div>
|
||||||
|
<div class="food-name">${row["Book"].innerHTML}</div>
|
||||||
|
<p class="unlocks">${row["Unlocks"].innerHTML}</p>
|
||||||
|
<p class="notes">${row["Notes"].innerHTML}</p>
|
||||||
|
`;
|
||||||
|
return { Book: bookBlock, "Where to get": row["Where to get"] };
|
||||||
|
});
|
||||||
|
const betterBookTable = makeTable(["Book", "Where to get"], recipeBook);
|
||||||
|
betterBookTable.className = "book-ext wikitable";
|
||||||
|
recipeBookTable.replaceWith(betterBookTable);
|
||||||
|
|
||||||
|
const foodRecipesTables = [
|
||||||
|
"#Burgers",
|
||||||
|
"#Breads",
|
||||||
|
"#Sandwiches",
|
||||||
|
"#Pizzas",
|
||||||
|
"#Pastas",
|
||||||
|
"#Soups_\\.26_Stews",
|
||||||
|
"#Seafood",
|
||||||
|
"#Meat",
|
||||||
|
"#Misc\\._Food",
|
||||||
|
"#Frozen",
|
||||||
|
"#Pies",
|
||||||
|
"#Salads",
|
||||||
|
"#Cakes",
|
||||||
|
"#Side_Dishes",
|
||||||
|
"#Pastries",
|
||||||
|
"#Sweets",
|
||||||
|
"#Icecream_Vat",
|
||||||
|
"#Exotic",
|
||||||
|
];
|
||||||
|
foodRecipesTables.forEach((selector) => {
|
||||||
|
const table = root.querySelector<HTMLElement>(`${selector} .wikitable`);
|
||||||
|
const recipes = parseTable(table).map((row) => {
|
||||||
|
const foodBlock = document.createElement("td");
|
||||||
|
foodBlock.innerHTML = `
|
||||||
|
<div class="food-pic">${row["Picture"].innerHTML}</div>
|
||||||
|
<div class="food-name">${row["Recipe"].innerHTML}</div>
|
||||||
|
${
|
||||||
|
"Nutritional Value" in row
|
||||||
|
? `<p class="nutrition">${row["Nutritional Value"].innerHTML}</p>`
|
||||||
|
: ""
|
||||||
|
}
|
||||||
|
${"Notes" in row ? `<p class="notes">${row["Notes"].innerHTML}</p>` : ""}
|
||||||
|
`;
|
||||||
|
const ingredients = row["Ingredients"].innerHTML
|
||||||
|
.split(/,|\+/gi)
|
||||||
|
.map((s) => `<p>${s.trim()}</p>`);
|
||||||
|
row["Ingredients"].innerHTML = ingredients.join("");
|
||||||
|
return { Drink: foodBlock, Ingredients: row["Ingredients"] };
|
||||||
|
});
|
||||||
|
const betterTable = makeTable(["Drink", "Ingredients"], recipes);
|
||||||
|
betterTable.className = "recipe-ext wikitable";
|
||||||
|
table.replaceWith(betterTable);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
export function foodScript(root: HTMLElement): void {
|
||||||
|
// Init fuzzy search with elements
|
||||||
|
const foodEntries = Array.from(
|
||||||
|
root.querySelectorAll<HTMLElement>(
|
||||||
|
".drink-ext tr:not(:first-child), .food-base-ext tr:not(:first-child), .food-ext tr:not(:first-child)"
|
||||||
|
)
|
||||||
|
);
|
||||||
|
registerSearchEntries(
|
||||||
|
foodEntries.map((element, id) => ({
|
||||||
|
page: "Guide_to_food_and_drinks",
|
||||||
|
name: element.querySelector(".food-name").textContent.trim(),
|
||||||
|
element,
|
||||||
|
alignment: "center",
|
||||||
|
id,
|
||||||
|
}))
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default {
|
||||||
|
processFood,
|
||||||
|
foodScript,
|
||||||
|
};
|
|
@ -138,7 +138,6 @@ export function searchBox(): HTMLElement {
|
||||||
|
|
||||||
await nextAnimationFrame();
|
await nextAnimationFrame();
|
||||||
|
|
||||||
console.log(results);
|
|
||||||
resultList.innerHTML = "";
|
resultList.innerHTML = "";
|
||||||
results.forEach((elem) => {
|
results.forEach((elem) => {
|
||||||
const li = document.createElement("li");
|
const li = document.createElement("li");
|
||||||
|
|
|
@ -4,5 +4,6 @@ $nanotrasen: #384e68;
|
||||||
@import "search.scss";
|
@import "search.scss";
|
||||||
@import "pages/global.scss";
|
@import "pages/global.scss";
|
||||||
@import "pages/chemistry.scss";
|
@import "pages/chemistry.scss";
|
||||||
|
@import "pages/food.scss";
|
||||||
@import "pages/virology.scss";
|
@import "pages/virology.scss";
|
||||||
@import "pages/welcome.scss";
|
@import "pages/welcome.scss";
|
||||||
|
|
134
style/pages/food.scss
Normal file
134
style/pages/food.scss
Normal file
|
@ -0,0 +1,134 @@
|
||||||
|
div[data-tab="Guide_to_food_and_drinks"] {
|
||||||
|
.drink-ext,
|
||||||
|
.food-base-ext,
|
||||||
|
.book-ext,
|
||||||
|
.recipe-ext {
|
||||||
|
width: 100%;
|
||||||
|
th,
|
||||||
|
td:first-child {
|
||||||
|
background-color: #2f4257;
|
||||||
|
}
|
||||||
|
.food-pic {
|
||||||
|
float: left;
|
||||||
|
min-width: 64px;
|
||||||
|
min-height: 64px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
.food-name {
|
||||||
|
font-size: 12pt;
|
||||||
|
text-align: left;
|
||||||
|
padding: 10pt;
|
||||||
|
padding-bottom: 0;
|
||||||
|
margin-bottom: 10pt;
|
||||||
|
}
|
||||||
|
p {
|
||||||
|
font-size: 8pt;
|
||||||
|
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%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.drink-ext {
|
||||||
|
p {
|
||||||
|
font-size: 9pt;
|
||||||
|
}
|
||||||
|
.strength {
|
||||||
|
font-size: 9pt;
|
||||||
|
&:before {
|
||||||
|
content: "Strength: ";
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.description,
|
||||||
|
.notes {
|
||||||
|
margin: 10pt 0;
|
||||||
|
line-height: 1.5em;
|
||||||
|
}
|
||||||
|
td:nth-child(2) {
|
||||||
|
width: 30vw;
|
||||||
|
max-width: 300px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.food-base-ext {
|
||||||
|
td:nth-child(1) {
|
||||||
|
width: 30vw;
|
||||||
|
max-width: 300px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.food-pic {
|
||||||
|
float: none;
|
||||||
|
min-width: 64px;
|
||||||
|
min-height: 64px;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
.food-block {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
td:nth-child(2) {
|
||||||
|
padding: 5pt;
|
||||||
|
font-size: 10pt;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.book-ext {
|
||||||
|
p {
|
||||||
|
font-size: 9pt;
|
||||||
|
}
|
||||||
|
.description,
|
||||||
|
.notes {
|
||||||
|
margin: 10pt 0;
|
||||||
|
line-height: 1.5em;
|
||||||
|
}
|
||||||
|
.unlocks {
|
||||||
|
&:before {
|
||||||
|
content: "Unlocks: ";
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
td:nth-child(2) {
|
||||||
|
width: 30vw;
|
||||||
|
max-width: 300px;
|
||||||
|
text-align: center;
|
||||||
|
p {
|
||||||
|
font-size: 9pt;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.recipe-ext {
|
||||||
|
p {
|
||||||
|
font-size: 9pt;
|
||||||
|
}
|
||||||
|
td:nth-child(2) {
|
||||||
|
width: 30vw;
|
||||||
|
max-width: 300px;
|
||||||
|
}
|
||||||
|
.notes {
|
||||||
|
margin: 10pt 0;
|
||||||
|
line-height: 1.5em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
|
@ -39,6 +39,10 @@ $max-width: 960px;
|
||||||
padding: 15pt 10pt;
|
padding: 15pt 10pt;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
|
||||||
p,
|
p,
|
||||||
h2,
|
h2,
|
||||||
h3,
|
h3,
|
||||||
|
|
Reference in a new issue