js/debug/TilesDebugOverlay.js - master - RaskolnickOFF/3D

js/debug/TilesDebugOverlay.js
114 строк4 KB
RaskolnickOFF
feat: implement boundless 3x3 tile streaming manager and border tracking system
18 июн 2026, 03:54
18 июн 2026, 03:54e8f9134
// js/debug/TilesDebugOverlay.js

import LIB from 'LIB';

export class TilesDebugOverlay {
    constructor(timeInterval, SETTINGS, container) {
        this.settings = SETTINGS;
        if (!this.settings.debug.tiles) return;
        this.cfg = this.settings.UI.debug;
        this._interval = timeInterval;
        this.timer = 0;
        this.container = container;
        this.lastKnownTilesSize = this.settings.tiles.default;
        this._renderDOM(this.container);
    }

    _renderDOM(container) {
        if (!this.settings.debug.tiles) return;
        const label = document.createElement('label');
        const span = document.createElement('span');
        span.textContent = this.cfg.tilesCurrent;
        span.className = this.cfg.tilesCurrentClass;
        const tilesSize = LIB.dom.range(
            this.settings.tiles.default,
            this.cfg.tilesRangeClass, null, //id is null
            this.settings.tiles.min,
            this.settings.tiles.max,
            this.settings.tiles.step
        );
        const buttonsLine = LIB.dom.buttonsRow([

            [this.cfg.tilesCheckButton, 'check']

        ], null, this.cfg.tilesButtonClass);
        label.append(span, tilesSize, buttonsLine);
        container.append(label);

        this.renderTilesMap(this.lastKnownTilesSize, container);

        this.description = label.querySelector('.' + this.cfg.tilesCurrentClass);
    }

    renderTilesMap(size, wrapper) {
        if (!this.settings.debug.tiles) return;
        const oldContainer = wrapper.querySelector(
            '.' + this.cfg.tilesContainerClass);
        if (oldContainer) { oldContainer.remove(); }
        const newContainer = document.createElement('section');
        newContainer.className = this.cfg.tilesContainerClass;

        // Вычисляем начальные координаты, чтобы центр был в 0,0
        const offset = Math.floor(size / 2);
        const startX = -offset;
        const startZ = -offset;

        // Фрагмент для быстрой сборки сетки в памяти
        const fragment = document.createDocumentFragment();

        for (let r = 0; r < size; r++) {
            const tx = startX + r; // Мировая координата X для текущей строки
            const row = document.createElement('section');
            row.className = this.cfg.tilesRowClass;
            for (let c = 0; c < size; c++) {
                const tz = startZ + c; // Мировая координата Z для текущей ячейки
                const cell = document.createElement('article');
                cell.className = this.cfg.tilesCellClass;
                cell.dataset.coords = `${tx}_${tz}`;
                cell.textContent = `${tx},${tz}`;
                row.appendChild(cell);
            }
            fragment.appendChild(row);
        }
        newContainer.appendChild(fragment);
        wrapper.append(newContainer);
    }

    renderGenerateButtons() {
        if (!this.settings.debug.tiles) return;
        const badTiles = this.container.querySelectorAll('.' + this.cfg.tileBadClass);
        if (badTiles.length) {
            badTiles.forEach(tile => {
                if (tile.dataset.coords && !tile.querySelector('button')) {
                    const button = document.createElement('button');
                    button.textContent = this.cfg.tilesGenerateButton;
                    button.className = this.cfg.tilesGenerateClass;
                    tile.prepend(button);
                    const spacer = document.createElement('small');
                    spacer.className = this.cfg.tilesGenerateSpacer;
                    tile.append(spacer);
                }
            });
        }
    }

    update(env, acc) {
        if (!this.settings.debug.time) return;
        this.timer += acc;
        if (this.timer < this._interval) return;
        this.timer -= this._interval;

        this.description.textContent = `${this.cfg.tilesCurrent} ${this.cfg.tilesName} ${this.settings.tiles.default} ${this.cfg.tilesSign} ${this.settings.tiles.default}`;

        if (this.lastKnownTilesSize !== this.settings.tiles.default) {
            this.lastKnownTilesSize = this.settings.tiles.default;
            this.renderTilesMap(this.lastKnownTilesSize, this.container);
        }
    }

    updateInterval(interval) {
        if (!this.settings.debug.tiles) return;
        if (interval !== this._interval) { this._interval = interval; }
    }

}