Replaced terrain intro cards with carousel of cards

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%;
+}

src/events/intro/terrainIntro.js

+/**
+ * @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) {