npm - mudra-skills - Versions diffs - 1.0.0 - Mend

mudra-skills 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (149) hide show

package/skills/mudra-xr/assets/samples/game_rps.html ADDED Viewed

@@ -0,0 +1,1099 @@
+<!doctype html>
+<!-- reference: samples/game_rps -->
+<html lang="en">
+  <head>
+    <title>Rock Paper Scissors | XR Blocks</title>
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, user-scalable=no"
+    />
+<link type="text/css" rel="stylesheet" href="https://xrblocks.github.io/css/xr.css" />
+    <script>
+      window.litDisableBundleWarning = true;
+    </script>
+    <script type="importmap">
+      {
+        "imports": {
+          "lit": "https://cdn.jsdelivr.net/gh/lit/dist@3/core/lit-core.min.js",
+          "lit/": "https://esm.run/lit@3/",
+          "three": "https://cdn.jsdelivr.net/npm/three@0.182.0/build/three.module.js",
+          "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.182.0/examples/jsm/",
+          "troika-three-text": "https://cdn.jsdelivr.net/gh/protectwise/troika@028b81cf308f0f22e5aa8e78196be56ec1997af5/packages/troika-three-text/src/index.js",
+          "troika-three-utils": "https://cdn.jsdelivr.net/gh/protectwise/troika@v0.52.4/packages/troika-three-utils/src/index.js",
+          "troika-worker-utils": "https://cdn.jsdelivr.net/gh/protectwise/troika@v0.52.4/packages/troika-worker-utils/src/index.js",
+          "bidi-js": "https://esm.sh/bidi-js@%5E1.0.2?target=es2022",
+          "webgl-sdf-generator": "https://esm.sh/webgl-sdf-generator@1.1.1/es2022/webgl-sdf-generator.mjs",
+          "@tensorflow/tfjs-core": "https://cdn.jsdelivr.net/npm/@tensorflow/tfjs-core/+esm",
+          "@tensorflow/tfjs": "https://cdn.jsdelivr.net/npm/@tensorflow/tfjs/+esm",
+          "@tensorflow/tfjs-backend-webgpu": "https://cdn.jsdelivr.net/npm/@tensorflow/tfjs-backend-webgpu/+esm",
+          "@litertjs/core": "https://unpkg.com/@litertjs/core@0.2.1",
+          "@litertjs/tfjs-interop": "https://unpkg.com/@litertjs/tfjs-interop@1.0.1",
+          "@litertjs/wasm-utils": "https://unpkg.com/@litertjs/wasm-utils@0.2.1",
+          "xrblocks": "https://cdn.jsdelivr.net/npm/xrblocks@0.11.0/build/xrblocks.js",
+          "xrblocks/addons/": "https://cdn.jsdelivr.net/npm/xrblocks@0.11.0/build/addons/"
+        }
+      }
+    </script>
+  </head>
+  <body>
+    <script type="module">
+import 'xrblocks/addons/simulator/SimulatorAddons.js';
+// LiteRt
+import {loadLiteRt, setWebGpuDevice} from '@litertjs/core';
+import {runWithTfjsTensors} from '@litertjs/tfjs-interop';
+// TensorflowJS + WebGPU backend
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import {WebGPUBackend} from '@tensorflow/tfjs-backend-webgpu';
+import * as tf from '@tensorflow/tfjs';
+import * as THREE from 'three';
+import * as xb from 'xrblocks';
+// --- Inlined: GestureDetectionHandler.js ---
+const GESTURE_RETURN_LABELS_MAX_ENUM = 5;
+const UNKNOWN_GESTURE = 0;
+/**
+ * Threshold for a dot product to indicate a straight or extended finger segment.
+ * 0.9 implies ~25.8 degrees tolerance.
+ * @const {number}
+ */
+const STRAIGHT_FINGER_THRESHOLD = 0.9;
+/**
+ * Indices in the `relativeHandBoneAngles` tensor, derived directly from the
+ * order in the HAND_BONE_IDX_CONNECTION_MAP provided.
+ * @enum {number}
+ */
+const ANGLE_INDICES = {
+  // Thumb angles (2 angles for straightness)
+  THUMB_SEGMENT_ANGLE_1: 0,
+  THUMB_SEGMENT_ANGLE_2: 1,
+  // Index finger angles (3 angles for straightness)
+  INDEX_SEGMENT_ANGLE_1: 2,
+  INDEX_SEGMENT_ANGLE_2: 3,
+  INDEX_SEGMENT_ANGLE_3: 4,
+  // Middle finger angles (3 angles for straightness)
+  MIDDLE_SEGMENT_ANGLE_1: 5,
+  MIDDLE_SEGMENT_ANGLE_2: 6,
+  MIDDLE_SEGMENT_ANGLE_3: 7,
+  // Ring finger angles (3 angles for straightness)
+  RING_SEGMENT_ANGLE_1: 8,
+  RING_SEGMENT_ANGLE_2: 9,
+  RING_SEGMENT_ANGLE_3: 10,
+  // Pinky finger angles (3 angles for straightness)
+  PINKY_SEGMENT_ANGLE_1: 11,
+  PINKY_SEGMENT_ANGLE_2: 12,
+  PINKY_SEGMENT_ANGLE_3: 13,
+};
+/**
+ * A queue that only processes the most recent task, discarding outdated ones.
+ */
+class LatestTaskQueue {
+  constructor() {
+    this.latestTask = null;
+    this.isProcessing = false;
+  }
+  enqueue(task) {
+    if (typeof task !== 'function') {
+      console.error('Task must be a function.');
+      return;
+    }
+    this.latestTask = task;
+    if (!this.isProcessing) {
+      this.processLatestTask();
+    }
+  }
+  processLatestTask() {
+    if (this.latestTask) {
+      this.isProcessing = true;
+      const taskToProcess = this.latestTask;
+      this.latestTask = null; // Clear the reference immediately
+      // Execute the task asynchronously using setTimeout (or queueMicrotask)
+      setTimeout(async () => {
+        try {
+          await taskToProcess(); // If the task is async
+        } catch (error) {
+          console.error('Error processing latest task:', error);
+        } finally {
+          this.isProcessing = false;
+          if (this.latestTask) {
+            this.processLatestTask();
+          }
+        }
+      }, 0); // Delay of 0ms puts it in the event queue
+    }
+  }
+  getSize() {
+    return this.latestTask === null ? 0 : 1;
+  }
+  isEmpty() {
+    return this.latestTask === null;
+  }
+}
+/**
+ * Handles gesture detection using TFJS and LiteRT.
+ */
+class GestureDetectionHandler {
+  constructor() {
+    // model
+    this.modelPath = './custom_gestures_model.tflite';
+    this.modelState = 'None';
+    // Enable/Disable paper gesture detection
+    this.enablePaperDetection = false;
+    //
+    // left and right hand queues
+    this.queue = [];
+    this.queue.push(new LatestTaskQueue());
+    this.queue.push(new LatestTaskQueue());
+    setTimeout(() => {
+      this.setBackendAndLoadModel();
+    }, 1);
+  }
+  /**
+   * Enables or disables specific paper gesture detection logic.
+   * @param {boolean} value
+   */
+  enablePaperGesture(value) {
+    this.enablePaperDetection = value;
+  }
+  /**
+   * Sets up the WebGPU backend and loads the TFLite model.
+   */
+  async setBackendAndLoadModel() {
+    this.modelState = 'Loading';
+    try {
+      await tf.setBackend('webgpu');
+      await tf.ready();
+      const wasmPath = 'https://unpkg.com/@litertjs/core@0.2.1/wasm/';
+      const liteRt = await loadLiteRt(wasmPath);
+      // Makes LiteRT use the same GPU device as TFJS (for tensor conversion).
+      const backend = tf.backend(); // as WebGPUBackend;
+      setWebGpuDevice(backend.device);
+      // Loads model via LiteRT.
+      await this.loadModel(liteRt);
+      if (this.model) {
+        // Prints model details to the log.
+        console.log('MODEL DETAILS: ', this.model.getInputDetails());
+      }
+      this.modelState = 'Ready';
+    } catch (error) {
+      console.error('Failed to load model or backend:', error);
+    }
+  }
+  /**
+   * Loads the TFLite model.
+   * @param {Object} liteRt The LiteRT instance.
+   */
+  async loadModel(liteRt) {
+    try {
+      this.model = await liteRt.loadAndCompile(this.modelPath, {
+        // Currently, only 'webgpu' is supported.
+        accelerator: 'webgpu',
+      });
+    } catch (error) {
+      this.model = null;
+      console.error('Error loading model:', error);
+    }
+  }
+  calculateRelativeHandBoneAngles(jointPositions) {
+    // Reshape jointPositions.
+    let jointPositionsReshaped = [];
+    jointPositionsReshaped = jointPositions.reshape([xb.HAND_JOINT_COUNT, 3]);
+    // Calculates bone vectors.
+    const boneVectors = [];
+    xb.HAND_JOINT_IDX_CONNECTION_MAP.forEach(([joint1, joint2]) => {
+      const boneVector = jointPositionsReshaped
+        .slice([joint2, 0], [1, 3])
+        .sub(jointPositionsReshaped.slice([joint1, 0], [1, 3]))
+        .squeeze();
+      const norm = boneVector.norm();
+      const normalizedBoneVector = boneVector.div(norm);
+      boneVectors.push(normalizedBoneVector);
+    });
+    // Calculates relative hand bone angles.
+    const relativeHandBoneAngles = [];
+    xb.HAND_BONE_IDX_CONNECTION_MAP.forEach(([bone1, bone2]) => {
+      const angle = boneVectors[bone1].dot(boneVectors[bone2]);
+      relativeHandBoneAngles.push(angle);
+    });
+    // Stacks the angles into a tensor.
+    return tf.stack(relativeHandBoneAngles);
+  }
+  /**
+   * Runs inference on hand joints.
+   * @param {Array<number>} handJoints Flat array of joint positions.
+   * @return {Promise<number>} The detected gesture ID.
+   */
+  async detectGesture(handJoints) {
+    if (!this.model || !handJoints || handJoints.length !== 25 * 3) {
+      console.log('Invalid hand joints or model load error.');
+      return GESTURE_RETURN_LABELS_MAX_ENUM;
+    }
+    try {
+      // Use tidy to clean up intermediate tensors.
+      const tensor = tf.tidy(() =>
+        this.calculateRelativeHandBoneAngles(tf.tensor1d(handJoints))
+      );
+      // Detect "Paper" gesture for 2 seconds.
+      if (this.enablePaperDetection && this.isPaperGesture(tensor)) {
+        // Paper gesture - GESTURE_RETURN_LABELS
+        return 2;
+      }
+      const tensorReshaped = tf.tidy(() =>
+        tensor.reshape([1, xb.HAND_BONE_IDX_CONNECTION_MAP.length, 1])
+      );
+      tensor.dispose(); // Disposes original tensor after reshape.
+      const result = runWithTfjsTensors(this.model, tensorReshaped);
+      tensorReshaped.dispose();
+      const integerLabel = result[0].as1D().arraySync();
+      if (integerLabel.length == 7) {
+        let maxScore = integerLabel[0];
+        let idx = 0;
+        for (let t = 0; t < 7; ++t) {
+          if (integerLabel[t] > maxScore) {
+            idx = t;
+            maxScore = integerLabel[t];
+          }
+        }
+        // No need to detect thumb up for a play mode
+        if (idx === 2) {
+          if (
+            this.enablePaperDetection ||
+            !this.isThumbUp(handJoints, 2, 3, 4)
+          ) {
+            return 0;
+          }
+        }
+        //
+        // Maps model result to the return index for the game.
+        //
+        // Thumb Up Logic check (Model Index 2)
+        if (idx == 2) {
+          return 4; // Thumb Up
+        }
+        // Fist (Model Index 4)
+        if (idx == 4) {
+          return 2; // Rock
+        }
+        // Victory / Scissors (Model Index 1)
+        else if (idx == 1) {
+          return 1; // Scissors
+        }
+        // OTHER gesture
+        return 0;
+      }
+    } catch (error) {
+      console.error('Error:', error);
+    }
+    return GESTURE_RETURN_LABELS_MAX_ENUM;
+  }
+  /**
+   * Wrapper for thumb up detection.
+   */
+  isThumbUp(d1, p1, p2, p3) {
+    return this.isThumbUpSimple(d1, p1, p3);
+  }
+  /**
+   * Advanced vector calculation for thumb up.
+   * @param {Array<number>} data Flat array of joints.
+   * @param {number} p1 Base index.
+   * @param {number} p2 Knuckle index.
+   * @param {number} p3 Tip index.
+   * @return {boolean}
+   */
+  isThumbUpAdvanced(data, p1, p2, p3) {
+    const v1 = {
+      x: data[p2 * 3] - data[p1 * 3],
+      y: data[p2 * 3 + 1] - data[p1 * 3 + 1],
+      z: data[p2 * 3 + 2] - data[p1 * 3 + 2],
+    };
+    const v2 = {
+      x: data[p3 * 3] - data[p2 * 3],
+      y: data[p3 * 3 + 1] - data[p2 * 3 + 1],
+      z: data[p3 * 3 + 2] - data[p2 * 3 + 2],
+    };
+    const dotProduct = v1.x * v2.x + v1.y * v2.y + v1.z * v2.z;
+    const magnitudeV1 = Math.sqrt(v1.x * v1.x + v1.y * v1.y + v1.z * v1.z);
+    const magnitudeV2 = Math.sqrt(v2.x * v2.x + v2.y * v2.y + v2.z * v2.z);
+    if (magnitudeV1 === 0 || magnitudeV2 === 0) {
+      return false;
+    }
+    const cosAngle = dotProduct / (magnitudeV1 * magnitudeV2);
+    const angleRadians = Math.acos(Math.max(-1, Math.min(1, cosAngle)));
+    const angleDegrees = angleRadians * (180 / Math.PI);
+    const thumbUpThreshold = 90;
+    return angleDegrees > thumbUpThreshold;
+  }
+  /**
+   * Detects if the hand is showing a "paper" (open palm) gesture.
+   * @param {tf.Tensor} relativeHandBoneAngles A TensorFlow.js tensor of bone angles.
+   * @returns {boolean} True if the gesture is "paper", false otherwise.
+   */
+  isPaperGesture(relativeHandBoneAngles) {
+    if (!relativeHandBoneAngles || relativeHandBoneAngles.size === 0) {
+      return false;
+    }
+    const angles = relativeHandBoneAngles.arraySync();
+    const areSegmentsStraight = (...angleIndices) => {
+      return angleIndices.every(
+        (idx) => angles[idx] > STRAIGHT_FINGER_THRESHOLD
+      );
+    };
+    const isThumbStraight = areSegmentsStraight(
+      ANGLE_INDICES.THUMB_SEGMENT_ANGLE_1,
+      ANGLE_INDICES.THUMB_SEGMENT_ANGLE_2
+    );
+    const isIndexStraight = areSegmentsStraight(
+      ANGLE_INDICES.INDEX_SEGMENT_ANGLE_1,
+      ANGLE_INDICES.INDEX_SEGMENT_ANGLE_2,
+      ANGLE_INDICES.INDEX_SEGMENT_ANGLE_3
+    );
+    const isMiddleStraight = areSegmentsStraight(
+      ANGLE_INDICES.MIDDLE_SEGMENT_ANGLE_1,
+      ANGLE_INDICES.MIDDLE_SEGMENT_ANGLE_2,
+      ANGLE_INDICES.MIDDLE_SEGMENT_ANGLE_3
+    );
+    const isRingStraight = areSegmentsStraight(
+      ANGLE_INDICES.RING_SEGMENT_ANGLE_1,
+      ANGLE_INDICES.RING_SEGMENT_ANGLE_2,
+      ANGLE_INDICES.RING_SEGMENT_ANGLE_3
+    );
+    const isPinkyStraight = areSegmentsStraight(
+      ANGLE_INDICES.PINKY_SEGMENT_ANGLE_1,
+      ANGLE_INDICES.PINKY_SEGMENT_ANGLE_2,
+      ANGLE_INDICES.PINKY_SEGMENT_ANGLE_3
+    );
+    const isPaper =
+      isThumbStraight &&
+      isIndexStraight &&
+      isMiddleStraight &&
+      isRingStraight &&
+      isPinkyStraight;
+    return isPaper;
+  }
+  //
+  // Clone joints and post queue task
+  //
+  postTask(joints, handIndex) {
+    if (Object.keys(joints).length !== 25) {
+      return UNKNOWN_GESTURE;
+    }
+    let handJointPositions = [];
+    for (const i in joints) {
+      handJointPositions.push(joints[i].position.x);
+      handJointPositions.push(joints[i].position.y);
+      handJointPositions.push(joints[i].position.z);
+    }
+    if (handJointPositions.length !== 25 * 3) {
+      return UNKNOWN_GESTURE;
+    }
+    if (handIndex >= 0 && handIndex < this.queue.length) {
+      this.queue[handIndex].enqueue(async () => {
+        let result = await this.detectGesture(handJointPositions);
+        if (this.observer && this.observer.onGestureDetected) {
+          this.observer.onGestureDetected(handIndex, result);
+        }
+      });
+    }
+  }
+  isThumbUpSimple(data, p1, p2) {
+    const vector = {
+      x: data[p2 * 3] - data[p1 * 3],
+      y: data[p2 * 3 + 1] - data[p1 * 3 + 1],
+      z: data[p2 * 3 + 2] - data[p1 * 3 + 2],
+    };
+    const magnitude = Math.sqrt(
+      vector.x * vector.x + vector.y * vector.y + vector.z * vector.z
+    );
+    if (magnitude < 0.001) {
+      return false;
+    }
+    const normalizedVector = {
+      x: vector.x / magnitude,
+      y: vector.y / magnitude,
+      z: vector.z / magnitude,
+    };
+    const upVector = {x: 0, y: 1, z: 0};
+    const dotProduct =
+      normalizedVector.x * upVector.x +
+      normalizedVector.y * upVector.y +
+      normalizedVector.z * upVector.z;
+    const cos45Degrees = Math.cos((45 * Math.PI) / 180); // Approximately 0.707
+    return dotProduct >= cos45Degrees;
+  }
+  registerObserver(observer) {
+    this.observer = observer;
+  }
+}
+// --- Inlined: GameRps.js ---
+const LEFT_HAND_INDEX = 0;
+const RIGHT_HAND_INDEX = 1;
+const countdownImages = [
+  'images/start1.webp',
+  'images/start2.webp',
+  'images/start3.webp',
+  'images/startGo.webp',
+];
+const rpsLeftImages = [
+  'images/gestureUnknown.webp',
+  'images/gestureFistLeft.webp',
+  'images/gestureScissorsLeft.webp',
+  'images/gesturePaperLeft.webp',
+];
+const rpsRightImages = [
+  'images/gestureUnknown.webp',
+  'images/gestureFistRight.webp',
+  'images/gestureScissorsRight.webp',
+  'images/gesturePaperRight.webp',
+];
+const resultImages = [
+  'images/resultTie.webp',
+  'images/resultWin.webp',
+  'images/resultLose.webp',
+];
+const gameOutcomePhrases = [
+  // Phrases for a draw
+  [
+    'A draw!',
+    "We've matched.",
+    'Great minds think alike.',
+    "It's a stalemate.",
+    "We're even.",
+    'Neither of us wins this time.',
+    "Looks like we're in sync.",
+    "We'll have to go again.",
+    'A perfect match.',
+    "It's a tie.",
+  ],
+  // Phrases for a Gemeni lose
+  [
+    'You got me.',
+    'Nicely done, you win.',
+    'Ah, you were one step ahead.',
+    'The victory is yours.',
+    "I'll have to get you next time.",
+    "You've defeated me.",
+    "I couldn't beat that.",
+    'Well played, you earned it.',
+    'You read my mind.',
+    'The point goes to you.',
+  ],
+  // Phrases for a Gemini victory
+  [
+    'Victory is mine!',
+    'I got you that time.',
+    'Looks like I came out on top.',
+    "I'll take that win.",
+    'Another one for my column.',
+    "You've been bested.",
+    'I predicted your move perfectly.',
+    "That's how it's done.",
+    'I have the winning strategy.',
+    'The round goes to me.',
+  ],
+];
+class GameRps extends xb.Script {
+  constructor() {
+    super();
+    // List of detected gestures for the left and right hands.
+    this.handGesture = [[], []];
+    this.isDebug = false;
+    //
+    // Initializes UI.
+    //
+    {
+      // Makes a root panel > grid > row > controlPanel > grid.
+      const panel = new xb.SpatialPanel({
+        backgroundColor: '#00000000',
+        useDefaultPosition: false,
+        showEdge: false,
+      });
+      panel.scale.set(panel.width, panel.height, 1);
+      panel.isRoot = true;
+      this.add(panel);
+      const grid = panel.addGrid();
+      // Adds blank space on top of the ctrlPanel.
+      this.startImageRow = grid.addRow({weight: 0.4});
+      this.startImageRow.addCol({weight: 0.3});
+      this.startImage = this.startImageRow.addCol({weight: 0.4}).addImage({
+        src: 'images/startStart.webp',
+      });
+      this.startImageRow.addCol({weight: 0.3});
+      if (this.isDebug) {
+        //
+        // UI to debug user gestures.
+        //
+        this.playImageRow = grid.addRow({weight: 0.2});
+        this.playImageRow.addCol({weight: 0.2});
+        this.imageGesture1 = this.playImageRow.addCol({weight: 0.2}).addImage({
+          src: 'images/gestureEmpty.webp',
+        });
+        // VS text
+        this.playImageRow.addCol({weight: 0.2}).addImage({
+          src: 'images/resultVS.webp',
+        });
+        this.imageGesture2 = this.playImageRow.addCol({weight: 0.2}).addImage({
+          src: 'images/gestureEmpty.webp',
+        });
+        this.playImageRow.addCol({weight: 0.3});
+        this.playImageRow.hide();
+        this.resultImageRow = grid.addRow({weight: 0.2});
+        this.resultImageRow.addCol({weight: 0.4});
+        this.resultImage = this.resultImageRow.addCol({weight: 0.2}).addImage({
+          src: 'images/gestureEmpty.webp',
+        });
+        this.resultImageRow.hide();
+      }
+      // Space for orbiter
+      grid.addRow({weight: 0.1});
+      // control row
+      const controlRow = grid.addRow({weight: 0.5});
+      const ctrlPanel = controlRow.addPanel({backgroundColor: '#000000bb'});
+      const ctrlGrid = ctrlPanel.addGrid();
+      {
+        // middle column
+        const midColumn = ctrlGrid.addCol({weight: 0.9});
+        // top indentation
+        midColumn.addRow({weight: 0.1});
+        const gesturesRow = midColumn.addRow({weight: 0.4});
+        // left indentation
+        gesturesRow.addCol({weight: 0.05});
+        const textCol = gesturesRow.addCol({weight: 1.0});
+        this.textField1 = textCol.addRow({weight: 1.0}).addText({
+          text: "Let's play Rock-Paper-Scissors!",
+          fontColor: '#ffffff',
+          fontSize: 0.045,
+        });
+        this.textField2 = textCol.addRow({weight: 1.0}).addText({
+          text: 'Do a thumbs-up gesture to get started!',
+          fontColor: '#ffffff',
+          fontSize: 0.045,
+        });
+        // right indentation
+        gesturesRow.addCol({weight: 0.01});
+        // bottom indentation
+        midColumn.addRow({weight: 0.1});
+      }
+      const orbiter = ctrlGrid.addOrbiter();
+      orbiter.addExitButton();
+      panel.updateLayouts();
+      this.panel = panel;
+      // Gesture detector
+      this.gestureDetectionHandler = new GestureDetectionHandler();
+      this.gestureDetectionHandler.registerObserver(this);
+    }
+    // state for 1-2-3-GO
+    this.state = 0;
+    // delay for 1-2-3-GO
+    this.delayMs = this.isDebug ? 400 : 800;
+    // Wait for 2.5 sec to enable game restart
+    this.gameRestartTimeout = this.isDebug ? 1000 : 2500;
+    this.gameGestureDetectionTimeout = this.isDebug ? 900 : 2500;
+    // The gesture detection start time
+    this.gestureStartTime = 0;
+    // Frame counter
+    this.frameId = 0;
+    // Play states for both left and right hands
+    this.handRpsStates = [[], []];
+    // 1-2-3-GO
+    this.displayNextImage = this.displayNextImage.bind(this);
+  }
+  displayNextImage() {
+    if (this.state < countdownImages.length) {
+      // Load and display the current image
+      this.startImage.load(countdownImages[this.state]);
+      this.state++; // Move to the next image for the next call
+      // Schedule the next image display after the delay
+      setTimeout(this.displayNextImage, this.delayMs);
+    } else {
+      this.gestureStartTime = Date.now();
+      // Enable the papter detection/disable thumb up
+      this.gestureDetectionHandler.enablePaperGesture(true);
+      setTimeout(() => {
+        this.displayRandomGesture();
+      }, this.delayMs);
+    }
+  }
+  displayRandomGesture() {
+    this.randomGesture = Math.floor(Math.random() * 3) + 1;
+    if (this.isDebug) {
+      this.startImageRow.hide();
+      this.playImageRow.show();
+      this.resultImageRow.show();
+      // Load random gesture
+      this.imageGesture1.load(rpsLeftImages[this.randomGesture]);
+    } else {
+      this.startImage.load(rpsLeftImages[this.randomGesture]);
+    }
+  }
+  displayGameSummary(idx) {
+    let result = 2;
+    if (idx == 0) {
+      this.textField1.setText("I didn't catch what you threw! Let's retry!");
+      this.textField2.setText('Do a thumbs-up gesture when you are ready!');
+    } else {
+      let result = this.getRPSOutcome(this.randomGesture, idx);
+      this.textField1.setText(this.getRandomPhrase(result));
+      this.textField2.setText('Do a thumbs-up gesture to play more!');
+    }
+    //
+    // Debug UI - show game summary and user gesture
+    //
+    if (this.isDebug) {
+      // 'OTHER', 'FIST', 'VICTORY', 'PAPER'
+      this.imageGesture2.load(rpsRightImages[idx < 4 ? idx : 0]);
+      // Show user gesture
+      this.resultImage.load(resultImages[result]);
+    }
+  }
+  /**
+   * Determines the outcome of a Rock-Paper-Scissors game.
+   * @param {number} playerChoice - The player's choice (1: Rock, 2: Paper, 3: Scissors).
+   * @param {number} opponentChoice - The opponent's choice (1: Rock, 2: Paper, 3: Scissors).
+   * @returns {number} The outcome (0: Match, 1: Win, 2: Lose).
+   */
+  getRPSOutcome(playerChoice, opponentChoice) {
+    if (playerChoice === opponentChoice) {
+      return 0; // Match (Tie)
+    }
+    if (
+      (playerChoice === 1 && opponentChoice === 3) || // Rock vs Scissors
+      (playerChoice === 2 && opponentChoice === 1) || // Paper vs Rock
+      (playerChoice === 3 && opponentChoice === 2) // Scissors vs Paper
+    ) {
+      return 1; // Win
+    } else {
+      return 2; // Lose (all other cases are losses)
+    }
+  }
+  startGame() {
+    if (this.isDebug) {
+      // Show 1-2-3-GO
+      this.startImageRow.show();
+      // Reset result images
+      this.imageGesture1.load('images/gestureEmpty.webp');
+      this.imageGesture2.load('images/gestureEmpty.webp');
+      this.resultImage.load('images/gestureEmpty.webp');
+      // hide result
+      this.playImageRow.hide();
+      this.resultImageRow.hide();
+    }
+    this.textField1.setText('');
+    // start timer for the 1-2-3-go
+    this.displayNextImage();
+  }
+  onGestureDetected(handIndex, result) {
+    // Thumb up
+    if (result == 4) {
+      // Ensure the game isn't currently active.
+      if (this.state === 0) {
+        this.startGame();
+      }
+      return;
+    }
+    if (this.gestureStartTime === 0) {
+      // skip all late gesture detections
+      return;
+    }
+    // Record all gesture changes for the
+    let delta = Date.now() - this.gestureStartTime;
+    //
+    // Gesture detection time interval exceeded
+    //
+    if (delta > this.gameGestureDetectionTimeout) {
+      this.gestureStartTime = 0;
+      this.detectFinalGestures();
+    } else {
+      let len = this.handRpsStates[handIndex].length;
+      if (
+        len == 0 ||
+        (this.handGesture[handIndex][len - 1] &&
+          this.handGesture[handIndex][len - 1].gesture !== result)
+      ) {
+        // Save gesture-duration for each hand
+        this.handRpsStates[handIndex].push({gesture: result, delta: delta});
+        this.handGesture[handIndex] = result;
+      }
+    }
+  }
+  detectFinalGestures() {
+    this.rightHandGesture = this.detectRPSGesture(
+      this.handRpsStates[RIGHT_HAND_INDEX]
+    );
+    this.displayGameSummary(this.rightHandGesture);
+    // Reset cached states
+    this.handRpsStates = [[], []];
+    // Disable the papter detection. Enable thumb up
+    this.gestureDetectionHandler.enablePaperGesture(false);
+    // add delay before user could re-start the game
+    setTimeout(() => {
+      // Ready to play again
+      this.state = 0;
+    }, this.gameRestartTimeout);
+  }
+  detectRPSGesture(handRpsStates, options = {}) {
+    const defaultOptions = {
+      stabilityDurationMs: 300,
+      initialRockIgnoreDurationMs: 300,
+      maxDetectionWindowMs: this.gameGestureDetectionTimeout,
+    };
+    const {maxDetectionWindowMs} = {...defaultOptions, ...options};
+    if (!handRpsStates || handRpsStates.length === 0) {
+      return 0; // Other
+    }
+    handRpsStates.sort((a, b) => a.delta - b.delta);
+    const firstPhaseEndMs = maxDetectionWindowMs * (2 / 5);
+    const secondPhaseStartMs = maxDetectionWindowMs * (2 / 5);
+    let rockStartedInFirstPhase = false;
+    const gestureDurations = new Map();
+    let prevDelta = 0;
+    let prevGesture = 0;
+    for (let i = 0; i < handRpsStates.length; i++) {
+      const {gesture, delta} = handRpsStates[i];
+      if (delta > maxDetectionWindowMs) {
+        break;
+      }
+      const duration = delta - prevDelta;
+      if (prevGesture !== 0 && prevGesture > 0 && prevGesture < 4) {
+        gestureDurations.set(
+          prevGesture,
+          (gestureDurations.get(prevGesture) || 0) + duration
+        );
+      }
+      if (gesture === 1 && delta <= firstPhaseEndMs) {
+        rockStartedInFirstPhase = true;
+      }
+      prevDelta = delta;
+      prevGesture = gesture;
+    }
+    if (
+      prevDelta < maxDetectionWindowMs &&
+      prevGesture !== 0 &&
+      prevGesture > 0 &&
+      prevGesture < 4
+    ) {
+      const remainingDuration = maxDetectionWindowMs - prevDelta;
+      gestureDurations.set(
+        prevGesture,
+        (gestureDurations.get(prevGesture) || 0) + remainingDuration
+      );
+    }
+    let longestGesture = 0;
+    let maxDuration = 0;
+    const minRequiredDuration = 300;
+    let effectiveStartTime = 0;
+    let effectiveEndTime = maxDetectionWindowMs;
+    if (rockStartedInFirstPhase) {
+      effectiveStartTime = secondPhaseStartMs;
+    }
+    const filteredGestureDurations = new Map();
+    let currentWindowPrevDelta = effectiveStartTime;
+    let currentWindowPrevGesture = 0;
+    for (let i = 0; i < handRpsStates.length; i++) {
+      const {gesture, delta} = handRpsStates[i];
+      if (delta >= effectiveStartTime) {
+        currentWindowPrevGesture = prevGesture;
+        if (i > 0) {
+          currentWindowPrevGesture = handRpsStates[i - 1].gesture;
+        } else {
+          currentWindowPrevGesture = gesture;
+        }
+        break;
+      }
+      prevGesture = gesture;
+    }
+    for (let i = 0; i < handRpsStates.length; i++) {
+      const {gesture, delta} = handRpsStates[i];
+      if (delta < effectiveStartTime) {
+        currentWindowPrevDelta = delta;
+        currentWindowPrevGesture = gesture;
+        continue;
+      }
+      if (delta > effectiveEndTime) {
+        const duration = Math.max(
+          0,
+          effectiveEndTime -
+            Math.max(currentWindowPrevDelta, effectiveStartTime)
+        );
+        if (
+          currentWindowPrevGesture !== 0 &&
+          currentWindowPrevGesture > 0 &&
+          currentWindowPrevGesture < 4
+        ) {
+          filteredGestureDurations.set(
+            currentWindowPrevGesture,
+            (filteredGestureDurations.get(currentWindowPrevGesture) || 0) +
+              duration
+          );
+        }
+        break;
+      }
+      const segmentStart = Math.max(currentWindowPrevDelta, effectiveStartTime);
+      const segmentEnd = delta;
+      const duration = segmentEnd - segmentStart;
+      if (
+        currentWindowPrevGesture !== 0 &&
+        currentWindowPrevGesture > 0 &&
+        currentWindowPrevGesture < 4
+      ) {
+        filteredGestureDurations.set(
+          currentWindowPrevGesture,
+          (filteredGestureDurations.get(currentWindowPrevGesture) || 0) +
+            duration
+        );
+      }
+      currentWindowPrevDelta = delta;
+      currentWindowPrevGesture = gesture;
+    }
+    if (
+      currentWindowPrevDelta < effectiveEndTime &&
+      currentWindowPrevGesture !== 0 &&
+      currentWindowPrevGesture > 0 &&
+      currentWindowPrevGesture < 4
+    ) {
+      const remainingDuration =
+        effectiveEndTime - Math.max(currentWindowPrevDelta, effectiveStartTime);
+      filteredGestureDurations.set(
+        currentWindowPrevGesture,
+        (filteredGestureDurations.get(currentWindowPrevGesture) || 0) +
+          remainingDuration
+      );
+    }
+    for (const [gesture, duration] of filteredGestureDurations.entries()) {
+      if (gesture !== 0 && duration >= minRequiredDuration) {
+        if (duration > maxDuration) {
+          maxDuration = duration;
+          longestGesture = gesture;
+        }
+      }
+    }
+    return longestGesture;
+  }
+  /**
+   * Initializes the PaintScript.
+   */
+  init() {
+    xb.core.renderer.localClippingEnabled = true;
+    this.add(new THREE.HemisphereLight(0x888877, 0x777788, 3));
+    const light = new THREE.DirectionalLight(0xffffff, 5.0);
+    light.position.set(-0.5, 4, 1.0);
+    this.add(light);
+    this.panel.position.set(0, xb.core.user.height, -1.0);
+  }
+  async update() {
+    //
+    // Run gesture detection 12 times per second for ~60fps
+    // But an avg fps for webxr is 30-60
+    //
+    if (this.frameId % 5 === 0) {
+      const hands = xb.core.user.hands;
+      if (hands.isValid()) {
+        this.gestureDetectionHandler.postTask(
+          hands.hands[LEFT_HAND_INDEX].joints,
+          LEFT_HAND_INDEX
+        );
+        this.gestureDetectionHandler.postTask(
+          hands.hands[RIGHT_HAND_INDEX].joints,
+          RIGHT_HAND_INDEX
+        );
+      }
+    }
+    this.frameId++;
+  }
+  /**
+   * Selects a random phrase from a specified category of game outcomes.
+   * @param {number} categoryIndex - The index of the category.
+   * @returns {string|null} A randomly selected phrase.
+   */
+  getRandomPhrase(categoryIndex) {
+    if (categoryIndex < 0 || categoryIndex >= gameOutcomePhrases.length) {
+      console.error(
+        'Invalid category index provided. Please use 0 for victory, 1 for loss, or 2 for draw.'
+      );
+      return null;
+    }
+    const phrasesArray = gameOutcomePhrases[categoryIndex];
+    const randomIndex = Math.floor(Math.random() * phrasesArray.length);
+    return phrasesArray[randomIndex];
+  }
+}
+// --- Main entry point ---
+const options = new xb.Options();
+options.simulator.instructions.enabled = false;
+options.enableReticles();
+options.enableHands();
+options.simulator.defaultMode = xb.SimulatorMode.POSE;
+options.simulator.defaultHand = xb.Handedness.RIGHT;
+options.setAppTitle('Rock Paper Scissors');
+async function start() {
+  xb.add(new GameRps());
+  await xb.init(options);
+}
+document.addEventListener('DOMContentLoaded', function () {
+  setTimeout(function () {
+    start();
+  }, 200);
+});
+</script>
+  </body>
+</html>