ethanaobrien/EmulatorJS
1
0
Fork 0
mirror of https://github.com/EmulatorJS/EmulatorJS.git synced 2024-09-20 02:46:23 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Mobile optimizations

Browse source
This commit is contained in:
Ethan O'Brien 2023-07-11 10:15:43 -05:00
parent 0fa22f0afe
commit 928a019112
2 changed files with 87 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
data/css/main.css
View file

@ -200,11 +200,6 @@
} }
.ejs_menu_bar_hidden {
opacity: 0;
pointer-events: none;
transform: translateY(100%);
}
.ejs_svg_rotate { .ejs_svg_rotate {
transform: rotate(90deg); transform: rotate(90deg);
@ -216,7 +211,7 @@
.ejs_menu_bar { .ejs_menu_bar {
transition: opacity .4s ease-in-out,transform .4s ease-in-out; transition: opacity .4s ease-in-out,transform .4s ease-in-out;
position: absolute; position: absolute;
transform: translate(-50%,0)!important; transform: translate(-50%,0);
width: 300px; width: 300px;
max-height: 260px; max-height: 260px;
display: flex; display: flex;
@ -228,6 +223,11 @@
left: 50%; left: 50%;
bottom: 0; bottom: 0;
} }
.ejs_menu_bar_hidden {
opacity: 0;
pointer-events: none;
transform: translate(-50%, 100%);
}
.ejs_menu_button { .ejs_menu_button {
width: 135px; width: 135px;
margin-left: 2px!important; margin-left: 2px!important;
@ -272,6 +272,11 @@
} }
} }
@media (min-width: 575px) { @media (min-width: 575px) {
.ejs_menu_bar_hidden {
opacity: 0;
pointer-events: none;
transform: translateY(100%);
}
.ejs_settings_parent { .ejs_settings_parent {
right: -3px; right: -3px;
} }

95
data/emulator.js
View file

@ -976,25 +976,39 @@ class EmulatorJS {
isPopupOpen() { isPopupOpen() {
return this.cheatMenu.style.display !== "none" || this.controlMenu.style.display !== "none" || this.currentPopup !== null; return this.cheatMenu.style.display !== "none" || this.controlMenu.style.display !== "none" || this.currentPopup !== null;
} }
isChild(first, second) {
if (!first || !second) return false;
const adown = first.nodeType === 9 ? first.documentElement : first;
if (first === second) return true;
if (adown.contains) {
return adown.contains(second);
}
return first.compareDocumentPosition && first.compareDocumentPosition(second) & 16;
}
createBottomMenuBar() { createBottomMenuBar() {
this.elements.menu = this.createElement("div"); this.elements.menu = this.createElement("div");
this.elements.menu.classList.add("ejs_menu_bar"); this.elements.menu.classList.add("ejs_menu_bar");
this.elements.menu.classList.add("ejs_menu_bar_hidden"); this.elements.menu.classList.add("ejs_menu_bar_hidden");
let timeout = null; let timeout = null;
let ignoreEvents = false;
const hide = () => { const hide = () => {
if (this.paused || this.settingsMenuOpen) return; if (this.paused || this.settingsMenuOpen) return;
this.elements.menu.classList.add("ejs_menu_bar_hidden"); this.elements.menu.classList.add("ejs_menu_bar_hidden");
} }
this.addEventListener(this.elements.parent, 'mousemove click', (e) => { this.addEventListener(this.elements.parent, 'mousemove click', (e) => {
if (!this.started) return; if (e.pointerType === "touch") return;
if (!this.started || ignoreEvents || document.pointerLockElement === this.canvas) return;
if (this.isPopupOpen()) return; if (this.isPopupOpen()) return;
clearTimeout(timeout); clearTimeout(timeout);
timeout = setTimeout(hide, 3000); timeout = setTimeout(hide, 3000);
this.elements.menu.classList.remove("ejs_menu_bar_hidden"); this.elements.menu.classList.remove("ejs_menu_bar_hidden");
}) })
this.addEventListener(this.elements.menu, 'touchstart touchend touchmove', (e) => { this.addEventListener(this.elements.menu, 'touchstart touchend', (e) => {
if (!this.started) return; if (!this.started) return;
if (this.isPopupOpen()) return; if (this.isPopupOpen()) return;
clearTimeout(timeout); clearTimeout(timeout);
@ -1005,7 +1019,7 @@ class EmulatorJS {
close: () => { close: () => {
if (!this.started) return; if (!this.started) return;
clearTimeout(timeout); clearTimeout(timeout);
this.elements.menu.classList.remove("ejs_menu_bar_hidden"); this.elements.menu.classList.add("ejs_menu_bar_hidden");
}, },
open: () => { open: () => {
if (!this.started) return; if (!this.started) return;
@ -1025,6 +1039,21 @@ class EmulatorJS {
} }
this.elements.parent.appendChild(this.elements.menu); this.elements.parent.appendChild(this.elements.menu);
let tmout;
this.addEventListener(this.elements.parent, "mousedown touchstart", (e) => {
if (this.isChild(this.elements.menu, e.target) || this.isChild(this.elements.menuToggle, e.target)) return;
if (!this.started || this.elements.menu.classList.contains("ejs_menu_bar_hidden") || this.isPopupOpen()) return;
const width = this.elements.parent.getBoundingClientRect().width;
if (width > 575) return;
clearTimeout(tmout);
tmout = setTimeout(() => {
ignoreEvents = false;
}, 2000)
ignoreEvents = true;
this.menu.close();
})
//Now add buttons //Now add buttons
const addButton = (title, image, callback, element, both) => { const addButton = (title, image, callback, element, both) => {
const button = this.createElement("button"); const button = this.createElement("button");
@ -1268,15 +1297,11 @@ class EmulatorJS {
settingButton[2].classList.toggle("ejs_settings_text", this.settingsMenuOpen); settingButton[2].classList.toggle("ejs_settings_text", this.settingsMenuOpen);
this.settingsMenu.style.display = "none"; this.settingsMenu.style.display = "none";
} }
this.addEventListener(this.elements.parent, "click", (e) => { this.addEventListener(this.elements.parent, "mousedown touchstart", (e) => {
if (this.isChild(this.settingsMenu, e.target)) return;
if (e.pointerType === "touch") return;
if (e.target === settingButton[0] || e.target === settingButton[2]) return; if (e.target === settingButton[0] || e.target === settingButton[2]) return;
setTimeout(() => {
if (this.settingsJustClicked) {
this.settingsJustClicked = false;
return;
}
this.closeSettingsMenu(); this.closeSettingsMenu();
}, 10)
}) })
this.addEventListener(this.canvas, "click", (e) => { this.addEventListener(this.canvas, "click", (e) => {
if (e.pointerType === "touch") return; if (e.pointerType === "touch") return;
@ -1286,6 +1311,7 @@ class EmulatorJS {
} else if (this.canvas.mozRequestPointerLock) { } else if (this.canvas.mozRequestPointerLock) {
this.canvas.mozRequestPointerLock(); this.canvas.mozRequestPointerLock();
} }
this.menu.close();
} }
}) })
@ -1720,8 +1746,8 @@ class EmulatorJS {
this.addEventListener(buttonText, "mousedown", (e) => { this.addEventListener(buttonText, "mousedown", (e) => {
e.preventDefault(); e.preventDefault();
this.controlPopup.parentElement.removeAttribute("hidden"); this.controlPopup.parentElement.parentElement.removeAttribute("hidden");
this.controlPopup.innerText = "[ " + buttons[k] + " ]\n"; this.controlPopup.innerText = "[ " + buttons[k] + " ]\nPress Keyboard";
this.controlPopup.setAttribute("button-num", k); this.controlPopup.setAttribute("button-num", k);
this.controlPopup.setAttribute("player-num", i); this.controlPopup.setAttribute("player-num", i);
}) })
@ -1741,11 +1767,34 @@ class EmulatorJS {
const popup = this.createElement('div'); const popup = this.createElement('div');
popup.classList.add("ejs_popup_container"); popup.classList.add("ejs_popup_container");
const popupMsg = this.createElement("div"); const popupMsg = this.createElement("div");
this.addEventListener(popup, "mousedown click touchstart", (e) => {
if (this.isChild(popupMsg, e.target)) return;
this.controlPopup.parentElement.parentElement.setAttribute("hidden", "");
})
const btn = this.createElement("a");
btn.classList.add("ejs_control_set_button");
btn.innerText = this.localization("Clear");
this.addEventListener(btn, "mousedown click touchstart", (e) => {
const num = this.controlPopup.getAttribute("button-num");
const player = this.controlPopup.getAttribute("player-num");
if (!this.controls[player][num]) {
this.controls[player][num] = {};
}
this.controls[player][num].value = "";
this.controls[player][num].value2 = "";
this.controlPopup.parentElement.parentElement.setAttribute("hidden", "");
this.checkGamepadInputs();
this.saveSettings();
})
popupMsg.classList.add("ejs_popup_box"); popupMsg.classList.add("ejs_popup_box");
popupMsg.innerText = ""; popupMsg.innerText = "";
popup.setAttribute("hidden", ""); popup.setAttribute("hidden", "");
this.controlPopup = popupMsg; const popMsg = this.createElement("div");
this.controlPopup = popMsg;
popup.appendChild(popupMsg); popup.appendChild(popupMsg);
popupMsg.appendChild(popMsg);
popupMsg.appendChild(this.createElement("br"));
popupMsg.appendChild(btn);
this.controlMenu.appendChild(popup); this.controlMenu.appendChild(popup);
} }
@ -1823,14 +1872,14 @@ class EmulatorJS {
keyChange(e) { keyChange(e) {
if (e.repeat) return; if (e.repeat) return;
if (!this.started) return; if (!this.started) return;
if (this.controlPopup.parentElement.getAttribute("hidden") === null) { if (this.controlPopup.parentElement.parentElement.getAttribute("hidden") === null) {
const num = this.controlPopup.getAttribute("button-num"); const num = this.controlPopup.getAttribute("button-num");
const player = this.controlPopup.getAttribute("player-num"); const player = this.controlPopup.getAttribute("player-num");
if (!this.controls[player][num]) { if (!this.controls[player][num]) {
this.controls[player][num] = {}; this.controls[player][num] = {};
} }
this.controls[player][num].value = e.key.toLowerCase(); this.controls[player][num].value = e.key.toLowerCase();
this.controlPopup.parentElement.setAttribute("hidden", ""); this.controlPopup.parentElement.parentElement.setAttribute("hidden", "");
this.checkGamepadInputs(); this.checkGamepadInputs();
this.saveSettings(); this.saveSettings();
return; return;
@ -1855,7 +1904,7 @@ class EmulatorJS {
return 0; return 0;
} }
}(e.value || 0); }(e.value || 0);
if (this.controlPopup.parentElement.getAttribute("hidden") === null) { if (this.controlPopup.parentElement.parentElement.getAttribute("hidden") === null) {
if ('buttonup' === e.type || (e.type === "axischanged" && value === 0)) return; if ('buttonup' === e.type || (e.type === "axischanged" && value === 0)) return;
const num = this.controlPopup.getAttribute("button-num"); const num = this.controlPopup.getAttribute("button-num");
const player = this.controlPopup.getAttribute("player-num"); const player = this.controlPopup.getAttribute("player-num");
@ -1863,7 +1912,7 @@ class EmulatorJS {
this.controls[player][num] = {}; this.controls[player][num] = {};
} }
this.controls[player][num].value2 = (e.type === "axischanged" ? e.axis+":"+value : e.index); this.controls[player][num].value2 = (e.type === "axischanged" ? e.axis+":"+value : e.index);
this.controlPopup.parentElement.setAttribute("hidden", ""); this.controlPopup.parentElement.parentElement.setAttribute("hidden", "");
this.checkGamepadInputs(); this.checkGamepadInputs();
this.saveSettings(); this.saveSettings();
return; return;
@ -2323,6 +2372,7 @@ class EmulatorJS {
e.preventDefault(); e.preventDefault();
this.menu.toggle(); this.menu.toggle();
}) })
this.elements.menuToggle = menuButton;
} }
this.virtualGamepad.style.display = "none"; this.virtualGamepad.style.display = "none";
@ -2335,6 +2385,14 @@ class EmulatorJS {
const height = (positionInfo.height * dpr); const height = (positionInfo.height * dpr);
this.Module.setCanvasSize(width, height); this.Module.setCanvasSize(width, height);
this.handleSettingsResize(); this.handleSettingsResize();
if (this.virtualGamepad.style.display === "none") {
this.virtualGamepad.style.opacity = 0;
this.virtualGamepad.style.display = "";
setTimeout(() => {
this.virtualGamepad.style.display = "none";
this.virtualGamepad.style.opacity = "";
}, 250)
}
} }
getElementSize(element) { getElementSize(element) {
let elem = element.cloneNode(true); let elem = element.cloneNode(true);
@ -2433,9 +2491,6 @@ class EmulatorJS {
} }
setupSettingsMenu() { setupSettingsMenu() {
this.settingsMenu = this.createElement("div"); this.settingsMenu = this.createElement("div");
this.addEventListener(this.settingsMenu, "click", (e) => {
this.settingsJustClicked = true;
})
this.settingsMenu.classList.add("ejs_settings_parent"); this.settingsMenu.classList.add("ejs_settings_parent");
const nested = this.createElement("div"); const nested = this.createElement("div");
nested.classList.add("ejs_settings_transition"); nested.classList.add("ejs_settings_transition");