Add inspector (#3)

mcarlson · web-flow · commit 52c78ceba65f · 2025-05-08T16:16:43.000+02:00
* First attempt

* Add the expected HTML bits for all the new JS magic

---------

Co-authored-by: Max Carlson &lt;&gt;
diff --git a/Unity/SpaceCraft/Assets/StreamingAssets/SpaceCraft/spacecraft.js b/Unity/SpaceCraft/Assets/StreamingAssets/SpaceCraft/spacecraft.js
@@ -174,6 +174,12 @@ class SpaceCraftSim {
                 label: "Selector",
                 position: "top-right"
             },
+            {
+                id: "inspector-qr",
+                targetHtml: "StreamingAssets/SpaceCraft/inspector.html",
+                label: "Inspector",
+                position: "bottom-left" // Or another suitable position
+            },
         ];
         
         // Initialize content promise
diff --git a/WebSites/spacetime/StreamingAssets/SpaceCraft/controller.js b/WebSites/spacetime/StreamingAssets/SpaceCraft/controller.js
@@ -66,6 +66,9 @@
  * Base Controller class that provides common functionality for all controller types
  */
 window.BaseController = class BaseController {
+    selectedItemChanged(selectedItemJSON) {
+        // Base implementation does nothing. Subclasses like InspectorController will override.
+    }
     
     // API constants
     static SUPABASE_URL = 'https://gwodhwyvuftyrvbymmvc.supabase.co';
@@ -1883,6 +1886,7 @@ window.BaseController = class BaseController {
         // MAX: Log new selected item JSON if its ID has changed
         if (this.simulatorState.selectedItemId !== previousSelectedItemId) {
             this.logEvent('MAX', 'New selected item json (ID changed):', this.simulatorState.selectedItem);
+            this.selectedItemChanged(this.simulatorState.selectedItem);
         }
         
         this.updateUIFromState();
@@ -2408,7 +2412,9 @@ document.addEventListener('DOMContentLoaded', function() {
         controller = new NavigatorController();
     } else if (controllerType === 'selector') {
         controller = new SelectorController();
-        } else {
+    } else if (controllerType === 'inspector') { // ADD THIS BLOCK
+        controller = new InspectorController();
+    } else {
         console.error('Invalid controller type: ' + controllerType);
         return;
     }
@@ -2421,3 +2427,29 @@ document.addEventListener('DOMContentLoaded', function() {
     window.controller = controller;
 });
 
+window.InspectorController = class InspectorController extends BaseController {
+    constructor() {
+        super('inspector'); // Client type
+        this.jsonOutputElement = null;
+    }
+
+    setupControllerSpecificUI() {
+        this.logEvent('Init', 'Setting up Inspector-specific UI');
+        this.jsonOutputElement = document.getElementById('inspector-json-output');
+        if (!this.jsonOutputElement) {
+            this.logEvent('Error', 'Inspector JSON output element not found!');
+        }
+    }
+
+    // This method will be called when the selected item data changes
+    selectedItemChanged(selectedItemJSON) {
+        this.logEvent('Inspector', 'Received new selected item JSON:', selectedItemJSON);
+        if (this.jsonOutputElement) {
+            if (selectedItemJSON) {
+                this.jsonOutputElement.textContent = JSON.stringify(selectedItemJSON, null, 2);
+            } else {
+                this.jsonOutputElement.textContent = 'No item currently selected.';
+            }
+        }
+    }
+};
diff --git a/WebSites/spacetime/StreamingAssets/SpaceCraft/inspector.html b/WebSites/spacetime/StreamingAssets/SpaceCraft/inspector.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en-us">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+    <title>SpaceCraft Inspector</title>
+    <link rel="icon" href="https://brand.publiccode.net/logo/mark-128w128h.png">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no, viewport-fit=cover">
+    <meta name="controller-type" content="inspector">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css?family=Mulish:400italic,400,600italic,600,700italic,700" rel="stylesheet">
+    
+    <!-- Shared Controller Styles -->
+    <link rel="stylesheet" href="controller.css">
+    <!-- Supabase library (Local Copy) -->
+    <script src="supabase.min.js"></script>
+    <!-- Shared Controller Logic -->
+    <script src="controller.js"></script>
+  </head>
+  <body>
+    <div class="container selector-container">
+        <h1 class="page-title">Inspector</h1>
+        <div id="status" class="status">Connecting...</div>
+        <div id="target"></div>
+    </div>
+    <div id="inspector-json-output"></div>
+  </body>
+</html> 
