From 4d4bb4500ff1f3b2f8a6f7c20ae655ade9b58aa8 Mon Sep 17 00:00:00 2001
From: Jack <bartnikjack@gmail.com>
Date: Fri, 3 Jul 2020 00:08:00 +0100
Subject: [PATCH 1/2] testing performance improvements

---
 public/js/script.js | 45 ++++++++++++++++++++-------------------------
 1 file changed, 20 insertions(+), 25 deletions(-)

diff --git a/public/js/script.js b/public/js/script.js
index db5639c97..2ce35f57b 100644
--- a/public/js/script.js
+++ b/public/js/script.js
@@ -393,7 +393,8 @@ function updateActiveElement() {
   $($("#words .word")[currentWordIndex])
     .addClass("active")
     .removeClass("error");
-  activeWordTop = $("#words .word.active").position().top;
+  // activeWordTop = $("#words .word.active").position().top;
+  activeWordTop = document.querySelector("#words .word.active").offsetTop;
 }
 
 function compareInput(wrdIndex,input,showError) {
@@ -538,39 +539,29 @@ function updateCaretPosition() {
   if (currentLetterIndex == -1) {
     currentLetterIndex = 0;
   }
-  let currentLetter = $($("#words .word.active letter")[currentLetterIndex]);
-  if(currentLetter.length == 0) return;
-  let currentLetterPos = currentLetter.position();
-  let letterHeight = currentLetter.height();
+  let currentLetter = $("#words .word.active letter")[currentLetterIndex];
+  if($(currentLetter).length == 0) return;
+  // let currentLetterPos = currentLetter.position();
+  let currentLetterPosLeft = currentLetter.offsetLeft;
+  let currentLetterPosTop = currentLetter.offsetTop;
+  let letterHeight = $(currentLetter).height();
 
   let newTop = 0;
   let newLeft = 0;
 
-  newTop = currentLetterPos.top - letterHeight / 4;
+  newTop = currentLetterPosTop - letterHeight / 4;
   if (inputLen == 0) {
-    // caret.css({
-    //   top: currentLetterPos.top - letterHeight / 4,
-    //   left: currentLetterPos.left - caret.width() / 2
-    // });
-
-    newLeft = currentLetterPos.left - caret.width() / 2;
+    newLeft = currentLetterPosLeft - caret.width() / 2;
   } else {
-    // caret.css({
-    //   top: currentLetterPos.top - letterHeight / 4,
-    //   left: currentLetterPos.left + currentLetter.width() - caret.width() / 2
-    // });
-    newLeft = currentLetterPos.left + currentLetter.width() - caret.width() / 2;
+    newLeft = currentLetterPosLeft + $(currentLetter).width() - caret.width() / 2;
   }
 
   let duration = 0;
 
-  // if (config.smoothCaret && Math.round(caret.position().top) == Math.round(newTop)) {
-  //   duration = 100;
-  // }
 
   if (config.smoothCaret) {
     duration = 100;
-    if (Math.round(caret.position().top) != Math.round(newTop)) {
+    if (Math.round(caret.offsetTop) != Math.round(newTop)) {
       caret.css("top", newTop);
       duration = 10;
     }
@@ -1819,7 +1810,8 @@ $(document).keypress(function(event) {
   setFocus(true);
   activeWordTopBeforeJump = activeWordTop;
   compareInput(currentWordIndex,currentInput,!config.blindMode);
-  let newActiveTop = $("#words .word.active").position().top;
+  // let newActiveTop = $("#words .word.active").position().top;
+  let newActiveTop = document.querySelector("#words .word.active").offsetTop;
   if(activeWordTopBeforeJump != newActiveTop){
     activeWordJumped = true;
   }
@@ -1893,8 +1885,10 @@ $(document).keydown((event) => {
       event.preventDefault();
       let currentWord = wordsList[currentWordIndex];
       if (config.mode == "time") {
-        let currentTop = Math.floor($($("#words .word")[currentWordIndex]).position().top);
-        let nextTop = Math.floor($($("#words .word")[currentWordIndex + 1]).position().top);
+        // let currentTop = Math.floor($($("#words .word")[currentWordIndex]).position().top);
+        // let nextTop = Math.floor($($("#words .word")[currentWordIndex + 1]).position().top);
+        let currentTop = Math.floor(document.querySelectorAll("#words .word")[currentWordIndex].offsetTop);
+        let nextTop = Math.floor(document.querySelectorAll("#words .word")[currentWordIndex + 1].offsetTop);
         if (nextTop > currentTop || activeWordJumped) {
           //last word of the line
           if(currentTestLine > 0){
@@ -1909,7 +1903,8 @@ $(document).keydown((event) => {
             let wordElements = $("#words .word");
             for (let i = 0; i < currentWordIndex + 1; i++) {
               if($(wordElements[i]).hasClass('hidden')) continue;
-              let forWordTop = Math.floor($(wordElements[i]).position().top);
+              // let forWordTop = Math.floor($(wordElements[i]).position().top);
+              let forWordTop = Math.floor(wordElements[i].offsetTop);
               if(forWordTop < hideBound){
                 // $($("#words .word")[i]).addClass("hidden");
                 toHide.push($($("#words .word")[i]));

From 0a4cf6c7133b4187f308ce2db301034b4d2603a0 Mon Sep 17 00:00:00 2001
From: Jack <bartnikjack@gmail.com>
Date: Fri, 3 Jul 2020 00:57:20 +0100
Subject: [PATCH 2/2] fixed smooth caret not working

---
 public/js/script.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/public/js/script.js b/public/js/script.js
index 2ce35f57b..6c3ddb8c4 100644
--- a/public/js/script.js
+++ b/public/js/script.js
@@ -561,7 +561,7 @@ function updateCaretPosition() {
 
   if (config.smoothCaret) {
     duration = 100;
-    if (Math.round(caret.offsetTop) != Math.round(newTop)) {
+    if (Math.round(caret[0].offsetTop) != Math.round(newTop)) {
       caret.css("top", newTop);
       duration = 10;
     }