init

tools/main.tsx

@@ -0,0 +1,63 @@
+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);
+}