Improve authentication recovery and mobile gameplay

components/Panorama.tsx

@@ -39,21 +39,21 @@ export function Panorama({
     const element = mount.current!;
     view.current = { yaw: 0, pitch: 0, fov: 80 };
     const down = (e: PointerEvent) => {
-        if (e.button !== 0) return;
+        if (e.button !== 0 || drag) return;
         element.setPointerCapture(e.pointerId);
-        drag = { x: e.clientX, y: e.clientY };
+        drag = { x: e.clientX, y: e.clientY, pointerId: e.pointerId };
       },
       move = (e: PointerEvent) => {
-        if (!drag) return;
+        if (!drag || drag.pointerId !== e.pointerId) return;
         view.current.yaw -= (e.clientX - drag.x) * 0.003;
         view.current.pitch = Math.max(
           -1.5,
           Math.min(1.5, view.current.pitch + (e.clientY - drag.y) * 0.003),
         );
-        drag = { x: e.clientX, y: e.clientY };
+        drag = { x: e.clientX, y: e.clientY, pointerId: e.pointerId };
       },
-      up = () => {
-        drag = null;
+      up = (e: PointerEvent) => {
+        if (drag?.pointerId === e.pointerId) drag = null;
       },
       wheel = (e: WheelEvent) => {
         if (!zoom) return;
@@ -70,7 +70,7 @@ export function Panorama({
         "The panorama graphics context was lost. Reconnect to restore the view.",
       );
     };
-    let drag: { x: number; y: number } | null = null;
+    let drag: { x: number; y: number; pointerId: number } | null = null;
     if (urls.length !== 6) {
       callbacks.current.onError(
         "This panorama is missing one or more of its six faces.",
@@ -133,6 +133,7 @@ export function Panorama({
         element.addEventListener("pointermove", move);
         element.addEventListener("pointerup", up);
         element.addEventListener("pointercancel", up);
+        element.addEventListener("lostpointercapture", up);
         element.addEventListener("wheel", wheel, { passive: false });
         callbacks.current.onReady();
       })
@@ -150,6 +151,7 @@ export function Panorama({
       element.removeEventListener("pointermove", move);
       element.removeEventListener("pointerup", up);
       element.removeEventListener("pointercancel", up);
+      element.removeEventListener("lostpointercapture", up);
       element.removeEventListener("wheel", wheel);
       geometry?.dispose();
       material?.dispose();