@stanko/kaplay-inspector 0.1.3 → 0.1.4

package/README.md

@@ -14,6 +14,7 @@ A dev tool for [Kaplay](https://kaplayjs.com/) which allows you to explore and i
 - Tweak position, text or color
 - Pause objects
 - Hide objects
+- Search for tags or comps
 - Dark theme (is this a feature?)
 
 The layout is made with desktop in mind. That said, it is somewhat usable on phones.

package/dist/components/inspector.js

@@ -1,19 +1,24 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "preact/jsx-runtime";
-import { useEffect, useState } from "preact/hooks";
+import { useEffect, useRef, useState } from "preact/hooks";
 import { GameObject } from "./game-object";
 import { useObjectBoolean } from "./boolean-comp";
+import { SearchResults } from "./search-results";
 const INTERVAL_OPTIONS = [
     { value: 100, label: "100ms" },
     { value: 250, label: "250ms" },
     { value: 500, label: "500ms" },
     { value: 1000, label: "1s" },
 ];
+const TYPING_TIMEOUT = 250;
 export const Inspector = ({ initUpdateTimeout = 250, isVisibleOnLoad = true, initDrawInspectOnHover = true, k, }) => {
     const [updateTimeout, setUpdateTimeout] = useState(initUpdateTimeout);
     const [shouldDrawInspect, setShouldDrawInspect] = useState(initDrawInspectOnHover);
     const [root, setRoot] = useState(k.getTreeRoot());
     const [renderIndex, setRenderIndex] = useState(0);
     const [isVisible, setIsVisible] = useState(isVisibleOnLoad);
+    const [searchTerm, setSearchTerm] = useState("");
+    const [searchResults, setSearchResults] = useState([]);
+    const typingTimeout = useRef();
     const paused = useObjectBoolean(k.getTreeRoot(), "paused");
     // Force re-render every updateTimeout milliseconds
     useEffect(() => {
@@ -22,15 +27,22 @@ export const Inspector = ({ initUpdateTimeout = 250, isVisibleOnLoad = true, ini
         }, updateTimeout);
         return () => clearInterval(interval);
     }, [renderIndex, updateTimeout]);
-    // const handlePauseClick = () => {
-    //   const root = k.getTreeRoot();
-    //   root.paused = !root.paused;
-    // };
     const toggleVisibility = () => {
         setIsVisible(!isVisible);
     };
+    const search = (term) => {
+        setSearchResults(k.get(term, { recursive: true, liveUpdate: true }));
+    };
+    const handleSearchInput = (e) => {
+        const term = e.target.value;
+        setSearchTerm(term);
+        clearTimeout(typingTimeout.current);
+        typingTimeout.current = setTimeout(() => {
+            search(term);
+        }, TYPING_TIMEOUT);
+    };
     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: () => paused.onChange(!paused.checked), children: paused.checked ? "Resume Game" : "Pause Game" }), "\u2022", _jsxs("div", { children: [k.get("*", { recursive: true }).length, " objects"] }), "\u2022", _jsxs("div", { children: [Math.round(k.debug.fps()), " fps"] }), "\u2022", _jsxs("div", { class: "k-inspector__interval", children: ["Update:", INTERVAL_OPTIONS.map((option) => (_jsxs("label", { children: [_jsx("input", { type: "radio", name: "interval", value: option.value, checked: updateTimeout === option.value, onChange: () => setUpdateTimeout(option.value) }), option.label] }, option.value)))] }), "\u2022", _jsxs("label", { children: [_jsx("input", { type: "checkbox", checked: shouldDrawInspect, onChange: () => setShouldDrawInspect(!shouldDrawInspect) }), "Draw bbox on hover"] }), _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, shouldDrawInspect: shouldDrawInspect, isExpanded: true, isRenderRoot: true }) })] }));
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { class: "k-inspector__header", children: [_jsx("button", { class: "ki-btn", onClick: () => paused.onChange(!paused.checked), children: paused.checked ? "Resume Game" : "Pause Game" }), "\u2022", _jsx("input", { placeholder: "Search tags or comps", type: "text", class: "ki-input", onInput: handleSearchInput }), "\u2022", _jsxs("div", { children: [k.get("*", { recursive: true }).length, " objects"] }), "\u2022", _jsxs("div", { children: [Math.round(k.debug.fps()), " fps"] }), "\u2022", _jsxs("div", { class: "k-inspector__interval", children: ["Update:", INTERVAL_OPTIONS.map((option) => (_jsxs("label", { children: [_jsx("input", { type: "radio", name: "interval", value: option.value, checked: updateTimeout === option.value, onChange: () => setUpdateTimeout(option.value) }), option.label] }, option.value)))] }), "\u2022", _jsxs("label", { children: [_jsx("input", { type: "checkbox", checked: shouldDrawInspect, onChange: () => setShouldDrawInspect(!shouldDrawInspect) }), "Draw bbox on hover"] }), _jsx("button", { class: "ki-btn k-inspector__hide", onClick: toggleVisibility, children: "Hide" })] }), _jsx("div", { class: "k-inspector__objects", children: searchTerm.length > 0 ? (_jsx(SearchResults, { k: k, results: searchResults, setRenderRoot: setRoot, shouldDrawInspect: shouldDrawInspect })) : (_jsx(GameObject, { k: k, className: "game-object--root", obj: root, setRenderRoot: setRoot, shouldDrawInspect: shouldDrawInspect, isExpanded: true, isRenderRoot: true })) })] }));
 };

package/dist/components/search-results.d.ts

@@ -0,0 +1,10 @@
+import type { GameObj } from "kaplay";
+import type { KAPLAYCtxType } from "../init";
+export interface SearchResultsProps {
+    k: KAPLAYCtxType;
+    className?: string;
+    results: GameObj[];
+    setRenderRoot: (obj: GameObj) => void;
+    shouldDrawInspect: boolean;
+}
+export declare const SearchResults: ({ k, results, setRenderRoot, shouldDrawInspect, }: SearchResultsProps) => import("preact").JSX.Element;

package/dist/components/search-results.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
+import { GameObject } from "./game-object";
+export const SearchResults = ({ k, results, setRenderRoot, shouldDrawInspect, }) => {
+    if (results.length === 0) {
+        return _jsx("div", { children: "No results found." });
+    }
+    return (_jsxs("div", { children: [results.map((result) => {
+                return (_jsx(GameObject, { k: k, className: "game-object--root", obj: result, setRenderRoot: setRenderRoot, shouldDrawInspect: shouldDrawInspect }));
+            }), " "] }));
+};

package/dist/styles.css

@@ -60,6 +60,10 @@
     margin: 0;
   }
 
+  svg {
+    display: block;
+  }
+
   button,
   input,
   select,
@@ -96,8 +100,18 @@
     border: 1px solid var(--ki-primary);
   }
 
-  svg {
-    display: block;
+  .ki-input {
+    background-color: var(--ki-bg);
+    border: none;
+    padding: 0.25rem 0.375rem;
+    border: 1px solid var(--ki-border-light);
+    font-size: 0.75rem;
+    border-radius: 4px;
+  }
+
+  .ki-input:focus-visible {
+    outline: none;
+    border-color: var(--ki-primary);
   }
 
   /* Main layout */
@@ -318,20 +332,9 @@
   /* Text Controls */
 
   .text-controls__input {
-    background-color: var(--ki-bg);
-    border: none;
-    padding: 0.25rem 0.375rem;
-    border: 1px solid var(--ki-border-light);
-    font-size: 0.75rem;
-    border-radius: 4px;
     width: 100%;
   }
 
-  .text-controls__input:focus-visible {
-    outline: none;
-    border-color: var(--ki-primary);
-  }
-
   /* Color */
 
   .color-controls {

package/package.json

@@ -2,7 +2,7 @@
   "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.1.3",
+  "version": "0.1.4",
   "type": "module",
   "main": "./dist/init.js",
   "types": "./dist/init.d.ts",