@stanko/kaplay-inspector 0.1.0 → 0.1.1

package/README.md

@@ -52,6 +52,12 @@ if (
 }
 ```
 
+If typescript is complaining about importing CSS files, you probably need to add this to one of your `.d.ts` files.
+
+```ts
+declare module '*.scss';
+```
+
 ### Options
 
 You can pass options object to the init method as a second parameter:
@@ -127,4 +133,3 @@ Same as with colors, be sure to have a higher specificity selector if inspector'
 * [ ] Filter/search
 * [ ] Persist search in URL or local storage
 * [ ] Collapse/Expand all button
-* [ ] Clean up `inspect-comps.tsx`

package/dist/components/boolean-comp.d.ts

@@ -0,0 +1,11 @@
+import type { GameObj } from "kaplay";
+type CheckboxCompProps = {
+    obj: GameObj;
+    propName: string;
+};
+export declare const useObjectBoolean: (obj: GameObj, propName: string) => {
+    checked: any;
+    onChange: (checked: boolean) => void;
+};
+export declare const BooleanComp: ({ obj, propName }: CheckboxCompProps) => import("preact").JSX.Element;
+export {};

package/dist/components/boolean-comp.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
+import { useEffect, useState } from "preact/hooks";
+export const useObjectBoolean = (obj, propName) => {
+    const [checked, setChecked] = useState(obj[propName]);
+    useEffect(() => {
+        setChecked(obj[propName]);
+    }, [obj[propName]]);
+    const onChange = (checked) => {
+        setChecked(checked);
+        obj[propName] = checked;
+    };
+    return {
+        checked,
+        onChange,
+    };
+};
+export const BooleanComp = ({ obj, propName }) => {
+    const id = `${propName}-${obj.id}`;
+    const { checked, onChange } = useObjectBoolean(obj, propName);
+    return (_jsxs("div", { class: "game-object__comps-row", children: [_jsx("label", { for: id, children: _jsx("b", { children: propName }) }), _jsx("div", { children: _jsx("input", { id: id, type: "checkbox", checked: checked, onChange: (e) => onChange(e.target.checked) }) })] }));
+};

package/dist/components/color-controls.d.ts

@@ -0,0 +1,6 @@
+import type { GameObj } from "kaplay";
+export interface ColorProps {
+    className?: string;
+    obj: GameObj;
+}
+export declare const Color: ({ obj }: ColorProps) => import("preact").JSX.Element;

package/dist/components/color-controls.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
+import { useEffect, useState } from "preact/hooks";
+import { cx } from "../lib/cx";
+const ColorSlider = ({ onChange, value, channel }) => {
+    const handleChange = (e) => {
+        const target = e.target;
+        onChange(channel, parseInt(target.value));
+    };
+    return (_jsx("input", { className: cx("color-controls__slider-input", `color-controls__slider-input--${channel}`), type: "range", min: "0", max: "255", value: value, onInput: handleChange }));
+};
+export const Color = ({ obj }) => {
+    const object = obj;
+    const { r, g, b } = object.color;
+    const [color, setColor] = useState({ r, g, b });
+    useEffect(() => {
+        setColor({ r, g, b });
+    }, [r, g, b]);
+    const updateColor = (channel, value) => {
+        const newColor = { ...color, [channel]: value };
+        setColor(newColor);
+        object.color[channel] = value;
+    };
+    return (_jsxs("div", { class: "color-controls", children: [_jsx("div", { class: "color-controls__swatch", style: { background: `rgb(${color.r} ${color.g} ${color.b})` } }), _jsxs("div", { children: [_jsx(ColorSlider, { value: color.r, onChange: updateColor, channel: "r" }), _jsx(ColorSlider, { value: color.g, onChange: updateColor, channel: "g" }), _jsx(ColorSlider, { value: color.b, onChange: updateColor, channel: "b" })] }), _jsxs("div", { children: ["rgb(", color.r, ", ", color.g, ", ", color.b, ")"] })] }));
+};

package/dist/components/game-object.js

@@ -5,6 +5,7 @@ import { cx } from "../lib/cx";
 import { drawBoundingBox } from "../lib/draw-bbox";
 import { getObjectInfo } from "../lib/get-object-info";
 import { Breadcrumbs } from "./breadcrumbs";
+import { BooleanComp } from "./boolean-comp";
 export const GameObject = ({ obj, className = "", isExpanded: isExpandedExternal = false, isRenderRoot, setRenderRoot, shouldDrawInspect, k, }) => {
     const [isExpanded, setIsExpanded] = useState(isExpandedExternal);
     const updateControllers = useRef([]);
@@ -54,5 +55,5 @@ export const GameObject = ({ obj, className = "", isExpanded: isExpandedExternal
             "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) }) })] }), _jsxs("div", { class: "game-object__comps-row", children: [_jsx("label", { for: `hidden-${obj.id}`, children: _jsx("b", { children: "hidden" }) }), _jsx("div", { children: _jsx("input", { id: `hidden-${obj.id}`, type: "checkbox", defaultChecked: obj.hidden, onChange: () => (obj.hidden = !obj.hidden) }) })] }), 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, shouldDrawInspect: shouldDrawInspect }, child.id))) }))] }, obj.id));
+                        }), onClick: handleToggleClick, children: [isExpanded ? (_jsx(MinusIcon, { className: "game-object__expand-icon" })) : (_jsx(PlusIcon, { className: "game-object__expand-icon" })), _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: [_jsx(BooleanComp, { obj: obj, propName: "paused" }), _jsx(BooleanComp, { obj: obj, propName: "hidden" }), 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, shouldDrawInspect: shouldDrawInspect }, child.id))) }))] }, obj.id));
 };

package/dist/components/hold-button.d.ts

@@ -0,0 +1,9 @@
+import type { JSX } from "preact/jsx-runtime";
+export type HoldButtonProps = {
+    children?: JSX.Element | string | number;
+    className?: string;
+    onClickAndHold: () => void;
+    interval?: number;
+    startRepeatingDelay?: number;
+};
+export declare const HoldButton: ({ children, className, onClickAndHold, interval, startRepeatingDelay, }: HoldButtonProps) => JSX.Element;

package/dist/components/hold-button.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx } from "preact/jsx-runtime";
+import { useEffect, useRef, useState } from "preact/hooks";
+export const HoldButton = ({ children, className, onClickAndHold, interval = 50, startRepeatingDelay = 200, }) => {
+    const intervalRef = useRef();
+    const timeoutRef = useRef();
+    const [isMouseDown, setIsMouseDown] = useState(false);
+    useEffect(() => {
+        document.addEventListener("mouseup", handleMouseUp);
+        return () => {
+            clearTimeout(timeoutRef.current);
+            clearInterval(intervalRef.current);
+            document.removeEventListener("mouseup", handleMouseUp);
+        };
+    }, []);
+    useEffect(() => {
+        clearTimeout(timeoutRef.current);
+        clearInterval(intervalRef.current);
+        if (isMouseDown) {
+            timeoutRef.current = setTimeout(() => {
+                intervalRef.current = setInterval(() => {
+                    onClickAndHold();
+                }, interval);
+            }, startRepeatingDelay);
+        }
+    }, [isMouseDown]);
+    const handleMouseDown = () => {
+        setIsMouseDown(true);
+    };
+    const handleMouseUp = () => {
+        setIsMouseDown(false);
+    };
+    return (_jsx("button", { className: className, onMouseDown: handleMouseDown, onClick: onClickAndHold, children: children }));
+};

package/dist/components/icons.d.ts

@@ -1,6 +1,10 @@
-export declare const PlusIcon: () => import("preact").JSX.Element;
-export declare const MinusIcon: () => import("preact").JSX.Element;
-export declare const ArrowUpIcon: () => import("preact").JSX.Element;
-export declare const ArrowDownIcon: () => import("preact").JSX.Element;
-export declare const ArrowLeftIcon: () => import("preact").JSX.Element;
-export declare const ArrowRightIcon: () => import("preact").JSX.Element;
+type IconProps = {
+    className?: string;
+};
+export declare const PlusIcon: ({ className }: IconProps) => import("preact").JSX.Element;
+export declare const MinusIcon: ({ className }: IconProps) => import("preact").JSX.Element;
+export declare const ArrowUpIcon: ({ className }: IconProps) => import("preact").JSX.Element;
+export declare const ArrowDownIcon: ({ className }: IconProps) => import("preact").JSX.Element;
+export declare const ArrowLeftIcon: ({ className }: IconProps) => import("preact").JSX.Element;
+export declare const ArrowRightIcon: ({ className }: IconProps) => import("preact").JSX.Element;
+export {};

package/dist/components/icons.js

@@ -1,19 +1,19 @@
 import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
-export const PlusIcon = () => {
-    return (_jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", xmlns: "http://www.w3.org/2000/svg", children: _jsxs("g", { fill: "none", "stroke-width": "1.25", stroke: "currentColor", "stroke-linejoin": "round", "stroke-linecap": "round", children: [_jsx("rect", { width: "14", height: "14", x: "1", y: "1", rx: "4" }), _jsx("path", { d: "M 8 4 V 12 M 4 8 H12" })] }) }));
+export const PlusIcon = ({ className = "" }) => {
+    return (_jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", xmlns: "http://www.w3.org/2000/svg", class: className, children: _jsxs("g", { fill: "none", "stroke-width": "1.25", stroke: "currentColor", "stroke-linejoin": "round", "stroke-linecap": "round", children: [_jsx("rect", { width: "14", height: "14", x: "1", y: "1", rx: "4" }), _jsx("path", { d: "M 8 4 V 12 M 4 8 H12" })] }) }));
 };
-export const MinusIcon = () => {
-    return (_jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsxs("g", { fill: "none", "stroke-width": "1.25", stroke: "currentColor", "stroke-linejoin": "round", "stroke-linecap": "round", children: [_jsx("rect", { width: "14", height: "14", x: "1", y: "1", rx: "4" }), _jsx("path", { d: "M 4 8 H 12" })] }) }));
+export const MinusIcon = ({ className = "" }) => {
+    return (_jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", class: className, children: _jsxs("g", { fill: "none", "stroke-width": "1.25", stroke: "currentColor", "stroke-linejoin": "round", "stroke-linecap": "round", children: [_jsx("rect", { width: "14", height: "14", x: "1", y: "1", rx: "4" }), _jsx("path", { d: "M 4 8 H 12" })] }) }));
 };
-export const ArrowUpIcon = () => {
-    return (_jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("g", { fill: "none", stroke: "currentColor", "stroke-linejoin": "round", "stroke-linecap": "round", children: _jsx("path", { d: "M 3 10 L 8 6 L 13 10" }) }) }));
+export const ArrowUpIcon = ({ className = "" }) => {
+    return (_jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", class: className, children: _jsx("g", { fill: "none", stroke: "currentColor", "stroke-linejoin": "round", "stroke-linecap": "round", children: _jsx("path", { d: "M 3 10 L 8 6 L 13 10" }) }) }));
 };
-export const ArrowDownIcon = () => {
-    return (_jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("g", { fill: "none", stroke: "currentColor", "stroke-linejoin": "round", "stroke-linecap": "round", children: _jsx("path", { d: "M 3 6 L 8 10 L 13 6" }) }) }));
+export const ArrowDownIcon = ({ className = "" }) => {
+    return (_jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", class: className, children: _jsx("g", { fill: "none", stroke: "currentColor", "stroke-linejoin": "round", "stroke-linecap": "round", children: _jsx("path", { d: "M 3 6 L 8 10 L 13 6" }) }) }));
 };
-export const ArrowLeftIcon = () => {
-    return (_jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("g", { fill: "none", stroke: "currentColor", "stroke-linejoin": "round", "stroke-linecap": "round", children: _jsx("path", { d: "M 10 3 L 6 8 L 10 13" }) }) }));
+export const ArrowLeftIcon = ({ className = "" }) => {
+    return (_jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", class: className, children: _jsx("g", { fill: "none", stroke: "currentColor", "stroke-linejoin": "round", "stroke-linecap": "round", children: _jsx("path", { d: "M 10 3 L 6 8 L 10 13" }) }) }));
 };
-export const ArrowRightIcon = () => {
-    return (_jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("g", { fill: "none", stroke: "currentColor", "stroke-linejoin": "round", "stroke-linecap": "round", children: _jsx("path", { d: "M 6 3 L 10 8 L 6 13" }) }) }));
+export const ArrowRightIcon = ({ className = "" }) => {
+    return (_jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", class: className, children: _jsx("g", { fill: "none", stroke: "currentColor", "stroke-linejoin": "round", "stroke-linecap": "round", children: _jsx("path", { d: "M 6 3 L 10 8 L 6 13" }) }) }));
 };

package/dist/components/inspector.js

@@ -1,6 +1,7 @@
 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";
+import { useObjectBoolean } from "./boolean-comp";
 const INTERVAL_OPTIONS = [
     { value: 100, label: "100ms" },
     { value: 250, label: "250ms" },
@@ -13,6 +14,7 @@ export const Inspector = ({ initUpdateTimeout = 250, isVisibleOnLoad = true, ini
     const [root, setRoot] = useState(k.getTreeRoot());
     const [renderIndex, setRenderIndex] = useState(0);
     const [isVisible, setIsVisible] = useState(isVisibleOnLoad);
+    const paused = useObjectBoolean(k.getTreeRoot(), "paused");
     // Force re-render every updateTimeout milliseconds
     useEffect(() => {
         const interval = setInterval(() => {
@@ -20,15 +22,15 @@ 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 handlePauseClick = () => {
+    //   const root = k.getTreeRoot();
+    //   root.paused = !root.paused;
+    // };
     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"] }), "\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", _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 }) })] }));
 };

package/dist/components/position-controls.js

@@ -1,9 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
 import { roundToDecimal } from "../lib/round-to-decimal";
+import { HoldButton } from "./hold-button";
 import { ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, } from "./icons";
 export const PositionControls = ({ obj }) => {
     if (!obj.pos) {
         return null;
     }
-    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, {}) })] }));
+    return (_jsxs("div", { class: "pos-controls", children: [_jsx(HoldButton, { className: "ki-btn", onClickAndHold: () => (obj.pos.x -= 1), children: _jsx(ArrowLeftIcon, {}) }), _jsx(HoldButton, { className: "ki-btn", onClickAndHold: () => (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(HoldButton, { className: "ki-btn", onClickAndHold: () => (obj.pos.y -= 1), children: _jsx(ArrowUpIcon, {}) }), _jsx(HoldButton, { className: "ki-btn", onClickAndHold: () => (obj.pos.y += 1), children: _jsx(ArrowDownIcon, {}) })] }));
 };

package/dist/components/sprite-controls.d.ts

@@ -0,0 +1,6 @@
+import type { GameObj } from "kaplay";
+export interface SpriteControlsProps {
+    className?: string;
+    obj: GameObj;
+}
+export declare const SpriteControls: ({ obj }: SpriteControlsProps) => import("preact").JSX.Element;

package/dist/components/sprite-controls.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "preact/jsx-runtime";
+export const SpriteControls = ({ obj }) => {
+    const object = obj;
+    const animation = object.getCurAnim();
+    return (_jsxs("div", { class: "sprite-controls", children: [_jsx("b", { children: object.sprite }), _jsxs("div", { children: ["frame: ", object.frame] }), animation && (_jsxs(_Fragment, { children: [_jsxs("div", { children: ["animation: ", animation.name] }), _jsxs("div", { children: ["animation frame: ", animation?.frameIndex] })] }))] }));
+};

package/dist/components/text-controls.js

@@ -1,9 +1,16 @@
 import { jsx as _jsx } from "preact/jsx-runtime";
+import { useEffect, useState } from "preact/hooks";
 export const TextControls = ({ obj }) => {
+    const [text, setText] = useState(obj.text);
+    useEffect(() => {
+        setText(obj.text);
+    }, [obj.text]);
     if (typeof obj.text !== "string") {
         return null;
     }
-    return (_jsx("div", { class: "text-controls", children: _jsx("input", { class: "text-controls__input", type: "text", placeholder: "Enter text", defaultValue: obj.text, onInput: (e) => {
-                obj.text = e.target.value;
-            } }) }));
+    const handleInput = (e) => {
+        obj.text = e.target.value;
+        setText(text);
+    };
+    return (_jsx("div", { class: "text-controls", children: _jsx("input", { class: "text-controls__input", type: "text", placeholder: "Enter text", value: text, onInput: handleInput }) }));
 };

package/dist/lib/inspect-comps.js

@@ -2,11 +2,13 @@ import { jsx as _jsx } from "preact/jsx-runtime";
 import { stringify } from "./stringify";
 import { PositionControls } from "../components/position-controls";
 import { TextControls } from "../components/text-controls";
-import { Sprite } from "../components/sprite";
+import { SpriteControls } from "../components/sprite-controls";
+import { Color } from "../components/color-controls";
 const componentMap = {
     pos: PositionControls,
     text: TextControls,
-    sprite: Sprite,
+    sprite: SpriteControls,
+    color: Color,
 };
 export const inspectComps = (obj) => {
     const object = obj;
@@ -30,6 +32,15 @@ export const inspectComps = (obj) => {
                 value: value ? value.replace(`${tag}: `, "") : "",
             });
         }
+        else {
+            data.push({
+                tag,
+                // Commented out on purpose
+                // For now, only the name of the component is shown,
+                // until I try it out and figure if it would be useful to display the full component state
+                // value: stringify(comp),
+            });
+        }
     }
     for (const [i, comp] of object._anonymousCompStates.entries()) {
         if (comp.inspect) {

package/dist/lib/stringify.js

@@ -1,6 +1,6 @@
 export const stringify = (obj, maxDepth = 1, currentDepth = 0) => {
     if (typeof obj !== "object" || obj === null) {
-        return obj.toString();
+        return JSON.stringify(obj);
     }
     const lines = Object.entries(obj).map(([key, value]) => {
         if (typeof value === "function") {

package/dist/styles.css

@@ -326,14 +326,49 @@
     outline: none;
     border-color: var(--ki-primary);
   }
-}
 
-/* Breadcrumbs */
+  /* Color */
+
+  .color-controls {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    width: fit-content;
+    min-width: 12rem;
+  }
 
-.breadcrumbs {
-  font-size: 0.75rem;
-  display: flex;
-  margin-bottom: 0.5rem;
-  gap: 0.5rem;
-  align-items: center;
+  .color-controls__swatch {
+    width: 2rem;
+    height: 2rem;
+    border-radius: 8px;
+    border: 1px solid var(--ki-border-light);
+  }
+
+  .color-controls__slider {
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+  }
+
+  .color-controls__slider-input--r {
+    accent-color: red;
+  }
+
+  .color-controls__slider-input--g {
+    accent-color: green;
+  }
+
+  .color-controls__slider-input--b {
+    accent-color: blue;
+  }
+
+  /* Breadcrumbs */
+
+  .breadcrumbs {
+    font-size: 0.75rem;
+    display: flex;
+    margin-bottom: 0.5rem;
+    gap: 0.5rem;
+    align-items: center;
+  }
 }

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

package/dist/components/sprite.d.ts

@@ -1,6 +0,0 @@
-import type { GameObj } from "kaplay";
-export interface SpriteProps {
-    className?: string;
-    obj: GameObj;
-}
-export declare const Sprite: ({ obj }: SpriteProps) => import("preact").JSX.Element;

package/dist/components/sprite.js

@@ -1,6 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "preact/jsx-runtime";
-export const Sprite = ({ obj }) => {
-    const object = obj;
-    const animation = object.getCurAnim();
-    return (_jsxs("div", { class: "sprite", children: [_jsx("b", { children: object.sprite }), _jsxs("div", { children: ["frame: ", object.frame] }), animation && (_jsxs(_Fragment, { children: [_jsxs("div", { children: ["animation: ", animation.name] }), _jsxs("div", { children: ["animation frame: ", animation?.frameIndex] })] }))] }));
-};