From e02a2e0b31083803069ff0de4985274f15e2a12f Mon Sep 17 00:00:00 2001
From: Vantha <valentinthaler75@gmail.com>
Date: Wed, 25 Feb 2026 14:37:05 +0100
Subject: [PATCH] Add support for different types of tutorial steps

This patch doesn't add any new functionality and keeps the introductory
tutorial and economy walkthrough as they are. Instead, it rearranges some
code to enable easily adding different types of tutorial steps in the
future. The idea is for each type to be displayed on a different panel
and for the TutorialManager to switch back and forth between them, and
to handle and translate the received messages from the simulation and
pass them along to the active panel. Currently, there are only
"instruction"-type steps, which are handled by the InstructionPanel in
the GUI. But new ones can be added in the future, like information boxes
or bigger objectives.
---
 .../mods/public/gui/session/hotkeys/misc.xml  |   2 +-
 .../data/mods/public/gui/session/messages.js  |   2 +-
 .../data/mods/public/gui/session/session.js   |   4 +-
 .../gui/session/tutorial/InstructionPanel.js  |  66 +++
 .../gui/session/tutorial/InstructionPanel.xml |  10 +
 .../public/gui/session/tutorial/Tutorial.js   |  69 ----
 .../public/gui/session/tutorial/Tutorial.xml  |  14 +-
 .../gui/session/tutorial/TutorialManager.js   |  74 ++++
 .../data/mods/public/maps/scripts/Tutorial.js |  22 +-
 .../maps/tutorials/introductory_tutorial.js   | 164 +++++---
 .../tutorials/starting_economy_walkthrough.js | 377 ++++++++++--------
 11 files changed, 495 insertions(+), 309 deletions(-)
 create mode 100644 binaries/data/mods/public/gui/session/tutorial/InstructionPanel.js
 create mode 100644 binaries/data/mods/public/gui/session/tutorial/InstructionPanel.xml
 delete mode 100644 binaries/data/mods/public/gui/session/tutorial/Tutorial.js
 create mode 100644 binaries/data/mods/public/gui/session/tutorial/TutorialManager.js

diff --git a/binaries/data/mods/public/gui/session/hotkeys/misc.xml b/binaries/data/mods/public/gui/session/hotkeys/misc.xml
index e846075095..c022747887 100644
--- a/binaries/data/mods/public/gui/session/hotkeys/misc.xml
+++ b/binaries/data/mods/public/gui/session/hotkeys/misc.xml
@@ -9,7 +9,7 @@
 	</object>
 
 	<object hotkey="session.gui.tutorial.toggle">
-		<action on="Press">g_Tutorial?.toggle();</action>
+		<action on="Press">g_TutorialManager?.toggleVisibility();</action>
 	</object>
 
 	<object hotkey="silhouettes">
diff --git a/binaries/data/mods/public/gui/session/messages.js b/binaries/data/mods/public/gui/session/messages.js
index a65d42ba16..857d73b936 100644
--- a/binaries/data/mods/public/gui/session/messages.js
+++ b/binaries/data/mods/public/gui/session/messages.js
@@ -164,7 +164,7 @@ var g_NotificationsTypes =
 		},
 		"tutorial": function(notification, player)
 		{
-			g_Tutorial.handleNotification(notification);
+			g_TutorialManager.handleNotification(notification);
 		},
 		"tribute": function(notification, player)
 		{
diff --git a/binaries/data/mods/public/gui/session/session.js b/binaries/data/mods/public/gui/session/session.js
index 90ef75f54a..66b95176b0 100644
--- a/binaries/data/mods/public/gui/session/session.js
+++ b/binaries/data/mods/public/gui/session/session.js
@@ -35,7 +35,7 @@ var g_ResearchProgress;
 var g_TimeNotificationOverlay;
 var g_TopPanel;
 var g_TradeDialog;
-var g_Tutorial;
+var g_TutorialManager;
 
 /**
  * Map, player and match settings set in game setup.
@@ -345,7 +345,7 @@ async function init(initData, hotloadData)
 		g_NetworkStatusOverlay = new NetworkStatusOverlay(closePageCallback);
 		g_QuitConfirmationDefeat = new QuitConfirmationDefeat(closePageCallback);
 		g_QuitConfirmationReplay = new QuitConfirmationReplay(closePageCallback);
-		g_Tutorial = new Tutorial(closePageCallback);
+		g_TutorialManager = new TutorialManager(closePageCallback);
 	})]);
 
 	// TODO: use event instead
diff --git a/binaries/data/mods/public/gui/session/tutorial/InstructionPanel.js b/binaries/data/mods/public/gui/session/tutorial/InstructionPanel.js
new file mode 100644
index 0000000000..b3b6b6d011
--- /dev/null
+++ b/binaries/data/mods/public/gui/session/tutorial/InstructionPanel.js
@@ -0,0 +1,66 @@
+/**
+ * This class manages a tutorial panel meant to display basic instructions of simple tasks for the player to fulfill,
+ * consisting of just a text, like "Order one of your units to build a house."
+ */
+class InstructionPanel
+{
+	panel = Engine.GetGUIObjectByName("instructionPanel");
+	text = Engine.GetGUIObjectByName("instructionPanelText");
+	warning = Engine.GetGUIObjectByName("instructionPanelWarning");
+	readyButton = Engine.GetGUIObjectByName("instructionPanelReady");
+	instructions = [];
+	closePage;
+
+	constructor(closePage)
+	{
+		this.closePage = closePage;
+		this.readyButton.onPress = () =>
+		{
+			Engine.PostNetworkCommand({ "type": "dialog-answer", "tutorial": "ready" });
+		};
+	}
+
+	setVisible(visible)
+	{
+		this.panel.hidden = !visible;
+	}
+
+	displayWarning(warning)
+	{
+		this.warning.caption = setStringTags(warning, this.WarningTags);
+	}
+
+	displayStep(panelData)
+	{
+		this.text.caption = this.instructions.concat(setStringTags(panelData.text, this.NewInstructionTags)).join("\n");
+		this.instructions.push(panelData.text);
+
+		if (panelData.readyButton)
+		{
+			this.readyButton.hidden = false;
+			if (panelData.leave)
+			{
+				this.warning.caption = translate("Click to quit this tutorial.");
+				this.readyButton.caption = translate("Quit");
+				this.readyButton.onPress = this.closePage;
+			}
+			else
+				this.warning.caption = translate("Click when ready.");
+		}
+		else
+		{
+			this.warning.caption = translate("Follow the instructions.");
+			this.readyButton.hidden = true;
+		}
+	}
+}
+
+/**
+ * Tags applied to the most recent instruction.
+ */
+InstructionPanel.prototype.NewInstructionTags = { "color": "255 226 149" };
+
+/**
+ * Tags applied to warning messages.
+ */
+InstructionPanel.prototype.WarningTags = { "color": "orange" };
diff --git a/binaries/data/mods/public/gui/session/tutorial/InstructionPanel.xml b/binaries/data/mods/public/gui/session/tutorial/InstructionPanel.xml
new file mode 100644
index 0000000000..437db1e460
--- /dev/null
+++ b/binaries/data/mods/public/gui/session/tutorial/InstructionPanel.xml
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8"?>
+<object name="instructionPanel" type="image" sprite="ModernFade" size="50%-380 38 50%+380 292">
+	<object size="10 10 100%-20 100%-48">
+		<object name="instructionPanelText" type="text" style="TutorialPanel"/>
+	</object>
+	<object name="instructionPanelWarning" type="text" style="ModernLeftLabelText" size="10 100%-42 100%-20 100%-12"/>
+	<object name="instructionPanelReady" type="button" style="ModernButtonRed" size="100%-160 100%-42 100%-20 100%-12">
+		<translatableAttribute id="caption">Ready</translatableAttribute>
+	</object>
+</object>
diff --git a/binaries/data/mods/public/gui/session/tutorial/Tutorial.js b/binaries/data/mods/public/gui/session/tutorial/Tutorial.js
deleted file mode 100644
index cf55c6d76b..0000000000
--- a/binaries/data/mods/public/gui/session/tutorial/Tutorial.js
+++ /dev/null
@@ -1,69 +0,0 @@
-class Tutorial
-{
-	panel = Engine.GetGUIObjectByName("tutorialPanel");
-	text = Engine.GetGUIObjectByName("tutorialText");
-	warning = Engine.GetGUIObjectByName("tutorialWarning");
-	readyButton = Engine.GetGUIObjectByName("tutorialReady");
-	instructions = [];
-	closePageCallback;
-
-	constructor(closePageCallback)
-	{
-		this.closePageCallback = closePageCallback;
-	}
-
-	toggle()
-	{
-		this.panel.hidden = !this.panel.hidden || !this.text.caption;
-	}
-
-	handleNotification(notification)
-	{
-		if (notification.step)
-			this.displayStep(notification.step);
-		if (notification.warning)
-			this.displayWarning(notification.warning);
-	}
-
-	displayWarning(warning)
-	{
-		this.warning.caption = coloredText(translate(warning), "orange");
-	}
-
-	displayStep(step)
-	{
-		this.panel.hidden = false;
-
-		const notificationText =
-			step.instructions.reduce((instructions, item) =>
-				instructions + (typeof item === "string" ? translate(item) : colorizeHotkey(translate(item.text), item.hotkey)),
-			"");
-
-		this.text.caption = this.instructions.concat(setStringTags(notificationText, this.NewInstructionTags)).join("\n");
-		this.instructions.push(notificationText);
-
-		if (step.readyButton)
-		{
-			this.readyButton.hidden = false;
-			if (step.leave)
-			{
-				this.warning.caption = translate("Click to quit this tutorial.");
-				this.readyButton.caption = translate("Quit");
-				this.readyButton.onPress = () => { this.closePageCallback({ [Engine.openRequest]: endGame(true) }); };
-			}
-			else
-				this.warning.caption = translate("Click when ready.");
-		}
-		else
-		{
-			this.warning.caption = translate("Follow the instructions.");
-			this.readyButton.hidden = true;
-		}
-	}
-}
-
-/**
- * GUI tags applied to the most recent instruction.
- */
-Tutorial.prototype.NewInstructionTags = { "color": "255 226 149" };
-
diff --git a/binaries/data/mods/public/gui/session/tutorial/Tutorial.xml b/binaries/data/mods/public/gui/session/tutorial/Tutorial.xml
index 7016004e34..ccb9470b44 100644
--- a/binaries/data/mods/public/gui/session/tutorial/Tutorial.xml
+++ b/binaries/data/mods/public/gui/session/tutorial/Tutorial.xml
@@ -1,14 +1,4 @@
 <?xml version="1.0" encoding="utf-8"?>
-<object name="tutorialPanel" type="image" sprite="ModernFade" size="50%-380 38 50%+380 292" hidden="true">
-
-	<object size="10 10 100%-20 100%-48">
-		<object name="tutorialText" type="text" style="TutorialPanel"/>
-	</object>
-
-	<object name="tutorialWarning" type="text" style="ModernLeftLabelText" size="10 100%-42 100%-20 100%-12"/>
-
-	<object name="tutorialReady" type="button" style="ModernButtonRed" size="100%-160 100%-42 100%-20 100%-12">
-		<translatableAttribute id="caption">Ready</translatableAttribute>
-		<action on="Press">Engine.PostNetworkCommand({"type": "dialog-answer", "tutorial": "ready"});</action>
-	</object>
+<object name="tutorialPanels">
+	<include file="gui/session/tutorial/InstructionPanel.xml"/>
 </object>
diff --git a/binaries/data/mods/public/gui/session/tutorial/TutorialManager.js b/binaries/data/mods/public/gui/session/tutorial/TutorialManager.js
new file mode 100644
index 0000000000..7b7185dce7
--- /dev/null
+++ b/binaries/data/mods/public/gui/session/tutorial/TutorialManager.js
@@ -0,0 +1,74 @@
+// Needs to be kept in sync with the one in maps/scripts/Tutorial.js
+const TUTORIAL_STEP_TYPE = deepfreeze({
+	"INSTRUCTION": 1
+});
+
+/**
+ * This class manages the tutorial UI, which consists of various panels, which correspond to the different step types.
+ * It processes all tutorial notifications received from the simulation, translates them and passes them along to
+ * according panel.
+ */
+class TutorialManager
+{
+	parentObj = Engine.GetGUIObjectByName("tutorialPanels");
+
+	panels = new Map();
+	activePanel;
+	closePageCallback;
+
+	constructor(closePageCallback)
+	{
+		this.closePageCallback = closePageCallback;
+
+		this.panels.set(TUTORIAL_STEP_TYPE.INSTRUCTION, new InstructionPanel(this.closePage.bind(this)));
+		this.parentObj.hidden = true;
+	}
+
+	toggleVisibility()
+	{
+		this.parentObj.hidden = !this.activePanel || !this.parentObj.hidden;
+	}
+
+	handleNotification(notification)
+	{
+		if (notification.step)
+			this.displayStep(notification.step.type, notification.step.panelData);
+		if (notification.warning)
+			this.displayWarning(notification.warning);
+	}
+
+	displayWarning(warning)
+	{
+		this.activePanel.displayWarning(translate(warning));
+	}
+
+	displayStep(stepType, panelData)
+	{
+		this.parentObj.hidden = false;
+
+		translateObjectKeys(panelData, ["text", "title"]);
+		if (panelData.hotkeys)
+		{
+			let i = 0;
+			panelData.text = panelData.hotkeys.length == 1 ?
+				colorizeHotkey(panelData.text, panelData.hotkeys[0]) :
+				sprintf(panelData.text, panelData.hotkeys.reduce((obj, hotkey) =>
+				{
+					obj["hotkey" + ++i] = colorizeHotkey("%(hotkey)s", hotkey);
+					return obj;
+				}, {}));
+		}
+
+		if (!this.panels.has(stepType))
+			throw new Error("Failed to display tutorial step: Unkown step type: " + stepType);
+
+		this.panels.forEach((panel, type) => panel.setVisible(type == stepType));
+		this.activePanel = this.panels.get(stepType);
+		this.activePanel.displayStep(panelData);
+	}
+
+	closePage()
+	{
+		this.closePageCallback({ [Engine.openRequest]: endGame(true) });
+	}
+}
diff --git a/binaries/data/mods/public/maps/scripts/Tutorial.js b/binaries/data/mods/public/maps/scripts/Tutorial.js
index 4a0991a9f3..1c762a06d1 100644
--- a/binaries/data/mods/public/maps/scripts/Tutorial.js
+++ b/binaries/data/mods/public/maps/scripts/Tutorial.js
@@ -1,3 +1,10 @@
+// Needs to be kept in sync with the one in gui/session/tutorial/Tutorial.js
+var TUTORIAL_STEP_TYPE = deepfreeze({
+	"INSTRUCTION": 1
+});
+
+Engine.RegisterGlobal("TUTORIAL_STEP_TYPE", TUTORIAL_STEP_TYPE);
+
 Trigger.prototype.InitTutorial = function(data)
 {
 	this.index = 0;
@@ -76,19 +83,22 @@ Trigger.prototype.NextStep = function(deserializing = false)
 		}
 	}
 
-	this.DisplayStep(step.instructions, readyButton, ++this.index == this.tutorialSteps.length);
+	this.DisplayStep(step, readyButton, ++this.index == this.tutorialSteps.length);
 };
 
-Trigger.prototype.DisplayStep = function(instructions, readyButton=false, leave=false)
+Trigger.prototype.DisplayStep = function(step, readyButton = false, leave = false)
 {
 	const cmpGUIInterface = Engine.QueryInterface(SYSTEM_ENTITY, IID_GuiInterface);
 	cmpGUIInterface.PushNotification({
 		"type": "tutorial",
 		"players": [1],
 		"step": {
-			"instructions": typeof instructions === "string" ? [instructions] : instructions,
-			"readyButton": readyButton,
-			"leave": leave
+			"type": step.type,
+			"panelData": {
+				...step.panelData,
+				"readyButton": readyButton,
+				"leave": leave
+			}
 		}
 	});
 };
@@ -109,7 +119,7 @@ Trigger.prototype.OnDeserializedTrigger = function()
 
 	// Display messages from already processed steps
 	for (let i = 0; i < this.index; ++i)
-		this.DisplayStep(this.tutorialSteps[i].instructions, false, false);
+		this.DisplayStep(this.tutorialSteps[i], false, false);
 
 	this.NextStep(true);
 };
diff --git a/binaries/data/mods/public/maps/tutorials/introductory_tutorial.js b/binaries/data/mods/public/maps/tutorials/introductory_tutorial.js
index 1f82b73370..aa36e7cba9 100644
--- a/binaries/data/mods/public/maps/tutorials/introductory_tutorial.js
+++ b/binaries/data/mods/public/maps/tutorials/introductory_tutorial.js
@@ -1,32 +1,40 @@
 Trigger.prototype.tutorialSteps = [
 	{
-		"instructions": markForTranslation("Welcome to the 0\xa0A.D. tutorial."),
+		"type": TUTORIAL_STEP_TYPE.INSTRUCTION,
+		"panelData": {
+			"text": markForTranslation("Welcome to the 0\xa0A.D. tutorial.")
+		}
 	},
 	{
-		"instructions": markForTranslation("Left-click on a Civilian and then right-click on a berry bush to make that Civilian gather food. Civilians gather vegetables faster than other units."),
+		"type": TUTORIAL_STEP_TYPE.INSTRUCTION,
+		"panelData": {
+			"text": markForTranslation("Left-click on a Civilian and then right-click on a berry bush to make that Civilian gather food. Civilians gather vegetables faster than other units.")
+		},
 		"OnPlayerCommand": function(msg)
 		{
 			if (msg.cmd.type == "gather" && msg.cmd.target &&
-			    TriggerHelper.GetResourceType(msg.cmd.target).specific == "fruit")
+                TriggerHelper.GetResourceType(msg.cmd.target).specific == "fruit")
 				this.NextStep();
 		}
 	},
 	{
-		"instructions": markForTranslation("Select the Citizen Soldier, right-click on a tree near the Civic Center to begin gathering wood. Citizen Soldiers gather wood faster than Civilians."),
+		"type": TUTORIAL_STEP_TYPE.INSTRUCTION,
+		"panelData": {
+			"text": markForTranslation("Select the Citizen Soldier, right-click on a tree near the Civic Center to begin gathering wood. Citizen Soldiers gather wood faster than Civilians.")
+		},
 		"OnPlayerCommand": function(msg)
 		{
 			if (msg.cmd.type == "gather" && msg.cmd.target &&
-			    TriggerHelper.GetResourceType(msg.cmd.target).specific == "tree")
+                TriggerHelper.GetResourceType(msg.cmd.target).specific == "tree")
 				this.NextStep();
 		}
 	},
 	{
-		"instructions": [
-			{
-				"text": markForTranslation("Select the Civic Center building and hold %(hotkey)s while clicking on the Hoplite icon once to begin training a batch of Hoplites."),
-				"hotkey": "session.batchtrain"
-			}
-		],
+		"type": TUTORIAL_STEP_TYPE.INSTRUCTION,
+		"panelData": {
+			"text": markForTranslation("Select the Civic Center building and hold %(hotkey)s while clicking on the Hoplite icon once to begin training a batch of Hoplites."),
+			"hotkeys": ["session.batchtrain"]
+		},
 		"OnTrainingQueued": function(msg)
 		{
 			if (msg.unitTemplate != "units/spart/infantry_spearman_b" || +msg.count == 1)
@@ -43,7 +51,10 @@ Trigger.prototype.tutorialSteps = [
 		}
 	},
 	{
-		"instructions": markForTranslation("Select the two idle Civilians and build a House nearby by selecting the House icon. Place the House by left-clicking on a piece of land."),
+		"type": TUTORIAL_STEP_TYPE.INSTRUCTION,
+		"panelData": {
+			"text": markForTranslation("Select the two idle Civilians and build a House nearby by selecting the House icon. Place the House by left-clicking on a piece of land.")
+		},
 		"OnPlayerCommand": function(msg)
 		{
 			if (msg.cmd.type == "repair" && TriggerHelper.EntityMatchesClassList(msg.cmd.target, "House"))
@@ -51,7 +62,10 @@ Trigger.prototype.tutorialSteps = [
 		}
 	},
 	{
-		"instructions": markForTranslation("When they are ready, select the newly trained Hoplites and assign them to build a Storehouse beside some nearby trees. They will begin to gather wood when it's constructed."),
+		"type": TUTORIAL_STEP_TYPE.INSTRUCTION,
+		"panelData": {
+			"text": markForTranslation("When they are ready, select the newly trained Hoplites and assign them to build a Storehouse beside some nearby trees. They will begin to gather wood when it's constructed.")
+		},
 		"OnPlayerCommand": function(msg)
 		{
 			if (msg.cmd.type == "repair" && TriggerHelper.EntityMatchesClassList(msg.cmd.target, "Storehouse"))
@@ -59,12 +73,11 @@ Trigger.prototype.tutorialSteps = [
 		}
 	},
 	{
-		"instructions": [
-			{
-				"text": markForTranslation("Train a batch of Skirmishers by holding %(hotkey)s and clicking on the Skirmisher icon in the Civic Center."),
-				"hotkey": "session.batchtrain"
-			}
-		],
+		"type": TUTORIAL_STEP_TYPE.INSTRUCTION,
+		"panelData": {
+			"text": markForTranslation("Train a batch of Skirmishers by holding %(hotkey)s and clicking on the Skirmisher icon in the Civic Center."),
+			"hotkeys": ["session.batchtrain"]
+		},
 		"Init": function()
 		{
 			this.trainingDone = false;
@@ -85,7 +98,10 @@ Trigger.prototype.tutorialSteps = [
 		}
 	},
 	{
-		"instructions": markForTranslation("Build a Farmstead in an open space beside the Civic Center using any idle builders."),
+		"type": TUTORIAL_STEP_TYPE.INSTRUCTION,
+		"panelData": {
+			"text": markForTranslation("Build a Farmstead in an open space beside the Civic Center using any idle builders.")
+		},
 		"OnPlayerCommand": function(msg)
 		{
 			if (msg.cmd.type == "repair" && TriggerHelper.EntityMatchesClassList(msg.cmd.target, "Farmstead"))
@@ -97,7 +113,10 @@ Trigger.prototype.tutorialSteps = [
 		}
 	},
 	{
-		"instructions": markForTranslation("Let's wait for the Farmstead to be built."),
+		"type": TUTORIAL_STEP_TYPE.INSTRUCTION,
+		"panelData": {
+			"text": markForTranslation("Let's wait for the Farmstead to be built.")
+		},
 		"OnTrainingFinished": function(msg)
 		{
 			this.trainingDone = true;
@@ -109,7 +128,10 @@ Trigger.prototype.tutorialSteps = [
 		}
 	},
 	{
-		"instructions": markForTranslation("Once the Farmstead is constructed, its builders will automatically begin gathering food if there is any nearby. Select the builders and instead make them construct a Field beside the Farmstead."),
+		"type": TUTORIAL_STEP_TYPE.INSTRUCTION,
+		"panelData": {
+			"text": markForTranslation("Once the Farmstead is constructed, its builders will automatically begin gathering food if there is any nearby. Select the builders and instead make them construct a Field beside the Farmstead.")
+		},
 		"Init": function()
 		{
 			this.farmStarted = false;
@@ -133,7 +155,10 @@ Trigger.prototype.tutorialSteps = [
 		}
 	},
 	{
-		"instructions": markForTranslation("The Field's builders will now automatically begin gathering food from the Field. Using the newly created group of skirmishers, get them to build another House nearby."),
+		"type": TUTORIAL_STEP_TYPE.INSTRUCTION,
+		"panelData": {
+			"text": markForTranslation("The Field's builders will now automatically begin gathering food from the Field. Using the newly created group of skirmishers, get them to build another House nearby.")
+		},
 		"OnPlayerCommand": function(msg)
 		{
 			if (msg.cmd.type == "repair" && TriggerHelper.EntityMatchesClassList(msg.cmd.target, "House"))
@@ -141,7 +166,10 @@ Trigger.prototype.tutorialSteps = [
 		}
 	},
 	{
-		"instructions": markForTranslation("Train a batch of Hoplites at the Civic Center. Select the Civic Center and with it selected right-click on a tree nearby. Units from the Civic Center will now automatically gather wood."),
+		"type": TUTORIAL_STEP_TYPE.INSTRUCTION,
+		"panelData": {
+			"text": markForTranslation("Train a batch of Hoplites at the Civic Center. Select the Civic Center and with it selected right-click on a tree nearby. Units from the Civic Center will now automatically gather wood.")
+		},
 		"Init": function()
 		{
 			this.rallyPointSet = false;
@@ -170,8 +198,8 @@ Trigger.prototype.tutorialSteps = [
 		"OnPlayerCommand": function(msg)
 		{
 			if (msg.cmd.type != "set-rallypoint" || !msg.cmd.data ||
-			   !msg.cmd.data.command || msg.cmd.data.command != "gather" ||
-			   !msg.cmd.data.resourceType || msg.cmd.data.resourceType.specific != "tree")
+               !msg.cmd.data.command || msg.cmd.data.command != "gather" ||
+               !msg.cmd.data.resourceType || msg.cmd.data.resourceType.specific != "tree")
 			{
 				this.DisplayWarning(markForTranslation("Select the Civic Center, then hover the cursor over the tree and right-click when you see your cursor change into a wood icon."));
 				return;
@@ -182,7 +210,10 @@ Trigger.prototype.tutorialSteps = [
 		}
 	},
 	{
-		"instructions": markForTranslation("Build a Barracks nearby. Whenever your population limit is reached, build an extra House using any available builder units. This will be the fifth Village Phase structure that you have built, allowing you to advance to the Town Phase."),
+		"type": TUTORIAL_STEP_TYPE.INSTRUCTION,
+		"panelData": {
+			"text": markForTranslation("Build a Barracks nearby. Whenever your population limit is reached, build an extra House using any available builder units. This will be the fifth Village Phase structure that you have built, allowing you to advance to the Town Phase.")
+		},
 		"OnPlayerCommand": function(msg)
 		{
 			if (msg.cmd.type == "repair" && TriggerHelper.EntityMatchesClassList(msg.cmd.target, "Barracks"))
@@ -190,7 +221,10 @@ Trigger.prototype.tutorialSteps = [
 		}
 	},
 	{
-		"instructions": markForTranslation("Select the Civic Center again and advance to Town Phase by clicking on the II icon (you have to wait for the barracks to be built first). This will allow Town Phase buildings to be constructed."),
+		"type": TUTORIAL_STEP_TYPE.INSTRUCTION,
+		"panelData": {
+			"text": markForTranslation("Select the Civic Center again and advance to Town Phase by clicking on the II icon (you have to wait for the barracks to be built first). This will allow Town Phase buildings to be constructed.")
+		},
 		"IsDone": function()
 		{
 			return TriggerHelper.HasDealtWithTech(this.playerID, "phase_town_generic");
@@ -202,7 +236,10 @@ Trigger.prototype.tutorialSteps = [
 		}
 	},
 	{
-		"instructions": markForTranslation("While waiting for the phasing up, you may reassign your idle workers to gathering the resources you are short of."),
+		"type": TUTORIAL_STEP_TYPE.INSTRUCTION,
+		"panelData": {
+			"text": markForTranslation("While waiting for the phasing up, you may reassign your idle workers to gathering the resources you are short of.")
+		},
 		"IsDone": function()
 		{
 			const cmpPlayerManager = Engine.QueryInterface(SYSTEM_ENTITY, IID_PlayerManager);
@@ -217,7 +254,10 @@ Trigger.prototype.tutorialSteps = [
 		}
 	},
 	{
-		"instructions": markForTranslation("Order the idle Skirmishers to build an outpost to the north east at the edge of your territory."),
+		"type": TUTORIAL_STEP_TYPE.INSTRUCTION,
+		"panelData": {
+			"text": markForTranslation("Order the idle Skirmishers to build an outpost to the north east at the edge of your territory.")
+		},
 		"OnPlayerCommand": function(msg)
 		{
 			if (msg.cmd.type == "repair" && TriggerHelper.EntityMatchesClassList(msg.cmd.target, "Outpost"))
@@ -225,7 +265,10 @@ Trigger.prototype.tutorialSteps = [
 		}
 	},
 	{
-		"instructions": markForTranslation("Start training a batch of Civilians in the Civic Center and set its rally point to the Field (right click on it)."),
+		"type": TUTORIAL_STEP_TYPE.INSTRUCTION,
+		"panelData": {
+			"text": markForTranslation("Start training a batch of Civilians in the Civic Center and set its rally point to the Field (right click on it).")
+		},
 		"Init": function()
 		{
 			this.rallyPointSet = false;
@@ -254,8 +297,8 @@ Trigger.prototype.tutorialSteps = [
 		"OnPlayerCommand": function(msg)
 		{
 			if (msg.cmd.type != "set-rallypoint" || !msg.cmd.data ||
-			   !msg.cmd.data.command || msg.cmd.data.command != "gather" ||
-			   !msg.cmd.data.resourceType || msg.cmd.data.resourceType.specific != "grain")
+               !msg.cmd.data.command || msg.cmd.data.command != "gather" ||
+               !msg.cmd.data.resourceType || msg.cmd.data.resourceType.specific != "grain")
 				return;
 			this.rallyPointSet = true;
 			if (this.IsDone())
@@ -263,7 +306,10 @@ Trigger.prototype.tutorialSteps = [
 		}
 	},
 	{
-		"instructions": markForTranslation("Prepare for an attack by an enemy player. Train more soldiers using the Barracks, and get idle soldiers to build a Tower near your Outpost."),
+		"type": TUTORIAL_STEP_TYPE.INSTRUCTION,
+		"panelData": {
+			"text": markForTranslation("Prepare for an attack by an enemy player. Train more soldiers using the Barracks, and get idle soldiers to build a Tower near your Outpost.")
+		},
 		"OnPlayerCommand": function(msg)
 		{
 			if (msg.cmd.type == "repair" && TriggerHelper.EntityMatchesClassList(msg.cmd.target, "Tower"))
@@ -271,7 +317,10 @@ Trigger.prototype.tutorialSteps = [
 		}
 	},
 	{
-		"instructions": markForTranslation("Build a Forge and research the Infantry Training technology (sword icon) to improve infantry hack attack."),
+		"type": TUTORIAL_STEP_TYPE.INSTRUCTION,
+		"panelData": {
+			"text": markForTranslation("Build a Forge and research the Infantry Training technology (sword icon) to improve infantry hack attack.")
+		},
 		"OnResearchQueued": function(msg)
 		{
 			if (msg.technologyTemplate && TriggerHelper.EntityMatchesClassList(msg.researcherEntity, "Forge"))
@@ -279,7 +328,10 @@ Trigger.prototype.tutorialSteps = [
 		}
 	},
 	{
-		"instructions": markForTranslation("The enemy is coming. Train more soldiers to fight off the enemies."),
+		"type": TUTORIAL_STEP_TYPE.INSTRUCTION,
+		"panelData": {
+			"text": markForTranslation("The enemy is coming. Train more soldiers to fight off the enemies.")
+		},
 		"OnResearchFinished": function(msg)
 		{
 			this.LaunchAttack();
@@ -287,7 +339,10 @@ Trigger.prototype.tutorialSteps = [
 		}
 	},
 	{
-		"instructions": markForTranslation("Try to repel the attack."),
+		"type": TUTORIAL_STEP_TYPE.INSTRUCTION,
+		"panelData": {
+			"text": markForTranslation("Try to repel the attack.")
+		},
 		"OnOwnershipChanged": function(msg)
 		{
 			if (msg.to != INVALID_PLAYER)
@@ -297,7 +352,10 @@ Trigger.prototype.tutorialSteps = [
 		}
 	},
 	{
-		"instructions": markForTranslation("The enemy attack has been thwarted. Now build a market and a temple while you assign new units to gather required resources."),
+		"type": TUTORIAL_STEP_TYPE.INSTRUCTION,
+		"panelData": {
+			"text": markForTranslation("The enemy attack has been thwarted. Now build a market and a temple while you assign new units to gather required resources.")
+		},
 		"Init": function()
 		{
 			this.marketStarted = false;
@@ -318,7 +376,10 @@ Trigger.prototype.tutorialSteps = [
 		}
 	},
 	{
-		"instructions": markForTranslation("Once you meet the City Phase requirements, select your Civic Center and advance to City Phase."),
+		"type": TUTORIAL_STEP_TYPE.INSTRUCTION,
+		"panelData": {
+			"text": markForTranslation("Once you meet the City Phase requirements, select your Civic Center and advance to City Phase.")
+		},
 		"IsDone": function()
 		{
 			return TriggerHelper.HasDealtWithTech(this.playerID, "phase_city_generic");
@@ -330,7 +391,10 @@ Trigger.prototype.tutorialSteps = [
 		}
 	},
 	{
-		"instructions": markForTranslation("While waiting for the phase change, you may train more soldiers at the Barracks."),
+		"type": TUTORIAL_STEP_TYPE.INSTRUCTION,
+		"panelData": {
+			"text": markForTranslation("While waiting for the phase change, you may train more soldiers at the Barracks.")
+		},
 		"IsDone": function()
 		{
 			return TriggerHelper.HasDealtWithTech(this.playerID, "phase_city_generic");
@@ -342,7 +406,10 @@ Trigger.prototype.tutorialSteps = [
 		}
 	},
 	{
-		"instructions": markForTranslation("Now that you are in City Phase, build the Arsenal nearby and then use it to construct 2 Battering Rams."),
+		"type": TUTORIAL_STEP_TYPE.INSTRUCTION,
+		"panelData": {
+			"text": markForTranslation("Now that you are in City Phase, build the Arsenal nearby and then use it to construct 2 Battering Rams.")
+		},
 		"Init": function()
 		{
 			this.ramCount = 0;
@@ -363,10 +430,12 @@ Trigger.prototype.tutorialSteps = [
 		}
 	},
 	{
-		"instructions": [
-			markForTranslation("Stop all your soldiers gathering resources and instead task small groups to find the enemy Civic Center on the map. Once the enemy's base has been spotted, send your Siege Engines and all remaining soldiers to destroy it.\n"),
-			markForTranslation("Civilians should continue to gather resources.")
-		],
+		"type": TUTORIAL_STEP_TYPE.INSTRUCTION,
+		"panelData": {
+			"text":
+                markForTranslation("Stop all your soldiers gathering resources and instead task small groups to find the enemy Civic Center on the map. Once the enemy's base has been spotted, send your Siege Engines and all remaining soldiers to destroy it.\n") +
+                markForTranslation("Civilians should continue to gather resources.")
+		},
 		"OnOwnershipChanged": function(msg)
 		{
 			if (msg.from != this.enemyID)
@@ -376,7 +445,10 @@ Trigger.prototype.tutorialSteps = [
 		}
 	},
 	{
-		"instructions": markForTranslation("The enemy has been defeated. These tutorial tasks are now completed."),
+		"type": TUTORIAL_STEP_TYPE.INSTRUCTION,
+		"panelData": {
+			"text": markForTranslation("The enemy has been defeated. These tutorial tasks are now completed.")
+		},
 		"Init": function()
 		{
 			const cmpEndGameManager = Engine.QueryInterface(SYSTEM_ENTITY, IID_EndGameManager);
diff --git a/binaries/data/mods/public/maps/tutorials/starting_economy_walkthrough.js b/binaries/data/mods/public/maps/tutorials/starting_economy_walkthrough.js
index 990df004b8..1cb01739e8 100644
--- a/binaries/data/mods/public/maps/tutorials/starting_economy_walkthrough.js
+++ b/binaries/data/mods/public/maps/tutorials/starting_economy_walkthrough.js
@@ -1,55 +1,56 @@
 Trigger.prototype.tutorialSteps = [
 	{
-		"instructions": [
-			markForTranslation("This tutorial will teach the basics of developing your economy. Typically, you will start with a Civic Center and a couple units in Village Phase and ultimately, your goal will be to develop and expand your empire, often by evolving to Town Phase and City Phase afterward.\n"),
-			{
-				"text": markForTranslation("\nBefore starting, you can toggle between fullscreen and windowed mode using %(hotkey)s."),
-				"hotkey": "togglefullscreen"
-			},
-			markForTranslation("You can change the level of zoom using the mouse wheel and the camera view using any of your keyboard's arrow keys.\n"),
-			markForTranslation("Adjust the game window to your preferences.\n"),
-			{
-				"text": markForTranslation("\nYou may also toggle between showing and hiding this tutorial panel at any moment using %(hotkey)s.\n"),
-				"hotkey": "session.gui.tutorial.toggle"
-			}
-		]
+		"type": TUTORIAL_STEP_TYPE.INSTRUCTION,
+		"panelData": {
+			"text":
+				markForTranslation("This tutorial will teach the basics of developing your economy. Typically, you will start with a Civic Center and a couple units in Village Phase and ultimately, your goal will be to develop and expand your empire, often by evolving to Town Phase and City Phase afterward.\n") +
+				markForTranslation("\nBefore starting, you can toggle between fullscreen and windowed mode using %(hotkey1)s.") +
+				markForTranslation("You can change the level of zoom using the mouse wheel and the camera view using any of your keyboard's arrow keys.\n") +
+				markForTranslation("Adjust the game window to your preferences.\n") +
+				markForTranslation("\nYou may also toggle between showing and hiding this tutorial panel at any moment using %(hotkey2)s.\n"),
+			"hotkeys": ["togglefullscreen", "session.gui.tutorial.toggle"]
+		}
 	},
 	{
-		"instructions": [
-			markForTranslation("To start off, select your building, the Civic Center, by clicking on it. A selection ring in the color of your player will be displayed after clicking.")
-		]
+		"type": TUTORIAL_STEP_TYPE.INSTRUCTION,
+		"panelData": {
+			"text": markForTranslation("To start off, select your building, the Civic Center, by clicking on it. A selection ring in the color of your player will be displayed after clicking.")
+		}
 	},
 	{
-		"instructions": [
-			markForTranslation("Now that the Civic Center is selected, you will notice that a production panel will appear on the lower right of your screen detailing the actions that the buildings supports. For the production panel, available actions are not masked in any color, while an icon masked in gray indicates that the action has not been unlocked and a red mask indicates that you do not have sufficient resources to perform that action. Additionally, you can hover the cursor over any icon to show a tooltip with more details.\n"),
-			markForTranslation("The top row of buttons contains portraits of units that may be trained at the building while the bottom one or two rows will have researchable technologies. Hover the cursor over the II icon. The tooltip will tell us that advancing to Town Phase requires both more constructed structures as well as more food and wood resources.")
-		]
+		"type": TUTORIAL_STEP_TYPE.INSTRUCTION,
+		"panelData": {
+			"text":
+				markForTranslation("Now that the Civic Center is selected, you will notice that a production panel will appear on the lower right of your screen detailing the actions that the buildings supports. For the production panel, available actions are not masked in any color, while an icon masked in gray indicates that the action has not been unlocked and a red mask indicates that you do not have sufficient resources to perform that action. Additionally, you can hover the cursor over any icon to show a tooltip with more details.\n") +
+				markForTranslation("The top row of buttons contains portraits of units that may be trained at the building while the bottom one or two rows will have researchable technologies. Hover the cursor over the II icon. The tooltip will tell us that advancing to Town Phase requires both more constructed structures as well as more food and wood resources.")
+		}
 	},
 	{
-		"instructions": [
-			markForTranslation("You have two main types of starting units: Civilians and Citizen Soldiers. Civilians are purely economic units; they have low health and little to no attack. Citizen Soldiers are workers by default, but in times of need, can utilize a weapon to fight. You have two categories of Citizen Soldiers: Infantry and Cavalry. Civilians and Infantry Citizen Soldiers can gather any land resources while Cavalry Citizen Soldiers can only gather meat from animals.\n")
-		]
+		"type": TUTORIAL_STEP_TYPE.INSTRUCTION,
+		"panelData": {
+			"text":
+				markForTranslation("You have two main types of starting units: Civilians and Citizen Soldiers. Civilians are purely economic units; they have low health and little to no attack. Citizen Soldiers are workers by default, but in times of need, can utilize a weapon to fight. You have two categories of Citizen Soldiers: Infantry and Cavalry. Civilians and Infantry Citizen Soldiers can gather any land resources while Cavalry Citizen Soldiers can only gather meat from animals.\n")
+		}
 	},
 	{
-		"instructions": [
-			markForTranslation("As a general rule of thumb, left-clicking represents selection while right-clicking with an entity selected represents an order (gather, build, fight, etc.).\n")
-		]
+		"type": TUTORIAL_STEP_TYPE.INSTRUCTION,
+		"panelData": {
+			"text":
+				markForTranslation("As a general rule of thumb, left-clicking represents selection while right-clicking with an entity selected represents an order (gather, build, fight, etc.).\n")
+		}
 	},
 	{
-		"instructions": [
-			markForTranslation("At this point, food and wood are the most important resources for developing your economy, so let's start with gathering food. Civilians gather vegetables faster than other units.\n"),
-			markForTranslation("There are primarily three ways to select units:\n"),
-			markForTranslation("1) Hold the left mouse button and drag a selection rectangle that encloses the units you want to select.\n"),
-			{
-				"text": markForTranslation("2) Click on one of them and then add additional units to your selection by holding %(hotkey)s and clicking each additional unit (or also via the above selection rectangle).\n"),
-				"hotkey": "selection.add"
-			},
-			{
-				"text": markForTranslation("3) Double-click on a unit. This will select every unit of the same type as the specified unit in your visible window. %(hotkey)s+double-click will select all units of the same type on the entire map.\n"),
-				"hotkey": "selection.offscreen"
-			},
-			markForTranslation("You can click on an empty space on the map to reset the selection. Try each of these methods before tasking all of your Civilians to gather the berries to the southeast of your Civic Center by right-clicking on the berries when you have all the Civilians selected.")
-		],
+		"type": TUTORIAL_STEP_TYPE.INSTRUCTION,
+		"panelData": {
+			"text":
+				markForTranslation("At this point, food and wood are the most important resources for developing your economy, so let's start with gathering food. Civilians gather vegetables faster than other units.\n") +
+				markForTranslation("There are primarily three ways to select units:\n") +
+				markForTranslation("1) Hold the left mouse button and drag a selection rectangle that encloses the units you want to select.\n") +
+				markForTranslation("2) Click on one of them and then add additional units to your selection by holding %(hotkey1)s and clicking each additional unit (or also via the above selection rectangle).\n") +
+				markForTranslation("3) Double-click on a unit. This will select every unit of the same type as the specified unit in your visible window. %(hotkey2)s+double-click will select all units of the same type on the entire map.\n") +
+				markForTranslation("You can click on an empty space on the map to reset the selection. Try each of these methods before tasking all of your Civilians to gather the berries to the southeast of your Civic Center by right-clicking on the berries when you have all the Civilians selected."),
+			"hotkeys": ["selection.add", "selection.offscreen"]
+		},
 		"OnPlayerCommand": function(msg)
 		{
 			if (msg.cmd.type == "gather" && msg.cmd.target &&
@@ -58,9 +59,10 @@ Trigger.prototype.tutorialSteps = [
 		}
 	},
 	{
-		"instructions": [
-			markForTranslation("Now, let's gather some wood with your Infantry Citizen Soldiers. Select your Infantry Citizen Soldiers and order them to gather wood by right-clicking on the nearest tree.")
-		],
+		"type": TUTORIAL_STEP_TYPE.INSTRUCTION,
+		"panelData": {
+			"text": markForTranslation("Now, let's gather some wood with your Infantry Citizen Soldiers. Select your Infantry Citizen Soldiers and order them to gather wood by right-clicking on the nearest tree.")
+		},
 		"OnPlayerCommand": function(msg)
 		{
 			if (msg.cmd.type == "gather" && msg.cmd.target &&
@@ -69,9 +71,10 @@ Trigger.prototype.tutorialSteps = [
 		}
 	},
 	{
-		"instructions": [
-			markForTranslation("Cavalry Citizen Soldiers are good for hunting. Select your Cavalry and order him to slaughter the chickens around your Civic Center in similar fashion.")
-		],
+		"type": TUTORIAL_STEP_TYPE.INSTRUCTION,
+		"panelData": {
+			"text": markForTranslation("Cavalry Citizen Soldiers are good for hunting. Select your Cavalry and order him to slaughter the chickens around your Civic Center in similar fashion.")
+		},
 		"OnPlayerCommand": function(msg)
 		{
 			if (msg.cmd.type == "gather" && msg.cmd.target &&
@@ -80,32 +83,33 @@ Trigger.prototype.tutorialSteps = [
 		}
 	},
 	{
-		"instructions": [
-			markForTranslation("All your units are now gathering resources. We should train more units!\n"),
-			markForTranslation("First, let's set a rally point. Setting a rally point on a building that can train units will automatically designate a task to the new unit upon completion of training. We want to send the newly trained units to gather wood on the group of trees to the south of the Civic Center. To do so, select the Civic Center by clicking on it and then right-click on one of the trees.\n"),
-			markForTranslation("Rally points are indicated by a small flag at the end of the blue line.")
-		],
+		"type": TUTORIAL_STEP_TYPE.INSTRUCTION,
+		"panelData": {
+			"text":
+				markForTranslation("All your units are now gathering resources. We should train more units!\n") +
+				markForTranslation("First, let's set a rally point. Setting a rally point on a building that can train units will automatically designate a task to the new unit upon completion of training. We want to send the newly trained units to gather wood on the group of trees to the south of the Civic Center. To do so, select the Civic Center by clicking on it and then right-click on one of the trees.\n") +
+				markForTranslation("Rally points are indicated by a small flag at the end of the blue line.")
+		},
 		"OnPlayerCommand": function(msg)
 		{
 			if (msg.cmd.type != "set-rallypoint" || !msg.cmd.data ||
-			   !msg.cmd.data.command || msg.cmd.data.command != "gather" ||
-			   !msg.cmd.data.resourceType || msg.cmd.data.resourceType.specific != "tree")
+			!msg.cmd.data.command || msg.cmd.data.command != "gather" ||
+			!msg.cmd.data.resourceType || msg.cmd.data.resourceType.specific != "tree")
 			{
 				this.DisplayWarning(markForTranslation("Select the Civic Center, then hover the cursor over a tree and right-click when you see the cursor change into a wood icon."));
 				return;
 			}
 			this.NextStep();
 		}
-
 	},
 	{
-		"instructions": [
-			markForTranslation("Now that the rally point is set, we can produce additional units and they will do their assigned task automatically.\n"),
-			{
-				"text": markForTranslation("Citizen Soldiers gather wood faster than Civilians. Select the Civic Center and, while holding %(hotkey)s, click on the second unit icon, the Hoplites (holding %(hotkey)s trains a batch of five units). You can also train units individually by simply clicking, but training 5 units together takes less time than training 5 units individually."),
-				"hotkey": "session.batchtrain"
-			}
-		],
+		"type": TUTORIAL_STEP_TYPE.INSTRUCTION,
+		"panelData": {
+			"text":
+				markForTranslation("Now that the rally point is set, we can produce additional units and they will do their assigned task automatically.\n") +
+				markForTranslation("Citizen Soldiers gather wood faster than Civilians. Select the Civic Center and, while holding %(hotkey)s, click on the second unit icon, the Hoplites (holding %(hotkey)s trains a batch of five units). You can also train units individually by simply clicking, but training 5 units together takes less time than training 5 units individually."),
+			"hotkeys": ["session.batchtrain"]
+		},
 		"OnTrainingQueued": function(msg)
 		{
 			if (msg.unitTemplate != "units/athen/infantry_spearman_b" || +msg.count == 1)
@@ -123,22 +127,26 @@ Trigger.prototype.tutorialSteps = [
 		}
 	},
 	{
-		"instructions": [
-			markForTranslation("Let's wait for the units to be trained.\n"),
-			markForTranslation("While waiting, direct your attention to the panel at the top of your screen. On the upper left, you will see your current resource supply (food, wood, stone, and metal). As each worker brings resources back to the Civic Center (or another dropsite), you will see the amount of the corresponding resource increase.\n"),
-			markForTranslation("This is a very important concept to keep in mind: gathered resources have to be brought back to a dropsite to be accounted, and you should always try to minimize the distance between resource and nearest dropsite to improve your gathering efficiency.")
-		],
+		"type": TUTORIAL_STEP_TYPE.INSTRUCTION,
+		"panelData": {
+			"text":
+				markForTranslation("Let's wait for the units to be trained.\n") +
+				markForTranslation("While waiting, direct your attention to the panel at the top of your screen. On the upper left, you will see your current resource supply (food, wood, stone, and metal). As each worker brings resources back to the Civic Center (or another dropsite), you will see the amount of the corresponding resource increase.\n") +
+				markForTranslation("This is a very important concept to keep in mind: gathered resources have to be brought back to a dropsite to be accounted, and you should always try to minimize the distance between resource and nearest dropsite to improve your gathering efficiency.")
+		},
 		"OnTrainingFinished": function(msg)
 		{
 			this.NextStep();
 		}
 	},
 	{
-		"instructions": [
-			markForTranslation("The newly trained units automatically go to the trees and start gathering wood.\n"),
-			markForTranslation("But as they have to bring it back to the Civic Center to deposit it, their gathering efficiency suffers from the distance. To fix that, we can build a Storehouse, a dropsite for wood, stone, and metal, close to the trees. To do so, select your five newly trained Citizen Soldiers and look for the construction panel on the bottom right, click on the Storehouse icon, move the mouse as close as possible to the trees you want to gather and click on a valid place to build the dropsite.\n"),
-			markForTranslation("Invalid (obstructed) positions will show the building preview overlay in red.")
-		],
+		"type": TUTORIAL_STEP_TYPE.INSTRUCTION,
+		"panelData": {
+			"text":
+				markForTranslation("The newly trained units automatically go to the trees and start gathering wood.\n") +
+				markForTranslation("But as they have to bring it back to the Civic Center to deposit it, their gathering efficiency suffers from the distance. To fix that, we can build a Storehouse, a dropsite for wood, stone, and metal, close to the trees. To do so, select your five newly trained Citizen Soldiers and look for the construction panel on the bottom right, click on the Storehouse icon, move the mouse as close as possible to the trees you want to gather and click on a valid place to build the dropsite.\n") +
+				markForTranslation("Invalid (obstructed) positions will show the building preview overlay in red.")
+		},
 		"OnPlayerCommand": function(msg)
 		{
 			if (msg.cmd.type == "construct" && msg.cmd.template == "structures/athen/storehouse")
@@ -146,21 +154,24 @@ Trigger.prototype.tutorialSteps = [
 		}
 	},
 	{
-		"instructions": [
-			markForTranslation("The selected Citizens will automatically start constructing the building once you place the foundation.")
-		],
+		"type": TUTORIAL_STEP_TYPE.INSTRUCTION,
+		"panelData": {
+			"text": markForTranslation("The selected Citizens will automatically start constructing the building once you place the foundation.")
+		},
 		"OnStructureBuilt": function(msg)
 		{
 			const cmpResourceDropsite = Engine.QueryInterface(msg.building, IID_ResourceDropsite);
 			if (cmpResourceDropsite && cmpResourceDropsite.AcceptsType("wood"))
 				this.NextStep();
-		},
+		}
 	},
 	{
-		"instructions": [
-			markForTranslation("When construction finishes, the builders default to gathering wood automatically.\n"),
-			markForTranslation("In the meantime, we seem to have enough workers gathering wood. We should remove the current rally point of the Civic Center away from gathering wood. For that purpose, right-click on the Civic Center when it is selected (and the flag icon indicating the rally point is crossed out).")
-		],
+		"type": TUTORIAL_STEP_TYPE.INSTRUCTION,
+		"panelData": {
+			"text":
+				markForTranslation("When construction finishes, the builders default to gathering wood automatically.\n") +
+				markForTranslation("In the meantime, we seem to have enough workers gathering wood. We should remove the current rally point of the Civic Center away from gathering wood. For that purpose, right-click on the Civic Center when it is selected (and the flag icon indicating the rally point is crossed out).")
+		},
 		"OnPlayerCommand": function(msg)
 		{
 			if (msg.cmd.type == "unset-rallypoint")
@@ -172,12 +183,11 @@ Trigger.prototype.tutorialSteps = [
 		}
 	},
 	{
-		"instructions": [
-			{
-				"text": markForTranslation("Let's train some Civilians to gather more food. Select the Civic Center, hold %(hotkey)s and click on the Civilian icon to train five Civilians."),
-				"hotkey": "session.batchtrain"
-			}
-		],
+		"type": TUTORIAL_STEP_TYPE.INSTRUCTION,
+		"panelData": {
+			"text": markForTranslation("Let's train some Civilians to gather more food. Select the Civic Center, hold %(hotkey)s and click on the Civilian icon to train five Civilians."),
+			"hotkeys": ["session.batchtrain"]
+		},
 		"Init": function()
 		{
 			this.trainingDone = false;
@@ -199,10 +209,12 @@ Trigger.prototype.tutorialSteps = [
 		}
 	},
 	{
-		"instructions": [
-			markForTranslation("The units should be ready soon.\n"),
-			markForTranslation("In the meantime, direct your attention to your population count on the top panel. It is the fifth item from the left, after the resources. It would be prudent to keep an eye on it. It indicates your current population (including those being trained) and the current population limit, which is determined by your built structures.")
-		],
+		"type": TUTORIAL_STEP_TYPE.INSTRUCTION,
+		"panelData": {
+			"text":
+				markForTranslation("The units should be ready soon.\n") +
+				markForTranslation("In the meantime, direct your attention to your population count on the top panel. It is the fifth item from the left, after the resources. It would be prudent to keep an eye on it. It indicates your current population (including those being trained) and the current population limit, which is determined by your built structures.")
+		},
 		"IsDone": function(msg)
 		{
 			return this.trainingDone;
@@ -213,22 +225,21 @@ Trigger.prototype.tutorialSteps = [
 		}
 	},
 	{
-		"instructions": [
-			markForTranslation("As you have nearly reached the population limit, you must increase it by building some new structures if you want to train more units. The most cost effective structure to increase your population limit is the House.\n"),
-			markForTranslation("Now that the units are ready, let's see how to build several Houses in a row.")
-		]
+		"type": TUTORIAL_STEP_TYPE.INSTRUCTION,
+		"panelData": {
+			"text":
+				markForTranslation("As you have nearly reached the population limit, you must increase it by building some new structures if you want to train more units. The most cost effective structure to increase your population limit is the House.\n") +
+				markForTranslation("Now that the units are ready, let's see how to build several Houses in a row.")
+		}
 	},
 	{
-		"instructions": [
-			{
-				"text": markForTranslation("Select two of your newly-trained Civilians and order them to build these Houses in the empty space to the east of the Civic Center. Click on the House icon in the bottom right panel. While holding %(hotkey)s click on positions on the map where you want to build Houses. The Civilians will then start to build the houses in order. (When you give a command while holding %(hotkey)s, you put the command in a queue; units automatically switch to the next command in their queue when they finish their current command). Press Escape to get rid of the House cursor so you don't spam Houses all over the map.\n"),
-				"hotkey": "selection.queue"
-			},
-			{
-				"text": markForTranslation("Reminder: to select only two Civilians, click on the first one and then hold %(hotkey)s and click on the second one."),
-				"hotkey": "selection.add"
-			}
-		],
+		"type": TUTORIAL_STEP_TYPE.INSTRUCTION,
+		"panelData": {
+			"text":
+				markForTranslation("Select two of your newly-trained Civilians and order them to build these Houses in the empty space to the east of the Civic Center. Click on the House icon in the bottom right panel. While holding %(hotkey1)s click on positions on the map where you want to build Houses. The Civilians will then start to build the houses in order. (When you give a command while holding %(hotkey1)s, you put the command in a queue; units automatically switch to the next command in their queue when they finish their current command). Press Escape to get rid of the House cursor so you don't spam Houses all over the map.\n") +
+				markForTranslation("Reminder: to select only two Civilians, click on the first one and then hold %(hotkey2)s and click on the second one."),
+			"hotkeys": ["selection.queue", "selection.add"]
+		},
 		"Init": function()
 		{
 			this.houseGoal = new Set();
@@ -244,12 +255,12 @@ Trigger.prototype.tutorialSteps = [
 			{
 				this.houseGoal.delete(+msg.entity);
 				const cmpFoundation = Engine.QueryInterface(+msg.entity, IID_Foundation);
-				if (cmpFoundation && cmpFoundation.GetBuildProgress() < 1)	// Destroyed before built
+				if (cmpFoundation && cmpFoundation.GetBuildProgress() < 1)
 					--this.houseCount;
 			}
 			else if (msg.from == INVALID_PLAYER && msg.to == this.playerID &&
-			         Engine.QueryInterface(+msg.entity, IID_Foundation) &&
-			         TriggerHelper.EntityMatchesClassList(+msg.entity, "House"))
+					Engine.QueryInterface(+msg.entity, IID_Foundation) &&
+					TriggerHelper.EntityMatchesClassList(+msg.entity, "House"))
 			{
 				this.houseGoal.add(+msg.entity);
 				++this.houseCount;
@@ -259,10 +270,12 @@ Trigger.prototype.tutorialSteps = [
 		}
 	},
 	{
-		"instructions": [
-			markForTranslation("You may notice that berries are a finite supply of food. We will need a more lasting food source. Fields produce an unlimited food resource, but are slower to gather than forageable fruits.\n"),
-			markForTranslation("But to minimize the distance between a farm and its corresponding food dropsite, we will first build a Farmstead.")
-		],
+		"type": TUTORIAL_STEP_TYPE.INSTRUCTION,
+		"panelData": {
+			"text":
+				markForTranslation("You may notice that berries are a finite supply of food. We will need a more lasting food source. Fields produce an unlimited food resource, but are slower to gather than forageable fruits.\n") +
+				markForTranslation("But to minimize the distance between a farm and its corresponding food dropsite, we will first build a Farmstead.")
+		},
 		"delay": -1,
 		"OnOwnershipChanged": function(msg)
 		{
@@ -271,14 +284,14 @@ Trigger.prototype.tutorialSteps = [
 		}
 	},
 	{
-		"instructions": [
-			markForTranslation("Select the three remaining (idle) Civilians and order them to build a Farmstead in the center of the large open area to the west of the Civic Center.\n"),
-			markForTranslation("We will need a decent chunk of space around the Farmstead to build Fields. In addition, we can see goats on the west side to further improve our food gathering efficiency should we ever decide to hunt them.\n"),
-			{
-				"text": markForTranslation("If you try to select the three idle Civilians by clicking and dragging a selection rectangle over them, you might accidentally select additional units. To avoid that, hold %(hotkey)s while selecting so that only idle units are selected. If you accidentally select a cavalry unit, hold Ctrl and click on the cavalry unit icon of the selection panel at the bottom of the screen to remove the cavalry unit from the current selection."),
-				"hotkey": "selection.idleonly"
-			}
-		],
+		"type": TUTORIAL_STEP_TYPE.INSTRUCTION,
+		"panelData": {
+			"text":
+				markForTranslation("Select the three remaining (idle) Civilians and order them to build a Farmstead in the center of the large open area to the west of the Civic Center.\n") +
+				markForTranslation("We will need a decent chunk of space around the Farmstead to build Fields. In addition, we can see goats on the west side to further improve our food gathering efficiency should we ever decide to hunt them.\n") +
+				markForTranslation("If you try to select the three idle Civilians by clicking and dragging a selection rectangle over them, you might accidentally select additional units. To avoid that, hold %(hotkey)s while selecting so that only idle units are selected. If you accidentally select a cavalry unit, hold Ctrl and click on the cavalry unit icon of the selection panel at the bottom of the screen to remove the cavalry unit from the current selection."),
+			"hotkeys": ["selection.idleonly"]
+		},
 		"OnPlayerCommand": function(msg)
 		{
 			if (msg.cmd.type == "construct" && msg.cmd.template == "structures/athen/farmstead")
@@ -291,10 +304,12 @@ Trigger.prototype.tutorialSteps = [
 		}
 	},
 	{
-		"instructions": [
-			markForTranslation("When the Farmstead construction is finished, its builders will automatically look for food, and in this case, they will go after the nearby goats.\n"),
-			markForTranslation("But your House builders will only look for something else to build and, if nothing found, become idle. Let's wait for them to build the Houses.")
-		],
+		"type": TUTORIAL_STEP_TYPE.INSTRUCTION,
+		"panelData": {
+			"text":
+				markForTranslation("When the Farmstead construction is finished, its builders will automatically look for food, and in this case, they will go after the nearby goats.\n") +
+				markForTranslation("But your House builders will only look for something else to build and, if nothing found, become idle. Let's wait for them to build the Houses.")
+		},
 		"IsDone": function()
 		{
 			return !this.houseGoal.size;
@@ -308,9 +323,10 @@ Trigger.prototype.tutorialSteps = [
 		}
 	},
 	{
-		"instructions": [
-			markForTranslation("When both Houses are built, select your two Civilians and order them to build a Field as close as possible to the Farmstead, which is a dropsite for all types of food.")
-		],
+		"type": TUTORIAL_STEP_TYPE.INSTRUCTION,
+		"panelData": {
+			"text": markForTranslation("When both Houses are built, select your two Civilians and order them to build a Field as close as possible to the Farmstead, which is a dropsite for all types of food.")
+		},
 		"OnPlayerCommand": function(msg)
 		{
 			if (msg.cmd.type == "construct" && msg.cmd.template == "structures/athen/field")
@@ -318,26 +334,29 @@ Trigger.prototype.tutorialSteps = [
 		}
 	},
 	{
-		"instructions": [
-			markForTranslation("When the Field is ready, the builders will automatically start gathering it.\n"),
-			markForTranslation("The cavalry unit should have slaughtered all chickens by now. Select it and explore the area to the south of the Civic Center: there is a lake with some camels around. Move your cavalry by right-clicking on the point you want to go, and when you see a herd of camels, right-click on one of them to start hunting for food.")
-		],
+		"type": TUTORIAL_STEP_TYPE.INSTRUCTION,
+		"panelData": {
+			"text":
+				markForTranslation("When the Field is ready, the builders will automatically start gathering it.\n") +
+				markForTranslation("The cavalry unit should have slaughtered all chickens by now. Select it and explore the area to the south of the Civic Center: there is a lake with some camels around. Move your cavalry by right-clicking on the point you want to go, and when you see a herd of camels, right-click on one of them to start hunting for food.")
+		},
 		"OnPlayerCommand": function(msg)
 		{
 			if (msg.cmd.type == "gather" && msg.cmd.target &&
-			    TriggerHelper.GetResourceType(msg.cmd.target).specific == "meat")
+				TriggerHelper.GetResourceType(msg.cmd.target).specific == "meat")
 				this.NextStep();
 		}
 	},
 	{
-		"instructions": [
-			markForTranslation("Up to five Workers can gather from a Field. To add additional Workers, select the Civic Center and set a rally point on a Field by right-clicking on it. If the Field is not yet finished, new Workers sent by a rally point will help building it, and when built, they will gather food.")
-		],
+		"type": TUTORIAL_STEP_TYPE.INSTRUCTION,
+		"panelData": {
+			"text": markForTranslation("Up to five Workers can gather from a Field. To add additional Workers, select the Civic Center and set a rally point on a Field by right-clicking on it. If the Field is not yet finished, new Workers sent by a rally point will help building it, and when built, they will gather food.")
+		},
 		"OnPlayerCommand": function(msg)
 		{
 			if (msg.cmd.type != "set-rallypoint" || !msg.cmd.data || !msg.cmd.data.command ||
-			   (msg.cmd.data.command != "build" || !msg.cmd.data.target || !TriggerHelper.EntityMatchesClassList(msg.cmd.data.target, "Field")) &&
-			   (msg.cmd.data.command != "gather" || !msg.cmd.data.resourceType || msg.cmd.data.resourceType.specific != "grain"))
+			(msg.cmd.data.command != "build" || !msg.cmd.data.target || !TriggerHelper.EntityMatchesClassList(msg.cmd.data.target, "Field")) &&
+			(msg.cmd.data.command != "gather" || !msg.cmd.data.resourceType || msg.cmd.data.resourceType.specific != "grain"))
 			{
 				this.DisplayWarning(markForTranslation("Select the Civic Center and right-click on the Field."));
 				return;
@@ -346,9 +365,10 @@ Trigger.prototype.tutorialSteps = [
 		}
 	},
 	{
-		"instructions": [
-			markForTranslation("Now click three times on the Civilian icon in the bottom right panel to train three additional farmers.")
-		],
+		"type": TUTORIAL_STEP_TYPE.INSTRUCTION,
+		"panelData": {
+			"text": markForTranslation("Now click three times on the Civilian icon in the bottom right panel to train three additional farmers.")
+		},
 		"Init": function(msg)
 		{
 			this.femaleCount = 0;
@@ -371,14 +391,16 @@ Trigger.prototype.tutorialSteps = [
 		}
 	},
 	{
-		"instructions": [
-			markForTranslation("You can increase the gather rates of your workers by researching new technologies available in some buildings.\n"),
-			markForTranslation("The farming rate, for example, can be improved with a researchable technology in the Farmstead. Select the Farmstead and look at its production panel on the bottom right. You will see several researchable technologies. Hover the cursor over them to see their costs and effects and click on the one you want to research.")
-		],
+		"type": TUTORIAL_STEP_TYPE.INSTRUCTION,
+		"panelData": {
+			"text":
+				markForTranslation("You can increase the gather rates of your workers by researching new technologies available in some buildings.\n") +
+				markForTranslation("The farming rate, for example, can be improved with a researchable technology in the Farmstead. Select the Farmstead and look at its production panel on the bottom right. You will see several researchable technologies. Hover the cursor over them to see their costs and effects and click on the one you want to research.")
+		},
 		"IsDone": function()
 		{
 			return TriggerHelper.HasDealtWithTech(this.playerID, "gather_wicker_baskets") ||
-			       TriggerHelper.HasDealtWithTech(this.playerID, "gather_farming_plows");
+				TriggerHelper.HasDealtWithTech(this.playerID, "gather_farming_plows");
 		},
 		"OnResearchQueued": function(msg)
 		{
@@ -387,33 +409,42 @@ Trigger.prototype.tutorialSteps = [
 		}
 	},
 	{
-		"instructions": [
-			markForTranslation("We should start preparing to phase up into Town Phase, which will unlock many more units and buildings. Select the Civic Center and hover the cursor over the Town Phase icon to see what is still needed.\n"),
-			markForTranslation("We now have enough resources, but one structure is missing. Although this is an economic tutorial, it is nonetheless useful to be prepared for defense in case of attack, so let's build Barracks.\n"),
-			markForTranslation("Select four of your soldiers and ask them to build a Barracks: as before, start selecting the soldiers, click on the Barracks icon in the production panel and then lay down a foundation not far from your Civic Center where you want to build.")
-		],
+		"type": TUTORIAL_STEP_TYPE.INSTRUCTION,
+		"panelData": {
+			"text": markForTranslation("We should start preparing to phase up into Town Phase, which will unlock many more units and buildings. Select the Civic Center and hover the cursor over the Town Phase icon to see what is still needed.")
+		}
+	},
+	{
+		"type": TUTORIAL_STEP_TYPE.INSTRUCTION,
+		"panelData": {
+			"text":
+				markForTranslation("We now have enough resources, but one structure is missing. Although this is an economic tutorial, it is nonetheless useful to be prepared for defense in case of attack, so let's build a Barracks.\n") +
+				markForTranslation("Select four of your soldiers and ask them to build a Barracks: as before, start selecting the soldiers, click on the Barracks icon in the production panel and then lay down a foundation not far from your Civic Center where you want to build.")
+		},
 		"OnPlayerCommand": function(msg)
 		{
 			if (msg.cmd.type == "construct" && msg.cmd.template == "structures/athen/barracks")
 				this.NextStep();
 		}
-
 	},
 	{
-		"instructions": [
-			markForTranslation("Let's wait for the Barracks to be built. As this construction is lengthy, you can add two soldiers to build it faster. To do so, select your Civic Center and set up a rally point on the Barracks foundation by right-clicking on it (you should see a hammer icon). Then produce two more builders by clicking on the Hoplite icon twice.")
-		],
+		"type": TUTORIAL_STEP_TYPE.INSTRUCTION,
+		"panelData": {
+			"text": markForTranslation("Let's wait for the Barracks to be built. As this construction is lengthy, you can add two soldiers to build it faster. To do so, select your Civic Center and set up a rally point on the Barracks foundation by right-clicking on it (you should see a hammer icon). Then produce two more builders by clicking on the Hoplite icon twice.")
+		},
 		"OnStructureBuilt": function(msg)
 		{
 			if (TriggerHelper.EntityMatchesClassList(msg.building, "Barracks"))
 				this.NextStep();
-		},
+		}
 	},
 	{
-		"instructions": [
-			markForTranslation("You should now be able to research Town Phase. Select the Civic Center and click on the technology icon.\n"),
-			markForTranslation("If you still miss some resources (icon with red overlay), wait for them to be gathered by your workers.")
-		],
+		"type": TUTORIAL_STEP_TYPE.INSTRUCTION,
+		"panelData": {
+			"text":
+				markForTranslation("You should now be able to research Town Phase. Select the Civic Center and click on the technology icon.\n") +
+				markForTranslation("If you still miss some resources (icon with red overlay), wait for them to be gathered by your workers.")
+		},
 		"IsDone": function()
 		{
 			return TriggerHelper.HasDealtWithTech(this.playerID, "phase_town_athen");
@@ -425,19 +456,21 @@ Trigger.prototype.tutorialSteps = [
 		}
 	},
 	{
-		"instructions": [
-			markForTranslation("In later phases, you need usually stone and metal to build bigger structures and train better soldiers. Hence, while waiting for the research to be done, you will send half of your idle Citizen Soldiers (who have finished building the Barracks) to gather stone and the other half to gather metal.\n"),
-			markForTranslation("To do so, we could select three Citizen Soldiers and right-click on the stone quarry on the west of the Civic Center (the cursor changes when hovering the stone quarry while your soldiers are selected). However, these soldiers were gathering wood, so they may still carry some wood which would be lost when starting to gather another resource.")
-		],
+		"type": TUTORIAL_STEP_TYPE.INSTRUCTION,
+		"panelData": {
+			"text":
+				markForTranslation("In later phases, you need usually stone and metal to build bigger structures and train better soldiers. Hence, while waiting for the research to be done, you will send half of your idle Citizen Soldiers (who have finished building the Barracks) to gather stone and the other half to gather metal.\n") +
+				markForTranslation("To do so, we could select three Citizen Soldiers and right-click on the stone quarry on the west of the Civic Center (the cursor changes when hovering the stone quarry while your soldiers are selected). However, these soldiers were gathering wood, so they may still carry some wood which would be lost when starting to gather another resource.")
+		}
 	},
 	{
-		"instructions": [
-			{
-				"text": markForTranslation("Thus, we should order them to deposit their wood in the Civic Center along the way. To do so, we will hold %(hotkey)s while clicking to queue orders: select your soldiers, hold %(hotkey)s and right-click on the Civic Center to deposit their wood and then hold %(hotkey)s and right-click on the stone quarry to gather it.\n"),
-				"hotkey": "selection.queue"
-			},
-			markForTranslation("Perform a similar order queue with the remaining soldiers and the metal mine in the west.")
-		],
+		"type": TUTORIAL_STEP_TYPE.INSTRUCTION,
+		"panelData": {
+			"text":
+				markForTranslation("Thus, we should order them to deposit their wood in the Civic Center along the way. To do so, we will hold %(hotkey)s while clicking to queue orders: select your soldiers, hold %(hotkey)s and right-click on the Civic Center to deposit their wood and then hold %(hotkey)s and right-click on the stone quarry to gather it.\n") +
+				markForTranslation("Perform a similar order queue with the remaining soldiers and the metal mine in the west."),
+			"hotkeys": ["selection.queue"]
+		},
 		"Init": function()
 		{
 			this.stone = false;
@@ -448,7 +481,6 @@ Trigger.prototype.tutorialSteps = [
 			if (!this.stone || !this.metal)
 				return false;
 			return TriggerHelper.HasDealtWithTech(this.playerID, "phase_town_athen");
-
 		},
 		"OnPlayerCommand": function(msg)
 		{
@@ -469,9 +501,10 @@ Trigger.prototype.tutorialSteps = [
 		}
 	},
 	{
-		"instructions": [
-			markForTranslation("This is the end of the walkthrough. This should give you a good idea of the basics of setting up your economy.")
-		]
+		"type": TUTORIAL_STEP_TYPE.INSTRUCTION,
+		"panelData": {
+			"text": markForTranslation("This is the end of the walkthrough. This should give you a good idea of the basics of setting up your economy.")
+		}
 	}
 ];