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

Added info/help modal.

Browse Source
This commit is contained in:
fire bingo 2018-05-24 15:55:38 -07:00
parent 6734df9dec
commit a1835bdf42
3 changed files with 40 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
Css/main.css
View File

@ -102,7 +102,7 @@ body { margin: 0; }
#title-container { margin-bottom: 2px; }
#other-controls-container { display: flex; width: 550px; justify-content: center; z-index: 10; }
#other-controls-container { display: flex; width: 550px; justify-content: center; align-items: center; z-index: 10; }
#select-mission { min-width: 0; }
@ -132,7 +132,7 @@ body { margin: 0; }
#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; }
#modal-buttons { bottom: 0; margin-top: auto; width: 100%; display: flex; justify-content: space-between; }
@media screen and (max-width: 812px) {
#modal-container { top: 0; bottom: 0; left: 0; right: 0; transform: none; }
@ -140,6 +140,10 @@ body { margin: 0; }
#other-controls-container { width: 100vw; }
}
@media screen and (max-width: 411px) {
#volume-range { width: 100px; }
}
@media screen and (max-height: 600px) {
#mission-modal #mission-detail { display: none; }
#mission-modal #mission-icon { display: block; max-height: 20%; margin: 10px 0 10px 0; object-fit: contain; }

33
Js/Main.js
View File

@ -202,6 +202,10 @@ function closeMissionModal(event, wasStarted) {
} else {
prevMission = document.getElementById('select-mission').value;
}
closeModal(event);
}
function closeModal(event) {
let cont = document.getElementById("modal-container");
document.getElementById("click-catcher").style.cssText = 'display: none;';
cont.style.cssText = 'display: none;';
@ -334,6 +338,35 @@ function onBodyKey(event) {
}
}
function openHelpModal(event) {
let cont = document.getElementById("modal-container");
cont.innerHTML = `
<div id="mission-modal" class="modal">
<span class="mission-title">YameteTomete XDUPlayer V1.0</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/>
Recommended to request desktop site
</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/xduplayer.git/" 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) {

1
Player.html
View File

@ -28,6 +28,7 @@
</div>
<select id="select-mission" onchange="missionDropDownChanged(event);"></select>
<select id="select-language" onchange="languageChanged(event);"></select>
<a style="font-size: 20px; margin-left: 5px;" title="info/help" onclick="openHelpModal(event)">?</a>
</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 -->