Shrinking sass nonsense
This commit is contained in:
parent
c51942e5c0
commit
3bc3981373
4 changed files with 106 additions and 167 deletions
|
|
@ -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
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue