mirror of
https://github.com/irv77/eaglercraft-mobile.git
synced 2024-11-09 07:46:05 -08:00
Version 1.2
This commit is contained in:
parent
df1c937695
commit
4951f3cdfc
|
@ -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>
|
||||||
|
|
|
@ -1,106 +1,120 @@
|
||||||
// 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)
|
||||||
window.dispatchEvent(new KeyboardEvent(state, {
|
window.dispatchEvent(new KeyboardEvent(state, {
|
||||||
key: name,
|
key: name,
|
||||||
keyCode: keyName,
|
keyCode: keyName,
|
||||||
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');
|
return true
|
||||||
var hideInventoryStyleDOM = document.getElementById('hideInventoryStyle');
|
|
||||||
hideButtonStyleDOM.disabled = false;
|
|
||||||
hideInventoryStyleDOM.disabled = window.inInventory;
|
|
||||||
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
|
||||||
}
|
}
|
||||||
|
|
||||||
// FILE UPLOADING
|
// FILE UPLOADING
|
||||||
// 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,244 +169,248 @@ 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;
|
display: none;
|
||||||
}
|
|
||||||
.minicontrol {
|
|
||||||
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;
|
display: none;
|
||||||
}
|
|
||||||
.inventory {
|
|
||||||
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) {
|
||||||
return new Promise(resolve => {
|
return new Promise(resolve => {
|
||||||
if (document.querySelector(selector)) {
|
if (document.querySelector(selector)) {
|
||||||
return resolve(document.querySelector(selector));
|
return resolve(document.querySelector(selector));
|
||||||
}
|
}
|
||||||
const observer = new MutationObserver(mutations => {
|
const observer = new MutationObserver(mutations => {
|
||||||
if (document.querySelector(selector)) {
|
if (document.querySelector(selector)) {
|
||||||
observer.disconnect();
|
observer.disconnect();
|
||||||
resolve(document.querySelector(selector));
|
resolve(document.querySelector(selector));
|
||||||
}
|
}
|
||||||
});
|
|
||||||
observer.observe(document.documentElement, {
|
|
||||||
childList: true,
|
|
||||||
subtree: true
|
|
||||||
});
|
|
||||||
});
|
});
|
||||||
|
observer.observe(document.documentElement, {
|
||||||
|
childList: true,
|
||||||
|
subtree: true
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
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,
|
canvas.dispatchEvent(evt);
|
||||||
movementY: e.movementY * 2
|
previousTouchX = touch.pageX;
|
||||||
});
|
previousTouchY = touch.pageY;
|
||||||
canvas.dispatchEvent(evt);
|
event.preventDefault();
|
||||||
previousX = touch.pageX;
|
}, false);
|
||||||
previousY = touch.pageY;
|
|
||||||
event.preventDefault();
|
|
||||||
}, false);
|
|
||||||
|
|
||||||
canvas.addEventListener("touchend", (e) => {
|
canvas.addEventListener("touchend", (e) => {
|
||||||
previousX = null;
|
previousTouchX = null;
|
||||||
previousY = null;
|
previousTouchY = null;
|
||||||
}, false)
|
}, false)
|
||||||
// Adds all of the touch screen controls
|
//Updates button visibility on load
|
||||||
// Theres probably a better way to do this but this works for now
|
setButtonVisibility(window.fakelock != null);
|
||||||
|
// Adds all of the touch screen controls
|
||||||
|
// 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"), Strafing(true), strafe = false }, false);
|
||||||
forwardButton.addEventListener("touchstart", function(e){keyEvent("w", "keydown"), showStrafe(), strafe=false}, false);
|
forwardButton.addEventListener("touchend", function (e) { if (strafe === false) { Strafing(false) } keyEvent("w", "keyup") }, false);
|
||||||
forwardButton.addEventListener("touchend", function(e){if (strafe===false) {hideStrafe()} 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.style.cssText = "left:14vh;bottom:12vh;"
|
||||||
crouchButton.classList = "crouch"
|
crouchButton.addEventListener("touchstart", function (e) { shiftKeyEvent("keydown"), cshift = false }, false);
|
||||||
crouchButton.style.cssText = "left:14vh;bottom:12vh;"
|
crouchButton.addEventListener("touchend", function (e) { if (cshift === false) { shiftKeyEvent("keyup") } }, false);
|
||||||
crouchButton.addEventListener("touchstart", function(e){shiftKey("keydown"), cshift=false}, false);
|
crouchButton.addEventListener("touchmove", function (e) { e.preventDefault() }, false);
|
||||||
crouchButton.addEventListener("touchend", function(e){if (cshift===false) {shiftKey("keyup")}}, false);
|
crouchButton.addEventListener("pointerdown", function (e) { ctimer = setTimeout(function (e) { shiftKeyEvent("keydown"), cshift = true }, 1000) }, false);
|
||||||
crouchButton.addEventListener("touchmove", function(e){e.preventDefault()}, false);
|
crouchButton.addEventListener("pointerup", function (e) { clearTimeout(ctimer) }, false);
|
||||||
crouchButton.addEventListener("pointerdown", function(e){ctimer = setTimeout(function(e){shiftKey("keydown"), cshift=true}, 1000)}, false);
|
document.body.appendChild(crouchButton);
|
||||||
crouchButton.addEventListener("pointerup", function(e){clearTimeout(ctimer)}, false);
|
|
||||||
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"
|
||||||
document.body.appendChild(sprintButton);
|
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);
|
||||||
|
|
||||||
var placeButton = document.createElement('button');
|
let sprintButton = createTouchButton("sprintButton", "inGame");
|
||||||
placeButton.id = "hideButton"
|
sprintButton.style.cssText = "right:19vh;bottom:53vh;background:url(mobile/uiSprint.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;"
|
sprintButton.addEventListener("touchstart", function (e) { keyEvent("r", "keydown") }, false);
|
||||||
placeButton.addEventListener("touchstart", function(e){mouseEvent(2, "mousedown", canvas)}, false);
|
sprintButton.addEventListener("touchend", function (e) { keyEvent("r", "keyup") }, false);
|
||||||
placeButton.addEventListener("touchend", function(e){mouseEvent(2, "mouseup", canvas)}, false);
|
sprintButton.addEventListener("touchmove", function (e) { e.preventDefault() }, false);
|
||||||
placeButton.addEventListener("touchmove", function(e){e.preventDefault()}, false);
|
document.body.appendChild(sprintButton);
|
||||||
document.body.appendChild(placeButton);
|
|
||||||
|
|
||||||
var breakButton = document.createElement('button');
|
let placeButton = createTouchButton("placeButton", "inGame");
|
||||||
breakButton.id = "hideButton"
|
placeButton.style.cssText = "right:6vh;bottom:37vh;background:url(mobile/uiInteract.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;"
|
placeButton.addEventListener("touchstart", function (e) { mouseEvent(2, "mousedown", canvas) }, false);
|
||||||
breakButton.addEventListener("touchstart", function(e){mouseEvent(0, "mousedown", canvas)}, false);
|
placeButton.addEventListener("touchend", function (e) { mouseEvent(2, "mouseup", canvas) }, false);
|
||||||
breakButton.addEventListener("touchend", function(e){mouseEvent(0, "mouseup", canvas)}, false);
|
placeButton.addEventListener("touchmove", function (e) { e.preventDefault() }, false);
|
||||||
breakButton.addEventListener("touchmove", function(e){e.preventDefault()}, false);
|
document.body.appendChild(placeButton);
|
||||||
document.body.appendChild(breakButton);
|
|
||||||
|
|
||||||
var scrollUpButton = document.createElement('button');
|
let breakButton = createTouchButton("breakButton", "inGame");
|
||||||
scrollUpButton.id = "hideButton"
|
breakButton.style.cssText = "right:19vh;bottom:41vh;background:url(mobile/uiAttack.png) no-repeat center;background-size: contain, cover;"
|
||||||
scrollUpButton.classList = "mini"
|
breakButton.addEventListener("touchstart", function (e) { mouseEvent(0, "mousedown", canvas) }, false);
|
||||||
scrollUpButton.style.cssText = "right:5.25vw;bottom:0vh;background:url(mobile/uiSRight.png) no-repeat center;background-size: contain, cover;"
|
breakButton.addEventListener("touchend", function (e) { mouseEvent(0, "mouseup", canvas) }, false);
|
||||||
scrollUpButton.addEventListener("touchstart", function(e){
|
breakButton.addEventListener("touchmove", function (e) { e.preventDefault() }, false);
|
||||||
canvas.dispatchEvent(new WheelEvent("wheel", {"wheelDeltaY": -10}))
|
document.body.appendChild(breakButton);
|
||||||
}, false);
|
|
||||||
scrollUpButton.addEventListener("touchmove", function(e){e.preventDefault()}, false);
|
|
||||||
document.body.appendChild(scrollUpButton);
|
|
||||||
|
|
||||||
var scrollDownButton = document.createElement('button');
|
let selectButton = createTouchButton("selectButton", "inGame");
|
||||||
scrollDownButton.id = "hideButton"
|
selectButton.style.cssText = "right:6vh;bottom:49vh;background:url(mobile/uiSelector.png) no-repeat center;background-size: contain, cover;"
|
||||||
scrollDownButton.classList = "mini"
|
selectButton.addEventListener("touchstart", function (e) { mouseEvent(1, "mousedown", canvas) }, false);
|
||||||
scrollDownButton.style.cssText = "right:15vw;bottom:0vh;background:url(mobile/uiSLeft.png) no-repeat center;background-size: contain, cover;"
|
selectButton.addEventListener("touchend", function (e) { mouseEvent(1, "mouseup", canvas) }, false);
|
||||||
scrollDownButton.addEventListener("touchstart", function(e){
|
selectButton.addEventListener("touchmove", function (e) { e.preventDefault() }, false);
|
||||||
canvas.dispatchEvent(new WheelEvent("wheel", {"wheelDeltaY": 10}))
|
document.body.appendChild(selectButton);
|
||||||
}, false);
|
|
||||||
scrollDownButton.addEventListener("touchmove", function(e){e.preventDefault()}, false);
|
|
||||||
document.body.appendChild(scrollDownButton);
|
|
||||||
|
|
||||||
var throwButton = document.createElement('button');
|
let scrollUpButton = createTouchButton("scrollUpButton", "inGame");
|
||||||
throwButton.id = "hideButton"
|
scrollUpButton.classList.add("mini")
|
||||||
throwButton.classList = "mini"
|
scrollUpButton.style.cssText = "right:5.25vw;bottom:0vh;background:url(mobile/uiSRight.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;"
|
scrollUpButton.addEventListener("touchstart", function (e) {
|
||||||
throwButton.addEventListener("touchstart", function(e){
|
canvas.dispatchEvent(new WheelEvent("wheel", { "wheelDeltaY": -10 }))
|
||||||
window.inInventory = (window.fakelock != null)
|
}, false);
|
||||||
keyEvent("q", "keydown");
|
scrollUpButton.addEventListener("touchmove", function (e) { e.preventDefault() }, false);
|
||||||
}, false);
|
document.body.appendChild(scrollUpButton);
|
||||||
throwButton.addEventListener("touchend", function(e){keyEvent("q", "keyup")}, false);
|
|
||||||
throwButton.addEventListener("touchmove", function(e){e.preventDefault()}, false);
|
let scrollDownButton = createTouchButton("scrollDownButton", "inGame");
|
||||||
document.body.appendChild(throwButton);
|
scrollDownButton.classList.add("mini")
|
||||||
|
scrollDownButton.style.cssText = "right:15vw;bottom:0vh;background:url(mobile/uiSLeft.png) no-repeat center;background-size: contain, cover;"
|
||||||
|
scrollDownButton.addEventListener("touchstart", function (e) {
|
||||||
|
canvas.dispatchEvent(new WheelEvent("wheel", { "wheelDeltaY": 10 }))
|
||||||
|
}, false);
|
||||||
|
scrollDownButton.addEventListener("touchmove", function (e) { e.preventDefault() }, false);
|
||||||
|
document.body.appendChild(scrollDownButton);
|
||||||
|
|
||||||
|
let throwButton = createTouchButton("throwButton", "inGame");
|
||||||
|
throwButton.classList.add("mini")
|
||||||
|
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) {
|
||||||
|
window.inInventory = (window.fakelock != null)
|
||||||
|
keyEvent("q", "keydown");
|
||||||
|
}, false);
|
||||||
|
throwButton.addEventListener("touchend", function (e) { keyEvent("q", "keyup") }, false);
|
||||||
|
throwButton.addEventListener("touchmove", function (e) { e.preventDefault() }, false);
|
||||||
|
document.body.appendChild(throwButton);
|
||||||
}
|
}
|
BIN
demo/mobile/uiKeyboard.png
Normal file
BIN
demo/mobile/uiKeyboard.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 573 B |
BIN
demo/mobile/uiSelector.png
Normal file
BIN
demo/mobile/uiSelector.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 522 B |
|
@ -1,106 +1,120 @@
|
||||||
// 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)
|
||||||
window.dispatchEvent(new KeyboardEvent(state, {
|
window.dispatchEvent(new KeyboardEvent(state, {
|
||||||
key: name,
|
key: name,
|
||||||
keyCode: keyName,
|
keyCode: keyName,
|
||||||
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');
|
return true
|
||||||
var hideInventoryStyleDOM = document.getElementById('hideInventoryStyle');
|
|
||||||
hideButtonStyleDOM.disabled = false;
|
|
||||||
hideInventoryStyleDOM.disabled = window.inInventory;
|
|
||||||
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
|
||||||
}
|
}
|
||||||
|
|
||||||
// FILE UPLOADING
|
// FILE UPLOADING
|
||||||
// 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,244 +169,248 @@ 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;
|
display: none;
|
||||||
}
|
|
||||||
.minicontrol {
|
|
||||||
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;
|
display: none;
|
||||||
}
|
|
||||||
.inventory {
|
|
||||||
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) {
|
||||||
return new Promise(resolve => {
|
return new Promise(resolve => {
|
||||||
if (document.querySelector(selector)) {
|
if (document.querySelector(selector)) {
|
||||||
return resolve(document.querySelector(selector));
|
return resolve(document.querySelector(selector));
|
||||||
}
|
}
|
||||||
const observer = new MutationObserver(mutations => {
|
const observer = new MutationObserver(mutations => {
|
||||||
if (document.querySelector(selector)) {
|
if (document.querySelector(selector)) {
|
||||||
observer.disconnect();
|
observer.disconnect();
|
||||||
resolve(document.querySelector(selector));
|
resolve(document.querySelector(selector));
|
||||||
}
|
}
|
||||||
});
|
|
||||||
observer.observe(document.documentElement, {
|
|
||||||
childList: true,
|
|
||||||
subtree: true
|
|
||||||
});
|
|
||||||
});
|
});
|
||||||
|
observer.observe(document.documentElement, {
|
||||||
|
childList: true,
|
||||||
|
subtree: true
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
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,
|
canvas.dispatchEvent(evt);
|
||||||
movementY: e.movementY * 2
|
previousTouchX = touch.pageX;
|
||||||
});
|
previousTouchY = touch.pageY;
|
||||||
canvas.dispatchEvent(evt);
|
event.preventDefault();
|
||||||
previousX = touch.pageX;
|
}, false);
|
||||||
previousY = touch.pageY;
|
|
||||||
event.preventDefault();
|
|
||||||
}, false);
|
|
||||||
|
|
||||||
canvas.addEventListener("touchend", (e) => {
|
canvas.addEventListener("touchend", (e) => {
|
||||||
previousX = null;
|
previousTouchX = null;
|
||||||
previousY = null;
|
previousTouchY = null;
|
||||||
}, false)
|
}, false)
|
||||||
// Adds all of the touch screen controls
|
//Updates button visibility on load
|
||||||
// Theres probably a better way to do this but this works for now
|
setButtonVisibility(window.fakelock != null);
|
||||||
|
// Adds all of the touch screen controls
|
||||||
|
// 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"), Strafing(true), strafe = false }, false);
|
||||||
forwardButton.addEventListener("touchstart", function(e){keyEvent("w", "keydown"), showStrafe(), strafe=false}, false);
|
forwardButton.addEventListener("touchend", function (e) { if (strafe === false) { Strafing(false) } keyEvent("w", "keyup") }, false);
|
||||||
forwardButton.addEventListener("touchend", function(e){if (strafe===false) {hideStrafe()} 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.style.cssText = "left:14vh;bottom:12vh;"
|
||||||
crouchButton.classList = "crouch"
|
crouchButton.addEventListener("touchstart", function (e) { shiftKeyEvent("keydown"), cshift = false }, false);
|
||||||
crouchButton.style.cssText = "left:14vh;bottom:12vh;"
|
crouchButton.addEventListener("touchend", function (e) { if (cshift === false) { shiftKeyEvent("keyup") } }, false);
|
||||||
crouchButton.addEventListener("touchstart", function(e){shiftKey("keydown"), cshift=false}, false);
|
crouchButton.addEventListener("touchmove", function (e) { e.preventDefault() }, false);
|
||||||
crouchButton.addEventListener("touchend", function(e){if (cshift===false) {shiftKey("keyup")}}, false);
|
crouchButton.addEventListener("pointerdown", function (e) { ctimer = setTimeout(function (e) { shiftKeyEvent("keydown"), cshift = true }, 1000) }, false);
|
||||||
crouchButton.addEventListener("touchmove", function(e){e.preventDefault()}, false);
|
crouchButton.addEventListener("pointerup", function (e) { clearTimeout(ctimer) }, false);
|
||||||
crouchButton.addEventListener("pointerdown", function(e){ctimer = setTimeout(function(e){shiftKey("keydown"), cshift=true}, 1000)}, false);
|
document.body.appendChild(crouchButton);
|
||||||
crouchButton.addEventListener("pointerup", function(e){clearTimeout(ctimer)}, false);
|
|
||||||
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"
|
||||||
document.body.appendChild(sprintButton);
|
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);
|
||||||
|
|
||||||
var placeButton = document.createElement('button');
|
let sprintButton = createTouchButton("sprintButton", "inGame");
|
||||||
placeButton.id = "hideButton"
|
sprintButton.style.cssText = "right:19vh;bottom:53vh;background:url(mobile/uiSprint.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;"
|
sprintButton.addEventListener("touchstart", function (e) { keyEvent("r", "keydown") }, false);
|
||||||
placeButton.addEventListener("touchstart", function(e){mouseEvent(2, "mousedown", canvas)}, false);
|
sprintButton.addEventListener("touchend", function (e) { keyEvent("r", "keyup") }, false);
|
||||||
placeButton.addEventListener("touchend", function(e){mouseEvent(2, "mouseup", canvas)}, false);
|
sprintButton.addEventListener("touchmove", function (e) { e.preventDefault() }, false);
|
||||||
placeButton.addEventListener("touchmove", function(e){e.preventDefault()}, false);
|
document.body.appendChild(sprintButton);
|
||||||
document.body.appendChild(placeButton);
|
|
||||||
|
|
||||||
var breakButton = document.createElement('button');
|
let placeButton = createTouchButton("placeButton", "inGame");
|
||||||
breakButton.id = "hideButton"
|
placeButton.style.cssText = "right:6vh;bottom:37vh;background:url(mobile/uiInteract.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;"
|
placeButton.addEventListener("touchstart", function (e) { mouseEvent(2, "mousedown", canvas) }, false);
|
||||||
breakButton.addEventListener("touchstart", function(e){mouseEvent(0, "mousedown", canvas)}, false);
|
placeButton.addEventListener("touchend", function (e) { mouseEvent(2, "mouseup", canvas) }, false);
|
||||||
breakButton.addEventListener("touchend", function(e){mouseEvent(0, "mouseup", canvas)}, false);
|
placeButton.addEventListener("touchmove", function (e) { e.preventDefault() }, false);
|
||||||
breakButton.addEventListener("touchmove", function(e){e.preventDefault()}, false);
|
document.body.appendChild(placeButton);
|
||||||
document.body.appendChild(breakButton);
|
|
||||||
|
|
||||||
var scrollUpButton = document.createElement('button');
|
let breakButton = createTouchButton("breakButton", "inGame");
|
||||||
scrollUpButton.id = "hideButton"
|
breakButton.style.cssText = "right:19vh;bottom:41vh;background:url(mobile/uiAttack.png) no-repeat center;background-size: contain, cover;"
|
||||||
scrollUpButton.classList = "mini"
|
breakButton.addEventListener("touchstart", function (e) { mouseEvent(0, "mousedown", canvas) }, false);
|
||||||
scrollUpButton.style.cssText = "right:5.25vw;bottom:0vh;background:url(mobile/uiSRight.png) no-repeat center;background-size: contain, cover;"
|
breakButton.addEventListener("touchend", function (e) { mouseEvent(0, "mouseup", canvas) }, false);
|
||||||
scrollUpButton.addEventListener("touchstart", function(e){
|
breakButton.addEventListener("touchmove", function (e) { e.preventDefault() }, false);
|
||||||
canvas.dispatchEvent(new WheelEvent("wheel", {"wheelDeltaY": -10}))
|
document.body.appendChild(breakButton);
|
||||||
}, false);
|
|
||||||
scrollUpButton.addEventListener("touchmove", function(e){e.preventDefault()}, false);
|
|
||||||
document.body.appendChild(scrollUpButton);
|
|
||||||
|
|
||||||
var scrollDownButton = document.createElement('button');
|
let selectButton = createTouchButton("selectButton", "inGame");
|
||||||
scrollDownButton.id = "hideButton"
|
selectButton.style.cssText = "right:6vh;bottom:49vh;background:url(mobile/uiSelector.png) no-repeat center;background-size: contain, cover;"
|
||||||
scrollDownButton.classList = "mini"
|
selectButton.addEventListener("touchstart", function (e) { mouseEvent(1, "mousedown", canvas) }, false);
|
||||||
scrollDownButton.style.cssText = "right:15vw;bottom:0vh;background:url(mobile/uiSLeft.png) no-repeat center;background-size: contain, cover;"
|
selectButton.addEventListener("touchend", function (e) { mouseEvent(1, "mouseup", canvas) }, false);
|
||||||
scrollDownButton.addEventListener("touchstart", function(e){
|
selectButton.addEventListener("touchmove", function (e) { e.preventDefault() }, false);
|
||||||
canvas.dispatchEvent(new WheelEvent("wheel", {"wheelDeltaY": 10}))
|
document.body.appendChild(selectButton);
|
||||||
}, false);
|
|
||||||
scrollDownButton.addEventListener("touchmove", function(e){e.preventDefault()}, false);
|
|
||||||
document.body.appendChild(scrollDownButton);
|
|
||||||
|
|
||||||
var throwButton = document.createElement('button');
|
let scrollUpButton = createTouchButton("scrollUpButton", "inGame");
|
||||||
throwButton.id = "hideButton"
|
scrollUpButton.classList.add("mini")
|
||||||
throwButton.classList = "mini"
|
scrollUpButton.style.cssText = "right:5.25vw;bottom:0vh;background:url(mobile/uiSRight.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;"
|
scrollUpButton.addEventListener("touchstart", function (e) {
|
||||||
throwButton.addEventListener("touchstart", function(e){
|
canvas.dispatchEvent(new WheelEvent("wheel", { "wheelDeltaY": -10 }))
|
||||||
window.inInventory = (window.fakelock != null)
|
}, false);
|
||||||
keyEvent("q", "keydown");
|
scrollUpButton.addEventListener("touchmove", function (e) { e.preventDefault() }, false);
|
||||||
}, false);
|
document.body.appendChild(scrollUpButton);
|
||||||
throwButton.addEventListener("touchend", function(e){keyEvent("q", "keyup")}, false);
|
|
||||||
throwButton.addEventListener("touchmove", function(e){e.preventDefault()}, false);
|
let scrollDownButton = createTouchButton("scrollDownButton", "inGame");
|
||||||
document.body.appendChild(throwButton);
|
scrollDownButton.classList.add("mini")
|
||||||
|
scrollDownButton.style.cssText = "right:15vw;bottom:0vh;background:url(mobile/uiSLeft.png) no-repeat center;background-size: contain, cover;"
|
||||||
|
scrollDownButton.addEventListener("touchstart", function (e) {
|
||||||
|
canvas.dispatchEvent(new WheelEvent("wheel", { "wheelDeltaY": 10 }))
|
||||||
|
}, false);
|
||||||
|
scrollDownButton.addEventListener("touchmove", function (e) { e.preventDefault() }, false);
|
||||||
|
document.body.appendChild(scrollDownButton);
|
||||||
|
|
||||||
|
let throwButton = createTouchButton("throwButton", "inGame");
|
||||||
|
throwButton.classList.add("mini")
|
||||||
|
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) {
|
||||||
|
window.inInventory = (window.fakelock != null)
|
||||||
|
keyEvent("q", "keydown");
|
||||||
|
}, false);
|
||||||
|
throwButton.addEventListener("touchend", function (e) { keyEvent("q", "keyup") }, false);
|
||||||
|
throwButton.addEventListener("touchmove", function (e) { e.preventDefault() }, false);
|
||||||
|
document.body.appendChild(throwButton);
|
||||||
}
|
}
|
BIN
source/mobile/uiKeyboard.png
Normal file
BIN
source/mobile/uiKeyboard.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 573 B |
BIN
source/mobile/uiSelector.png
Normal file
BIN
source/mobile/uiSelector.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 522 B |
Loading…
Reference in New Issue
Block a user