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: d00d188)
Softer snap back for virtual thumbstick
authorJulian Fietkau <git@fietkau.software>
Fri, 27 Sep 2024 12:48:31 +0000 (14:48 +0200)
committerJulian Fietkau <git@fietkau.software>
Fri, 27 Sep 2024 12:48:31 +0000 (14:48 +0200)
index.html patch | blob | history
main.js patch | blob | history

diff --git a/index.html b/index.html
index b16fcafc47bc2d51a5af576c99b35decce846072..fc69a38ef5e5464769b38859f92ccea9d24e5ed0 100644 (file)
--- a/index.html
+++ b/index.html
@@ -156,15 +156,19 @@
     border: 2px inset #808080;
     overflow: hidden;
   }
-  .virtual-input-widget.touchpad .circle {
+  .virtual-input-widget .circle {
     position: relative;
     left: 50%;
     top: 50%;
     transform: translate(-50%, -50%);
     display: block;
-    width: 5%;
     aspect-ratio: 1 / 1;
     border-radius: 50%;
+    transition-property: left, top;
+    transition-duration: 0ms;
+  }
+  .virtual-input-widget.touchpad .circle {
+    width: 5%;
     background-color: #fff;
     opacity: 0.4;
   }
@@ -176,14 +180,7 @@
     border: 2px inset #808080;
   }
   .virtual-input-widget.thumbstick .circle {
-    position: relative;
-    left: 50%;
-    top: 50%;
-    transform: translate(-50%, -50%);
-    display: block;
     width: 50%;
-    aspect-ratio: 1 / 1;
-    border-radius: 50%;
     background-color: #ccc;
     background-image: radial-gradient(#ccc 0%, #ccc 20%, #999 25%, #ccc 30%, #ccc 40%, #999 45%, #ccc 50%, #444 100%);
     box-shadow: 0 0 .3cm #000;
diff --git a/main.js b/main.js
index 0b99c678ce7c643ea577b23f9f1542083174ded7..f9f8baf3d21693eda368a5ab242d9dc7ddaed6ac 100644 (file)
--- a/main.js
+++ b/main.js
@@ -402,7 +402,11 @@ function init(game, canvas) {
       game.ui.virtualInput.inProgress = false;
       if(game.settings['controls'] == 'touchpad') {
         game.ui.virtualInput.children[0].style.display = 'none';
+      } else {
+        game.ui.virtualInput.children[0].style.transitionDuration = '50ms';
+        setTimeout(() => { game.ui.virtualInput.children[0].style.transitionDuration = '0ms'; }, 75);
       }
+      cursorMoveEvent(game, e.target, 0, 0, false);
     }
   });
   document.body.addEventListener('touchmove', e => cursorMoveEvent(game, e.target, e.touches[0].clientX, e.touches[0].clientY, true));
@@ -427,11 +431,14 @@ function init(game, canvas) {
       e.preventDefault();
     }
     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';
+      } else {
+        game.ui.virtualInput.children[0].style.transitionDuration = '50ms';
+        setTimeout(() => { game.ui.virtualInput.children[0].style.transitionDuration = '0ms'; }, 75);
       }
+      cursorMoveEvent(game, e.target, 0, 0, false);
     }
   });
   document.body.addEventListener('keydown', e => keyboardEvent(game, e.key, 'down'));