Shrinking sass nonsense

This commit is contained in:
Dan 2025-12-11 12:40:54 +00:00
parent c51942e5c0
commit 3bc3981373
4 changed files with 106 additions and 167 deletions

View file

@ -14,18 +14,14 @@ function randomInt(min, max) {
function createBuilding(minWindows, maxWindows) {
const building = document.createElement("div");
building.className = "building";
const windowsContainer = document.createElement("div");
windowsContainer.className = "building-windows";
const numWindows = randomInt(minWindows, maxWindows);
for (let i = 0; i < numWindows; i++) {
const window = document.createElement("div");
window.className = "window-light";
windowsContainer.appendChild(window);
}
building.appendChild(windowsContainer);
return building;
}
@ -38,10 +34,13 @@ function populateLayer(layerName, numBuildings, windowRange) {
return;
}
// Check for data-count attribute and use it if present
const dataCount = layer.dataset.count;
const buildingCount = dataCount ? parseInt(dataCount, 10) : numBuildings;
// Clear existing buildings
layer.innerHTML = "";
for (let i = 0; i < numBuildings; i++) {
for (let i = 0; i < buildingCount; i++) {
const building = createBuilding(windowRange[0], windowRange[1]);
layer.appendChild(building);
}
@ -54,18 +53,43 @@ function initializeCityscape() {
randomInt(...config.buildingsFar.count),
config.buildingsFar.windows,
);
populateLayer(
"buildings-mid",
randomInt(...config.buildingsMid.count),
config.buildingsMid.windows,
);
populateLayer(
"buildings-near",
randomInt(...config.buildingsNear.count),
config.buildingsNear.windows,
);
document.querySelectorAll(".window-light").forEach((window) => {
if (Math.random() < 0.5) {
window.setAttribute("data-off", "");
} else {
const colorChoice = Math.random() * 100;
let hue, sat, light;
if (colorChoice <= 85) {
hue = 40 + Math.random() * 20;
sat = 70 + Math.random() * 30;
light = 50 + Math.random() * 30;
} else if (colorChoice <= 95) {
hue = 320 + Math.random() * 20;
sat = 60 + Math.random() * 40;
light = 60 + Math.random() * 20;
} else {
hue = 260 + Math.random() * 40;
sat = 50 + Math.random() * 50;
light = 50 + Math.random() * 30;
}
window.style.setProperty("--hue", hue);
window.style.setProperty("--sat", `${sat}%`);
window.style.setProperty("--light", `${light}%`);
}
});
}
// Run when DOM is ready