yttt-xdu/XDUPlayer
6
0
Fork 0
Code Issues Pull Requests Releases Activity

DPI is now taken into account when resizing.

Browse Source 
Added credits to mission modal.
Added ability to go fullscreen.
This commit is contained in:
fire bingo 2018-06-13 21:02:19 -07:00
parent 47451eea7e
commit 8780cc2721
6 changed files with 83 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
CHANGELOG.md
View File

@ -6,3 +6,11 @@ Updated Pixi JS to 4.8.1.
Support for custom missions.
Made translations a submodule.
Various fixes to xdu functions.
## V1.2.0 (2018-06-13)
Added title tag that updates with current mission.
Added null check for pixi sprite calculateverticies because it sometimes makes a texture invalid when it shouldn't be. This is kinda a hack and should be investigated deeper in the future.
DPI is now taken into account when resizing.
Added credits to mission modal.
Added ability to go fullscreen.

12
Css/main.css
View File

@ -54,6 +54,8 @@
body { margin: 0; }
.flex-grow { flex-grow: 1; }
.centered { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; }
.hidden { opacity: 0; }
@ -66,6 +68,8 @@ body { margin: 0; }
#text-container { color: white; position: absolute; margin: auto; height: 750px; width: 1334px; font-family: 'FOT-RodinNTLGPro'; }
#text-container #fullscreen-button { position: absolute; top: 0.5rem; left: 0.5rem; font-size: 30px; line-height: 30px; opacity: 0.35; z-index: 11; }
#text-container #title { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; font-size: 20px; transition: opacity 0.3s; cursor: default; user-select: none; }
#text-container #diva { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; font-size: 34px; transition: opacity 0.3s; cursor: default; user-select: none; }
@ -116,7 +120,7 @@ body { margin: 0; }
#modal-container { position: fixed; z-index: 16; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.modal { background-color: #393939; color: #F0F0F0; height: 400px; width: 350px; position: relative; margin: auto; display: flex; flex-direction: column; align-items: center; box-shadow: 0px 0px 20px 3px #070707; border-radius: 7px; box-sizing: border-box; padding: 10px; }
.modal { background-color: #393939; color: #F0F0F0; height: 425px; width: 350px; position: relative; margin: auto; display: flex; flex-direction: column; align-items: center; box-shadow: 0px 0px 20px 3px #070707; border-radius: 7px; box-sizing: border-box; padding: 10px; }
#mission-modal { }
@ -124,15 +128,15 @@ body { margin: 0; }
#mission-modal #mission-icon { display: none; margin: 10px 0 10px 0; object-fit: contain; }
#mission-modal span { max-width: 100%; word-break: break-word; max-height: 120px; overflow: auto;}
#mission-modal #mission-summary { max-width: 100%; word-break: break-word; margin-bottom: 5px; min-height: 0; overflow-y: auto; }
#mission-modal .mission-title { font-weight: bold; text-align: center; }
#mission-modal #mission-ids { margin-top: auto; width: 100%; display: flex; flex-direction: column; align-items: center; }
#mission-modal #mission-ids { margin: 5px 0 5px 0; width: 100%; display: flex; flex-direction: column; align-items: center; min-height: 21px; }
#mission-modal #mission-ids div { display: flex; align-items: center; }
#modal-buttons { bottom: 0; margin-top: auto; width: 100%; display: flex; justify-content: space-between; }
#modal-buttons { bottom: 0; margin-top: auto; width: 100%; display: flex; justify-content: space-between; min-height: 21px; }
@media screen and (max-width: 812px) {
#modal-container { top: 0; bottom: 0; left: 0; right: 0; transform: none; }

67
Js/Main.js
View File

@ -11,7 +11,7 @@ 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"];
const version = "YameteTomete XDUPlayer V1.1.0";
const version = "YameteTomete XDUPlayer V1.2.0";
let bodyLoaded = false;
let utageLoaded = false;
let languagesLoaded = false;
@ -26,12 +26,17 @@ let screenh = Math.max(document.documentElement.clientHeight, window.innerHeight
let screenSizeTimeout = undefined;
let isMuted = false;
let volume = 0.5;
let fullScreen = false;
let prevMission = '{Select}';
const availableMstIds = [202070, 202013, 338001, 338002, 338003, 338004]//[202070, 202013, 338001, 338002, 338003, 338004, 338005, 338006, 338007, 338009, 338010, 338011];
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() {
@ -168,9 +173,18 @@ function missionDropDownChanged(event) {
if(!mis) { console.log(`Mission ${misId} not found`); return; }
let name = mis.Name;
let summary = mis.SummaryText;
let credits = "";
if(utage.missionTranslations[mis.MstId]) {
name = utage.missionTranslations[mis.MstId].Name || name;
summary = utage.missionTranslations[mis.MstId].SummaryText || summary;
credits = utage.missionTranslations[mis.MstId].Credits || credits;
}
if(!credits) {
if(selectedLang === "eng") {
credits = "YameteTomete";
} else {
credits = "None";
}
}
let chapterSelect = '<div><span>Chapter Select:</span><select id="ChapterSelect">';
for(let k of Object.keys(mis.Missions)) {
@ -183,7 +197,9 @@ function missionDropDownChanged(event) {
<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-summary">Summary: ${summary || 'none'}</div>
<div class="flex-grow"></div>
<div>Credits (${selectedLang}): ${credits}</div>
<div id="mission-ids">
${chapterSelect}
</div>
@ -364,7 +380,6 @@ function openHelpModal(event) {
<div style="margin: 5px;">Mobile:<br/>
Android: 5+, Updated Chrome/Firefox/Edge<br/>
iOS: 11+, no audio<br/>
Recommended to request desktop site
</div>
</div>
<a style="margin-top: auto; text-align: center; "href="https://discord.gg/fpQZQ8g">YameteTomete Discord</a>
@ -399,18 +414,50 @@ function onVolumeChange(event) {
localStorage.setItem('volume', volume);
}
function onWindowResize(event) {
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 = "➕";
}
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(() => {
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;`;
}, 400);
}, delay);
}

10
Js/Player.js
View File

@ -1443,8 +1443,14 @@ class Player {
updateResolution(res) {
let newScale = res.height / baseDimensions.height;
this.pixi.app.stage.scale.set(newScale, newScale);
this.pixi.app.renderer.resize(res.width, res.height);
//Set the scale by the pixel ratio so pixi makes the stage the proper size
this.pixi.app.stage.scale.set(newScale * window.devicePixelRatio, newScale * window.devicePixelRatio);
//Sizes the canvas/pixi's renderer to the actual render resolution
this.pixi.app.renderer.resize(res.width * window.devicePixelRatio, res.height * window.devicePixelRatio);
//Css size overwrites the display size of the canvas
this.pixi.app.view.style.width = res.width;
this.pixi.app.view.style.height = res.height;
//Transform the text container to be the right scale, browser handles all dpi stuff for html elements itself
document.getElementById('text-container').style.cssText = `transform: scale(${newScale})`;
}

2
Js/Translations

@ -1 +1 @@
Subproject commit 8ad734b4873e63ebc4d351eb3b443419b8977315
Subproject commit 6e332e63caf4f49134163d88138b99a26cca0c45

1
Player.html
View File

@ -35,6 +35,7 @@
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">
<div id="fullscreen-button" onclick="toggleFullscreen(event)">➕</div>
<img id="main-ui-img" class="hidden" src="Images/newui_main.png"/>
<button id="play-from-query" onclick="playFromQuery(event)" style="display: none;">Play</button>
<div id="title" class="hidden">Title Text</div>