From e93fd30849cca82a039120a06d1fa7b53522931c Mon Sep 17 00:00:00 2001
From: Mike Lynch <m.lynch@sydney.edu.au>
Date: Tue, 6 Jan 2026 21:22:25 +1100
Subject: [PATCH] Added darkness layer

---
 06/animate.js | 21 +++++++++++++++++----
 06/index.html |  1 +
 2 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/06/animate.js b/06/animate.js
index 9862b88..b01264b 100644
--- a/06/animate.js
+++ b/06/animate.js
@@ -1,6 +1,6 @@
 
-const WIDTH = 400;
-const HEIGHT = 400;
+const WIDTH = 800;
+const HEIGHT = 800;
 const NCRITTERS = 10;
 const CLOSE = 20;
 const BOUNCE = 0.02;
@@ -9,6 +9,8 @@ const pointer = { x: 0, y: 0 };
 
 const critters = [];
 
+let lights = "off";
+
 function dist(c1, c2) {
     const dx = c1.x - c2.x;
     const dy = c1.y - c2.y;
@@ -82,12 +84,23 @@ document.addEventListener('DOMContentLoaded', () => {
             c.init(i);
             c.update();
             critters.push(c);
-            console.log(`added critter ${i}`);
         }
+
+        svg.addEventListener("click", () => {
+            const dark = document.getElementById("dark");
+            if( lights === "on" ) {
+                lights = "off";
+                dark.setAttribute("fill-opacity", "0.8");
+            } else {
+                lights = "on";
+                dark.setAttribute("fill-opacity", "0");
+            }
+        });
     } else {
-        console.log("Can't find svg element");
     }
 
+    
+
 });
 
 
diff --git a/06/index.html b/06/index.html
index fd4d0d5..d3da717 100644
--- a/06/index.html
+++ b/06/index.html
@@ -16,6 +16,7 @@
 
 <div id="container">
 <svg width="800" height="800" xmlns="http://www.w3.org/2000/svg">
+<rect id="dark" x="0" y="0" width="800" height="800" fill="black" fill-opacity="0.8"></rect>
 <circle id="c000" r="10" cx="100" cy="100" fill="blue" fill-opacity="0.5"></circle>
 <circle id="c001" r="10" cx="100" cy="100" fill="blue" fill-opacity="0.5"></circle>
 <circle id="c002" r="10" cx="100" cy="100" fill="blue" fill-opacity="0.5"></circle>