diff --git a/about.html b/about.html index 341ee84..0250e3c 100644 --- a/about.html +++ b/about.html @@ -221,6 +221,12 @@

Other Projects

+
+ + LEGO Junkbot minifig eating a recycling bin + +

@@ -234,10 +240,6 @@ Guitar - - LEGO Junkbot minifig eating a recycling bin - film reel @@ -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"); diff --git a/images/about/junkbot-bin.png b/images/about/junkbot-bin.png new file mode 100644 index 0000000..8e22d47 Binary files /dev/null and b/images/about/junkbot-bin.png differ diff --git a/images/about/junkbot.gif b/images/about/junkbot.gif new file mode 100644 index 0000000..32ae2f0 Binary files /dev/null and b/images/about/junkbot.gif differ diff --git a/styles/about.css b/styles/about.css index 2dd1b42..3502135 100644 --- a/styles/about.css +++ b/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; } \ No newline at end of file