cool pufferchick on hover

3 files changed, 20 insertions, 3 deletions

diff --git a/src/SMAPI.Web/Views/Index/Index.cshtml b/src/SMAPI.Web/Views/Index/Index.cshtml
index 4efb9f8a..c13c94a5 100644
--- a/src/SMAPI.Web/Views/Index/Index.cshtml
+++ b/src/SMAPI.Web/Views/Index/Index.cshtml
@@ -4,6 +4,7 @@
 @model StardewModdingAPI.Web.ViewModels.IndexModel
 @section Head {
     <link rel="stylesheet" href="~/Content/css/index.css" />
+    <script src="~/Content/js/index.js"></script>
 }
 
 <p id="blurb">
@@ -13,14 +14,14 @@
 </p>
 
 <div id="call-to-action">
-    <a href="@Model.StableVersion.DownloadUrl" class="main-cta">Download SMAPI @Model.StableVersion.Version</a><br />
+    <a href="@Model.StableVersion.DownloadUrl" class="main-cta download">Download SMAPI @Model.StableVersion.Version</a><br />
     @if (Model.BetaVersion != null)
     {
-        <a href="@Model.BetaVersion.DownloadUrl" class="secondary-cta">Download SMAPI @Model.BetaVersion.Version<br /><small>for Stardew Valley 1.3 beta</small></a><br />
+        <a href="@Model.BetaVersion.DownloadUrl" class="secondary-cta download">Download SMAPI @Model.BetaVersion.Version<br /><small>for Stardew Valley 1.3 beta</small></a><br />
     }
     <a href="https://stardewvalleywiki.com/Modding:Installing_SMAPI" class="secondary-cta">Install guide</a><br />
     <a href="https://stardewvalleywiki.com/Modding:Player_FAQs" class="secondary-cta">FAQs</a><br />
-    <img src="favicon.ico" />
+    <img id="pufferchick" src="favicon.ico" />
 </div>
 
 <h2>Get help</h2>
diff --git a/src/SMAPI.Web/wwwroot/Content/images/pufferchick-cool.png b/src/SMAPI.Web/wwwroot/Content/images/pufferchick-cool.png
new file mode 100644
index 00000000..63eb8970
--- /dev/null
+++ b/src/SMAPI.Web/wwwroot/Content/images/pufferchick-cool.png
diff --git a/src/SMAPI.Web/wwwroot/Content/js/index.js b/src/SMAPI.Web/wwwroot/Content/js/index.js
new file mode 100644
index 00000000..54fdf6d9
--- /dev/null
+++ b/src/SMAPI.Web/wwwroot/Content/js/index.js
@@ -0,0 +1,16 @@
+document.addEventListener('DOMContentLoaded', setupHover, false);
+
+function setupHover() {
+    var pufferchick = document.getElementById("pufferchick");
+    var downloadLinks = document.getElementsByClassName("download");
+
+    for (var downloadLink of downloadLinks) {
+        downloadLink.addEventListener("mouseenter", function () {
+            pufferchick.src = "Content/images/pufferchick-cool.png";
+        });
+
+        downloadLink.addEventListener("mouseleave", function () {
+            pufferchick.src = "favicon.ico";
+        });
+    }
+}