diff --git a/src/pregmod/customizeSlaveTrade.js b/src/pregmod/customizeSlaveTrade.js
new file mode 100644
index 0000000000000000000000000000000000000000..6c3bd197aa1e0a7eec01f2b66890aadc8b3e5a46
--- /dev/null
+++ b/src/pregmod/customizeSlaveTrade.js
@@ -0,0 +1,292 @@
+App.Intro.customizeSlaveTrade = function() {
+ const frag = new DocumentFragment();
+ let span = document.createElement("span");
+ App.UI.DOM.appendNewElement("p", frag, `When civilization turned upon itself, some countries readily took to enslaving their own. Others were raided by their neighbors for their desirable, and profitable, citizens. Which nationalities were most affected by the booming slave trade, and thus, likely to appear in your local slave markets?`);
+ App.UI.DOM.appendNewElement("p", frag, `+ to increase pop. – to reduce pop. 0 to remove entirely`, "bold");
+
+ span.id = "PopControl"; // not needed later
+ span.append(baseNationalitiesControls());
+ frag.append(span);
+ return frag;
+
+ /**
+ * @returns {Node}
+ */
+ function baseNationalitiesControls() {
+ const frag = new DocumentFragment();
+ let p = document.createElement("p");
+ let destination;
+ let div;
+ let array;
+
+ if (hashSum(V.nationalities) < 1) {
+ App.UI.DOM.appendNewElement("div", p, `You cannot be a slaveowner without a slave trade. Please add nationalities to continue.`, "note");
+ } else {
+ destination = (V.customWA === 0) ? "Intro Summary" : "Extreme Intro";
+ App.UI.DOM.appendNewElement(
+ "div",
+ p,
+ App.UI.DOM.passageLink(
+ "Confirm customization",
+ destination,
+ () => delete V.baseControlsFilter
+ )
+ );
+ }
+ frag.append(p);
+ p = document.createElement("p");
+
+ /* Generates cloned array of V.nationalities, removing duplicates and then sorting */
+ V.nationalitiesCheck = Object.assign({}, V.nationalities);
+
+ /* Prints distribution of V.nationalities, using V.nationalitiesCheck to render array */
+ let percentPerPoint = 100.0 / hashSum(V.nationalities);
+ let len = Object.keys(V.nationalitiesCheck).length;
+ let j = 0;
+ for (const nation of V.nationalitiesCheck) {
+ div = document.createElement("div");
+ div.append(`nation `);
+ App.UI.DOM.appendNewElement("span", div, (V.nationalities[nation] * percentPerPoint).toFixed(2), "orange");
+ j++;
+ if (j < len) {
+ div.append(` | `);
+ }
+ p.append(div);
+ }
+ frag.append(p);
+ p = document.createElement("p");
+
+ /* Fine control tweaking of populations */
+ App.UI.DOM.appendNewElement("div", p, `Adjust slave populations:`);
+
+ let hr = document.createElement("hr");
+ hr.style.margin = "0";
+ p.append(hr);
+
+ /* Filter controls */
+ div = document.createElement("div");
+ App.UI.DOM.appendNewElement("span", div, `Filter by Race: `);
+ array = [];
+ for (let i = 0; i < setup.filterRaces.length; i++) {
+ const race = setup.filterRaces[i];
+ if (V.baseControlsFilter === race.toLowerCase().replace(/[ -]/g, '')) {
+ array.push(
+ App.UI.DOM.disabledLink(
+ race,
+ "currently selected race"
+ )
+ );
+ } else {
+ array.push(
+ App.UI.DOM.link(
+ race,
+ () => {
+ V.baseControlsFilter = setup.filterRaces[" + i + "].toLowerCase().replace(/[ -]/g, '');
+ jQuery('#PopControl').empty().append(); // TODO: refresh <<include 'Basenationalities Controls'>>
+ }
+ )
+ );
+ }
+ }
+ div.append(App.UI.DOM.generateLinksStrip(array));
+ p.append(div);
+
+ div = document.createElement("div");
+ App.UI.DOM.appendNewElement("span", div, `Filter by Region: `);
+ array = [];
+ for (let i = 0; i < setup.filterRegions.length; i++) {
+ const region = setup.filterRegions[i];
+ if (V.baseControlsFilter === region.toLowerCase().replace(/[ -]/g, '')) {
+ array.push(
+ App.UI.DOM.disabledLink(
+ region,
+ "currently selected region"
+ )
+ );
+ } else {
+ array.push(
+ App.UI.DOM.link(
+ region,
+ () => {
+ V.baseControlsFilter = setup.filterRegions[" + i + "].toLowerCase().replace(/[ -]/g, '');
+ jQuery('#PopControl').empty().append(); // TODO: refresh <<include 'Basenationalities Controls'>>
+ }
+ )
+ );
+ }
+ }
+ div.append(App.UI.DOM.generateLinksStrip(array));
+ p.append(div);
+
+ hr = document.createElement("hr");
+ hr.style.margin = "0";
+ p.append(hr);
+
+ div = document.createElement("div");
+ div.style.whiteSpace = "nowrap";
+ div.style.float = "left";
+
+ /* Unfiltered pop controls */
+ let list = document.createElement("LI");
+ if (V.baseControlsFilter === "all") {
+ for (let i = 0; i < setup.baseNationalities.length; i++) {
+ const nation = setup.baseNationalities[i];
+ const ul = document.createElement("UL");
+ ul.append(nation);
+ App.UI.DOM.appendNewElement(
+ "span",
+ ul,
+ App.UI.DOM.link(
+ `+`,
+ () => {
+ hashPush(V.nationalities, setup.baseNationalities["+i+"]);
+ // <<replace '#PopControl'>><<include 'Basenationalities Controls'>><</replace>>
+ }
+ ),
+ "plusButton"
+ );
+ if (V.nationalitiesCheck[nation]) {
+ App.UI.DOM.appendNewElement(
+ "span",
+ ul,
+ App.UI.DOM.link(
+ `-`,
+ () => {
+ V.nationalities[setup.baseNationalities["+i+"]] -= 1;
+ if (V.nationalities[setup.baseNationalities["+i+"]] <= 0) {
+ delete V.nationalities[setup.baseNationalities["+i+"]];
+ }
+ // <<replace '#PopControl'>><<include 'Basenationalities Controls'>><</replace>>
+ }
+ ),
+ "minusButton"
+ );
+ }
+ if (V.nationalities[nation] > 1) {
+ App.UI.DOM.appendNewElement(
+ "span",
+ ul,
+ App.UI.DOM.link(
+ `0`,
+ () => {
+ delete V.nationalities[setup.baseNationalities["+i+"]];
+ // <<replace '#PopControl'>><<include 'Basenationalities Controls'>><</replace>>
+ }
+ ),
+ "zeroButton"
+ );
+ }
+ list.append(ul);
+ }
+ p.append(list);
+ App.UI.DOM.appendNewElement("div", p, `By dominant race/ethnicity (hover over the name to see the nationalities affected):`);
+
+ for (const race of setup.filterRaces) {
+ const racialNationalities = setup.baseNationalities.filter(function(n) {
+ let races = setup.raceSelector[n] || setup.raceSelector[''];
+ return races[race.toLowerCase()] * 3.5 > hashSum(races);
+ });
+
+ if (racialNationalities.length > 0) {
+ div = document.createElement("div");
+ div.style.float = "left";
+ div.style.width = "13em";
+ div.style.padding = "0 5px";
+ div.title = racialNationalities.length > 0 ? racialNationalities.join(", ") : "(none)";
+ div.append(race);
+ App.UI.DOM.appendNewElement(
+ "span",
+ div,
+ App.UI.DOM.link(
+ `+`,
+ () => {
+ setup.baseNationalities.filter(function(n) {
+ let races = setup.raceSelector[n] || setup.raceSelector[''];
+ return races['" + _race.toLowerCase() + "'] * 3.5 > hashSum(races);
+ }).forEach(function(n) { hashPush(V.nationalities, n); });
+ // <<replace '#PopControl'>><<include 'Basenationalities Controls'>><</replace>>
+ }
+ ),
+ "plusButton"
+ );
+ App.UI.DOM.appendNewElement(
+ "span",
+ div,
+ App.UI.DOM.link(
+ `0`,
+ () => {
+ setup.baseNationalities.filter(function(n) {
+ let races = setup.raceSelector[n] || setup.raceSelector[''];
+ return races['" + _race.toLowerCase() + "'] * 3.5 > hashSum(races);
+ }).forEach(function(n) { delete V.nationalities[n]; });
+
+ // <<replace '#PopControl'>><<include 'Basenationalities Controls'>><</replace>>
+ }
+ ),
+ "zeroButton"
+ );
+ }
+ }
+ } else {
+ /* Filtered pop controls */
+ const controlsNationality = setup[V.baseControlsFilter + 'Nationalities'];
+ const keys = Object.keys(controlsNationality);
+ for (let i = 0; i < keys.length; i++) {
+ div = document.createElement("div");
+ div.style.float = "left";
+ const nation = keys[i];
+ div.append(nation);
+ App.UI.DOM.appendNewElement(
+ "span",
+ div,
+ App.UI.DOM.link(
+ `+`,
+ () => {
+ hashPush(V.nationalities, keys[" + i + "]);
+ // <<replace '#PopControl'>><<include 'Basenationalities Controls'>><</replace>>
+ }
+ ),
+ "plusButton"
+ );
+
+ if (V.nationalitiesCheck[nation]) {
+ App.UI.DOM.appendNewElement(
+ "span",
+ div,
+ App.UI.DOM.link(
+ `-`,
+ () => {
+ V.nationalities[keys["+i+"]] -= 1;
+ if (V.nationalities[keys["+i+"]] <= 0) {
+ delete V.nationalities[keys["+i+"]];
+ }
+ // <<replace '#PopControl'>><<include 'Basenationalities Controls'>><</replace>>
+ }
+ ),
+ "minusButton"
+ );
+ }
+ if (V.nationalities[nation] > 1) {
+ App.UI.DOM.appendNewElement(
+ "span",
+ div,
+ App.UI.DOM.link(
+ `0`,
+ () => {
+ delete V.nationalities[keys["+i+"]];
+ // <<replace '#PopControl'>><<include 'Basenationalities Controls'>><</replace>>
+ }
+ ),
+ "zeroButton"
+ );
+ }
+ if (i < keys.length - 1) {
+ div.append(`| `);
+ }
+ p.append(div);
+ }
+ }
+ frag.append(p);
+ return frag;
+ }
+};