From 97cce00030e54ce59343d80d3f78317800df4cde Mon Sep 17 00:00:00 2001
From: Michael DiBernardo <debo@winterlightlabs.com>
Date: Sun, 25 Aug 2024 16:37:39 -0400
Subject: [PATCH] Placing rocks.

---
 index.html |  5 +----
 main.js    | 44 ++++++++++++++++++++++++++++++++++++--------
 style.css  |  8 +++++---
 3 files changed, 42 insertions(+), 15 deletions(-)
diff --git a/index.html b/index.html
index 7f131b0..4ee9fc5 100644
--- a/index.html
+++ b/index.html
@@ -87,10 +87,7 @@
   </head>
 
   <body>
-    <div id="scrollable-area">
-      <div id="center-point"></div>
-      <div id="rocks-container"></div>
-    </div>
+    <div id="scrollable-area"></div>
 
     <template id="rock-template">
       <div class="rock">
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;
