From c7330e925ae0565d90c1161d9224a284e0aa4833 Mon Sep 17 00:00:00 2001
From: lowercasedonkey <lowercasedonkey@gmail.com>
Date: Fri, 14 Aug 2020 18:08:00 -0400
Subject: [PATCH] CSS and move files
---
.../customizeSlaveTrade.css | 55 +++++++++
.../customizeSlaveTrade.js | 0
.../customizeSlaveTrade.tw | 10 +-
.../customizeSlaveTradeUI.js} | 115 +++++++++---------
src/gui/css/mainStyleSheet.css | 42 -------
5 files changed, 115 insertions(+), 107 deletions(-)
create mode 100644 src/events/intro/customizeSlaveTrade/customizeSlaveTrade.css
rename src/{js => events/intro/customizeSlaveTrade}/customizeSlaveTrade.js (100%)
rename src/{pregmod => events/intro/customizeSlaveTrade}/customizeSlaveTrade.tw (62%)
rename src/{pregmod/customizeSlaveTrade.js => events/intro/customizeSlaveTrade/customizeSlaveTradeUI.js} (71%)
diff --git a/src/events/intro/customizeSlaveTrade/customizeSlaveTrade.css b/src/events/intro/customizeSlaveTrade/customizeSlaveTrade.css
new file mode 100644
index 00000000000..3eb07697b5d
--- /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 9d402df398b..09b7c1a9389 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 6c3bd197aa1..52ba5b9d559 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 02a8878c831..728fd607a8a 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 */
--
GitLab