diff --git a/css/interaction/prosthetics.css b/css/interaction/prosthetics.css index 0b6a4b4b2dec88df4948f78efe87e67b5327fd0b..810787f6f5e77abead785bf4ec4dfa854ff181e9 100644 --- a/css/interaction/prosthetics.css +++ b/css/interaction/prosthetics.css @@ -1,11 +1,11 @@ div.limb-selector { display: grid; - grid-template-columns: 200px 100px 100px 100px 100px; + grid-template-columns: 200px 100px 100px 100px 100px 100px; } div.limb-selector div.full { grid-column-start: 1; - grid-column-end: 6; + grid-column-end: 7; text-align: center; } diff --git a/src/npc/descriptions/limbs.js b/src/npc/descriptions/limbs.js index e35ec86d77acd0f2d91d6babdfd350a15218edef..4eb79fa4095e84bb653d914b2ec8b0b624401b8a 100644 --- a/src/npc/descriptions/limbs.js +++ b/src/npc/descriptions/limbs.js @@ -59,6 +59,9 @@ App.Medicine.Limbs.selector = function(slave, oldLimbs) { App.UI.DOM.appendNewElement("div", limbSelector, "Right Arm"); App.UI.DOM.appendNewElement("div", limbSelector, "Left Leg"); App.UI.DOM.appendNewElement("div", limbSelector, "Right Leg"); + App.UI.DOM.appendNewElement("div", limbSelector, "All"); + + const radiosAll = []; limbSelector.append(row("None", 0)); App.Data.prostheticLimbs.forEach((limb, key) => { @@ -67,7 +70,8 @@ App.Medicine.Limbs.selector = function(slave, oldLimbs) { limbSelector.append(row(capFirstChar(limb.short), key)); } else { App.UI.DOM.appendNewElement("div", limbSelector, - `You need to upgrade ${his} prosthetic interface to attach ${limb.short} limbs.`, ["full", "detail"]); + `You need to upgrade ${his} prosthetic interface to attach ${limb.short} limbs.`, ["full", + "detail"]); } } }); @@ -91,30 +95,6 @@ App.Medicine.Limbs.selector = function(slave, oldLimbs) { return [getLeftArmID(slave), getRightArmID(slave), getLeftLegID(slave), getRightLegID(slave)]; } - /** - * @param {number} limb - * @param {number} id - * @returns {HTMLDivElement} - */ - function radio(limb, id) { - const div = document.createElement("div"); - - if (newState[limb] !== 1) { - const radio = document.createElement("input"); - radio.type = "radio"; - radio.name = "limb" + limb; - if (newState[limb] === id) { - radio.checked = true; - } - radio.onclick = () => { - newState[limb] = id; - }; - div.append(radio); - } - - return div; - } - /** * @param {string} title * @param {number} id @@ -125,10 +105,47 @@ App.Medicine.Limbs.selector = function(slave, oldLimbs) { App.UI.DOM.appendNewElement("div", f, title); + const radios = []; for (let i = 0; i < newState.length; i++) { - f.append(radio(i, id)); + const div = document.createElement("div"); + + if (newState[i] !== 1) { + const radio = document.createElement("input"); + radios.push(radio); + radio.type = "radio"; + radio.name = "limb" + i; + if (newState[i] === id) { + radio.checked = true; + } + radio.onclick = () => { + newState[i] = id; + radiosAll.forEach(r => r.checked = false); + }; + div.append(radio); + } + + f.append(div); } + const div = document.createElement("div"); + + const radio = document.createElement("input"); + radiosAll.push(radio); + radio.type = "radio"; + radio.name = "limb_all"; + radio.checked = newState.reduce((acc, cur) => acc && (cur === 1 || cur === id), true); + radio.onclick = () => { + for (let i = 0; i < newState.length; i++) { + if (newState[i] !== 1) { + newState[i] = id; + } + radios.forEach(r => r.checked = true); + } + }; + div.append(radio); + + f.append(div); + return f; }