Added translations for mission names/summaries.

Mission dropdown is now by mst id and mission id is selected in modal.
Added skip button for moving to next chapter within mstid.

Css/main.css

@@ -52,6 +52,8 @@
     to  { transform: translate(0, -5px); }
 }
 
+body { margin: 0; }
+
 .centered { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; }
 
 .hidden { opacity: 0; }
@@ -98,6 +100,8 @@
 
 #dialog-scroll img { height: 35px; }
 
+#title-container { margin-bottom: 2px; }
+
 #other-controls-container { display: flex; width: 550px; justify-content: center; }
 
 #select-mission { min-width: 0; }
@@ -122,9 +126,11 @@
 
 #mission-modal span { max-width: 100%; word-break: break-word; max-height: 120px; overflow: auto;}
 
-#mission-modal .mission-title { text-align: center; }
+#mission-modal .mission-title { font-weight: bold; text-align: center; }
 
-#mission-modal #mission-ids { margin-top: auto; width: 100%; display: flex; justify-content: space-around; }
+#mission-modal #mission-ids { margin-top: auto; width: 100%; display: flex; flex-direction: column; align-items: center; }
+
+#mission-modal #mission-ids div { display: flex; align-items: center; }
 
 #modal-buttons { bottom: 0; margin-top: 10px; width: 100%; display: flex; justify-content: space-between; }
 

Js/Common.js

@@ -45,6 +45,37 @@ class commonFunctions {
 		});
 	}
 	
+	static readQueryParameters() {
+		let params = {};
+		let indexOfStart = window.location.href.indexOf("?");
+		let toCheck = window.location.href.slice(indexOfStart + 1);
+		let name = "";
+		let value = "";
+		let nameStep = true;
+		for(let i = 0; i < toCheck.length; ++i) {
+			if(toCheck[i] === "=") {
+				name = name.toLowerCase();
+				params[decodeURIComponent(name)] = "";
+				nameStep = false
+				continue;
+			}
+			if(toCheck[i] === "&") {
+				params[name] = decodeURIComponent(value);
+				name = "";
+				value = "";
+				nameStep = true;
+				continue;
+			}
+			if(nameStep) {
+				name += toCheck[i];
+			} else {
+				value += toCheck[i];
+			}
+		}
+		params[name] = decodeURIComponent(value);
+		return params;
+	}
+	
 	static readLine(line, headers) {
 		if(line.startsWith('//')) {
 			return {comment: line};

Js/Main.js

@@ -13,8 +13,13 @@ const player = new Player(pixiApp, utage, textFunc, audio, shaders);
 const languages = ["eng", "jpn"];
 let bodyLoaded = false;
 let utageLoaded = false;
+let languagesLoaded = false;
 let selectedLang = "eng";
 let currentMission = undefined;
+let currentMissionMst = 0;
+let currentMissionIndex = 0;
+let currentMissionList = [];
+let urlParams = {};
 let screenw = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
 let screenh = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
 let screenSizeTimeout = undefined;
@@ -44,14 +49,14 @@ function onBodyLoaded() {
 		document.getElementById('loading-font').style.cssText = "display: none;";
 		loadLocalStorage();
 	}
-	if(utageLoaded) {
+	if(utageLoaded && languagesLoaded) {
 		document.getElementById('loading-utage').style.cssText = "display: none;";
 	}
-	if(bodyLoaded && utageLoaded) {
+	if(bodyLoaded && utageLoaded && languagesLoaded) {
 		document.getElementById('loading-container').style.cssText = "opacity: 0;";
 		onAllLoaded();
 	} else {
-		setTimeout(checkIsLoaded, 300);
+		setTimeout(checkIsLoaded, 200);
 	}
 })();
 
@@ -65,6 +70,7 @@ function onAllLoaded(success) {
 		document.getElementById('parent-container').style.cssText = "opacity: 1;";
 		onWindowResize();
 		window.addEventListener("resize", onWindowResize);
+		checkQueryParameters();
 	}, 0);
 }
 
@@ -91,7 +97,13 @@ function loadLocalStorage() {
 		if(languages.includes(lang)) {
 			selectedLang = lang;
 		}
-		utage.setTranslationLanguage(selectedLang, '');
+		utage.setTranslationLanguage(selectedLang, '')
+		.then((success) => {
+			languagesLoaded = true;
+		}, (failure) => {
+			languagesLoaded = true;
+			console.log(failure);
+		});
 	} catch(error) {
 		console.log(error);
 	}
@@ -107,11 +119,16 @@ function buildMissionSelectList() {
 			opt.innerText = 'Select Mission';
 		} else {
 			let m = utage.missionsList[i];
-			if(!m.includes('MA3.5-')) {
+			//Only allowing 3.5 right now
+			if(!(m.MstId >= 104001 && m.MstId <= 104008)) {
 				continue;
 			}
-			opt.setAttribute('value', m);
-			opt.innerText = m.replace('|', ' - ');
+			opt.setAttribute('value', m.MstId);
+			let name = m.Name;
+			if(utage.missionTranslations[m.MstId]) {
+				name = utage.missionTranslations[m.MstId].Name || name;
+			}
+			opt.innerText = name;
 		}
 		selectBox.appendChild(opt);
 	}
@@ -129,27 +146,46 @@ function buildLanguageList() {
 	selectBox.value = selectedLang;
 }
 
+function checkQueryParameters() {
+	urlParams = commonFunctions.readQueryParameters();
+	if(urlParams['mstid'] && urlParams['id'] && utage.groupedMissions[urlParams['mstid']] && utage.groupedMissions[urlParams['mstid']].Missions[urlParams['id']]) {
+		missionChanged(urlParams['mstid'], urlParams['id']);
+	}
+}
+
 function missionDropDownChanged(event) {
 	if(!event || !event.currentTarget || !event.currentTarget.value || event.currentTarget.value === '{Select}') { return; }
 	let cont = document.getElementById("modal-container");
-	let misId = event.currentTarget.value.split('|')[0];
-	let mis = utage.availableMissions[misId];
+	let misId = event.currentTarget.value;
+	let mis = utage.groupedMissions[misId];
 	if(!mis) { console.log(`Mission ${misId} not found`); return; }
-	cont.innerHTML = '' +
-	'<div id="mission-modal" class="modal">' +
-		`<span class="mission-title">Name: ${mis.Name || 'none'}</span>` +
-		`<img id="mission-detail" src="${utage.rootDirectory}XDUData/Asset/Image/Quest/Snap/Detail/${mis.MstId}.png"/>` +
-		`<img id="mission-icon" src="${utage.rootDirectory}XDUData/Asset/Image/Quest/Snap/Icon/${mis.MstId}.png"/>` +
-		`<span>Summary: ${mis.SummaryText || 'none'}</span>` +
-		'<div id="mission-ids">' +
-			`<span>MstId: ${mis.MstId}</span>` +
-			`<span>Id: ${mis.Id}</span>` +
-		'</div>' +
-		'<div id="modal-buttons">' +
-			'<button onclick="closeMissionModal(event, false)">Close</button>' +
-			`<button onclick="missionChanged(${misId})">Play</button>` +
-		'</div>' +
-	'</div>';
+	let name = mis.Name;
+	let summary = mis.SummaryText;
+	if(utage.missionTranslations[mis.MstId]) {
+		name = utage.missionTranslations[mis.MstId].Name || name;
+		summary = utage.missionTranslations[mis.MstId].SummaryText || summary;
+	}
+	let chapterSelect = '<div><span>Chapter Select:</span><select id="ChapterSelect">';
+	for(let k of Object.keys(mis.Missions)) {
+		var m = mis.Missions[k];
+		chapterSelect += `<option value="${m.Id}">${m.Id}</option>`
+	}
+	chapterSelect += '</select></div>';
+	cont.innerHTML = `
+	<div id="mission-modal" class="modal">
+		<span class="mission-title">${name || 'none'}</span>
+		<img id="mission-detail" src="${utage.rootDirectory}XDUData/Asset/Image/Quest/Snap/Detail/${mis.MstId}.png"/>
+		<img id="mission-icon" src="${utage.rootDirectory}XDUData/Asset/Image/Quest/Snap/Icon/${mis.MstId}.png"/>
+		<span>Summary: ${summary || 'none'}</span>
+		<div id="mission-ids">
+			${chapterSelect}
+		</div>
+		<div id="modal-buttons">
+			<button onclick="closeMissionModal(event, false)">Close</button>
+			<span>MstId: ${mis.MstId}</span>
+			<button onclick="missionChanged(${mis.MstId})">Play</button>
+		</div>
+	</div>`;
 	document.getElementById("click-catcher").style.cssText = 'display: flex;';
 	cont.style.cssText = 'display: flex;';
 }
@@ -166,7 +202,15 @@ function closeMissionModal(event, wasStarted) {
 	cont.innerHTML = '';
 }
 
-function missionChanged(value) {
+function missionChanged(mstId, value) {
+	let mst = utage.groupedMissions[mstId];
+	let name = mst.Name;
+	if(utage.missionTranslations[mstId]) {
+		name = utage.missionTranslations[mstId].Name || name;
+	}
+	if(!value) {
+		value = document.getElementById("ChapterSelect").value;
+	}
 	if(!audio) {
 		audio = new audioController(utage);
 		audio.changeVolume(volume);
@@ -175,27 +219,33 @@ function missionChanged(value) {
 	}
 	player.resetAll()
 	.then((success) => {
-		let newMission = utage.availableMissions[value];
+		let newMission = mst.Missions[value];
+		checkMissionList(mst.Missions, value);
 		currentMission = newMission;
+		currentMissionMst = mstId;
 		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`)}`)
 		];
 		closeMissionModal(undefined, true);
-		
 		Promise.all(promises)
 		.then((success) => {
-			let res = player.playFile()
+			document.getElementById("playing-title").innerText = `${name} (${value})`;
+			player.playFile()
 			.then((success) => {
-				player.resetAll();
-				currentMission = undefined;
+				if(currentMissionIndex !== currentMissionList.length - 1) {
+					missionChanged(currentMissionMst, mst.Missions[currentMissionList[currentMissionIndex+1]].Id)
+				} else {
+					player.resetAll();
+					resetMissions();
+				}
 			}, (failure) => {
 				player.resetAll();
-				currentMission = undefined;
+				resetMissions();
 				console.log(failure);
 			});
 		}, (failure) => {
-			currentMission = undefined;
+			resetMissions();
 			console.log(failure);
 		});
 	}, (failure) => {
@@ -213,6 +263,33 @@ function languageChanged(event) {
 	utage.setTranslationLanguage(selectedLang, missionPath);
 }
 
+function checkMissionList(missions, currentvalue) {
+	currentMissionList = [];
+	let i = 0;
+	for(var m of Object.keys(missions)) {
+		currentMissionList.push(m);
+		if(m === currentvalue) {
+			currentMissionIndex = i;
+		}
+		++i;
+	}
+	if(currentMissionIndex + 1 === currentMissionList.length) {
+		document.getElementById("skip-button").style.cssText = "display: none;";
+	} else {
+		document.getElementById("skip-button").style.cssText = "display: inline-block;";
+	}
+}
+
+function resetMissions() {
+	currentMissionIndex = 0;
+	currentMissionList = [];
+	currentMission = undefined;
+	currentMissionMst = 0;
+	document.getElementById("skip-button").style.cssText = "display: inline-block;";
+	document.getElementById("playing-title").innerText = 'None';
+	document.getElementById('select-mission').value = '{Select}';
+}
+
 function onMainClick(event) {
 	player.onMainClick(event);
 }
@@ -221,6 +298,16 @@ function hideUiClicked(event) {
 	player.hideUiClicked(event);
 }
 
+function skipClicked(event) {
+	if(player.uiHidden) {
+		player.hideUiClicked(event);
+	} else if(player.runEvent && currentMissionIndex !== currentMissionList.length - 1) {
+		event.preventDefault();
+		event.stopPropagation();
+		missionChanged(currentMissionMst, utage.groupedMissions[currentMissionMst].Missions[currentMissionList[currentMissionIndex+1]].Id);
+	}
+}
+
 function dialogScrollUp(event) {
 	event.preventDefault();
 	event.stopPropagation();
@@ -263,6 +350,7 @@ function onWindowResize(event) {
 		screenw = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
 		screenh = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
 		let topContainerHeight = document.getElementById('other-controls-container').offsetHeight + 6;
+		topContainerHeight += document.getElementById('title-container').offsetHeight;
 		let res = commonFunctions.getNewResolution(baseDimensions, screenw, screenh, topContainerHeight);
 		player.updateResolution(res);
 		document.getElementById('app-container').style.cssText = `width: ${res.width}px; height: ${res.height}px;`;

Js/Player.js

@@ -426,6 +426,7 @@ class Player {
 	processCommand(delta) {
 		try {
 			let cur = this.currentCommand;
+			//No seriously this is a thing they did
 			if(cur.Arg2 === '＜Off>') {
 				cur.Arg2 = '<off>';
 			}

Js/UtageParse.js

@@ -5,7 +5,7 @@ class UtageInfo {
 	constructor() {
 		this.currentPlayingFile = [];
 		this.rootDirectory = ``;
-		this.availableMissions = {};
+		this.groupedMissions = {};
 		this.missionsList = [];
 		this.characterInfo = {};
 		this.layerInfo = {};
@@ -13,9 +13,10 @@ class UtageInfo {
 		this.paramInfo = {};
 		this.soundInfo = {};
 		this.textureInfo = {};
-		this.translationsInner = {};
 		this.currentTranslation = 'eng';
+		this.translationsInner = {};
 		this.charTranslationsInner = {};
+		this.missionTranslationsInner = {};
 		this.bgmLoopData = {};
 	}
 	
@@ -34,9 +35,9 @@ class UtageInfo {
 			];
 			Promise.all(promises)
 			.then((success) => {
-				this.availableMissions = success[0];
-				this.missionsList = Object.keys(this.availableMissions).map((k) => {
-					return `${this.availableMissions[k].Id}|${this.availableMissions[k].Name}`;
+				this.groupMissions(success[0]);
+				this.missionsList = Object.keys(this.groupedMissions).map((k) => {
+					return {Name: this.groupedMissions[k].Name, MstId: this.groupedMissions[k].MstId};
 				});
 				this.missionsList.sort();
 				this.parseCharacterInfo(success[1]);
@@ -79,6 +80,24 @@ class UtageInfo {
 		});
 	}
 	
+		
+	groupMissions(missions) {
+		for(let key of Object.keys(missions)) {
+			let mis = missions[key];
+			if(!this.groupedMissions[mis.MstId]) {
+				this.groupedMissions[mis.MstId] = {
+					Name: mis.Name,
+					SummaryText: mis.SummaryText,
+					MstId: mis.MstId,
+					Missions: {}
+				}
+				this.groupedMissions[mis.MstId].Missions[mis.Id] = { Id: mis.Id, Path: mis.Path };
+			} else {
+				this.groupedMissions[mis.MstId].Missions[mis.Id] = { Id: mis.Id, Path: mis.Path };
+			}
+		}
+	}
+	
 	get translations() {
 		return this.translationsInner[this.currentTranslation];
 	}
@@ -87,10 +106,15 @@ class UtageInfo {
 		return this.charTranslationsInner[this.currentTranslation];
 	}
 	
+	get missionTranslations() {
+		return this.missionTranslationsInner[this.currentTranslation];
+	}
+	
 	setTranslationLanguage(key, missionPath) {
 		return new Promise((resolve, reject) => {
 			this.currentTranslation = key;
-			var promises = [this.loadCharacterTranslations(key)];
+			let promises = [this.loadCharacterTranslations(key),
+			this.loadMissionNamesTranslations(key)];
 			if(missionPath) {
 				promises.push(this.loadMissionTranslation(missionPath, key));
 			}
@@ -114,6 +138,7 @@ class UtageInfo {
 					this.translationsInner[this.currentTranslation] = success;
 					resolve();
 				}, (failure) => {
+					console.log(failure);
 					resolve();
 				});
 			}
@@ -130,6 +155,24 @@ class UtageInfo {
 					this.charTranslationsInner[this.currentTranslation] = success;
 					resolve();
 				}, (failure) => {
+					console.log(failure);
+					resolve();
+				});
+			}
+		});
+	}
+	
+	loadMissionNamesTranslations() {
+		return new Promise((resolve, reject) => {
+			if(this.missionTranslationsInner[this.currentTranslation]) {
+				resolve();
+			} else {
+				commonFunctions.getFileJson(`${utage.rootDirectory}Js/Translations/XduMissionsNames_${this.currentTranslation}.json`)
+				.then((success) => {
+					this.missionTranslationsInner[this.currentTranslation] = success;
+					resolve();
+				}, (failure) => {
+					console.log(failure);
 					resolve();
 				});
 			}

Player.html

@@ -20,6 +20,7 @@
 			<h2 id="loading-font">Loading Page Data...</h2>
 		</div>
 		<div id="parent-container" class="fade-in centered">
+			<div id="title-container"><span>Now Playing: </span><span id="playing-title">None</span></div>
 			<div id="other-controls-container">
 				<div id="volume-control">
 					<span onclick="toggleMute(event)" id="mute-button">🔊</span>
@@ -36,8 +37,9 @@
 					<div id="title" class="hidden">Title Text</div>
 					<div id="diva" class="hidden">Diva Text</div>
 					<div id="dialog-box" class="hidden">
-						<div id="ui-buttons" onclick="hideUiClicked(event)">
-							<img class="ui-button" src="Images/hide_button.png"/>
+						<div id="ui-buttons">
+							<img class="ui-button" src="Images/skip_button.png" onclick="skipClicked(event)" id="skip-button"/>
+							<img class="ui-button" src="Images/hide_button.png" onclick="hideUiClicked(event)"/>
 						</div>
 						<div id="character"></div>
 						<div id="dialog">
@@ -55,19 +57,19 @@
 					</div>
 				</div>
 			</div>
-			<div style="opacity: 0; position: fixed; top: -2000;">
-				<!-- <span style="font-family: 'FOT-RodinNTLGPro-B_0'">test</span>
-				<span style="font-family: 'FOT-RodinNTLGPro-DB'">test</span> -->
-				<span style="font-family: 'FOT-RodinNTLGPro';">test</span>
-				<span style="font-family: 'FOT-RodinNTLGPro'; font-weight: bold;">test</span>
-				<!-- <span style="font-family: 'Orbitron-Black'">test</span>
-				<span style="font-family: 'Orbitron-Bold'">test</span>
-				<span style="font-family: 'Orbitron-Light'">test</span>
-				<span style="font-family: 'Orbitron-Medium'">test</span>
-				<span style="font-family: 'SourceCodePro-Regular'">test</span> -->
-			</div>
 		</div>
 		<div id="click-catcher" style="display: none;" onclick="closeMissionModal(event, false)"></div>
 		<div id="modal-container" style="display: none;"></div>
+		<div style="opacity: 0; position: fixed; top: -2000;">
+			<!-- <span style="font-family: 'FOT-RodinNTLGPro-B_0'">test</span>
+			<span style="font-family: 'FOT-RodinNTLGPro-DB'">test</span> -->
+			<span style="font-family: 'FOT-RodinNTLGPro';">test</span>
+			<span style="font-family: 'FOT-RodinNTLGPro'; font-weight: bold;">test</span>
+			<!-- <span style="font-family: 'Orbitron-Black'">test</span>
+			<span style="font-family: 'Orbitron-Bold'">test</span>
+			<span style="font-family: 'Orbitron-Light'">test</span>
+			<span style="font-family: 'Orbitron-Medium'">test</span>
+			<span style="font-family: 'SourceCodePro-Regular'">test</span> -->
+		</div>
 	</body>
 </html>