Game: Add additional keyboard inputs for interactions with the game

src/features/game/dialogue/GameDialogueManager.ts

@@ -1,6 +1,8 @@
 import SoundAssets from '../assets/SoundAssets';
 import { ItemId } from '../commons/CommonTypes';
 import { promptWithChoices } from '../effects/Prompt';
+import { keyboardShortcuts } from '../input/GameInputConstants';
+import GameInputManager from '../input/GameInputManager';
 import { Layer } from '../layer/GameLayerTypes';
 import GameGlobalAPI from '../scenes/gameManager/GameGlobalAPI';
 import SourceAcademyGame from '../SourceAcademyGame';
@@ -14,10 +16,14 @@ import DialogueSpeakerRenderer from './GameDialogueSpeakerRenderer';
  * It displays the lines, speakers, and performs actions
  * whenever players click on the dialogue box
  */
+
 export default class DialogueManager {
   private speakerRenderer?: DialogueSpeakerRenderer;
   private dialogueRenderer?: DialogueRenderer;
   private dialogueGenerator?: DialogueGenerator;
+  private gameInputManager?: GameInputManager = new GameInputManager(
+    GameGlobalAPI.getInstance().getGameManager()
+  );
 
   /**
    * @param dialogueId the dialogue Id of the dialogue you want to play
@@ -44,9 +50,20 @@ export default class DialogueManager {
 
   private async playWholeDialogue(resolve: () => void) {
     await this.showNextLine(resolve);
+    // add keyboard listener for dialogue box
+    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);
+      }
+    });
     this.getDialogueRenderer()
       .getDialogueBox()
-      .on(Phaser.Input.Events.GAMEOBJECT_POINTER_UP, async () => await this.showNextLine(resolve));
+      .on(Phaser.Input.Events.GAMEOBJECT_POINTER_UP, async () => {
+        await this.showNextLine(resolve);
+      });
   }
 
   private async showNextLine(resolve: () => void) {
@@ -62,23 +79,33 @@ export default class DialogueManager {
 
     // Disable interactions while processing actions
     GameGlobalAPI.getInstance().enableSprite(this.getDialogueRenderer().getDialogueBox(), false);
+
     if (prompt) {
+      // disable keyboard input to prevent continue dialogue
+      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]);
     }
     await GameGlobalAPI.getInstance().processGameActionsInSamePhase(actionIds);
     GameGlobalAPI.getInstance().enableSprite(this.getDialogueRenderer().getDialogueBox(), true);
 
-    if (!line) resolve();
+    if (!line) {
+      // clear keyboard listeners when dialogue ends
+      this.getInputManager().clearKeyboardListeners([keyboardShortcuts.Next]);
+      resolve();
+    }
   }
 
   private getDialogueGenerator = () => this.dialogueGenerator as DialogueGenerator;
   private getDialogueRenderer = () => this.dialogueRenderer as DialogueRenderer;
   private getSpeakerRenderer = () => this.speakerRenderer as DialogueSpeakerRenderer;
+  private getInputManager = () => this.gameInputManager as GameInputManager;
 
   public getUsername = () => SourceAcademyGame.getInstance().getAccountInfo().name;
 }

src/features/game/effects/Notification.ts

@@ -1,11 +1,12 @@
-import { Layer } from 'src/features/game/layer/GameLayerTypes';
-
 import FontAssets from '../assets/FontAssets';
 import SoundAssets from '../assets/SoundAssets';
 import { Constants, screenCenter } from '../commons/CommonConstants';
 import { BitmapFontStyle, IBaseScene } from '../commons/CommonTypes';
 import dialogueConstants from '../dialogue/GameDialogueConstants';
 import DialogueRenderer from '../dialogue/GameDialogueRenderer';
+import { keyboardShortcuts } from '../input/GameInputConstants';
+import GameInputManager from '../input/GameInputManager';
+import { Layer } from '../layer/GameLayerTypes';
 import SourceAcademyGame from '../SourceAcademyGame';
 import { sleep } from '../utils/GameUtils';
 import { createBitmapText } from '../utils/TextUtils';
@@ -47,11 +48,24 @@ export async function displayNotification(scene: IBaseScene, message: string): P
   // Wait for fade in to finish
   await sleep(Constants.fadeDuration * 2);
 
+  const gameInputManager = new GameInputManager(scene);
+
+  const dissolveNotification = () => {
+    SourceAcademyGame.getInstance().getSoundManager().playSound(SoundAssets.notifExit.key);
+    fadeAndDestroy(scene, notifText, { fadeDuration: Constants.fadeDuration / 4 });
+    dialogueRenderer.destroy();
+  };
+
   const showNotification = new Promise<void>(resolve => {
+    // using the same binding as dialogue shortcut
+    gameInputManager.registerKeyboardListener(keyboardShortcuts.Notif, 'up', async () => {
+      gameInputManager.clearKeyboardListeners([keyboardShortcuts.Notif]);
+      dissolveNotification();
+      resolve();
+    });
+
     dialogueRenderer.getDialogueBox().on(Phaser.Input.Events.GAMEOBJECT_POINTER_UP, () => {
-      SourceAcademyGame.getInstance().getSoundManager().playSound(SoundAssets.notifExit.key);
-      fadeAndDestroy(scene, notifText, { fadeDuration: Constants.fadeDuration / 4 });
-      dialogueRenderer.destroy();
+      dissolveNotification();
       resolve();
     });
   });

src/features/game/input/GameInputConstants.ts

@@ -0,0 +1,15 @@
+export const keyboardShortcuts = {
+  Dashboard: Phaser.Input.Keyboard.KeyCodes.TAB,
+  Menu: Phaser.Input.Keyboard.KeyCodes.ESC,
+  Next: Phaser.Input.Keyboard.KeyCodes.SPACE,
+  Notif: Phaser.Input.Keyboard.KeyCodes.SPACE,
+  Explore: Phaser.Input.Keyboard.KeyCodes.E,
+  Move: Phaser.Input.Keyboard.KeyCodes.V,
+  Talk: Phaser.Input.Keyboard.KeyCodes.T,
+  Options: [
+    Phaser.Input.Keyboard.KeyCodes.ONE,
+    Phaser.Input.Keyboard.KeyCodes.TWO,
+    Phaser.Input.Keyboard.KeyCodes.THREE,
+    Phaser.Input.Keyboard.KeyCodes.FOUR
+  ]
+};

src/features/game/input/GameInputManager.ts

@@ -81,6 +81,17 @@ class GameInputManager {
     this.keyboardListeners.forEach(keyboardListener => keyboardListener.removeAllListeners());
     this.eventListeners.forEach(eventListener => eventListener.removeAllListeners());
   }
+
+  /**
+   * Clear specific keyboard listeners.
+   */
+  public clearKeyboardListeners(keycodes: number[]) {
+    this.keyboardListeners.forEach(keyboardListener => {
+      if (keycodes.includes(keyboardListener.keyCode)) {
+        keyboardListener.removeAllListeners();
+      }
+    });
+  }
 }
 
 export default GameInputManager;

src/features/game/mode/menu/GameModeMenu.ts

@@ -11,7 +11,7 @@ import { createButton } from '../../utils/ButtonUtils';
 import { sleep } from '../../utils/GameUtils';
 import { calcTableFormatPos } from '../../utils/StyleUtils';
 import { GameMode, gameModeToPhase } from '../GameModeTypes';
-import MenuModeConstants, { modeButtonStyle } from './GameModeMenuConstants';
+import MenuModeConstants, { MenuLineConstants, modeButtonStyle } from './GameModeMenuConstants';
 
 /**
  * The class in charge of showing the "Menu" mode UI
@@ -63,6 +63,14 @@ class GameModeMenu implements IGameUI {
       numOfItems: buttons.length
     });
 
+    const lineList: Phaser.GameObjects.Line[] = buttons.map((button, index) =>
+      this.createLine(
+        buttonPositions[index][0],
+        buttonPositions[index][1] + MenuModeConstants.button.yOffset + MenuLineConstants.yOffset,
+        button
+      )
+    );
+
     modeMenuContainer.add(
       buttons.map((button, index) =>
         this.createModeButton(
@@ -73,9 +81,44 @@ class GameModeMenu implements IGameUI {
         )
       )
     );
+
+    modeMenuContainer.add(lineList);
+
     return modeMenuContainer;
   }
 
+  /**
+   * Create underline for each button.
+   */
+  private createLine(
+    xPos: number,
+    yPos: number,
+    button: {
+      text: GameMode;
+      callback: () => Promise<void>;
+    }
+  ) {
+    const gameManager = GameGlobalAPI.getInstance().getGameManager();
+    if (button.text === GameMode.Explore) {
+      xPos += MenuLineConstants.exploreOffset;
+    } else if (button.text === GameMode.Move) {
+      xPos += MenuLineConstants.moveOffset;
+    } else {
+      xPos += MenuLineConstants.talkOffset;
+    }
+    const line: Phaser.GameObjects.Line = gameManager.add.line(
+      MenuLineConstants.x,
+      MenuLineConstants.y,
+      xPos,
+      yPos,
+      xPos + MenuLineConstants.lineLength,
+      yPos,
+      MenuLineConstants.color
+    );
+    line.setLineWidth(MenuLineConstants.lineWidth);
+    return line;
+  }
+
   /**
    * Get the mode buttons preset to be formatted later.
    * The preset includes the text to be displayed on the button and

src/features/game/mode/menu/GameModeMenuConstants.ts

@@ -23,3 +23,15 @@ const MenuModeConstants = {
 };
 
 export default MenuModeConstants;
+
+export const MenuLineConstants = {
+  x: 0,
+  y: 15,
+  lineLength: 20,
+  lineWidth: 4,
+  exploreOffset: -68,
+  moveOffset: 20,
+  talkOffset: -30,
+  yOffset: 20,
+  color: 0xbce7da
+};

src/features/game/mode/move/GameModeMove.ts

@@ -3,13 +3,15 @@ import SoundAssets from '../../assets/SoundAssets';
 import CommonBackButton from '../../commons/CommonBackButton';
 import { screenCenter, screenSize } from '../../commons/CommonConstants';
 import { IGameUI } from '../../commons/CommonTypes';
+import { ItemId } from '../../commons/CommonTypes';
 import { fadeAndDestroy } from '../../effects/FadeEffect';
 import { entryTweenProps, exitTweenProps } from '../../effects/FlyEffect';
+import { keyboardShortcuts } from '../../input/GameInputConstants';
 import { Layer } from '../../layer/GameLayerTypes';
 import { GameItemType, LocationId } from '../../location/GameMapTypes';
 import { GamePhaseType } from '../../phase/GamePhaseTypes';
 import GameGlobalAPI from '../../scenes/gameManager/GameGlobalAPI';
-import { createButton } from '../../utils/ButtonUtils';
+import { createButton, createButtonText } from '../../utils/ButtonUtils';
 import { sleep } from '../../utils/GameUtils';
 import { calcTableFormatPos } from '../../utils/StyleUtils';
 import MoveModeConstants, { moveButtonStyle } from './GameModeMoveConstants';
@@ -38,7 +40,7 @@ class GameModeMove implements IGameUI {
   /**
    * Fetches the navigations of the current location id.
    */
-  private getLatestNavigations() {
+  private getLatestNavigations(): ItemId[] {
     return GameGlobalAPI.getInstance().getGameItemsInLocation(
       GameItemType.navigation,
       GameGlobalAPI.getInstance().getCurrLocId()
@@ -79,16 +81,16 @@ class GameModeMove implements IGameUI {
     });
 
     moveMenuContainer.add(
-      buttons.map((button, index) =>
-        this.createMoveButton(
-          button.text,
+      buttons.map((button, index) => {
+        return this.createMoveButton(
+          createButtonText(index + 1, button.text),
           buttonPositions[index][0] + MoveModeConstants.button.xOffSet,
           buttonPositions[index][1],
           button.callback,
           button.onHover,
           button.onOut
-        )
-      )
+        );
+      })
     );
 
     const backButton = new CommonBackButton(
@@ -161,6 +163,22 @@ class GameModeMove implements IGameUI {
     }).setPosition(xPos, yPos);
   }
 
+  /**
+   * Register keyboard listeners for location selection.
+   * Called by activateUI function.
+   */
+  private registerKeyboardListener(): void {
+    const inputManager = GameGlobalAPI.getInstance().getGameManager().getInputManager();
+    const navList: string[] = this.getLatestNavigations();
+
+    navList.forEach((nav, index) => {
+      inputManager.registerKeyboardListener(keyboardShortcuts.Options[index], 'up', async () => {
+        await GameGlobalAPI.getInstance().swapPhase(GamePhaseType.Sequence);
+        await GameGlobalAPI.getInstance().changeLocationTo(nav);
+      });
+    });
+  }
+
   /**
    * Activate the 'Move' mode UI.
    *
@@ -172,15 +190,25 @@ class GameModeMove implements IGameUI {
     this.uiContainer = this.createUIContainer();
     GameGlobalAPI.getInstance().addToLayer(Layer.UI, this.uiContainer);
 
-    this.uiContainer.setPosition(this.uiContainer.x, -screenSize.y);
+    this.registerKeyboardListener();
 
+    this.uiContainer.setPosition(this.uiContainer.x, -screenSize.y);
     gameManager.tweens.add({
       targets: this.uiContainer,
       ...entryTweenProps
     });
     GameGlobalAPI.getInstance().playSound(SoundAssets.modeEnter.key);
   }
 
+  /**
+   * Remove keyboard listners for location selection
+   * when Move mode is transitioned out.
+   */
+  private removeKeyboardListener(): void {
+    const inputManager = GameGlobalAPI.getInstance().getGameManager().getInputManager();
+    inputManager.clearKeyboardListeners(keyboardShortcuts.Options);
+  }
+
   /**
    * Deactivate the 'Move' mode UI.
    *
@@ -189,7 +217,7 @@ class GameModeMove implements IGameUI {
    */
   public async deactivateUI(): Promise<void> {
     const gameManager = GameGlobalAPI.getInstance().getGameManager();
-
+    this.removeKeyboardListener();
     if (this.uiContainer) {
       this.uiContainer.setPosition(this.uiContainer.x, 0);