Language selection.

Gulpfile

.gitignore

@@ -2,3 +2,4 @@
 /
 web.config
 /Js/Typed
+/node_modules

Css/main.css

@@ -39,6 +39,19 @@
 	src: url(../Fonts/SourceCodePro-Regular.woff2) format('woff');
 }
 
+@-webkit-keyframes smallbounce { 
+	from { transform: translate(0, 5px); } 
+	to  { transform: translate(0, -5px); } 
+}
+@-moz-keyframes smallbounce { 
+	from { transform: translate(0, 5px); } 
+	to { transform: translate(0, -5px); } 
+}
+@keyframes smallbounce {
+    from { transform: translate(0, 5px); }
+    to  { transform: translate(0, -5px); }
+}
+
 .centered { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; }
 
 .hidden { opacity: 0; }
@@ -75,7 +88,7 @@
 
 #dialog #dialog-controls { position: fixed; right: 0; display: flex; height: 135px; align-items: center; }
 
-#dialog-controls #dialog-next { margin-right: 37px; }
+#dialog-controls #dialog-next { margin-right: 37px; animation: smallbounce 0.5s ease-in-out 0s infinite alternate; }
 
 #dialog-next img { height: 80px; }
 
@@ -85,10 +98,16 @@
 
 #dialog-scroll img { height: 35px; }
 
-#other-controls-container { display: flex; width: 100; justify-content: center; }
+#other-controls-container { display: flex; width: 550px; justify-content: center; }
 
-#select-mission { max-width: 300px; }
+#select-mission { min-width: 0; }
+
+#select-language { margin-left: 10px; }
 
 #volume-control { display: flex; margin-right: 10px; }
 
-#volume-control #mute-button { cursor: pointer; }
+#volume-control #mute-button { cursor: pointer; }
+
+@media screen and (max-width: 550px) {
+	#other-controls-container { width: 100vw; }
+}

Js/Main.js

@@ -14,6 +14,7 @@ const languages = ["eng", "jpn"];
 let bodyLoaded = false;
 let utageLoaded = false;
 let selectedLang = "eng";
+let currentMission = undefined;
 let screenw = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
 let screenh = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
 let screenSizeTimeout = undefined;
@@ -40,19 +41,7 @@ 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 = "🔊";
-		}
+		loadLocalStorage();
 	}
 	if(utageLoaded) {
 		document.getElementById('loading-utage').style.cssText = "display: none;";
@@ -68,6 +57,7 @@ function onBodyLoaded() {
 function onAllLoaded(success) {
 	textFunc.findTextElements();
 	buildMissionSelectList();
+	buildLanguageList();
 	let appContainer = document.getElementById('app-container');
 	appContainer.appendChild(pixiApp.app.view);
 	setTimeout(() => {
@@ -77,6 +67,28 @@ function onAllLoaded(success) {
 	}, 0);
 }
 
+function loadLocalStorage() {
+	//audio
+	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 = "🔊";
+	}
+	//language
+	let lang = localStorage.getItem('language') || "eng";
+	if(languages.includes(lang)) {
+		selectedLang = lang;
+	}
+}
+
 function buildMissionSelectList() {
 	let selectBox = document.getElementById('select-mission');
 	selectBox.innerHTML = '';
@@ -97,13 +109,26 @@ function buildMissionSelectList() {
 	}
 }
 
+function buildLanguageList() {
+	let selectBox = document.getElementById('select-language');
+	selectBox.innerHTML = '';
+	for(let i = 0; i < languages.length; ++i) {
+		let opt = document.createElement('option');
+		opt.setAttribute('value', languages[i]);
+		opt.innerText = languages[i];
+		selectBox.appendChild(opt);
+	}
+	selectBox.value = selectedLang;
+}
+
 function missionChanged(event) {
 	if(!event || !event.currentTarget || !event.currentTarget.value || event.currentTarget.value === '{Select}') { return; }
 	
 	let newMission = utage.availableMissions[event.currentTarget.value.split('|')[0]];
+	currentMission = newMission;
 	let promises = [
 		utage.parseMissionFile(`${utage.rootDirectory}XDUData/${newMission.Path.replace('Asset/', '').replace('.utage', '').replace('.tsv', '_t.tsv')}`),
-		utage.loadMissionTranslation(`${utage.rootDirectory}XDUData/${newMission.Path.replace('Asset/', '').replace('.utage', '').replace('.tsv', `_translations_${selectedLang}.json`)}`),
+		utage.loadMissionTranslation(`${utage.rootDirectory}XDUData/${newMission.Path.replace('Asset/', '').replace('.utage', '').replace('.tsv', `_translations_${selectedLang}.json`)}`, selectedLang),
 		player.resetAll()
 	];
 	
@@ -112,16 +137,25 @@ function missionChanged(event) {
 		let res = player.playFile()
 		.then((success) => {
 			player.resetAll();
+			currentMission = undefined;
 			debugger;
 		}, (failure) => {
 			debugger;
+			currentMission = undefined;
 			console.log(failure);
 		});
 	}, (failure) => {
+		currentMission = undefined;
 		console.log(failure);
 	});
 }
 
+function languageChanged(event) {
+	if(!event || !event.currentTarget || !event.currentTarget.value || event.currentTarget.value === '{Select}' || !languages.includes(event.currentTarget.value)) { return; }
+	selectedLang = event.currentTarget.value;
+	utage.loadMissionTranslation(`${utage.rootDirectory}XDUData/${currentMission.Path.replace('Asset/', '').replace('.utage', '').replace('.tsv', `_translations_${selectedLang}.json`)}`, selectedLang);
+}
+
 function onMainClick(event) {
 	player.onMainClick(event);
 }

Js/Player.js

@@ -284,7 +284,6 @@ class Player {
 						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;
@@ -805,6 +804,7 @@ class Player {
 				this.playingVoice = undefined;
 				this.text.resetAll();
 				this.audio.resetAll();
+				this.utage.resetTranslations();
 				resolve();
 			} catch (error) {
 				reject(error);

Js/TextFunctions.js

@@ -8,12 +8,13 @@ class TextFunctions {
 		this.dialogBox = undefined;
 		this.character = undefined;
 		this.dialog = undefined;
+		this.textScrollSpeedMs = 35;
 		this.scrollControls = undefined;
 		this.nextIndicator = undefined;
 		this.dialogToDisplay = {timeout: undefined, fullText: "", text: "", curPos: 0};
-		this.textScrollSpeedMs = 40;
 		this.scrollingText = false;
 		this.lineHeight = -1;
+		this.textHistory = [];
 	}
 	
 	findTextElements() {
@@ -67,6 +68,7 @@ class TextFunctions {
 			} else {
 				this.dialogToDisplay.text = text;
 				this.dialogToDisplay.fullText = text;
+				this.textHistory.push({ character: this.character.innerHTML, text: text });
 				this.dialogToDisplay.curPos = 0;
 				this.dialogInner.innerHTML = "";
 				//this.dialogInner.innerHTML = this.dialogToDisplay.text[0];
@@ -180,5 +182,12 @@ class TextFunctions {
 		this.dialogBox.classList.add('hidden');
 		this.scrollControls.classList.add('hidden');
 		this.nextIndicator.classList.add('hidden');
+		this.textHistory.length = 0;
+		if(this.dialogToDisplay.timeout) {
+			clearTimeout(this.dialogToDisplay.timeout);
+		}
+		this.dialogToDisplay = {timeout: undefined, fullText: "", text: "", curPos: 0};
+		this.scrollingText = false;
+		this.lineHeight = -1;
 	}
 }

Js/UtageParse.js

@@ -13,6 +13,7 @@ class UtageInfo {
 		this.paramInfo = {};
 		this.soundInfo = {};
 		this.textureInfo = {};
+		this.translations = {};
 		this.currentTranslation = {};
 		this.bgmLoopData = {};
 	}
@@ -77,16 +78,24 @@ class UtageInfo {
 		});
 	}
 	
-	loadMissionTranslation(file) {
+	loadMissionTranslation(file, key) {
 		return new Promise((resolve, reject) => {
-			commonFunctions.getFileJson(file)
-			.then((success) => {
-				this.currentTranslation = success;
+			if(this.translations[key]) {
+				debugger;
+				this.currentTranslation = this.translations[key];
 				resolve();
-			}, (failure) => {
-				this.currentTranslation = {};
-				resolve();
-			});
+			} else {
+				commonFunctions.getFileJson(file)
+				.then((success) => {
+					debugger;
+					this.translations[key] = success;
+					this.currentTranslation = success;
+					resolve();
+				}, (failure) => {
+					this.currentTranslation = {};
+					resolve();
+				});
+			}
 		});
 	}
 	
@@ -229,4 +238,9 @@ class UtageInfo {
 			}
 		}
 	}
+	
+	resetTranslations() {
+		this.translations = {};
+		this.currentTranslation = {};
+	}
 }

Player.html

@@ -6,15 +6,15 @@
 		<link rel="stylesheet" type="text/css" href="Css/main.css">
 		<!-- <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/Common.js"></script>
 		<script src="Js/TextFunctions.js"></script>
 		<script src="Js/UtageParse.js"></script>
 		<script src="Js/Audio.js"></script>
-		<script src="Js/Player.js"></script>
+		<script src="Js/Player.js"></script>-->
 	</head>
 	<body onload="onBodyLoaded()">
-		<script src="Js/Main.js"></script>
+		<!--<script src="Js/Main.js"></script>-->
+		<script src="Js/XduPlayer.min.js"></script>
 		<div id="loading-container" class="centered">
 			<h2 id="loading-utage">Loading Utage Data...</h2>
 			<h2 id="loading-font">Loading Fonts...</h2>
@@ -26,6 +26,7 @@
 					<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>
+				<select id="select-language" onchange="languageChanged(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 -->

gulpfile.js

@@ -0,0 +1,24 @@
+const gulp = require('gulp');
+const concat = require('gulp-concat');
+const rename = require('gulp-rename');
+const uglify = require('gulp-uglify-es').default;
+
+
+const jsFiles = [
+"Js/Common.js",
+"Js/TextFunctions.js",
+"Js/UtageParse.js",
+"Js/Audio.js",
+"Js/Player.js",
+"Js/Main.js"
+];
+const jsDest = "Js";
+gulp.task('minify', function() {
+  // place code for your default task here
+  return gulp.src(jsFiles)
+        .pipe(concat('XduPlayer.js'))
+        .pipe(gulp.dest(jsDest))
+        .pipe(rename('XduPlayer.min.js'))
+        .pipe(uglify())
+        .pipe(gulp.dest(jsDest));
+});