From 5c9250e5fca3bf010724a3fa395399fac07c6a2c Mon Sep 17 00:00:00 2001
From: Jack <bartnikjack@gmail.com>
Date: Fri, 4 Sep 2020 01:37:27 +0100
Subject: [PATCH] added copy words history to clipboard button

---
 public/css/style.scss |  3 +++
 public/index.html     | 15 +++++++++++++--
 public/js/script.js   | 41 ++++++++++++++++++++++-------------------
 3 files changed, 38 insertions(+), 21 deletions(-)

diff --git a/public/css/style.scss b/public/css/style.scss
index 2dfc9210a..c77f5a14d 100644
--- a/public/css/style.scss
+++ b/public/css/style.scss
@@ -2430,6 +2430,9 @@ key {
   border-radius: var(--roundness);
   cursor: pointer;
 
+  &:hover {
+    color: var(--main-color);
+  }
   &:focus {
     background: var(--sub-color);
     color: var(--main-color);
diff --git a/public/index.html b/public/index.html
index 64fd58069..88950dd7e 100644
--- a/public/index.html
+++ b/public/index.html
@@ -973,7 +973,18 @@
             <div class="loginTip">Sign in to save your results</div>
           </div>
           <input id="wordsInput" class="" tabindex="0" autocomplete="off" />
-          <div id="wordsTitle">input history</div>
+          <div id="wordsTitle">
+            input history
+            <span
+              id="copyWordsListButton"
+              class="icon-button"
+              aria-label="Copy words list"
+              data-balloon-pos="up"
+              style="display: inline-block;"
+            >
+              <i class="fas fa-copy"></i>
+            </span>
+          </div>
           <div id="timerNumber">60</div>
           <div id="miniTimerAndLiveWpm">
             <div class="time hidden">1:00</div>
@@ -1199,7 +1210,7 @@
               </div>
               <div
                 id="showWordHistoryButton"
-                aria-label="Show words history"
+                aria-label="Toggle words history"
                 data-balloon-pos="down"
                 tabindex="0"
                 onclick="this.blur();"
diff --git a/public/js/script.js b/public/js/script.js
index a98f5f32a..d48dd4b5e 100644
--- a/public/js/script.js
+++ b/public/js/script.js
@@ -347,11 +347,11 @@ function verifyUsername() {
 
   $(".nameChangeMessage").click((e) => {
     alert(`Im currently preparing the system to be ready for leaderboards and other awesome features - it looks like you need to change your display name.
-
-    It either contains special characters, or your display name is the same as someone elses and your account was made later.
-
-    Sorry for this inconvenience.
-    `);
+        
+        It either contains special characters, or your display name is the same as someone elses and your account was made later.
+        
+        Sorry for this inconvenience.
+        `);
     let newName = prompt(
       "Please provide a new username - you can use lowercase and uppercase characters, numbers and one of these special characters ( . _ - ). The new name cannot be longer than 12 characters.",
       firebase.auth().currentUser.displayName
@@ -4068,14 +4068,9 @@ $(document).keydown((event) => {
 if (firebase.app().options.projectId === "monkey-type-dev-67af4") {
   $("#top .logo .bottom").text("monkey-dev");
   $("head title").text("Monkey Dev");
-  $("body").append(`
-<div class="devIndicator tr">
-  DEV
-</div>
-<div class="devIndicator bl">
-  DEV
-</div>
-`);
+  $("body").append(
+    `<div class="devIndicator tr">DEV</div><div class="devIndicator bl">DEV</div>`
+  );
 }
 
 if (window.location.hostname === "localhost") {
@@ -4085,12 +4080,9 @@ if (window.location.hostname === "localhost") {
   $("#top .logo .top").text("localhost");
   $("head title").text($("head title").text() + " (localhost)");
   firebase.functions().useFunctionsEmulator("http://localhost:5001");
-  $("body").append(`<div class="devIndicator tl">
-  local
-</div>
-<div class="devIndicator br">
-  local
-</div>`);
+  $("body").append(
+    `<div class="devIndicator tl">local</div><div class="devIndicator br">local</div>`
+  );
 }
 
 loadConfigFromCookie();
@@ -4139,6 +4131,17 @@ $(".scrollToTopButton").click((event) => {
   window.scrollTo(0, 0);
 });
 
+$(".pageTest #copyWordsListButton").click(async (event) => {
+  try {
+    await navigator.clipboard.writeText(
+      wordsList.slice(0, inputHistory.length).join(" ")
+    );
+    showNotification("Copied to clipboard", 1000);
+  } catch (e) {
+    showNotification("Could not copy to clipboard: " + e, 5000);
+  }
+});
+
 let ctx = $("#wpmChart");
 let wpmOverTimeChart = new Chart(ctx, {
   type: "line",