64 lines
1.7 KiB
TypeScript
64 lines
1.7 KiB
TypeScript
import { type Component, createSignal, onMount } from "solid-js";
|
|
import { render } from "solid-js/web";
|
|
import { setScale, viewport } from "#/engine/Viewport.ts";
|
|
import { RangeSlider } from "#/tools/controls/RangeSlider.tsx";
|
|
import style from "./main.module.css";
|
|
|
|
function adjustGameContainer(gameContainer: HTMLElement, width: number): void {
|
|
gameContainer.style = `position: relative; top: 0; left: ${width}px; width: ${document.body.offsetWidth - width}px;`;
|
|
}
|
|
|
|
const DevTools: Component<{ gameContainer: HTMLElement }> = ({
|
|
gameContainer,
|
|
}) => {
|
|
const [width, setWidth] = createSignal(320);
|
|
let isResizing = false;
|
|
|
|
const startResizing = (): void => {
|
|
isResizing = true;
|
|
};
|
|
|
|
const stopResizing = (): void => {
|
|
isResizing = false;
|
|
};
|
|
|
|
const handleMouseMove = (event: MouseEvent) => {
|
|
if (isResizing) {
|
|
setWidth(event.clientX);
|
|
self.dispatchEvent(new Event("resize"));
|
|
}
|
|
};
|
|
|
|
adjustGameContainer(gameContainer, width());
|
|
|
|
onMount(() => {
|
|
self.addEventListener("resize", () => {
|
|
adjustGameContainer(gameContainer, width());
|
|
});
|
|
self.dispatchEvent(new Event("resize"));
|
|
|
|
document.addEventListener("mousemove", handleMouseMove);
|
|
document.addEventListener("mouseup", stopResizing);
|
|
});
|
|
|
|
return (
|
|
<div class={style.devTools} style={{ width: `${width()}px` }}>
|
|
<div class={style.toolBar}>
|
|
<RangeSlider
|
|
name="scale"
|
|
min={1}
|
|
max={8}
|
|
step={1}
|
|
value={viewport.initialScale}
|
|
onInput={setScale}
|
|
/>
|
|
</div>
|
|
<div class={style.toolBarResize} onMouseDown={startResizing}></div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export function use(container: HTMLElement): void {
|
|
render(() => <DevTools gameContainer={container} />, document.body);
|
|
}
|