From bf5108bfe6915c82f7860b12a03eb125c97e8557 Mon Sep 17 00:00:00 2001 From: firebingo Date: Sun, 15 Apr 2018 21:06:48 -0700 Subject: [PATCH] Text typing works with html Fix some text with no parameters being skipped. Fix quickly going through text breaking lerp loop. --- Js/Player.js | 54 ++++++++++++++++++--------------- Js/TextFunctions.js | 73 ++++++++++++++++++++++++--------------------- 2 files changed, 69 insertions(+), 58 deletions(-) diff --git a/Js/Player.js b/Js/Player.js index ba5af8c..96c29b8 100644 --- a/Js/Player.js +++ b/Js/Player.js @@ -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. let toRemove = []; for(let i = 0; i < this.lerpTargets.length; ++i) { - let l = this.lerpTargets[i]; - l.curTime += deltaTime; - if(l.curTime < 0) { continue; } - let inter = l.inter || "linear"; - let pos = l.curTime / l.time; - if(pos >= 1) { - pos = 1; - toRemove.push(i); - if(l.post === "destroy") { - l.object.destroy(); - continue; + try + { + let l = this.lerpTargets[i]; + l.curTime += deltaTime; + if(l.curTime < 0) { continue; } + let inter = l.inter || "linear"; + let pos = l.curTime / l.time; + if(pos >= 1) { + pos = 1; + toRemove.push(i); + if(l.post === "destroy") { + l.object.destroy(); + continue; + } } - } - let newValue = commonFunctions.lerp(l.initV, l.finalV, pos, inter); - let split = l.type.split("."); - switch(split.length) { - case 1: - l.object[split[0]] = newValue; - break; - case 2: - l.object[split[0]][split[1]] = newValue; - break; - default: - continue; + let newValue = commonFunctions.lerp(l.initV, l.finalV, pos, inter); + let split = l.type.split("."); + switch(split.length) { + case 1: + l.object[split[0]] = newValue; + break; + case 2: + l.object[split[0]][split[1]] = newValue; + break; + default: + 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) { @@ -505,7 +511,7 @@ class Player { this.text.dialogText(true, commonFunctions.convertUtageTextTags(text)); } else { let charName = ""; - let found = true; + let found = false; //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. for(let c of Object.keys(this.currentCharacters)) { diff --git a/Js/TextFunctions.js b/Js/TextFunctions.js index 0c5ccf6..60cfa5a 100644 --- a/Js/TextFunctions.js +++ b/Js/TextFunctions.js @@ -8,7 +8,7 @@ class TextFunctions { this.dialogBox = undefined; this.character = 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.scrollingText = false; this.lineHeight = -1; @@ -61,8 +61,10 @@ class TextFunctions { } else { this.dialogToDisplay.text = text; this.dialogToDisplay.fullText = text; - this.dialogInner.innerHTML = this.dialogToDisplay.text[0]; - this.dialogToDisplay.text = this.dialogToDisplay.text.slice(1); + this.dialogToDisplay.curPos = 0; + this.dialogInner.innerHTML = ""; + //this.dialogInner.innerHTML = this.dialogToDisplay.text[0]; + //this.dialogToDisplay.text = this.dialogToDisplay.text.slice(1); this.scrollingText = true; this.dialogToDisplay.timeout = setTimeout(putText.bind(this), this.textScrollSpeedMs); } @@ -70,14 +72,24 @@ class TextFunctions { this.mainUi.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() { - let t = this.getNextTextToPut(); - if(!t) { return; } - this.dialogInner.innerHTML += t; - let lHeight = this.lineHeight * 2 - if(this.dialogInner.offsetHeight > lHeight) { - this.dialog.scrollTop = this.dialogInner.offsetHeight - lHeight; + // skip over any HTML chars + this.dialogToDisplay.curPos = this.typeHtmlChars(this.dialogToDisplay.text, this.dialogToDisplay.curPos); + let substr = this.dialogToDisplay.text.substr(this.dialogToDisplay.curPos); + if (this.dialogToDisplay.curPos === this.dialogToDisplay.text.length) { + this.scrollingText = false; + 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); } } @@ -94,6 +106,24 @@ class TextFunctions { } 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) { this.mainUi.style = show ? "opacity: 1;" : "opacity: 0;"; @@ -101,31 +131,6 @@ class TextFunctions { 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() { this.title.innerHTML = ''; this.diva.innerHTML = '';