Add food and drink page tweaks

src/index.ts

@@ -7,6 +7,9 @@ import { searchBox } from "./scripts/search";
 import unknown from "~/assets/images/tab-icons/unknown.svg";
 import { bindFunctions } from "./scripts/index";
 
+// Enable single page mode for developing scripts
+const devSinglePage = null; //["Other", "Guide_to_food_and_drinks"];
+
 async function load() {
   const sectionListContainer = document.getElementById("section-list");
   const tabListContainer = document.getElementById("tab-list");
@@ -24,6 +27,12 @@ async function load() {
   const spinnerContainer = document.querySelector("#tabs > .speen");
   const icons = document.createElement("div");
   icons.className = "loading-icons";
+
+  let promises = [];
+  if (devSinglePage != null) {
+    manager.createSection(devSinglePage[0]);
+    promises = [manager.openTab(devSinglePage[0], devSinglePage[1], {})];
+  } else {
     sections.forEach((section) =>
       section.tabs.forEach((tab) => {
         const iconElement = document.createElement("img");
@@ -35,7 +44,7 @@ async function load() {
     );
     spinnerContainer.appendChild(icons);
 
-  const promises = sections.flatMap((section) => {
+    promises = sections.flatMap((section) => {
       manager.createSection(section.name);
 
       return section.tabs.map(async (tab) => {
@@ -48,19 +57,19 @@ async function load() {
         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");
   bindFunctions(welcome, "$Welcome");
 
   Promise.all(promises).then(() => {
     // Remove app-wide loading
     manager.setLoading(false);
+    if (devSinglePage) {
+      manager.setActive(devSinglePage[1]);
+    } else {
+      manager.showSection("Medical");
       welcome.classList.add("active");
+    }
   });
 }
 if ("serviceWorker" in navigator) {

src/scripts/index.ts

@@ -1,5 +1,6 @@
 import { chemistryScript, processChemistry } from "./pages/chemistry";
 import { processVirology, virologyScript } from "./pages/virology";
+import { processFood, foodScript } from "./pages/food";
 import { genericScript } from "./pages/generic";
 import { processGlobal } from "./pages/global";
 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!
 export const PAGE_VERSIONS = {
   Infections: "fcebeda2fddb46d924f4538cd9c0daeb55aa4c9b",
+  Guide_to_food_and_drinks: "131e010df66ed689d31df53c3ca17ad16635a827",
   $DEFAULT: "bb7abd544a19369d4b6b7e3dde3eb3cc34c023d4",
 };
 
@@ -23,6 +25,9 @@ export function processHTML(root: HTMLElement, docname: string): void {
     case "Infections":
       processVirology(root);
       break;
+    case "Guide_to_food_and_drinks":
+      processFood(root);
+      break;
     default:
   }
 }
@@ -63,6 +68,10 @@ export function bindFunctions(root: HTMLElement, docname: string): void {
     case "$Welcome":
       welcomeScript(root);
       break;
+    case "Guide_to_food_and_drinks":
+      genericScript(root, docname);
+      foodScript(root);
+      break;
     default:
       genericScript(root, docname);
       break;

src/scripts/pages/food.ts

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

src/scripts/search.ts

@@ -138,7 +138,6 @@ export function searchBox(): HTMLElement {
 
     await nextAnimationFrame();
 
-    console.log(results);
     resultList.innerHTML = "";
     results.forEach((elem) => {
       const li = document.createElement("li");

style/main.scss

@@ -4,5 +4,6 @@ $nanotrasen: #384e68;
 @import "search.scss";
 @import "pages/global.scss";
 @import "pages/chemistry.scss";
+@import "pages/food.scss";
 @import "pages/virology.scss";
 @import "pages/welcome.scss";

style/pages/food.scss

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

style/pages/global.scss

@@ -39,6 +39,10 @@ $max-width: 960px;
     padding: 15pt 10pt;
   }
 
+  img {
+    vertical-align: middle;
+  }
+
   p,
   h2,
   h3,