diff --git a/src/003-assets/CSS/links.css b/src/003-assets/CSS/links.css index dec77772527ba73940bc1a9fb09392fb97d05415..85517ce2a136a4c5851d050b3db8a59c3a3b429a 100644 --- a/src/003-assets/CSS/links.css +++ b/src/003-assets/CSS/links.css @@ -60,3 +60,9 @@ ul.choicesStrip li { ul.choicesStrip li + li:before { content: " | "; } + +a.disabled { + color: white; + pointer-events: none; + cursor: default; +} diff --git a/src/js/modification.js b/src/js/modification.js index 25be7b72c5ac88579d891e09a2f5a05221987acc..d593a5c1df2d974229180d3dc234647f9e0c61e9 100644 --- a/src/js/modification.js +++ b/src/js/modification.js @@ -556,3 +556,225 @@ App.Medicine.Modification.setTattoo = function(slave, location, design) { slave[`${location}Tat`] = design; return r; }; + +/** + * @param {App.Entity.PlayerState|App.Entity.SlaveState} entity + * @param {boolean} player + * @returns {HTMLDivElement} + */ +App.Medicine.Modification.eyeSelector = function(entity, player = false) { + const {He, him, his} = getPronouns(entity); + + let selectedSide = "none"; + let selectedIris = "none"; + let selectedPupil = "none"; + let selectedSclera = "none"; + + let removeDiv = document.createElement("div"); + removeDiv.classList.add("choices"); + let applyDiv = document.createElement("div"); + + const container = document.createElement("div"); + container.append( + `${player ? "You have" : `${He} has`} ${App.Desc.eyesColorLong(entity)}, ${hasBothEyes( + entity) ? "they are" : "it is"} ${App.Desc.eyesType(entity)}.`, + removeDiv, "You have a number of contact lenses in various colors available. ", + App.UI.DOM.makeElement("span", `You can change what ${player ? "your" : his} eyes look like.`, "note"), + assembleLinks(), applyDiv + ); + updateRemoveDiv(); + updateApplyDiv(); + return container; + + function assembleLinks() { + const sides = ["left", "right", "both"]; + const irisColors = ["amber", "black", "blue", "brown", "green", "hazel", "orange", "pale-grey", "pink", "red", + "sky-blue", "turquoise", "white", "yellow"]; + const pupilShapes = ["none", "circular", "almond-shaped", "bright", "catlike", "demonic", "devilish", + "goat-like", "heart-shaped", "hypnotic", "serpent-like", "star-shaped", "teary", "vacant", "wide-eyed"]; + const scleraColors = ["none", "white", "amber", "black", "blue", "brown", "green", "hazel", "orange", + "pale-grey", "pink", "red", "sky-blue", "turquoise", "yellow"]; + + const div = document.createDocumentFragment(); + div.append( + assembleList("Side: ", sides, value => selectedSide = value, selectedIris), + assembleList("Iris: ", irisColors, value => selectedIris = value, selectedSide), + assembleList("Pupil: ", pupilShapes, value => selectedPupil = value, selectedPupil), + assembleList("Sclera: ", scleraColors, value => selectedSclera = value, selectedSclera) + ); + return div; + } + + /** + * @param {string} name + * @param {Array<string>} list + * @param {Function}callback + * @param {string} selected + * @returns {HTMLDivElement} + */ + function assembleList(name, list, callback, selected) { + const links = []; + + for (let i = 0; i < list.length; i++) { + addToggle(list[i], callback, links, list[i] === selected); + } + + const div = document.createElement("div"); + div.classList.add("choices"); + div.append(name, App.UI.DOM.arrayToList(links, " | ", " | ")); + return div; + } + + /** + * @param {string} value + * @param {Function} callback + * @param {Array<HTMLAnchorElement>} links + * @param {boolean} [disabled] + */ + function addToggle(value, callback, links, disabled = false) { + const a = document.createElement("a"); + a.append(capFirstChar(value)); + if (disabled) { + a.classList.add("disabled"); + } + a.onclick = () => { + for (let link of links) { + link.classList.remove("disabled"); + } + a.classList.add("disabled"); + callback(value); + updateRemoveDiv(); + updateApplyDiv(); + }; + links.push(a); + } + + function updateApplyDiv() { + $(applyDiv).empty(); + if (selectedSide !== "none" && selectedIris !== "none") { + // make the following easier to read + let both = selectedSide === "both"; + let leftGlass = !hasLeftEye(entity) || getLeftEyeType(entity) === 2; + let rightGlass = !hasRightEye(entity) || getRightEyeType(entity) === 2; + + // base eye + let r = player ? "" : ` ${him}`; + if (both) { + if (leftGlass && rightGlass) { + r += ` ${selectedIris} glass eyes`; + } else if (leftGlass || rightGlass) { + r += ` a glass eye and a ${selectedIris} lens`; + } else { + r += ` ${selectedIris} lenses`; + } + } else { + r += " a"; + if ((selectedSide === "left" && leftGlass) || (selectedSide === "right" && rightGlass)) { + r += ` ${selectedIris} glass eye`; + } else { + r += ` ${selectedIris} lens`; + } + } + // pupil & sclera + if (selectedPupil !== "none" || selectedSclera !== "none") { + r += " with"; + if (selectedPupil !== "none") { + r += ` ${both ? selectedPupil : addA(selectedPupil)}`; + if (both) { + r += " pupils"; + } else { + r += " pupil"; + } + if (selectedSclera !== "none") { + r += " and"; + } + } + if (selectedSclera !== "none") { + r += ` ${selectedSclera}`; + if (both) { + r += " sclerae"; + } else { + r += " sclera"; + } + } + } + if (!both) { + r += ` for ${player ? "your" : his} ${selectedSide} eye`; + } + r += "?"; + + const a = document.createElement("a"); + a.append(player ? "Take" : "Give"); + a.onclick = applyLink; + applyDiv.append(a, r); + if (!player) { + applyDiv.append(" ", + App.UI.DOM.makeElement("span", "This is independent from eyewear choices.", "note")); + } + } + } + + function applyLink() { + // make sure the eye exists; give glass eye if there is none + if ((selectedSide === "left" || selectedSide === "both") && getLeftEyeType(entity) === 0) { + eyeSurgery(entity, "left", "glass"); + } + if ((selectedSide === "right" || selectedSide === "both") && getRightEyeType(entity) === 0) { + eyeSurgery(entity, "right", "glass"); + } + + // apply modifications + setEyeColorFull(entity, selectedIris, + selectedPupil === "none" ? "" : selectedPupil, + selectedSclera === "none" ? "" : selectedSclera, + selectedSide); + cashX(forceNeg(V.modCost), "slaveMod", entity); + + App.UI.reload(); + } + + + function updateRemoveDiv() { + $(removeDiv).empty(); + const links = []; + let _n = 0; + // remove lenses + if (hasLeftEye(entity) && getLeftEyeColor(entity) !== getGeneticEyeColor(entity, "left")) { + _n++; + links.push(removeLink("Remove left lens", () => resetEyeColor(entity, "left"))); + } + if (hasRightEye(entity) && getRightEyeColor(entity) !== getGeneticEyeColor(entity, "right")) { + _n++; + links.push(removeLink("Remove right lens", () => resetEyeColor(entity, "right"))); + } + if (_n === 2) { + links.push(removeLink("Remove both lenses", () => resetEyeColor(entity, "both"))); + } + // remove glass eyes + _n = 0; + if (getLeftEyeType(entity) === 2) { + _n++; + links.push(removeLink("Remove left glass eye", () => eyeSurgery(entity, "left", "remove"))); + } + if (getRightEyeType(entity) === 2) { + _n++; + links.push(removeLink("Remove right glass eye", () => eyeSurgery(entity, "right", "remove"))); + } + if (_n === 2) { + links.push(removeLink("Remove both glass eyes", () => eyeSurgery(entity, "both", "remove"))); + } + if (links.length > 0) { + removeDiv.append(App.UI.DOM.arrayToList(links, " | ", " | ")); + } + } + + function removeLink(text, callback) { + const a = document.createElement("a"); + a.append(text); + a.onclick = () => { + callback(); + App.UI.reload(); + }; + return a; + } +}; diff --git a/src/pregmod/managePersonalAffairs.tw b/src/pregmod/managePersonalAffairs.tw index f7ab755c0fe9ef4b96b838f56b88c88568dbd0fd..f2d84d811be4b27c54e8b7a97496d9ca640430c9 100644 --- a/src/pregmod/managePersonalAffairs.tw +++ b/src/pregmod/managePersonalAffairs.tw @@ -42,127 +42,8 @@ <div> <<if $playerSurgery == 0>>[[Visit your plastic surgeon.|Elective Surgery][$playerSurgery = 4]]<<elseif $playerSurgery == 1>>Your favorite plastic surgeon is booked solid for the next week.<<else>>Your favorite plastic surgeon is booked solid for the next $playerSurgery weeks.<</if>> </div> - <div> - You have a number of contact lenses in various colors available. - You currently have <<print App.Desc.eyesColorLong($PC)>>. - - /* This a simplified version of the slave code in salon.tw, when adding missing/glass eyes, copy the code from there */ - /* remove lenses */ - <<set _n = 0>> - <<if getLeftEyeColor($PC) !== getGeneticEyeColor($PC, "left")>> - <<set _n++>> - [[Remove left lens|Manage Personal Affairs][resetEyeColor($PC, "left")]] - <</if>> - <<if getRightEyeColor($PC) !== getGeneticEyeColor($PC, "right")>> - <<set _n++>> - <<if _n > 0>>|<</if>> - [[Remove right lens|Manage Personal Affairs][resetEyeColor($PC, "right")]] - <</if>> - <<if _n === 2>> - | [[Remove both lenses|Manage Personal Affairs][resetEyeColor($PC, "both")]] - <</if>> - - <span class="note">Change what your eyes look like:</span> - </div> - - <div class="double-indent"> - Side: - [[Left|Manage Personal Affairs][$artificialEyeSide = "left"]] - | [[Right|Manage Personal Affairs][$artificialEyeSide = "right"]] - | [[Both|Manage Personal Affairs][$artificialEyeSide = "both"]] - </div> - - <div class="double-indent"> - Iris: - [[Amber|Manage Personal Affairs][$artificialEyeColor = "amber"]] - | [[Black|Manage Personal Affairs][$artificialEyeColor = "black"]] - | [[Blue|Manage Personal Affairs][$artificialEyeColor = "blue"]] - | [[Brown|Manage Personal Affairs][$artificialEyeColor = "brown"]] - | [[Green|Manage Personal Affairs][$artificialEyeColor = "green"]] - | [[Hazel|Manage Personal Affairs][$artificialEyeColor = "hazel"]] - | [[Orange|Manage Personal Affairs][$artificialEyeColor = "orange"]] - | [[Pale-Grey|Manage Personal Affairs][$artificialEyeColor = "pale-grey"]] - | [[Pink|Manage Personal Affairs][$artificialEyeColor = "pink"]] - | [[Red|Manage Personal Affairs][$artificialEyeColor = "red"]] - | [[Sky-Blue|Manage Personal Affairs][$artificialEyeColor = "sky-blue"]] - | [[Turquoise|Manage Personal Affairs][$artificialEyeColor = "turquoise"]] - | [[White|Manage Personal Affairs][$artificialEyeColor = "white"]] - | [[Yellow|Manage Personal Affairs][$artificialEyeColor = "yellow"]] - </div> - - <div class="double-indent"> - Pupil: - [[Circular|Manage Personal Affairs][$artificialEyeShape = "circular"]] - | [[Almond-Shaped|Manage Personal Affairs][$artificialEyeShape = "almond-shaped"]] - | [[Bright|Manage Personal Affairs][$artificialEyeShape = "bright"]] - | [[Catlike|Manage Personal Affairs][$artificialEyeShape = "catlike"]] - | [[Demonic|Manage Personal Affairs][$artificialEyeShape = "demonic"]] - | [[Devilish|Manage Personal Affairs][$artificialEyeShape = "devilish"]] - | [[Goat-Like|Manage Personal Affairs][$artificialEyeShape = "goat-like"]] - | [[Heart-Shaped|Manage Personal Affairs][$artificialEyeShape = "heart-shaped"]] - | [[Hypnotic|Manage Personal Affairs][$artificialEyeShape = "hypnotic"]] - | [[Serpent-Like|Manage Personal Affairs][$artificialEyeShape = "serpent-like"]] - | [[Star-Shaped|Manage Personal Affairs][$artificialEyeShape = "star-shaped"]] - | [[Teary|Manage Personal Affairs][$artificialEyeShape = "teary"]] - | [[Vacant|Manage Personal Affairs][$artificialEyeShape = "vacant"]] - | [[Wide-Eyed|Manage Personal Affairs][$artificialEyeShape = "wide-eyed"]] - </div> - - <div class="double-indent"> - Sclera: - [[White|Manage Personal Affairs][$artificialEyeFill = "white"]] - | [[Amber|Manage Personal Affairs][$artificialEyeFill = "amber"]] - | [[Black|Manage Personal Affairs][$artificialEyeFill = "black"]] - | [[Blue|Manage Personal Affairs][$artificialEyeFill = "blue"]] - | [[Brown|Manage Personal Affairs][$artificialEyeFill = "brown"]] - | [[Green|Manage Personal Affairs][$artificialEyeFill = "green"]] - | [[Hazel|Manage Personal Affairs][$artificialEyeFill = "hazel"]] - | [[Orange|Manage Personal Affairs][$artificialEyeFill = "orange"]] - | [[Pale-Grey|Manage Personal Affairs][$artificialEyeFill = "pale-grey"]] - | [[Pink|Manage Personal Affairs][$artificialEyeFill = "pink"]] - | [[Red|Manage Personal Affairs][$artificialEyeFill = "red"]] - | [[Sky-Blue|Manage Personal Affairs][$artificialEyeFill = "sky-blue"]] - | [[Turquoise|Manage Personal Affairs][$artificialEyeFill = "turquoise"]] - | [[Yellow|Manage Personal Affairs][$artificialEyeFill = "yellow"]] - </div> - <<if ndef $artificialEyeColor>> - <<set $artificialEyeColor = "", $artificialEyeShape = "", $artificialEyeFill = "">> - <</if>> - - <<if $artificialEyeSide != "" && $artificialEyeColor != "">> - <div class="indent"> - <<link "Take" "Manage Personal Affairs">> - /* apply modifications */ - <<run setEyeColorFull($PC, $artificialEyeColor, $artificialEyeShape, $artificialEyeFill, $artificialEyeSide)>> - <<run cashX(forceNeg($modCost), "PCmedical")>> - - /* reset variables */ - <<set $artificialEyeSide = "", $artificialEyeColor = "", $artificialEyeShape = "", $artificialEyeFill = "">> - <</link>> - - /* make the following easier to read */ - <<set _both = $artificialEyeSide === "both">> - - <<if _both>> - $artificialEyeColor lenses - <<else>> - a $artificialEyeColor lens - <</if>> - <<if $artificialEyeShape != "" || $artificialEyeFill != "">> - with - <<if $artificialEyeShape != "" >> - $artificialEyeShape <<if _both>> pupils <<else>> pupil <</if>> - <</if>> - <<if $artificialEyeShape != "" && $artificialEyeFill != "">> - and - <</if>> - <<if $artificialEyeFill != "" >> - $artificialEyeFill <<if _both>> sclerae <<else>> sclera <</if>> - <</if>> - <</if>>? - </div> - <</if>> + <<includeDOM App.Medicine.Modification.eyeSelector($PC, true)>> <div> You have a selection of hair dyes available: diff --git a/src/uncategorized/salon.tw b/src/uncategorized/salon.tw index d1270397d26e23f1dd0255d9a6d697c60eb32db1..23ce0e955f9de6737eef33fefda9df393426f396 100644 --- a/src/uncategorized/salon.tw +++ b/src/uncategorized/salon.tw @@ -68,168 +68,7 @@ </div> <</if>> -<div> - Custom glass eyes and cosmetic lenses: - $He has <<print App.Desc.eyesType(getSlave($AS))>><<if hasAnyEyes(getSlave($AS))>>, <<if hasBothEyes(getSlave($AS))>>they are<<else>>it is<</if>> <<print App.Desc.eyesColorLong(getSlave($AS))>><</if>>. - - <div class="choices"> - /* remove lenses */ - <<set _n = 0>> - <<if hasLeftEye(getSlave($AS)) && getLeftEyeColor(getSlave($AS)) !== getGeneticEyeColor(getSlave($AS), "left")>> - <<set _n++>> - [[Remove left lens|Salon][resetEyeColor(getSlave($AS), "left")]] - <</if>> - <<if hasRightEye(getSlave($AS)) && getRightEyeColor(getSlave($AS)) !== getGeneticEyeColor(getSlave($AS), "right")>> - <<set _n++>> - <<if _n > 0>>|<</if>> - [[Remove right lens|Salon][resetEyeColor(getSlave($AS), "right")]] - <</if>> - <<if _n === 2>> - | [[Remove both lenses|Salon][resetEyeColor(getSlave($AS), "both")]] - <</if>> - /* remove glass eyes */ - <<set _n = 0>> - <<if getLeftEyeType(getSlave($AS)) === 2>> - <<set _n++>> - [[Remove left glass eye|Salon][eyeSurgery(getSlave($AS), "left", "remove")]] - <</if>> - <<if getRightEyeType(getSlave($AS)) === 2>> - <<set _n++>> - <<if _n > 0>>|<</if>> - [[Remove right glass eye|Salon][eyeSurgery(getSlave($AS), "right", "remove")]] - <</if>> - <<if _n === 2>> - | [[Remove both glass eyes|Salon][eyeSurgery(getSlave($AS), "both", "remove")]] - <</if>> - </div> -</div> - -<div> - <<if hasBothEyes(getSlave($AS))>> - Change what $his eyes look like: - <<elseif hasAnyEyes(getSlave($AS))>> - Change what $his eye looks like or give $him a new glass eye: - <<else>> - Choose what kind of glass eyes you want $him to have: - <</if>> -</div> - -<div class="choices"> - Side: - [[Left|Salon][$artificialEyeSide = "left"]] - | [[Right|Salon][$artificialEyeSide = "right"]] - | [[Both|Salon][$artificialEyeSide = "both"]] -</div> - -<div class="choices"> - Iris: - [[Amber|Salon][$artificialEyeColor = "amber"]] - | [[Black|Salon][$artificialEyeColor = "black"]] - | [[Blue|Salon][$artificialEyeColor = "blue"]] - | [[Brown|Salon][$artificialEyeColor = "brown"]] - | [[Green|Salon][$artificialEyeColor = "green"]] - | [[Hazel|Salon][$artificialEyeColor = "hazel"]] - | [[Orange|Salon][$artificialEyeColor = "orange"]] - | [[Pale-Grey|Salon][$artificialEyeColor = "pale-grey"]] - | [[Pink|Salon][$artificialEyeColor = "pink"]] - | [[Red|Salon][$artificialEyeColor = "red"]] - | [[Sky-Blue|Salon][$artificialEyeColor = "sky-blue"]] - | [[Turquoise|Salon][$artificialEyeColor = "turquoise"]] - | [[White|Salon][$artificialEyeColor = "white"]] - | [[Yellow|Salon][$artificialEyeColor = "yellow"]] -</div> - -<div class="choices"> - Pupil: - [[Circular|Salon][$artificialEyeShape = "circular"]] - | [[Almond-Shaped|Salon][$artificialEyeShape = "almond-shaped"]] - | [[Bright|Salon][$artificialEyeShape = "bright"]] - | [[Catlike|Salon][$artificialEyeShape = "catlike"]] - | [[Demonic|Salon][$artificialEyeShape = "demonic"]] - | [[Devilish|Salon][$artificialEyeShape = "devilish"]] - | [[Goat-Like|Salon][$artificialEyeShape = "goat-like"]] - | [[Heart-Shaped|Salon][$artificialEyeShape = "heart-shaped"]] - | [[Hypnotic|Salon][$artificialEyeShape = "hypnotic"]] - | [[Serpent-Like|Salon][$artificialEyeShape = "serpent-like"]] - | [[Star-Shaped|Salon][$artificialEyeShape = "star-shaped"]] - | [[Teary|Salon][$artificialEyeShape = "teary"]] - | [[Vacant|Salon][$artificialEyeShape = "vacant"]] - | [[Wide-Eyed|Salon][$artificialEyeShape = "wide-eyed"]] -</div> - -<div class="choices"> - Sclera: - [[White|Salon][$artificialEyeFill = "white"]] - | [[Amber|Salon][$artificialEyeFill = "amber"]] - | [[Black|Salon][$artificialEyeFill = "black"]] - | [[Blue|Salon][$artificialEyeFill = "blue"]] - | [[Brown|Salon][$artificialEyeFill = "brown"]] - | [[Green|Salon][$artificialEyeFill = "green"]] - | [[Hazel|Salon][$artificialEyeFill = "hazel"]] - | [[Orange|Salon][$artificialEyeFill = "orange"]] - | [[Pale-Grey|Salon][$artificialEyeFill = "pale-grey"]] - | [[Pink|Salon][$artificialEyeFill = "pink"]] - | [[Red|Salon][$artificialEyeFill = "red"]] - | [[Sky-Blue|Salon][$artificialEyeFill = "sky-blue"]] - | [[Turquoise|Salon][$artificialEyeFill = "turquoise"]] - | [[Yellow|Salon][$artificialEyeFill = "yellow"]] -</div> - -<div class="choices"> - <<if $artificialEyeSide != "" && $artificialEyeColor != "">> - <<link "Give" "Salon">> - /* make sure the eye(s) exists: give glass eye if there is none */ - <<if ($artificialEyeSide === "left" || $artificialEyeSide === "both") && getLeftEyeType(getSlave($AS)) === 0>> - <<run eyeSurgery(getSlave($AS), "left", "glass")>> - <</if>> - <<if ($artificialEyeSide === "right" || $artificialEyeSide === "both") && getRightEyeType(getSlave($AS)) === 0>> - <<run eyeSurgery(getSlave($AS), "right", "glass")>> - <</if>> - - /* apply modifications */ - <<run setEyeColorFull(getSlave($AS), $artificialEyeColor, $artificialEyeShape, $artificialEyeFill, $artificialEyeSide)>> - <<run cashX(forceNeg($modCost), "slaveMod", getSlave($AS))>> - - /* reset variables */ - <<set $artificialEyeSide = "", $artificialEyeColor = "", $artificialEyeShape = "", $artificialEyeFill = "">> - <</link>> - - /* make the following easier to read */ - <<set _both = $artificialEyeSide === "both", - _leftGlass = !hasLeftEye(getSlave($AS)) || getLeftEyeType(getSlave($AS)) === 2, - _rightGlass = !hasRightEye(getSlave($AS)) || getRightEyeType(getSlave($AS)) === 2>> - - $him $artificialEyeColor - <<if _both>> - <<if _leftGlass && _rightGlass>> - glass eyes - <<elseif _leftGlass || _rightGlass>> - a glass eye and a $artificialEyeColor lens - <<else>> - lenses - <</if>> - <<else>> - a - <<if ($artificialEyeSide === "left" && _leftGlass) || ($artificialEyeSide === "right" && _rightGlass)>> - glass eye - <<else>> - lens - <</if>> - <</if>> - <<if $artificialEyeShape != "" || $artificialEyeFill != "">> - with - <<if $artificialEyeShape != "" >> - $artificialEyeShape <<if _both>> pupils <<else>> pupil <</if>> - <</if>> - <<if $artificialEyeShape != "" && $artificialEyeFill != "">> - and - <</if>> - <<if $artificialEyeFill != "" >> - $artificialEyeFill <<if _both>> sclerae <<else>> sclera <</if>> - <</if>> - <</if>>? <span class="note">This is independent from eyewear choices.</span> - <</if>> -</div> +<<includeDOM App.Medicine.Modification.eyeSelector(getSlave($AS))>> /* EARS */ <h3>Ears</h3>