DK Mini Games in TypeScript

This library will allow client code to run a Mini Game as long as a valid configuration object is provided. The structure is as follows.

export interface MiniGameConfig {
  viewModel: MiniGameViewModel;
  gameContainer: HTMLElement;
  onGameStart?: (() => void) | undefined;
  onNextGame?: (() => void) | undefined;
  onLeaveGame?: (() => void) | undefined;
  onGameCompleted?: (() => void) | undefined;
}

| Property | Description | | -------- | ----------- | | viewModel | The data that drives the UI and game logic | | gameContainer | The HTML element that the game instance will operate within | | onGameStart | A callback that executes (if set) just before the first question is presented | | onNextGame | A callback that executes (if set) when 'Next Game' is clicked/tapped in the End View | | onLeaveGame | A callback that executes (if set) when an action is taken to leave an active game | | onGameCompleted | A callback that executes (if set) when a game is completed by either going through all questions or getting three outs (wrong answers) |

Example

This example below shows basic usage of the library, which includes creating a config object, instantiating a MiniGame with it, and initializing the game.

const config: MiniGameConfig = getMiniGameConfig();
const game: MiniGame = new MiniGame(config);
game.init();

Additional data models

export interface MiniGameViewModel {
  uuid: string;
  name: string;
  description: string;
  coverImageUrl: string;
  questions: QuestionViewModel[];
}

| Property | Description | | -------- | ----------- | | uuid | The UUID of the MiniGame activity definition | | name | The name of the game | | description | The description of the game | | coverImageUrl | A URL reference to the cover image of the game | | questions | A collection of view models that contain question related data |

export interface QuestionViewModel {
  uuid: string;
  videoUrl: string;
  countdownStartTime: number;
  countdownDuration: number;
  questionLeadIn: string;
  prompt: string;
  onRevealText: string;
  questionSubject: string;
  questionSubjectDescription: string;
  answers: AnswerViewModel[];
}

| Property | Description | | -------- | ----------- | | uuid | The UUID of the question | | videoUrl | A URL reference to the video for the question | | countdownStartTime | The time (in seconds) it should take to start the countdown for answering the question | | countdownDuration | The duration (in seconds) that the countdown should last | | questionLeadIn | The text displayed related to the question, before the countdown begins | | prompt | The question prompt displayed when the countdown starts | | onRevealText | The text that is revealed once the countdown has expired | | questionSubject | A subject that is related to the question, shown when the game is paused | | questionSubjectDescription | A description of the above subject, shown when the game is paused | | answers | A collection of view models that contain answer related data |

export interface AnswerViewModel {
  uuid: string;
  displayOrder: number;
  prompt: string;
  isCorrect: boolean;
  onRevealText: string;
}

| Property | Description | | -------- | ----------- | | uuid | The UUID of the answer | | displayOrder | The position in which this answer should be displayed amongst the others | | prompt | The time (in seconds) it should take to start the countdown for answering the question | | isCorrect | Designates if the answer is correct | | onRevealText | The text revealed when this answer is selected (not currently used) |

Building

This library requires the using HTML templates that are included in the Node package. The library code assumes that these HTML files will be in the same directory together. So to use them, copy them into the directory your JS/TS will be running. The following command could also be used in a build configuration:

find ./node_modules/@diamondkinetics/dk-minigames-ts -name '*.html' -exec cp {} ./[your-build-folder] \\;