XDUPlayer/Js/Main.js

621 行
19 KiB
JavaScript

'use strict';
const pixiApp = {
app: new PIXI.Application(baseDimensions),
loader: PIXI.Loader.shared
};
const utage = new UtageInfo();
const shaders = new Shaders();
const textFunc = new TextFunctions();
let audio = undefined; //Cant create a audio context without user input.
const player = new Player(pixiApp, utage, textFunc, audio, shaders);
const languages = ["eng", "jpn", "rus", "enm", "kor", "zho"];
const version = "YameteTomete XDUPlayer V1.4.0";
let bodyLoaded = false;
let utageLoaded = false;
let languagesLoaded = false;
let selectedLang = "eng";
let currentScene = {};
let currentSceneId = "";
let scenePlaylist = [];
let currentPart = "";
let partPlaylist = [];
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;
let isMuted = false;
let volume = 0.5;
let fullScreen = false;
let prevScene = '{Select}';
let prevQuest = '{Select}';
const emoji = {
LoudSound: String.fromCodePoint(0x1f50a),
Mute: String.fromCodePoint(0x1f507),
HeavyPlusSign: String.fromCodePoint(0x2795)
};
function onBodyLoaded() {
bodyLoaded = true;
document.getElementById("title-tag").innerText = version;
document.addEventListener('webkitfullscreenchange', onFullScreenChange, false);
document.addEventListener('mozfullscreenchange', onFullScreenChange, false);
document.addEventListener('fullscreenchange', onFullScreenChange, false);
document.addEventListener('MSFullscreenChange', onFullScreenChange, false);
}
(function startLoad() {
let promises = [
utage.loadUtageSettings()
];
Promise.all(promises)
.then((success) => {
utageLoaded = true;
}, (failure) => {
console.log(failure);
});
})();
(function checkIsLoaded() {
if(bodyLoaded) {
document.getElementById('loading-font').style.cssText = "display: none;";
checkQueryParameters();
loadLocalStorage();
}
if(utageLoaded && languagesLoaded) {
document.getElementById('loading-utage').style.cssText = "display: none;";
}
if(bodyLoaded && utageLoaded && languagesLoaded) {
document.getElementById('loading-container').style.cssText = "opacity: 0;";
onAllLoaded();
} else {
setTimeout(checkIsLoaded, 200);
}
})();
function onAllLoaded(success) {
textFunc.findTextElements();
buildQuestSelectList();
buildSceneSelectList();
buildLanguageList();
let appContainer = document.getElementById('app-container');
appContainer.appendChild(pixiApp.app.view);
setTimeout(() => {
document.getElementById('parent-container').style.cssText = "opacity: 1;";
onWindowResize();
window.addEventListener("resize", onWindowResize);
checkQueryParameters();
}, 0);
}
function loadLocalStorage() {
try {
//audio
volume = localStorage.getItem('volume') || 0.5;
volume = Number(volume);
document.getElementById('volume-range').value = volume * 100;
isMuted = localStorage.getItem('ismuted') || false;
if(isMuted === "false") { isMuted = false; }
else if(isMuted === "true") { isMuted = true; }
if(audio) {
audio.changeVolume(volume);
audio.mute(isMuted);
}
if(isMuted) {
document.getElementById('mute-button').innerText = emoji.Mute;
} else {
document.getElementById('mute-button').innerText = emoji.LoudSound;
}
//language
let lang = urlParams['lang'] || localStorage.getItem('language') || "eng";
if(languages.includes(lang)) {
selectedLang = lang;
}
document.getElementById('text-container').className = selectedLang;
utage.setTranslationLanguage(selectedLang, '')
.then((success) => {
languagesLoaded = true;
}, (failure) => {
languagesLoaded = true;
console.log(failure);
});
} catch(error) {
console.log(error);
}
}
function buildQuestSelectList() {
let questBox = document.getElementById('select-quest');
questBox.innerHTML = '';
for (let i = -1; i < utage.questList.length; ++i) {
let opt = document.createElement('option')
if (i === -1) {
opt.setAttribute('value', '{Select}');
opt.innerText = 'Select Event';
} else {
let q = utage.questList[i];
let cust = q.IsCustom ? CUSTOM.custom : CUSTOM.stock;
let name = q.Name;
let tl_key = utage.questTranslations[cust][q.QuestMstId];
if (!tl_key) {
console.log("Failed to build quest list: missing translations");
return;
}
if (!tl_key.Enabled && !utage.quests[cust][q.QuestMstId].Scenes.some((s) => { return utage.sceneTranslations[cust][s].Enabled === true })) {
continue;
}
name = tl_key.Name || name;
opt.setAttribute('value', `${cust}|${q.QuestMstId}`);
opt.innerText = name;
}
questBox.appendChild(opt);
}
}
function buildSceneSelectList() {
let sceneBox = document.getElementById('select-scene');
let questBox = document.getElementById('select-quest');
sceneBox.innerHTML = '';
let opt = document.createElement('option');
opt.setAttribute('value', '{Select}');
opt.innerText = "Select Scene";
if (questBox.value === '{Select}') {
sceneBox.appendChild(opt);
sceneBox.setAttribute("disabled", "true");
return;
} else {
sceneBox.removeAttribute("disabled");
}
let cust = questBox.value.split("|")[0];
let questMstId = questBox.value.split("|")[1];
for (let i = -2; i < utage.quests[cust][questMstId].Scenes.length; ++i) {
let opt = document.createElement('option');
if (i === -2) {
opt.setAttribute('value', '{Select}');
opt.innerText = 'Select Scene';
} else if (i === -1) {
opt.setAttribute('value', '{All}');
opt.innerText = 'Play All';
} else {
let questSceneMstId = utage.quests[cust][questMstId].Scenes[i];
let s = utage.scenes[cust][questSceneMstId];
opt.setAttribute('value', `${cust}|${questSceneMstId}`);
let name = s.Name;
let tl_key = utage.sceneTranslations[cust][questSceneMstId];
if (!tl_key) {
console.log("Failed to build scene list: missing translations");
return;
}
if (!tl_key.Enabled) {
continue;
}
name = tl_key.Name || name;
opt.innerText = name;
}
sceneBox.appendChild(opt);
}
}
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 checkQueryParameters() {
urlParams = commonFunctions.readQueryParameters();
if (languagesLoaded) {
let cust;
if (urlParams['custom'] && urlParams['custom'] === "1") {
cust = CUSTOM.custom;
} else {
cust = CUSTOM.stock;
}
let playable = (urlParams['questscenemstid'] &&
utage.scenes[cust][urlParams['questscenemstid']] &&
utage.sceneTranslations[cust][urlParams['questscenemstid']] &&
utage.sceneTranslations[cust][urlParams['questscenemstid']].Enabled);
if(playable) {
document.getElementById('play-from-query').style.cssText = "position: fixed; z-index: 15; text-align: center; top: 50%; left: 50%; display: block;";
}
}
}
function playFromQuery(event) {
let cust;
if (urlParams['custom'] && urlParams['custom'] === "1") {
cust = CUSTOM.custom;
} else {
cust = CUSTOM.stock;
}
sceneSet(urlParams['questscenemstid'], cust);
document.getElementById('play-from-query').style.cssText = "display: none;";
}
function questDropDownChanged(event) {
if(!event || !event.currentTarget || !event.currentTarget.value) { return; }
buildSceneSelectList();
}
function sceneDropDownChanged(event) {
if(!event || !event.currentTarget || !event.currentTarget.value || event.currentTarget.value === '{Select}') { return; }
if (event.currentTarget.value === '{All}') {
let quest = document.getElementById("select-quest");
let cust = quest.value.split("|")[0];
let questMstId = quest.value.split("|")[1];
let scene = utage.quests[cust][questMstId].Scenes;
resetPlaylist();
for (const s of scene) {
let tl_key = utage.sceneTranslations[cust][s];
if (tl_key) {
if (utage.sceneTranslations[cust][s].Enabled) {
utage.scenes[cust][s]['QuestSceneMstId'] = s;
scenePlaylist.push(utage.scenes[cust][s]);
}
}
}
playNext();
return;
}
let cont = document.getElementById("modal-container");
let cust = event.currentTarget.value.split("|")[0];
let questSceneMstId = event.currentTarget.value.split("|")[1];
let scene = utage.scenes[cust][questSceneMstId];
if(!scene) { console.log(`Scene ${questSceneMstId} not found`); return; }
let name = scene.Name;
let summary = scene.SummaryText;
let credits = "";
let tl_key = utage.sceneTranslations[cust][questSceneMstId];
if(tl_key) {
name = tl_key.Name || name;
summary = tl_key.SummaryText || summary;
credits = tl_key.Credits || credits;
}
if(!credits) {
if(selectedLang === "eng") {
credits = "YameteTomete";
} else {
credits = "None";
}
}
let chapterSelect = '<div><span>Chapter Select:</span><select id="ChapterSelect">';
chapterSelect += `<option value="{All}">Play All</option>`
for (const p of scene.Parts) {
chapterSelect += `<option value="${p}">${p}</option>`
}
let detailSrc = `${utage.rootDirectory}${(scene.IsCustom ? "CustomData" : "XDUData")}/Asset/Image/Quest/Snap/Detail/${questSceneMstId}.png`;
let iconSrc = `${utage.rootDirectory}${(scene.IsCustom ? "CustomData" : "XDUData")}/Asset/Image/Quest/Snap/Icon/${questSceneMstId}.png`;
chapterSelect += '</select></div>';
cont.innerHTML = `
<div id="mission-modal" class="modal">
<span class="mission-title">${name || 'none'}</span>
<img id="mission-detail" src="${detailSrc}"/>
<img id="mission-icon" src="${iconSrc}"/>
<div id="mission-summary">Summary: ${summary || 'none'}</div>
<div class="flex-grow"></div>
<div>Credits (${selectedLang}): ${credits}</div>
<div id="mission-ids">
${chapterSelect}
</div>
<div id="modal-buttons">
<button onclick="closeMissionModal(event, false)">Close</button>
<span>MstId: ${questSceneMstId}</span>
<button onclick="sceneSet('${questSceneMstId}', '${cust}')">Play</button>
</div>
</div>`;
document.getElementById("click-catcher").style.cssText = 'display: flex;';
cont.style.cssText = 'display: flex;';
}
function closeMissionModal(event, wasStarted) {
if(!wasStarted) {
document.getElementById('select-scene').value = prevScene;
document.getElementById('select-quest').value = prevQuest;
} else {
prevScene = document.getElementById('select-scene').value;
prevQuest = document.getElementById('select-quest').value;
}
if (prevScene === '{Select}') {
document.getElementById('select-scene').setAttribute("disabled", "true");
} else {
document.getElementById('select-scene').removeAttribute("disabled");
}
closeModal(event);
}
function closeModal(event) {
let cont = document.getElementById("modal-container");
document.getElementById("click-catcher").style.cssText = 'display: none;';
cont.style.cssText = 'display: none;';
cont.innerHTML = '';
}
function sceneSet(questSceneMstId, cust) {
resetPlaylist();
let part = document.getElementById('ChapterSelect');
utage.scenes[cust][questSceneMstId]['QuestSceneMstId'] = questSceneMstId;
if (!part || part.value === '{All}') {
scenePlaylist.push(utage.scenes[cust][questSceneMstId]);
} else {
currentScene = utage.scenes[cust][questSceneMstId];
try {
partPlaylist.push.apply(partPlaylist, currentScene.Parts.slice(currentScene.Parts.indexOf(part.value)));
} catch (error) {
console.log(error);
return;
}
}
playNext();
}
function playNext() {
if (!partPlaylist.length) {
if (!scenePlaylist.length) {
resetPlaylist();
return; // we're probably done
}
currentScene = scenePlaylist.shift();
partPlaylist = currentScene.Parts.slice();
}
partChanged(partPlaylist.shift());
}
function partChanged(part) {
let cust = currentScene.IsCustom ? CUSTOM.custom : CUSTOM.stock;
let name = currentScene.Name;
let tl_key = utage.sceneTranslations[cust][currentScene.QuestSceneMstId];
if(tl_key) {
name = tl_key.Name || name;
}
if(!audio) {
audio = new audioController(utage);
audio.changeVolume(volume);
audio.mute(isMuted);
player.audio = audio;
}
player.resetAll()
.then((success) => {
if (scenePlaylist.length || partPlaylist.length) {
document.getElementById("skip-button").style.cssText = "display: inline-block;";
} else {
document.getElementById("skip-button").style.cssText = "display: none;";
}
let promises = [];
if(currentScene.IsCustom) {
promises.push(utage.parseMissionFile(`${utage.rootDirectory}CustomData/Utage/${currentScene.Folder}/Scenario/${part}_t.tsv`));
promises.push(utage.loadMissionTranslation(`${utage.rootDirectory}Js/Translations/MissionsCustom/${currentScene.Folder}/${part}_translations_${selectedLang}.json`));
} else {
promises.push(utage.parseMissionFile(`${utage.rootDirectory}XDUData/Utage/${currentScene.Folder}/Scenario/${part}_t.tsv`));
promises.push(utage.loadMissionTranslation(`${utage.rootDirectory}Js/Translations/Missions/${currentScene.Folder}/${part}_translations_${selectedLang}.json`));
}
closeMissionModal(undefined, true);
Promise.all(promises)
.then((success) => {
document.getElementById("playing-title").innerText = `${name} (${part})`;
document.getElementById("title-tag").innerText = name;
currentPart = part;
player.playFile()
.then((success) => {
playNext();
}, (failure) => {
player.resetAll();
resetPlaylist();
console.log(failure);
});
}, (failure) => {
resetPlaylist();
console.log(failure);
});
}, (failure) => {
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;
let missionPath = '';
if(currentPart) {
if (currentScene.IsCustom) {
missionPath = `${utage.rootDirectory}Js/Translations/CustomMissions/${currentScene.Folder}/${currentPart}_translations_${selectedLang}.json`;
} else {
missionPath = `${utage.rootDirectory}Js/Translations/Missions/${currentScene.Folder}/${currentPart}_translations_${selectedLang}.json`;
}
}
utage.setTranslationLanguage(selectedLang, missionPath)
.then((success) => {
document.getElementById('text-container').className = selectedLang;
buildQuestSelectList();
buildSceneSelectList();
localStorage.setItem('language', selectedLang);
});
}
function resetPlaylist() {
currentScene = {};
scenePlaylist = [];
currentPart = "";
partPlaylist = [];
document.getElementById("skip-button").style.cssText = "display: inline-block;";
document.getElementById("playing-title").innerText = 'None';
document.getElementById("title-tag").innerText = version;
document.getElementById("select-quest").value = '{Select}';
buildSceneSelectList();
}
function onMainClick(event) {
player.onMainClick(event);
}
function hideUiClicked(event) {
player.hideUiClicked(event);
}
function skipClicked(event) {
if(player.uiHidden) {
player.hideUiClicked(event);
} else if(player.runEvent) {
event.preventDefault();
event.stopPropagation();
playNext();
}
}
function dialogScrollUp(event) {
event.preventDefault();
event.stopPropagation();
textFunc.scrollTextUp();
}
function dialogScrollDown(event) {
event.preventDefault();
event.stopPropagation();
textFunc.scrollTextDown();
}
function onBodyKey(event) {
if(event.code.toLowerCase() === "arrowdown") {
dialogScrollDown(event)
} else if(event.code.toLowerCase() === "arrowup") {
dialogScrollUp(event);
} else if(event.code.toLowerCase() === "space") {
event.preventDefault();
event.stopPropagation();
player.onMainClick(event);
}
}
function openHelpModal(event) {
let cont = document.getElementById("modal-container");
cont.innerHTML = `
<div id="mission-modal" class="modal">
<span class="mission-title">${version}</span>
<div>
<div style="margin: 5px;">Browser Support:<br/>
Chromium: 57+, May work earlier with no audio<br/>
Firefox: 52+, 57+ recommended<br/>
Edge: 17+, older may not have audio<br/>
Safari: 11+, no audio<br/>
IE: Never
</div>
<div style="margin: 5px;">Mobile:<br/>
Android: 5+, Updated Chrome/Firefox/Edge<br/>
iOS: 11+, no audio<br/>
</div>
</div>
<div class="follow-links">
<div class="follow-links-header">Follow YameteTomete</div>
<div class="follow-links-links">
<a href="https://discord.gg/fpQZQ8g" target="_blank" >Discord</a>
<a href="https://twitter.com/YameteTomete" target="_blank">Twitter</a>
</div>
</div>
<div style="margin-top: auto; text-align: center;">All Symphogear content belongs to its respective owners</div>
<div id="modal-buttons">
<button onclick="closeModal(event)">Close</button>
<a href="https://git.poweris.moe/yttt-xdu/XDUPlayer" target="_blank">Source</a>
</div>
</div>`;
document.getElementById("click-catcher").style.cssText = 'display: flex;';
cont.style.cssText = 'display: flex;';
}
function toggleMute(event) {
isMuted = !isMuted;
if(audio) {
audio.mute(isMuted);
}
localStorage.setItem('ismuted', isMuted);
if(isMuted) {
document.getElementById('mute-button').innerText = emoji.Mute;
} else {
document.getElementById('mute-button').innerText = emoji.LoudSound;
}
}
function onVolumeChange(event) {
volume = Number(event.currentTarget.value) / 100;
if(audio) {
audio.changeVolume(volume);
}
localStorage.setItem('volume', volume);
}
function toggleFullscreen(event) {
event.preventDefault();
event.stopPropagation();
fullScreen = !fullScreen;
let docEl = document.documentElement;
if(fullScreen) {
let requestFullScreen = docEl.requestFullscreen || docEl.mozRequestFullScreen || docEl.webkitRequestFullScreen || docEl.msRequestFullscreen;
if(requestFullScreen && !document.fullscreenElement && !document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement) {
requestFullScreen.call(docEl);
}
} else {
let cancelFullScreen = document.exitFullscreen || document.mozCancelFullScreen || document.webkitExitFullscreen || document.msExitFullscreen;
if(cancelFullScreen) {
cancelFullScreen.call(document);
}
}
}
function onFullScreenChange(event) {
if(document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement || document.msFullscreenElement) {
fullScreen = true;
document.getElementById('other-controls-container').style.cssText = "display: none;";
document.getElementById('title-container').style.cssText = "display: none;";
document.getElementById('fullscreen-button').innerText = "✖️";
} else {
document.getElementById('other-controls-container').style.cssText = "";
document.getElementById('title-container').style.cssText = "";
document.getElementById('fullscreen-button').innerText = emoji.HeavyPlusSign;
}
onWindowResize(event, 0);
}
function onWindowResize(event, delay = 400) {
if(screenSizeTimeout) {
clearTimeout(screenSizeTimeout);
screenSizeTimeout = undefined;
}
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;
topContainerHeight += document.getElementById('title-container').offsetHeight;
let res = commonFunctions.getNewResolution(baseDimensions, screenw, screenh, (topContainerHeight ? topContainerHeight + 6 : topContainerHeight));
screenSizeTimeout = setTimeout(() => {
player.updateResolution(res);
document.getElementById('app-container').style.cssText = `width: ${res.width}px; height: ${res.height}px;`;
}, delay);
}