rulesAssistantOptions.js

/* eslint-disable camelcase */
/* eslint-disable no-unused-vars */
// rewrite of the rules assistant options page in javascript
// uses an object-oriented widget pattern
// wrapped in a closure so as not to pollute the global namespace
// the widgets are generic enough to be reusable; if similar user interfaces are ported to JS, we could move the classes to the global scope

window.rulesAssistantOptions = (function() {
	"use strict";
	let V, current_rule;

	function rulesAssistantOptions(element) {
		V = State.variables;
		V.nextButton = "Back to Main";
		V.nextLink = "Main";
		V.returnTo = "Main";
		V.showEncyclopedia = 1;
		V.encyclopedia = "Personal Assistant";
		if (V.currentRule !== null) {
			const idx = V.defaultRules.findIndex(rule => rule.ID === V.currentRule);
			if (idx === -1) {
				current_rule = V.defaultRules[0];
			} else {
				current_rule = V.defaultRules[idx];
			}
		}
		const root = new Root(element);
	}

	function returnP(e) { return e.keyCode === 13; }

	function newRule(root) {
		const rule = emptyDefaultRule();
		V.defaultRules.push(rule);
		V.currentRule = rule.ID;
		reload(root);
	}

	function removeRule(root) {
		const idx = V.defaultRules.findIndex(rule => rule.ID === current_rule.ID);
		V.defaultRules.splice(idx, 1);
		if (V.defaultRules.length > 0) {
			const new_idx = idx < V.defaultRules.length ? idx : V.defaultRules.length - 1;
			V.currentRule = V.defaultRules[new_idx].ID;
		} else {
			V.currentRule = null;
		}
		reload(root);
	}

	function lowerPriority(root) {
		if (V.defaultRules.length === 1) { return; } // nothing to swap with
		const idx = V.defaultRules.findIndex(rule => rule.ID === current_rule.ID);
		if (idx === 0) { return; } // no lower rule
		arraySwap(V.defaultRules, idx, idx - 1);
		reload(root);
	}

	function higherPriority(root) {
		if (V.defaultRules.length === 1) { return; } // nothing to swap with
		const idx = V.defaultRules.findIndex(rule => rule.ID === current_rule.ID);
		if (idx === V.defaultRules.length - 1) { return; } // no higher rule
		arraySwap(V.defaultRules, idx, idx + 1);
		reload(root);
	}

	function changeName(name, root) {
		if (name === current_rule.name) { return; }
		current_rule.name = name;
		reload(root);
	}

	// reload the passage
	function reload(root) {
		const elem = root.element;
		elem.innerHTML = "";
		rulesAssistantOptions(elem);
	}

	const parse = {
		integer(string) {
			let n = parseInt(string, 10);
			return isNaN(n) ? 0 : n;
		},
		boobs(string) {
			return Math.clamp(parse.integer(string), 0, 48000);
		},
		butt(string) {
			return Math.clamp(parse.integer(string), 0, 20);
		},
		lips(string) {
			return Math.clamp(parse.integer(string), 0, 100);
		},
		dick(string) {
			return Math.clamp(parse.integer(string), 0, 30);
		},
		balls(string) {
			return Math.clamp(parse.integer(string), 0, 125);
		},
	};

	// the Element class wraps around a DOM element and adds extra functionality
	// this is safer than extending DOM objects directly
	// it also turns DOM manipulation into an implementation detail
	class Element {
		constructor(...args) {
			this.parent = null;
			this.element = this.render(...args);
			this.children = [];
		}

		appendChild(child) {
			child.parent = this;
			this.children.push(child);
			this.element.appendChild(child.element);
		}

		// return the first argument to simplify creation of basic container items
		render(...args) {
			return args[0];
		}

		remove() {
			const idx = this.parent.children.findIndex(child => child === this);
			this.parent.children.slice(idx, 1);
			this.element.remove();
		}
	}

	class Section extends Element {
		constructor(header, hidden = false) {
			super(header);
			this.hidey = this.element.querySelector("div");
			if (hidden) { this.toggle_hidey(); }
		}

		render(header) {
			const section = document.createElement("section");
			section.classList.add("rajs-section");
			const h1 = document.createElement("h1");
			h1.onclick = () => { this.toggle_hidey(); };
			h1.innerHTML = header;
			const hidey = document.createElement("div");
			section.appendChild(h1);
			section.appendChild(hidey);
			return section;
		}

		appendChild(child) {
			child.parent = this;
			this.children.push(child);
			this.hidey.appendChild(child.element);
		}

		toggle_hidey() {
			switch (this.hidey.style.display) {
				case "none":
					this.hidey.style.display = "initial";
					break;
				default:
					this.hidey.style.display = "none";
					break;
			}
		}
	}

	// list of clickable elements
	// has a short explanation (the prefix) and a value display
	// value display can optionally be an editable text input field
	// it can be "bound" to a variable by setting its "onchange" method
	class EditorWithShortcuts extends Element {
		constructor(prefix, data = [], editor = false, ...args) {
			super(`${prefix}: `, editor, ...args);
			this.selectedItem = null;
			data.forEach(item => this.appendChild(new ListItem(...item)));
		}

		createEditor(...args) { return null; }

		render(prefix, editor, ...args) {
			const elem = document.createElement("div");
			const label = document.createElement("span");
			label.innerHTML = prefix;
			this.value = editor ? this.createEditor(...args) : document.createElement("strong");
			elem.appendChild(label);
			elem.appendChild(this.value);
			elem.classList.add("rajs-list");
			return elem;
		}

		inputEdited() {
			if (this.selectedItem) { this.selectedItem.deselect(); }
			this.propagateChange();
		}

		selectItem(item) {
			if (this.selectedItem) { this.selectedItem.deselect(); }
			this.selectedItem = item;
			this.setValue(item.data);
			this.propagateChange();
		}

		setValue(what) {
			if (this.value.tagName === "INPUT") {
				this.value.value = `${what}`;
			} else {
				this.value.innerHTML = `${what}`;
			}
		}

		getData(what) {
			return (this.value.tagName === "INPUT" ? this.parse(this.value.value) : this.selectedItem.data);
		}

		// customizable input field parser / sanity checker
		parse(what) { return what; }

		propagateChange() {
			if (this.onchange instanceof Function) {
				this.onchange(this.getData());
			}
		}
	}

	// a clickable item of a list
	class ListItem extends Element {
		constructor(displayvalue, data) {
			super(displayvalue);
			this.data = data !== undefined ? data : displayvalue;
			this.selected = false;
		}

		render(displayvalue) {
			const elem = document.createElement("span");
			elem.classList.add("rajs-listitem");
			elem.innerHTML = displayvalue;
			elem.onclick = () => { return this.select(); };
			return elem;
		}

		select() {
			if (this.selected) { return false; }
			this.parent.selectItem(this);
			this.element.classList.add("selected");
			this.selected = true;
			return true;
		}

		deselect() {
			this.element.classList.remove("selected");
			this.selected = false;
		}
	}

	class List extends EditorWithShortcuts {
		constructor(prefix, data = [], textinput = false) {
			super(prefix, data, textinput);
		}

		createEditor() {
			let res = document.createElement("input");
			res.setAttribute("type", "text");
			res.classList.add("rajs-value"); //
			// call the variable binding when the input field is no longer being edited, and when the enter key is pressed
			res.onblur = () => {
				this.inputEdited();
			};
			res.onkeypress = (e) => {
				if (returnP(e)) { this.inputEdited(); }
			};
			return res;
		}
	}

	class NumberRange extends EditorWithShortcuts {
		constructor(prefix, data = [], min, max, spinbox = false) {
			super(prefix, data, spinbox, min, max);
			this.nullValue = data.length ? data[0][1] : null;
		}

		createEditor(min, max) {
			let res = document.createElement("input");
			res.setAttribute("type", "number");
			res.setAttribute("min", min);
			res.setAttribute("max", max);
			res.classList.add("rajs-value"); //
			res.onblur = () => {
				this.inputEdited();
			};
			res.onkeypress = (e) => {
				if (returnP(e)) { this.inputEdited(); }
			};
			return res;
		}

		parse(what) {
			return what === "" ? this.nullValue : parseInt(what);
		}
	}

	// a way to organize lists with too many elements in subsections
	// children are bound to the master list
	class ListSubSection extends Element {
		constructor(parent, label, pairs) {
			super(label);
			this.parent = parent;
			pairs.forEach(item => this.appendChild(new ListItem(...item)));
		}

		render(label) {
			const elem = document.createElement("div");
			const lelem = document.createElement("em");
			lelem.innerText = `${label}: `;
			elem.appendChild(lelem);
			return elem;
		}

		appendChild(child) {
			super.appendChild(child);
			child.parent = this.parent;
			this.parent.children.push(child);
		}
	}

	// similar to list, but is just a collection of buttons
	class Options extends Element {
		constructor(elements = []) {
			super();
			elements.forEach(element => { this.appendChild(element); });
		}

		render() {
			const elem = document.createElement("div");
			elem.classList.add("rajs-list");
			return elem;
		}
	}

	// options equivalent of ListItem
	class OptionsItem extends Element {
		constructor(label, onclick) {
			super(label);
			this.label = label;
			this.onclick = onclick;
		}
		render(label, onclick) {
			const elem = document.createElement("span");
			elem.classList.add("rajs-listitem");
			elem.innerHTML = label;
			elem.onclick = () => { return this.onclick(this); };
			return elem;
		}
	}

	class ButtonList extends Element {
		render(label) {
			const elem = document.createElement("div");
			const labelel = document.createElement("span");
			labelel.innerHTML = label += ": ";
			elem.appendChild(labelel);
			return elem;
		}

		getSelection() {
			return (this.children
				.filter(child => child.selected)
				.map(child => child.setvalue)
			);
		}

		onchange() { return; }
	}

	class ButtonItem extends Element {
		constructor(label, setvalue, selected = false) {
			super(label, selected);
			this.selected = selected;
			this.setvalue = setvalue ? setvalue : label;
		}

		render(label, selected) {
			const container = document.createElement("div");
			container.classList.add("rajs-listitem");

			const labelel = document.createElement("span");
			labelel.innerHTML = label;

			const button = document.createElement("input");
			button.setAttribute("type", "checkbox");
			button.checked = selected;
			button.onchange = () => this.onchange(button.checked);
			labelel.onclick = () => button.click();

			container.appendChild(labelel);
			container.appendChild(button);

			return container;
		}

		onchange(value) {
			this.selected = value;
			this.parent.onchange(this);
		}
	}

	// rule import field
	class NewRuleField extends Element {
		constructor(root) {
			super();
			this.root = root;
		}

		render() {
			let element = document.getElementById("importfield");
			if (element !== null) {
				return element;
			}
			const container = document.createElement("div");
			container.id = "importfield";
			const textarea = document.createElement("textarea");
			textarea.placeholder = "Paste your rule here";
			container.appendChild(textarea);
			this.textarea = textarea;
			const button = document.createElement("button");
			button.name = "Load";
			button.innerHTML = "Load";
			button.onclick = () => { this.loadNewRule(); };
			container.appendChild(button);
			return container;
		}

		loadNewRule() {
			const text = this.textarea.value;
			try {
				const rule = JSON.parse(text);
				if (rule instanceof Array) {
					rule.forEach(r => V.defaultRules.push(r));
				} else {
					V.defaultRules.push(rule);
				}
				reload(this.root);
			} catch (e) {
				alert(`Couldn't import that rule:\n${e.message}`);
			}
		}
	}

	// the base element, parent of all elements
	class Root extends Element {
		constructor(element) {
			super(element);
			if (V.defaultRules.length === 0) {
				const paragraph = document.createElement("p");
				paragraph.innerHTML = "<strong>No rules</strong>";
				this.appendChild(new Element(paragraph));
				this.appendChild(new NoRules(this));
				return;
			}
			this.appendChild(new RuleSelector(this));
			this.appendChild(new RuleOptions(this));
			this.appendChild(new ConditionEditor(this));
			this.appendChild(new EffectEditor(this));
		}

		render(element) {
			const greeting = document.createElement("p");
			greeting.innerHTML = `<em>${properTitle()}, I will review your slaves and make changes that will have a beneficial effect. Apologies, ${properTitle()}, but this function is... not fully complete. It may have some serious limitations. Please use the 'no default setting' option to identify areas I should not address.</em>`;
			element.appendChild(greeting);
			return element;
		}
	}

	// options displayed when there are no rules
	class NoRules extends Options {
		constructor(root) {
			super();
			this.root = root;
			const newrule = new OptionsItem("Add a new rule", () => { newRule(this.root); });
			this.appendChild(newrule);
			const importrule = new OptionsItem("Import a rule", () => { this.root.appendChild(new NewRuleField(this.root)); });
			this.appendChild(importrule);
		}
	}

	// buttons for selecting the current rule
	class RuleSelector extends List {
		constructor(root) {
			super("Current rule", V.defaultRules.map(i => [i.name, i]));
			this.setValue(current_rule.name);
			this.onchange = function(rule) {
				V.currentRule = rule.ID;
				reload(root);
			};
		}
	}

	// buttons for doing transformations on rules
	class RuleOptions extends Options {
		constructor(root) {
			super();
			this.appendChild(new OptionsItem("New Rule", () => newRule(root)));
			this.appendChild(new OptionsItem("Remove Rule", () => removeRule(root)));
			this.appendChild(new OptionsItem("Apply rules", () => this.appendChild(new ApplicationLog())));
			this.appendChild(new OptionsItem("Lower Priority", () => lowerPriority(root)));
			this.appendChild(new OptionsItem("Higher Priority", () => higherPriority(root)));
			this.appendChild(new OptionsItem("Rename", () => this.appendChild(new RenameField(root))));
			this.appendChild(new OptionsItem("Export this rule", () => this.appendChild(new ExportField(current_rule))));
			this.appendChild(new OptionsItem("Export all rules", () => this.appendChild(new ExportField(...V.defaultRules))));
			this.appendChild(new OptionsItem("Import rule(s)", () => this.appendChild(new NewRuleField(root))));
		}
	}

	class ApplicationLog extends Element {
		render() {
			const elem = document.querySelector("#application-log") || document.createElement("div");
			elem.id = "application-log";
			clearSummaryCache();
			elem.innerHTML = V.slaves.map(slave => DefaultRules(slave)).join("");
			return elem;
		}
	}

	class RenameField extends Element {
		constructor(root) {
			super();
			this.element.onblur = () => changeName(this.element.value, root);
			this.element.onkeypress = (e) => { if (returnP(e)) { changeName(this.element.value, root); } };
		}

		render() {
			const elem = document.createElement("input");
			elem.setAttribute("type", "text");
			elem.setAttribute("value", current_rule.name);
			return elem;
		}
	}

	class ExportField extends Element {
		render(...args) {
			let element = document.getElementById("exportfield");
			if (element === null) {
				element = document.createElement("textarea");
				element.id = "exportfield";
			}
			element.value = JSON.stringify(args, null, 2);
			return element;
		}
	}

	// parent section for condition editing
	class ConditionEditor extends Section {
		constructor() {
			super("Activation Condition");
			this.appendChild(new ConditionFunction());
			this.appendChild(new AssignmentInclusion());
			this.appendChild(new SpecialInclusion());
			this.appendChild(new SpecificInclusionExclusion());
		}
	}

	class ConditionFunction extends Element {
		constructor() {
			super();
			const items = [
				["Never", false],
				["Always", true],
				["Custom", "custom"],
				["Devotion", "devotion"],
				["Trust", "trust"],
				["Health", "health"],
				["Sex", "genes"],
				["Sex drive", "energy"],
				["Height", "height"],
				["Weight", "weight"],
				["Age", "actualAge"],
				["Body Age", "physicalAge"],
				["Visible Age", "visualAge"],
				["Muscles", "muscles"],
				["Lactation", "lactation"],
				["Pregnancy", "preg"],
				["Pregnancy Multiples", "pregType"],
				["Belly Implant", "bellyImplant"],
				["Belly Size", "belly"],
				["Education", "intelligenceImplant"],
				["Intelligence", "intelligence"],
				["Fetish", "fetish"],
				["Accent", "accent"],
				["Waist", "waist"],
				["Amputation", "amp"],
			];
			this.fnlist = new List("Activation function", items);
			this.fnlist.setValue(current_rule.condition.function === "between" ? current_rule.condition.data.attribute : current_rule.condition.function);
			this.fnlist.onchange = (value) => this.fnchanged(value);
			this.appendChild(this.fnlist);
			this.fneditor = null;

			switch (current_rule.condition.function) {
				case false:
				case true:
					break;
				case "custom":
					this.show_custom_editor(CustomEditor, current_rule.condition.data);
					break;
				case "between":
					this.show_custom_editor(RangeEditor, current_rule.condition.function, current_rule.condition.data);
					break;
				case "belongs":
					this.show_custom_editor(ItemEditor, current_rule.condition.function, current_rule.condition.data);
					break;
			}
		}

		betweenP(attribute) {
			return [
				"devotion",
				"trust",
				"health",
				"energy",
				"height",
				"weight",
				"actualAge",
				"physicalAge",
				"visualAge",
				"muscles",
				"lactation",
				"preg",
				"pregType",
				"bellyImplant",
				"belly",
				"intelligenceImplant",
				"intelligence",
				"accent",
				"waist",
			].includes(attribute);
		}

		belongsP(attribute) {
			return [
				"fetish",
				"amp",
				"genes",
			].includes(attribute);
		}

		show_custom_editor(what, ...args) {
			if (this.custom_editor !== null) { this.hide_custom_editor(); }
			this.custom_editor = new what(...args);
			this.appendChild(this.custom_editor);
		}

		hide_custom_editor() {
			if (this.custom_editor) {
				this.custom_editor.remove();
				this.custom_editor = null;
			}
		}

		render() {
			const elem = document.createElement("div");
			return elem;
		}

		fnchanged(value) {
			if (this.fneditor !== null) {
				this.fneditor.element.remove();
				this.fneditor = null;
			}
			if (value === true || value === false) {
				current_rule.condition.function = value;
				current_rule.condition.data = {};
				this.hide_custom_editor();
			} else if (value === "custom") {
				current_rule.condition.function = "custom";
				current_rule.condition.data = "";
				this.show_custom_editor(CustomEditor, current_rule.condition.data);
			} else if (this.betweenP(value)) {
				current_rule.condition.function = "between";
				current_rule.condition.data = {attribute: value, value: [null, null]};
				this.show_custom_editor(RangeEditor, current_rule.condition.function, current_rule.condition.data);
			} else if (this.belongsP(value)) {
				current_rule.condition.function = "belongs";
				current_rule.condition.data = {attribute: value, value: []};
				this.show_custom_editor(ItemEditor, current_rule.condition.function, current_rule.condition.data);
			}
		}
	}

	class CustomEditor extends Element {
		constructor(data) {
			if (data.length === 0) { data = "(slave) => slave.slaveName === 'Fancy Name'"; }
			super(data);
		}

		render(data) {
			const elem = document.createElement("div");
			const textarea = document.createElement("textarea");
			textarea.innerHTML = data;
			textarea.onblur = () => current_rule.condition.data = textarea.value;
			elem.appendChild(textarea);
			const explanation = document.createElement("div");
			explanation.innerHTML = "Insert a valid <a target='_blank' class='link-external' href='https://www.w3schools.com/js/js_comparisons.asp'>JavaScript comparison and/or logical operation</a>.";
			elem.appendChild(explanation);
			return elem;
		}
	}

	class RangeEditor extends Element {
		render(fn, data) {
			const elem = document.createElement("div");

			const minlabel = document.createElement("label");
			minlabel.innerHTML = "Lower bound: ";
			elem.appendChild(minlabel);

			const min = document.createElement("input");
			min.setAttribute("type", "text");
			min.value = `${data.value[0]}`;
			min.onkeypress = e => { if (returnP(e)) { this.setmin(min.value); } };
			min.onblur = e => this.setmin(min.value);
			this.min = min;
			elem.appendChild(min);

			elem.appendChild(document.createElement("br"));

			const maxlabel = document.createElement("label");
			maxlabel.innerHTML = "Upper bound: ";
			elem.appendChild(maxlabel);

			const max = document.createElement("input");
			max.setAttribute("type", "text");
			max.value = `${data.value[1]}`;
			max.onkeypress = e => { if (returnP(e)) { this.setmax(max.value); } };
			max.onblur = e => this.setmax(max.value);
			this.max = max;
			elem.appendChild(max);

			const infobar = document.createElement("div");
			infobar.innerHTML = this.info(data.attribute);
			elem.appendChild(infobar);

			return elem;
		}

		parse(value) {
			value = value.trim();
			if (value === "null") {
				value = null;
			} else {
				value = parseInt(value);
				if (isNaN(value)) { value = null; }
			}
			return value;
		}

		setmin(value) {
			current_rule.condition.data.value[0] = this.parse(value);
			this.min.value = `${current_rule.condition.data.value[0]}`;
		}

		setmax(value) {
			current_rule.condition.data.value[1] = this.parse(value);
			this.max.value = `${current_rule.condition.data.value[1]}`;
		}

		info(attribute) {
			return ({
				"devotion": "Very Hateful: (-∞, -95), Hateful: [-95, -50), Resistant: [-50, -20), Ambivalent: [-20, 20], Accepting: (20, 50], Devoted: (50, 95], Worshipful: (95, ∞)",
				"trust": "Extremely terrified: (-∞, -95), Terrified: [-95, -50), Frightened: [-50, -20), Fearful: [-20, 20], Careful: (20, 50], Trusting: (50, 95], Total trust: (95, ∞)",
				"health": "Death: (-∞, -100), Near Death: [-100, -90), Extremely Unhealthy: [-90, -50), Unhealthy: [-50, -20), Healthy: [-20, 20], Very Healthy: (20, 50], Extremely Healthy: (50, 90], Unnaturally Healthy: (90, ∞)",
				"energy": "Frigid: (-∞, 20], Poor: (20, 40], Average: (40, 60], Powerful: (60, 80], Sex Addict: (80, 100), Nympho: 100",
				"weight": "Emaciated: (-∞, -95), Skinny: [-95, -30), Thin: [-30, -10), Average: [-10, 10], Plush: (10, 30], Fat: (30, 95], Overweight: (95, ∞)",
				"lactation": "None: 0, 1: Natural, 2: Lactation implant",
				"preg": "Barren: -2, On contraceptives: -1, Not pregnant: 0, Pregnancy weeks: [1, ∞)",
				"pregType": "Fetus count, known only after the 10th week of pregnancy",
				"bellyImplant": "Volume in CCs. None: -1",
				"belly": "Volume in CCs, any source",
				"intelligenceImplant": "Education level. 0: uneducated, 15: educated, 30: advanced education, (0, 15): incomplete education.",
				"intelligence": "From moronic to brilliant: [-100, 100]",
				"accent": "No accent: 0, Nice accent: 1, Bad accent: 2, Can't speak language: 3 and above",
				"waist": "Masculine waist: (95, ∞), Ugly waist: (40, 95], Unattractive waist: (10, 40], Average waist: [-10, 10], Feminine waist: [-40, -10), Wasp waist: [-95, -40), Absurdly narrow: (-∞, -95)",
			} [attribute] || " ");
		}
	}

	class ItemEditor extends Element {
		render(fn, data) {
			const elem = document.createElement("div");

			const input = document.createElement("input");
			input.setAttribute("type", "text");
			input.value = JSON.stringify(data.value);
			input.onkeypress = e => { if (returnP(e)) { this.setValue(input); } };
			input.onblur = e => this.setValue(input);
			this.input = input;
			elem.appendChild(input);

			const infobar = document.createElement("div");
			infobar.innerHTML = this.info(data.attribute);
			elem.appendChild(infobar);

			return elem;
		}

		info(attribute) {
			return `Insert a valid JSON array. Known values: ${{
				"fetish": "buttslut, cumslut, masochist, sadist, dom, submissive, boobs, pregnancy, none (AKA vanilla)",
				"amp": "Amputated: 1, Not amputated: 0",
				"genes": "XX, XY",
			}[attribute]}`;
		}

		setValue(input) {
			try {
				const arr = JSON.parse(input.value);
				current_rule.condition.data.value = arr;
				input.value = JSON.stringify(arr);
			} catch (e) {
				alert(e);
			}
		}
	}


	class AssignmentInclusion extends ButtonList {
		constructor() {
			super("Apply to assignments and facilities");
			const items = ["Classes", "Confined", "Fucktoy", "Gloryhole", "House Servant", "Milked", "Public Servant", "Rest", "Subordinate Slave", "Whore"];
			if (V.HGSuite > 0) {
				items.push("Head Girl Suite");
			}
			if (V.brothel > 0) {
				items.push("Brothel");
			}
			if (V.club > 0) {
				items.push("Club");
			}
			if (V.arcade > 0) {
				items.push("Arcade");
			}
			if (V.dairy > 0) {
				items.push("Dairy");
			}
			if (V.servantsQuarters > 0) {
				items.push("Servant Quarters");
			}
			if (V.masterSuite > 0) {
				items.push("Master Suite");
			}
			if (V.schoolroom > 0) {
				items.push("Schoolroom");
			}
			if (V.spa > 0) {
				items.push("Spa");
			}
			if (V.nursery > 0) {
				items.push("Nursery");
			}
			if (V.clinic > 0) {
				items.push("Clinic");
			}
			if (V.cellblock > 0) {
				items.push("Cellblock");
			}
			items.forEach(
				i => this.appendChild(new ButtonItem(i, this.getAttribute(i), current_rule.condition.assignment.includes(this.getAttribute(i)))));
		}

		onchange() {
			current_rule.condition.assignment = this.getSelection();
		}

		getAttribute(what) {
			return {
				"Rest": "rest",
				"Fucktoy": "please you",
				"Subordinate Slave": "be a subordinate slave",
				"House Servant": "be a servant",
				"Confined": "stay confined",
				"Whore": "whore",
				"Public Servant": "serve the public",
				"Classes": "take classes",
				"Milked": "get milked",
				"Gloryhole": "work a glory hole",
				"Head Girl Suite": "live with your Head Girl",
				"Brothel": "work in the brothel",
				"Club": "serve in the club",
				"Arcade": "be confined in the arcade",
				"Dairy": "work in the dairy",
				"Farmyard": "work as a farmhand",
				"Servant Quarters": "work as a servant",
				"Master Suite": "serve in the master suite",
				"Schoolroom": "learn in the schoolroom",
				"Spa": "rest in the spa",
				"Nursery": "work as a nanny",
				"Clinic": "get treatment in the clinic",
				"Cellblock": "be confined in the cellblock",
			} [what];
		}
	}

	class SpecialInclusion extends List {
		constructor() {
			const items = [
				["Include", -1],
				["Exclude", 0],
				["Only", 1]
			];
			super("Special slaves", items);
			this.setValue(current_rule.condition.specialSlaves);
			this.onchange = (value) => current_rule.condition.specialSlaves = value;
		}
	}

	class SpecificInclusionExclusion extends Options {
		constructor() {
			super();
			this.appendChild(new OptionsItem("Limit to specific slaves", () => this.show_slave_selection()));
			this.appendChild(new OptionsItem("Exclude specific slaves", () => this.show_slave_exclusion()));
			this.subwidget = null;
		}

		show_slave_selection() {
			if (this.subwidget) { this.subwidget.remove(); }
			this.subwidget = new SlaveSelection();
			this.appendChild(this.subwidget);
		}

		show_slave_exclusion() {
			if (this.subwidget) { this.subwidget.remove(); }
			this.subwidget = new SlaveExclusion();
			this.appendChild(this.subwidget);
		}
	}

	class SlaveSelection extends ButtonList {
		constructor() {
			super("Include specific slaves");
			V.slaves.forEach(slave => this.appendChild(new ButtonItem(
				[slave.slaveName, slave.slaveSurname].join(" "),
				slave.ID,
				current_rule.condition.selectedSlaves.includes(slave.ID))));
		}

		onchange() {
			current_rule.condition.selectedSlaves = this.getSelection();
		}
	}

	class SlaveExclusion extends ButtonList {
		constructor() {
			super("Exclude specific slaves");
			V.slaves.forEach(slave => this.appendChild(new ButtonItem(
				[slave.slaveName, slave.slaveSurname].join(" "),
				slave.ID,
				current_rule.condition.excludedSlaves.includes(slave.ID))));
		}

		onchange() {
			current_rule.condition.excludedSlaves = this.getSelection();
		}
	}

	// parent section for effect editing
	class EffectEditor extends Element {
		constructor() {
			super();
			this.appendChild(new AppearanceSection());
			this.appendChild(new CosmeticSection());
			this.appendChild(new BodyModSection());
			this.appendChild(new AutosurgerySection());
			this.appendChild(new RegimenSection());
			this.appendChild(new BehaviourSection());
			this.appendChild(new OtherSection());
		}

		render() {
			const element = document.createElement("div");
			return element;
		}
	}

	class AppearanceSection extends Section {
		constructor() {
			super("Appearance Settings");
			this.appendChild(new ClothesList());
			this.appendChild(new CollarList());
			this.appendChild(new ShoeList());
			this.appendChild(new CorsetList());
			this.appendChild(new LeggingsList());
			this.appendChild(new VagChastityList());
			this.appendChild(new VagAccVirginsList());
			this.appendChild(new VagAccAVirginsList());
			this.appendChild(new VagAccOtherList());
			this.appendChild(new VaginalAttachmentsList());
			if (V.seeDicks !== 0 || V.makeDicks !== 0) {
				this.appendChild(new DickChastityList());
				this.appendChild(new DickAccVirginsList());
				this.appendChild(new DickAccOtherList());
			}
			this.appendChild(new AnalChastityList());