Fix scaling breaking text container when app container was smaller than text container.

Audio and volume controls work.
Support for shake command.
Text scrolling buttons.

.gitignore

@@ -1,3 +1,4 @@
 /XDUData
 /
 web.config
+/Js/Typed

Css/main.css

@@ -41,11 +41,15 @@
 
 .centered { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; }
 
-#app-container { position: relative; width: 1334px; height: 750px; }
+.hidden { opacity: 0; }
+
+.shown { opacity: 0; }
+
+#app-container { position: relative; width: 1334px; height: 750px; display: flex; justify-content: center; align-items: center; }
 
 #parent-container { display: flex; flex-direction: column; align-items: center; }
 
-#text-container { position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; height: 750px; width: 1334px; font-family: 'FOT-RodinNTLGPro'; }
+#text-container { position: absolute; margin: auto; height: 750px; width: 1334px; font-family: 'FOT-RodinNTLGPro'; }
 
 #text-container #title { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; font-size: 20px; transition: opacity 0.3s; }
 
@@ -59,10 +63,32 @@
 
 #dialog-box #character { position: absolute; top: -5px; left: 70px; font-size: 30px;  }
 
-#dialog-box #dialog { overflow: hidden; position: absolute; padding: 0 30px 0 70px; margin-top: 60px; box-sizing: border-box; height: 120px; width: 100%; font-size: 30px; line-height: 60px; }
+#dialog-box #dialog { overflow: hidden; position: absolute; padding: 0 30px 0 70px; margin-top: 60px; box-sizing: border-box; height: 120px; width: 100%; font-size: 28px; font-weight: normal; line-height: 68px; }
+
+#dialog #dialog-inner { max-width: 1125px; }
+
+#dialog b { font-weight: bold; }
 
 #dialog-box #ui-buttons { right: 20px; top: -50px; position: absolute; }
 
 #dialog-box .ui-button { position: relative; height: 85px; }
 
+#dialog #dialog-controls { position: fixed; right: 0; display: flex; height: 135px; align-items: center; }
+
+#dialog-controls #dialog-next { margin-right: 37px; }
+
+#dialog-next img { height: 80px; }
+
+#dialog-controls #dialog-scroll { display: flex; flex-direction: column; height: 80px; margin-right: 30px; justify-content: space-between; }
+
+#dialog-scroll #dialog-scroll-up { transform: scale(1, -1); }
+
+#dialog-scroll img { height: 35px; }
+
 #other-controls-container { display: flex; width: 100; justify-content: center; }
+
+#select-mission { max-width: 300px; }
+
+#volume-control { display: flex; margin-right: 10px; }
+
+#volume-control #mute-button { cursor: pointer; }

Js/Audio.js

@@ -61,15 +61,68 @@ class bufferLoader {
 			}
 		});
 	}
+	
+	resetAll() {
+		this.bufferList = {};
+	}
 }
 
 class audioController {	
-	constructor() {
+	constructor(utage) {
+		this.utage = utage;
 		this.volume = 1.0;
 		this.muted = false;
 		this.audioCtx = new (window.AudioContext || window.webkitAudioContext)();
 		this.gainNode = this.audioCtx.createGain();
+		this.gainNode.connect(this.audioCtx.destination);
 		this.loader = undefined;
+		this.sources = {};
+	}
+	
+	playSound(sound, type) {
+		if(!this.loader.bufferList[sound]) {
+			return;
+		}
+		let source = this.audioCtx.createBufferSource()
+		this.sources[sound] = source;
+		source.buffer = this.loader.bufferList[sound];
+		source.loop = false;
+		if(type === "bgm") {
+			if(this.utage.bgmLoopData[this.utage.soundInfo[sound].origFileName]) {
+				let loop = this.utage.bgmLoopData[this.utage.soundInfo[sound].origFileName];
+				source.loopStart = loop["loop_start"]["seconds"];
+				source.loopEnd = loop["loop_end"]["seconds"];
+				source.loop = true;
+			}
+		}
+		source.connect(this.gainNode);
+		source.onended = () => {
+			if(!this.sources[sound]) { return; }
+			this.sources[sound].disconnect(this.gainNode);
+			this.sources[sound] = undefined;
+		}
+		source.start(0);
+	}
+	
+	stopSound(sound) {
+		if(sound === 'bgm') {
+			for(let sKey of Object.keys(this.sources)) {
+				try {
+					if(!sKey.startsWith('bgm')) { continue; }
+					let s = this.sources[sKey];
+					s.stop();
+					s.disconnect(this.gainNode);
+					s = undefined;
+				} catch (error) { }
+			}
+		} else {
+			if(!this.sources[sound]) {
+				return;
+			}
+			this.sources[sound].stop();
+			this.sources[sound].disconnect(this.gainNode);
+			this.sources[sound] = undefined;
+		}
 	}
 	
 	changeVolume(vol) {
@@ -79,10 +132,14 @@ class audioController {
 		}
 	}
 	
-	mute() {
+	mute(mute) {
+		if(mute != undefined) {
+			this.muted = mute;
+		} else {
 			this.muted = !this.muted;
+		}
 		if(this.muted) {
-			this.gainNode.gain.setValueAtTime(0, athis.udioCtx.currentTime);
+			this.gainNode.gain.setValueAtTime(0, this.audioCtx.currentTime);
 		} else {
 			this.gainNode.gain.setValueAtTime(this.volume, this.audioCtx.currentTime);
 		}
@@ -96,4 +153,20 @@ class audioController {
 		});
 		this.loader.load();
 	}
+	
+	resetAll() {
+		if(this.loader) {
+			this.loader.resetAll();
+			this.loader = undefined;
+		}
+		for(let sKey of Object.keys(this.sources)) {
+			let s = this.sources[sKey];
+			try {
+				s.stop();
+				s.disconnect(this.gainNode);
+				s = undefined;
+			} catch(error) { }
+		}
+		this.sources = {};
+	}
 }

Js/Common.js

@@ -85,6 +85,13 @@ class commonFunctions {
 			case "sqrt":
 				t = Math.sqrt(t);
 				break;
+			//Some of the stuff here is just kinda arbitrary
+			case "dampsin":
+				t = (1 * (Math.pow(0.3, t)) * Math.sin((2*Math.PI*t/0.5) + 0)) / 1.25;
+				if(t < -0.45) { 
+					t = -0.45;
+				}
+				break;
 		}
 		return (1 - t) * start + t * end;
 		//-(2*x-1)^4 +1
@@ -165,7 +172,7 @@ class commonFunctions {
 		return {x, y};
 	}
 	
-	static getPropertiesFromTweenCommand(props) {
+	static getPropertiesFromTweenCommand(props, reverseY = true) {
 		var retval = {};
 		let indexX = props.indexOf("x=");
 		if(indexX !== -1) {
@@ -183,7 +190,7 @@ class commonFunctions {
 				if(props[i] == " ") { break; }
 				retval.y += props[i];
 			}
-			retval.y = -Number(retval.y);
+			retval.y = reverseY ? -Number(retval.y) : Number(retval.y);
 		}
 		let indexT = props.indexOf("time=");
 		if(indexT !== -1) {
@@ -212,6 +219,15 @@ class commonFunctions {
 			}
 			retval.alpha = Number(retval.alpha);
 		}
+		let indexS = props.indexOf("speed=");
+		if(indexS !== -1) {
+			retval.speed = "";
+			for(let i = indexS + 6; i < props.length; ++i) {
+				if(props[i] == " ") { break; }
+				retval.speed += props[i];
+			}
+			retval.speed = Number(retval.speed);
+		}
 		return retval;
 	}
 }

Js/Main.js

@@ -7,7 +7,7 @@ const pixiApp = {
 
 const utage = new UtageInfo();
 const textFunc = new TextFunctions();
-const audio = new audioController();
+const audio = new audioController(utage);
 const player = new Player(pixiApp, utage, textFunc, audio);
 const context = new (window.AudioContext || window.webkitAudioContext)();
 const languages = ["eng", "jpn"];
@@ -17,6 +17,8 @@ let selectedLang = "eng";
 let screenw = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
 let screenh = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
 let screenSizeTimeout = undefined;
+let isMuted = false;
+let volume = 0.5;
 
 function onBodyLoaded() {
 	bodyLoaded = true;
@@ -38,6 +40,19 @@ function onBodyLoaded() {
 (function checkIsLoaded() {
 	if(bodyLoaded) {
 		document.getElementById('loading-font').style.cssText = "display: none;";
+		volume = localStorage.getItem('volume') || 0.5;
+		volume = Number(volume);
+		audio.changeVolume(volume);
+		document.getElementById('volume-range').value = volume * 100;
+		isMuted = localStorage.getItem('ismuted') || false;
+		if(isMuted === "false") { isMuted = false; }
+		else if(isMuted === "true") { isMuted = true; }
+		audio.mute(isMuted);
+		if(isMuted) {
+			document.getElementById('mute-button').innerText = "🔇";
+		} else {
+			document.getElementById('mute-button').innerText = "🔊";
+		}
 	}
 	if(utageLoaded) {
 		document.getElementById('loading-utage').style.cssText = "display: none;";
@@ -115,6 +130,35 @@ function hideUiClicked(event) {
 	player.hideUiClicked(event);
 }
 
+function dialogScrollUp(event) {
+	event.preventDefault();
+	event.stopPropagation();
+	textFunc.scrollTextUp();
+}
+
+function dialogScrollDown(event) {
+	event.preventDefault();
+	event.stopPropagation();
+	textFunc.scrollTextDown();
+}
+
+function toggleMute(event) {
+	isMuted = !isMuted;
+	audio.mute(isMuted);
+	localStorage.setItem('ismuted', isMuted);
+	if(isMuted) {
+		document.getElementById('mute-button').innerText = "🔇";
+	} else {
+		document.getElementById('mute-button').innerText = "🔊";
+	}
+}
+
+function onVolumeChange(event) {
+	let vol = event.currentTarget.value / 100;
+	audio.changeVolume(vol);
+	localStorage.setItem('volume', vol);
+}
+
 function onWindowResize(event) {
 	if(screenSizeTimeout) {
 		clearTimeout(screenSizeTimeout);

Js/Player.js

@@ -32,6 +32,7 @@ class Player {
 		this.center = {x: ((baseDimensions.width / 2) * this.resolutionScale), y: ((baseDimensions.height / 2) * this.resolutionScale) };
 		this.assetLoadPercent = 0;
 		this.audioLoadPercent = 0;
+		this.playingVoice = undefined;
 	}
 	
 	playFile() {
@@ -162,8 +163,6 @@ class Player {
 			//center the position of the container then offset it by the value in the layer info
 			let x = (((baseDimensions.width / 2) + Number(l.X)) * this.resolutionScale);
 			let y = (((baseDimensions.height / 2) - Number(l.Y)) * this.resolutionScale);
-			//let x = (Number(l.X) * this.resolutionScale);
-			//let y = (Number(l.Y) * this.resolutionScale);
 			cont.position.set(x, y);
 			cont.visible = false;
 		}
@@ -249,8 +248,7 @@ 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) {
-				try
+				try {
-				{
 					let l = this.lerpTargets[i];
 					l.curTime += deltaTime;
 					if(l.curTime < 0) { continue; }
@@ -264,8 +262,29 @@ class Player {
 							continue;
 						}
 					}
+					switch(l.type) {
+						case "shake": {
+							if(pos === 1) {
+								if(l.object instanceof HTMLElement) {
+									l.object.style = "";
+								} else {
+									l.object.position.set(l.initV.x, l.initV.y);
+								}
+							} else {
+								let x = Math.floor(Math.random() * (l.finalV.x * (1-pos)));
+								let y = Math.floor(Math.random() * (l.finalV.y * (1-pos)));
+								if(l.object instanceof HTMLElement) {
+									l.object.style = `transform: translate(${x}px, ${y}px);`;
+								} else {
+									l.object.position.set(x, y);
+								}
+							}
+							break;
+						}
+						default: {
 							let newValue = commonFunctions.lerp(l.initV, l.finalV, pos, inter);
 							let split = l.type.split(".");
+							if(split[0] == 'scale') { debugger; }
 							switch(split.length) {
 								case 1:
 									l.object[split[0]] = newValue;
@@ -276,6 +295,9 @@ class Player {
 								default:
 									continue;
 							}
+							break;
+						}
+					}
 				} catch(error) {
 					//If we got an exception during this it probably means the object doesnt exist anymore so just remove it.
 					toRemove.push(i);
@@ -418,14 +440,26 @@ class Player {
 					this.processTween(delta, cur);
 					break;
 				case "bgm":
+					if(!this.utage.soundInfo[cur.Arg1]) {
+						break;
+					}
+					this.audio.playSound(cur.Arg1, 'bgm');
 					break;
 				case "stopbgm":
+					this.audio.stopSound('bgm');
 					break;
 				case "se":
+					if(!this.utage.soundInfo[cur.Arg1]) {
 						break;
-				case "shake":
+					}
+					this.audio.playSound(cur.Arg1, 'se');
 					break;
+				case "shake": {
+					this.processShake(delta, cur);
+					break;
+				}
 				case "henshin01_bgmoff":
+					this.audio.stopSound('bgm');
 					this.checkPutCharacterScreen(cur, true);
 					break;
 				default:
@@ -502,6 +536,9 @@ class Player {
 	}
 	
 	checkPutText(cur) {
+		if(this.playingVoice) {
+			this.audio.stopSound(this.playingVoice);
+		}
 		if(!cur.Command && cur.Arg1 && cur.Text) {
 			//If its chracter off screen text
 			var text = cur.English ? (utage.currentTranslation[cur.English] || cur.Text) : cur.Text;
@@ -541,6 +578,10 @@ class Player {
 			this.text.dialogText(true, commonFunctions.convertUtageTextTags(text));
 			this.manualNext = true;
 		}
+		if(cur.Voice) {
+			this.playingVoice = cur.Voice;
+			this.audio.playSound(cur.Voice);
+		}
 	}
 	
 	processTween(delta, cur) {
@@ -587,24 +628,43 @@ class Player {
 			}
 			case "punchposition": {
 				let props = commonFunctions.getPropertiesFromTweenCommand(cur.Arg3);
-				if(!props.time) { props.time = 0.5; }
+				if(!props.time) { props.time = 500; }
 				if(!cur.Arg6 || cur.Arg6 !== "NoWait") {
 					this.waitTime = props.time + (props.delay || 0);
 				}
 				if(props.x) {					
 					this.lerpTargets.push({type: 'position.x', object: curChar.sprite, curTime: 0 - (props.delay || 0), time: props.time, 
-					finalV: curChar.sprite.position.x + props.x, initV: curChar.sprite.position.x, inter: 'fullwait' });
+					finalV: curChar.sprite.position.x + props.x, initV: curChar.sprite.position.x, inter: 'dampsin' });
 				}
 				if(props.y) {
 					this.lerpTargets.push({type: 'position.y', object: curChar.sprite, curTime: 0 - (props.delay || 0), time: props.time, 
-					finalV: curChar.sprite.position.y + props.y, initV: curChar.sprite.position.y, inter: 'fullwait' });
+					finalV: curChar.sprite.position.y + props.y, initV: curChar.sprite.position.y, inter: 'dampsin' });
 				}
 				break;
 			}
+			case "scaleto": {
+				let props = commonFunctions.getPropertiesFromTweenCommand(cur.Arg3, false);
+				if(!props.time) { props.time = 500; }
+				//cuz I don't care about their values that make no sense when everything else uses time.
+				if(props.speed) { props.time = props.speed * 1000; }
+				if(!cur.Arg6 || cur.Arg6 !== "NoWait") {
+					this.waitTime = props.time + (props.delay || 0);
+				}
+				if(props.x) {
+					this.lerpTargets.push({type: 'scale.x', object: curChar.sprite, curTime: 0 - (props.delay || 0), time: props.time, 
+					finalV: curChar.sprite.scale.x * props.x, initV: curChar.sprite.scale.x });
+				}
+				if(props.y) {
+					this.lerpTargets.push({type: 'scale.y', object: curChar.sprite, curTime: 0 - (props.delay || 0), time: props.time, 
+					finalV: curChar.sprite.scale.y * props.y, initV: curChar.sprite.scale.y });
+				}
+			}
 			case "colorto": {
 				let props = commonFunctions.getPropertiesFromTweenCommand(cur.Arg3);
 				if(props.alpha) {
 					if(props.time) {
+						this.lerpTargets.push({type: 'alpha', object: curChar.sprite, curTime: 0 - (props.delay || 0), time: props.time, 
+						finalV: props.alpha, initV: curChar.sprite.alpha });
 					} else {
 						curChar.sprite.alpha = 0;
 					}
@@ -613,6 +673,37 @@ class Player {
 		}
 	}
 	
+	processShake(delta, cur) {
+		let obj = cur.Arg1;
+		switch(obj.toLowerCase()) {
+			case "camera": {
+				let props = commonFunctions.getPropertiesFromTweenCommand(cur.Arg3);
+				if(!props.time) { props.time = 1000; }
+				if(!cur.Arg6 || cur.Arg6 !== "NoWait") {
+					this.waitTime = props.time + (props.delay || 0);
+				}
+				if(!props.x) { props.x = 30; }
+				if(!props.y) { props.y = 30; }
+				let stage = this.pixi.app.stage.position;
+				this.lerpTargets.push({type: 'shake', object: this.pixi.app.stage, curTime: 0 - (props.delay || 0), time: props.time, 
+				finalV: {x: props.x + stage.x, y: props.y + stage.y}, initV: {x: stage.x, y: stage.y} });
+				break;
+			}
+			case "messagewindow": {
+				let props = commonFunctions.getPropertiesFromTweenCommand(cur.Arg3);
+				if(!props.time) { props.time = 1000; }
+				if(!cur.Arg6 || cur.Arg6 !== "NoWait") {
+					this.waitTime = props.time + (props.delay || 0);
+				}
+				if(!props.x) { props.x = 30; }
+				if(!props.y) { props.y = 30; }
+				this.lerpTargets.push({type: 'shake', object: document.getElementById('dialog-box'), curTime: 0 - (props.delay || 0), time: props.time, 
+				finalV: {x: props.x, y: props.y}, initV: {x: 0, y: 0} });
+				break;
+			}
+		}
+	}
+
 	processEndCommand(delta) {
 		let cur = this.currentCommand;
 		switch(cur.Command) {
@@ -680,9 +771,6 @@ class Player {
 	}
 	
 	updateResolution(res) {
-		//this.resolutionScale = res.height / baseDimensions.height;
-		//this.center = {x: ((baseDimensions.width / 2) * this.resolutionScale), y: ((baseDimensions.height / 2) * this.resolutionScale) };
-		//this.pixi.app.renderer.resolution = res.height / baseDimensions.height;
 		let newScale = res.height / baseDimensions.height;
 		this.pixi.app.stage.scale.set(newScale, newScale);
 		this.pixi.app.renderer.resize(res.width, res.height);
@@ -714,7 +802,9 @@ class Player {
 				this.hasMoreText = false;
 				this.audioLoadPercent = 0;
 				this.assetLoadPercent = 0;
+				this.playingVoice = undefined;
 				this.text.resetAll();
+				this.audio.resetAll();
 				resolve();
 			} catch (error) {
 				reject(error);

Js/TextFunctions.js

@@ -8,6 +8,8 @@ class TextFunctions {
 		this.dialogBox = undefined;
 		this.character = undefined;
 		this.dialog = undefined;
+		this.scrollControls = undefined;
+		this.nextIndicator = undefined;
 		this.dialogToDisplay = {timeout: undefined, fullText: "", text: "", curPos: 0};
 		this.textScrollSpeedMs = 40;
 		this.scrollingText = false;
@@ -22,34 +24,38 @@ class TextFunctions {
 		this.character = document.getElementById('character');
 		this.dialog = document.getElementById('dialog');
 		this.dialogInner = document.getElementById('dialog-inner');
+		this.scrollControls = document.getElementById('dialog-scroll');
+		this.nextIndicator = document.getElementById('dialog-next');
 	}
 	
 	titleText(show, text) {
 		if(text != undefined) {
 			this.title.innerHTML = text;
 		}
-		this.title.style = show ? "opacity: 1;" : "opacity: 0;";
+		this.title.classList.toggle('hidden', !show);
 	}
 	
 	divaText(show, text) {
 		if(text != undefined) {
 			this.diva.innerHTML = text;
 		}
-		this.diva.style = show ? "opacity: 1;" : "opacity: 0;";
+		this.diva.classList.toggle('hidden', !show);
 	}
 	
 	characterName(show, text) {
 		if(text != undefined) {
 			this.character.innerHTML = text;
 		}
-		this.mainUi.style = show ? "opacity: 1;" : "opacity: 0;";
+		this.mainUi.classList.toggle('hidden', !show);
-		this.character.style = show ? "opacity: 1;" : "opacity: 0;";
+		this.character.classList.toggle('hidden', !show);
 	}
 	
 	dialogText(show, text) {
 		if(this.lineHeight == -1) {
 			this.lineHeight = Number(window.getComputedStyle(this.dialog, null).getPropertyValue("line-height").replace('px', ''));
 		}
+		this.showNextIndicator(false);
+		this.showScrollControls(false);
 		if(text != undefined) {
 			if(this.dialogToDisplay.timeout) {
 				clearTimeout(this.dialogToDisplay.timeout);
@@ -69,8 +75,8 @@ class TextFunctions {
 				this.dialogToDisplay.timeout = setTimeout(putText.bind(this), this.textScrollSpeedMs);
 			}
 		}
-		this.mainUi.style = show ? "opacity: 1;" : "opacity: 0;";
+		this.mainUi.classList.toggle('hidden', !show);
-		this.dialogBox.style = show ? "opacity: 1;" : "opacity: 0;";
+		this.dialogBox.classList.toggle('hidden', !show);
 		
 		//This is based off https://github.com/mattboldt/typed.js/
 		function putText() {
@@ -78,6 +84,7 @@ class TextFunctions {
 			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.showNextIndicator(true);
 				this.scrollingText = false;
 				return;
 			} else {
@@ -85,8 +92,10 @@ class TextFunctions {
 				const nextString = this.dialogToDisplay.text.substr(0, this.dialogToDisplay.curPos);
 				this.dialogInner.innerHTML = nextString;
 				let lHeight = this.lineHeight * 2
-				if(this.dialogInner.offsetHeight > lHeight) {
+				//the +5 is just to give a bit of tolerance
+				if(this.dialogInner.offsetHeight > lHeight + 5) {
 					this.dialog.scrollTop = this.dialogInner.offsetHeight - lHeight;
+					this.showScrollControls(true);
 				}
 			}
 			
@@ -100,10 +109,12 @@ class TextFunctions {
 			this.dialogToDisplay.timeout = undefined;
 		}
 		this.dialogInner.innerHTML = this.dialogToDisplay.fullText;
-		let lHeight = this.lineHeight * 2
+		let lHeight = this.lineHeight * 2;
-		if(this.dialogInner.offsetHeight > lHeight) {
+		if(this.dialogInner.offsetHeight > lHeight + 5) {
 			this.dialog.scrollTop = this.dialogInner.offsetHeight - lHeight;
+			this.showScrollControls(true);
 		}
+		this.showNextIndicator(true);
 		this.scrollingText = false;
 	}
 	
@@ -125,10 +136,36 @@ class TextFunctions {
 		return curStrPos;
 	}
 	
+	showScrollControls(show) {
+		this.scrollControls.classList.toggle('hidden', !show);
+	}
+	
+	scrollTextUp() {
+		let lHeight = this.lineHeight * 2;
+		let val = this.dialog.scrollTop - lHeight;
+		if(val < 0) {
+			val = 0;
+		}
+		this.dialog.scrollTop = val;
+	}
+	
+	scrollTextDown() {
+		let lHeight = this.lineHeight * 2;
+		let val = this.dialog.scrollTop + lHeight;
+		if(val > this.dialogInner.offsetHeight - lHeight) {
+			val = this.dialogInner.offsetHeight - lHeight;
+		}
+		this.dialog.scrollTop = val;
+	}
+	
+	showNextIndicator(show) {
+		this.nextIndicator.classList.toggle('hidden', !show);
+	}
+	
 	hideUi(show) {
-		this.mainUi.style = show ? "opacity: 1;" : "opacity: 0;";
+		this.mainUi.classList.toggle('hidden', !show);
-		this.dialogBox.style = show ? "opacity: 1;" : "opacity: 0;";
+		this.dialogBox.classList.toggle('hidden', !show);
-		this.character.style = show ? "opacity: 1;" : "opacity: 0;";
+		this.character.classList.toggle('hidden', !show);
 	}
 	
 	resetAll() {
@@ -136,10 +173,12 @@ class TextFunctions {
 		this.diva.innerHTML = '';
 		this.character.innerHTML = '';
 		this.dialogInner.innerHTML = '';
-		this.title.style = "opacity: 0;";
+		this.title.classList.add('hidden');
-		this.diva.style = "opacity: 0;";
+		this.diva.classList.add('hidden');
-		this.mainUi.style = "opacity: 0;";
+		this.mainUi.classList.add('hidden');
-		this.character.style = "opacity: 0;";
+		this.character.classList.add('hidden');
-		this.dialogBox.style = "opacity: 0;";
+		this.dialogBox.classList.add('hidden');
+		this.scrollControls.classList.add('hidden');
+		this.nextIndicator.classList.add('hidden');
 	}
 }

Js/UtageParse.js

@@ -14,6 +14,7 @@ class UtageInfo {
 		this.soundInfo = {};
 		this.textureInfo = {};
 		this.currentTranslation = {};
+		this.bgmLoopData = {};
 	}
 	
 	loadUtageSettings(resolve, reject) {
@@ -26,7 +27,8 @@ class UtageInfo {
 				commonFunctions.getFileText(`${this.rootDirectory}XDUData/Utage/Diva/Settings/Param.tsv`),
 				//commonFunctions.getFileText(`${this.rootDirectory}XDUData/Utage/Diva/Settings/Scenario.tsv`),
 				commonFunctions.getFileText(`${this.rootDirectory}XDUData/Utage/Diva/Settings/Sound.tsv`),
-				commonFunctions.getFileText(`${this.rootDirectory}XDUData/Utage/Diva/Settings/Texture.tsv`)
+				commonFunctions.getFileText(`${this.rootDirectory}XDUData/Utage/Diva/Settings/Texture.tsv`),
+				commonFunctions.getFileJson(`${this.rootDirectory}Js/bgmLoop.json`),
 			];
 			Promise.all(promises)
 			.then((success) => {
@@ -41,6 +43,7 @@ class UtageInfo {
 				this.parseParamInfo(success[4]);
 				this.parseSoundInfo(success[5]);
 				this.parseTextureInfo(success[6]);
+				this.bgmLoopData = success[7];
 				resolve();
 			}, (failure) => {
 				reject(failure);
@@ -186,6 +189,7 @@ class UtageInfo {
 				let read = commonFunctions.readLine(line, headers);
 				if(read && read.Label) {
 					if(read.FileName && read.Type) {
+						read.origFileName = read.FileName;
 						if(!read.FileName.includes('.')) {
 							read.FileName = `${read.FileName}.opus`;
 						}

Player.html

@@ -7,6 +7,7 @@
 		<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.5.1/pixi.min.js"></script> -->
 		<script src="Js/Pixi.min.js"></script>
 		<script src="Js/Common.js"></script>
+		<!--<script src="Js/Typed.min.js"></script>-->
 		<script src="Js/TextFunctions.js"></script>
 		<script src="Js/UtageParse.js"></script>
 		<script src="Js/Audio.js"></script>
@@ -20,22 +21,34 @@
 		</div>
 		<div id="parent-container" class="fade-in centered">
 			<div id="other-controls-container">
-				<div id="volume-control">🔊</div>
+				<div id="volume-control">
+					<span onclick="toggleMute(event)" id="mute-button">🔊</span>
+					<input onchange="onVolumeChange(event)" id="volume-range" value="50" type="range" min="0" max="100" step="1"/>
+				</div>
 				<select id="select-mission" onchange="missionChanged(event);"></select>
 			</div>
 			<!-- Im doing weird shit so that text container is always the base resolution of XDU (1334, 750). 
 			The canvas then resizes as the canvas does and the text-container uses transform scale based off this resolution -->
 			<div id="app-container" onclick="onMainClick(event);">
 				<div id="text-container">
-					<img id="main-ui-img" src="Images/newui_main.png" style="opacity: 0;"/>
+					<img id="main-ui-img" class="hidden" src="Images/newui_main.png"/>
-					<div id="title" style="opacity: 0;">Title Text</div>
+					<div id="title" class="hidden">Title Text</div>
-					<div id="diva" style="opacity: 0;">Diva Text</div>
+					<div id="diva" class="hidden">Diva Text</div>
-					<div id="dialog-box" style="opacity: 0;">
+					<div id="dialog-box" class="hidden">
 						<div id="ui-buttons" onclick="hideUiClicked(event)">
 							<img class="ui-button" src="Images/hide_button.png"/>
 						</div>
 						<div id="character"></div>
 						<div id="dialog">
+							<div id="dialog-controls">
+								<div id="dialog-scroll" class="hidden">
+									<img id="dialog-scroll-up" src="Images/next_icon.png" onclick="dialogScrollUp(event)"></img>
+									<img src="Images/next_icon.png" onclick="dialogScrollDown(event)"></img>
+								</div>
+								<div id="dialog-next" class="hidden">
+									<img src="Images/next_icon.png"></img>
+								</div>
+							</div>
 							<div id="dialog-inner"></div>
 						</div>
 					</div>