Addition of the Skip Feature in the Source Academy Game

rsbuild.config.ts

@@ -23,7 +23,7 @@ export default defineConfig({
     })
   ],
   server: {
-    port: 8000
+    port: 8080
   },
   tools: {
     // TODO: See if still needed

src/features/game/dialogue/GameDialogueGenerator.ts

@@ -58,4 +58,12 @@ export default class DialogueGenerator {
     this.currPart = goto;
     this.currLineNum = 0;
   }
+
+  public peekNextLine(): DialogueLine | null {
+    const lines = this.dialogueContent.get(this.currPart);
+    if (!lines || !lines[this.currLineNum]) {
+      return null;
+    }
+    return lines[this.currLineNum];
+  }
 }

src/features/game/dialogue/GameDialogueManager.ts

@@ -1,4 +1,5 @@
 import SoundAssets from '../assets/SoundAssets';
+import { screenSize } from '../commons/CommonConstants';
 import { ItemId } from '../commons/CommonTypes';
 import { promptWithChoices } from '../effects/Prompt';
 import { keyboardShortcuts } from '../input/GameInputConstants';
@@ -25,6 +26,12 @@ export default class DialogueManager {
     GameGlobalAPI.getInstance().getGameManager()
   );
 
+  private skipButton?: Phaser.GameObjects.Image;
+  private isSkipping: boolean = false;
+  private nextLineResolve?: (value: void | PromiseLike<void>) => void;
+  private isPrompting: boolean = false;
+  private isDialoguePromptActive: boolean = false;
+
   /**
    * @param dialogueId the dialogue Id of the dialogue you want to play
    *
@@ -38,39 +45,191 @@ export default class DialogueManager {
     this.dialogueGenerator = new DialogueGenerator(dialogue.content);
     this.speakerRenderer = new DialogueSpeakerRenderer();
 
-    GameGlobalAPI.getInstance().addToLayer(
-      Layer.Dialogue,
-      this.dialogueRenderer.getDialogueContainer()
-    );
+    const dialogueContainer = this.dialogueRenderer.getDialogueContainer();
+    this.createSkipButton(dialogueContainer);
+
+    GameGlobalAPI.getInstance().addToLayer(Layer.Dialogue, dialogueContainer);
 
     GameGlobalAPI.getInstance().fadeInLayer(Layer.Dialogue);
     await new Promise(resolve => this.playWholeDialogue(resolve as () => void));
+
+    if (this.skipButton) {
+      this.skipButton.destroy();
+      this.skipButton = undefined;
+    }
+
     this.getDialogueRenderer().destroy();
     this.getSpeakerRenderer().changeSpeakerTo(null);
   }
 
   private async playWholeDialogue(resolve: () => void) {
     await this.showNextLine(resolve);
     // add keyboard listener for dialogue box
+    this.nextLineResolve = () => this.showNextLine(resolve);
+
     this.getInputManager().registerKeyboardListener(keyboardShortcuts.Next, 'up', async () => {
       // show the next line if dashboard or escape menu are not displayed
       if (
         !GameGlobalAPI.getInstance().getGameManager().getPhaseManager().isCurrentPhaseTerminal()
       ) {
-        await this.showNextLine(resolve);
+        if (!this.isSkipping && !this.isPrompting) {
+          await this.showNextLine(resolve);
+        }
       }
     });
+
+    this.getInputManager().registerKeyboardListener(
+      keyboardShortcuts.SkipDialogue,
+      'up',
+      async () => {
+        await this.triggerSkip();
+      }
+    );
+
+    // Dialogue Box Mouse Click
     this.getDialogueRenderer()
       .getDialogueBox()
       .on(Phaser.Input.Events.GAMEOBJECT_POINTER_UP, async () => {
-        await this.showNextLine(resolve);
+        if (!this.isSkipping && !this.isPrompting) {
+          await this.showNextLine(resolve);
+        }
       });
   }
 
-  public async showNextLine(resolve: () => void) {
+  private async triggerSkip() {
+    if (this.isPrompting || this.isSkipping || this.isDialoguePromptActive) return;
+
+    const gameManager = GameGlobalAPI.getInstance().getGameManager();
+    const phaseManager = gameManager.getPhaseManager();
+
+    if (phaseManager.isCurrentPhaseTerminal()) return;
+
+    const settings = SourceAcademyGame.getInstance().getSaveManager().getSettings();
+    const requiresConfirm = settings.skipConfirm !== false;
+
+    if (requiresConfirm) {
+      this.isPrompting = true;
+
+      if (this.skipButton) {
+        this.skipButton.setVisible(false);
+        this.skipButton.disableInteractive();
+      }
+
+      this.getInputManager().enableKeyboardInput(false);
+
+      const dialogueBox = this.getDialogueRenderer().getDialogueBox();
+      GameGlobalAPI.getInstance().enableSprite(dialogueBox, false);
+
+      const response = await promptWithChoices(
+        gameManager,
+        'Skip remaining dialogue?',
+        ['Yes', 'No'],
+        Layer.Dialogue
+      );
+
+      this.getInputManager().enableKeyboardInput(true);
+      GameGlobalAPI.getInstance().enableSprite(dialogueBox, true);
+
+      if (this.skipButton) {
+        this.skipButton.setVisible(true);
+        this.skipButton.setInteractive({ useHandCursor: true });
+      }
+
+      this.isPrompting = false;
+
+      if (response === 0) {
+        await this.skipRemainingDialogue();
+      }
+    } else {
+      await this.skipRemainingDialogue();
+    }
+  }
+
+  private createSkipButton(dialogueContainer: Phaser.GameObjects.Container) {
+    const gameManager = GameGlobalAPI.getInstance().getGameManager();
+
+    this.skipButton = new Phaser.GameObjects.Image(
+      gameManager,
+      screenSize.x - 62.5,
+      screenSize.y * 0.73,
+      'skip-icon'
+    ).setInteractive({ useHandCursor: true });
+
+    this.skipButton.setDisplaySize(45, 45);
+
+    this.skipButton.on(Phaser.Input.Events.GAMEOBJECT_POINTER_UP, async () => {
+      await this.triggerSkip();
+    });
+
+    dialogueContainer.add(this.skipButton);
+  }
+
+  /**
+   * Skips all remaining dialogue until a prompt (choice) is encountered.
+   * Does not skip prompts that require user input.
+   */
+  private async skipRemainingDialogue() {
+    if (this.isSkipping) return; // Prevent multiple skip calls
+    this.isSkipping = true;
+
+    // Hide and disable button while skipping
+    if (this.skipButton) {
+      this.skipButton.setVisible(false);
+      this.skipButton.disableInteractive();
+    }
+
+    // Plays the sound effect exactly once when skip starts
     GameGlobalAPI.getInstance().playSound(SoundAssets.dialogueAdvance.key);
+
+    try {
+      // Keep advancing the dialogue until we hit a stopping point
+      while (this.isSkipping) {
+        if (this.dialogueRenderer) {
+          this.dialogueRenderer.finishTypewriting();
+        }
+
+        const nextLine = this.getDialogueGenerator().peekNextLine();
+
+        if (nextLine && nextLine.prompt) {
+          this.isSkipping = false;
+          break;
+        }
+
+        if (this.nextLineResolve) {
+          await this.nextLineResolve();
+        }
+
+        if (!nextLine || !nextLine.line) {
+          this.isSkipping = false;
+          break;
+        }
+
+        // Small delay to prevent freezing
+        await new Promise(resolve => setTimeout(resolve, 50));
+      }
+    } finally {
+      this.isSkipping = false;
+
+      if (
+        this.skipButton &&
+        !this.isDialoguePromptActive &&
+        this.getDialogueGenerator().peekNextLine() !== null
+      ) {
+        this.skipButton.setVisible(true);
+        this.skipButton.setInteractive({ useHandCursor: true });
+      }
+    }
+  }
+
+  public async showNextLine(resolve: () => void) {
+    // Only play sound if we are not skipping, to avoid spamming sounds when skipping
+    if (!this.isSkipping) {
+      GameGlobalAPI.getInstance().playSound(SoundAssets.dialogueAdvance.key);
+    }
+
     const { line, speakerDetail, actionIds, prompt } =
       await this.getDialogueGenerator().generateNextLine();
+
     const lineWithQuizScores = this.makeLineWithQuizScores(line);
     const lineWithName = lineWithQuizScores.replace('{name}', this.getUsername());
     this.getDialogueRenderer().changeText(lineWithName);
@@ -84,25 +243,44 @@ export default class DialogueManager {
     this.getInputManager().enableKeyboardInput(false);
 
     if (prompt) {
-      // disable keyboard input to prevent continue dialogue
+      // Prevent skipping, hide the skip button and prevent the usage of "s" keyboard shortcut
+      this.isDialoguePromptActive = true;
+      if (this.skipButton) this.skipButton.setVisible(false);
+
       this.getInputManager().enableKeyboardInput(false);
       const response = await promptWithChoices(
         GameGlobalAPI.getInstance().getGameManager(),
         prompt.promptTitle,
         prompt.choices.map(choice => choice[0])
       );
-
       this.getInputManager().enableKeyboardInput(true);
       this.getDialogueGenerator().updateCurrPart(prompt.choices[response][1]);
+
+      if (this.skipButton) this.skipButton.setVisible(true);
+      this.isDialoguePromptActive = false;
     }
+
     await GameGlobalAPI.getInstance().processGameActionsInSamePhase(actionIds);
     GameGlobalAPI.getInstance().enableSprite(this.getDialogueRenderer().getDialogueBox(), true);
     this.getInputManager().enableKeyboardInput(true);
 
     if (!line) {
-      // clear keyboard listeners when dialogue ends
-      this.getInputManager().clearKeyboardListeners([keyboardShortcuts.Next]);
+      //Permanently hide the skip button when there is no more dialogue
+      if (this.skipButton) {
+        this.skipButton.setVisible(false);
+      }
+
+      // Prevents skipping by using the "s" keyboard shortcut
+      this.getInputManager().clearKeyboardListeners([
+        keyboardShortcuts.Next,
+        keyboardShortcuts.SkipDialogue
+      ]);
       resolve();
+    } else if (!this.isSkipping && !this.isDialoguePromptActive) {
+      if (this.skipButton) {
+        this.skipButton.setVisible(true);
+        this.skipButton.setInteractive({ useHandCursor: true });
+      }
     }
   }
 

src/features/game/dialogue/GameDialogueRenderer.ts

@@ -61,7 +61,11 @@ class DialogueRenderer {
    */
   public destroy() {
     const gameManager = GameGlobalAPI.getInstance().getGameManager();
-    this.typewriter.clearTyping();
+
+    if (this.typewriter && this.typewriter.clearTyping) {
+      this.typewriter.clearTyping();
+    }
+
     this.blinkingDiamond.clearBlink();
     this.getDialogueBox().off(Phaser.Input.Events.GAMEOBJECT_POINTER_UP);
     fadeAndDestroy(gameManager, this.getDialogueContainer());
@@ -91,6 +95,12 @@ class DialogueRenderer {
   public changeText(message: string) {
     this.typewriter.changeLine(message);
   }
+
+  public finishTypewriting() {
+    if (this.typewriter && this.typewriter.finishTyping) {
+      this.typewriter.finishTyping();
+    }
+  }
 }
 
 export default DialogueRenderer;

src/features/game/effects/Prompt.ts

@@ -46,7 +46,8 @@ const promptOptStyle: BitmapFontStyle = {
 export async function promptWithChoices(
   scene: Phaser.Scene,
   text: string,
-  choices: string[]
+  choices: string[],
+  targetLayer: Layer = Layer.UI
 ): Promise<number> {
   const promptContainer = new Phaser.GameObjects.Container(scene, 0, 0);
 
@@ -87,7 +88,10 @@ export async function promptWithChoices(
     ySpacing: PromptConstants.yInterval
   });
 
-  GameGlobalAPI.getInstance().addToLayer(Layer.UI, promptContainer);
+  GameGlobalAPI.getInstance().addToLayer(targetLayer, promptContainer);
+
+  //Used to prevent spamming the confirm for the skip button using shortcut key
+  let isResolved = false;
 
   const activatePromptContainer: Promise<number> = new Promise(resolve => {
     promptContainer.add(
@@ -98,7 +102,17 @@ export async function promptWithChoices(
           textConfig: PromptConstants.textConfig,
           bitMapTextStyle: promptOptStyle,
           onUp: () => {
-            promptContainer.destroy();
+            //Prevents the confirm prompt from showing up multiple times if someone tries to spam clicks it
+            if (isResolved) return;
+
+            const phaseManager = GameGlobalAPI.getInstance().getGameManager().getPhaseManager();
+
+            if (phaseManager.isCurrentPhaseTerminal()) {
+              return;
+            }
+
+            isResolved = true;
+
             resolve(index);
           }
         }).setPosition(

src/features/game/effects/Typewriter.ts

@@ -53,7 +53,16 @@ export function Typewriter(
     }, typeWriterInterval);
   };
 
-  return { container: textSprite, changeLine, clearTyping };
+  const finishTyping = () => {
+    clearTyping();
+
+    if (line) {
+      textSprite.text = line;
+      charPointer = line.length;
+    }
+  };
+
+  return { container: textSprite, changeLine, clearTyping, finishTyping };
 }
 
 export default Typewriter;

src/features/game/escape/GameEscapeConstants.ts

@@ -23,11 +23,12 @@ export const optTextStyle: BitmapFontStyle = {
 const EscapeConstants = {
   button: { y: screenSize.y * 0.15 },
   escapeOptTextConfig: { x: 0, y: 0, oriX: 0.37, oriY: 0.75 },
-  settings: { yOffset: -screenCenter.y * 0.1, ySpace: screenSize.y * 0.3 },
+  settings: { yOffset: -screenCenter.y * 0.1, ySpace: screenSize.y * 0.2 },
   settingsTextConfig: { x: screenSize.x * 0.38, y: -screenCenter.y * 0.1, oriX: 0.0, oriY: 0.5 },
   radioButtons: { xSpace: screenSize.x * 0.2 },
   radioChoiceTextConfig: { x: 0, y: -45, oriX: 0.5, oriY: 0.25 },
-  volOpt: { x: screenSize.x * 0.05 }
+  volOpt: { x: screenSize.x * 0.05 },
+  skipConfirmOpts: ['ON', 'OFF']
 };
 
 export default EscapeConstants;