From f617689d2bcccf16d982371b1e309234a2cbfd5f Mon Sep 17 00:00:00 2001
From: Hazem Krimi <me@hazemkrimi.tech>
Date: Sat, 15 Feb 2025 19:30:03 +0100
Subject: [PATCH] Show a proper timer

---
 client/src/components/Code/index.tsx  | 2 +-
 client/src/components/Stats/index.tsx | 5 +++--
 client/src/components/Stats/utils.tsx | 8 ++++++++
 3 files changed, 12 insertions(+), 3 deletions(-)
 create mode 100644 client/src/components/Stats/utils.tsx

diff --git a/client/src/components/Code/index.tsx b/client/src/components/Code/index.tsx
index 7134614..5e496dc 100644
--- a/client/src/components/Code/index.tsx
+++ b/client/src/components/Code/index.tsx
@@ -70,7 +70,7 @@ function Code({code, loaded}: CodeProps) {
     const incorrectlyTyped = characters.filter(char => !char).length;
 
     if (timer > 0) {
-      setScore((typed / 5 - incorrectlyTyped) / (timer / 60));
+      setScore(Math.abs(typed / 5 - incorrectlyTyped) / (timer / 60));
       setAccuracy(correctlyTyped / typed * 100);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
diff --git a/client/src/components/Stats/index.tsx b/client/src/components/Stats/index.tsx
index 18097cc..50b6443 100644
--- a/client/src/components/Stats/index.tsx
+++ b/client/src/components/Stats/index.tsx
@@ -1,12 +1,13 @@
 import { useTypingContext } from "contexts/typing";
 
 import './index.css';
+import { renderTimer } from "./utils";
 
 type StatsProps = {
   loaded: boolean;
 }
 
-function Score({loaded}: StatsProps) {
+function Score({ loaded }: StatsProps) {
   const {
     timer,
     score,
@@ -17,7 +18,7 @@ function Score({loaded}: StatsProps) {
 
   return (
     <div className='score'>
-      <p>Time: {timer}</p>
+      {renderTimer(timer)}
       <p>WPM: {Math.round(score)}</p>
       <p>Accuracy: {Math.round(accuracy)}%</p>
     </div>
diff --git a/client/src/components/Stats/utils.tsx b/client/src/components/Stats/utils.tsx
new file mode 100644
index 0000000..ff1906b
--- /dev/null
+++ b/client/src/components/Stats/utils.tsx
@@ -0,0 +1,8 @@
+export function renderTimer(timer: number) {
+  const leftValue = Math.round(timer / 60);
+  const rightValue = timer < 60 ? timer : timer % 60;
+
+  return (
+    <p>Time: {leftValue < 10 && 0}{leftValue}:{rightValue < 10 && 0}{rightValue}</p>
+  );
+}