3rdparty/irv77-eaglercraft-mobile
1
0
Fork 0
mirror of https://github.com/irv77/eaglercraft-mobile.git synced 2024-11-21 21:26:04 -08:00
Code Issues Packages Projects Releases Wiki Activity

Version 1.2

Browse Source
This commit is contained in:
voxonoly 2024-05-30 13:03:19 -05:00
parent df1c937695
commit 4951f3cdfc
7 changed files with 531 additions and 495 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
README.md
View File

@ -1,4 +1,4 @@
# Eaglercraft Mobile UI v1.1 # Eaglercraft Mobile UI v1.2
A revamp of FlamedDogo99's eaglercraft mobile UI using pocked edition UI.<br> A revamp of FlamedDogo99's eaglercraft mobile UI using pocked edition UI.<br>
Currently **STILL IN BETA** testing/making so expect some bugs! Currently **STILL IN BETA** testing/making so expect some bugs!
@ -34,10 +34,10 @@
- [x] Re-orginize button layout (With new icons) - [x] Re-orginize button layout (With new icons)
- [ ] Redo the display button functions - [ ] Redo the display button functions
- [x] Pocket Edition UI - [x] Pocket Edition UI
- [x] Toggle perspective - [x] Updated code from main
- [x] Bug fixes from original - [x] Bug fixes from original
- [ ] Config file for features - [ ] Config file for features
- [ ] Organized Code - [x] Organized Code
</details> </details>
<hr> <hr>

356
demo/mobile/mobile.js
View File

@ -1,8 +1,16 @@
// Hides inventory button function isMobile() {
window.inInventory = false; try {
document.createEvent("TouchEvent");
return true;
} catch (e) {
return false;
}
}
if (!isMobile()) { alert("WARNING: This script doesn't play well with non-mobile browsers. Proceed at your own risk!") };
// Used for changing touchmove events to mousemove events // Used for changing touchmove events to mousemove events
var previousX = null; var previousTouchX = null;
var previousY = null; var previousTouchY = null;
// Key and mouse events // Key and mouse events
function keyEvent(name, state) { function keyEvent(name, state) {
const keyName = name.toUpperCase().charCodeAt(0) const keyName = name.toUpperCase().charCodeAt(0)
@ -12,63 +20,68 @@ function keyEvent(name, state) {
which: keyName which: keyName
})); }));
} }
function shiftKey(state) { function shiftKeyEvent(state) {
window.dispatchEvent(new KeyboardEvent(state, { window.dispatchEvent(new KeyboardEvent(state, {
keyCode: 16, keyCode: 16,
which: 16 which: 16
})); }));
} }
function mouseEvent(number, state, canvas) { function mouseEvent(number, state, canvas) {
canvas.dispatchEvent(new PointerEvent(state, {"button": number})) canvas.dispatchEvent(new PointerEvent(state, { "button": number }))
} }
function wheelEvent(canvas, delta) {
canvas.dispatchEvent(new WheelEvent("wheel", {
"wheelDeltaY": delta
}));
}
function setButtonVisibility(pointerLocked) {
let inGameStyle = document.getElementById('inGameStyle');
let inMenuStyle = document.getElementById('inMenuStyle');
inGameStyle.disabled = pointerLocked;
inMenuStyle.disabled = !pointerLocked;
}
// POINTERLOCK // POINTERLOCK
// When requestpointerlock is called, this dispatches an event, saves the requested element to window.fakelock, and unhides the touch controls // When requestpointerlock is called, this dispatches an event, saves the requested element to window.fakelock, and unhides the touch controls
window.fakelock = null; window.fakelock = null;
Element.prototype.requestPointerLock = function() { Element.prototype.requestPointerLock = function () {
window.fakelock = this window.fakelock = this
document.dispatchEvent(new Event('pointerlockchange')); document.dispatchEvent(new Event('pointerlockchange'));
console.log("requested pointerlock") console.log("requested pointerlock")
var hideButtonStyleDOM = document.getElementById('hideButtonStyle'); setButtonVisibility(true);
var hideInventoryStyleDOM = document.getElementById('hideInventoryStyle');
hideButtonStyleDOM.disabled = true;
hideInventoryStyleDOM.disabled = true;
return true return true
} }
// Makes pointerLockElement return window.fakelock // Makes pointerLockElement return window.fakelock
Object.defineProperty(document, "pointerLockElement", { Object.defineProperty(document, "pointerLockElement", {
get: function() { get: function () {
return window.fakelock; return window.fakelock;
} }
}); });
// When exitPointerLock is called, this dispatches an event, clears the // When exitPointerLock is called, this dispatches an event, clears the
document.exitPointerLock = function() { document.exitPointerLock = function () {
window.fakelock = null window.fakelock = null
document.dispatchEvent(new Event('pointerlockchange')); document.dispatchEvent(new Event('pointerlockchange'));
console.log("hide ui") setButtonVisibility(false);
var hideButtonStyleDOM = document.getElementById('hideButtonStyle');
var hideInventoryStyleDOM = document.getElementById('hideInventoryStyle');
hideButtonStyleDOM.disabled = false;
hideInventoryStyleDOM.disabled = window.inInventory;
return true return true
} }
// FULLSCREEN // FULLSCREEN
window.fakefull = null; window.fakefull = null;
// Stops the client from crashing when fullscreen is requested // Stops the client from crashing when fullscreen is requested
Element.prototype.requestFullscreen = function() { Element.prototype.requestFullscreen = function () {
window.fakefull = this window.fakefull = this
document.dispatchEvent(new Event('fullscreenchange')); document.dispatchEvent(new Event('fullscreenchange'));
return true return true
} }
Object.defineProperty(document, "fullscreenElement", { Object.defineProperty(document, "fullscreenElement", {
get: function() { get: function () {
return window.fakefull; return window.fakefull;
} }
}); });
document.exitFullscreen = function() { document.exitFullscreen = function () {
window.fakefull = null window.fakefull = null
document.dispatchEvent(new Event('fullscreenchange')); document.dispatchEvent(new Event('fullscreenchange'));
return true return true
@ -78,29 +91,30 @@ document.exitFullscreen = function() {
// Safari doesn't recognize the element.click() used to display the file uplaoder as an action performed by the user, so it ignores it. // Safari doesn't recognize the element.click() used to display the file uplaoder as an action performed by the user, so it ignores it.
// This hijacks the element.createElement() function to add the file upload to the DOM, so the user can manually press the button again. // This hijacks the element.createElement() function to add the file upload to the DOM, so the user can manually press the button again.
var oldCreate = document.createElement; var oldCreate = document.createElement;
document.createElement = function(type) { document.createElement = function (type) {
this.oldCreate = oldCreate; this.oldCreate = oldCreate;
var element = this.oldCreate(type); var element = this.oldCreate(type);
if(type == "input") { if (type == "input") {
var newElement = document.querySelector('input'); var newElement = document.querySelector('input');
if(!newElement) { if (!newElement) {
this.body.appendChild(element); this.body.appendChild(element);
newElement = document.querySelector('input'); newElement = document.querySelector('input');
newElement.addEventListener('change', function(e) { newElement.addEventListener('change', function (e) {
this.hidden = true; this.hidden = true;
}) })
} }
newElement.value = null; newElement.value = null;
newElement.style.cssText ="position:absolute;left:0%;right:100%;top:0%;bottom:100%;width:100%;height:100%;background-color:rgba(255,255,255,0.5);"; newElement.style.cssText = "position:absolute;left:0%;right:100%;top:0%;bottom:100%;width:100%;height:100%;background-color:rgba(255,255,255,0.5);";
newElement.hidden = false; newElement.hidden = false;
return newElement; return newElement;
} }
return this.oldCreate(type); return this.oldCreate(type);
} }
// CSS for touch screen buttons, along with fixing iOS's issues with 100vh ignoring the naviagtion bar, and actually disabling zoom because safari ignores user-scalable=no :( // CSS for touch screen buttons, along with fixing iOS's issues with 100vh ignoring the naviagtion bar, and actually disabling zoom because safari ignores user-scalable=no :(
let customStyle = document.createElement("style"); let customStyle = document.createElement("style");
customStyle.textContent = ` customStyle.textContent = `
button { .mobileControl {
position: absolute; position: absolute;
width: 9vh; width: 9vh;
height: 9vh; height: 9vh;
@ -123,7 +137,7 @@ customStyle.textContent = `
opacity: .5; opacity: .5;
font-weight: 900; font-weight: 900;
} }
button:active { .mobileControl:active {
opacity: .75; opacity: .75;
} }
.minicontrol { .minicontrol {
@ -139,11 +153,11 @@ customStyle.textContent = `
height: 6vh; height: 6vh;
margin: 1vh 0vh; margin: 1vh 0vh;
} }
.crouch { .crouchButton {
background:url(mobile/uiCrouch.png) no-repeat center; background:url(mobile/uiCrouch.png) no-repeat center;
background-size: contain, cover; background-size: contain, cover;
} }
.crouch:active { .crouchButton:active {
background:url(mobile/uiCrouchSel.png) no-repeat center; background:url(mobile/uiCrouchSel.png) no-repeat center;
background-size: contain, cover; background-size: contain, cover;
} }
@ -155,27 +169,21 @@ customStyle.textContent = `
document.documentElement.appendChild(customStyle); document.documentElement.appendChild(customStyle);
// Lazy way to hide touch controls through CSS. // Lazy way to hide touch controls through CSS.
let hideButtonStyle = document.createElement("style"); let inGameStyle = document.createElement("style");
hideButtonStyle.id = "hideButtonStyle"; inGameStyle.id = "inGameStyle";
hideButtonStyle.textContent = ` inGameStyle.textContent = `
#hideButton { .inGame {
display: none;
}
.minicontrol {
display: none; display: none;
}`; }`;
document.documentElement.appendChild(hideButtonStyle); document.documentElement.appendChild(inGameStyle);
let hideInventoryStyle = document.createElement("style"); let inMenuStyle = document.createElement("style");
hideInventoryStyle.id = "hideInventoryStyle"; inMenuStyle.id = "inMenuStyle";
hideInventoryStyle.textContent = ` inMenuStyle.textContent = `
#hideInventory { .inMenu {
display: none;
}
.inventory {
display: none; display: none;
}`; }`;
document.documentElement.appendChild(hideInventoryStyle); document.documentElement.appendChild(inMenuStyle);
// The canvas is created by the client after it finishes unzipping and loading. When the canvas is created, this applies any necessary event listeners // The canvas is created by the client after it finishes unzipping and loading. When the canvas is created, this applies any necessary event listeners
function waitForElm(selector) { function waitForElm(selector) {
@ -195,204 +203,214 @@ function waitForElm(selector) {
}); });
}); });
} }
function createTouchButton(buttonClass, buttonDisplay, elementName) {
var touchButton = document.createElement(elementName ?? 'button');
touchButton.classList.add(buttonClass);
touchButton.classList.add(buttonDisplay);
touchButton.classList.add("mobileControl");
touchButton.addEventListener("touchmove", function (e) { e.preventDefault() }, false);
return touchButton;
}
waitForElm('canvas').then(() => {insertCanvasElements()}); waitForElm('canvas').then(() => { insertCanvasElements() });
function insertCanvasElements() { function insertCanvasElements() {
// Translates touchmove events to mousemove events // Translates touchmove events to mousemove events when inGame, and touchmove events to wheele events when inMenu
var canvas = document.querySelector('canvas'); var canvas = document.querySelector('canvas');
canvas.addEventListener("touchmove", (e) => { canvas.addEventListener("touchmove", (e) => {
const touch = e.targetTouches[0]; // We can get away with this because every other touch event will be on different elements const touch = e.targetTouches[0]; // We can get away with this because every other touch event will be on different elements
if (!previousX) { if (!previousTouchX) {
previousX = touch.pageX; previousTouchX = touch.pageX;
previousY = touch.pageY; previousTouchY = touch.pageY;
} }
e.movementX = touch.pageX - previousX; e.movementX = touch.pageX - previousTouchX;
e.movementY = touch.pageY - previousY; e.movementY = touch.pageY - previousTouchY;
var evt = new MouseEvent("mousemove", { var evt = window.fakelock ? new MouseEvent("mousemove", { movementX: e.movementX, movementY: e.movementY }) : new WheelEvent("wheel", { "wheelDeltaY": e.movementY });
movementX: e.movementX * 2,
movementY: e.movementY * 2
});
canvas.dispatchEvent(evt); canvas.dispatchEvent(evt);
previousX = touch.pageX; previousTouchX = touch.pageX;
previousY = touch.pageY; previousTouchY = touch.pageY;
event.preventDefault(); event.preventDefault();
}, false); }, false);
canvas.addEventListener("touchend", (e) => { canvas.addEventListener("touchend", (e) => {
previousX = null; previousTouchX = null;
previousY = null; previousTouchY = null;
}, false) }, false)
//Updates button visibility on load
setButtonVisibility(window.fakelock != null);
// Adds all of the touch screen controls // Adds all of the touch screen controls
// Theres probably a better way to do this but this works for now // Theres probably a better way to do this but this works for now
function showStrafe() { function Strafing(displayStrafe) {
if (displayStrafe === true) {
forwardLeftButton.classList.add("show") forwardLeftButton.classList.add("show")
forwardRightButton.classList.add("show") forwardRightButton.classList.add("show")
} }
else if (displayStrafe === false) {
function hideStrafe() {
forwardLeftButton.classList.remove("show") forwardLeftButton.classList.remove("show")
forwardRightButton.classList.remove("show") forwardRightButton.classList.remove("show")
} }
}
var forwardLeftButton = document.createElement('button'); let forwardLeftButton = createTouchButton("forwardLeftButton", "inGame");
forwardLeftButton.classList = "minicontrol" forwardLeftButton.classList.add("minicontrol")
forwardLeftButton.style.cssText = "left:5.5vh;bottom:22vh;background:url(mobile/uiUpLeft.png) no-repeat center;background-size: contain, cover;" forwardLeftButton.style.cssText = "left:5.5vh;bottom:22vh;background:url(mobile/uiUpLeft.png) no-repeat center;background-size: contain, cover;"
forwardLeftButton.addEventListener("touchstart", function(e){keyEvent("w", "keydown"),keyEvent("a", "keydown"), strafe=true}, false); forwardLeftButton.addEventListener("touchstart", function (e) { keyEvent("w", "keydown"), keyEvent("a", "keydown"), strafe = true }, false);
forwardLeftButton.addEventListener("touchend", function(e){keyEvent("w", "keyup"),keyEvent("a", "keyup"), hideStrafe(), strafe=false}, false); forwardLeftButton.addEventListener("touchend", function (e) { keyEvent("w", "keyup"), keyEvent("a", "keyup"), Strafing(false), strafe = false }, false);
forwardLeftButton.addEventListener("touchmove", function(e){e.preventDefault()}, false); forwardLeftButton.addEventListener("touchmove", function (e) { e.preventDefault() }, false);
document.body.appendChild(forwardLeftButton); document.body.appendChild(forwardLeftButton);
var forwardRightButton = document.createElement('button'); let forwardRightButton = createTouchButton("forwardRightButton", "inGame");
forwardRightButton.classList = "minicontrol hidden" forwardRightButton.classList.add("minicontrol")
forwardRightButton.style.cssText = "left:24vh;bottom:22vh;background:url(mobile/uiUpRight.png) no-repeat center;background-size: contain, cover;" forwardRightButton.style.cssText = "left:24vh;bottom:22vh;background:url(mobile/uiUpRight.png) no-repeat center;background-size: contain, cover;"
forwardRightButton.addEventListener("touchstart", function(e){keyEvent("w", "keydown"),keyEvent("d", "keydown"), strafe=true}, false); forwardRightButton.addEventListener("touchstart", function (e) { keyEvent("w", "keydown"), keyEvent("d", "keydown"), strafe = true }, false);
forwardRightButton.addEventListener("touchend", function(e){keyEvent("w", "keyup"),keyEvent("d", "keyup"), hideStrafe(), strafe=false}, false); forwardRightButton.addEventListener("touchend", function (e) { keyEvent("w", "keyup"), keyEvent("d", "keyup"), Strafing(false), strafe = false }, false);
forwardRightButton.addEventListener("touchmove", function(e){e.preventDefault()}, false); forwardRightButton.addEventListener("touchmove", function (e) { e.preventDefault() }, false);
document.body.appendChild(forwardRightButton); document.body.appendChild(forwardRightButton);
var forwardButton = document.createElement('button'); let forwardButton = createTouchButton("forwardButton", "inGame");
forwardButton.id = "hideButton"
forwardButton.style.cssText = "left:14vh;bottom:22vh;background:url(mobile/uiUp.png) no-repeat center;background-size: contain, cover;" forwardButton.style.cssText = "left:14vh;bottom:22vh;background:url(mobile/uiUp.png) no-repeat center;background-size: contain, cover;"
forwardButton.addEventListener("touchstart", function(e){keyEvent("w", "keydown"), showStrafe(), strafe=false}, false); forwardButton.addEventListener("touchstart", function (e) { keyEvent("w", "keydown"), Strafing(true), strafe = false }, false);
forwardButton.addEventListener("touchend", function(e){if (strafe===false) {hideStrafe()} keyEvent("w", "keyup")}, false); forwardButton.addEventListener("touchend", function (e) { if (strafe === false) { Strafing(false) } keyEvent("w", "keyup") }, false);
forwardButton.addEventListener("touchmove", function(e){e.preventDefault()}, false); forwardButton.addEventListener("touchmove", function (e) { e.preventDefault() }, false);
document.body.appendChild(forwardButton); document.body.appendChild(forwardButton);
var rightButton = document.createElement('button'); let rightButton = createTouchButton("rightButton", "inGame");
rightButton.id = "hideButton"
rightButton.style.cssText = "left:24vh;bottom:12vh;background:url(mobile/uiRight.png) no-repeat center;background-size: contain, cover;" rightButton.style.cssText = "left:24vh;bottom:12vh;background:url(mobile/uiRight.png) no-repeat center;background-size: contain, cover;"
rightButton.addEventListener("touchstart", function(e){keyEvent("d", "keydown")}, false); rightButton.addEventListener("touchstart", function (e) { keyEvent("d", "keydown") }, false);
rightButton.addEventListener("touchend", function(e){keyEvent("d", "keyup")}, false); rightButton.addEventListener("touchend", function (e) { keyEvent("d", "keyup") }, false);
rightButton.addEventListener("touchmove", function(e){e.preventDefault()}, false); rightButton.addEventListener("touchmove", function (e) { e.preventDefault() }, false);
document.body.appendChild(rightButton); document.body.appendChild(rightButton);
var leftButton = document.createElement('button'); let leftButton = createTouchButton("leftButton", "inGame");
leftButton.id = "hideButton"
leftButton.style.cssText = "left: 4vh; bottom:12vh;background:url(mobile/uiLeft.png) no-repeat center;background-size: contain, cover;" leftButton.style.cssText = "left: 4vh; bottom:12vh;background:url(mobile/uiLeft.png) no-repeat center;background-size: contain, cover;"
leftButton.addEventListener("touchstart", function(e){keyEvent("a", "keydown")}, false); leftButton.addEventListener("touchstart", function (e) { keyEvent("a", "keydown") }, false);
leftButton.addEventListener("touchend", function(e){keyEvent("a", "keyup")}, false); leftButton.addEventListener("touchend", function (e) { keyEvent("a", "keyup") }, false);
leftButton.addEventListener("touchmove", function(e){e.preventDefault()}, false); leftButton.addEventListener("touchmove", function (e) { e.preventDefault() }, false);
document.body.appendChild(leftButton); document.body.appendChild(leftButton);
var backButton = document.createElement('button'); let backButton = createTouchButton("backButton", "inGame");
backButton.id = "hideButton"
backButton.style.cssText = "left:14vh;bottom:2vh;background:url(mobile/uiDown.png) no-repeat center;background-size: contain, cover;" backButton.style.cssText = "left:14vh;bottom:2vh;background:url(mobile/uiDown.png) no-repeat center;background-size: contain, cover;"
backButton.addEventListener("touchstart", function(e){keyEvent("s", "keydown")}, false); backButton.addEventListener("touchstart", function (e) { keyEvent("s", "keydown") }, false);
backButton.addEventListener("touchend", function(e){keyEvent("s", "keyup")}, false); backButton.addEventListener("touchend", function (e) { keyEvent("s", "keyup") }, false);
backButton.addEventListener("touchmove", function(e){e.preventDefault()}, false); backButton.addEventListener("touchmove", function (e) { e.preventDefault() }, false);
document.body.appendChild(backButton); document.body.appendChild(backButton);
var jumpButton = document.createElement('button'); let jumpButton = createTouchButton("jumpButton", "inGame");
jumpButton.id = "hideButton"
jumpButton.style.cssText = "right:20vh;bottom:20vh;background:url(mobile/uiJump.png) no-repeat center;background-size: contain, cover;" jumpButton.style.cssText = "right:20vh;bottom:20vh;background:url(mobile/uiJump.png) no-repeat center;background-size: contain, cover;"
jumpButton.addEventListener("touchstart", function(e){keyEvent(" ", "keydown")}, false); jumpButton.addEventListener("touchstart", function (e) { keyEvent(" ", "keydown") }, false);
jumpButton.addEventListener("touchend", function(e){keyEvent(" ", "keyup")}, false); jumpButton.addEventListener("touchend", function (e) { keyEvent(" ", "keyup") }, false);
jumpButton.addEventListener("touchmove", function(e){e.preventDefault()}, false); jumpButton.addEventListener("touchmove", function (e) { e.preventDefault() }, false);
document.body.appendChild(jumpButton); document.body.appendChild(jumpButton);
var crouchButton = document.createElement('button'); let crouchButton = createTouchButton("crouchButton", "inGame");
crouchButton.id = "hideButton"
crouchButton.classList = "crouch"
crouchButton.style.cssText = "left:14vh;bottom:12vh;" crouchButton.style.cssText = "left:14vh;bottom:12vh;"
crouchButton.addEventListener("touchstart", function(e){shiftKey("keydown"), cshift=false}, false); crouchButton.addEventListener("touchstart", function (e) { shiftKeyEvent("keydown"), cshift = false }, false);
crouchButton.addEventListener("touchend", function(e){if (cshift===false) {shiftKey("keyup")}}, false); crouchButton.addEventListener("touchend", function (e) { if (cshift === false) { shiftKeyEvent("keyup") } }, false);
crouchButton.addEventListener("touchmove", function(e){e.preventDefault()}, false); crouchButton.addEventListener("touchmove", function (e) { e.preventDefault() }, false);
crouchButton.addEventListener("pointerdown", function(e){ctimer = setTimeout(function(e){shiftKey("keydown"), cshift=true}, 1000)}, false); crouchButton.addEventListener("pointerdown", function (e) { ctimer = setTimeout(function (e) { shiftKeyEvent("keydown"), cshift = true }, 1000) }, false);
crouchButton.addEventListener("pointerup", function(e){clearTimeout(ctimer)}, false); crouchButton.addEventListener("pointerup", function (e) { clearTimeout(ctimer) }, false);
document.body.appendChild(crouchButton); document.body.appendChild(crouchButton);
var inventoryButton = document.createElement('button'); let inventoryButton = createTouchButton("inventoryButton", "inGame");
inventoryButton.id = "hideInventory" inventoryButton.classList.add("mini")
inventoryButton.classList = "mini"
inventoryButton.style.cssText = "right:11.75vw;bottom:0vh;background:url(mobile/uiInventory.png) no-repeat center;background-size: contain, cover;" inventoryButton.style.cssText = "right:11.75vw;bottom:0vh;background:url(mobile/uiInventory.png) no-repeat center;background-size: contain, cover;"
inventoryButton.addEventListener("touchstart", function(e){ inventoryButton.addEventListener("touchstart", function (e) {
window.inInventory = (window.fakelock != null) window.inInventory = (window.fakelock != null)
keyEvent("e", "keydown"); keyEvent("e", "keydown");
}, false); }, false);
inventoryButton.addEventListener("touchend", function(e){keyEvent("e", "keyup")}, false); inventoryButton.addEventListener("touchend", function (e) { keyEvent("e", "keyup") }, false);
inventoryButton.addEventListener("touchmove", function(e){e.preventDefault()}, false); inventoryButton.addEventListener("touchmove", function (e) { e.preventDefault() }, false);
document.body.appendChild(inventoryButton); document.body.appendChild(inventoryButton);
var chatButton = document.createElement('button'); let chatButton = createTouchButton("chatButton", "inGame");
chatButton.id = "hideButton" chatButton.classList.add("mini")
chatButton.classList = "mini" chatButton.style.cssText = "left:44vw;top:0vh;background:url(mobile/uiChat.png) no-repeat center;background-size: contain, cover;"
chatButton.style.cssText = "left:44.5vw;top:0vh;background:url(mobile/uiChat.png) no-repeat center;background-size: contain, cover;" chatButton.addEventListener("touchstart", function (e) { keyEvent("t", "keydown") }, false);
chatButton.addEventListener("touchstart", function(e){keyEvent("t", "keydown")}, false); chatButton.addEventListener("touchmove", function (e) { e.preventDefault() }, false);
chatButton.addEventListener("touchmove", function(e){e.preventDefault()}, false);
document.body.appendChild(chatButton); document.body.appendChild(chatButton);
var angleButton = document.createElement('button'); let angleButton = createTouchButton("angleButton", "inGame");
angleButton.id = "hideButton" angleButton.classList.add("mini")
angleButton.classList = "mini" angleButton.style.cssText = "left:53vw;top:0vh;background:url(mobile/uiAngle.png) no-repeat center;background-size: contain, cover;"
angleButton.style.cssText = "left:50.5vw;top:0vh;background:url(mobile/uiAngle.png) no-repeat center;background-size: contain, cover;" angleButton.addEventListener("touchstart", function (e) { keyEvent("f", "keydown"), keyEvent("5", "keydown") }, false);
angleButton.addEventListener("touchstart", function(e){keyEvent("f", "keydown"), keyEvent("5", "keydown")}, false); angleButton.addEventListener("touchmove", function (e) { e.preventDefault() }, false);
angleButton.addEventListener("touchmove", function(e){e.preventDefault()}, false);
document.body.appendChild(angleButton); document.body.appendChild(angleButton);
var exitButton = document.createElement('button'); let exitButton = createTouchButton("exitButton", "inAll");
exitButton.id = "hideButton" exitButton.classList.add("mini")
exitButton.classList = "mini" exitButton.style.cssText = "left:47vw;top:0vh;background:url(mobile/uiPause.png) no-repeat center;background-size: contain, cover;"
exitButton.style.cssText = "left:47.5vw;top:0vh;background:url(mobile/uiPause.png) no-repeat center;background-size: contain, cover;" exitButton.addEventListener("touchstart", function (e) { keyEvent("À", "keydown") }, false);
exitButton.addEventListener("touchstart", function(e){keyEvent("À", "keydown")}, false); exitButton.addEventListener("touchend", function (e) { keyEvent("À", "keyup") }, false);
exitButton.addEventListener("touchend", function(e){keyEvent("À", "keyup")}, false); exitButton.addEventListener("touchmove", function (e) { e.preventDefault() }, false);
exitButton.addEventListener("touchmove", function(e){e.preventDefault()}, false);
document.body.appendChild(exitButton); document.body.appendChild(exitButton);
var sprintButton = document.createElement('button'); let hiddenInput = document.createElement('input');
sprintButton.id = "hideButton" hiddenInput.id = "hiddenInput"
sprintButton.style.cssText = "right:6vh;bottom:54vh;background:url(mobile/uiSprint.png) no-repeat center;background-size: contain, cover;" hiddenInput.style.cssText = "opacity:0;z-index:-99999";
sprintButton.addEventListener("touchstart", function(e){keyEvent("r", "keydown")}, false); document.body.appendChild(hiddenInput);
sprintButton.addEventListener("touchend", function(e){keyEvent("r", "keyup")}, false); let keyboardButton = createTouchButton("keyboardButton", "inAll");
sprintButton.addEventListener("touchmove", function(e){e.preventDefault()}, false); keyboardButton.id = "keyboardButton"
keyboardButton.classList.add("mini")
keyboardButton.style.cssText = "left:50vw;top:0vh;background:url(mobile/uiKeyboard.png) no-repeat center;background-size: contain, cover;"
keyboardButton.addEventListener("touchstart", function (e) { e.preventDefault(); hiddenInput.blur() }, false);
keyboardButton.addEventListener("touchend", function (e) { hiddenInput.select() }, false);
document.body.appendChild(keyboardButton);
let sprintButton = createTouchButton("sprintButton", "inGame");
sprintButton.style.cssText = "right:19vh;bottom:53vh;background:url(mobile/uiSprint.png) no-repeat center;background-size: contain, cover;"
sprintButton.addEventListener("touchstart", function (e) { keyEvent("r", "keydown") }, false);
sprintButton.addEventListener("touchend", function (e) { keyEvent("r", "keyup") }, false);
sprintButton.addEventListener("touchmove", function (e) { e.preventDefault() }, false);
document.body.appendChild(sprintButton); document.body.appendChild(sprintButton);
var placeButton = document.createElement('button'); let placeButton = createTouchButton("placeButton", "inGame");
placeButton.id = "hideButton" placeButton.style.cssText = "right:6vh;bottom:37vh;background:url(mobile/uiInteract.png) no-repeat center;background-size: contain, cover;"
placeButton.style.cssText = "right:6vh;bottom:38vh;background:url(mobile/uiInteract.png) no-repeat center;background-size: contain, cover;" placeButton.addEventListener("touchstart", function (e) { mouseEvent(2, "mousedown", canvas) }, false);
placeButton.addEventListener("touchstart", function(e){mouseEvent(2, "mousedown", canvas)}, false); placeButton.addEventListener("touchend", function (e) { mouseEvent(2, "mouseup", canvas) }, false);
placeButton.addEventListener("touchend", function(e){mouseEvent(2, "mouseup", canvas)}, false); placeButton.addEventListener("touchmove", function (e) { e.preventDefault() }, false);
placeButton.addEventListener("touchmove", function(e){e.preventDefault()}, false);
document.body.appendChild(placeButton); document.body.appendChild(placeButton);
var breakButton = document.createElement('button'); let breakButton = createTouchButton("breakButton", "inGame");
breakButton.id = "hideButton" breakButton.style.cssText = "right:19vh;bottom:41vh;background:url(mobile/uiAttack.png) no-repeat center;background-size: contain, cover;"
breakButton.style.cssText = "right:20vh;bottom:43vh;background:url(mobile/uiAttack.png) no-repeat center;background-size: contain, cover;" breakButton.addEventListener("touchstart", function (e) { mouseEvent(0, "mousedown", canvas) }, false);
breakButton.addEventListener("touchstart", function(e){mouseEvent(0, "mousedown", canvas)}, false); breakButton.addEventListener("touchend", function (e) { mouseEvent(0, "mouseup", canvas) }, false);
breakButton.addEventListener("touchend", function(e){mouseEvent(0, "mouseup", canvas)}, false); breakButton.addEventListener("touchmove", function (e) { e.preventDefault() }, false);
breakButton.addEventListener("touchmove", function(e){e.preventDefault()}, false);
document.body.appendChild(breakButton); document.body.appendChild(breakButton);
var scrollUpButton = document.createElement('button'); let selectButton = createTouchButton("selectButton", "inGame");
scrollUpButton.id = "hideButton" selectButton.style.cssText = "right:6vh;bottom:49vh;background:url(mobile/uiSelector.png) no-repeat center;background-size: contain, cover;"
scrollUpButton.classList = "mini" selectButton.addEventListener("touchstart", function (e) { mouseEvent(1, "mousedown", canvas) }, false);
selectButton.addEventListener("touchend", function (e) { mouseEvent(1, "mouseup", canvas) }, false);
selectButton.addEventListener("touchmove", function (e) { e.preventDefault() }, false);
document.body.appendChild(selectButton);
let scrollUpButton = createTouchButton("scrollUpButton", "inGame");
scrollUpButton.classList.add("mini")
scrollUpButton.style.cssText = "right:5.25vw;bottom:0vh;background:url(mobile/uiSRight.png) no-repeat center;background-size: contain, cover;" scrollUpButton.style.cssText = "right:5.25vw;bottom:0vh;background:url(mobile/uiSRight.png) no-repeat center;background-size: contain, cover;"
scrollUpButton.addEventListener("touchstart", function(e){ scrollUpButton.addEventListener("touchstart", function (e) {
canvas.dispatchEvent(new WheelEvent("wheel", {"wheelDeltaY": -10})) canvas.dispatchEvent(new WheelEvent("wheel", { "wheelDeltaY": -10 }))
}, false); }, false);
scrollUpButton.addEventListener("touchmove", function(e){e.preventDefault()}, false); scrollUpButton.addEventListener("touchmove", function (e) { e.preventDefault() }, false);
document.body.appendChild(scrollUpButton); document.body.appendChild(scrollUpButton);
var scrollDownButton = document.createElement('button'); let scrollDownButton = createTouchButton("scrollDownButton", "inGame");
scrollDownButton.id = "hideButton" scrollDownButton.classList.add("mini")
scrollDownButton.classList = "mini"
scrollDownButton.style.cssText = "right:15vw;bottom:0vh;background:url(mobile/uiSLeft.png) no-repeat center;background-size: contain, cover;" scrollDownButton.style.cssText = "right:15vw;bottom:0vh;background:url(mobile/uiSLeft.png) no-repeat center;background-size: contain, cover;"
scrollDownButton.addEventListener("touchstart", function(e){ scrollDownButton.addEventListener("touchstart", function (e) {
canvas.dispatchEvent(new WheelEvent("wheel", {"wheelDeltaY": 10})) canvas.dispatchEvent(new WheelEvent("wheel", { "wheelDeltaY": 10 }))
}, false); }, false);
scrollDownButton.addEventListener("touchmove", function(e){e.preventDefault()}, false); scrollDownButton.addEventListener("touchmove", function (e) { e.preventDefault() }, false);
document.body.appendChild(scrollDownButton); document.body.appendChild(scrollDownButton);
var throwButton = document.createElement('button'); let throwButton = createTouchButton("throwButton", "inGame");
throwButton.id = "hideButton" throwButton.classList.add("mini")
throwButton.classList = "mini"
throwButton.style.cssText = "right:8.5vw;bottom:0vh;background:url(mobile/uiDrop.png) no-repeat center;background-size: contain, cover;" throwButton.style.cssText = "right:8.5vw;bottom:0vh;background:url(mobile/uiDrop.png) no-repeat center;background-size: contain, cover;"
throwButton.addEventListener("touchstart", function(e){ throwButton.addEventListener("touchstart", function (e) {
window.inInventory = (window.fakelock != null) window.inInventory = (window.fakelock != null)
keyEvent("q", "keydown"); keyEvent("q", "keydown");
}, false); }, false);
throwButton.addEventListener("touchend", function(e){keyEvent("q", "keyup")}, false); throwButton.addEventListener("touchend", function (e) { keyEvent("q", "keyup") }, false);
throwButton.addEventListener("touchmove", function(e){e.preventDefault()}, false); throwButton.addEventListener("touchmove", function (e) { e.preventDefault() }, false);
document.body.appendChild(throwButton); document.body.appendChild(throwButton);
} }

BIN
demo/mobile/uiKeyboard.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 573 B

BIN
demo/mobile/uiSelector.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 522 B

356
source/mobile/mobile.js
View File

@ -1,8 +1,16 @@
// Hides inventory button function isMobile() {
window.inInventory = false; try {
document.createEvent("TouchEvent");
return true;
} catch (e) {
return false;
}
}
if (!isMobile()) { alert("WARNING: This script doesn't play well with non-mobile browsers. Proceed at your own risk!") };
// Used for changing touchmove events to mousemove events // Used for changing touchmove events to mousemove events
var previousX = null; var previousTouchX = null;
var previousY = null; var previousTouchY = null;
// Key and mouse events // Key and mouse events
function keyEvent(name, state) { function keyEvent(name, state) {
const keyName = name.toUpperCase().charCodeAt(0) const keyName = name.toUpperCase().charCodeAt(0)
@ -12,63 +20,68 @@ function keyEvent(name, state) {
which: keyName which: keyName
})); }));
} }
function shiftKey(state) { function shiftKeyEvent(state) {
window.dispatchEvent(new KeyboardEvent(state, { window.dispatchEvent(new KeyboardEvent(state, {
keyCode: 16, keyCode: 16,
which: 16 which: 16
})); }));
} }
function mouseEvent(number, state, canvas) { function mouseEvent(number, state, canvas) {
canvas.dispatchEvent(new PointerEvent(state, {"button": number})) canvas.dispatchEvent(new PointerEvent(state, { "button": number }))
} }
function wheelEvent(canvas, delta) {
canvas.dispatchEvent(new WheelEvent("wheel", {
"wheelDeltaY": delta
}));
}
function setButtonVisibility(pointerLocked) {
let inGameStyle = document.getElementById('inGameStyle');
let inMenuStyle = document.getElementById('inMenuStyle');
inGameStyle.disabled = pointerLocked;
inMenuStyle.disabled = !pointerLocked;
}
// POINTERLOCK // POINTERLOCK
// When requestpointerlock is called, this dispatches an event, saves the requested element to window.fakelock, and unhides the touch controls // When requestpointerlock is called, this dispatches an event, saves the requested element to window.fakelock, and unhides the touch controls
window.fakelock = null; window.fakelock = null;
Element.prototype.requestPointerLock = function() { Element.prototype.requestPointerLock = function () {
window.fakelock = this window.fakelock = this
document.dispatchEvent(new Event('pointerlockchange')); document.dispatchEvent(new Event('pointerlockchange'));
console.log("requested pointerlock") console.log("requested pointerlock")
var hideButtonStyleDOM = document.getElementById('hideButtonStyle'); setButtonVisibility(true);
var hideInventoryStyleDOM = document.getElementById('hideInventoryStyle');
hideButtonStyleDOM.disabled = true;
hideInventoryStyleDOM.disabled = true;
return true return true
} }
// Makes pointerLockElement return window.fakelock // Makes pointerLockElement return window.fakelock
Object.defineProperty(document, "pointerLockElement", { Object.defineProperty(document, "pointerLockElement", {
get: function() { get: function () {
return window.fakelock; return window.fakelock;
} }
}); });
// When exitPointerLock is called, this dispatches an event, clears the // When exitPointerLock is called, this dispatches an event, clears the
document.exitPointerLock = function() { document.exitPointerLock = function () {
window.fakelock = null window.fakelock = null
document.dispatchEvent(new Event('pointerlockchange')); document.dispatchEvent(new Event('pointerlockchange'));
console.log("hide ui") setButtonVisibility(false);
var hideButtonStyleDOM = document.getElementById('hideButtonStyle');
var hideInventoryStyleDOM = document.getElementById('hideInventoryStyle');
hideButtonStyleDOM.disabled = false;
hideInventoryStyleDOM.disabled = window.inInventory;
return true return true
} }
// FULLSCREEN // FULLSCREEN
window.fakefull = null; window.fakefull = null;
// Stops the client from crashing when fullscreen is requested // Stops the client from crashing when fullscreen is requested
Element.prototype.requestFullscreen = function() { Element.prototype.requestFullscreen = function () {
window.fakefull = this window.fakefull = this
document.dispatchEvent(new Event('fullscreenchange')); document.dispatchEvent(new Event('fullscreenchange'));
return true return true
} }
Object.defineProperty(document, "fullscreenElement", { Object.defineProperty(document, "fullscreenElement", {
get: function() { get: function () {
return window.fakefull; return window.fakefull;
} }
}); });
document.exitFullscreen = function() { document.exitFullscreen = function () {
window.fakefull = null window.fakefull = null
document.dispatchEvent(new Event('fullscreenchange')); document.dispatchEvent(new Event('fullscreenchange'));
return true return true
@ -78,29 +91,30 @@ document.exitFullscreen = function() {
// Safari doesn't recognize the element.click() used to display the file uplaoder as an action performed by the user, so it ignores it. // Safari doesn't recognize the element.click() used to display the file uplaoder as an action performed by the user, so it ignores it.
// This hijacks the element.createElement() function to add the file upload to the DOM, so the user can manually press the button again. // This hijacks the element.createElement() function to add the file upload to the DOM, so the user can manually press the button again.
var oldCreate = document.createElement; var oldCreate = document.createElement;
document.createElement = function(type) { document.createElement = function (type) {
this.oldCreate = oldCreate; this.oldCreate = oldCreate;
var element = this.oldCreate(type); var element = this.oldCreate(type);
if(type == "input") { if (type == "input") {
var newElement = document.querySelector('input'); var newElement = document.querySelector('input');
if(!newElement) { if (!newElement) {
this.body.appendChild(element); this.body.appendChild(element);
newElement = document.querySelector('input'); newElement = document.querySelector('input');
newElement.addEventListener('change', function(e) { newElement.addEventListener('change', function (e) {
this.hidden = true; this.hidden = true;
}) })
} }
newElement.value = null; newElement.value = null;
newElement.style.cssText ="position:absolute;left:0%;right:100%;top:0%;bottom:100%;width:100%;height:100%;background-color:rgba(255,255,255,0.5);"; newElement.style.cssText = "position:absolute;left:0%;right:100%;top:0%;bottom:100%;width:100%;height:100%;background-color:rgba(255,255,255,0.5);";
newElement.hidden = false; newElement.hidden = false;
return newElement; return newElement;
} }
return this.oldCreate(type); return this.oldCreate(type);
} }
// CSS for touch screen buttons, along with fixing iOS's issues with 100vh ignoring the naviagtion bar, and actually disabling zoom because safari ignores user-scalable=no :( // CSS for touch screen buttons, along with fixing iOS's issues with 100vh ignoring the naviagtion bar, and actually disabling zoom because safari ignores user-scalable=no :(
let customStyle = document.createElement("style"); let customStyle = document.createElement("style");
customStyle.textContent = ` customStyle.textContent = `
button { .mobileControl {
position: absolute; position: absolute;
width: 9vh; width: 9vh;
height: 9vh; height: 9vh;
@ -123,7 +137,7 @@ customStyle.textContent = `
opacity: .5; opacity: .5;
font-weight: 900; font-weight: 900;
} }
button:active { .mobileControl:active {
opacity: .75; opacity: .75;
} }
.minicontrol { .minicontrol {
@ -139,11 +153,11 @@ customStyle.textContent = `
height: 6vh; height: 6vh;
margin: 1vh 0vh; margin: 1vh 0vh;
} }
.crouch { .crouchButton {
background:url(mobile/uiCrouch.png) no-repeat center; background:url(mobile/uiCrouch.png) no-repeat center;
background-size: contain, cover; background-size: contain, cover;
} }
.crouch:active { .crouchButton:active {
background:url(mobile/uiCrouchSel.png) no-repeat center; background:url(mobile/uiCrouchSel.png) no-repeat center;
background-size: contain, cover; background-size: contain, cover;
} }
@ -155,27 +169,21 @@ customStyle.textContent = `
document.documentElement.appendChild(customStyle); document.documentElement.appendChild(customStyle);
// Lazy way to hide touch controls through CSS. // Lazy way to hide touch controls through CSS.
let hideButtonStyle = document.createElement("style"); let inGameStyle = document.createElement("style");
hideButtonStyle.id = "hideButtonStyle"; inGameStyle.id = "inGameStyle";
hideButtonStyle.textContent = ` inGameStyle.textContent = `
#hideButton { .inGame {
display: none;
}
.minicontrol {
display: none; display: none;
}`; }`;
document.documentElement.appendChild(hideButtonStyle); document.documentElement.appendChild(inGameStyle);
let hideInventoryStyle = document.createElement("style"); let inMenuStyle = document.createElement("style");
hideInventoryStyle.id = "hideInventoryStyle"; inMenuStyle.id = "inMenuStyle";
hideInventoryStyle.textContent = ` inMenuStyle.textContent = `
#hideInventory { .inMenu {
display: none;
}
.inventory {
display: none; display: none;
}`; }`;
document.documentElement.appendChild(hideInventoryStyle); document.documentElement.appendChild(inMenuStyle);
// The canvas is created by the client after it finishes unzipping and loading. When the canvas is created, this applies any necessary event listeners // The canvas is created by the client after it finishes unzipping and loading. When the canvas is created, this applies any necessary event listeners
function waitForElm(selector) { function waitForElm(selector) {
@ -195,204 +203,214 @@ function waitForElm(selector) {
}); });
}); });
} }
function createTouchButton(buttonClass, buttonDisplay, elementName) {
var touchButton = document.createElement(elementName ?? 'button');
touchButton.classList.add(buttonClass);
touchButton.classList.add(buttonDisplay);
touchButton.classList.add("mobileControl");
touchButton.addEventListener("touchmove", function (e) { e.preventDefault() }, false);
return touchButton;
}
waitForElm('canvas').then(() => {insertCanvasElements()}); waitForElm('canvas').then(() => { insertCanvasElements() });
function insertCanvasElements() { function insertCanvasElements() {
// Translates touchmove events to mousemove events // Translates touchmove events to mousemove events when inGame, and touchmove events to wheele events when inMenu
var canvas = document.querySelector('canvas'); var canvas = document.querySelector('canvas');
canvas.addEventListener("touchmove", (e) => { canvas.addEventListener("touchmove", (e) => {
const touch = e.targetTouches[0]; // We can get away with this because every other touch event will be on different elements const touch = e.targetTouches[0]; // We can get away with this because every other touch event will be on different elements
if (!previousX) { if (!previousTouchX) {
previousX = touch.pageX; previousTouchX = touch.pageX;
previousY = touch.pageY; previousTouchY = touch.pageY;
} }
e.movementX = touch.pageX - previousX; e.movementX = touch.pageX - previousTouchX;
e.movementY = touch.pageY - previousY; e.movementY = touch.pageY - previousTouchY;
var evt = new MouseEvent("mousemove", { var evt = window.fakelock ? new MouseEvent("mousemove", { movementX: e.movementX, movementY: e.movementY }) : new WheelEvent("wheel", { "wheelDeltaY": e.movementY });
movementX: e.movementX * 2,
movementY: e.movementY * 2
});
canvas.dispatchEvent(evt); canvas.dispatchEvent(evt);
previousX = touch.pageX; previousTouchX = touch.pageX;
previousY = touch.pageY; previousTouchY = touch.pageY;
event.preventDefault(); event.preventDefault();
}, false); }, false);
canvas.addEventListener("touchend", (e) => { canvas.addEventListener("touchend", (e) => {
previousX = null; previousTouchX = null;
previousY = null; previousTouchY = null;
}, false) }, false)
//Updates button visibility on load
setButtonVisibility(window.fakelock != null);
// Adds all of the touch screen controls // Adds all of the touch screen controls
// Theres probably a better way to do this but this works for now // Theres probably a better way to do this but this works for now
function showStrafe() { function Strafing(displayStrafe) {
if (displayStrafe === true) {
forwardLeftButton.classList.add("show") forwardLeftButton.classList.add("show")
forwardRightButton.classList.add("show") forwardRightButton.classList.add("show")
} }
else if (displayStrafe === false) {
function hideStrafe() {
forwardLeftButton.classList.remove("show") forwardLeftButton.classList.remove("show")
forwardRightButton.classList.remove("show") forwardRightButton.classList.remove("show")
} }
}
var forwardLeftButton = document.createElement('button'); let forwardLeftButton = createTouchButton("forwardLeftButton", "inGame");
forwardLeftButton.classList = "minicontrol" forwardLeftButton.classList.add("minicontrol")
forwardLeftButton.style.cssText = "left:5.5vh;bottom:22vh;background:url(mobile/uiUpLeft.png) no-repeat center;background-size: contain, cover;" forwardLeftButton.style.cssText = "left:5.5vh;bottom:22vh;background:url(mobile/uiUpLeft.png) no-repeat center;background-size: contain, cover;"
forwardLeftButton.addEventListener("touchstart", function(e){keyEvent("w", "keydown"),keyEvent("a", "keydown"), strafe=true}, false); forwardLeftButton.addEventListener("touchstart", function (e) { keyEvent("w", "keydown"), keyEvent("a", "keydown"), strafe = true }, false);
forwardLeftButton.addEventListener("touchend", function(e){keyEvent("w", "keyup"),keyEvent("a", "keyup"), hideStrafe(), strafe=false}, false); forwardLeftButton.addEventListener("touchend", function (e) { keyEvent("w", "keyup"), keyEvent("a", "keyup"), Strafing(false), strafe = false }, false);
forwardLeftButton.addEventListener("touchmove", function(e){e.preventDefault()}, false); forwardLeftButton.addEventListener("touchmove", function (e) { e.preventDefault() }, false);
document.body.appendChild(forwardLeftButton); document.body.appendChild(forwardLeftButton);
var forwardRightButton = document.createElement('button'); let forwardRightButton = createTouchButton("forwardRightButton", "inGame");
forwardRightButton.classList = "minicontrol hidden" forwardRightButton.classList.add("minicontrol")
forwardRightButton.style.cssText = "left:24vh;bottom:22vh;background:url(mobile/uiUpRight.png) no-repeat center;background-size: contain, cover;" forwardRightButton.style.cssText = "left:24vh;bottom:22vh;background:url(mobile/uiUpRight.png) no-repeat center;background-size: contain, cover;"
forwardRightButton.addEventListener("touchstart", function(e){keyEvent("w", "keydown"),keyEvent("d", "keydown"), strafe=true}, false); forwardRightButton.addEventListener("touchstart", function (e) { keyEvent("w", "keydown"), keyEvent("d", "keydown"), strafe = true }, false);
forwardRightButton.addEventListener("touchend", function(e){keyEvent("w", "keyup"),keyEvent("d", "keyup"), hideStrafe(), strafe=false}, false); forwardRightButton.addEventListener("touchend", function (e) { keyEvent("w", "keyup"), keyEvent("d", "keyup"), Strafing(false), strafe = false }, false);
forwardRightButton.addEventListener("touchmove", function(e){e.preventDefault()}, false); forwardRightButton.addEventListener("touchmove", function (e) { e.preventDefault() }, false);
document.body.appendChild(forwardRightButton); document.body.appendChild(forwardRightButton);
var forwardButton = document.createElement('button'); let forwardButton = createTouchButton("forwardButton", "inGame");
forwardButton.id = "hideButton"
forwardButton.style.cssText = "left:14vh;bottom:22vh;background:url(mobile/uiUp.png) no-repeat center;background-size: contain, cover;" forwardButton.style.cssText = "left:14vh;bottom:22vh;background:url(mobile/uiUp.png) no-repeat center;background-size: contain, cover;"
forwardButton.addEventListener("touchstart", function(e){keyEvent("w", "keydown"), showStrafe(), strafe=false}, false); forwardButton.addEventListener("touchstart", function (e) { keyEvent("w", "keydown"), Strafing(true), strafe = false }, false);
forwardButton.addEventListener("touchend", function(e){if (strafe===false) {hideStrafe()} keyEvent("w", "keyup")}, false); forwardButton.addEventListener("touchend", function (e) { if (strafe === false) { Strafing(false) } keyEvent("w", "keyup") }, false);
forwardButton.addEventListener("touchmove", function(e){e.preventDefault()}, false); forwardButton.addEventListener("touchmove", function (e) { e.preventDefault() }, false);
document.body.appendChild(forwardButton); document.body.appendChild(forwardButton);
var rightButton = document.createElement('button'); let rightButton = createTouchButton("rightButton", "inGame");
rightButton.id = "hideButton"
rightButton.style.cssText = "left:24vh;bottom:12vh;background:url(mobile/uiRight.png) no-repeat center;background-size: contain, cover;" rightButton.style.cssText = "left:24vh;bottom:12vh;background:url(mobile/uiRight.png) no-repeat center;background-size: contain, cover;"
rightButton.addEventListener("touchstart", function(e){keyEvent("d", "keydown")}, false); rightButton.addEventListener("touchstart", function (e) { keyEvent("d", "keydown") }, false);
rightButton.addEventListener("touchend", function(e){keyEvent("d", "keyup")}, false); rightButton.addEventListener("touchend", function (e) { keyEvent("d", "keyup") }, false);
rightButton.addEventListener("touchmove", function(e){e.preventDefault()}, false); rightButton.addEventListener("touchmove", function (e) { e.preventDefault() }, false);
document.body.appendChild(rightButton); document.body.appendChild(rightButton);
var leftButton = document.createElement('button'); let leftButton = createTouchButton("leftButton", "inGame");
leftButton.id = "hideButton"
leftButton.style.cssText = "left: 4vh; bottom:12vh;background:url(mobile/uiLeft.png) no-repeat center;background-size: contain, cover;" leftButton.style.cssText = "left: 4vh; bottom:12vh;background:url(mobile/uiLeft.png) no-repeat center;background-size: contain, cover;"
leftButton.addEventListener("touchstart", function(e){keyEvent("a", "keydown")}, false); leftButton.addEventListener("touchstart", function (e) { keyEvent("a", "keydown") }, false);
leftButton.addEventListener("touchend", function(e){keyEvent("a", "keyup")}, false); leftButton.addEventListener("touchend", function (e) { keyEvent("a", "keyup") }, false);
leftButton.addEventListener("touchmove", function(e){e.preventDefault()}, false); leftButton.addEventListener("touchmove", function (e) { e.preventDefault() }, false);
document.body.appendChild(leftButton); document.body.appendChild(leftButton);
var backButton = document.createElement('button'); let backButton = createTouchButton("backButton", "inGame");
backButton.id = "hideButton"
backButton.style.cssText = "left:14vh;bottom:2vh;background:url(mobile/uiDown.png) no-repeat center;background-size: contain, cover;" backButton.style.cssText = "left:14vh;bottom:2vh;background:url(mobile/uiDown.png) no-repeat center;background-size: contain, cover;"
backButton.addEventListener("touchstart", function(e){keyEvent("s", "keydown")}, false); backButton.addEventListener("touchstart", function (e) { keyEvent("s", "keydown") }, false);
backButton.addEventListener("touchend", function(e){keyEvent("s", "keyup")}, false); backButton.addEventListener("touchend", function (e) { keyEvent("s", "keyup") }, false);
backButton.addEventListener("touchmove", function(e){e.preventDefault()}, false); backButton.addEventListener("touchmove", function (e) { e.preventDefault() }, false);
document.body.appendChild(backButton); document.body.appendChild(backButton);
var jumpButton = document.createElement('button'); let jumpButton = createTouchButton("jumpButton", "inGame");
jumpButton.id = "hideButton"
jumpButton.style.cssText = "right:20vh;bottom:20vh;background:url(mobile/uiJump.png) no-repeat center;background-size: contain, cover;" jumpButton.style.cssText = "right:20vh;bottom:20vh;background:url(mobile/uiJump.png) no-repeat center;background-size: contain, cover;"
jumpButton.addEventListener("touchstart", function(e){keyEvent(" ", "keydown")}, false); jumpButton.addEventListener("touchstart", function (e) { keyEvent(" ", "keydown") }, false);
jumpButton.addEventListener("touchend", function(e){keyEvent(" ", "keyup")}, false); jumpButton.addEventListener("touchend", function (e) { keyEvent(" ", "keyup") }, false);
jumpButton.addEventListener("touchmove", function(e){e.preventDefault()}, false); jumpButton.addEventListener("touchmove", function (e) { e.preventDefault() }, false);
document.body.appendChild(jumpButton); document.body.appendChild(jumpButton);
var crouchButton = document.createElement('button'); let crouchButton = createTouchButton("crouchButton", "inGame");
crouchButton.id = "hideButton"
crouchButton.classList = "crouch"
crouchButton.style.cssText = "left:14vh;bottom:12vh;" crouchButton.style.cssText = "left:14vh;bottom:12vh;"
crouchButton.addEventListener("touchstart", function(e){shiftKey("keydown"), cshift=false}, false); crouchButton.addEventListener("touchstart", function (e) { shiftKeyEvent("keydown"), cshift = false }, false);
crouchButton.addEventListener("touchend", function(e){if (cshift===false) {shiftKey("keyup")}}, false); crouchButton.addEventListener("touchend", function (e) { if (cshift === false) { shiftKeyEvent("keyup") } }, false);
crouchButton.addEventListener("touchmove", function(e){e.preventDefault()}, false); crouchButton.addEventListener("touchmove", function (e) { e.preventDefault() }, false);
crouchButton.addEventListener("pointerdown", function(e){ctimer = setTimeout(function(e){shiftKey("keydown"), cshift=true}, 1000)}, false); crouchButton.addEventListener("pointerdown", function (e) { ctimer = setTimeout(function (e) { shiftKeyEvent("keydown"), cshift = true }, 1000) }, false);
crouchButton.addEventListener("pointerup", function(e){clearTimeout(ctimer)}, false); crouchButton.addEventListener("pointerup", function (e) { clearTimeout(ctimer) }, false);
document.body.appendChild(crouchButton); document.body.appendChild(crouchButton);
var inventoryButton = document.createElement('button'); let inventoryButton = createTouchButton("inventoryButton", "inGame");
inventoryButton.id = "hideInventory" inventoryButton.classList.add("mini")
inventoryButton.classList = "mini"
inventoryButton.style.cssText = "right:11.75vw;bottom:0vh;background:url(mobile/uiInventory.png) no-repeat center;background-size: contain, cover;" inventoryButton.style.cssText = "right:11.75vw;bottom:0vh;background:url(mobile/uiInventory.png) no-repeat center;background-size: contain, cover;"
inventoryButton.addEventListener("touchstart", function(e){ inventoryButton.addEventListener("touchstart", function (e) {
window.inInventory = (window.fakelock != null) window.inInventory = (window.fakelock != null)
keyEvent("e", "keydown"); keyEvent("e", "keydown");
}, false); }, false);
inventoryButton.addEventListener("touchend", function(e){keyEvent("e", "keyup")}, false); inventoryButton.addEventListener("touchend", function (e) { keyEvent("e", "keyup") }, false);
inventoryButton.addEventListener("touchmove", function(e){e.preventDefault()}, false); inventoryButton.addEventListener("touchmove", function (e) { e.preventDefault() }, false);
document.body.appendChild(inventoryButton); document.body.appendChild(inventoryButton);
var chatButton = document.createElement('button'); let chatButton = createTouchButton("chatButton", "inGame");
chatButton.id = "hideButton" chatButton.classList.add("mini")
chatButton.classList = "mini" chatButton.style.cssText = "left:44vw;top:0vh;background:url(mobile/uiChat.png) no-repeat center;background-size: contain, cover;"
chatButton.style.cssText = "left:44.5vw;top:0vh;background:url(mobile/uiChat.png) no-repeat center;background-size: contain, cover;" chatButton.addEventListener("touchstart", function (e) { keyEvent("t", "keydown") }, false);
chatButton.addEventListener("touchstart", function(e){keyEvent("t", "keydown")}, false); chatButton.addEventListener("touchmove", function (e) { e.preventDefault() }, false);
chatButton.addEventListener("touchmove", function(e){e.preventDefault()}, false);
document.body.appendChild(chatButton); document.body.appendChild(chatButton);
var angleButton = document.createElement('button'); let angleButton = createTouchButton("angleButton", "inGame");
angleButton.id = "hideButton" angleButton.classList.add("mini")
angleButton.classList = "mini" angleButton.style.cssText = "left:53vw;top:0vh;background:url(mobile/uiAngle.png) no-repeat center;background-size: contain, cover;"
angleButton.style.cssText = "left:50.5vw;top:0vh;background:url(mobile/uiAngle.png) no-repeat center;background-size: contain, cover;" angleButton.addEventListener("touchstart", function (e) { keyEvent("f", "keydown"), keyEvent("5", "keydown") }, false);
angleButton.addEventListener("touchstart", function(e){keyEvent("f", "keydown"), keyEvent("5", "keydown")}, false); angleButton.addEventListener("touchmove", function (e) { e.preventDefault() }, false);
angleButton.addEventListener("touchmove", function(e){e.preventDefault()}, false);
document.body.appendChild(angleButton); document.body.appendChild(angleButton);
var exitButton = document.createElement('button'); let exitButton = createTouchButton("exitButton", "inAll");
exitButton.id = "hideButton" exitButton.classList.add("mini")
exitButton.classList = "mini" exitButton.style.cssText = "left:47vw;top:0vh;background:url(mobile/uiPause.png) no-repeat center;background-size: contain, cover;"
exitButton.style.cssText = "left:47.5vw;top:0vh;background:url(mobile/uiPause.png) no-repeat center;background-size: contain, cover;" exitButton.addEventListener("touchstart", function (e) { keyEvent("À", "keydown") }, false);
exitButton.addEventListener("touchstart", function(e){keyEvent("À", "keydown")}, false); exitButton.addEventListener("touchend", function (e) { keyEvent("À", "keyup") }, false);
exitButton.addEventListener("touchend", function(e){keyEvent("À", "keyup")}, false); exitButton.addEventListener("touchmove", function (e) { e.preventDefault() }, false);
exitButton.addEventListener("touchmove", function(e){e.preventDefault()}, false);
document.body.appendChild(exitButton); document.body.appendChild(exitButton);
var sprintButton = document.createElement('button'); let hiddenInput = document.createElement('input');
sprintButton.id = "hideButton" hiddenInput.id = "hiddenInput"
sprintButton.style.cssText = "right:6vh;bottom:54vh;background:url(mobile/uiSprint.png) no-repeat center;background-size: contain, cover;" hiddenInput.style.cssText = "opacity:0;z-index:-99999";
sprintButton.addEventListener("touchstart", function(e){keyEvent("r", "keydown")}, false); document.body.appendChild(hiddenInput);
sprintButton.addEventListener("touchend", function(e){keyEvent("r", "keyup")}, false); let keyboardButton = createTouchButton("keyboardButton", "inAll");
sprintButton.addEventListener("touchmove", function(e){e.preventDefault()}, false); keyboardButton.id = "keyboardButton"
keyboardButton.classList.add("mini")
keyboardButton.style.cssText = "left:50vw;top:0vh;background:url(mobile/uiKeyboard.png) no-repeat center;background-size: contain, cover;"
keyboardButton.addEventListener("touchstart", function (e) { e.preventDefault(); hiddenInput.blur() }, false);
keyboardButton.addEventListener("touchend", function (e) { hiddenInput.select() }, false);
document.body.appendChild(keyboardButton);
let sprintButton = createTouchButton("sprintButton", "inGame");
sprintButton.style.cssText = "right:19vh;bottom:53vh;background:url(mobile/uiSprint.png) no-repeat center;background-size: contain, cover;"
sprintButton.addEventListener("touchstart", function (e) { keyEvent("r", "keydown") }, false);
sprintButton.addEventListener("touchend", function (e) { keyEvent("r", "keyup") }, false);
sprintButton.addEventListener("touchmove", function (e) { e.preventDefault() }, false);
document.body.appendChild(sprintButton); document.body.appendChild(sprintButton);
var placeButton = document.createElement('button'); let placeButton = createTouchButton("placeButton", "inGame");
placeButton.id = "hideButton" placeButton.style.cssText = "right:6vh;bottom:37vh;background:url(mobile/uiInteract.png) no-repeat center;background-size: contain, cover;"
placeButton.style.cssText = "right:6vh;bottom:38vh;background:url(mobile/uiInteract.png) no-repeat center;background-size: contain, cover;" placeButton.addEventListener("touchstart", function (e) { mouseEvent(2, "mousedown", canvas) }, false);
placeButton.addEventListener("touchstart", function(e){mouseEvent(2, "mousedown", canvas)}, false); placeButton.addEventListener("touchend", function (e) { mouseEvent(2, "mouseup", canvas) }, false);
placeButton.addEventListener("touchend", function(e){mouseEvent(2, "mouseup", canvas)}, false); placeButton.addEventListener("touchmove", function (e) { e.preventDefault() }, false);
placeButton.addEventListener("touchmove", function(e){e.preventDefault()}, false);
document.body.appendChild(placeButton); document.body.appendChild(placeButton);
var breakButton = document.createElement('button'); let breakButton = createTouchButton("breakButton", "inGame");
breakButton.id = "hideButton" breakButton.style.cssText = "right:19vh;bottom:41vh;background:url(mobile/uiAttack.png) no-repeat center;background-size: contain, cover;"
breakButton.style.cssText = "right:20vh;bottom:43vh;background:url(mobile/uiAttack.png) no-repeat center;background-size: contain, cover;" breakButton.addEventListener("touchstart", function (e) { mouseEvent(0, "mousedown", canvas) }, false);
breakButton.addEventListener("touchstart", function(e){mouseEvent(0, "mousedown", canvas)}, false); breakButton.addEventListener("touchend", function (e) { mouseEvent(0, "mouseup", canvas) }, false);
breakButton.addEventListener("touchend", function(e){mouseEvent(0, "mouseup", canvas)}, false); breakButton.addEventListener("touchmove", function (e) { e.preventDefault() }, false);
breakButton.addEventListener("touchmove", function(e){e.preventDefault()}, false);
document.body.appendChild(breakButton); document.body.appendChild(breakButton);
var scrollUpButton = document.createElement('button'); let selectButton = createTouchButton("selectButton", "inGame");
scrollUpButton.id = "hideButton" selectButton.style.cssText = "right:6vh;bottom:49vh;background:url(mobile/uiSelector.png) no-repeat center;background-size: contain, cover;"
scrollUpButton.classList = "mini" selectButton.addEventListener("touchstart", function (e) { mouseEvent(1, "mousedown", canvas) }, false);
selectButton.addEventListener("touchend", function (e) { mouseEvent(1, "mouseup", canvas) }, false);
selectButton.addEventListener("touchmove", function (e) { e.preventDefault() }, false);
document.body.appendChild(selectButton);
let scrollUpButton = createTouchButton("scrollUpButton", "inGame");
scrollUpButton.classList.add("mini")
scrollUpButton.style.cssText = "right:5.25vw;bottom:0vh;background:url(mobile/uiSRight.png) no-repeat center;background-size: contain, cover;" scrollUpButton.style.cssText = "right:5.25vw;bottom:0vh;background:url(mobile/uiSRight.png) no-repeat center;background-size: contain, cover;"
scrollUpButton.addEventListener("touchstart", function(e){ scrollUpButton.addEventListener("touchstart", function (e) {
canvas.dispatchEvent(new WheelEvent("wheel", {"wheelDeltaY": -10})) canvas.dispatchEvent(new WheelEvent("wheel", { "wheelDeltaY": -10 }))
}, false); }, false);
scrollUpButton.addEventListener("touchmove", function(e){e.preventDefault()}, false); scrollUpButton.addEventListener("touchmove", function (e) { e.preventDefault() }, false);
document.body.appendChild(scrollUpButton); document.body.appendChild(scrollUpButton);
var scrollDownButton = document.createElement('button'); let scrollDownButton = createTouchButton("scrollDownButton", "inGame");
scrollDownButton.id = "hideButton" scrollDownButton.classList.add("mini")
scrollDownButton.classList = "mini"
scrollDownButton.style.cssText = "right:15vw;bottom:0vh;background:url(mobile/uiSLeft.png) no-repeat center;background-size: contain, cover;" scrollDownButton.style.cssText = "right:15vw;bottom:0vh;background:url(mobile/uiSLeft.png) no-repeat center;background-size: contain, cover;"
scrollDownButton.addEventListener("touchstart", function(e){ scrollDownButton.addEventListener("touchstart", function (e) {
canvas.dispatchEvent(new WheelEvent("wheel", {"wheelDeltaY": 10})) canvas.dispatchEvent(new WheelEvent("wheel", { "wheelDeltaY": 10 }))
}, false); }, false);
scrollDownButton.addEventListener("touchmove", function(e){e.preventDefault()}, false); scrollDownButton.addEventListener("touchmove", function (e) { e.preventDefault() }, false);
document.body.appendChild(scrollDownButton); document.body.appendChild(scrollDownButton);
var throwButton = document.createElement('button'); let throwButton = createTouchButton("throwButton", "inGame");
throwButton.id = "hideButton" throwButton.classList.add("mini")
throwButton.classList = "mini"
throwButton.style.cssText = "right:8.5vw;bottom:0vh;background:url(mobile/uiDrop.png) no-repeat center;background-size: contain, cover;" throwButton.style.cssText = "right:8.5vw;bottom:0vh;background:url(mobile/uiDrop.png) no-repeat center;background-size: contain, cover;"
throwButton.addEventListener("touchstart", function(e){ throwButton.addEventListener("touchstart", function (e) {
window.inInventory = (window.fakelock != null) window.inInventory = (window.fakelock != null)
keyEvent("q", "keydown"); keyEvent("q", "keydown");
}, false); }, false);
throwButton.addEventListener("touchend", function(e){keyEvent("q", "keyup")}, false); throwButton.addEventListener("touchend", function (e) { keyEvent("q", "keyup") }, false);
throwButton.addEventListener("touchmove", function(e){e.preventDefault()}, false); throwButton.addEventListener("touchmove", function (e) { e.preventDefault() }, false);
document.body.appendChild(throwButton); document.body.appendChild(throwButton);
} }

BIN
source/mobile/uiKeyboard.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 573 B

BIN
source/mobile/uiSelector.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 522 B