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 1148e486468c7a8e3271253347cf02224a9c5f9e..22dcf3d2fbc2c8522a7376b87779e2d0c98518b1 100644 --- a/src/npc/surgery/organFarm.js +++ b/src/npc/surgery/organFarm.js @@ -1,12 +1,9 @@ /** * @param {App.Entity.SlaveState} slave - * @returns {HTMLDivElement} + * @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,11 +29,10 @@ App.Medicine.OrganFarm.growActions = function(slave) { } } - let 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) { @@ -67,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++) { @@ -76,19 +77,20 @@ App.Medicine.OrganFarm.growActions = function(slave) { } } if (canImplant.length > 0) { - App.UI.DOM.appendNewElement("div", div, "Can implant immediately", "bold"); - App.UI.DOM.appendNewElement("div", div); - canImplant.forEach(c => div.append(c)); + 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", "bold"); - App.UI.DOM.appendNewElement("div", div); - cantImplant.forEach(c => div.append(c)); + 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); if (any) { - return div; + return fragment; } else { return null; } @@ -259,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; }