Method _buildPanel

packages/debug-plugin/src/index.js:137–259

@private

()

	/** @private */
	_buildPanel() {
		this.panelWrap = document.createElement("div");
		this.panelWrap.className = "dbg-wrap";

		this.panel = document.createElement("div");
		this.panel.className = "dbg";
		this.panelWrap.appendChild(this.panel);
		this.panelWrap.style.display = "none";

		// helper to create a stat as two grid cells: label | value
		const stat = (id, label) => {
			const dimEl = document.createElement("span");
			dimEl.className = "dim";
			dimEl.textContent = label;
			const valEl = document.createElement("span");
			valEl.className = "val";
			valEl.textContent = "0";
			this.stats[id] = valEl;
			return [dimEl, valEl];
		};

		// helper to create a checkbox label
		const checkbox = (key, label) => {
			const el = document.createElement("label");
			const cb = document.createElement("input");
			cb.type = "checkbox";
			cb.checked = this.options[key];
			cb.addEventListener("change", () => {
				this.options[key] = cb.checked;
				game.repaint();
			});
			el.appendChild(cb);
			el.appendChild(document.createTextNode(label));
			return el;
		};

		const toggleKey =
			Object.keys(input.KEY).find((k) => {
				return input.KEY[k] === this.debugToggle;
			}) ?? "?";

		// helper to append a stat (two grid cells) or a single element spanning 2 columns
		const addStat = (id, label) => {
			const [dimEl, valEl] = stat(id, label);
			this.panel.appendChild(dimEl);
			this.panel.appendChild(valEl);
		};
		const addSpan2 = (el) => {
			el.style.gridColumn = "span 2";
			this.panel.appendChild(el);
		};

		// row 1
		addStat("objects", "#objects");
		addSpan2(checkbox("hitbox", "hitbox"));
		addSpan2(checkbox("quadtree", "quadtree"));
		addStat("update", "Update");
		addStat("heap", "Heap");