diff --git a/src/events/intro/customizeSlaveTrade/customizeSlaveTrade.js b/src/events/intro/customizeSlaveTrade/customizeSlaveTrade.js index ad9d5cfe0dda86f41119954fb7c5463fbde10d00..9f7d98aa97ee663e939831fa5a65287a549e646f 100644 --- a/src/events/intro/customizeSlaveTrade/customizeSlaveTrade.js +++ b/src/events/intro/customizeSlaveTrade/customizeSlaveTrade.js @@ -1,4 +1,301 @@ App.CustomSlaveTrade = { + + display: 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 = "pop-control"; // not needed later + span.append(baseNationalitiesControls()); + frag.append(span); + + return frag; + + 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"); + } 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 in 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, ''); + refresh(); + } + ) + ); + } + } + 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, ''); + refresh(); + } + ) + ); + } + } + 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 */ + 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 li = document.createElement("LI"); + li.classList.add("customize-slave-trade-li"); + li.append(nation); + App.UI.DOM.appendNewElement( + "span", + li, + App.UI.DOM.link( + `+`, + () => { + hashPush(V.nationalities, setup.baseNationalities[i]); + refresh(); + } + ), + "plusButton" + ); + if (V.nationalitiesCheck[nation]) { + App.UI.DOM.appendNewElement( + "span", + li, + App.UI.DOM.link( + `-`, + () => { + V.nationalities[setup.baseNationalities[i]] -= 1; + if (V.nationalities[setup.baseNationalities[i]] <= 0) { + delete V.nationalities[setup.baseNationalities[i]]; + } + refresh(); + } + ), + "minusButton" + ); + } + if (V.nationalities[nation] > 1) { + App.UI.DOM.appendNewElement( + "span", + li, + App.UI.DOM.link( + `0`, + () => { + delete V.nationalities[setup.baseNationalities[i]]; + refresh(); + } + ), + "zeroButton" + ); + } + 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['']; + return races[race.toLowerCase()] * 3.5 > hashSum(races); + }); + + if (racialNationalities.length > 0) { + 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", + li, + 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); }); + refresh(); + } + ), + "plusButton" + ); + App.UI.DOM.appendNewElement( + "span", + li, + 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]; }); + + refresh(); + } + ), + "zeroButton" + ); + list.append(li); + } + } + } else { + /* Filtered pop controls */ + const controlsNationality = setup[V.baseControlsFilter + 'Nationalities']; + const keys = Object.keys(controlsNationality); + for (let i = 0; i < keys.length; i++) { + const li = document.createElement("LI"); + li.classList.add("customize-slave-trade-li"); + li.title = racialNationalities.length > 0 ? racialNationalities.join(", ") : "(none)"; + const nation = keys[i]; + li.append(nation); + App.UI.DOM.appendNewElement( + "span", + li, + App.UI.DOM.link( + `+`, + () => { + hashPush(V.nationalities, keys[i]); + refresh(); + } + ), + "plusButton" + ); + + if (V.nationalitiesCheck[nation]) { + App.UI.DOM.appendNewElement( + "span", + li, + App.UI.DOM.link( + `-`, + () => { + V.nationalities[keys[i]] -= 1; + if (V.nationalities[keys[i]] <= 0) { + delete V.nationalities[keys[i]]; + } + refresh(); + } + ), + "minusButton" + ); + } + if (V.nationalities[nation] > 1) { + App.UI.DOM.appendNewElement( + "span", + li, + App.UI.DOM.link( + `0`, + () => { + delete V.nationalities[keys[i]]; + refresh(); + } + ), + "zeroButton" + ); + } + list.append(li); + } + } + p.append(list); + frag.append(p); + return frag; + } + function refresh() { + return jQuery('#pop-control').empty().append(baseNationalitiesControls()); + } + }, + export: function() { let textArea = document.createElement("textarea"); textArea.value = JSON.stringify(V.nationalities); diff --git a/src/events/intro/customizeSlaveTrade/customizeSlaveTrade.tw b/src/events/intro/customizeSlaveTrade/customizeSlaveTrade.tw index 09b7c1a93899aa39612e682cd0bd1b4d06fd656c..14398c7972a5ea694ed6d65abbb0fd941d2a3656 100644 --- a/src/events/intro/customizeSlaveTrade/customizeSlaveTrade.tw +++ b/src/events/intro/customizeSlaveTrade/customizeSlaveTrade.tw @@ -9,7 +9,7 @@ <<if ndef $customWA>> <<set $customWA = 0>> <</if>> -<<includeDOM App.Intro.customizeSlaveTrade()>> +<<includeDOM App.CustomSlaveTrade.display()>> <div> [[Reset filters|passage()][$baseControlsFilter = "all"]] | [[Clear all nationalities|passage()][$nationalities = {}]] </div> diff --git a/src/events/intro/customizeSlaveTrade/customizeSlaveTradeUI.js b/src/events/intro/customizeSlaveTrade/customizeSlaveTradeUI.js deleted file mode 100644 index 52ba5b9d559d6b77c17b4bca61677ee80f50afbf..0000000000000000000000000000000000000000 --- a/src/events/intro/customizeSlaveTrade/customizeSlaveTradeUI.js +++ /dev/null @@ -1,295 +0,0 @@ -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 = "pop-control"; // not needed later - span.append(baseNationalitiesControls()); - frag.append(span); - - return frag; - - 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"); - } 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 in 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, ''); - refresh(); - } - ) - ); - } - } - 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, ''); - refresh(); - } - ) - ); - } - } - 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 */ - 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 li = document.createElement("LI"); - li.classList.add("customize-slave-trade-li"); - li.append(nation); - App.UI.DOM.appendNewElement( - "span", - li, - App.UI.DOM.link( - `+`, - () => { - hashPush(V.nationalities, setup.baseNationalities[i]); - refresh(); - } - ), - "plusButton" - ); - if (V.nationalitiesCheck[nation]) { - App.UI.DOM.appendNewElement( - "span", - li, - App.UI.DOM.link( - `-`, - () => { - V.nationalities[setup.baseNationalities[i]] -= 1; - if (V.nationalities[setup.baseNationalities[i]] <= 0) { - delete V.nationalities[setup.baseNationalities[i]]; - } - refresh(); - } - ), - "minusButton" - ); - } - if (V.nationalities[nation] > 1) { - App.UI.DOM.appendNewElement( - "span", - li, - App.UI.DOM.link( - `0`, - () => { - delete V.nationalities[setup.baseNationalities[i]]; - refresh(); - } - ), - "zeroButton" - ); - } - 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['']; - return races[race.toLowerCase()] * 3.5 > hashSum(races); - }); - - if (racialNationalities.length > 0) { - 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", - li, - 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); }); - refresh(); - } - ), - "plusButton" - ); - App.UI.DOM.appendNewElement( - "span", - li, - 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]; }); - - refresh(); - } - ), - "zeroButton" - ); - list.append(li); - } - } - } else { - /* Filtered pop controls */ - const controlsNationality = setup[V.baseControlsFilter + 'Nationalities']; - const keys = Object.keys(controlsNationality); - for (let i = 0; i < keys.length; i++) { - const li = document.createElement("LI"); - li.classList.add("customize-slave-trade-li"); - li.title = racialNationalities.length > 0 ? racialNationalities.join(", ") : "(none)"; - const nation = keys[i]; - li.append(nation); - App.UI.DOM.appendNewElement( - "span", - li, - App.UI.DOM.link( - `+`, - () => { - hashPush(V.nationalities, keys[i]); - refresh(); - } - ), - "plusButton" - ); - - if (V.nationalitiesCheck[nation]) { - App.UI.DOM.appendNewElement( - "span", - li, - App.UI.DOM.link( - `-`, - () => { - V.nationalities[keys[i]] -= 1; - if (V.nationalities[keys[i]] <= 0) { - delete V.nationalities[keys[i]]; - } - refresh(); - } - ), - "minusButton" - ); - } - if (V.nationalities[nation] > 1) { - App.UI.DOM.appendNewElement( - "span", - li, - App.UI.DOM.link( - `0`, - () => { - delete V.nationalities[keys[i]]; - refresh(); - } - ), - "zeroButton" - ); - } - list.append(li); - } - } - p.append(list); - frag.append(p); - return frag; - } - function refresh() { - return jQuery('#pop-control').empty().append(baseNationalitiesControls()); - } -};