From ebb0a87871adc58f77bb36ed1a81527b253589f7 Mon Sep 17 00:00:00 2001
From: lowercasedonkey <lowercasedonkey@gmail.com>
Date: Tue, 21 Apr 2020 15:46:37 -0400
Subject: [PATCH] move modify tab to dom

---
 src/interaction/slaveInteract.js   | 117 +++++++++++++++++++++++++++++
 src/uncategorized/slaveInteract.tw |  44 +----------
 2 files changed, 121 insertions(+), 40 deletions(-)

diff --git a/src/interaction/slaveInteract.js b/src/interaction/slaveInteract.js
index 4d1085722bf..cd3a265ea64 100644
--- a/src/interaction/slaveInteract.js
+++ b/src/interaction/slaveInteract.js
@@ -21,6 +21,123 @@ App.UI.SlaveInteract.placeInLine = function(slave) {
 	return [ slaveList[prevIndex].ID, slaveList[nextIndex].ID ];
 };
 
+App.UI.SlaveInteract.modify = function(slave) {
+	/** @type {App.Entity.SlaveState} */
+	const {he, his} = getPronouns(slave);
+	let el = new DocumentFragment();
+	let p;
+	let div;
+	let note;
+
+	if (["be your agent", "live with your agent"].includes(slave.assignment)) {
+		p = document.createElement('p');
+		p.className = "scene-intro";
+		p.textContent = "Recall your agent to modify them.";
+		el.append(p);
+	} else {
+		p = document.createElement('p');
+		p.className = "scene-intro";
+		p.textContent = "Take slave to another room.";
+		el.append(p);
+
+		// Salon
+		div = document.createElement('div');
+		div.appendChild(
+			App.UI.DOM.link(
+				"Auto salon",
+				() => {
+					V.activeSlave = slave,
+					V.degradation = 0,
+					V.primaryHairColor = "",
+					V.secondaryHairColor = "",
+					V.primaryEarColor = "",
+					V.secondaryEarColor = "",
+					V.primaryTailColor = "",
+					V.secondaryTailColor = "",
+					V.artificialEyeColor = "",
+					V.artificialEyeShape = "",
+					V.artificialEyeFill = "",
+					V.tattooChoice = "",
+					V.piercingLevel = "";
+				},
+				[],
+				"Salon"
+			)
+		);
+		note = document.createElement('span');
+		note.className="note";
+		note.textContent = ` Modify hair (color, length, style), nails, and even skin color.`;
+
+		div.append(note);
+		el.append(div);
+
+		// Body Mod
+		div = document.createElement('div');
+		div.appendChild(
+			App.UI.DOM.link(
+				"Body mod studio",
+				() => {
+					V.activeSlave = slave,
+					V.degradation = 0,
+					V.tattooChoice = undefined;
+				},
+				[],
+				"Body Modification"
+			)
+		);
+		note = document.createElement('span');
+		note.className="note";
+		note.textContent = ` Mark your slave with piercings, tattoos, brands or even scars.`;
+
+		div.append(note);
+		el.append(div);
+
+		// Surgery
+		div = document.createElement('div');
+		div.appendChild(
+			App.UI.DOM.link(
+				"Remote surgery",
+				() => {
+					V.activeSlave = slave,
+					V.degradation = 0,
+					V.tattooChoice = undefined;
+				},
+				[],
+				"Remote Surgery"
+			)
+		);
+		note = document.createElement('span');
+		note.className="note";
+		note.textContent = ` Surgically modify your slave with state of the art plastic surgery and more. Alter ${his} senses, skeletal structure, organs, and even more.`;
+
+		div.append(note);
+		el.append(div);
+
+		// Prosthetics
+		if (V.prostheticsUpgrade > 0) {
+			div = document.createElement('div');
+			div.appendChild(
+				App.UI.DOM.link(
+					"Configure cybernetics",
+					() => {
+						V.activeSlave = slave,
+						V.prostheticsConfig = "main";
+					},
+					[],
+					"Prosthetics Configuration"
+				)
+			);
+			note = document.createElement('span');
+			note.className="note";
+			note.textContent = ` Configure prosthetics, if ${he} has been surgically implanted with interfaces that support it.`;
+
+			div.append(note);
+			el.append(div);
+		}
+	}
+	return el;
+};
+
 App.UI.SlaveInteract.fucktoyPref = function(slave) {
 	/** @type {App.Entity.SlaveState} */
 	const {his} = getPronouns(slave);
diff --git a/src/uncategorized/slaveInteract.tw b/src/uncategorized/slaveInteract.tw
index 63e5021c4f8..94563e16482 100644
--- a/src/uncategorized/slaveInteract.tw
+++ b/src/uncategorized/slaveInteract.tw
@@ -142,46 +142,10 @@
 
 <div id="Modify" class="tabcontent">
 	<div class="content">
-		<p>
-			<<if ["be your agent", "live with your agent"].includes(getSlave($AS).assignment)>>
-				<p class="scene-intro">
-					Recall your agent to modify them.
-				</p>
-			<<else>>
-				<p class="scene-intro">
-					Take slave to another room.
-				</p>
-
-				<div>
-					[[Auto salon|Salon][$activeSlave = getSlave($AS), $degradation = 0,$primaryHairColor = "",$secondaryHairColor = "",$primaryEarColor = "",$secondaryEarColor = "",$primaryTailColor = "",$secondaryTailColor = "",$artificialEyeColor = "",$artificialEyeShape = "",$artificialEyeFill = "",$tattooChoice = "",$piercingLevel = ""]]
-					<span class="note">
-						Modify hair (color, length, style), nails, and even skin color.
-					</span>
-				</div>
-
-				<div>
-					[[Body mod studio|Body Modification][$activeSlave = getSlave($AS), $degradation = 0, $tattooChoice = undefined]]
-					<span class="note">
-						Mark your slave with piercings, tattoos, brands or even scars.
-					</span>
-				</div>
-
-				<div>
-					[[Remote surgery|Remote Surgery][$activeSlave = getSlave($AS), $degradation = 0]]
-					<span class="note">
-						Surgically modify your slave with state of the art plastic surgery and more. Alter $his senses, skeletal structure, organs, and even more.
-					</span>
-				</div>
-				<<if $prostheticsUpgrade > 0>>
-					<div>
-						[[Configure cybernetics|Prosthetics Configuration][$activeSlave = getSlave($AS), $prostheticsConfig = "main"]]
-						<span class="note">
-							Configure prosthetics, for slaves that have been surgically implanted with bases that support it.
-						</span>
-					</div>
-				<</if>>
-			<</if>>
-		</p>
+		<p id="modifySection"></p>
+		<script>
+			jQuery('#modifySection').empty().append(App.UI.SlaveInteract.modify(getSlave(V.AS)))
+		</script>
 	</div>
 </div>
 
-- 
GitLab