xrblocks 0.2.0 → 0.3.0

package/build/addons/simulator/instructions/SimulatorInstructionsCard.js

@@ -5,75 +5,75 @@ import { SimulatorInstructionsNextEvent, SimulatorInstructionsCloseEvent } from
 
 let SimulatorInstructionsCard = class SimulatorInstructionsCard extends LitElement {
     static { this.styles = css `
-      :host {
-          position: relative;
-          box-sizing: border-box;
-          background: #FFFFFF;
-          display: flex;
-          max-height: 100%;
-          overflow-y: auto;
-          height: 40rem;
-          width: min-content;
-          min-width: 30rem;
-          border-radius: 1.6rem;
-          color: #000000;
-          padding: 1.5rem;
-          flex-direction: column;
-      }
+    :host {
+      position: relative;
+      box-sizing: border-box;
+      background: #ffffff;
+      display: flex;
+      max-height: 100%;
+      overflow-y: auto;
+      height: 40rem;
+      width: min-content;
+      min-width: 30rem;
+      border-radius: 1.6rem;
+      color: #000000;
+      padding: 1.5rem;
+      flex-direction: column;
+    }
 
-      h1 {
-          margin-top: 0px;
-          font-size: 1.375rem;
-      }
+    h1 {
+      margin-top: 0px;
+      font-size: 1.375rem;
+    }
 
-      h2 {
-          margin-top: 0px;
-          margin-bottom: 0px;
-          font-size: 1.125rem;
-      }
+    h2 {
+      margin-top: 0px;
+      margin-bottom: 0px;
+      font-size: 1.125rem;
+    }
 
-      ul {
-          margin-top: 0px;
-          margin-bottom: 0px;
-      }
+    ul {
+      margin-top: 0px;
+      margin-bottom: 0px;
+    }
 
-      .image-div {
-          margin-top: 0.5rem;
-          margin-bottom: 0.5rem;
-      }
+    .image-div {
+      margin-top: 0.5rem;
+      margin-bottom: 0.5rem;
+    }
 
-      .description-div {
-          flex-grow: 1;
-      }
+    .description-div {
+      flex-grow: 1;
+    }
 
-      .close-button {
-          position: absolute;
-          right: 1.3rem;
-          top: 1.3rem;
-      }
+    .close-button {
+      position: absolute;
+      right: 1.3rem;
+      top: 1.3rem;
+    }
 
-      button {
-          align-self: flex-end;
-          width: min-content;
-          height: min-content;
-          font-size: 0.75rem;
-          background: rgb(48, 40, 34);
-          color: white;
-          border-radius: 1rem;
-          padding: 0.5rem 0.7rem;
-          border: none;
-      }
+    button {
+      align-self: flex-end;
+      width: min-content;
+      height: min-content;
+      font-size: 0.75rem;
+      background: rgb(48, 40, 34);
+      color: white;
+      border-radius: 1rem;
+      padding: 0.5rem 0.7rem;
+      border: none;
+    }
 
-      video {
-          max-width: 100%;
-          aspect-ratio: 16/9;
-      }
+    video {
+      max-width: 100%;
+      aspect-ratio: 16/9;
+    }
 
-      p {
-          margin-top: 0px;
-          margin-bottom: 0px;
-      }
-    `; }
+    p {
+      margin-top: 0px;
+      margin-bottom: 0px;
+    }
+  `; }
     continueButtonClicked() {
         this.dispatchEvent(new SimulatorInstructionsNextEvent());
     }
@@ -81,9 +81,7 @@ let SimulatorInstructionsCard = class SimulatorInstructionsCard extends LitEleme
         this.dispatchEvent(new SimulatorInstructionsCloseEvent());
     }
     getHeaderContents() {
-        return html `
-            <h1>Welcome to XR Blocks!</h1>
-        `;
+        return html ` <h1>Welcome to XR Blocks!</h1> `;
     }
     getImageContents() {
         return html ``;
@@ -93,18 +91,14 @@ let SimulatorInstructionsCard = class SimulatorInstructionsCard extends LitEleme
     }
     render() {
         return html `
-        <button class="close-button" @click=${this.closeButtonClicked}>X</button>
-        <div class="header-div">
-          ${this.getHeaderContents()}
-        </div>
-        <div class="image-div">
-          ${this.getImageContents()}
-        </div>
-        <div class="description-div">
-          ${this.getDescriptionContents()}
-        </div>
-        <button type="button" @click=${this.continueButtonClicked}>Continue</button>
-      `;
+      <button class="close-button" @click=${this.closeButtonClicked}>X</button>
+      <div class="header-div">${this.getHeaderContents()}</div>
+      <div class="image-div">${this.getImageContents()}</div>
+      <div class="description-div">${this.getDescriptionContents()}</div>
+      <button type="button" @click=${this.continueButtonClicked}>
+        Continue
+      </button>
+    `;
     }
 };
 SimulatorInstructionsCard = __decorate([

package/build/addons/simulator/instructions/SimulatorInstructionsEvents.js

@@ -7,7 +7,10 @@ class SimulatorInstructionsNextEvent extends Event {
 class SimulatorInstructionsCloseEvent extends Event {
     static { this.type = 'simulatorInstructionsCloseEvent'; }
     constructor() {
-        super(SimulatorInstructionsCloseEvent.type, { bubbles: true, composed: true });
+        super(SimulatorInstructionsCloseEvent.type, {
+            bubbles: true,
+            composed: true,
+        });
     }
 }
 

package/build/addons/simulator/instructions/UserInstructions.js

@@ -11,26 +11,29 @@ let UserInstructions = class UserInstructions extends SimulatorInstructionsCard
     getImageContents() {
         return html `
       <video playsinline autoplay muted loop>
-          <source
-            src=${SIMULATOR_USER_VIDEO_PATH}
-            type="video/webm">
-          Your browser does not support the video tag.
+        <source src=${SIMULATOR_USER_VIDEO_PATH} type="video/webm" />
+        Your browser does not support the video tag.
       </video>
     `;
     }
     getDescriptionContents() {
         return html `
-        <h2>User Mode</h2>
-        <p>
-          The simulator starts in <strong>User Mode</strong> by default.
-          This mode is for moving the camera and interacting directly with scene objects.
-        </p>
-        <ul>
-            <li><strong>Move Forward/Backward/Sideways:</strong> Use the W, A, S, D keys.</li>
-            <li><strong>Move Up/Down:</strong> Use the Q and E keys.</li>
-            <li><strong>Rotate Camera:</strong> Hold the right mouse button and drag.</li>
-            <li><strong>Select Object:</strong> Left-click the mouse.</li>
-        </ul>
+      <h2>User Mode</h2>
+      <p>
+        The simulator starts in <strong>User Mode</strong> by default. This mode
+        is for moving the camera and interacting directly with scene objects.
+      </p>
+      <ul>
+        <li>
+          <strong>Move Forward/Backward/Sideways:</strong> Use the W, A, S, D
+          keys.
+        </li>
+        <li><strong>Move Up/Down:</strong> Use the Q and E keys.</li>
+        <li>
+          <strong>Rotate Camera:</strong> Hold the right mouse button and drag.
+        </li>
+        <li><strong>Select Object:</strong> Left-click the mouse.</li>
+      </ul>
     `;
     }
 };

package/build/addons/simulator/ui/EnterXRButton.js

@@ -11,23 +11,23 @@ let EnterXRButton = class EnterXRButton extends LitElement {
     }
     static { this.styles = css `
     :host {
-        position: absolute;
-        bottom: 0;
-        left: 0;
+      position: absolute;
+      bottom: 0;
+      left: 0;
     }
 
     .mode-name-container {
-        border: none;
-        margin: 1rem;
-        border-radius: 5rem;
-        background:rgba(0, 0, 0, 0.5);
-        color: #FFF;
-        width: 10rem;
-        height: 3rem;
-        text-align: center;
-        vertical-align: middle;
-        line-height: 3rem;
-        font-size: 1.2em;
+      border: none;
+      margin: 1rem;
+      border-radius: 5rem;
+      background: rgba(0, 0, 0, 0.5);
+      color: #fff;
+      width: 10rem;
+      height: 3rem;
+      text-align: center;
+      vertical-align: middle;
+      line-height: 3rem;
+      font-size: 1.2em;
     }
   `; }
     setSimulatorMode(newMode) {
@@ -39,9 +39,9 @@ let EnterXRButton = class EnterXRButton extends LitElement {
     }
     render() {
         return html `
-        <button class="mode-name-container" @click=${this.onClick.bind(this)}>
-            Enter XR
-        </button>
+      <button class="mode-name-container" @click=${this.onClick.bind(this)}>
+        Enter XR
+      </button>
     `;
     }
 };

package/build/addons/simulator/ui/GeminiLiveApiKeyInput.js

@@ -11,53 +11,53 @@ let GeminiLiveApiKeyInput = class GeminiLiveApiKeyInput extends LitElement {
     }
     static { this.styles = css `
     :host {
-        position: absolute;
-        top: 10%;
-        left: 50%;
-        -webkit-transform: translate(-50%, -50%);
-        transform: translate(-50%, -50%);
-        z-index: 1000;
+      position: absolute;
+      top: 10%;
+      left: 50%;
+      -webkit-transform: translate(-50%, -50%);
+      transform: translate(-50%, -50%);
+      z-index: 1000;
     }
 
     .info-prompt {
-        width: 50rem;
-        display: flex;
-        background: #00000088;
-        margin: 1rem auto;
-        padding: 1rem;
-        border-radius: 1rem;
-        color: white;
-        font-size: 0.9rem;
-        line-height: 1.4;
-        text-align: center;
-        justify-content: center;
-        align-items: center;
-        border: 1px solid #333;
-        box-sizing: border-box;
+      width: 50rem;
+      display: flex;
+      background: #00000088;
+      margin: 1rem auto;
+      padding: 1rem;
+      border-radius: 1rem;
+      color: white;
+      font-size: 0.9rem;
+      line-height: 1.4;
+      text-align: center;
+      justify-content: center;
+      align-items: center;
+      border: 1px solid #333;
+      box-sizing: border-box;
     }
 
     .text-input {
-        display: block;
-        width: 20rem;
-        height: 3rem;
-        border-radius: 3rem;
-        background: #00000088;
-        border: none;
-        color: white;
-        padding: 0rem 1rem;
-        margin: 0 auto;
-        font-size: 0.9rem;
-        box-sizing: border-box;
+      display: block;
+      width: 20rem;
+      height: 3rem;
+      border-radius: 3rem;
+      background: #00000088;
+      border: none;
+      color: white;
+      padding: 0rem 1rem;
+      margin: 0 auto;
+      font-size: 0.9rem;
+      box-sizing: border-box;
     }
 
     .text-input::placeholder {
-        color: #aaa;
-        opacity: 1;
+      color: #aaa;
+      opacity: 1;
     }
 
     .text-input:focus {
-        outline: none;
-        border: 1px solid #555;
+      outline: none;
+      border: 1px solid #555;
     }
   `; }
     firstUpdated() {
@@ -71,10 +71,16 @@ let GeminiLiveApiKeyInput = class GeminiLiveApiKeyInput extends LitElement {
     }
     render() {
         return html `
-        <p class="info-prompt">
-            Gemini Key Required: Please paste your key from Google AI Studio below.
-        </p>
-        <input type="password" type="text" class="text-input" placeholder="Gemini Key" ${ref(this.textInputRef)}>
+      <p class="info-prompt">
+        Gemini Key Required: Please paste your key from Google AI Studio below.
+      </p>
+      <input
+        type="password"
+        type="text"
+        class="text-input"
+        placeholder="Gemini Key"
+        ${ref(this.textInputRef)}
+      />
     `;
     }
 };

package/build/addons/simulator/ui/HandPosePanel.js

@@ -30,8 +30,8 @@ let HandPosePanel = class HandPosePanel extends LitElement {
       border: none;
       margin: 1rem 0px;
       border-radius: 5rem;
-      background:rgba(0, 0, 0, 0.5);
-      color: #FFF;
+      background: rgba(0, 0, 0, 0.5);
+      color: #fff;
       max-width: 100%;
       width: fit-content;
       height: 3rem;
@@ -49,7 +49,7 @@ let HandPosePanel = class HandPosePanel extends LitElement {
     }
 
     .hand-pose-button {
-      color: #FFFFFF44;
+      color: #ffffff44;
       font-size: 1.2em;
       line-height: 3rem;
       background: transparent;
@@ -59,7 +59,7 @@ let HandPosePanel = class HandPosePanel extends LitElement {
     }
 
     .hand-pose-button.selected {
-      color: #FFFFFFFF;
+      color: #ffffffff;
     }
   `; }
     update(changedProperties) {
@@ -80,11 +80,17 @@ let HandPosePanel = class HandPosePanel extends LitElement {
             const poseName = xb.SIMULATOR_HAND_POSE_NAMES[pose];
             const classes = {
                 'hand-pose-button': true,
-                'selected': this.handPose === pose,
+                selected: this.handPose === pose,
             };
             const clickCall = () => this.sendHandPoseRequest(pose);
             buttons.push(html `
-        <button class=${classMap(classes)} @click = ${clickCall} data-pose=${pose}>${poseName}</button>
+        <button
+          class=${classMap(classes)}
+          @click=${clickCall}
+          data-pose=${pose}
+        >
+          ${poseName}
+        </button>
       `);
         }
         return buttons;
@@ -98,7 +104,11 @@ let HandPosePanel = class HandPosePanel extends LitElement {
             return;
         const selectedButton = handPosePanel.querySelector(`.hand-pose-button[data-pose=${this.handPose}]`);
         if (selectedButton) {
-            selectedButton.scrollIntoView({ behavior: 'smooth', inline: 'center', block: 'nearest' });
+            selectedButton.scrollIntoView({
+                behavior: 'smooth',
+                inline: 'center',
+                block: 'nearest',
+            });
         }
     }
     render() {
@@ -107,9 +117,9 @@ let HandPosePanel = class HandPosePanel extends LitElement {
         }
         const handPoseButtons = this.getHandPoseButtons();
         return html `
-    <div class="hand-pose-panel" ${ref(this.posePanelRef)}>
-      ${handPoseButtons}
-    </div>
+      <div class="hand-pose-panel" ${ref(this.posePanelRef)}>
+        ${handPoseButtons}
+      </div>
     `;
     }
 };

package/build/addons/simulator/ui/MicButton.js

@@ -11,27 +11,27 @@ let MicButton = class MicButton extends LitElement {
     }
     static { this.styles = css `
     .mic-input {
-        flex-grow: 0;
-        border-radius: 3rem;
-        width: 3rem;
-        height: 100%;
-        background: #00000088;
-        color: white;
-        border: none;
+      flex-grow: 0;
+      border-radius: 3rem;
+      width: 3rem;
+      height: 100%;
+      background: #00000088;
+      color: white;
+      border: none;
     }
 
     .mic-input-icon {
-        text-align: center;
-        line-height: 3rem;
-        width: 100%;
+      text-align: center;
+      line-height: 3rem;
+      width: 100%;
     }
 
     .material-symbols-outlined {
-        font-variation-settings:
+      font-variation-settings:
         'FILL' 0,
         'wght' 400,
         'GRAD' 0,
-        'opsz' 24
+        'opsz' 24;
     }
   `; }
     onMicButtonClicked() {
@@ -50,12 +50,17 @@ let MicButton = class MicButton extends LitElement {
             micInputStyle = this.getHaloCss();
         }
         return html `
-        <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0&icon_names=mic" />
-        <button class="mic-input" style=${micInputStyle} @click=${this.onMicButtonClicked.bind(this)}>
-            <span class="material-symbols-outlined mic-input-icon">
-                mic
-            </span>
-        </button>
+      <link
+        rel="stylesheet"
+        href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0&icon_names=mic"
+      />
+      <button
+        class="mic-input"
+        style=${micInputStyle}
+        @click=${this.onMicButtonClicked.bind(this)}
+      >
+        <span class="material-symbols-outlined mic-input-icon"> mic </span>
+      </button>
     `;
     }
 };

package/build/addons/simulator/ui/ModeIndicator.js

@@ -11,23 +11,23 @@ let SimulatorModeIndicator = class SimulatorModeIndicator extends LitElement {
     }
     static { this.styles = css `
     :host {
-        position: absolute;
-        bottom: 0;
-        right: 0;
+      position: absolute;
+      bottom: 0;
+      right: 0;
     }
 
     .mode-name-container {
-        border: none;
-        margin: 1rem;
-        border-radius: 5rem;
-        background:rgba(0, 0, 0, 0.5);
-        color: #FFF;
-        width: 10rem;
-        height: 3rem;
-        text-align: center;
-        vertical-align: middle;
-        line-height: 3rem;
-        font-size: 1.2em;
+      border: none;
+      margin: 1rem;
+      border-radius: 5rem;
+      background: rgba(0, 0, 0, 0.5);
+      color: #fff;
+      width: 10rem;
+      height: 3rem;
+      text-align: center;
+      vertical-align: middle;
+      line-height: 3rem;
+      font-size: 1.2em;
     }
   `; }
     getModeName() {
@@ -42,9 +42,9 @@ let SimulatorModeIndicator = class SimulatorModeIndicator extends LitElement {
     }
     render() {
         return html `
-        <button class="mode-name-container" @click=${this.onClick.bind(this)}>
-            ${this.getModeName()}
-        </button>
+      <button class="mode-name-container" @click=${this.onClick.bind(this)}>
+        ${this.getModeName()}
+      </button>
     `;
     }
 };

package/build/addons/ui/TextBillboard.js

@@ -15,7 +15,7 @@ class TextBillboard extends THREE.Object3D {
         this.text = text;
         this.font = font;
         this.textMaterial =
-            material ?? new THREE.MeshBasicMaterial({ color: 0xFFFFFF });
+            material ?? new THREE.MeshBasicMaterial({ color: 0xffffff });
         if (!font) {
             new FontLoader().load(DEFAULT_FONT_PATH, (font) => {
                 this.font = font;

package/build/addons/utils/Palette.js

@@ -10,23 +10,11 @@ class XRPalette {
      */
     constructor() {
         this.fullGColors_ = [
-            0x174EA6,
-            0xA50E0E,
-            0xE37400,
-            0x0D652D,
-            0x4285F4,
-            0xEA4335,
-            0xFBBC04,
-            0x34A853,
-            0xD2E3FC,
-            0xFAD2CF,
-            0xFEEFC3,
-            0xCEEAD6,
-            0xF1F3F4,
-            0x9AA0A6,
+            0x174ea6, 0xa50e0e, 0xe37400, 0x0d652d, 0x4285f4, 0xea4335, 0xfbbc04,
+            0x34a853, 0xd2e3fc, 0xfad2cf, 0xfeefc3, 0xceead6, 0xf1f3f4, 0x9aa0a6,
             0x202124,
         ];
-        this.liteGColors_ = [0xEA4335, 0x4285F4, 0x34AB53, 0xFBBC04];
+        this.liteGColors_ = [0xea4335, 0x4285f4, 0x34ab53, 0xfbbc04];
         this.lastRandomColor_ = null;
         if (XRPalette.instance) {
             return XRPalette.instance;