diff --git a/src/events/intro/customizeSlaveTrade/customizeSlaveTrade.css b/src/events/intro/customizeSlaveTrade/customizeSlaveTrade.css
new file mode 100644
index 0000000000000000000000000000000000000000..3eb07697b5d2d4b244b4f715b88f735e6b7fe6ab
--- /dev/null
+++ b/src/events/intro/customizeSlaveTrade/customizeSlaveTrade.css
@@ -0,0 +1,55 @@
+.customize-slave-trade-ul {
+ list-style-type: none;
+ content: '';
+ width: 100%;
+ display: inline-block;
+}
+
+.customize-slave-trade-li {
+ text-align: center;
+ display: inline-block;
+ padding-bottom: 20px;
+ width: 200px;
+}
+
+span.plusButton {
+ display: inline-block;
+ line-height: 25px;
+ width: 20px;
+ text-align: center;
+ border: 1px solid rgba(0, 139, 0, 0.3);
+ background: rgba(0, 139, 0, 0.2);
+ margin: 2px;
+}
+
+span.minusButton {
+ display: inline-block;
+ line-height: 25px;
+ width: 20px;
+ text-align: center;
+ border: 1px solid rgba(184, 0, 0, 0.3);
+ background: rgba(184, 0, 0, 0.2);
+ margin: 2px;
+}
+
+span.zeroButton {
+ display: inline-block;
+ line-height: 25px;
+ width: 20px;
+ text-align: center;
+ border: 1px solid rgba(0, 0, 255, 0.3);
+ background: rgba(0, 0, 255, 0.2);
+ margin: 2px;
+}
+
+span.plusButton:hover { background: rgba(0, 139, 0, 0.4); }
+span.minusButton:hover { background: rgba(184, 0, 0, 0.4); }
+span.zeroButton:hover { background: rgba(0, 0, 255, 0.4); }
+
+span.plusButton > a { display: block; }
+span.minusButton > a { display: block; }
+span.zeroButton > a { display: block; }
+
+span.plusButton > a:hover { text-decoration: none; }
+span.minusButton > a:hover { text-decoration: none; }
+span.zeroButton > a:hover { text-decoration: none; }
\ No newline at end of file
diff --git a/src/js/customizeSlaveTrade.js b/src/events/intro/customizeSlaveTrade/customizeSlaveTrade.js
similarity index 100%
rename from src/js/customizeSlaveTrade.js
rename to src/events/intro/customizeSlaveTrade/customizeSlaveTrade.js
diff --git a/src/pregmod/customizeSlaveTrade.tw b/src/events/intro/customizeSlaveTrade/customizeSlaveTrade.tw
similarity index 62%
rename from src/pregmod/customizeSlaveTrade.tw
rename to src/events/intro/customizeSlaveTrade/customizeSlaveTrade.tw
index 9d402df398b7a97c822b348f99c6148e40482ef4..09b7c1a93899aa39612e682cd0bd1b4d06fd656c 100644
--- a/src/pregmod/customizeSlaveTrade.tw
+++ b/src/events/intro/customizeSlaveTrade/customizeSlaveTrade.tw
@@ -9,15 +9,7 @@
<<if ndef $customWA>>
<<set $customWA = 0>>
<</if>>
-<p>
- 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?
-</p>
-<p style="font-weight:Bold">
- + to increase pop. – to reduce pop. 0 to remove entirely
-</p>
-<span id="PopControl">
- <<include "Basenationalities Controls">>
-</span>
+<<includeDOM App.Intro.customizeSlaveTrade()>>
<div>
[[Reset filters|passage()][$baseControlsFilter = "all"]] | [[Clear all nationalities|passage()][$nationalities = {}]]
</div>
diff --git a/src/pregmod/customizeSlaveTrade.js b/src/events/intro/customizeSlaveTrade/customizeSlaveTradeUI.js
similarity index 71%
rename from src/pregmod/customizeSlaveTrade.js
rename to src/events/intro/customizeSlaveTrade/customizeSlaveTradeUI.js
index 6c3bd197aa1e0a7eec01f2b66890aadc8b3e5a46..52ba5b9d559d6b77c17b4bca61677ee80f50afbf 100644
--- a/src/pregmod/customizeSlaveTrade.js
+++ b/src/events/intro/customizeSlaveTrade/customizeSlaveTradeUI.js
@@ -4,20 +4,19 @@ App.Intro.customizeSlaveTrade = function() {
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.id = "pop-control"; // 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;
+ let list;
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");
@@ -43,9 +42,9 @@ App.Intro.customizeSlaveTrade = function() {
let percentPerPoint = 100.0 / hashSum(V.nationalities);
let len = Object.keys(V.nationalitiesCheck).length;
let j = 0;
- for (const nation of V.nationalitiesCheck) {
+ for (const nation in V.nationalitiesCheck) {
div = document.createElement("div");
- div.append(`nation `);
+ div.append(`${nation} `);
App.UI.DOM.appendNewElement("span", div, (V.nationalities[nation] * percentPerPoint).toFixed(2), "orange");
j++;
if (j < len) {
@@ -73,7 +72,7 @@ App.Intro.customizeSlaveTrade = function() {
array.push(
App.UI.DOM.disabledLink(
race,
- "currently selected race"
+ ["currently selected race"]
)
);
} else {
@@ -81,8 +80,8 @@ App.Intro.customizeSlaveTrade = function() {
App.UI.DOM.link(
race,
() => {
- V.baseControlsFilter = setup.filterRaces[" + i + "].toLowerCase().replace(/[ -]/g, '');
- jQuery('#PopControl').empty().append(); // TODO: refresh <<include 'Basenationalities Controls'>>
+ V.baseControlsFilter = setup.filterRaces[i].toLowerCase().replace(/[ -]/g, '');
+ refresh();
}
)
);
@@ -100,7 +99,7 @@ App.Intro.customizeSlaveTrade = function() {
array.push(
App.UI.DOM.disabledLink(
region,
- "currently selected region"
+ ["currently selected region"]
)
);
} else {
@@ -108,8 +107,8 @@ App.Intro.customizeSlaveTrade = function() {
App.UI.DOM.link(
region,
() => {
- V.baseControlsFilter = setup.filterRegions[" + i + "].toLowerCase().replace(/[ -]/g, '');
- jQuery('#PopControl').empty().append(); // TODO: refresh <<include 'Basenationalities Controls'>>
+ V.baseControlsFilter = setup.filterRegions[i].toLowerCase().replace(/[ -]/g, '');
+ refresh();
}
)
);
@@ -127,20 +126,22 @@ App.Intro.customizeSlaveTrade = function() {
div.style.float = "left";
/* Unfiltered pop controls */
- let list = document.createElement("LI");
+ list = document.createElement("UL");
+ list.classList.add("customize-slave-trade-ul");
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);
+ const li = document.createElement("LI");
+ li.classList.add("customize-slave-trade-li");
+ li.append(nation);
App.UI.DOM.appendNewElement(
"span",
- ul,
+ li,
App.UI.DOM.link(
`+`,
() => {
- hashPush(V.nationalities, setup.baseNationalities["+i+"]);
- // <<replace '#PopControl'>><<include 'Basenationalities Controls'>><</replace>>
+ hashPush(V.nationalities, setup.baseNationalities[i]);
+ refresh();
}
),
"plusButton"
@@ -148,15 +149,15 @@ App.Intro.customizeSlaveTrade = function() {
if (V.nationalitiesCheck[nation]) {
App.UI.DOM.appendNewElement(
"span",
- ul,
+ li,
App.UI.DOM.link(
`-`,
() => {
- V.nationalities[setup.baseNationalities["+i+"]] -= 1;
- if (V.nationalities[setup.baseNationalities["+i+"]] <= 0) {
- delete V.nationalities[setup.baseNationalities["+i+"]];
+ 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>>
+ refresh();
}
),
"minusButton"
@@ -165,22 +166,23 @@ App.Intro.customizeSlaveTrade = function() {
if (V.nationalities[nation] > 1) {
App.UI.DOM.appendNewElement(
"span",
- ul,
+ li,
App.UI.DOM.link(
`0`,
() => {
- delete V.nationalities[setup.baseNationalities["+i+"]];
- // <<replace '#PopControl'>><<include 'Basenationalities Controls'>><</replace>>
+ delete V.nationalities[setup.baseNationalities[i]];
+ refresh();
}
),
"zeroButton"
);
}
- list.append(ul);
+ list.append(li);
}
p.append(list);
App.UI.DOM.appendNewElement("div", p, `By dominant race/ethnicity (hover over the name to see the nationalities affected):`);
-
+ list = document.createElement("UL");
+ list.classList.add("customize-slave-trade-ul");
for (const race of setup.filterRaces) {
const racialNationalities = setup.baseNationalities.filter(function(n) {
let races = setup.raceSelector[n] || setup.raceSelector[''];
@@ -188,15 +190,13 @@ App.Intro.customizeSlaveTrade = function() {
});
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);
+ const li = document.createElement("LI");
+ li.classList.add("customize-slave-trade-li");
+ li.title = racialNationalities.length > 0 ? racialNationalities.join(", ") : "(none)";
+ li.append(race);
App.UI.DOM.appendNewElement(
"span",
- div,
+ li,
App.UI.DOM.link(
`+`,
() => {
@@ -204,14 +204,14 @@ App.Intro.customizeSlaveTrade = function() {
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>>
+ refresh();
}
),
"plusButton"
);
App.UI.DOM.appendNewElement(
"span",
- div,
+ li,
App.UI.DOM.link(
`0`,
() => {
@@ -220,11 +220,12 @@ App.Intro.customizeSlaveTrade = function() {
return races['" + _race.toLowerCase() + "'] * 3.5 > hashSum(races);
}).forEach(function(n) { delete V.nationalities[n]; });
- // <<replace '#PopControl'>><<include 'Basenationalities Controls'>><</replace>>
+ refresh();
}
),
"zeroButton"
);
+ list.append(li);
}
}
} else {
@@ -232,18 +233,19 @@ App.Intro.customizeSlaveTrade = function() {
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 li = document.createElement("LI");
+ li.classList.add("customize-slave-trade-li");
+ li.title = racialNationalities.length > 0 ? racialNationalities.join(", ") : "(none)";
const nation = keys[i];
- div.append(nation);
+ li.append(nation);
App.UI.DOM.appendNewElement(
"span",
- div,
+ li,
App.UI.DOM.link(
`+`,
() => {
- hashPush(V.nationalities, keys[" + i + "]);
- // <<replace '#PopControl'>><<include 'Basenationalities Controls'>><</replace>>
+ hashPush(V.nationalities, keys[i]);
+ refresh();
}
),
"plusButton"
@@ -252,15 +254,15 @@ App.Intro.customizeSlaveTrade = function() {
if (V.nationalitiesCheck[nation]) {
App.UI.DOM.appendNewElement(
"span",
- div,
+ li,
App.UI.DOM.link(
`-`,
() => {
- V.nationalities[keys["+i+"]] -= 1;
- if (V.nationalities[keys["+i+"]] <= 0) {
- delete V.nationalities[keys["+i+"]];
+ V.nationalities[keys[i]] -= 1;
+ if (V.nationalities[keys[i]] <= 0) {
+ delete V.nationalities[keys[i]];
}
- // <<replace '#PopControl'>><<include 'Basenationalities Controls'>><</replace>>
+ refresh();
}
),
"minusButton"
@@ -269,24 +271,25 @@ App.Intro.customizeSlaveTrade = function() {
if (V.nationalities[nation] > 1) {
App.UI.DOM.appendNewElement(
"span",
- div,
+ li,
App.UI.DOM.link(
`0`,
() => {
- delete V.nationalities[keys["+i+"]];
- // <<replace '#PopControl'>><<include 'Basenationalities Controls'>><</replace>>
+ delete V.nationalities[keys[i]];
+ refresh();
}
),
"zeroButton"
);
}
- if (i < keys.length - 1) {
- div.append(`| `);
- }
- p.append(div);
+ list.append(li);
}
}
+ p.append(list);
frag.append(p);
return frag;
}
+ function refresh() {
+ return jQuery('#pop-control').empty().append(baseNationalitiesControls());
+ }
};
diff --git a/src/gui/css/mainStyleSheet.css b/src/gui/css/mainStyleSheet.css
index 02a8878c831774638822fc8d7d1d64788775c0c9..728fd607a8a9cbb669418173afcbdf5209b2cc5a 100644
--- a/src/gui/css/mainStyleSheet.css
+++ b/src/gui/css/mainStyleSheet.css
@@ -136,48 +136,6 @@ img.paperdoll {
margin-left: 0;
}
-span.plusButton {
- display: inline-block;
- line-height: 25px;
- width: 20px;
- text-align: center;
- border: 1px solid rgba(0, 139, 0, 0.3);
- background: rgba(0, 139, 0, 0.2);
- margin: 2px 0;
-}
-
-span.minusButton {
- display: inline-block;
- line-height: 25px;
- width: 20px;
- text-align: center;
- border: 1px solid rgba(184, 0, 0, 0.3);
- background: rgba(184, 0, 0, 0.2);
- margin: 2px 0;
-}
-
-span.zeroButton {
- display: inline-block;
- line-height: 25px;
- width: 20px;
- text-align: center;
- border: 1px solid rgba(0, 0, 255, 0.3);
- background: rgba(0, 0, 255, 0.2);
- margin: 2px 0;
-}
-
-span.plusButton:hover { background: rgba(0, 139, 0, 0.4); }
-span.minusButton:hover { background: rgba(184, 0, 0, 0.4); }
-span.zeroButton:hover { background: rgba(0, 0, 255, 0.4); }
-
-span.plusButton > a { display: block; }
-span.minusButton > a { display: block; }
-span.zeroButton > a { display: block; }
-
-span.plusButton > a:hover { text-decoration: none; }
-span.minusButton > a:hover { text-decoration: none; }
-span.zeroButton > a:hover { text-decoration: none; }
-
/* Colors are made as css classes, to allow them to be changed for a light color scheme (for example). */
/* a version is for this case: <span class="-.."><a>text</a></span> */
.link, .link a { color: var(--link-color) } /* link color */