Fixing hazard display dot locations.

css/index.scss

@@ -29,7 +29,7 @@
 }
 
 .hazard {
-    background: #f9f8f0;
+    // background: #f9f8f0;
     position: absolute;
 
     &::after {

css/style.css

@@ -32,7 +32,6 @@ body {
   z-index: 0; }
 
 .hazard {
-  background: #f9f8f0;
   position: absolute; }
   .hazard::after {
     content: '\26A0';

js/animation.js

@@ -46,7 +46,8 @@ Animation.prototype.subscribeCount = function(count) {
 Animation.prototype.addHazards = function() {
     const bounds = this.container.getBoundingClientRect();
 
-    const n = Random.num(1, 3);
+    // const n = Random.num(1, 3);
+    const n = 3
     for (let i = 0; i < n; i++) {
         const w = Random.num(50, 200);
         const h = Random.num(50, 200);

js/grid.js

@@ -3,9 +3,13 @@ export default function Grid() {
     this.gridSize = 5;
 };
 
+Grid.prototype.fitToGrid = function(n) {
+    return n - n % this.gridSize;
+}
+
 Grid.prototype.getKey = function({ x, y, type }) {
-    const gridX = x - x % this.gridSize;
-    const gridY = y - y % this.gridSize;
+    const gridX = this.fitToGrid(x);
+    const gridY = this.fitToGrid(y);
 
     return `${gridX}-${gridY}-${type}`;
 }
@@ -23,26 +27,27 @@ Grid.prototype.deletePoint = function({ x, y, type }) {
 };
 
 Grid.prototype.setArea = function({ x, y, w, h, type }, container) {
-    for (let i = x; i <= (x + w); i += this.gridSize) {
-        for (let j = y; j <= (y + h); j += this.gridSize) {
-            this.setPoint({ x: i, y: j, type }, true);
-        }
-    }
+    const xFit = this.fitToGrid(x);
+    const yFit = this.fitToGrid(y);
+    const wFit = this.fitToGrid(w);
+    const hFit = this.fitToGrid(h);
 
     const div = document.createElement('div');
     div.className = 'hazard';
-    div.style.left = `${x}px`;
-    div.style.top = `${y}px`;
-    div.style.height = `${h}px`;
-    div.style.width = `${w}px`;
+    div.style.left = `${xFit}px`;
+    div.style.width = `${wFit}px`;
+    div.style.top = `${yFit}px`;
+    div.style.height = `${hFit}px`;
     container.appendChild(div);
 
-    for (let i = x; i <= (x + w); i += this.gridSize) {
-        for (let j = y; j <= (y + h); j += this.gridSize) {
+    for (let i = xFit; i <= xFit + wFit; i += this.gridSize) {
+        for (let j = yFit; j <= yFit + hFit; j += this.gridSize) {
+            this.setPoint({ x: i, y: j, type }, true);
+
             const dot = document.createElement('dot');
             dot.className = 'hazard-dot';
-            dot.style.left = `${i - x}px`;
-            dot.style.top = `${j - y}px`;
+            dot.style.left = `${i - xFit}px`;
+            dot.style.top = `${j - yFit}px`;
             div.appendChild(dot);
         }
     }

js/index.js

@@ -24,7 +24,6 @@ window.addEventListener('load', () => {
 
 // TODO remove bottom padding from Disqus
 // TODO fix "hangup" small radius evade bug
-// TODO don't load simulation until requested
 // TODO sort out particle nextframe
 // TODO abs positioning on controls elements so order doesn't matter
 // TODO BehaviorSubject listener on bounds change