@stanko/kaplay-inspector 0.0.2 → 0.0.3

package/README.md

@@ -1,6 +1,6 @@
 # Kaplay Inspector
 
-A dev tool for [Kaplay](https://kaplayjs.com/) which allows you to explore and inspect the game object tree.
+A dev tool for [Kaplay](https://kaplayjs.com/) which allows you to explore and inspect the game object tree real time.
 
 ![Kaplay inspector in action](./public/screenshot.png)
 
@@ -56,7 +56,7 @@ You can pass options object to the init method as a second parameter:
 
 ```ts
 init(k, {
-  updateTimeout: 250,
+  updateTimeout: 100,
 })
 ```
 
@@ -64,18 +64,22 @@ available options are:
 
 ```ts
 interface InspectorOptions {
-  updateTimeout?: number; // in milliseconds
+  updateTimeout?: number; // in milliseconds, default: 100
+  isVisible?: boolean; // is inspector visible on load, default: true
+  className?: string; // optional CSS class to add to the root element
 }
 ```
 
 
 ## TODO
 
-* [ ] Show/Hide button
 * [ ] Bounding box - handle a case when anchor is a `Vec2`
 * [ ] Controllable theme - system/light/dark. At the moment it is always matching the system.
 * [ ] Filter/search
 * [ ] Persist search in URL or local storage
-* [ ] Build and deploy simple demo
 * [ ] Figure out why child bounding box are drawn in the wrong position
-* [ ] Check if all of CSS is namespaced
+* [ ] Add documentation about positioning the inspector
+* [ ] Collapse/Expand all button
+* [x] Check if all of CSS is namespaced
+* [x] Show/Hide button
+* [x] Build and deploy simple demo

package/dist/components/breadcrumbs.js

@@ -13,5 +13,5 @@ export const Breadcrumbs = ({ obj, setRenderRoot }) => {
         });
         parent = parent.parent;
     }
-    return (_jsxs("div", { class: "breadcrumbs", children: ["Back to", breadcrumbs.map((breadcrumb) => (_jsxs("button", { class: "btn", onClick: () => setRenderRoot(breadcrumb.object), children: ["ID ", breadcrumb.id, ": ", breadcrumb.tags || breadcrumb.compsLabel] })))] }));
+    return (_jsxs("div", { class: "breadcrumbs", children: ["Back to", breadcrumbs.map((breadcrumb) => (_jsxs("button", { class: "ki-btn", onClick: () => setRenderRoot(breadcrumb.object), children: ["ID ", breadcrumb.id, ": ", breadcrumb.tags || breadcrumb.compsLabel] })))] }));
 };

package/dist/components/game-object.js

@@ -34,9 +34,9 @@ export const GameObject = ({ obj, className = "", isExpanded: isExpandedExternal
     const handleMouseLeave = () => {
         mouseHoverController.current?.cancel();
     };
-    return (_jsxs("div", { class: cx("obj", className, {
-            "obj--no-children": !hasChildren,
-        }), children: [isInspecting && _jsx(Breadcrumbs, { setRenderRoot: setRenderRoot, obj: obj }), _jsxs("div", { class: "obj__content", onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, children: [_jsxs("button", { class: cx("obj__header", {
-                            "obj__header--expandable": showExpandTree,
-                        }), onClick: handleToggleClick, children: [_jsx("span", { class: "obj__expand-icon", children: isExpanded ? _jsx(MinusIcon, {}) : _jsx(PlusIcon, {}) }), _jsxs("div", { class: "obj__id", children: ["ID ", obj.id, ":"] }), tags ? (_jsx("div", { class: "obj__tags", children: isRootObject ? "Root" : tags })) : (_jsx("div", { class: "obj__comp-names", children: compsLabel })), obj.children.length > 0 && _jsxs("div", { children: ["(", obj.children.length, ")"] }), isObjectDestroyed && _jsx("div", { class: "obj__destroyed", children: "DESTROYED" })] }), _jsxs("div", { class: "obj__buttons", children: [!isRenderRoot && (_jsx("button", { class: "btn", onClick: () => setRenderRoot(obj), children: "inspect" })), _jsx("button", { class: "btn ", onClick: () => console.log(obj), children: "log" })] }), isExpanded && (_jsx("div", { class: "obj__comps-wrapper", children: _jsxs("div", { class: "obj__comps", children: [_jsxs("div", { class: "obj__comps-row", children: [_jsx("label", { for: `paused-${obj.id}`, children: _jsx("b", { children: "paused" }) }), _jsx("div", { children: _jsx("input", { id: `paused-${obj.id}`, type: "checkbox", defaultChecked: obj.paused, onChange: () => (obj.paused = !obj.paused) }) })] }), compsData.map((comp) => (_jsxs("div", { class: "obj__comps-row", children: [_jsx("div", { children: _jsx("b", { children: comp.tag }) }), _jsx("div", { children: comp.value })] }, comp.tag)))] }) }))] }), isExpanded && hasChildren && (_jsx("div", { class: "obj__children", style: { display: isExpanded ? "block" : "none" }, children: obj.children.map((child) => (_jsx(GameObject, { k: k, obj: child, setRenderRoot: setRenderRoot }, child.id))) }))] }, obj.id));
+    return (_jsxs("div", { class: cx("game-object", className, {
+            "game-object--no-children": !hasChildren,
+        }), children: [isInspecting && _jsx(Breadcrumbs, { setRenderRoot: setRenderRoot, obj: obj }), _jsxs("div", { class: "game-object__content", onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, children: [_jsxs("button", { class: cx("game-object__header", {
+                            "game-object__header--expandable": showExpandTree,
+                        }), onClick: handleToggleClick, children: [_jsx("span", { class: "game-object__expand-icon", children: isExpanded ? _jsx(MinusIcon, {}) : _jsx(PlusIcon, {}) }), _jsxs("div", { class: "game-object__id", children: ["ID ", obj.id, ":"] }), tags ? (_jsx("div", { class: "game-object__tags", children: isRootObject ? "Root" : tags })) : (_jsx("div", { class: "game-object__comp-names", children: compsLabel })), obj.children.length > 0 && _jsxs("div", { children: ["(", obj.children.length, ")"] }), isObjectDestroyed && (_jsx("div", { class: "game-object__destroyed", children: "DESTROYED" }))] }), _jsxs("div", { class: "game-object__buttons", children: [!isRenderRoot && (_jsx("button", { class: "ki-btn", onClick: () => setRenderRoot(obj), children: "inspect" })), _jsx("button", { class: "ki-btn ", onClick: () => console.log(obj), children: "log" })] }), isExpanded && (_jsx("div", { class: "game-object__comps-wrapper", children: _jsxs("div", { class: "game-object__comps", children: [_jsxs("div", { class: "game-object__comps-row", children: [_jsx("label", { for: `paused-${obj.id}`, children: _jsx("b", { children: "paused" }) }), _jsx("div", { children: _jsx("input", { id: `paused-${obj.id}`, type: "checkbox", defaultChecked: obj.paused, onChange: () => (obj.paused = !obj.paused) }) })] }), compsData.map((comp) => (_jsxs("div", { class: "game-object__comps-row", children: [_jsx("div", { children: _jsx("b", { children: comp.tag }) }), _jsx("div", { children: comp.value })] }, comp.tag)))] }) }))] }), isExpanded && hasChildren && (_jsx("div", { class: "game-object__children", style: { display: isExpanded ? "block" : "none" }, children: obj.children.map((child) => (_jsx(GameObject, { k: k, obj: child, setRenderRoot: setRenderRoot }, child.id))) }))] }, obj.id));
 };

package/dist/components/inspector.d.ts

@@ -3,4 +3,4 @@ import type { InspectorOptions } from "../init";
 export interface InspectorProps extends InspectorOptions {
     k: KAPLAYCtxT;
 }
-export declare const Inspector: ({ updateTimeout, k }: InspectorProps) => import("preact").JSX.Element;
+export declare const Inspector: ({ updateTimeout, isVisibleOnLoad, k, }: InspectorProps) => import("preact").JSX.Element;

package/dist/components/inspector.js

@@ -1,9 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "preact/jsx-runtime";
 import { useEffect, useState } from "preact/hooks";
 import { GameObject } from "./game-object";
-export const Inspector = ({ updateTimeout = 250, k }) => {
+export const Inspector = ({ updateTimeout = 250, isVisibleOnLoad = true, k, }) => {
     const [root, setRoot] = useState(k.getTreeRoot());
     const [renderIndex, setRenderIndex] = useState(0);
+    const [isVisible, setIsVisible] = useState(isVisibleOnLoad);
     // Force re-render every updateTimeout milliseconds
     useEffect(() => {
         const interval = setInterval(() => {
@@ -15,5 +16,11 @@ export const Inspector = ({ updateTimeout = 250, k }) => {
         const root = k.getTreeRoot();
         root.paused = !root.paused;
     };
-    return (_jsxs(_Fragment, { children: [_jsxs("div", { class: "exp__header", children: [_jsx("button", { class: "btn", onClick: handlePauseClick, children: "Pause/Resume" }), "\u2022", _jsxs("div", { children: [k.get("*", { recursive: true }).length, " objects"] }), "\u2022", _jsxs("div", { children: [Math.round(k.debug.fps()), " fps"] })] }), _jsx("div", { class: "exp__objects", children: _jsx(GameObject, { k: k, className: "obj--root", obj: root, setRenderRoot: setRoot, isExpanded: true, isRenderRoot: true }) })] }));
+    const toggleVisibility = () => {
+        setIsVisible(!isVisible);
+    };
+    if (!isVisible) {
+        return (_jsx("button", { class: "ki-btn k-inspector__show", onClick: toggleVisibility, children: "Show Inspector" }));
+    }
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { class: "k-inspector__header", children: [_jsx("button", { class: "ki-btn", onClick: handlePauseClick, children: "Pause/Resume" }), "\u2022", _jsxs("div", { children: [k.get("*", { recursive: true }).length, " objects"] }), "\u2022", _jsxs("div", { children: [Math.round(k.debug.fps()), " fps"] }), _jsx("button", { class: "ki-btn k-inspector__hide", onClick: toggleVisibility, children: "Hide" })] }), _jsx("div", { class: "k-inspector__objects", children: _jsx(GameObject, { k: k, className: "game-object--root", obj: root, setRenderRoot: setRoot, isExpanded: true, isRenderRoot: true }) })] }));
 };

package/dist/components/position-controls.js

@@ -5,5 +5,5 @@ export const PositionControls = ({ obj }) => {
     if (!obj.pos) {
         return null;
     }
-    return (_jsxs("div", { class: "pos-controls", children: [_jsx("button", { class: "btn", onClick: () => (obj.pos.x -= 1), children: _jsx(ArrowLeftIcon, {}) }), _jsx("button", { class: "btn", onClick: () => (obj.pos.x += 1), children: _jsx(ArrowRightIcon, {}) }), _jsxs("div", { class: "pos-controls__value", children: ["x: ", roundToDecimal(obj.pos.x, 2)] }), _jsxs("div", { class: "pos-controls__value", children: ["y: ", roundToDecimal(obj.pos.y, 2)] }), _jsx("button", { class: "btn", onClick: () => (obj.pos.y -= 1), children: _jsx(ArrowUpIcon, {}) }), _jsx("button", { class: "btn", onClick: () => (obj.pos.y += 1), children: _jsx(ArrowDownIcon, {}) })] }));
+    return (_jsxs("div", { class: "pos-controls", children: [_jsx("button", { class: "ki-btn", onClick: () => (obj.pos.x -= 1), children: _jsx(ArrowLeftIcon, {}) }), _jsx("button", { class: "ki-btn", onClick: () => (obj.pos.x += 1), children: _jsx(ArrowRightIcon, {}) }), _jsxs("div", { class: "pos-controls__value", children: ["x: ", roundToDecimal(obj.pos.x, 2)] }), _jsxs("div", { class: "pos-controls__value", children: ["y: ", roundToDecimal(obj.pos.y, 2)] }), _jsx("button", { class: "ki-btn", onClick: () => (obj.pos.y -= 1), children: _jsx(ArrowUpIcon, {}) }), _jsx("button", { class: "ki-btn", onClick: () => (obj.pos.y += 1), children: _jsx(ArrowDownIcon, {}) })] }));
 };

package/dist/init.d.ts

@@ -1,5 +1,7 @@
 import type { KAPLAYCtx } from "kaplay";
 export interface InspectorOptions {
     updateTimeout?: number;
+    isVisibleOnLoad?: boolean;
+    className?: string;
 }
 export default function init(k: KAPLAYCtx, props?: InspectorOptions): void;

package/dist/init.js

@@ -2,8 +2,11 @@ import { jsx as _jsx } from "preact/jsx-runtime";
 import { render } from "preact";
 import { Inspector } from "./components/inspector";
 export default function init(k, props = {}) {
+    const { 
+    //
+    className = "", updateTimeout = 100, isVisibleOnLoad = true, } = props;
     const appElement = document.createElement("div");
-    appElement.className = "exp";
+    appElement.className = `k-inspector ${className}`;
     document.body.appendChild(appElement);
-    render(_jsx(Inspector, { k: k, ...props }), appElement);
+    render(_jsx(Inspector, { k: k, updateTimeout: updateTimeout, isVisibleOnLoad: isVisibleOnLoad }), appElement);
 }

package/dist/styles.css

@@ -1,34 +1,34 @@
-.exp {
-  --exp-bg: rgb(250 250 250);
-  --exp-fg: rgb(25 25 25);
-  --exp-red: #d9174b;
-  --exp-gray-light: rgb(238 238 238);
-  --exp-gray-bg: rgb(244 244 244);
-  --exp-border: rgb(170 170 170);
-  --exp-border-light: rgb(210 210 210);
-
-  --exp-l: 0.62;
-  --exp-c: 0.2;
-  --exp-h: 250;
-  --exp-lch: var(--exp-l) var(--exp-c) var(--exp-h);
-  --exp-h-secondary: 150;
-  --exp-secondary-lch: var(--exp-l) var(--exp-c) var(--exp-h-secondary);
-
-  --exp-primary: oklch(var(--exp-lch));
-  --exp-primary-light: oklch(var(--exp-lch) / 0.1);
-  --exp-secondary: oklch(var(--exp-secondary-lch));
+.k-inspector {
+  --ki-bg: rgb(250 250 250);
+  --ki-fg: rgb(25 25 25);
+  --ki-red: #d9174b;
+  --ki-gray-light: rgb(238 238 238);
+  --ki-gray-bg: rgb(244 244 244);
+  --ki-border: rgb(170 170 170);
+  --ki-border-light: rgb(210 210 210);
+
+  --ki-l: 0.62;
+  --ki-c: 0.2;
+  --ki-h: 250;
+  --ki-lch: var(--ki-l) var(--ki-c) var(--ki-h);
+  --ki-h-secondary: 150;
+  --ki-secondary-lch: var(--ki-l) var(--ki-c) var(--ki-h-secondary);
+
+  --ki-primary: oklch(var(--ki-lch));
+  --ki-primary-light: oklch(var(--ki-lch) / 0.1);
+  --ki-secondary: oklch(var(--ki-secondary-lch));
 
   @media (prefers-color-scheme: dark) {
-    --exp-bg: rgb(30 30 30);
-    --exp-fg: rgb(230 230 230);
-    --exp-red: #ff4073;
-    --exp-gray-light: rgb(50 50 50);
-    --exp-gray-bg: rgb(40 40 40);
-    --exp-border: rgb(80 80 80);
-    --exp-border-light: rgb(60 60 60);
+    --ki-bg: rgb(30 30 30);
+    --ki-fg: rgb(230 230 230);
+    --ki-red: #ff4073;
+    --ki-gray-light: rgb(50 50 50);
+    --ki-gray-bg: rgb(40 40 40);
+    --ki-border: rgb(80 80 80);
+    --ki-border-light: rgb(60 60 60);
 
-    --exp-l: 0.7;
-    --exp-c: 0.15;
+    --ki-l: 0.7;
+    --ki-c: 0.15;
   }
 
   font-synthesis: none;
@@ -39,8 +39,8 @@
   bottom: 0;
   left: 0;
   width: 100%;
-  background-color: var(--exp-bg);
-  color: var(--exp-fg);
+  background-color: var(--ki-bg);
+  color: var(--ki-fg);
   max-height: 45vh;
   overflow: auto;
   font-family:
@@ -48,12 +48,11 @@
     "DejaVu Sans Mono", monospace;
   font-size: 0.875rem;
   scrollbar-width: thin;
-  scrollbar-color: var(--exp-border) transparent;
+  scrollbar-color: var(--ki-border) transparent;
   box-sizing: border-box;
   padding: 0;
   margin: 0;
   line-height: 1.2;
-  border-top: 1px solid var(--exp-gray-light);
 
   * {
     box-sizing: border-box;
@@ -65,7 +64,7 @@
   input,
   select,
   textarea {
-    accent-color: var(--exp-primary);
+    accent-color: var(--ki-primary);
     font: inherit;
     color: inherit;
   }
@@ -78,30 +77,32 @@
   }
 
   button:focus-visible {
-    outline: 2px solid var(--exp-primary);
+    outline: 2px solid var(--ki-primary);
   }
 
   button:active {
     transform: translateY(1px);
   }
 
-  .btn {
+  .ki-btn {
     padding: 0.25rem 0.375rem;
     font-size: 0.75rem;
     border-radius: 4px;
-    background-color: var(--exp-gray-light);
-    border: 1px solid var(--exp-border-light);
+    background-color: var(--ki-gray-light);
+    border: 1px solid var(--ki-border-light);
   }
 
-  .btn:hover {
-    border: 1px solid var(--exp-primary);
+  .ki-btn:hover {
+    border: 1px solid var(--ki-primary);
   }
 
   svg {
     display: block;
   }
 
-  .exp__header {
+  /* Main layout */
+
+  .k-inspector__header {
     position: sticky;
     top: 0;
     display: flex;
@@ -109,58 +110,69 @@
     padding: 0.5rem;
     align-items: center;
     z-index: 2;
-    background-color: var(--exp-bg);
-    border-bottom: 1px solid var(--exp-gray-light);
+    background-color: var(--ki-bg);
+    border-bottom: 1px solid var(--ki-gray-light);
+    border-top: 1px solid var(--ki-gray-light);
   }
 
-  .exp__objects {
+  .k-inspector__objects {
     padding: 0.5rem;
   }
 
+  .k-inspector__hide {
+    margin-left: auto;
+  }
+
+  .k-inspector__show {
+    position: fixed;
+    bottom: 0.5rem;
+    right: 0.5rem;
+  }
+
   /* Game object */
 
-  .obj {
+  .game-object {
     transition: background 500ms;
     position: relative;
   }
 
-  .obj .obj {
+  .game-object .game-object {
     padding-left: 1.5rem;
   }
 
-  .obj .obj::before,
-  .obj .obj__comps-wrapper::before {
+  .game-object .game-object::before,
+  .game-object .game-object__comps-wrapper::before {
     content: "";
     height: 100%;
     position: absolute;
     left: 0.75rem;
     top: 0;
-    border-left: 1px solid var(--exp-border);
+    border-left: 1px solid var(--ki-border);
   }
 
-  .obj .obj__comps-wrapper::before {
+  .game-object .game-object__comps-wrapper::before {
     left: -1rem;
   }
 
-  .obj .obj:last-child:before {
+  .game-object .game-object:last-child:before {
     height: 1rem;
   }
 
-  .obj--no-children .obj__comps-wrapper:last-child::before {
+  .game-object--no-children .game-object__comps-wrapper:last-child::before {
     display: none;
   }
 
-  .obj--root > .obj__content .obj__header::before {
+  .game-object--root > .game-object__content .game-object__header::before {
     display: none;
   }
 
-  .obj__content {
+  .game-object__content {
     position: relative;
   }
 
   /* Header */
 
-  .obj__header {
+  .game-object__header {
     position: relative;
     display: flex;
     padding: 0.25rem 0.25rem;
@@ -173,36 +185,36 @@
     outline-offset: 0;
 
     svg rect {
-      fill: var(--exp-bg);
+      fill: var(--ki-bg);
     }
   }
 
-  .obj__header:hover {
-    background-color: var(--exp-primary-light);
+  .game-object__header:hover {
+    background-color: var(--ki-primary-light);
   }
 
-  .obj__header::before {
+  .game-object__header::before {
     content: "";
     position: absolute;
     left: calc(-0.75rem);
     width: 0.75rem;
     top: 50%;
-    border-bottom: 1px solid var(--exp-border);
+    border-bottom: 1px solid var(--ki-border);
   }
 
   /* Header info and actions */
 
-  .obj__tags {
-    color: var(--exp-primary);
+  .game-object__tags {
+    color: var(--ki-primary);
     font-weight: bold;
   }
 
-  .obj__comp-names {
-    color: var(--exp-secondary);
+  .game-object__comp-names {
+    color: var(--ki-secondary);
     font-weight: bold;
   }
 
-  .obj__buttons {
+  .game-object__buttons {
     position: absolute;
     top: 0;
     right: 0;
@@ -212,37 +224,37 @@
     height: 2rem;
   }
 
-  .obj__destroyed {
-    color: var(--exp-red);
+  .game-object__destroyed {
+    color: var(--ki-red);
     font-weight: bold;
   }
 
   /* Expand tree button */
 
-  .obj__expand-icon {
+  .game-object__expand-icon {
     margin-right: 0.25rem;
   }
 
-  .obj__header:hover .obj__expand-icon {
-    color: var(--exp-primary);
+  .game-object__header:hover .game-object__expand-icon {
+    color: var(--ki-primary);
   }
 
   /* Comps */
 
-  .obj__comps-wrapper {
+  .game-object__comps-wrapper {
     position: relative;
     padding: 0.5rem 0;
     margin-left: 1.75rem;
   }
 
-  .obj__comps {
-    border: 1px solid var(--exp-border-light);
+  .game-object__comps {
+    border: 1px solid var(--ki-border-light);
     border-radius: 4px;
     overflow: hidden;
     font-size: 0.75rem;
   }
 
-  .obj__comps-row {
+  .game-object__comps-row {
     display: grid;
     align-items: center;
     padding: 0.375rem 0.5rem;
@@ -254,13 +266,13 @@
     }
   }
 
-  .obj__comps-row:nth-child(even) {
-    background-color: var(--exp-gray-bg);
+  .game-object__comps-row:nth-child(even) {
+    background-color: var(--ki-gray-bg);
   }
 
   /* Children */
 
-  .obj__children {
+  .game-object__children {
     padding-bottom: 1rem;
   }
 
@@ -274,7 +286,7 @@
     min-width: 12rem;
   }
 
-  .pos-controls__.btn,
+  .pos-controls .ki-btn,
   .pos-controls__value {
     flex-shrink: 0;
     text-align: center;
@@ -287,10 +299,10 @@
   /* Text Controls */
 
   .text-controls__input {
-    background-color: var(--exp-bg);
+    background-color: var(--ki-bg);
     border: none;
     padding: 0.25rem 0.375rem;
-    border: 1px solid var(--exp-border-light);
+    border: 1px solid var(--ki-border-light);
     font-size: 0.75rem;
     border-radius: 4px;
     width: 100%;
@@ -298,7 +310,7 @@
 
   .text-controls__input:focus-visible {
     outline: none;
-    border-color: var(--exp-primary);
+    border-color: var(--ki-primary);
   }
 }
 

package/package.json

@@ -1,7 +1,8 @@
 {
   "name": "@stanko/kaplay-inspector",
+  "description": "A dev tool for Kaplay which allows you to explore and inspect the game object tree real time.",
   "private": false,
-  "version": "0.0.2",
+  "version": "0.0.3",
   "type": "module",
   "main": "./dist/init.js",
   "types": "./dist/init.d.ts",