@directivegames/genesys.sdk 3.2.2 → 3.2.5

package/src/templates/src/templates/vehicle/src/ui-hints.ts

@@ -1,101 +1,101 @@
-import * as ENGINE from 'genesys.js';
-
-/**
- * Dismissable UI component that displays control hints when the game starts
- */
-@ENGINE.GameClass()
-export class UIHints extends ENGINE.Actor {
-  private uiElement: ENGINE.UIElement | null = null;
-
-  constructor(options: ENGINE.ActorOptions = {}) {
-    super(options);
-    this.setTransient(true); // Don't save this UI element to the level
-  }
-
-  protected override async doBeginPlay(): Promise<void> {
-    await super.doBeginPlay();
-    this.createHUD();
-  }
-
-  protected override doEndPlay(): void {
-    this.removeHUD();
-    super.doEndPlay();
-  }
-
-  private createHUD(): void {
-    const uiManager = this.world!.uiManager;
-
-    // Create the UI element using the engine's UI system
-    this.uiElement = uiManager.createElement('game-hints', {
-      style: {
-        position: 'absolute',
-        top: '50px',
-        right: '50px',
-        background: 'rgba(0, 0, 0, 0.9)',
-        color: 'white',
-        padding: '25px',
-        borderRadius: '12px',
-        fontFamily: 'Arial, sans-serif',
-        fontSize: '16px',
-        lineHeight: '1.5',
-        maxWidth: '400px',
-        border: '2px solid rgba(76, 175, 80, 0.6)',
-        boxShadow: '0 8px 32px rgba(0, 0, 0, 0.8)',
-        zIndex: '1001'
-      }
-    });
-
-    // Set the HTML content
-    this.uiElement.setHTML(`
-      <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px;">
-        <div style="font-weight: bold; color: #4CAF50; font-size: 18px;">
-          🎮 Vehicle Game Controls
-        </div>
-        <button id="closeHints" style="
-          background: #f44336;
-          color: white;
-          border: none;
-          border-radius: 50%;
-          width: 30px;
-          height: 30px;
-          cursor: pointer;
-          font-size: 16px;
-          font-weight: bold;
-        ">×</button>
-      </div>
-      <div style="margin-bottom: 12px;">
-        <span style="color: #FFA726; font-weight: bold;">Movement:</span>
-        <br>• WASD or Arrow Keys - Move/Drive
-        <br>• Mouse - Camera control
-      </div>
-      <div style="margin-bottom: 12px;">
-        <span style="color: #FFA726; font-weight: bold;">Vehicle Interaction:</span>
-        <br>• E - Enter/Exit vehicle (when nearby)
-        <br>• F - Flip vehicle (when inside)
-      </div>
-      <div style="font-size: 14px; color: #CCCCCC; margin-top: 15px; text-align: center; font-style: italic;">
-        💡 Walk near a vehicle and press E to enter
-      </div>
-    `);
-
-    // Add close button functionality
-    const closeButton = this.uiElement.querySelector('#closeHints') as HTMLButtonElement;
-    if (closeButton) {
-      closeButton.addEventListener('click', () => {
-        this.removeHUD();
-      });
-    }
-
-    // Auto-close after 10 seconds
-    setTimeout(() => {
-      this.removeHUD();
-    }, 10000);
-  }
-
-  private removeHUD(): void {
-    if (this.uiElement) {
-      this.uiElement.remove();
-      this.uiElement = null;
-    }
-  }
-}
+import * as ENGINE from '@directivegames/genesys.js';
+
+/**
+ * Dismissable UI component that displays control hints when the game starts
+ */
+@ENGINE.GameClass()
+export class UIHints extends ENGINE.Actor {
+  private uiElement: ENGINE.UIElement | null = null;
+
+  constructor(options: ENGINE.ActorOptions = {}) {
+    super(options);
+    this.setTransient(true); // Don't save this UI element to the level
+  }
+
+  protected override async doBeginPlay(): Promise<void> {
+    await super.doBeginPlay();
+    this.createHUD();
+  }
+
+  protected override doEndPlay(): void {
+    this.removeHUD();
+    super.doEndPlay();
+  }
+
+  private createHUD(): void {
+    const uiManager = this.world!.uiManager;
+
+    // Create the UI element using the engine's UI system
+    this.uiElement = uiManager.createElement('game-hints', {
+      style: {
+        position: 'absolute',
+        top: '50px',
+        right: '50px',
+        background: 'rgba(0, 0, 0, 0.9)',
+        color: 'white',
+        padding: '25px',
+        borderRadius: '12px',
+        fontFamily: 'Arial, sans-serif',
+        fontSize: '16px',
+        lineHeight: '1.5',
+        maxWidth: '400px',
+        border: '2px solid rgba(76, 175, 80, 0.6)',
+        boxShadow: '0 8px 32px rgba(0, 0, 0, 0.8)',
+        zIndex: '1001'
+      }
+    });
+
+    // Set the HTML content
+    this.uiElement.setHTML(`
+      <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px;">
+        <div style="font-weight: bold; color: #4CAF50; font-size: 18px;">
+          🎮 Vehicle Game Controls
+        </div>
+        <button id="closeHints" style="
+          background: #f44336;
+          color: white;
+          border: none;
+          border-radius: 50%;
+          width: 30px;
+          height: 30px;
+          cursor: pointer;
+          font-size: 16px;
+          font-weight: bold;
+        ">×</button>
+      </div>
+      <div style="margin-bottom: 12px;">
+        <span style="color: #FFA726; font-weight: bold;">Movement:</span>
+        <br>• WASD or Arrow Keys - Move/Drive
+        <br>• Mouse - Camera control
+      </div>
+      <div style="margin-bottom: 12px;">
+        <span style="color: #FFA726; font-weight: bold;">Vehicle Interaction:</span>
+        <br>• E - Enter/Exit vehicle (when nearby)
+        <br>• F - Flip vehicle (when inside)
+      </div>
+      <div style="font-size: 14px; color: #CCCCCC; margin-top: 15px; text-align: center; font-style: italic;">
+        💡 Walk near a vehicle and press E to enter
+      </div>
+    `);
+
+    // Add close button functionality
+    const closeButton = this.uiElement.querySelector('#closeHints') as HTMLButtonElement;
+    if (closeButton) {
+      closeButton.addEventListener('click', () => {
+        this.removeHUD();
+      });
+    }
+
+    // Auto-close after 10 seconds
+    setTimeout(() => {
+      this.removeHUD();
+    }, 10000);
+  }
+
+  private removeHUD(): void {
+    if (this.uiElement) {
+      this.uiElement.remove();
+      this.uiElement = null;
+    }
+  }
+}