Comparto aquí el efecto typwriter que he conseguido para ngPaws. De momento lo tengo a lo bruto, usando flags propios para mi aventura y controlar el efecto... y machancado el runtime.js directamente. Sé que se puede hacer mucho mejor, sin tocar el core, sin usar flags de la aventura para ello, etc... pero de momento os comparto el código y ¡comentamos!
No he comentado el código, pero más o menos se puede entender...
La función writeText original:
Código: Seleccionar todo
function writeText(text, skipAutoComplete)
{
if (typeof skipAutoComplete === 'undefined') skipAutoComplete = false;
text = h_writeText(text); // hook
$('.text').append(text);
$('.text').scrollTop($('.text')[0].scrollHeight);
addToTranscript(text);
if (!skipAutoComplete) addToAutoComplete(text);
focusInput();
}Código: Seleccionar todo
// Text Output functions
let isWriting = false;
let writeQueue = [];
function writeText(text, skipAutoComplete) {
if (getFlag(67) == 1) { //Use Flag 67 (1,0) to use typewriter effect or not.
return new Promise(resolve => {
writeQueue.push({
text,
skipAutoComplete,
resolve
});
if (!isWriting) {
processQueue();
}
});
} else {
if (typeof skipAutoComplete === 'undefined') skipAutoComplete = false;
text = h_writeText(text); // hook
$('.text').append(text);
$('.text').scrollTop($('.text')[0].scrollHeight);
addToTranscript(text);
if (!skipAutoComplete) addToAutoComplete(text);
focusInput();
}
}
function processQueue() {
if (writeQueue.length > 0) {
isWriting = true;
$(".input").hide();
const nextWrite = writeQueue.shift();
typewriteText(nextWrite.text, nextWrite.skipAutoComplete)
.then(() => {
nextWrite.resolve();
processQueue();
});
} else {
isWriting = false;
if (!inAnykey && !inPause){
$(".input").show();
document.getElementById('input').style.display='block';
focusInput();
}
}
}
function typewriteText(text, skipAutoComplete) {
return new Promise(resolve => {
if (typeof skipAutoComplete === 'undefined') skipAutoComplete = false;
text = h_writeText(text); // hook
const newTextSpan = document.createElement('span');
newTextSpan.className = 'typewriter-text';
$('.text').append(newTextSpan);
let currentCharacterIndex = 0;
let currentHtml = '';
function typeNextCharacter() {
if (currentCharacterIndex < text.length) {
$('.text').scrollTop($('.text')[0].scrollHeight);
currentHtml += text.charAt(currentCharacterIndex);
// Update the innerHTML with the current HTML, which includes parsed tags
newTextSpan.innerHTML = currentHtml;
currentCharacterIndex++;
setTimeout(typeNextCharacter, 1); // Adjust typing speed here
} else {
// Typing finished, remove the typewriter class
newTextSpan.classList.remove('typewriter-text');
addToTranscript(text);
if (!skipAutoComplete) addToAutoComplete(text);
resolve(); // Resolve the promise to signal completion
}
}
// Start typing the new content
typeNextCharacter();
});
}
