diff --git a/main.js b/main.js
index 8ab3dc2..fce77fa 100644
--- a/main.js
+++ b/main.js
@@ -1,14 +1,40 @@
+const numRocks = 1000;
+const gridSize = 51200 / 256;
+
document.addEventListener("DOMContentLoaded", () => {
- const rocksContainer = document.getElementById("rocks-container");
+ const scrollableArea = document.getElementById("scrollable-area");
const rockTemplate = document.getElementById("rock-template");
- const numRocks = 20; // Number of rocks to create
- function createRock() {
+ function createRockComponent(location) {
const rock = rockTemplate.content.cloneNode(true).querySelector(".rock");
- rock.style.left = `${Math.random() * 100}%`;
- rock.style.top = `${Math.random() * 100}%`;
+ rock.style.gridRow = location.x;
+ rock.style.gridColumn = location.y;
rock.addEventListener("click", flingRock);
- rocksContainer.appendChild(rock);
+ scrollableArea.appendChild(rock);
+ }
+
+ function createRocks() {
+ const rockLocations = [];
+ while (rockLocations.length < numRocks) {
+ const newRockLocation = {
+ x: Math.floor(Math.random() * gridSize),
+ y: Math.floor(Math.random() * gridSize),
+ };
+
+ if (
+ rockLocations.find(
+ (l) => l.x === newRockLocation.x && l.y === newRockLocation.y
+ )
+ ) {
+ continue;
+ }
+
+ rockLocations.push(newRockLocation);
+ }
+
+ for (const location of rockLocations) {
+ createRockComponent(location);
+ }
}
function flingRock(event) {
@@ -28,7 +54,9 @@ document.addEventListener("DOMContentLoaded", () => {
}, duration);
}
- for (let i = 0; i < numRocks; i++) {
- createRock();
+ function initialize() {
+ createRocks();
}
+
+ initialize();
});
diff --git a/style.css b/style.css
index 871401f..d1b19dd 100644
--- a/style.css
+++ b/style.css
@@ -83,14 +83,16 @@ body {
}
#scrollable-area {
- width: 50000px;
- height: 50000px;
+ width: 51200px;
+ height: 51200px;
background-image: url("./img/forest-tile-512x512.jpg");
background-repeat: repeat;
+ display: grid;
+ grid-template-columns: repeat(auto-fill, 256px);
+ grid-template-rows: repeat(auto-fill, 256px);
}
.rock {
- position: absolute;
width: 256px;
height: 256px;
cursor: pointer;