mirrors/0ad
1
0
Fork 2
mirror of https://gitea.wildfiregames.com/0ad/0ad.git synced 2026-07-25 12:52:36 +00:00
Code Issues Packages Projects Releases Wiki Activity

Allow defining tutorial steps more compactly

Browse Source 
This allows the trigger scripts to combine consecutive tutorial steps
that only differ in the `panelData.text` property into a single one that
instead defines a `panelData.texts` array.
This commit is contained in:
Vantha
2026-03-08 18:07:56 +01:00
committed by Vantha
parent 7e77065c56
commit 2522c305dd
5 changed files with 89 additions and 130 deletions
Download Patch File Download Diff File Expand all files Collapse all files
binaries/data/mods/public/gui/session/tutorial/TutorialManager.js
+45 -5
View File
@@ -14,15 +14,17 @@ class TutorialManager
parentObj = Engine.GetGUIObjectByName("tutorialPanels");
panels = new Map();
pendingSteps = [];
activePanel;
isFinished = false;
closePageCallback;
constructor(closePageCallback)
{
this.closePageCallback = closePageCallback;
this.panels.set(TUTORIAL_STEP_TYPE.INSTRUCTION, new InstructionPanel(this.closePage.bind(this)));
this.panels.set(TUTORIAL_STEP_TYPE.INFO, new InfoPanel(this.closePage.bind(this)));
this.panels.set(TUTORIAL_STEP_TYPE.INSTRUCTION, new InstructionPanel(this.continue.bind(this)));
this.panels.set(TUTORIAL_STEP_TYPE.INFO, new InfoPanel(this.continue.bind(this)));
this.parentObj.hidden = true;
}
@@ -34,7 +36,34 @@ class TutorialManager
handleNotification(notification)
{
if (notification.step)
this.displayStep(notification.step.type, notification.step.panelData);
{
// The step might be defined in a way that requires us to split it up into several
// before displaying them.
while (this.pendingSteps.length)
this.displayNextPendingStep();
// To minimise duplication in the trigger script, consecutive steps that only
// differ in the 'text' property can be combined into a single one with an array
// 'texts'. Here we need revert this again by splitting it back into different
// steps before passing them to the panels.
if (Array.isArray(notification.step.panelData.texts))
{
const { texts, ...sharedData } = notification.step.panelData;
this.pendingSteps = texts.map((text, i) => ([
notification.step.type, {
...sharedData, text,
// Note: These could be ignored by some panels.
"appendable": sharedData.appendable || i === 0,
"appendToPrevious": sharedData.appendToPrevious || i > 0
}
]));
this.displayNextPendingStep();
}
else
this.displayStep(notification.step.type, notification.step.panelData);
}
if (notification.warning)
this.displayWarning(notification.warning);
}
@@ -44,9 +73,15 @@ class TutorialManager
this.activePanel.displayWarning(translate(warning));
}
displayNextPendingStep()
{
this.displayStep(...this.pendingSteps.shift());
}
displayStep(stepType, panelData)
{
this.parentObj.hidden = false;
this.isFinished = panelData.isLast;
translateObjectKeys(panelData, ["text", "title"]);
if (panelData.hotkeys)
@@ -69,8 +104,13 @@ class TutorialManager
this.activePanel.displayStep(panelData);
}
closePage()
continue()
{
this.closePageCallback({ [Engine.openRequest]: endGame(true) });
if (this.isFinished)
this.closePageCallback({ [Engine.openRequest]: endGame(true) });
else if (this.pendingSteps.length)
this.displayNextPendingStep();
else
Engine.PostNetworkCommand({ "type": "dialog-answer", "tutorial": "continue" });
}
}
binaries/data/mods/public/gui/session/tutorial/TutorialPanel.js
+2 -10
View File
@@ -11,9 +11,7 @@ class TutorialPanel
hint;
button;
closePage;
constructor(name, closePage)
constructor(name, continueCallback)
{
this.panel = Engine.GetGUIObjectByName(name);
this.text = Engine.GetGUIObjectByName(name + "Text");
@@ -21,12 +19,7 @@ class TutorialPanel
this.button = Engine.GetGUIObjectByName(name + "Button");
this.button.caption = this.ButtonCaptions.Continue;
this.button.onPress = () =>
{
Engine.PostNetworkCommand({ "type": "dialog-answer", "tutorial": "continue" });
};
this.closePage = closePage;
this.button.onPress = continueCallback;
}
setVisible(visible)
@@ -50,7 +43,6 @@ class TutorialPanel
{
this.hint.caption = this.HintCaptions.Quit;
this.button.caption = this.ButtonCaptions.Quit;
this.button.onPress = this.closePage;
}
else
this.hint.caption = this.HintCaptions.Continue;
binaries/data/mods/public/gui/session/tutorial/panels/InfoPanel.js
+2 -2
View File
@@ -12,9 +12,9 @@ class InfoPanel extends TutorialPanel
paragraphs = [];
appendable = true;
constructor(closePage)
constructor(continueCallback)
{
super("infoPanel", closePage);
super("infoPanel", continueCallback);
}
displayStep(step)
binaries/data/mods/public/gui/session/tutorial/panels/InstructionPanel.js
+2 -2
View File
@@ -6,9 +6,9 @@ class InstructionPanel extends TutorialPanel
{
instructions = [];
constructor(closePage)
constructor(continueCallback)
{
super("instructionPanel", closePage);
super("instructionPanel", continueCallback);
}
displayStep(step)
binaries/data/mods/public/maps/tutorials/starting_economy_walkthrough.js
+38 -111
View File
@@ -10,30 +10,13 @@ Trigger.prototype.tutorialSteps = [
"panelData": {
"appendable": "true",
"title": markForTranslation("Basic Controls"),
"text": markForTranslation("You can toggle between fullscreen and windowed mode using %(hotkey)s."),
"hotkeys": ["togglefullscreen"]
}
},
{
"type": TUTORIAL_STEP_TYPE.INFO,
"panelData": {
"appendToPrevious": "true",
"text": markForTranslation("You can change the level of zoom using the mouse wheel and the camera view using any of your keyboard's arrow keys.")
}
},
{
"type": TUTORIAL_STEP_TYPE.INFO,
"panelData": {
"appendToPrevious": "true",
"text": markForTranslation("Adjust the game window to your preferences.")
}
},
{
"type": TUTORIAL_STEP_TYPE.INFO,
"panelData": {
"appendToPrevious": "true",
"text": markForTranslation("You may also toggle between showing and hiding this tutorial panel at any moment using %(hotkey)s."),
"hotkeys": ["session.gui.tutorial.toggle"]
"texts": [
markForTranslation("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."),
markForTranslation("Adjust the game window to your preferences."),
markForTranslation("You may also toggle between showing and hiding this tutorial panel at any moment using %(hotkey2)s.")
],
"hotkeys": ["togglefullscreen", "session.gui.tutorial.toggle"]
}
},
{
@@ -45,16 +28,12 @@ Trigger.prototype.tutorialSteps = [
{
"type": TUTORIAL_STEP_TYPE.INFO,
"panelData": {
"appendable": "true",
"appendable": true,
"title": markForTranslation("Production Panel"),
"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.")
}
},
{
"type": TUTORIAL_STEP_TYPE.INFO,
"panelData": {
"appendToPrevious": "true",
"text": 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.")
"texts": [
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."),
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.")
]
}
},
{
@@ -73,39 +52,15 @@ Trigger.prototype.tutorialSteps = [
{
"type": TUTORIAL_STEP_TYPE.INFO,
"panelData": {
"appendable": "true",
"title": markForTranslation("Making Selections"),
"text": markForTranslation("There are primarily three ways to select units:")
}
},
{
"type": TUTORIAL_STEP_TYPE.INFO,
"panelData": {
"appendToPrevious": "true",
"text": markForTranslation("1) Hold the left mouse button and drag a selection rectangle that encloses the units you want to select.")
}
},
{
"type": TUTORIAL_STEP_TYPE.INFO,
"panelData": {
"appendToPrevious": "true",
"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)."),
"hotkeys": ["selection.add"]
}
},
{
"type": TUTORIAL_STEP_TYPE.INFO,
"panelData": {
"appendToPrevious": "true",
"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."),
"hotkeys": ["selection.offscreen"]
}
},
{
"type": TUTORIAL_STEP_TYPE.INFO,
"panelData": {
"appendToPrevious": "true",
"text": markForTranslation("You can click on an empty space on the map to reset the selection.")
"texts": [
markForTranslation("There are primarily three ways to select units:"),
markForTranslation("1) Hold the left mouse button and drag a selection rectangle that encloses the units you want to select."),
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)."),
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."),
markForTranslation("You can click on an empty space on the map to reset the selection.")
],
"hotkeys": ["selection.add", "selection.offscreen"]
}
},
{
@@ -179,14 +134,10 @@ Trigger.prototype.tutorialSteps = [
"type": TUTORIAL_STEP_TYPE.INFO,
"panelData": {
"appendToPrevious": true,
"text": markForTranslation("Rally points are indicated by a small flag at the end of the blue line.")
}
},
{
"type": TUTORIAL_STEP_TYPE.INFO,
"panelData": {
"appendToPrevious": true,
"text": markForTranslation("Now that the rally point is set, we can produce additional units and they will do their assigned task automatically.")
"texts": [
markForTranslation("Rally points are indicated by a small flag at the end of the blue line."),
markForTranslation("Now that the rally point is set, we can produce additional units and they will do their assigned task automatically.")
]
}
},
{
@@ -215,20 +166,10 @@ Trigger.prototype.tutorialSteps = [
{
"type": TUTORIAL_STEP_TYPE.INFO,
"panelData": {
"appendable": true,
"text": 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."),
"showContinueButton": true
},
"OnTrainingFinished": function(msg)
{
this.trainingFinished = true;
}
},
{
"type": TUTORIAL_STEP_TYPE.INFO,
"panelData": {
"appendToPrevious": true,
"text": 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."),
"texts": [
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."),
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.")
],
"showContinueButton": true
},
"OnTrainingFinished": function(msg)
@@ -253,16 +194,11 @@ Trigger.prototype.tutorialSteps = [
{
"type": TUTORIAL_STEP_TYPE.INFO,
"panelData": {
"appendable": true,
"title": markForTranslation("Storehouse"),
"text": markForTranslation("The newly trained units automatically go to the trees and start gathering wood.")
}
},
{
"type": TUTORIAL_STEP_TYPE.INFO,
"panelData": {
"appendToPrevious": true,
"text": 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.")
"texts": [
markForTranslation("The newly trained units automatically go to the trees and start gathering wood."),
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.")
]
}
},
{
@@ -391,20 +327,11 @@ Trigger.prototype.tutorialSteps = [
{
"type": TUTORIAL_STEP_TYPE.INFO,
"panelData": {
"appendable": true,
"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.")
},
"OnOwnershipChanged": function(msg)
{
if (this.houseGoal.has(+msg.entity))
this.houseGoal.delete(+msg.entity);
}
},
{
"type": TUTORIAL_STEP_TYPE.INFO,
"panelData": {
"appendToPrevious": true,
"text": markForTranslation("But to minimize the distance between a farm and its corresponding food dropsite, we will first build a Farmstead.")
"texts": [
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."),
markForTranslation("But to minimize the distance between a farm and its corresponding food dropsite, we will first build a Farmstead.")
],
"showContinueButton": true
},
"OnOwnershipChanged": function(msg)
{
@@ -599,7 +526,7 @@ Trigger.prototype.tutorialSteps = [
"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("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.") +
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.")
}
},