Please don't feed Junkbot

- Needs layout and UX work, to integrate this better.
  Maybe the bin should start in a specific location, and you should
  click to drag it? That would open the door to sound effects, since
  sound requires a user gesture these days.
- The teaser text would ideally use the Junkbot font, on a sign,
  along with other background elements.
- This is kinda weird. Is this weird? Is Junkbot in a zoo?

about.html

@@ -221,6 +221,12 @@
 
 	<section>
 		<h2>Other Projects</h2>
+		<div id="junkbot-area" style="position: absolute; left: 40%">
+			<a href="https://1j01.github.io/janitorial-android/#junkbot" target="_blank">
+				<img src="images/about/junkbot-collecting-bin.gif" width="105" height="126"
+					alt="LEGO Junkbot minifig eating a recycling bin" id="junkbot-img"></a>
+			<span id="feeding-text" hidden>Please don't feed Junkbot.</span>
+		</div>
 		<p>
 			<a href="https://isaiahodhner.io/" target="_blank"
 				style="color: rgb(160, 42, 52); font-weight: bold; font-style: italic;">
@@ -234,10 +240,6 @@
 		<a href="https://1j01.github.io/guitar/" target="_blank">
 			<img src=" images/about/guitar.gif" width="60" height="100" alt="Guitar" style="float: right;">
 		</a>
-		<a href="https://1j01.github.io/janitorial-android/#junkbot" target="_blank">
-			<img src="images/about/junkbot-collecting-bin.gif" width="105" height="126"
-				alt="LEGO Junkbot minifig eating a recycling bin" style="float: right;">
-		</a>
 		<a href="https://1j01.github.io/true-random-movie" target="_blank">
 			<img src="images/about/filmreel.gif" width="116" height="50" alt="film reel" style="float: right;">
 		</a>
@@ -284,6 +286,34 @@
 		}
 		closeButton.addEventListener("click", hideDemo);
 		minimizeButton.addEventListener("click", hideDemo);
+
+		// Junkbot "feeding" interaction
+		var junkbotArea = document.querySelector("#junkbot-area");
+		var junkbotImg = document.querySelector("#junkbot-img");
+		var cursorHasBin = true;
+		junkbotArea.style.cursor = "url(images/about/junkbot-bin.png) 16 16, auto";
+		junkbotImg.src = "images/about/junkbot.gif";
+		junkbotImg.addEventListener("mouseenter", function (event) {
+			// console.log("mouseenter, cursorHasBin =", cursorHasBin);
+			if (!cursorHasBin) {
+				return;
+			}
+			junkbotImg.src = "images/about/junkbot-collecting-bin.gif";
+			junkbotArea.style.cursor = "";
+			cursorHasBin = false;
+			// TODO: make non-looping version of GIF and increase timeout
+			// or do this differently, because setTimeout isn't reliable!
+			// It's not firing in Firefox sometimes (while loading the page?)
+			// and may not fire if the tab is in the background (is switched away from).
+			// console.log("setting timeout");
+			setTimeout(function () {
+				// console.log("timeout");
+				junkbotImg.src = "images/about/junkbot.gif";
+				junkbotArea.style.cursor = "url(images/about/junkbot-bin.png) 16 16, auto";
+				cursorHasBin = true;
+			}, 1000);
+		});
+		document.querySelector("#feeding-text").removeAttribute("hidden");
 	</script>
 </body>
 

styles/about.css

@@ -93,4 +93,17 @@ a[href^="https://98.js.org"]:focus #wooden-window-frame {
 
 #textual-paint-section li i:last-of-type {
 	color: #ff0000;
+}
+
+#junkbot-area {
+	display: inline-block;
+	padding: 50px;
+	padding-bottom: 0;
+	border: 1px solid black;
+}
+
+#feeding-text {
+	font-style: italic;
+	position: relative;
+	left: -50px;
 }