Only show the last instruction in the tutorial

The idea is to add different types of panels to the tutorial in the
future. And the only texts that players might read multiple times are
tips or explanations, which the plan is to display on an entirely
separate panel anyway.
This commit is contained in:
Vantha 2026-03-03 16:55:32 +01:00 committed by Vantha
parent c2c8f5bdf2
commit 6dd8139b43
3 changed files with 13 additions and 13 deletions

View file

@ -222,15 +222,14 @@
text_valign="center"
/>
<style name="TutorialPanel"
buffer_zone="8"
<style name="TutorialInstructionText"
buffer_zone="18"
font="sans-bold-14"
scrollbar="true"
scrollbar_style="ModernScrollBar"
scroll_bottom="true"
textcolor="white"
text_align="left"
text_valign="top"
text_align="center"
text_valign="center"
sprite="ModernDarkBox"
sprite_overlay="ModernDarkBoxGoldBorder"
/>

View file

@ -32,8 +32,9 @@ class InstructionPanel
displayStep(panelData)
{
this.text.caption = this.instructions.concat(setStringTags(panelData.text, this.NewInstructionTags)).join("\n");
this.instructions.push(panelData.text);
this.text.caption = panelData.text;
const panelHeight = Math.min(this.MaxPanelHeight, this.text.size.top + this.text.getTextSize().height - this.text.size.bottom);
this.panel.size.bottom = this.panel.getComputedSize().top + panelHeight;
if (panelData.showContinueButton)
{
@ -70,3 +71,5 @@ InstructionPanel.prototype.HintCaptions = {
"Instruction": translate("Follow the instructions."),
"Quit": translate("Click to quit this tutorial.")
};
InstructionPanel.prototype.MaxPanelHeight = 185;

View file

@ -1,10 +1,8 @@
<?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="instructionPanelHint" type="text" style="ModernLeftLabelText" size="10 100%-42 100%-20 100%-12"/>
<object name="instructionPanelContinueButton" type="button" style="ModernButtonRed" size="100%-160 100%-42 100%-20 100%-12">
<object name="instructionPanel" type="image" sprite="color:0 0 0 125" size="50%-310 80 50%+310 210">
<object name="instructionPanelText" type="text" style="TutorialInstructionText" size="10 10 100%-10 100%-52"/>
<object name="instructionPanelHint" type="text" style="ModernLeftLabelText" size="25 100%-46 100%-190 100%-6"/>
<object name="instructionPanelContinueButton" type="button" style="ModernButtonRed" size="100%-170 100%-40 100%-30 100%-12">
<translatableAttribute id="caption">Continue</translatableAttribute>
</object>
</object>