Add hotloading support to the tutorial UI

This commit is contained in:
Vantha 2026-03-11 16:32:30 +01:00 committed by Vantha
parent 2522c305dd
commit 05d434830f
2 changed files with 38 additions and 7 deletions

View file

@ -345,7 +345,7 @@ async function init(initData, hotloadData)
g_NetworkStatusOverlay = new NetworkStatusOverlay(closePageCallback); g_NetworkStatusOverlay = new NetworkStatusOverlay(closePageCallback);
g_QuitConfirmationDefeat = new QuitConfirmationDefeat(closePageCallback); g_QuitConfirmationDefeat = new QuitConfirmationDefeat(closePageCallback);
g_QuitConfirmationReplay = new QuitConfirmationReplay(closePageCallback); g_QuitConfirmationReplay = new QuitConfirmationReplay(closePageCallback);
g_TutorialManager = new TutorialManager(closePageCallback); g_TutorialManager = new TutorialManager(closePageCallback, hotloadData?.tutorial);
})]); })]);
// TODO: use event instead // TODO: use event instead
@ -610,6 +610,7 @@ function getHotloadData()
"selection": g_Selection.selected, "selection": g_Selection.selected,
"playerAssignments": g_PlayerAssignments, "playerAssignments": g_PlayerAssignments,
"player": g_Players, "player": g_Players,
"tutorial": g_TutorialManager.getHotloadData()
}; };
} }

View file

@ -13,24 +13,38 @@ class TutorialManager
{ {
parentObj = Engine.GetGUIObjectByName("tutorialPanels"); parentObj = Engine.GetGUIObjectByName("tutorialPanels");
panels = new Map(); panels = new Map([
pendingSteps = []; [TUTORIAL_STEP_TYPE.INSTRUCTION, new InstructionPanel(this.continue.bind(this))],
[TUTORIAL_STEP_TYPE.INFO, new InfoPanel(this.continue.bind(this))]
]);
displayedSteps = []; // All steps that have already been displayed, in the form of [stepType, panelData]
pendingSteps = []; // All received steps that have yet to be displayed, in the form of [stepType, panelData]
activePanel; activePanel;
currentWarning = "";
isFinished = false; isFinished = false;
closePageCallback; closePageCallback;
constructor(closePageCallback) constructor(closePageCallback, hotloadData)
{ {
this.closePageCallback = closePageCallback; this.closePageCallback = closePageCallback;
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; this.parentObj.hidden = true;
if (hotloadData)
{
for (const [stepType, panelData] of hotloadData.displayedSteps)
this.displayStep(stepType, panelData);
this.pendingSteps = hotloadData.pendingSteps;
if (hotloadData.warning)
this.displayWarning(hotloadData.warning);
}
} }
toggleVisibility() toggleVisibility()
{ {
this.parentObj.hidden = !this.activePanel || !this.parentObj.hidden; this.parentObj.hidden = !this.displayedSteps.length || !this.parentObj.hidden;
} }
handleNotification(notification) handleNotification(notification)
@ -70,6 +84,7 @@ class TutorialManager
displayWarning(warning) displayWarning(warning)
{ {
this.currentWarning = warning;
this.activePanel.displayWarning(translate(warning)); this.activePanel.displayWarning(translate(warning));
} }
@ -80,6 +95,9 @@ class TutorialManager
displayStep(stepType, panelData) displayStep(stepType, panelData)
{ {
if (this.isFinished)
return;
this.parentObj.hidden = false; this.parentObj.hidden = false;
this.isFinished = panelData.isLast; this.isFinished = panelData.isLast;
@ -102,6 +120,9 @@ class TutorialManager
this.panels.forEach((panel, type) => panel.setVisible(type == stepType)); this.panels.forEach((panel, type) => panel.setVisible(type == stepType));
this.activePanel = this.panels.get(stepType); this.activePanel = this.panels.get(stepType);
this.activePanel.displayStep(panelData); this.activePanel.displayStep(panelData);
this.displayedSteps.push([stepType, panelData]);
this.currentWarning = "";
} }
continue() continue()
@ -113,4 +134,13 @@ class TutorialManager
else else
Engine.PostNetworkCommand({ "type": "dialog-answer", "tutorial": "continue" }); Engine.PostNetworkCommand({ "type": "dialog-answer", "tutorial": "continue" });
} }
getHotloadData()
{
return {
"displayedSteps": this.displayedSteps,
"pendingSteps": this.pendingSteps,
"warning": this.currentWarning
};
}
} }