impr(test-screenshot): Show download screenshot button when holding shift on result page (@raaid3) (monkeytypegame#6673)

### Description

Previously, if you shift clicked on the `copy screenshot` button, you
could download a screenshot. But many users probably don't know about
this because it's not mentioned anywhere on the result page and there
are no visual indicators hinting at there being such a feature.

So I added a "(shift click to download)" message to the `aria-label` of
the `#saveScreenshot` button. I also added the ability for the icon
inside the button to switch to `fa-download` when shift is held as a
visual indicator that clicking the button would download a screenshot.

---------

Co-authored-by: Miodec <[email protected]>

Author: raaid3

frontend/src/html/pages/test.html

@@ -447,9 +447,10 @@
           <button
             class="text"
             id="saveScreenshotButton"
-            aria-label="Copy screenshot to clipboard"
+            aria-label="Copy screenshot to clipboard&#10;(shift click to download)"
             role="button"
             data-balloon-pos="down"
+            data-balloon-break
           >
             <i class="far fa-fw fa-image"></i>
           </button>

frontend/src/ts/test/test-screenshot.ts

@@ -6,7 +6,8 @@ import { getActiveFunboxesWithFunction } from "./funbox/list";
 import * as DB from "../db";
 import * as ThemeColors from "../elements/theme-colors";
 import { format } from "date-fns/format";
-
+import * as TestUI from "./test-ui";
+import * as ActivePage from "../states/active-page";
 import { getHtmlByUserFlags } from "../controllers/user-flag-controller";
 import * as Notifications from "../elements/notifications";
 import { convertRemToPixels } from "../utils/numbers";
@@ -281,4 +282,25 @@ $(".pageTest").on("click", "#saveScreenshotButton", (event) => {
   } else {
     void copyToClipboard();
   }
+
+  // reset save screenshot button icon
+  $("#saveScreenshotButton i")
+    .removeClass("fas fa-download")
+    .addClass("far fa-image");
+});
+
+$(document).on("keydown", (event) => {
+  if (!(TestUI.resultVisible && ActivePage.get() === "test")) return;
+  if (event.key !== "Shift") return;
+  $("#typingTest #result #saveScreenshotButton i")
+    .removeClass("far fa-image")
+    .addClass("fas fa-download");
+});
+
+$(document).on("keyup", (event) => {
+  if (!(TestUI.resultVisible && ActivePage.get() === "test")) return;
+  if (event.key !== "Shift") return;
+  $("#typingTest #result #saveScreenshotButton i")
+    .removeClass("fas fa-download")
+    .addClass("far fa-image");
 });