import maplibregl from "maplibre-gl";
import proj4 from "proj4";
import * as THREE from "three";

proj4.defs("EPSG:25832", "+proj=utm +zone=32 +ellps=GRS80 +units=m +no_defs");

const center = [9.209116842757239, 52.26520546238239]

const map = new maplibregl.Map({
    container: 'map',
    style: "https://tiles.openfreemap.org/styles/bright",
    center: center,
    zoom: 17,
    maxZoom: 24,
});

map.addControl(new maplibregl.NavigationControl({
    visualizePitch: true,
    showZoom: true,
    showCompass: true
}));

const coordinatesDiv = document.getElementById('coordinates');
map.on('mousemove', (e) => {
    coordinatesDiv.innerHTML = `Lon: ${e.lngLat.lng.toFixed(5)}° | Lat: ${e.lngLat.lat.toFixed(5)}°`;
});

var pointBudget = document.getElementById("pointSlider").value;
var pointSize = document.getElementById("pointSizeSlider").value;
const elRenderArea = document.getElementById("potree_render_area");

const viewer = new Potree.Viewer(elRenderArea, {noDragAndDrop: true});
viewer.setEDLEnabled(false);
viewer.setFOV(60);
viewer.setPointBudget(pointBudget);
viewer.setMinNodeSize(pointSize);
viewer.setBackground("none");

viewer.orbitControls.enabled = false;
viewer.fpControls.enabled = false;
viewer.deviceControls.enabled = false;

var quality = 'medium';

function getPointCloudFiles() {
    return {
        first: `http://ar2350.web-01.fbbgg.hs-woe.de/Punktwolken%20konvertiert%20potree%20Format/sp1_${quality}/metadata.json`,
        second: `http://ar2350.web-01.fbbgg.hs-woe.de/Punktwolken%20konvertiert%20potree%20Format/sp2_${quality}/metadata.json`,
        third: `http://ar2350.web-01.fbbgg.hs-woe.de/Punktwolken%20konvertiert%20potree%20Format/sp3_${quality}/metadata.json`,
    };
}

let currentPointCloud = null;
let isVisible = true;

function loadPointCloud(path) {
    if (currentPointCloud) {
        const index = viewer.scene.pointclouds.indexOf(currentPointCloud);
        if (index !== -1) viewer.scene.pointclouds.splice(index, 1);
        if (currentPointCloud.parent) currentPointCloud.parent.remove(currentPointCloud);
        currentPointCloud = null;
        viewer.render();
    }

    if (!path || !isVisible) return;

    Potree.loadPointCloud(path, "punktwolke", function(e) {
        currentPointCloud = e.pointcloud;
        viewer.scene.addPointCloud(currentPointCloud);

        let material = currentPointCloud.material;
        material.size = 1;
        material.pointSizeType = Potree.PointSizeType.ADAPTIVE;
       

        // 1. Three.js zwingen, die Wolke sofort in der 3D-Welt zu platzieren
        currentPointCloud.updateMatrixWorld(true);

        // 2. POTREE WECKRUF: Zwinge den Viewer, sich intern zu dimensionieren.
        // Das löst das Problem, dass Potree beim allerersten Aufruf die Kamera ignoriert.
        viewer.update(viewer.clock.getDelta(), Number.MAX_VALUE);
        
        // 3. Jetzt die Kamera berechnen und setzen
        syncCamera();

        // 4. Ein zweites Mal synchronisieren, falls MapLibre im selben Frame das Canvas resized hat
        requestAnimationFrame(() => {
            syncCamera();
        });
    });
}

// Variable, um Endlosschleifen zu verhindern
let isSyncing = false;

function syncCamera() {
    if (!currentPointCloud || isSyncing) return;
    isSyncing = true;

    const transform = map.transform;
    
    // 1. Dimensionen auf den Pixel genau angleichen
    if (viewer.renderer) {
        viewer.renderer.setSize(map.getCanvas().clientWidth, map.getCanvas().clientHeight);
    }

    // 2. Mathematische Parameter aus dem MapLibre-Kern extrahieren
    const pitch = transform.pitch * Math.PI / 180;
    const bearing = transform.bearing * Math.PI / 180;

    const mapCenter = map.getCenter();
    const [utmX, utmY] = proj4("EPSG:4326", "EPSG:25832", [mapCenter.lng, mapCenter.lat]);

    // WICHTIG: Nutze MapLibres exakte mathematische Kameradistanz
    const distanceInMeters = transform.cameraToCenterDistance / transform.pixelsPerMeter;

    const target = new THREE.Vector3(utmX, utmY, 0);
    const offset = new THREE.Vector3(
        0,
        -distanceInMeters * Math.sin(pitch),
        distanceInMeters * Math.cos(pitch)
    );

    offset.applyAxisAngle(new THREE.Vector3(0, 0, 1), -bearing);
    const cameraPosition = target.clone().add(offset);

    // 3. Potree-Kamera absolut starr setzen
    viewer.scene.view.position.copy(cameraPosition);
    viewer.scene.view.lookAt(target);
    viewer.setFOV(transform.fov);

    // 4. Potree rendern
    viewer.renderer.resetState();
    viewer.render();

    isSyncing = false;
}

// ==========================================
// DER REVOLUTIONÄRE SYNCHRONISATIONS-LOOP
// ==========================================
// Wir klinken uns direkt in den Browser-Zeichenzyklus von MapLibre ein.
// Jedes Mal, wenn MapLibre ein Frame anfordert, aktualisieren wir Potree DIREKT davor/dabei.

const originalRequestAnimationFrame = window.requestAnimationFrame;
const hookRenderLoop = () => {
    // Erzwinge die Kamerasynchronisation bei jedem Karten-Update
    syncCamera();
};

// Verwende MapLibres internes Repaint-System, um absolut latenzfrei zu synchronisieren
map.on('movestart', () => {
    // Während der Interaktion zwingen wir MapLibre zu einem Dauer-Repaint,
    // damit der Render-Loop durchgehend feuert
    map.getCanvasContainer().style.cursor = 'grabbing';
});

// Anstatt des trägen 'render'-Events, nutzen wir eine Kombination aus 'draw' und 'precombine'
map.on('zoom', syncCamera);
map.on('move', syncCamera);
map.on('rotate', syncCamera);
map.on('pitch', syncCamera);

// Zusätzliche Absicherung für CSS/DOM-Verzögerungen:
// Das 'draw'-Event feuert tiefer im Inneren von MapLibre als 'render'
map.on('draw', syncCamera);

// CSS-Fix für das Potree-Container-Element (wichtig gegen Mikroruckler)
// Stelle sicher, dass dein #potree_render_area im CSS folgende Attribute hat:
// pointer-events: none; (damit MapLibre die Maus-Events direkt und ohne Millisekunden-Verzögerung bekommt!)
elRenderArea.style.pointerEvents = "none";
map.getCanvas().style.pointerEvents = "auto";

function changeBaseMap(newMap) {
    var basemapStyle;
    switch(newMap) {
        case "openfree_dark": basemapStyle = "https://tiles.openfreemap.org/styles/dark"; break;
        case "openfree_bright": basemapStyle = "https://tiles.openfreemap.org/styles/bright"; break;
        case "openfree_liberty": basemapStyle = "https://tiles.openfreemap.org/styles/liberty"; break;
        case "google_satellite":
            basemapStyle = { version: 8, sources: { "raster-tiles": { type: "raster", tiles: ["https://api.maptiler.com/tiles/satellite-v2/{z}/{x}/{y}.jpg?key=6mG881AthmTTWyLvFyjH"], tileSize: 256, attribution: "© MapTiler" } }, layers: [{ id: "satellite-layer", type: "raster", source: "raster-tiles" }] };
            break;
        case "terrain":
            basemapStyle = { version: 8, sources: { topo: { type: 'raster', url: 'https://api.maptiler.com/maps/topo-v4/tiles.json?key=6mG881AthmTTWyLvFyjH', tileSize: 256 }, terrainSource: { type: 'raster-dem', url: 'https://tiles.mapterhorn.com/tilejson.json' }, hillshadeSource: { type: 'raster-dem', url: 'https://tiles.mapterhorn.com/tilejson.json' } }, layers: [{ id: 'topo', type: 'raster', source: 'topo' }, { id: 'hills', type: 'hillshade', source: 'hillshadeSource', layout: { visibility: 'visible' }, paint: { 'hillshade-shadow-color': '#473B24' } }], terrain: { source: 'terrainSource', exaggeration: 1 }, sky: {} };
            break;
        case "satellite_terrain":
            basemapStyle = { version: 8, sources: { "raster-tiles": { type: "raster", tiles: ["https://api.maptiler.com/tiles/satellite-v2/{z}/{x}/{y}.jpg?key=6mG881AthmTTWyLvFyjH"], tileSize: 256, attribution: "© MapTiler" }, terrainSource: { type: 'raster-dem', url: 'https://tiles.mapterhorn.com/tilejson.json' }, hillshadeSource: { type: 'raster-dem', url: 'https://tiles.mapterhorn.com/tilejson.json' } }, layers: [{ id: 'raster-tiles', type: 'raster', source: 'raster-tiles' }, { id: 'hills', type: 'hillshade', source: 'hillshadeSource', layout: { visibility: 'visible' }, paint: { 'hillshade-shadow-color': '#473B24' } }], terrain: { source: 'terrainSource', exaggeration: 1 }, sky: {} };
            break;
    }
    map.setStyle(basemapStyle);
}

document.querySelector('#disable').addEventListener('click', function() {
    isVisible = !isVisible;
    if (currentPointCloud) currentPointCloud.visible = isVisible;
    this.textContent = isVisible ? "Punktwolke ausblenden" : "Punktwolke anzeigen";
});

document.querySelector('select[name="basemap"]').addEventListener('change', (e) => changeBaseMap(e.target.value));

document.querySelector('select[name="pointcloud"]').addEventListener('change', (e) => {
    loadPointCloud(getPointCloudFiles()[e.target.value]);
});

document.getElementById("location").addEventListener("click", () => map.flyTo({center, zoom: 17}));

var pointCountSlider = document.getElementById("pointSlider");
var pointCountOutput = document.getElementById("pointSliderValue");
pointCountOutput.innerHTML = "Dargestellte Punkte: " + Number(pointCountSlider.value).toLocaleString();
pointCountSlider.oninput = function() {
    pointCountOutput.innerHTML = "Dargestellte Punkte: " + Number(this.value).toLocaleString('de-DE');
    viewer.setPointBudget(this.value);
};

document.getElementById("pointSizeSlider").oninput = function() {
    viewer.setMinNodeSize(this.value);
};

const closeButton = document.getElementById("closeSideBarButton");
const sidebar = document.getElementById("sidebar");
const openOuter = document.getElementById("openButtonOuter");
if (closeButton) {
    closeButton.addEventListener("click", () => {
        const rect = closeButton.getBoundingClientRect();
        sidebar.style.display = "none";
        openOuter.innerHTML = "<button class='sideBarButtons' id='openSideBarButton' title='Menü ausklappen'>>></button>";
        const openButton = document.getElementById("openSideBarButton");
        openButton.style.top = `${rect.top + window.scrollY - 2}px`;
        openButton.addEventListener("click", () => {
            sidebar.style.display = "flex";
            openOuter.innerHTML = "";
        });
    });
}

document.querySelectorAll('.qualityButtons').forEach(btn => {
    btn.addEventListener('click', () => {
        quality = btn.id;
        if (currentPointCloud) loadPointCloud(getPointCloudFiles()[document.getElementById("pointcloud").value]);
        document.querySelectorAll('.qualityButtons').forEach(b => b.classList.remove('active'));
        btn.classList.add('active');
    });
});

document.querySelectorAll('.colorButtons').forEach(btn => {
    btn.addEventListener('click', () => {
        if (!currentPointCloud) return; // Abbrechen, falls noch keine Wolke geladen ist

        document.querySelectorAll('.colorButtons').forEach(b => b.classList.remove('active'));
        btn.classList.add('active');

        let value = btn.id;
        console.log("WERT: " + value);
        
        // Greife immer das aktuelle Material ab
        let currentMaterial = currentPointCloud.material;

        if (value === "rgb") {
            // "rgba" stellt die echten RGB-Farben der Punkte dar
            currentMaterial.activeAttributeName = "rgba"; 
        } else if (value === "height") {
            // "elevation" wechselt auf die Einfärbung nach Höhe (Z-Wert)
            currentMaterial.activeAttributeName = "elevation";
        }

        // POTREE RE-RENDER TRICK:
        // Potree muss wissen, dass sich das Material verändert hat, damit die Shader neu geladen werden.
        viewer.renderer.resetState();
        viewer.render();
        
        // MapLibre ebenfalls Bescheid geben, dass sich die Overlays geändert haben
        map.triggerRepaint();
    });
});

// Sobald die Karte das allererste Mal stabil steht, Kamera abgleichen
map.once('idle', () => {
    syncCamera();
});

// Falls du beim Start direkt eine Standard-Punktwolke lädst, 
// stelle sicher, dass das Dropdown nach dem ersten stabilen Frame getriggert wird:
map.once('load', () => {
    const selectBox = document.querySelector('select[name="pointcloud"]');
    if (selectBox && selectBox.value) {
        loadPointCloud(getPointCloudFiles()[selectBox.value]);
    }
});


/*
import maplibregl from "maplibre-gl";
import proj4 from "proj4";
import * as THREE from "three";
console.log(THREE);
proj4.defs(
  "EPSG:25832",
  "+proj=utm +zone=32 +ellps=GRS80 +units=m +no_defs"
);


const center = [9.209116842757239, 52.26520546238239]

const map = new maplibregl.Map({
    container: 'map',
    style: "https://tiles.openfreemap.org/styles/bright",
    center: center,
    zoom: 17,
    maxZoom: 24,
});
window.map=map;

map.addControl(
    new maplibregl.NavigationControl({
        visualizePitch: true,
        showZoom: true,
        showCompass: true
    })
);

// 2. Create an HTML element to display coordinates (e.g., <pre id="coordinates"></pre>)
const coordinatesDiv = document.getElementById('coordinates');

// 3. Listen for mouse movement
map.on('mousemove', (e) => {
    // e.lngLat contains the longitude and latitude
    const lng = e.lngLat.lng.toFixed(5);
    const lat = e.lngLat.lat.toFixed(5);
    
    coordinatesDiv.innerHTML = `Lon: ${lng}° | Lat: ${lat}°`;
});

var pointBudget = document.getElementById("pointSlider").value;
var pointSize = document.getElementById("pointSizeSlider").value;
const elRenderArea=document.getElementById("potree_render_area");

const viewer=new Potree.Viewer(elRenderArea, {noDragAndDrop:true});
viewer.renderer.domElement.style.zIndex="1";
map.getCanvas().style.zIndex="0";
window.viewer=viewer;
viewer.setEDLEnabled(false); // sieht realistischer aus
viewer.setFOV(60);
viewer.setPointBudget(pointBudget);
viewer.setMinNodeSize(pointSize);
viewer.setBackground("none"); 

console.log(viewer.orbitControls);
console.log(viewer.fpControls);
console.log(viewer.deviceControls);

viewer.orbitControls.enabled=false;
viewer.fpControls.enabled=false;
viewer.deviceControls.enabled=false;


var quality = 'medium';

// Dateipfade der Punktwolke
// Funktion für aktuelle Pfade
function getPointCloudFiles() {
    return {
      first: `http://ar2350.web-01.fbbgg.hs-woe.de/Punktwolken%20konvertiert%20potree%20Format/sp1_${quality}/metadata.json`,
      second: `http://ar2350.web-01.fbbgg.hs-woe.de/Punktwolken%20konvertiert%20potree%20Format/sp2_${quality}/metadata.json`,
      third: `http://ar2350.web-01.fbbgg.hs-woe.de/Punktwolken%20konvertiert%20potree%20Format/sp3_${quality}/metadata.json`,
    };
}

//Aktuelle Datei und Sichtbarkeit
let currentPointCloud=null;
let isVisible=true;

function loadPointCloud(path){
  console.log("Laden aufgerufen")
  console.log("Pfad "+ path);
    // Vorherige Punktwolke entfernen
    if (currentPointCloud) {
      // Aus Potree-Liste entfernen
      const index = viewer.scene.pointclouds.indexOf(currentPointCloud);

      if (index !== -1) {
        viewer.scene.pointclouds.splice(index, 1);
      }

      // Aus Three.js Szene entfernen
      if (currentPointCloud.parent) {
        currentPointCloud.parent.remove(currentPointCloud);
      }

      currentPointCloud = null;
      viewer.render();
    }

  if(!path ||!isVisible) return;

  Potree.loadPointCloud(path, "punktwolke", function(e) {
    currentPointCloud=e.pointcloud;
    viewer.scene.addPointCloud(currentPointCloud);


   // View-Objekt inspizieren
    console.log("view:", viewer.scene.view);
    console.log("view.lookAt:", viewer.scene.view.lookAt);
    console.log("view.position:", viewer.scene.view.position);
    console.log("view keys:", Object.keys(viewer.scene.view));
    

    let material =currentPointCloud.material;
    material.size =1;
    material.pointSizeType=Potree.PointSizeType.ADAPTIVE;
    material.activeAttributeName="rgba";
    
   
  });
}

const originMercator = maplibregl.MercatorCoordinate.fromLngLat(
  { lng: center[0], lat: center[1] }, 0
);
const metersToMercator = originMercator.meterInMercatorCoordinateUnits();

const potreeLayer = {
  id: "potree-pointcloud",
  type: "custom",
  renderingMode: "3d",

 onAdd(map, gl) {
  this.map = map;
  this.camera = new THREE.Camera();
},

  onRemove(){
    this.renderer.dispose();
    this.renderer=null;
  },

  render(gl, args) {
  if (!currentPointCloud) return;

  const [originX, originY] = proj4("EPSG:4326", "EPSG:25832", [center[0], center[1]]);

  const m = new THREE.Matrix4().fromArray(args.defaultProjectionData.mainMatrix);
  const scale = new THREE.Matrix4().makeScale(
    metersToMercator, -metersToMercator, metersToMercator
  );
  const translate = new THREE.Matrix4().makeTranslation(
    originMercator.x - originX * metersToMercator,
    originMercator.y + originY * metersToMercator,
    0
  );
  const l = translate.multiply(scale);

  this.camera.projectionMatrix = m.multiply(l);

  viewer.renderer.resetState();
  viewer.renderer.render(viewer.scene.scenePointCloud, this.camera);
  this.map.triggerRepaint();
},
};

map.on("style.load", () => {
  map.addLayer(potreeLayer);
});



// Hintergrundkarte ändern
function changeBaseMap(newMap){
  var basemapStyle;
  switch(newMap){
    case "openfree_dark":
      basemapStyle = "https://tiles.openfreemap.org/styles/dark"
      break;
    case "openfree_bright":
      basemapStyle = "https://tiles.openfreemap.org/styles/bright"
      break;
    case "openfree_liberty":
      basemapStyle = "https://tiles.openfreemap.org/styles/liberty"
      break;
    case "google_satellite":
   basemapStyle = {
    version: 8,
    sources: {
      "raster-tiles": {
        type: "raster",
        tiles: [
          "https://api.maptiler.com/tiles/satellite-v2/{z}/{x}/{y}.jpg?key=6mG881AthmTTWyLvFyjH"
        ],
        tileSize: 256,
        attribution: "&copy; MapTiler",
      }
    },
    layers: [
      {
        id: "satellite-layer",
        type: "raster",
        source: "raster-tiles"
      }
    ]
  }
    break;
  case "terrain":
    basemapStyle = {
        version: 8,
        sources: {
            topo: {
        type: 'raster',
        url: 'https://api.maptiler.com/maps/topo-v4/tiles.json?key=6mG881AthmTTWyLvFyjH',
        tileSize: 256,
      },
            // Use a different source for terrain and hillshade layers, to improve render quality
            terrainSource: {
                type: 'raster-dem',
                url: 'https://tiles.mapterhorn.com/tilejson.json',
            },
            hillshadeSource: {
                type: 'raster-dem',
                url: 'https://tiles.mapterhorn.com/tilejson.json'
            }
        },
        layers: [
            {
                id: 'topo',
                type: 'raster',
                source: 'topo'
            },
            {
                id: 'hills',
                type: 'hillshade',
                source: 'hillshadeSource',
                layout: {visibility: 'visible'},
                paint: {'hillshade-shadow-color': '#473B24'}
            }
        ],
        terrain: {
            source: 'terrainSource',
            exaggeration: 1
        },
        sky: {}
    }
    break;
    case "satellite_terrain": 
      basemapStyle =  {
        version: 8,
        sources: {
             "raster-tiles": {
        type: "raster",
        tiles: [
          "https://api.maptiler.com/tiles/satellite-v2/{z}/{x}/{y}.jpg?key=6mG881AthmTTWyLvFyjH"
        ],
        tileSize: 256,
        attribution: "&copy; MapTiler",
      },
            // Use a different source for terrain and hillshade layers, to improve render quality
            terrainSource: {
                type: 'raster-dem',
                url: 'https://tiles.mapterhorn.com/tilejson.json',
            },
            hillshadeSource: {
                type: 'raster-dem',
                url: 'https://tiles.mapterhorn.com/tilejson.json'
            }
        },
        layers: [
            {
                id: 'raster-tiles',
                type: 'raster',
                source: 'raster-tiles'
            },
            {
                id: 'hills',
                type: 'hillshade',
                source: 'hillshadeSource',
                layout: {visibility: 'visible'},
                paint: {'hillshade-shadow-color': '#473B24'}
            }
        ],
        terrain: {
            source: 'terrainSource',
            exaggeration: 1
        },
        sky: {}
    }
	
  }
  map.setStyle(basemapStyle);
  map.once("style.load", ()=> {
    map.addLayer(potreeLayer);
  });
}


const button = document.querySelector('#disable')

button.addEventListener('click', () => {

    isVisible = !isVisible;

    if(currentPointCloud){
        currentPointCloud.visible = isVisible;
    }

    button.textContent = isVisible
        ? "Punktwolke ausblenden"
        : "Punktwolke anzeigen";

});


// ausgewähltes Element im BaseMap DropDown Feld
const selectElement = document.querySelector('select[name="basemap"]');
selectElement.addEventListener('change', (event) => {
  changeBaseMap(event.target.value);
});



// ausgewähltes Element im Punktwolken DropDown Feld

document.querySelector('select[name="pointcloud"]').addEventListener('change', (event) => {
  const pointCloudFiles = getPointCloudFiles();
  var pointcloud = pointCloudFiles[event.target.value];
  loadPointCloud(pointcloud);
  console.log(pointCloudFiles[event.target.value]);
});


// Auf Zentrum zurück zoomen
document.getElementById("location").addEventListener("click", () => {
 map.flyTo({center, zoom: 17 })
});


var pointCountSlider = document.getElementById("pointSlider");
var pointCountOutput = document.getElementById("pointSliderValue");
pointCountOutput.innerHTML = "Dargestellte Punkte: " + Number(pointCountSlider.value).toLocaleString();

pointCountSlider.oninput = function() {
  pointCountOutput.innerHTML = "Dargestellte Punkte: " + Number(this.value).toLocaleString('de-DE');;
  pointBudget = document.getElementById("pointSlider").value;
  viewer.setPointBudget(pointBudget);
}



var pointSizeSlider = document.getElementById("pointSizeSlider");

pointSizeSlider.oninput = function() {
  pointSize = document.getElementById("pointSizeSlider").value;
  viewer.setMinNodeSize(pointSize);
  console.log(pointSize);
}

const closeButton = document.getElementById("closeSideBarButton");
const sidebar = document.getElementById("sidebar");
const openOuter = document.getElementById("openButtonOuter");

if (closeButton) {
    closeButton.addEventListener("click", () => {
      const rect = closeButton.getBoundingClientRect();  
      sidebar.style.display = "none";
        
        openOuter.innerHTML = "<button class='sideBarButtons' id='openSideBarButton' title='Menü ausklappen'>>></button>";
        const openButton = document.getElementById("openSideBarButton");
        openButton.style.top = `${rect.top + window.scrollY -2}px`;
        if (openButton) {
            openButton.addEventListener("click", () => {
                sidebar.style.display = "flex";
              
                openOuter.innerHTML = ""; 
            });
        }
    });
}

// Qualitätsbuttons aktivieren/deaktivieren
const qualityButtons = document.querySelectorAll('.qualityButtons');

qualityButtons.forEach(button => {

    button.addEventListener('click', () => {
        console.log(button.id);
        quality=button.id;

        if (currentPointCloud) {
          const pointCloudFiles = getPointCloudFiles();
          var pointCloudValue = document.getElementById("pointcloud").value
          var pointcloud = pointCloudFiles[pointCloudValue];
          loadPointCloud(pointcloud);
        }
        qualityButtons.forEach(btn => {
            btn.classList.remove('active');
        });

        button.classList.add('active');

    });

});


// Farbbuttons aktivieren/deaktivieren
const colorButtons = document.querySelectorAll('.colorButtons');

colorButtons.forEach(button => {

    button.addEventListener('click', () => {

        colorButtons.forEach(btn => {
            btn.classList.remove('active');
        });

        button.classList.add('active');

    });

});
*/