Nagwa Engines Utilities

This Utilities library to help you with some functions to build engines for webview faster and also with other of a lot of utils functions and classes

Engine Utilities

There is class called UEngine with expose some static utilites functions

• scaleToFitHeight()
• detectWhenEngineFinishRendering()
• registerHeightChangeObserver(activityId, activityScore, activityContainer)
• postActivityRenderedMessage(messageKey, activityId, activityScore, activityContainer)
• postSliceRenderedMessage(activityId)
• postPlayAudioMessage(audioSrc, activityId)
• postMessage(messageHandlerName, message)

scaleToFitHeight()

Used to scale the webview to fit the height of the screen

UEngine.scaleToFitHeight();

detectWhenEngineFinishRendering()

Used to detect when the engine finish rendering

UEngine.detectWhenEngineFinishRendering();

registerHeightChangeObserver(activityId, activityScore, activityContainer)

Used to register height change observer

UEngine.registerHeightChangeObserver(
  this.activityState.id,
  this.activityState.score,
  this.DOM_ELEMENTS.activityContainer
);

postActivityRenderedMessage(messageKey, activityId, activityScore, activityContainer)

Used to post activity rendered message

UEngine.postActivityRenderedMessage(
  "activityRendered",
  this.activityState.id,
  this.activityState.score,
  this.DOM_ELEMENTS.activityContainer
);

or we can post the the activity height changed message

UEngine.postActivityRenderedMessage(
  "activityHeightChanged",
  this.activityState.id,
  this.activityState.score,
  this.DOM_ELEMENTS.activityContainer
);

postSliceRenderedMessage(activityId)

Used to post slice rendered message

UEngine.postSliceRenderedMessage(this.activityState.id);

postPlayAudioMessage(audioSrc, activityId)

Used to post play audio message

UEngine.postPlayAudioMessage(this.DOM_ELEMENTS.src, this.activityState.id);

postMessage(messageHandlerName, message)

Used to post message from webview to native

UEngine.postMessage("messageHandlerName", { message: "message" });

Activity Utilities

There is class called UActivity with expose some static utilites functions for our activities

• calcScore
• playAudio
• getAudioSrc

calcScore

Used to calculate the score of the activity

UActivity.calcScore();

playAudio

Used to play audio and takes 3 parameters

• activityId: string
• audioElement: HTMLAudioElement
• audioSrc: string

UActivity.playAudio(
  this.activityState.id,
  this.DOM_ELEMENTS.audioEl,
  this.currentSlice.audioId
);

getAudioSrc

Used to get audio src and takes 4 parameters

• assetsBasePath: string
• audioId: string
• currentAudioNumber: string
• numberOfAudios: string

UActivity.getAudioSrc(
  this.assetsBasePath,
  this.currentSlice.audioId,
  this.currentAudioNumber,
  this.activityState.numberOfAudios
);

Array Utilities

There is class called UArray with expose some static utilites functions for manipulating arrays

• getRandomItem
• shuffleArray
• getRandomIndex
• getRandomElementsFromArray

getRandomItem

Used to get random item from array

UArray.getRandomItem(this.activityState.slices);

shuffleArray

Used to shuffle array and returns new array

UArray.shuffleArray(this.activityState.slices);

getRandomIndex

Used to get random index from array

UArray.getRandomIndex(this.activityState.slices);

getRandomElementsFromArray

Used to get random elements from array and takes 2 parameters

• array: Array
• numberOfElements: number

UArray.getRandomElementsFromArray(this.activityState.slices, 6);

General Utilities

There is class called UGeneral with expose some static utilites functions for general purposes

• getRandomNumberBetween
• isSafari
• sleep

getRandomNumberBetween

Used to get random number between 2 numbers

UGeneral.getRandomNumberBetween(1, 10);

isSafari

Used to check if the browser is safari

UGeneral.isSafari();

sleep

Used to sleep for some time and takes time in milliseconds

UGeneral.sleep(1000);

Word Comparor Controller

Word Comparor Controller is a class that used to compare words and it takes 2 parameters and return the if they are exactly the same or not or close to each other and cane return the edit steps to make the words the same

Parameters:

• sourceWord: string (the word that we want to compare with)
• targetWord: string (the word that we want to compare it with the source word)

const comparor = new WordsComparer(
  this.currentSlice.word,
  this.DOM_ELEMENTS.userInputElement.value
);
// const comparor = new WordsComparer("word1", "word2");

Methods

• getCompareResult
• getEditSteps

getCompareResult

Used to get the compare result and return if the words are exactly the same or not or close to each other

comparor.getCompareResult();
// will return one of the following
// "exact"
// "close"
// "different"

getEditSteps

Used to get the edit steps to make the words the same

const editsteps = comparor.getEditSteps();
// will return array of edit steps
// [{ index: 4, char: "1" }]

Word Differ Output Controller

Word Differ Output Controller is a class that used to output the difference between 2 words with styles for diffrent chars

Parameters:

• sourceWord: string (the main source word)
• targetWord: string (the word that we want to compare it with the source word)
• sourceWordSpan: HTMLSpanElement (the span element that we want to output the source word in it)
• targetWordSpan: HTMLSpanElement (the span element that we want to output the target word in it)
• listOfEditSteps: Array (the list of edit steps to make the words the same)
• outputType: string (the type of output from word comparor)

const outputHandler = new WordsDifferOutput(
  this.DOM_ELEMENTS.userInputElement.value,
  this.currentSlice.word,
  this.DOM_ELEMENTS.sourceWord,
  this.DOM_ELEMENTS.targetWord,
  editSteps,
  this.outputType
);
outputHandler.showOutput();
// will output the words with styles in the spans in the html document directly