Version 1.2

README.md

@@ -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>
  Currently **STILL IN BETA** testing/making so expect some bugs!
 
@@ -34,10 +34,10 @@
 - [x] Re-orginize button layout (With new icons)
 - [ ] Redo the display button functions
 - [x] Pocket Edition UI
-- [x] Toggle perspective
+- [x] Updated code from main
 - [x] Bug fixes from original
 - [ ] Config file for features
-- [ ] Organized Code
+- [x] Organized Code
 </details>
 
 <hr>

demo/mobile/mobile.js

@@ -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
-var previousX = null;
+var previousTouchX = null;
-var previousY = null;
+var previousTouchY = null;
 // Key and mouse events
 function keyEvent(name, state) {
   const keyName = name.toUpperCase().charCodeAt(0)
@@ -12,7 +20,7 @@ function keyEvent(name, state) {
     which: keyName
   }));
 }
-function shiftKey(state) {
+function shiftKeyEvent(state) {
   window.dispatchEvent(new KeyboardEvent(state, {
     keyCode: 16,
     which: 16
@@ -21,6 +29,18 @@ function shiftKey(state) {
 function mouseEvent(number, state, canvas) {
   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
 // When requestpointerlock is called, this dispatches an event, saves the requested element to window.fakelock, and unhides the touch controls
 window.fakelock = null;
@@ -29,29 +49,22 @@ Element.prototype.requestPointerLock = function() {
   window.fakelock = this
   document.dispatchEvent(new Event('pointerlockchange'));
   console.log("requested pointerlock")
-  var hideButtonStyleDOM = document.getElementById('hideButtonStyle');
+  setButtonVisibility(true);
-  var hideInventoryStyleDOM = document.getElementById('hideInventoryStyle');
-  hideButtonStyleDOM.disabled = true;
-  hideInventoryStyleDOM.disabled = true;
   return true
 }
 
-
 // Makes pointerLockElement return window.fakelock
 Object.defineProperty(document, "pointerLockElement", {
   get: function () {
     return window.fakelock;
   }
 });
+
 // When exitPointerLock is called, this dispatches an event, clears the
 document.exitPointerLock = function () {
   window.fakelock = null
   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
 }
 
@@ -97,10 +110,11 @@ document.createElement = function(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 :(
 let customStyle = document.createElement("style");
 customStyle.textContent = `
-    button {
+    .mobileControl {
         position: absolute; 
         width: 9vh;
         height: 9vh;
@@ -123,7 +137,7 @@ customStyle.textContent = `
         opacity: .5;
         font-weight: 900;
     }
-    button:active {
+    .mobileControl:active {
       opacity: .75;
     }
     .minicontrol {
@@ -139,11 +153,11 @@ customStyle.textContent = `
       height: 6vh;
       margin: 1vh 0vh;
     }
-    .crouch {
+    .crouchButton {
       background:url(mobile/uiCrouch.png) no-repeat center;
       background-size: contain, cover;
     }
-    .crouch:active {
+    .crouchButton:active {
       background:url(mobile/uiCrouchSel.png) no-repeat center;
       background-size: contain, cover;
     }
@@ -155,27 +169,21 @@ customStyle.textContent = `
 document.documentElement.appendChild(customStyle);
 
 // 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;
     }`;
-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;
     }`;
-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
 function waitForElm(selector) {
@@ -195,117 +203,117 @@ 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() });
 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');
   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
 
-        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);
-        previousX = touch.pageX;
+    previousTouchX = touch.pageX;
-        previousY = touch.pageY;
+    previousTouchY = touch.pageY;
     event.preventDefault();
   }, false);
 
   canvas.addEventListener("touchend", (e) => {
-        previousX = null;
+    previousTouchX = null;
-        previousY = null; 
+    previousTouchY = null;
   }, false)
+  //Updates button visibility on load
+  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")
       forwardRightButton.classList.add("show")
     }
-
+    else if (displayStrafe === false) {
-    function hideStrafe() {
       forwardLeftButton.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.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);
   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.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);
   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.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);
   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.addEventListener("touchstart", function (e) { keyEvent("d", "keydown") }, false);
   rightButton.addEventListener("touchend", function (e) { keyEvent("d", "keyup") }, false);
   rightButton.addEventListener("touchmove", function (e) { e.preventDefault() }, false);
   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.addEventListener("touchstart", function (e) { keyEvent("a", "keydown") }, false);
   leftButton.addEventListener("touchend", function (e) { keyEvent("a", "keyup") }, false);
   leftButton.addEventListener("touchmove", function (e) { e.preventDefault() }, false);
   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.addEventListener("touchstart", function (e) { keyEvent("s", "keydown") }, false);
   backButton.addEventListener("touchend", function (e) { keyEvent("s", "keyup") }, false);
   backButton.addEventListener("touchmove", function (e) { e.preventDefault() }, false);
   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.addEventListener("touchstart", function (e) { keyEvent(" ", "keydown") }, false);
   jumpButton.addEventListener("touchend", function (e) { keyEvent(" ", "keyup") }, false);
   jumpButton.addEventListener("touchmove", function (e) { e.preventDefault() }, false);
   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.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("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);
   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.addEventListener("touchstart", function (e) {
     window.inInventory = (window.fakelock != null)
@@ -315,58 +323,70 @@ function insertCanvasElements() {
   inventoryButton.addEventListener("touchmove", function (e) { e.preventDefault() }, false);
   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("touchmove", function (e) { e.preventDefault() }, false);
   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("touchmove", function (e) { e.preventDefault() }, false);
   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("touchend", function (e) { keyEvent("À", "keyup") }, false);
   exitButton.addEventListener("touchmove", function (e) { e.preventDefault() }, false);
   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";
+  document.body.appendChild(hiddenInput);
+  let keyboardButton = createTouchButton("keyboardButton", "inAll");
+  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);
 
-	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("touchend", function (e) { mouseEvent(2, "mouseup", canvas) }, false);
   placeButton.addEventListener("touchmove", function (e) { e.preventDefault() }, false);
   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("touchend", function (e) { mouseEvent(0, "mouseup", canvas) }, false);
   breakButton.addEventListener("touchmove", function (e) { e.preventDefault() }, false);
   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.addEventListener("touchstart", function (e) {
     canvas.dispatchEvent(new WheelEvent("wheel", { "wheelDeltaY": -10 }))
@@ -374,9 +394,8 @@ function insertCanvasElements() {
   scrollUpButton.addEventListener("touchmove", function (e) { e.preventDefault() }, false);
   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.addEventListener("touchstart", function (e) {
     canvas.dispatchEvent(new WheelEvent("wheel", { "wheelDeltaY": 10 }))
@@ -384,9 +403,8 @@ function insertCanvasElements() {
   scrollDownButton.addEventListener("touchmove", function (e) { e.preventDefault() }, false);
   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.addEventListener("touchstart", function (e) {
     window.inInventory = (window.fakelock != null)

source/mobile/mobile.js

@@ -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
-var previousX = null;
+var previousTouchX = null;
-var previousY = null;
+var previousTouchY = null;
 // Key and mouse events
 function keyEvent(name, state) {
   const keyName = name.toUpperCase().charCodeAt(0)
@@ -12,7 +20,7 @@ function keyEvent(name, state) {
     which: keyName
   }));
 }
-function shiftKey(state) {
+function shiftKeyEvent(state) {
   window.dispatchEvent(new KeyboardEvent(state, {
     keyCode: 16,
     which: 16
@@ -21,6 +29,18 @@ function shiftKey(state) {
 function mouseEvent(number, state, canvas) {
   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
 // When requestpointerlock is called, this dispatches an event, saves the requested element to window.fakelock, and unhides the touch controls
 window.fakelock = null;
@@ -29,29 +49,22 @@ Element.prototype.requestPointerLock = function() {
   window.fakelock = this
   document.dispatchEvent(new Event('pointerlockchange'));
   console.log("requested pointerlock")
-  var hideButtonStyleDOM = document.getElementById('hideButtonStyle');
+  setButtonVisibility(true);
-  var hideInventoryStyleDOM = document.getElementById('hideInventoryStyle');
-  hideButtonStyleDOM.disabled = true;
-  hideInventoryStyleDOM.disabled = true;
   return true
 }
 
-
 // Makes pointerLockElement return window.fakelock
 Object.defineProperty(document, "pointerLockElement", {
   get: function () {
     return window.fakelock;
   }
 });
+
 // When exitPointerLock is called, this dispatches an event, clears the
 document.exitPointerLock = function () {
   window.fakelock = null
   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
 }
 
@@ -97,10 +110,11 @@ document.createElement = function(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 :(
 let customStyle = document.createElement("style");
 customStyle.textContent = `
-    button {
+    .mobileControl {
         position: absolute; 
         width: 9vh;
         height: 9vh;
@@ -123,7 +137,7 @@ customStyle.textContent = `
         opacity: .5;
         font-weight: 900;
     }
-    button:active {
+    .mobileControl:active {
       opacity: .75;
     }
     .minicontrol {
@@ -139,11 +153,11 @@ customStyle.textContent = `
       height: 6vh;
       margin: 1vh 0vh;
     }
-    .crouch {
+    .crouchButton {
       background:url(mobile/uiCrouch.png) no-repeat center;
       background-size: contain, cover;
     }
-    .crouch:active {
+    .crouchButton:active {
       background:url(mobile/uiCrouchSel.png) no-repeat center;
       background-size: contain, cover;
     }
@@ -155,27 +169,21 @@ customStyle.textContent = `
 document.documentElement.appendChild(customStyle);
 
 // 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;
     }`;
-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;
     }`;
-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
 function waitForElm(selector) {
@@ -195,117 +203,117 @@ 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() });
 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');
   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
 
-        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);
-        previousX = touch.pageX;
+    previousTouchX = touch.pageX;
-        previousY = touch.pageY;
+    previousTouchY = touch.pageY;
     event.preventDefault();
   }, false);
 
   canvas.addEventListener("touchend", (e) => {
-        previousX = null;
+    previousTouchX = null;
-        previousY = null; 
+    previousTouchY = null;
   }, false)
+  //Updates button visibility on load
+  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")
       forwardRightButton.classList.add("show")
     }
-
+    else if (displayStrafe === false) {
-    function hideStrafe() {
       forwardLeftButton.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.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);
   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.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);
   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.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);
   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.addEventListener("touchstart", function (e) { keyEvent("d", "keydown") }, false);
   rightButton.addEventListener("touchend", function (e) { keyEvent("d", "keyup") }, false);
   rightButton.addEventListener("touchmove", function (e) { e.preventDefault() }, false);
   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.addEventListener("touchstart", function (e) { keyEvent("a", "keydown") }, false);
   leftButton.addEventListener("touchend", function (e) { keyEvent("a", "keyup") }, false);
   leftButton.addEventListener("touchmove", function (e) { e.preventDefault() }, false);
   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.addEventListener("touchstart", function (e) { keyEvent("s", "keydown") }, false);
   backButton.addEventListener("touchend", function (e) { keyEvent("s", "keyup") }, false);
   backButton.addEventListener("touchmove", function (e) { e.preventDefault() }, false);
   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.addEventListener("touchstart", function (e) { keyEvent(" ", "keydown") }, false);
   jumpButton.addEventListener("touchend", function (e) { keyEvent(" ", "keyup") }, false);
   jumpButton.addEventListener("touchmove", function (e) { e.preventDefault() }, false);
   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.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("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);
   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.addEventListener("touchstart", function (e) {
     window.inInventory = (window.fakelock != null)
@@ -315,58 +323,70 @@ function insertCanvasElements() {
   inventoryButton.addEventListener("touchmove", function (e) { e.preventDefault() }, false);
   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("touchmove", function (e) { e.preventDefault() }, false);
   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("touchmove", function (e) { e.preventDefault() }, false);
   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("touchend", function (e) { keyEvent("À", "keyup") }, false);
   exitButton.addEventListener("touchmove", function (e) { e.preventDefault() }, false);
   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";
+  document.body.appendChild(hiddenInput);
+  let keyboardButton = createTouchButton("keyboardButton", "inAll");
+  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);
 
-	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("touchend", function (e) { mouseEvent(2, "mouseup", canvas) }, false);
   placeButton.addEventListener("touchmove", function (e) { e.preventDefault() }, false);
   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("touchend", function (e) { mouseEvent(0, "mouseup", canvas) }, false);
   breakButton.addEventListener("touchmove", function (e) { e.preventDefault() }, false);
   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.addEventListener("touchstart", function (e) {
     canvas.dispatchEvent(new WheelEvent("wheel", { "wheelDeltaY": -10 }))
@@ -374,9 +394,8 @@ function insertCanvasElements() {
   scrollUpButton.addEventListener("touchmove", function (e) { e.preventDefault() }, false);
   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.addEventListener("touchstart", function (e) {
     canvas.dispatchEvent(new WheelEvent("wheel", { "wheelDeltaY": 10 }))
@@ -384,9 +403,8 @@ function insertCanvasElements() {
   scrollDownButton.addEventListener("touchmove", function (e) { e.preventDefault() }, false);
   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.addEventListener("touchstart", function (e) {
     window.inInventory = (window.fakelock != null)