Text typing works with html

Fix some text with no parameters being skipped.
Fix quickly going through text breaking lerp loop.
This commit is contained in:
fire bingo 2018-04-15 21:06:48 -07:00
parent a192a0eb0e
commit bf5108bfe6
2 changed files with 69 additions and 58 deletions

View File

@ -249,30 +249,36 @@ class Player {
//Loop through the lerp targets, modify the needed objects. If a object is at its 1 time state remove it from the list. //Loop through the lerp targets, modify the needed objects. If a object is at its 1 time state remove it from the list.
let toRemove = []; let toRemove = [];
for(let i = 0; i < this.lerpTargets.length; ++i) { for(let i = 0; i < this.lerpTargets.length; ++i) {
let l = this.lerpTargets[i]; try
l.curTime += deltaTime; {
if(l.curTime < 0) { continue; } let l = this.lerpTargets[i];
let inter = l.inter || "linear"; l.curTime += deltaTime;
let pos = l.curTime / l.time; if(l.curTime < 0) { continue; }
if(pos >= 1) { let inter = l.inter || "linear";
pos = 1; let pos = l.curTime / l.time;
toRemove.push(i); if(pos >= 1) {
if(l.post === "destroy") { pos = 1;
l.object.destroy(); toRemove.push(i);
continue; if(l.post === "destroy") {
l.object.destroy();
continue;
}
} }
} let newValue = commonFunctions.lerp(l.initV, l.finalV, pos, inter);
let newValue = commonFunctions.lerp(l.initV, l.finalV, pos, inter); let split = l.type.split(".");
let split = l.type.split("."); switch(split.length) {
switch(split.length) { case 1:
case 1: l.object[split[0]] = newValue;
l.object[split[0]] = newValue; break;
break; case 2:
case 2: l.object[split[0]][split[1]] = newValue;
l.object[split[0]][split[1]] = newValue; break;
break; default:
default: continue;
continue; }
} catch(error) {
//If we got an exception during this it probably means the object doesnt exist anymore so just remove it.
toRemove.push(i);
} }
} }
for(let i = toRemove.length - 1; i > -1; --i) { for(let i = toRemove.length - 1; i > -1; --i) {
@ -505,7 +511,7 @@ class Player {
this.text.dialogText(true, commonFunctions.convertUtageTextTags(text)); this.text.dialogText(true, commonFunctions.convertUtageTextTags(text));
} else { } else {
let charName = ""; let charName = "";
let found = true; let found = false;
//Look for the character that is saying the text to get their name //Look for the character that is saying the text to get their name
//future note: This might be better to just look for the character in character info if this start failing. //future note: This might be better to just look for the character in character info if this start failing.
for(let c of Object.keys(this.currentCharacters)) { for(let c of Object.keys(this.currentCharacters)) {

View File

@ -8,7 +8,7 @@ class TextFunctions {
this.dialogBox = undefined; this.dialogBox = undefined;
this.character = undefined; this.character = undefined;
this.dialog = undefined; this.dialog = undefined;
this.dialogToDisplay = {timeout: undefined, fullText: "", text: "", subsection: "", subindex: -1}; this.dialogToDisplay = {timeout: undefined, fullText: "", text: "", curPos: 0};
this.textScrollSpeedMs = 40; this.textScrollSpeedMs = 40;
this.scrollingText = false; this.scrollingText = false;
this.lineHeight = -1; this.lineHeight = -1;
@ -61,8 +61,10 @@ class TextFunctions {
} else { } else {
this.dialogToDisplay.text = text; this.dialogToDisplay.text = text;
this.dialogToDisplay.fullText = text; this.dialogToDisplay.fullText = text;
this.dialogInner.innerHTML = this.dialogToDisplay.text[0]; this.dialogToDisplay.curPos = 0;
this.dialogToDisplay.text = this.dialogToDisplay.text.slice(1); this.dialogInner.innerHTML = "";
//this.dialogInner.innerHTML = this.dialogToDisplay.text[0];
//this.dialogToDisplay.text = this.dialogToDisplay.text.slice(1);
this.scrollingText = true; this.scrollingText = true;
this.dialogToDisplay.timeout = setTimeout(putText.bind(this), this.textScrollSpeedMs); this.dialogToDisplay.timeout = setTimeout(putText.bind(this), this.textScrollSpeedMs);
} }
@ -70,14 +72,24 @@ class TextFunctions {
this.mainUi.style = show ? "opacity: 1;" : "opacity: 0;"; this.mainUi.style = show ? "opacity: 1;" : "opacity: 0;";
this.dialogBox.style = show ? "opacity: 1;" : "opacity: 0;"; this.dialogBox.style = show ? "opacity: 1;" : "opacity: 0;";
//This is based off https://github.com/mattboldt/typed.js/
function putText() { function putText() {
let t = this.getNextTextToPut(); // skip over any HTML chars
if(!t) { return; } this.dialogToDisplay.curPos = this.typeHtmlChars(this.dialogToDisplay.text, this.dialogToDisplay.curPos);
this.dialogInner.innerHTML += t; let substr = this.dialogToDisplay.text.substr(this.dialogToDisplay.curPos);
let lHeight = this.lineHeight * 2 if (this.dialogToDisplay.curPos === this.dialogToDisplay.text.length) {
if(this.dialogInner.offsetHeight > lHeight) { this.scrollingText = false;
this.dialog.scrollTop = this.dialogInner.offsetHeight - lHeight; return;
} else {
this.dialogToDisplay.curPos += 1;
const nextString = this.dialogToDisplay.text.substr(0, this.dialogToDisplay.curPos);
this.dialogInner.innerHTML = nextString;
let lHeight = this.lineHeight * 2
if(this.dialogInner.offsetHeight > lHeight) {
this.dialog.scrollTop = this.dialogInner.offsetHeight - lHeight;
}
} }
this.dialogToDisplay.timeout = setTimeout(putText.bind(this), this.textScrollSpeedMs); this.dialogToDisplay.timeout = setTimeout(putText.bind(this), this.textScrollSpeedMs);
} }
} }
@ -94,6 +106,24 @@ class TextFunctions {
} }
this.scrollingText = false; this.scrollingText = false;
} }
typeHtmlChars(curString, curStrPos) {
const curChar = curString.substr(curStrPos).charAt(0);
if (curChar === '<' || curChar === '&') {
let endTag = '';
if (curChar === '<') {
endTag = '>';
} else {
endTag = ';';
}
while (curString.substr(curStrPos + 1).charAt(0) !== endTag) {
curStrPos++;
if (curStrPos + 1 > curString.length) { break; }
}
curStrPos++;
}
return curStrPos;
}
hideUi(show) { hideUi(show) {
this.mainUi.style = show ? "opacity: 1;" : "opacity: 0;"; this.mainUi.style = show ? "opacity: 1;" : "opacity: 0;";
@ -101,31 +131,6 @@ class TextFunctions {
this.character.style = show ? "opacity: 1;" : "opacity: 0;"; this.character.style = show ? "opacity: 1;" : "opacity: 0;";
} }
getNextTextToPut() {
if(!this.dialogToDisplay.text || this.dialogToDisplay.text.length === 0) {
this.scrollingText = false;
return "";
}
let toSlice = 1;
let text = this.dialogToDisplay.text[0];
if(text === '<') {
let match = this.dialogToDisplay.text.match(/<.+>/);
if(match && match[0]); {
debugger;
text = match[0];
toSlice = match[0].length;
if(!text.includes("/")) {
let s = text.split('');
s.splice(1, 0, '/');
text += s.join('');
}
}
}
this.dialogToDisplay.text = this.dialogToDisplay.text.slice(toSlice);
return text;
}
resetAll() { resetAll() {
this.title.innerHTML = ''; this.title.innerHTML = '';
this.diva.innerHTML = ''; this.diva.innerHTML = '';