Show a proper timer

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

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>

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>
+  );
+}