Fix hero spinning while walking: joystick dead zone with hysteresis, vector smoothing, floating stick origin

index.html

@@ -228,6 +228,7 @@ button.big.ghost { background:rgba(20,16,10,.8); color:var(--gold); }
   // ---------------------------------------------------------------- constants
   const HW = 96, HH = 48;            // half tile size (tile 192x96)
   const HERO_SPEED = 4.2;            // tiles / second
+  const JOY_R = 70, JOY_DEAD = 10;   // joystick radius / dead zone (css px); released again below 60% of the dead zone
   const ENEMY_SPEED = 0.7;           // multiplier on enemy file speed
   const ENEMY_DMG_SCALE = 0.3;       // balance factor on file damage (web port)
   const HERO_R = 0.28, ENEMY_R = 0.28;
@@ -270,7 +271,7 @@ button.big.ghost { background:rgba(20,16,10,.8); color:var(--gold); }
     enemies: [], drops: [], projs: [], texts: [], marks: [],
     canvas: null, ctx: null, W: 0, H: 0, zoom: 1,
     auto: false, lock: true, atkOn: true, eid: 0,
-    joy: { on: false, ox: 0, oy: 0, vx: 0, vy: 0 },
+    joy: { on: false, act: false, ox: 0, oy: 0, vx: 0, vy: 0, sx: 0, sy: 0 },
     keyDir: null, ptr: null, cls: 'brute', running: false,
     noHotUntil: 0, changing: false, lastHud: 0, lastSave: 0, kills: 0, skillBtns: [],
   };
@@ -899,14 +900,26 @@ button.big.ghost { background:rgba(20,16,10,.8); color:var(--gold); }
     // while an attack animation is playing, keep the attack facing and do not replace the swing with run/stance
     const attacking = t < H.lockUntil;
     const inReach = H.target && !H.target.dead && dist(H.x, H.y, H.target.x, H.target.y) <= S.world.classes[H.cls].range + 0.25;
-    if (S.joy.on || S.keyDir) {
-      const [vx, vy] = S.joy.on ? [S.joy.vx, S.joy.vy] : S.keyDir;
+    // movement input: stick with dead zone (+ smoothing against thumb tremor) or keyboard
+    let vx = 0, vy = 0, power = 0;
+    if (S.joy.on) {
+      const L = Math.hypot(S.joy.vx, S.joy.vy);
+      if (!S.joy.act && L > JOY_DEAD) { S.joy.act = true; S.joy.sx = S.joy.vx; S.joy.sy = S.joy.vy; }
+      else if (S.joy.act && L < JOY_DEAD * 0.6) S.joy.act = false;
+      if (S.joy.act) {
+        const a = Math.min(1, dt * 14);
+        S.joy.sx += (S.joy.vx - S.joy.sx) * a; S.joy.sy += (S.joy.vy - S.joy.sy) * a;
+        vx = S.joy.sx; vy = S.joy.sy;
+        power = Math.min(1, 0.4 + (Math.hypot(vx, vy) - JOY_DEAD) / 30);
+      }
+    } else if (S.keyDir) { [vx, vy] = S.keyDir; power = 1; }
+    {
       const len = Math.hypot(vx, vy);
-      if (len > 0.01) {
+      if (power > 0 && len > 0.01) {
         // screen vector -> world (iso inverse on direction vector)
         const wx = (vx / HW + vy / HH) / 2, wy = (vy / HH - vx / HW) / 2;
         const wl = Math.hypot(wx, wy) || 1;
-        const k = sp * dt * Math.min(1, len);
+        const k = sp * dt * power;
         let mx = wx / wl * k, my = wy / wl * k;
         // already in reach of the locked target: do not walk into it (that made the hero overshoot back and forth)
         if (inReach && mx * (H.target.x - H.x) + my * (H.target.y - H.y) > 0) { mx = 0; my = 0; }
@@ -1088,15 +1101,18 @@ button.big.ghost { background:rgba(20,16,10,.8); color:var(--gold); }
       }
       if (S.joy.on) {
         let vx = e.clientX - S.joy.ox, vy = e.clientY - S.joy.oy;
-        const L = Math.hypot(vx, vy), R = 70;
-        if (L > R) { vx = vx / L * R; vy = vy / L * R; }
+        const L = Math.hypot(vx, vy), R = JOY_R;
+        if (L > R) { // the stick follows the thumb, so reversing direction never needs a long drag back
+          S.joy.ox = e.clientX - vx / L * R; S.joy.oy = e.clientY - vy / L * R;
+          vx = vx / L * R; vy = vy / L * R;
+        }
         S.joy.vx = vx; S.joy.vy = vy; S.joy.cx = S.joy.ox + vx; S.joy.cy = S.joy.oy + vy;
       }
     });
     const up = (e) => {
       if (!S.ptr || e.pointerId !== S.ptr.id) return;
       if (!S.joy.on && now() - S.ptr.t0 < 0.45) onTap(e.clientX, e.clientY);
-      S.joy.on = false; S.joy.vx = S.joy.vy = 0; S.ptr = null;
+      S.joy.on = false; S.joy.act = false; S.joy.vx = S.joy.vy = S.joy.sx = S.joy.sy = 0; S.ptr = null;
     };
     cv.addEventListener('pointerup', up);
     cv.addEventListener('pointercancel', up);

sw.js

@@ -2,7 +2,7 @@
 // The Space serves assets with "Cache-Control: no-store", so the browser HTTP cache never keeps them.
 // Cache Storage (used here) is not affected by that header, so images are downloaded once per build.
 // The two placeholders below (build id and asset list) are filled in by tools/inline_build.py.
-const BUILD = '43cf7f987b8c';
+const BUILD = '0c47d0b01e9d';
 const SHELL = 'flare-shell-' + BUILD;   // index.html (network first, cache fallback)
 const ASSETS = 'flare-assets-' + BUILD; // sprites, tiles, icons (cache-first)
 const KEEP = [SHELL, ASSETS];