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
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
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
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
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