Game: Create a new quiz feature (#2919)

* Add new action show_quiz

* Add quiz parser

* Add quiz manager

* Create quiz result type

* Hide dialogue box while showing quiz

* Modify character hidding feature

* Track and display quiz results

* Debugging for speaker displaying

* Modify UI for quiz displaying

* Update UI for quiz display

* Solve quiz speaker issue

* Remove default reaction in QuizParser and handle no reaction situation in QuizManager

* Add a new property (boolean array) in Quiz type to record quiz result

* Rearrange quiz result

* Save quiz status as attempted/completed arrays

* Add conditions to check whether a quiz is attempted/completed

* Disable keyboard input in a quiz

* Move question prompt text to QuizConstants

* QuizParser error handling & add new "speaker" property to QuizType & store quiz questions to dialogue log

* Display quiz result message to dialogue log

* Move quiz result message to QuizConstant

* Change quiz condition names

* Add a prompt before a quiz & proceed to the next dialogue line when a quiz ends

* Add saving quizzes score

* Add validation for quiz conditions parameters

* Add new condition quizScoreAtLeast to check the status of quiz scores

* Support Interpolation of player's name in quiz questions

* Support interpolation of quiz scores in dialogue lines

* Refactor the logic of makeLineQuizScores method

Co-authored-by: reginateh <[email protected]>
Co-authored-by: CZX <[email protected]>

Author: 3 people

src/features/game/action/GameActionConditionChecker.ts

@@ -42,6 +42,16 @@ export default class ActionConditionChecker {
         return GameGlobalAPI.getInstance().isObjectiveComplete(conditionParams.id) === boolean;
       case GameStateStorage.TasklistState:
         return GameGlobalAPI.getInstance().isTaskComplete(conditionParams.id) === boolean;
+      case GameStateStorage.AttemptedQuizState:
+        return GameGlobalAPI.getInstance().isQuizAttempted(conditionParams.id) === boolean;
+      case GameStateStorage.PassedQuizState:
+        return GameGlobalAPI.getInstance().isQuizComplete(conditionParams.id) === boolean;
+      case GameStateStorage.QuizScoreState:
+        return (
+          GameGlobalAPI.getInstance().getQuizScore(conditionParams.id) >=
+            parseInt(conditionParams.score) ===
+          boolean
+        );
       default:
         return true;
     }

src/features/game/action/GameActionExecuter.ts

@@ -102,6 +102,11 @@ export default class GameActionExecuter {
       case GameActionType.Delay:
         await sleep(actionParams.duration);
         return;
+      case GameActionType.ShowQuiz:
+        globalAPI.enableKeyboardInput(false);
+        await globalAPI.showQuiz(actionParams.id);
+        globalAPI.enableKeyboardInput(true);
+        return;
       default:
         return;
     }
@@ -141,6 +146,7 @@ export default class GameActionExecuter {
       case GameActionType.PlaySFX:
       case GameActionType.ShowObjectLayer:
       case GameActionType.Delay:
+      case GameActionType.ShowQuiz:
         return false;
     }
   }

src/features/game/action/GameActionTypes.ts

@@ -25,7 +25,8 @@ export enum GameActionType {
   ShowObjectLayer = 'ShowObjectLayer',
   NavigateToAssessment = 'NavigateToAssessment',
   UpdateAssessmentStatus = 'UpdateAssessmentStatus',
-  Delay = 'Delay'
+  Delay = 'Delay',
+  ShowQuiz = 'ShowQuiz'
 }
 
 /**

src/features/game/dialogue/GameDialogueManager.ts

@@ -66,11 +66,12 @@ export default class DialogueManager {
       });
   }
 
-  private async showNextLine(resolve: () => void) {
+  public async showNextLine(resolve: () => void) {
     GameGlobalAPI.getInstance().playSound(SoundAssets.dialogueAdvance.key);
     const { line, speakerDetail, actionIds, prompt } =
       await this.getDialogueGenerator().generateNextLine();
-    const lineWithName = line.replace('{name}', this.getUsername());
+    const lineWithQuizScores = this.makeLineWithQuizScores(line);
+    const lineWithName = lineWithQuizScores.replace('{name}', this.getUsername());
     this.getDialogueRenderer().changeText(lineWithName);
     this.getSpeakerRenderer().changeSpeakerTo(speakerDetail);
 
@@ -79,6 +80,7 @@ export default class DialogueManager {
 
     // Disable interactions while processing actions
     GameGlobalAPI.getInstance().enableSprite(this.getDialogueRenderer().getDialogueBox(), false);
+    this.getInputManager().enableKeyboardInput(false);
 
     if (prompt) {
       // disable keyboard input to prevent continue dialogue
@@ -94,6 +96,7 @@ export default class DialogueManager {
     }
     await GameGlobalAPI.getInstance().processGameActionsInSamePhase(actionIds);
     GameGlobalAPI.getInstance().enableSprite(this.getDialogueRenderer().getDialogueBox(), true);
+    this.getInputManager().enableKeyboardInput(true);
 
     if (!line) {
       // clear keyboard listeners when dialogue ends
@@ -102,6 +105,38 @@ export default class DialogueManager {
     }
   }
 
+  /**
+   * Hide all dialogue boxes, speaker boxes and speaker sprites
+   * */
+  public async hideAll() {
+    await this.getDialogueRenderer().hide();
+    await this.getSpeakerRenderer().hide();
+  }
+
+  /**
+   * Make all dialogue boxes, speaker boxes and speaker sprites visible
+   * */
+  public async showAll() {
+    await this.getDialogueRenderer().show();
+    await this.getSpeakerRenderer().show();
+  }
+
+  /**
+   * Find patterns of quiz score interpolation in a dialogue line,
+   * and replace them by actual scores.
+   * The pattern: "{<quizId>.score}"
+   *
+   * @param line
+   * @returns {string} the given line with all quiz score interpolation replaced by actual scores.
+   */
+  public makeLineWithQuizScores(line: string) {
+    const quizScores = line.matchAll(/\{(.+?)\.score\}/g);
+    for (const match of quizScores) {
+      line = line.replace(match[0], GameGlobalAPI.getInstance().getQuizScore(match[1]).toString());
+    }
+    return line;
+  }
+
   private getDialogueGenerator = () => this.dialogueGenerator as DialogueGenerator;
   private getDialogueRenderer = () => this.dialogueRenderer as DialogueRenderer;
   private getSpeakerRenderer = () => this.speakerRenderer as DialogueSpeakerRenderer;

src/features/game/dialogue/GameDialogueRenderer.ts

@@ -67,6 +67,24 @@ class DialogueRenderer {
     fadeAndDestroy(gameManager, this.getDialogueContainer());
   }
 
+  /**
+   * Hide the dialoguebox
+   */
+  public async hide() {
+    this.typewriter.container.setVisible(false);
+    this.dialogueBox.setVisible(false);
+    this.blinkingDiamond.container.setVisible(false);
+  }
+
+  /**
+   * Make the dialoguebox visible
+   */
+  public async show() {
+    this.typewriter.container.setVisible(true);
+    this.dialogueBox.setVisible(true);
+    this.blinkingDiamond.container.setVisible(true);
+  }
+
   /**
    * Change the text written in the box
    */

src/features/game/dialogue/GameDialogueSpeakerRenderer.ts

@@ -16,6 +16,8 @@ import DialogueConstants, { speakerTextStyle } from './GameDialogueConstants';
  */
 export default class DialogueSpeakerRenderer {
   private currentSpeakerId?: string;
+  private speakerSprite?: Phaser.GameObjects.Image;
+  private speakerSpriteBox?: Phaser.GameObjects.Container;
 
   /**
    * Changes the speaker shown in the speaker box and the speaker rendered on screen
@@ -63,6 +65,7 @@ export default class DialogueSpeakerRenderer {
       expression,
       speakerPosition
     );
+    this.speakerSprite = speakerSprite;
     GameGlobalAPI.getInstance().addToLayer(Layer.Speaker, speakerSprite);
   }
 
@@ -90,8 +93,27 @@ export default class DialogueSpeakerRenderer {
 
     container.add([rectangle, speakerText]);
     speakerText.text = StringUtils.capitalize(text);
+    this.speakerSpriteBox = container;
     return container;
   }
 
+  /**
+   * Hide the speaker box and sprite
+   */
+  public async hide() {
+    this.getSpeakerSprite().setVisible(false);
+    this.getSpeakerSpriteBox().setVisible(false);
+  }
+
+  /**
+   * Show the hidden speaker box and sprite
+   */
+  public async show() {
+    this.getSpeakerSprite().setVisible(true);
+    this.getSpeakerSpriteBox().setVisible(true);
+  }
+
   public getUsername = () => SourceAcademyGame.getInstance().getAccountInfo().name;
+  private getSpeakerSprite = () => this.speakerSprite as Phaser.GameObjects.Image;
+  private getSpeakerSpriteBox = () => this.speakerSpriteBox as Phaser.GameObjects.Container;
 }

src/features/game/layer/GameLayerTypes.ts

@@ -12,7 +12,9 @@ export enum Layer {
   Escape,
   Selector,
   Dashboard,
-  WorkerMessage
+  WorkerMessage,
+  QuizSpeakerBox,
+  QuizSpeaker
 }
 
 // Back to Front
@@ -23,9 +25,11 @@ export const defaultLayerSequence = [
   Layer.BBox,
   Layer.Character,
   Layer.Speaker,
+  Layer.QuizSpeaker,
   Layer.PopUp,
   Layer.Dialogue,
   Layer.SpeakerBox,
+  Layer.QuizSpeakerBox,
   Layer.Effects,
   Layer.Dashboard,
   Layer.Escape,

src/features/game/location/GameMap.ts

@@ -6,6 +6,7 @@ import { AssetKey, ItemId } from '../commons/CommonTypes';
 import { Dialogue } from '../dialogue/GameDialogueTypes';
 import { GameMode } from '../mode/GameModeTypes';
 import { ObjectProperty } from '../objects/GameObjectTypes';
+import { Quiz } from '../quiz/GameQuizType';
 import { mandatory } from '../utils/GameUtils';
 import { AnyId, GameItemType, GameLocation, LocationId } from './GameMapTypes';
 
@@ -36,6 +37,7 @@ class GameMap {
   private actions: Map<ItemId, GameAction>;
   private gameStartActions: ItemId[];
   private checkpointCompleteActions: ItemId[];
+  private quizzes: Map<ItemId, Quiz>;
 
   constructor() {
     this.soundAssets = [];
@@ -47,6 +49,7 @@ class GameMap {
     this.boundingBoxes = new Map<ItemId, BBoxProperty>();
     this.characters = new Map<ItemId, Character>();
     this.actions = new Map<ItemId, GameAction>();
+    this.quizzes = new Map<ItemId, Quiz>();
 
     this.gameStartActions = [];
     this.checkpointCompleteActions = [];
@@ -120,6 +123,10 @@ class GameMap {
     return this.actions;
   }
 
+  public getQuizMap(): Map<ItemId, Quiz> {
+    return this.quizzes;
+  }
+
   public getSoundAssets(): SoundAsset[] {
     return this.soundAssets;
   }

src/features/game/location/GameMapTypes.ts

@@ -48,5 +48,6 @@ export enum GameItemType {
   characters = 'characters',
   actions = 'actions',
   bgmKey = 'bgmKey',
-  collectibles = 'collectibles'
+  collectibles = 'collectibles',
+  quizzes = 'quizzes'
 }

src/features/game/parser/ActionParser.ts

@@ -185,6 +185,11 @@ export default class ActionParser {
       case GameActionType.Delay:
         actionParamObj.duration = parseInt(actionParams[0]) * 1000;
         break;
+
+      case GameActionType.ShowQuiz:
+        actionParamObj.id = actionParams[0];
+        Parser.validator.assertItemType(GameItemType.quizzes, actionParams[0], actionType);
+        break;
     }
 
     const actionId = Parser.generateActionId();