Up-in-the-Air – commitdiff

Clone
You can use Git to clone the repository via the web URL. Download snapshot (zip)
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (parent: d1f0e72)
Show touch point on virtual touch pad
authorJulian Fietkau <git@fietkau.software>
Fri, 27 Sep 2024 01:15:28 +0000 (03:15 +0200)
committerJulian Fietkau <git@fietkau.software>
Fri, 27 Sep 2024 01:15:28 +0000 (03:15 +0200)
index.html patch | blob | history
main.js patch | blob | history

diff --git a/index.html b/index.html
index 1f02c943bd867a4da864055a26fc90301e17e5f3..56d6b65c9c0231cf569d3c39bdd2982d616b885b 100644 (file)
--- a/index.html
+++ b/index.html
@@ -137,6 +137,19 @@
     background-image: url('data:image/svg+xml,%3Csvg viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="m33.5 224a1.5 1.5 0 0 1-1.5 1.5 1.5 1.5 0 0 1-1.5-1.5 1.5 1.5 0 0 1 1.5-1.5 1.5 1.5 0 0 1 1.5 1.5zm160 0a1.5 1.5 0 0 1-1.5 1.5 1.5 1.5 0 0 1-1.5-1.5 1.5 1.5 0 0 1 1.5-1.5 1.5 1.5 0 0 1 1.5 1.5zm-32 0a1.5 1.5 0 0 1-1.5 1.5 1.5 1.5 0 0 1-1.5-1.5 1.5 1.5 0 0 1 1.5-1.5 1.5 1.5 0 0 1 1.5 1.5zm64 0a1.5 1.5 0 0 1-1.5 1.5 1.5 1.5 0 0 1-1.5-1.5 1.5 1.5 0 0 1 1.5-1.5 1.5 1.5 0 0 1 1.5 1.5zm-128 0a1.5 1.5 0 0 1-1.5 1.5 1.5 1.5 0 0 1-1.5-1.5 1.5 1.5 0 0 1 1.5-1.5 1.5 1.5 0 0 1 1.5 1.5zm-32 0a1.5 1.5 0 0 1-1.5 1.5 1.5 1.5 0 0 1-1.5-1.5 1.5 1.5 0 0 1 1.5-1.5 1.5 1.5 0 0 1 1.5 1.5zm64 0a1.5 1.5 0 0 1-1.5 1.5 1.5 1.5 0 0 1-1.5-1.5 1.5 1.5 0 0 1 1.5-1.5 1.5 1.5 0 0 1 1.5 1.5zm-96-32a1.5 1.5 0 0 1-1.5 1.5 1.5 1.5 0 0 1-1.5-1.5 1.5 1.5 0 0 1 1.5-1.5 1.5 1.5 0 0 1 1.5 1.5zm160 0a1.5 1.5 0 0 1-1.5 1.5 1.5 1.5 0 0 1-1.5-1.5 1.5 1.5 0 0 1 1.5-1.5 1.5 1.5 0 0 1 1.5 1.5zm-32 0a1.5 1.5 0 0 1-1.5 1.5 1.5 1.5 0 0 1-1.5-1.5 1.5 1.5 0 0 1 1.5-1.5 1.5 1.5 0 0 1 1.5 1.5zm64 0a1.5 1.5 0 0 1-1.5 1.5 1.5 1.5 0 0 1-1.5-1.5 1.5 1.5 0 0 1 1.5-1.5 1.5 1.5 0 0 1 1.5 1.5zm-128 0a1.5 1.5 0 0 1-1.5 1.5 1.5 1.5 0 0 1-1.5-1.5 1.5 1.5 0 0 1 1.5-1.5 1.5 1.5 0 0 1 1.5 1.5zm-32 0a1.5 1.5 0 0 1-1.5 1.5 1.5 1.5 0 0 1-1.5-1.5 1.5 1.5 0 0 1 1.5-1.5 1.5 1.5 0 0 1 1.5 1.5zm64 0a1.5 1.5 0 0 1-1.5 1.5 1.5 1.5 0 0 1-1.5-1.5 1.5 1.5 0 0 1 1.5-1.5 1.5 1.5 0 0 1 1.5 1.5zm-96-32a1.5 1.5 0 0 1-1.5 1.5 1.5 1.5 0 0 1-1.5-1.5 1.5 1.5 0 0 1 1.5-1.5 1.5 1.5 0 0 1 1.5 1.5zm160 0a1.5 1.5 0 0 1-1.5 1.5 1.5 1.5 0 0 1-1.5-1.5 1.5 1.5 0 0 1 1.5-1.5 1.5 1.5 0 0 1 1.5 1.5zm-32 0a1.5 1.5 0 0 1-1.5 1.5 1.5 1.5 0 0 1-1.5-1.5 1.5 1.5 0 0 1 1.5-1.5 1.5 1.5 0 0 1 1.5 1.5zm64 0a1.5 1.5 0 0 1-1.5 1.5 1.5 1.5 0 0 1-1.5-1.5 1.5 1.5 0 0 1 1.5-1.5 1.5 1.5 0 0 1 1.5 1.5zm-128 0a1.5 1.5 0 0 1-1.5 1.5 1.5 1.5 0 0 1-1.5-1.5 1.5 1.5 0 0 1 1.5-1.5 1.5 1.5 0 0 1 1.5 1.5zm-32 0a1.5 1.5 0 0 1-1.5 1.5 1.5 1.5 0 0 1-1.5-1.5 1.5 1.5 0 0 1 1.5-1.5 1.5 1.5 0 0 1 1.5 1.5zm64 0a1.5 1.5 0 0 1-1.5 1.5 1.5 1.5 0 0 1-1.5-1.5 1.5 1.5 0 0 1 1.5-1.5 1.5 1.5 0 0 1 1.5 1.5zm-96-32a1.5 1.5 0 0 1-1.5 1.5 1.5 1.5 0 0 1-1.5-1.5 1.5 1.5 0 0 1 1.5-1.5 1.5 1.5 0 0 1 1.5 1.5zm160 0a1.5 1.5 0 0 1-1.5 1.5 1.5 1.5 0 0 1-1.5-1.5 1.5 1.5 0 0 1 1.5-1.5 1.5 1.5 0 0 1 1.5 1.5zm-32 0a1.5 1.5 0 0 1-1.5 1.5 1.5 1.5 0 0 1-1.5-1.5 1.5 1.5 0 0 1 1.5-1.5 1.5 1.5 0 0 1 1.5 1.5zm64 0a1.5 1.5 0 0 1-1.5 1.5 1.5 1.5 0 0 1-1.5-1.5 1.5 1.5 0 0 1 1.5-1.5 1.5 1.5 0 0 1 1.5 1.5zm-128 0a1.5 1.5 0 0 1-1.5 1.5 1.5 1.5 0 0 1-1.5-1.5 1.5 1.5 0 0 1 1.5-1.5 1.5 1.5 0 0 1 1.5 1.5zm-32 0a1.5 1.5 0 0 1-1.5 1.5 1.5 1.5 0 0 1-1.5-1.5 1.5 1.5 0 0 1 1.5-1.5 1.5 1.5 0 0 1 1.5 1.5zm64 0a1.5 1.5 0 0 1-1.5 1.5 1.5 1.5 0 0 1-1.5-1.5 1.5 1.5 0 0 1 1.5-1.5 1.5 1.5 0 0 1 1.5 1.5zm-96-32a1.5 1.5 0 0 1-1.5 1.5 1.5 1.5 0 0 1-1.5-1.5 1.5 1.5 0 0 1 1.5-1.5 1.5 1.5 0 0 1 1.5 1.5zm160 0a1.5 1.5 0 0 1-1.5 1.5 1.5 1.5 0 0 1-1.5-1.5 1.5 1.5 0 0 1 1.5-1.5 1.5 1.5 0 0 1 1.5 1.5zm-32 0a1.5 1.5 0 0 1-1.5 1.5 1.5 1.5 0 0 1-1.5-1.5 1.5 1.5 0 0 1 1.5-1.5 1.5 1.5 0 0 1 1.5 1.5zm64 0a1.5 1.5 0 0 1-1.5 1.5 1.5 1.5 0 0 1-1.5-1.5 1.5 1.5 0 0 1 1.5-1.5 1.5 1.5 0 0 1 1.5 1.5zm-128 0a1.5 1.5 0 0 1-1.5 1.5 1.5 1.5 0 0 1-1.5-1.5 1.5 1.5 0 0 1 1.5-1.5 1.5 1.5 0 0 1 1.5 1.5zm-32 0a1.5 1.5 0 0 1-1.5 1.5 1.5 1.5 0 0 1-1.5-1.5 1.5 1.5 0 0 1 1.5-1.5 1.5 1.5 0 0 1 1.5 1.5zm64 0a1.5 1.5 0 0 1-1.5 1.5 1.5 1.5 0 0 1-1.5-1.5 1.5 1.5 0 0 1 1.5-1.5 1.5 1.5 0 0 1 1.5 1.5zm-96-32a1.5 1.5 0 0 1-1.5 1.5 1.5 1.5 0 0 1-1.5-1.5 1.5 1.5 0 0 1 1.5-1.5 1.5 1.5 0 0 1 1.5 1.5zm160 0a1.5 1.5 0 0 1-1.5 1.5 1.5 1.5 0 0 1-1.5-1.5 1.5 1.5 0 0 1 1.5-1.5 1.5 1.5 0 0 1 1.5 1.5zm-32 0a1.5 1.5 0 0 1-1.5 1.5 1.5 1.5 0 0 1-1.5-1.5 1.5 1.5 0 0 1 1.5-1.5 1.5 1.5 0 0 1 1.5 1.5zm64 0a1.5 1.5 0 0 1-1.5 1.5 1.5 1.5 0 0 1-1.5-1.5 1.5 1.5 0 0 1 1.5-1.5 1.5 1.5 0 0 1 1.5 1.5zm-128 0a1.5 1.5 0 0 1-1.5 1.5 1.5 1.5 0 0 1-1.5-1.5 1.5 1.5 0 0 1 1.5-1.5 1.5 1.5 0 0 1 1.5 1.5zm-32 0a1.5 1.5 0 0 1-1.5 1.5 1.5 1.5 0 0 1-1.5-1.5 1.5 1.5 0 0 1 1.5-1.5 1.5 1.5 0 0 1 1.5 1.5zm64 0a1.5 1.5 0 0 1-1.5 1.5 1.5 1.5 0 0 1-1.5-1.5 1.5 1.5 0 0 1 1.5-1.5 1.5 1.5 0 0 1 1.5 1.5zm-96-32a1.5 1.5 0 0 1-1.5 1.5 1.5 1.5 0 0 1-1.5-1.5 1.5 1.5 0 0 1 1.5-1.5 1.5 1.5 0 0 1 1.5 1.5zm160 0a1.5 1.5 0 0 1-1.5 1.5 1.5 1.5 0 0 1-1.5-1.5 1.5 1.5 0 0 1 1.5-1.5 1.5 1.5 0 0 1 1.5 1.5zm-32 0a1.5 1.5 0 0 1-1.5 1.5 1.5 1.5 0 0 1-1.5-1.5 1.5 1.5 0 0 1 1.5-1.5 1.5 1.5 0 0 1 1.5 1.5zm64 0a1.5 1.5 0 0 1-1.5 1.5 1.5 1.5 0 0 1-1.5-1.5 1.5 1.5 0 0 1 1.5-1.5 1.5 1.5 0 0 1 1.5 1.5zm-128 0a1.5 1.5 0 0 1-1.5 1.5 1.5 1.5 0 0 1-1.5-1.5 1.5 1.5 0 0 1 1.5-1.5 1.5 1.5 0 0 1 1.5 1.5zm-32 0a1.5 1.5 0 0 1-1.5 1.5 1.5 1.5 0 0 1-1.5-1.5 1.5 1.5 0 0 1 1.5-1.5 1.5 1.5 0 0 1 1.5 1.5zm64 0a1.5 1.5 0 0 1-1.5 1.5 1.5 1.5 0 0 1-1.5-1.5 1.5 1.5 0 0 1 1.5-1.5 1.5 1.5 0 0 1 1.5 1.5z" fill="none" stroke="%23aaa" opacity=".25"/%3E%3C/svg%3E'), radial-gradient(circle at 25% 25%, #686868, #484848);
     border-radius: 3%;
     border: 2px inset #808080;
+    overflow: hidden;
+  }
+  .virtual-input-widget.touchpad .circle {
+    position: relative;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    display: block;
+    width: 5%;
+    aspect-ratio: 1 / 1;
+    border-radius: 50%;
+    background-color: #fff;
+    opacity: 0.4;
   }
   .virtual-input-widget.thumbstick {
     display: block;
diff --git a/main.js b/main.js
index 7017f2a7f83ab96f34301fa23f985f69ead0e2dd..b107e67bcd71a8f287cbbd4800fffc3dd191464d 100644 (file)
--- a/main.js
+++ b/main.js
@@ -265,6 +265,10 @@ function init(game, canvas) {
       // y will still be in range (-0.5, 0.5), but the range for x will be smaller or larger.
       let x = (viewportLocalX - bbox.x - (bbox.width / 2)) / bbox.height;
       let y = (viewportLocalY - bbox.y - (bbox.height / 2)) / bbox.height;
+      if(game.settings['controls'] == 'touchpad') {
+        sensorElem.children[0].style.left = ((0.5 + x) * 100) + '%';
+        sensorElem.children[0].style.top = ((0.5 + y) * 100) + '%';
+      }
       if(game.settings['controls'] == 'touchpad') {
         x *= 1.05;
         y *= 1.05;
@@ -378,30 +382,41 @@ function init(game, canvas) {
 
   document.body.addEventListener('mousemove', e => cursorMoveEvent(game, e.target, e.clientX, e.clientY, (e.buttons % 2 == 1)));
   document.body.addEventListener('mousedown', e => {
-    if(game.settings['controls'] == 'thumbstick') {
-      if(e.target.closest('.virtual-input-widget') == game.ui.virtualInput) {
+    if(game.settings['controls'] == 'touchpad' || game.settings['controls'] == 'thumbstick') {
+      if(e.target.closest('.virtual-input-widget') == game.ui.virtualInput || game.settings['controls'] == 'touchpad') {
         game.ui.virtualInput.inProgress = true;
+        game.ui.virtualInput.children[0].style.display = 'block';
         e.preventDefault();
       } else {
         game.ui.virtualInput.inProgress = false;
+        if(game.settings['controls'] == 'touchpad') {
+          game.ui.virtualInput.children[0].style.display = 'none';
+        }
       }
     }
     cursorMoveEvent(game, e.target, e.clientX, e.clientY, (e.buttons % 2 == 1));
   });
   document.body.addEventListener('mouseup', e => {
     cursorMoveEvent(game, e.target, e.clientX, e.clientY, (e.buttons % 2 == 1));
-    if(game.settings['controls'] == 'thumbstick') {
+    if(game.settings['controls'] == 'touchpad' || game.settings['controls'] == 'thumbstick') {
       game.ui.virtualInput.inProgress = false;
+      if(game.settings['controls'] == 'touchpad') {
+        game.ui.virtualInput.children[0].style.display = 'none';
+      }
     }
   });
   document.body.addEventListener('touchmove', e => cursorMoveEvent(game, e.target, e.touches[0].clientX, e.touches[0].clientY, true));
   document.body.addEventListener('touchstart', e => {
-    if(game.settings['controls'] == 'thumbstick') {
-      if(e.target.closest('.virtual-input-widget') == game.ui.virtualInput) {
+    if(game.settings['controls'] == 'touchpad' || game.settings['controls'] == 'thumbstick') {
+      if(e.target.closest('.virtual-input-widget') == game.ui.virtualInput || game.settings['controls'] == 'touchpad') {
         game.ui.virtualInput.inProgress = true;
+        game.ui.virtualInput.children[0].style.display = 'block';
         e.preventDefault();
       } else {
         game.ui.virtualInput.inProgress = false;
+        if(game.settings['controls'] == 'touchpad') {
+          game.ui.virtualInput.children[0].style.display = 'none';
+        }
       }
     }
     cursorMoveEvent(game, e.target, e.touches[0].clientX, e.touches[0].clientY, true);
@@ -411,9 +426,12 @@ function init(game, canvas) {
       game.ui.moveToPage('pause', true);
       e.preventDefault();
     }
-    if(game.settings['controls'] == 'thumbstick') {
+    if(game.settings['controls'] == 'touchpad' || game.settings['controls'] == 'thumbstick') {
       cursorMoveEvent(game, e.target, 0, 0, false);
       game.ui.virtualInput.inProgress = false;
+      if(game.settings['controls'] == 'touchpad') {
+        game.ui.virtualInput.children[0].style.display = 'none';
+      }
     }
   });
   document.body.addEventListener('keydown', e => keyboardEvent(game, e.key, 'down'));
@@ -970,11 +988,16 @@ function applySettings(game) {
   const ui = game.ui.root.querySelector('.ui-page.options');
   game.settings['controls'] = ui.querySelector('input[name="upInTheAirGame-controls"]:checked').value;
   const virtualInput = game.ui.root.parentNode.querySelector('.virtual-input-widget');
+  virtualInput.children[0].style.display = 'block';
+  virtualInput.children[0].style.left = '50%';
+  virtualInput.children[0].style.top = '50%';
+  delete virtualInput.inProgress;
   if(game.settings['controls'] == 'touchpad') {
     virtualInput.classList.remove('thumbstick');
     virtualInput.classList.add('touchpad');
     game.ui.root.classList.remove('control-mouse', 'control-thumbstick');
     game.ui.root.classList.add('control-touchpad');
+    virtualInput.children[0].style.display = 'none';
   } else if(game.settings['controls'] == 'thumbstick') {
     virtualInput.classList.remove('touchpad');
     virtualInput.classList.add('thumbstick');