diff --git a/css/general/layout.css b/css/general/layout.css
index 6d5fa3a1b13e5d428190a773473115da02a90708..bfe09fa76a20e993fd5dfcde0a011fb95fec83da 100644
--- a/css/general/layout.css
+++ b/css/general/layout.css
@@ -1,11 +1,11 @@
/* Styles that mainly affect where text is, but not how it looks */
-h1, h2, h3 {
+h1, h2, h3, h4 {
margin-bottom: 0;
margin-top: 0.25em;
}
-h1 + p, h2 + p, h3 + p {
+h1 + p, h2 + p, h3 + p, h4 + p {
margin-top: 0;
}
@@ -28,7 +28,7 @@ div.double-indent, p.double-indent {
text-indent: 4em;
}
-/* makes avery line indented */
+/* makes every line indented */
.choices, .choices {
margin-left: 2em;
}
@@ -40,4 +40,5 @@ div.double-indent, p.double-indent {
div.grid-2columns-auto {
display: grid;
grid-template-columns: max-content auto;
+ grid-column-gap: 1em;
}
diff --git a/src/npc/surgery/organFarm.js b/src/npc/surgery/organFarm.js
index c269adacb042f8c80fb56756d3bb05750e9fe094..22dcf3d2fbc2c8522a7376b87779e2d0c98518b1 100644
--- a/src/npc/surgery/organFarm.js
+++ b/src/npc/surgery/organFarm.js
@@ -3,10 +3,7 @@
* @returns {DocumentFragment}
*/
App.Medicine.OrganFarm.growActions = function(slave) {
- const el = new DocumentFragment();
const O = App.Medicine.OrganFarm.Organs;
- const canImplant = [];
- const cantImplant = [];
// find already being grown/ready to implant organs
const slaveOrgans = {};
@@ -32,19 +29,26 @@ App.Medicine.OrganFarm.growActions = function(slave) {
}
}
- const div = document.createElement("div");
- div.classList.add("grid-2columns-auto");
-
// create entries for each organ
- let growing = [];
+ const canImplant = [];
+ const cantImplant = [];
+ const growing = [];
let any = false;
O.forEach((organ, key) => {
if (slaveOrgans[key] === 0) {
if (organ.canGrow(slave)) {
+ const array = [];
+ array.push(App.UI.DOM.makeElement("div", App.UI.DOM.passageLink(organ.name, "Remote Surgery", () => {
+ App.Medicine.OrganFarm.growOrgan(slave, key);
+ })));
+
+ const tooltip = typeof organ.tooltip === "string" ? organ.tooltip : organ.tooltip(slave);
+ array.push(App.UI.DOM.makeElement("div", `Costs ${cashFormat(organ.cost)}${tooltip !== "" ? ` and ${tooltip}` : ""}.`, "detail"));
+
if (organ.implantActions.some((o) => { return o.canImplant(slave); })) {
- canImplant.push(key);
+ canImplant.push(...array);
} else {
- cantImplant.push(key);
+ cantImplant.push(...array);
}
}
any = true;
@@ -59,7 +63,12 @@ App.Medicine.OrganFarm.growActions = function(slave) {
}
});
- if (growing !== []) {
+ const fragment = new DocumentFragment();
+
+ if (growing.length > 0) {
+ App.UI.DOM.appendNewElement("h4", fragment, "Growing");
+ const div = App.UI.DOM.appendNewElement("div", fragment);
+ div.classList.add("grid-2columns-auto", "choices");
// nearer to completion => higher up
growing.sort((a, b) => a.time - b.time);
for (let i = 0; i < growing.length; i++) {
@@ -67,54 +76,24 @@ App.Medicine.OrganFarm.growActions = function(slave) {
App.UI.DOM.appendNewElement("div", div, growing[i].text);
}
}
- const chosenOption = App.UI.DOM.makeElement("div");
if (canImplant.length > 0) {
- App.UI.DOM.appendNewElement("div", div, "Can implant immediately");
- div.append(makePulldown(canImplant));
+ App.UI.DOM.appendNewElement("h4", fragment, "Can be implanted immediately");
+ const div = App.UI.DOM.appendNewElement("div", fragment);
+ div.classList.add("grid-2columns-auto", "choices");
+ div.append(...canImplant);
}
if (cantImplant.length > 0) {
- App.UI.DOM.appendNewElement("div", div, "Can't implant immediately");
- div.append(makePulldown(cantImplant));
+ App.UI.DOM.appendNewElement("h4", fragment, "Cannot be implanted immediately");
+ const div = App.UI.DOM.appendNewElement("div", fragment);
+ div.classList.add("grid-2columns-auto", "choices");
+ div.append(...cantImplant);
}
- el.append(div);
- el.append(chosenOption);
if (any) {
- return el;
+ return fragment;
} else {
return null;
}
-
- function makePulldown(array) {
- const selDiv = document.createElement("div");
- const select = App.UI.DOM.appendNewElement("select", selDiv);
- array.forEach(key => {
- const option = App.UI.DOM.appendNewElement("option", select);
- option.textContent = O.get(key).name;
- option.value = key;
- });
- select.onchange = () => {
- const O = select.options[select.selectedIndex];
- const organ = App.Medicine.OrganFarm.Organs.get(O.value);
- const frag = new DocumentFragment();
- const tooltip = typeof organ.tooltip === "string" ? organ.tooltip : organ.tooltip(slave);
-
- App.UI.DOM.appendNewElement(
- "span",
- frag,
- App.UI.DOM.passageLink(
- organ.name, "Remote Surgery", () => {
- App.Medicine.OrganFarm.growOrgan(slave, O.value);
- }
- )
- );
-
- App.UI.DOM.appendNewElement("span", frag, ` Costs ${cashFormat(organ.cost)}${tooltip !== "" ? ` and ${tooltip}` : ""}.`, "detail");
- jQuery(chosenOption).empty().append(frag);
- };
- select.selectedIndex = -1;
- return selDiv;
- }
};
/**
@@ -282,8 +261,8 @@ App.Medicine.OrganFarm.fullMenu = function(slave) {
if (growActions != null) {
const {him} = getPronouns(slave);
App.UI.DOM.appendNewElement("h3", fragment, "Grow new organs");
- App.UI.DOM.appendNewElement("div", fragment, `The fabricator is ready to grow an organ for ${him}. Extract tissue to begin growing:`);
- App.UI.DOM.appendNewElement("div", fragment, growActions, "choices");
+ App.UI.DOM.appendNewElement("div", fragment, `The fabricator is ready to grow an organ for ${him}. Extract tissue to begin growing.`);
+ App.UI.DOM.appendNewElement("div", fragment, growActions);
anyAction = true;
}
@@ -342,7 +321,8 @@ App.Medicine.OrganFarm.currentlyGrowing = function() {
if (o.weeksToCompletion <= 0) {
finishLines.push(`${tank.slaveName}'s ${App.Medicine.OrganFarm.Organs.get(o.type).name}.`);
} else {
- growLines.push(`${tank.slaveName}'s ${App.Medicine.OrganFarm.Organs.get(o.type).name}, ${weeksToCompletion(o.weeksToCompletion)} week(s) left.`);
+ growLines.push(`${tank.slaveName}'s ${App.Medicine.OrganFarm.Organs.get(o.type).name}, ${
+ weeksToCompletion(o.weeksToCompletion)} week(s) left.`);
}
} else {
growLines.push(App.UI.DOM.makeElement("span", `ERROR: No tank with ID ${o.ID} found.`, "error"));