diff --git a/css/general/layout.css b/css/general/layout.css
index a7e20161b5c234608c7c4a4aa7a973f93d88383c..5c7656a7c04fece7c79de59b8fce8a640b86fcd0 100644
--- a/css/general/layout.css
+++ b/css/general/layout.css
@@ -138,3 +138,16 @@ input[type="text"].number {
min-width: 6em;
max-width: 6em;
}
+
+.sideways-scroll {
+ overflow-x: scroll;
+ overflow-y: hidden;
+ white-space: nowrap;
+ align-items: flex-start;
+}
+
+.sideways-scroll > .card {
+ display: inline-block;
+ margin: 0 1em;
+ height: 100%;
+}
diff --git a/src/events/intro/terrainIntro.js b/src/events/intro/terrainIntro.js
index d9aa6ce2347382b8b41731c83d916851890e0da5..6b5a79bdd996193d0c95f9e38f9b49be7445225a 100644
--- a/src/events/intro/terrainIntro.js
+++ b/src/events/intro/terrainIntro.js
@@ -1,3 +1,15 @@
+/**
+ * @typedef FC.ArcologyLocation
+ *
+ * @property {string} name
+ * @property {string} value
+ * @property {string} [market]
+ * @property {string} [commerce]
+ * @property {string} [refugees]
+ * @property {string} [culture]
+ * @property {string[]} [notes]
+ */
+
App.Intro.terrainIntro = function() {
// :: Terrain Intro [nobr]
const node = new DocumentFragment();
@@ -12,67 +24,104 @@ App.Intro.terrainIntro = function() {
App.UI.DOM.appendNewElement("p", node, `Which kind of Free City hosts your arcology?`, ["intro", "question"]);
- let card = App.UI.DOM.appendNewElement("div", node, App.UI.DOM.passageLink(
- "Urban",
- "Location Intro",
- () => V.terrain = "urban"
- ), "card");
- cardLine(`<span class="noteworthy">Low</span> minimum slave value and initial <span class="noteworthy">bear market</span> for slaves.`);
- cardLine(`<span class="positive">High</span> ease of commerce with the old world.`);
- cardLine(`<span class="positive">High</span> access to refugees and other desperate people.`);
- cardLine(`<span class="warning">Low</span> cultural independence.`);
- cardLine(`Unusually compact arcology with few manufacturing sectors.`);
-
- card = App.UI.DOM.appendNewElement("div", node, App.UI.DOM.passageLink(
- "Rural",
- "Location Intro",
- () => V.terrain = "rural"
- ), "card");
- cardLine(`High</span> minimum slave value and initial <span class="noteworthy">bull market</span> for slaves.`);
- cardLine(`Moderate ease of commerce with the old world.`);
- cardLine(`Moderate access to refugees and other desperate people.`);
- cardLine(`Moderate cultural independence.`);
- cardLine(`Widespread arcology with many manufacturing sectors.`);
-
- card = App.UI.DOM.appendNewElement("div", node, App.UI.DOM.passageLink(
- "Ravine",
- "Location Intro",
- () => V.terrain = "ravine"
- ), "card");
- cardLine(`<span class="noteworthy">High</span> minimum slave value and initial <span class="noteworthy">bull market</span> for slaves.`);
- cardLine(`<span class="warning">Low</span> ease of commerce with the old world.`);
- cardLine(`<span class="warning">Very low</span> access to refugees and other desperate people.`);
- cardLine(`<span class="positive">High</span> cultural independence.`);
- cardLine(`The arcology mostly being hidden inside the ravine leads to an unusual layout.`);
-
- card = App.UI.DOM.appendNewElement("div", node, App.UI.DOM.passageLink(
- "Marine",
- "Location Intro",
- () => V.terrain = "marine"
- ), "card");
- cardLine(`Moderate minimum slave value and initially balanced market for slaves.`);
- cardLine(`Moderate ease of commerce with the old world.`);
- cardLine(`<span class="warning">Low</span> access to refugees and other desperate people.`);
- cardLine(`<span class="positive">High</span> cultural independence.`);
- cardLine(`Large amount of markets and an extra shop sector.`);
-
- card = App.UI.DOM.appendNewElement("div", node, App.UI.DOM.passageLink(
- "Oceanic",
- "Location Intro",
- () => V.terrain = "oceanic"
- ), "card");
- cardLine(`<span class="noteworthy">High</span> minimum slave value and initial <span class="noteworthy">bull market</span> for slaves.`);
- cardLine(`Moderate ease of commerce with the old world.`);
- cardLine(`<span class="warning">Very low</span> access to refugees and other desperate people.`);
- cardLine(`<span class="positive">Very high</span> cultural independence.`);
- cardLine(`This unique location attracts the wealthy leading to initial luxury apartments.`);
- cardLine(`Ensures access to slaves from all over the world and will not associate the arcology with a continent.`);
- if (V.showSecExp === 1) {
- cardLine(`Oceanic arcologies will not be subjects of attacks.`);
+ /** @type {FC.ArcologyLocation[]} */
+ const locations = [
+ {
+ name: `Urban`,
+ value: "urban",
+ market: `<span class="noteworthy">Low</span> minimum slave value and initial <span class="noteworthy">bear market</span> for slaves.`,
+ commerce: `<span class="positive">High</span> ease of commerce with the old world.`,
+ refugees: `<span class="positive">High</span> access to refugees and other desperate people.`,
+ culture: `<span class="warning">Low</span> cultural independence.`,
+ notes: [
+ `Unusually compact arcology with few manufacturing sectors.`,
+ ],
+ },
+ {
+ name: `Rural`,
+ value: "rural",
+ market: `<span class="noteworthy">High</span> minimum slave value and initial <span class="noteworthy">bull market</span> for slaves.`,
+ commerce: `Moderate ease of commerce with the old world.`,
+ refugees: `Moderate access to refugees and other desperate people.`,
+ culture: `Moderate cultural independence.`,
+ notes: [
+ `Widespread arcology with many manufacturing sectors.`,
+ ],
+ },
+ {
+ name: `Ravine`,
+ value: "ravine",
+ market: `<span class="noteworthy">High</span> minimum slave value and initial <span class="noteworthy">bull market</span> for slaves.`,
+ commerce: `<span class="warning">Low</span> ease of commerce with the old world.`,
+ refugees: `<span class="warning">Very low</span> access to refugees and other desperate people.`,
+ culture: `<span class="positive">High</span> cultural independence.`,
+ notes: [
+ `The arcology mostly being hidden inside the ravine leads to an unusual layout.`,
+ ],
+ },
+ {
+ name: `Marine`,
+ value: "marine",
+ market: `Moderate minimum slave value and initially balanced market for slaves.`,
+ commerce: `Moderate ease of commerce with the old world.`,
+ refugees: `<span class="warning">Low</span> access to refugees and other desperate people.`,
+ culture: `<span class="positive">High</span> cultural independence.`,
+ notes: [
+ `Large amount of markets and an extra shop sector.`,
+ ],
+ },
+ {
+ name: `Oceanic`,
+ value: "oceanic",
+ market: `<span class="noteworthy">High</span> minimum slave value and initial <span class="noteworthy">bull market</span> for slaves.`,
+ commerce: `Moderate ease of commerce with the old world.`,
+ refugees: `<span class="warning">Very low</span> access to refugees and other desperate people.`,
+ culture: `<span class="positive">Very high</span> cultural independence.`,
+ notes: [
+ `This unique location attracts the wealthy leading to initial luxury apartments.`,
+ `Ensures access to slaves from all over the world and will not associate the arcology with a continent.`,
+ V.showSecExp ? `Oceanic arcologies will not be subjects of attacks.` : ``
+ ],
+ },
+ ];
+
+ const div = App.UI.DOM.makeElement("div", null, ['sideways-scroll']);
+
+ for (const location of locations) {
+ div.append(locationCard(location));
}
- function cardLine(string) {
- App.Events.addNode(card, [string], "div", "indent");
+ node.append(div);
+
+ /** @param {FC.ArcologyLocation} location */
+ function locationCard(location) {
+ const div = App.UI.DOM.makeElement("div", null, ['card']);
+ const keys = ["market", "commerce", "refugees", "culture", "notes"];
+
+ App.UI.DOM.appendNewElement("div", div, App.UI.DOM.passageLink(
+ location.name,
+ "Location Intro",
+ () => V.terrain = location.value,
+ ));
+
+ keys
+ .filter(key => location.hasOwnProperty(key))
+ .forEach(key => {
+ const innerDiv = App.UI.DOM.makeElement("div", null, ['indent']);
+ const item = location[key];
+
+ if (Array.isArray(item)) {
+ item.forEach(n => {
+ innerDiv.append(App.UI.DOM.makeElement("div", n, ['note']));
+ });
+ } else {
+ innerDiv.innerHTML = item;
+ }
+
+ div.append(innerDiv);
+ });
+
+ return div;
}
if (V.showSecExp === 1) {