Inspect tab: better formatting and displays

src/core/ui/tree-view/tree-view.scss

@@ -26,5 +26,13 @@
             color: $dark-gray;
             content: " =";
         }
+
+        &.inspect-expandable {
+            cursor: zoom-in;
+
+            &.expanded {
+                cursor: zoom-out;
+            }
+        }
     }
 }

src/core/ui/tree-view/tree-view.ts

@@ -76,7 +76,7 @@ export class TreeView extends BaseElement {
         if (Array.isArray(value)) {
             formatted = `Array[${value.length}]`;
         }
-        else if (typeof value === "object") {
+        else if (isObject(value)) {
             formatted = "Object";
         }
 
@@ -108,12 +108,15 @@ export class TreeView extends BaseElement {
             node.$element.attr("data-inspect-key", fullKey);
 
             if (isObject(value)) {
+                node.$header.addClass("inspect-expandable");
                 const onClick = () => {
                     this.deepDisplay(fullKey, value, node.$children);
+                    node.$header.addClass("expanded");
 
                     node.$header.one("click", () => {
                         node.$children.empty();
                         node.$header.one("click", onClick);
+                        node.$header.removeClass("expanded");
                     });
                 };
 

src/viseur/gui/info-pane/tabs/inspect-tab/inspect-tab.scss

@@ -23,8 +23,8 @@
         color: orange;
     }
 
-    &[data-inspect-type="object"] > header > .node-value {
-        color: teal;
+    &[data-inspect-type="map"] > header > .node-value {
+        color: red;
     }
 
     &[data-inspect-type="string"] > header > .node-value {
@@ -42,4 +42,13 @@
     &[data-inspect-type="boolean"] > header > .node-value {
         color: darkblue;
     }
+
+    &[data-inspect-type="null"] > header > .node-value {
+        color: blueviolet;
+        font-style: italic;
+    }
+
+    &[data-inspect-type="game-object"] > header > .node-value {
+        color: teal;
+    }
 }

src/viseur/gui/info-pane/tabs/inspect-tab/inspect-tab.ts

@@ -1,4 +1,5 @@
 import { ITabArgs, Tab } from "src/core/ui";
+import { IViseurGameState } from "src/viseur/game";
 import * as inspectTabHbs from "./inspect-tab.hbs";
 import "./inspect-tab.scss";
 import { InspectTreeView } from "./inspect-tree";
@@ -7,6 +8,12 @@ import { InspectTreeView } from "./inspect-tree";
  * The "Inspect" tab on the InfoPane
  */
 export class InspectTab extends Tab {
+    /** Our treeview we basically are. */
+    private readonly treeView: InspectTreeView;
+
+    /** The settings to display, they never change once set. */
+    private settings = {};
+
     /**
      * Creates the Inspect Tab.
      *
@@ -19,17 +26,28 @@ export class InspectTab extends Tab {
             ...args,
         });
 
-        const treeView = new InspectTreeView({
+        this.treeView = new InspectTreeView({
             parent: this.element.find(".inspect-tree-root"),
         });
 
-        args.viseur.events.stateChanged.on(({ game }) => {
-            treeView.display({
-                game: game as {}, // TODO: something sane
-                settings: args.viseur.rawGamelog
-                    ? args.viseur.rawGamelog.settings
-                    : null,
-            });
+        args.viseur.events.ready.once(({ gamelog }) => {
+            this.settings = gamelog.settings;
+            this.treeView.setGameName(gamelog.gameName);
+            this.refreshTree(args.viseur.getCurrentState());
+
+            args.viseur.events.stateChanged.on((state) => this.refreshTree(state));
+        });
+    }
+
+    /**
+     * Refreshes the tree to display a new state.
+     *
+     * @param state - The new game states to use to re-build the tree.
+     */
+    private refreshTree(state: IViseurGameState): void {
+        this.treeView.display({
+            game: state.game as {}, // TODO: something sane
+            settings: this.settings,
         });
     }
 }

src/viseur/gui/info-pane/tabs/inspect-tab/inspect-tree.ts

@@ -1,7 +1,34 @@
-import { ITreeViewNode, Treeable, TreeView } from "src/core/ui/tree-view";
+import { IBaseGame, IBaseGameObject, IBasePlayer } from "@cadre/ts-utils/cadre";
+import { ITreeViewNode, Treeable, TreeView } from "src/core/ui";
+import { isObject } from "src/utils";
+import { IBaseTile } from "src/viseur/game";
+
+function isGameObject(val: unknown): val is IBaseGameObject {
+    return isObject(val)
+        && typeof val.id === "string"
+        && typeof val.gameObjectName === "string";
+}
+
+function isGame(val: unknown): val is IBaseGame {
+    return isObject(val)
+        && isObject(val.gameObjects)
+        && Array.isArray(val.players);
+}
 
 /** A tree view for inspecting game states */
 export class InspectTreeView extends TreeView {
+    /** The name of the game we are inspecting */
+    private gameName = "???";
+
+    /**
+     * Sets the game name for the tree.
+     *
+     * @param gameName - The name of the game to use.
+     */
+    public setGameName(gameName: string): void {
+        this.gameName = gameName;
+    }
+
     /**
      * Gets the string to display as the value for a given node.
      *
@@ -10,12 +37,44 @@ export class InspectTreeView extends TreeView {
      * @returns Whatever string to display.
      */
     protected formatNodeValue(node: ITreeViewNode, value: Treeable): void {
-        const type = Array.isArray(value)
-            ? "array"
-            : typeof value;
+        let type = "???";
+        let displayValue = value;
+        if (Array.isArray(value)) {
+            type = "array";
+        }
+        else if (value === null) {
+            type = "null";
+        }
+        else if (isGameObject(value)) {
+            type = "game-object";
+
+            const gameObject = value as unknown as IBaseGameObject; // sketchy, but above check should it valid...
+            switch (gameObject.gameObjectName) {
+                case "Player":
+                    displayValue = `Player "${(gameObject as IBasePlayer).name}"`;
+                    break;
+                case "Tile":
+                    displayValue = `Tile (${(gameObject as IBaseTile).x}, ${(gameObject as IBaseTile).y})`;
+                    break;
+                default:
+                    displayValue = gameObject.gameObjectName;
+            }
+            displayValue += ` #${gameObject.id}`;
+        }
+        else if (isGame(value)) {
+            type = "game-object";
+            displayValue = `${this.gameName} Game`;
+        }
+        else if (isObject(value)) {
+            type = "map";
+            displayValue = `Map[${Object.keys(value).length}]`;
+        }
+        else {
+            type = typeof value;
+        }
 
         node.$element.attr("data-inspect-type", type);
 
-        super.formatNodeValue(node, value);
+        super.formatNodeValue(node, displayValue);
     }
 }