From 9b00490aa71f69a8c9604141e94888a98c55cde2 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Sun, 29 Jun 2025 04:43:37 +0000
Subject: [PATCH] feat: Revamp modes, texts, timer, and UI

This commit introduces several enhancements and fixes:

- **Timer Fix:** Refactored timer logic in `useTypingTest.ts` for improved stability and accuracy. Consolidated timer effects and ensured proper state resets on test completion, reset, or mode/duration changes.
- **Developer Mode Revamp:**
    - Significantly expanded code snippets for JavaScript, Python, Java, C#, and Go.
    - Added TypeScript as a new selectable language with its own code snippets.
    - Updated UI components (`ModeSelector`, `TypingTest`) to support TypeScript.
- **Flirty Mode Revamp:**
    - Increased the variety of flirty text messages.
    - Added subtle UI enhancements (themed border/shadow for `TextDisplay`) when Flirty mode is active.
- **Expanded Normal Texts:** Added more sentences to the "normal" mode text collection to increase variety.
- **UI Upgrades (General):**
    - Implemented a custom focus ring utility (`custom-focus-ring`) for better accessibility and applied it to various interactive elements (mode selectors, buttons, links).
    - Made custom clickable divs (Header logo, mode selectors) keyboard accessible.
    - Updated GitHub link in Footer and standardized copyright notice.
    - Ensured consistency with existing UI theming (shadcn/ui).
---
 client/src/components/Footer.tsx              |  10 +-
 client/src/components/Header.tsx              |   5 +-
 client/src/components/typing/ModeSelector.tsx |  28 +-
 client/src/components/typing/TextDisplay.tsx  |  14 +-
 client/src/components/typing/TypingTest.tsx   |   7 +-
 client/src/index.css                          |   4 +
 client/src/lib/helpers/textGenerator.ts       |  57 ++++-
 client/src/lib/hooks/useTypingTest.ts         | 242 ++++++++----------
 8 files changed, 207 insertions(+), 160 deletions(-)

diff --git a/client/src/components/Footer.tsx b/client/src/components/Footer.tsx
index a1fa13a..d5a3a10 100644
--- a/client/src/components/Footer.tsx
+++ b/client/src/components/Footer.tsx
@@ -1,12 +1,12 @@
 export default function Footer() {
   return (
-    <footer className="py-6 px-4 text-center text-secondary text-sm">
+    <footer className="py-6 px-4 text-center text-secondary text-sm border-t border-border/20">
       <div className="flex justify-center space-x-6 mb-2">
-        <a href="#" className="hover:text-accent transition-colors">About</a>
-        <a href="#" className="hover:text-accent transition-colors">Support</a>
-        <a href="#" className="hover:text-accent transition-colors">GitHub</a>
+        <a href="#" className="hover:text-accent transition-colors custom-focus-ring rounded-sm px-1">About</a>
+        <a href="#" className="hover:text-accent transition-colors custom-focus-ring rounded-sm px-1">Support</a>
+        <a href="https://github.com/moah0911/TypeNinja" target="_blank" rel="noopener noreferrer" className="hover:text-accent transition-colors custom-focus-ring rounded-sm px-1">GitHub</a>
       </div>
-      <p>© {new Date().getFullYear()} TypeMaster</p>
+      <p>© {new Date().getFullYear()} FlexType</p> {/* Changed TypeMaster to FlexType to match Header */}
     </footer>
   );
 }
diff --git a/client/src/components/Header.tsx b/client/src/components/Header.tsx
index 5d6d3b0..f1b1433 100644
--- a/client/src/components/Header.tsx
+++ b/client/src/components/Header.tsx
@@ -20,7 +20,10 @@ export default function Header() {
       <div className="flex items-center relative z-10">
         <div 
           onClick={navigateToHome}
-          className="flex items-center gap-3 hover:opacity-90 transition-all duration-300 cursor-pointer group"
+          className="flex items-center gap-3 hover:opacity-90 transition-all duration-300 cursor-pointer group custom-focus-ring rounded-lg p-1"
+          role="button"
+          tabIndex={0}
+          onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') navigateToHome(e as any); }}
         >
           <div className="relative">
             <div className="absolute -inset-1 bg-gradient-to-r from-sky-500/30 to-indigo-500/30 rounded-full blur-md opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
diff --git a/client/src/components/typing/ModeSelector.tsx b/client/src/components/typing/ModeSelector.tsx
index 6837fce..25f1896 100644
--- a/client/src/components/typing/ModeSelector.tsx
+++ b/client/src/components/typing/ModeSelector.tsx
@@ -20,6 +20,7 @@ export default function ModeSelector({
   // Define programming languages for developer mode
   const languages = [
     { id: 'developer', name: 'JavaScript', color: '#F7DF1E' },
+    { id: 'typescript', name: 'TypeScript', color: '#3178C6' },
     { id: 'python', name: 'Python', color: '#3776AB' },
     { id: 'java', name: 'Java', color: '#B07219' },
     { id: 'csharp', name: 'C#', color: '#178600' },
@@ -29,7 +30,7 @@ export default function ModeSelector({
   // Show languages dropdown when developer mode is selected
   useEffect(() => {
     if (selectedMode.startsWith('developer') || 
-        ['python', 'java', 'csharp', 'go'].includes(selectedMode)) {
+        ['typescript', 'python', 'java', 'csharp', 'go'].includes(selectedMode)) {
       setShowLanguages(true);
       
       // Find the matching language when mode changes
@@ -55,8 +56,10 @@ export default function ModeSelector({
       {/* Mode Selector */}
       <div className="flex justify-center space-x-8 mb-5">
         <div 
-          className={`relative cursor-pointer mode-indicator group`}
+          className={`relative cursor-pointer mode-indicator group custom-focus-ring rounded-lg`}
           onClick={() => onModeChange('normal')}
+          tabIndex={0}
+          onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') onModeChange('normal'); }}
         >
           <div className={`flex flex-col items-center px-6 py-2 rounded-lg transition-all duration-300
             ${selectedMode === 'normal' 
@@ -75,8 +78,10 @@ export default function ModeSelector({
         </div>
         
         <div 
-          className={`relative cursor-pointer mode-indicator group`}
+          className={`relative cursor-pointer mode-indicator group custom-focus-ring rounded-lg`}
           onClick={() => onModeChange('flirty')}
+          tabIndex={0}
+          onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') onModeChange('flirty'); }}
         >
           <div className={`flex flex-col items-center px-6 py-2 rounded-lg transition-all duration-300
             ${selectedMode === 'flirty' 
@@ -95,11 +100,14 @@ export default function ModeSelector({
         </div>
         
         <div 
-          className={`relative cursor-pointer mode-indicator group`}
+          className={`relative cursor-pointer mode-indicator group custom-focus-ring rounded-lg`}
           onClick={() => onModeChange(selectedLanguage || 'developer')}
+          tabIndex={0}
+          onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') onModeChange(selectedLanguage || 'developer'); }}
         >
           <div className={`flex flex-col items-center px-6 py-2 rounded-lg transition-all duration-300
-            ${selectedMode === 'developer' || 
+            ${selectedMode === 'developer' ||
+              selectedMode === 'typescript' ||
               selectedMode === 'python' || 
               selectedMode === 'java' || 
               selectedMode === 'csharp' || 
@@ -107,7 +115,8 @@ export default function ModeSelector({
               ? 'bg-gradient-to-r from-cyan-500/20 to-teal-500/20 shadow-lg border border-teal-500/20' 
               : 'hover:bg-black/10 border border-transparent'}`}>
             <span className={`font-medium text-base
-              ${selectedMode === 'developer' || 
+              ${selectedMode === 'developer' ||
+                selectedMode === 'typescript' ||
                 selectedMode === 'python' || 
                 selectedMode === 'java' || 
                 selectedMode === 'csharp' || 
@@ -116,7 +125,8 @@ export default function ModeSelector({
                 : 'text-secondary group-hover:text-teal-400 transition-colors'}`}>
               Developer
             </span>
-            {(selectedMode === 'developer' || 
+            {(selectedMode === 'developer' ||
+              selectedMode === 'typescript' ||
               selectedMode === 'python' || 
               selectedMode === 'java' || 
               selectedMode === 'csharp' || 
@@ -133,7 +143,7 @@ export default function ModeSelector({
           {languages.map(language => (
             <button
               key={language.id}
-              className={`py-2 px-4 rounded-lg transition-all duration-200
+              className={`py-2 px-4 rounded-lg transition-all duration-200 custom-focus-ring
                 ${selectedLanguage === language.id 
                   ? 'shadow-md' 
                   : 'hover:bg-black/10 bg-black/5'} 
@@ -157,7 +167,7 @@ export default function ModeSelector({
           {durations.map(duration => (
             <button
               key={duration}
-              className={`py-1.5 px-4 rounded-md text-sm font-medium transition-all duration-200
+              className={`py-1.5 px-4 rounded-md text-sm font-medium transition-all duration-200 custom-focus-ring
                 ${selectedDuration === duration 
                   ? 'bg-gradient-to-r from-sky-500/30 to-indigo-500/30 text-white shadow-sm' 
                   : 'text-secondary hover:text-sky-200'}`}
diff --git a/client/src/components/typing/TextDisplay.tsx b/client/src/components/typing/TextDisplay.tsx
index 389da04..300b6f9 100644
--- a/client/src/components/typing/TextDisplay.tsx
+++ b/client/src/components/typing/TextDisplay.tsx
@@ -10,6 +10,7 @@ interface TextDisplayProps {
   loading: boolean;
   onClick: () => void;
   onKeyDown: (e: KeyboardEvent<HTMLDivElement>) => void;
+  mode: string;
 }
 
 export default function TextDisplay({
@@ -20,10 +21,11 @@ export default function TextDisplay({
   isActive,
   loading,
   onClick,
-  onKeyDown
+  onKeyDown,
+  mode
 }: TextDisplayProps) {
   const typingAreaRef = useRef<HTMLDivElement>(null);
-  
+  const isFlirtyMode = mode === 'flirty';
   // Focus the typing area when it changes
   useEffect(() => {
     if (typingAreaRef.current) {
@@ -90,13 +92,15 @@ export default function TextDisplay({
   return (
     <div 
       ref={typingAreaRef}
-      className="relative font-mono text-lg leading-relaxed text-secondary overflow-hidden bg-gradient-to-b from-background/90 to-background p-6 rounded-xl mb-4 select-none outline-none border border-accent/15 shadow-xl transition-all duration-300 hover:border-accent/30 backdrop-blur-sm"
+      className={`relative font-mono text-lg leading-relaxed text-secondary overflow-hidden bg-gradient-to-b from-background/90 to-background p-6 rounded-xl mb-4 select-none outline-none border shadow-xl transition-all duration-300 backdrop-blur-sm
+      ${isFlirtyMode ? 'border-pink-500/40 hover:border-pink-500/60' : 'border-accent/15 hover:border-accent/30'}`}
       tabIndex={0}
       onClick={onClick}
       onKeyDown={onKeyDown}
-      style={{boxShadow: "0 10px 30px -15px rgba(0, 0, 0, 0.5), 0 0 20px rgba(0, 120, 255, 0.05)"}}
+      style={{boxShadow: `0 10px 30px -15px rgba(0, 0, 0, 0.5), 0 0 20px ${isFlirtyMode ? 'rgba(236, 72, 153, 0.1)' : 'rgba(0, 120, 255, 0.05)'}`}}
     >
-      <div className="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-sky-500/30 to-indigo-500/30 rounded-t-xl"></div>
+      <div className={`absolute top-0 left-0 w-full h-1 rounded-t-xl
+        ${isFlirtyMode ? 'bg-gradient-to-r from-pink-500/40 to-red-500/40' : 'bg-gradient-to-r from-sky-500/30 to-indigo-500/30'}`}></div>
       <div className="typing-animation whitespace-pre-wrap tracking-wide">
         {renderChars()}
       </div>
diff --git a/client/src/components/typing/TypingTest.tsx b/client/src/components/typing/TypingTest.tsx
index c8e38d9..5c838ef 100644
--- a/client/src/components/typing/TypingTest.tsx
+++ b/client/src/components/typing/TypingTest.tsx
@@ -60,13 +60,15 @@ const TypingTest = forwardRef<TypingTestRef, TypingTestProps>(({ onTestComplete,
     
     // Show developer mode preview for any programming language selection
     // if not already in a programming language mode
-    const isDeveloperMode = (mode === "developer" || 
+    const isDeveloperMode = (mode === "developer" ||
+                             mode === "typescript" ||
                              mode === "python" || 
                              mode === "java" || 
                              mode === "csharp" || 
                              mode === "go");
                              
-    const wasAlreadyInDeveloperMode = (typingState.mode === "developer" || 
+    const wasAlreadyInDeveloperMode = (typingState.mode === "developer" ||
+                                       typingState.mode === "typescript" ||
                                        typingState.mode === "python" || 
                                        typingState.mode === "java" || 
                                        typingState.mode === "csharp" || 
@@ -106,6 +108,7 @@ const TypingTest = forwardRef<TypingTestRef, TypingTestProps>(({ onTestComplete,
           loading={loadingText}
           onClick={handleTypingAreaClick}
           onKeyDown={handleKeyDown}
+          mode={typingState.mode}
         />
       </div>
     </>
diff --git a/client/src/index.css b/client/src/index.css
index d944b68..53de43a 100644
--- a/client/src/index.css
+++ b/client/src/index.css
@@ -130,4 +130,8 @@
   .animate-blink {
     animation: blink 1s step-end infinite;
   }
+
+  .custom-focus-ring {
+    @apply focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-background focus-visible:ring-primary;
+  }
 }
diff --git a/client/src/lib/helpers/textGenerator.ts b/client/src/lib/helpers/textGenerator.ts
index 46e207c..a9597a1 100644
--- a/client/src/lib/helpers/textGenerator.ts
+++ b/client/src/lib/helpers/textGenerator.ts
@@ -10,7 +10,18 @@ const textCollections = {
     "Crazy Fredrick bought many very exquisite opal jewels.",
     "The five boxing wizards jump quickly.",
     "Jinxed wizards pluck ivy from the big quilt.",
-    "Waltz, bad nymph, for quick jigs vex."
+    "Waltz, bad nymph, for quick jigs vex.",
+    "Quick brown foxes leap over lazy dogs.",
+    "Heavy boxes perform quick waltzes and jigs.",
+    "The job requires extra pluck and zeal from every young wage earner.",
+    "A mad boxer shot a quick, gloved jab to the jaw of his dizzy opponent.",
+    "Six big devils from Japan quickly forgot how to waltz.",
+    "My girl wove six dozen plaid jackets before she quit.",
+    "Sixty zippers were quickly picked from the woven jute bag.",
+    "Big July earthquakes confound zany experimental vow.",
+    "Foxy parsons quiz and cajole the lovably dim wiki-girl.",
+    "Cute, kind, jovial, foxy, zealous, web-browsing nymph.",
+    "Exploring the zoo, we marvelled at the lazy jaguar and the quick, vibrant phoenix."
   ],
   flirty: [
     "Your eyes are like stars, shining brightly in the night sky, guiding me home.",
@@ -22,7 +33,17 @@ const textCollections = {
     "Your presence in my life is like finding a rare gem in a field of stones.",
     "If kisses were snowflakes, I'd send you a blizzard of affection.",
     "My heart beats a special rhythm whenever you're near, a song only you can inspire.",
-    "Like a butterfly drawn to a beautiful flower, I'm captivated by your charm and grace."
+    "Like a butterfly drawn to a beautiful flower, I'm captivated by your charm and grace.",
+    "Are you a magician? Because whenever I look at you, everyone else disappears.",
+    "I must be a snowflake, because I've fallen for you.",
+    "If you were a vegetable, you'd be a cute-cumber.",
+    "Do you believe in love at first type, or should I type this again for you?",
+    "My keyboard is getting jealous of the attention I'm giving your messages.",
+    "You must be made of copper and tellurium, because you're Cu-Te.",
+    "I'm not a photographer, but I can definitely picture us together.",
+    "Was your father a thief? Because someone stole the stars from the sky and put them in your eyes.",
+    "If being sexy was a crime, you'd be guilty as charged.",
+    "Can I follow you home? Cause my parents always told me to follow my dreams."
   ],
   // JavaScript code examples
   developer: [
@@ -30,7 +51,17 @@ const textCollections = {
     "const createTypingTest = ({ mode, duration }) => {\n  return {\n    mode,\n    duration,\n    started: false,\n    completed: false,\n    startTime: null,\n    errors: 0,\n    accuracy: 100\n  };\n};",
     "interface TypingResult {\n  wpm: number;\n  accuracy: number;\n  duration: number;\n  characters: number;\n  errors: number;\n  mode: string;\n}",
     "class TextGenerator {\n  constructor(collection) {\n    this.collection = collection;\n  }\n  \n  getRandomText() {\n    const index = Math.floor(Math.random() * this.collection.length);\n    return this.collection[index];\n  }\n}",
-    "function handleKeyPress(event) {\n  if (!isTypingActive) {\n    startTest();\n    return;\n  }\n  \n  const expectedChar = currentText[currentPosition];\n  const typedChar = event.key;\n  \n  if (typedChar === expectedChar) {\n    correctChars++;\n  } else {\n    errorChars++;\n  }\n  \n  currentPosition++;\n  updateDisplay();\n}"
+    "function handleKeyPress(event) {\n  if (!isTypingActive) {\n    startTest();\n    return;\n  }\n  \n  const expectedChar = currentText[currentPosition];\n  const typedChar = event.key;\n  \n  if (typedChar === expectedChar) {\n    correctChars++;\n  } else {\n    errorChars++;\n  }\n  \n  currentPosition++;\n  updateDisplay();\n}",
+    "async function fetchData(url) {\n  try {\n    const response = await fetch(url);\n    if (!response.ok) {\n      throw new Error(`HTTP error! status: ${response.status}`);\n    }\n    const data = await response.json();\n    return data;\n  } catch (error) {\n    console.error('Fetch error:', error);\n  }\n}",
+    "const numbers = [1, 2, 3, 4, 5];\nconst doubled = numbers.map(num => num * 2);\nconsole.log(doubled); // Output: [2, 4, 6, 8, 10]",
+    "document.addEventListener('DOMContentLoaded', () => {\n  const button = document.getElementById('myButton');\n  button.addEventListener('click', () => {\n    alert('Button clicked!');\n  });\n});"
+  ],
+  typescript: [
+    "interface UserProfile {\n  id: number;\n  username: string;\n  email?: string;\n  isActive: boolean;\n}\n\nfunction getUserProfile(userId: number): UserProfile | null {\n  // Implementation to fetch user profile\n  if (userId === 1) {\n    return { id: 1, username: 'testuser', isActive: true };\n  }\n  return null;\n}",
+    "class Greeter {\n  private greeting: string;\n  constructor(message: string) {\n    this.greeting = message;\n  }\n  greet(): string {\n    return 'Hello, ' + this.greeting;\n  }\n}\n\nlet greeter = new Greeter('world');\nconsole.log(greeter.greet());",
+    "type Point = { x: number; y: number };\nfunction printCoord(pt: Point) {\n  console.log(\"The coordinate's x value is \" + pt.x);\n  console.log(\"The coordinate's y value is \" + pt.y);\n}\nprintCoord({ x: 100, y: 200 });",
+    "async function processData<T>(data: T[]): Promise<T[]> {\n  return new Promise((resolve) => {\n    setTimeout(() => {\n      const processed = data.map(item => ({ ...item, processed: true }));\n      resolve(processed);\n    }, 1000);\n  });\n}",
+    "enum Direction {\n  Up = 'UP',\n  Down = 'DOWN',\n  Left = 'LEFT',\n  Right = 'RIGHT',\n}\nlet move: Direction = Direction.Left;"
   ],
   // Python code examples
   python: [
@@ -38,7 +69,10 @@ const textCollections = {
     "class TypingTest:\n    def __init__(self, mode, duration):\n        self.mode = mode\n        self.duration = duration\n        self.started = False\n        self.completed = False\n        self.start_time = None\n        self.errors = 0\n        self.accuracy = 100",
     "def get_random_text(collection):\n    \"\"\"Return a random text from the collection.\"\"\"\n    import random\n    return random.choice(collection)",
     "def handle_keypress(event):\n    global is_typing_active, current_position\n    \n    if not is_typing_active:\n        start_test()\n        return\n    \n    expected_char = current_text[current_position]\n    typed_char = event.char\n    \n    if typed_char == expected_char:\n        correct_chars += 1\n    else:\n        error_chars += 1\n        \n    current_position += 1\n    update_display()",
-    "from typing import List, Dict, Optional\n\nclass TextGenerator:\n    def __init__(self, texts: List[str]):\n        self.texts = texts\n        \n    def get_text_for_duration(self, duration: int) -> str:\n        \"\"\"Returns text sized for the given duration in seconds.\"\"\"\n        target_length = duration * 5\n        result = \"\"\n        \n        while len(result) < target_length:\n            result += random.choice(self.texts) + \" \"\n            \n        return result.strip()"
+    "from typing import List, Dict, Optional\n\nclass TextGenerator:\n    def __init__(self, texts: List[str]):\n        self.texts = texts\n        \n    def get_text_for_duration(self, duration: int) -> str:\n        \"\"\"Returns text sized for the given duration in seconds.\"\"\"\n        target_length = duration * 5\n        result = \"\"\n        \n        while len(result) < target_length:\n            result += random.choice(self.texts) + \" \"\n            \n        return result.strip()",
+    "import asyncio\n\nasync def main():\n    print('Hello')\n    await asyncio.sleep(1)\n    print('World')",
+    "my_list = [x**2 for x in range(10) if x % 2 == 0]\nprint(my_list)  # Output: [0, 4, 16, 36, 64]",
+    "# This is a comment\ndef factorial(n):\n    if n == 0:\n        return 1\n    else:\n        return n * factorial(n-1)"
   ],
   // Java code examples
   java: [
@@ -46,7 +80,10 @@ const textCollections = {
     "public int calculateWPM(int typedChars, int timeInSeconds) {\n    double minutes = timeInSeconds / 60.0;\n    double words = typedChars / 5.0; // Standard: 5 chars = 1 word\n    return (int) Math.round(words / minutes);\n}",
     "import java.util.Random;\nimport java.util.List;\n\npublic class TextGenerator {\n    private List<String> collection;\n    \n    public TextGenerator(List<String> collection) {\n        this.collection = collection;\n    }\n    \n    public String getRandomText() {\n        Random rand = new Random();\n        int index = rand.nextInt(collection.size());\n        return collection.get(index);\n    }\n}",
     "public void handleKeyPress(KeyEvent event) {\n    if (!isTypingActive) {\n        startTest();\n        return;\n    }\n    \n    char expectedChar = currentText.charAt(currentPosition);\n    char typedChar = event.getKeyChar();\n    \n    if (typedChar == expectedChar) {\n        correctChars++;\n    } else {\n        errorChars++;\n    }\n    \n    currentPosition++;\n    updateDisplay();\n}",
-    "import java.util.*;\n\npublic interface TypingResult {\n    int getWpm();\n    double getAccuracy();\n    int getDuration();\n    int getCharacters();\n    int getErrors();\n    String getMode();\n}"
+    "import java.util.*;\n\npublic interface TypingResult {\n    int getWpm();\n    double getAccuracy();\n    int getDuration();\n    int getCharacters();\n    int getErrors();\n    String getMode();\n}",
+    "import java.util.stream.Collectors;\nList<String> strings = Arrays.asList(\"abc\", \"\", \"bc\", \"efg\", \"abcd\", \"\", \"jkl\");\nList<String> filtered = strings.stream().filter(string -> !string.isEmpty()).collect(Collectors.toList());",
+    "// Example of a simple for loop\nfor (int i = 0; i < 5; i++) {\n  System.out.println(\"Iteration: \" + i);\n}",
+    "public static void main(String[] args) {\n    System.out.println(\"Hello, Java World!\");\n    MyClass myObject = new MyClass();\n    myObject.sampleMethod();\n}"
   ],
   // C# code examples
   csharp: [
@@ -54,7 +91,10 @@ const textCollections = {
     "public int CalculateWPM(int typedChars, int timeInSeconds)\n{\n    double minutes = timeInSeconds / 60.0;\n    double words = typedChars / 5.0; // Standard: 5 chars = 1 word\n    return (int)Math.Round(words / minutes);\n}",
     "using System;\nusing System.Collections.Generic;\n\npublic class TextGenerator\n{\n    private List<string> _collection;\n    \n    public TextGenerator(List<string> collection)\n    {\n        _collection = collection;\n    }\n    \n    public string GetRandomText()\n    {\n        Random random = new Random();\n        int index = random.Next(_collection.Count);\n        return _collection[index];\n    }\n}",
     "private void HandleKeyPress(object sender, KeyEventArgs e)\n{\n    if (!_isTypingActive)\n    {\n        StartTest();\n        return;\n    }\n    \n    char expectedChar = _currentText[_currentPosition];\n    char typedChar = e.KeyChar;\n    \n    if (typedChar == expectedChar)\n    {\n        _correctChars++;\n    }\n    else\n    {\n        _errorChars++;\n    }\n    \n    _currentPosition++;\n    UpdateDisplay();\n}",
-    "public interface ITypingResult\n{\n    int Wpm { get; }\n    double Accuracy { get; }\n    int Duration { get; }\n    int Characters { get; }\n    int Errors { get; }\n    string Mode { get; }\n}"
+    int Wpm { get; }\n    double Accuracy { get; }\n    int Duration { get; }\n    int Characters { get; }\n    int Errors { get; }\n    string Mode { get; }\n}",
+    "using System.Linq;\nint[] numbers = { 5, 4, 1, 3, 9, 8, 6, 7, 2, 0 };\nvar lowNums = numbers.Where(n => n < 5);\nConsole.WriteLine(\"Numbers < 5:\");\nforeach (var x in lowNums)\n{\n    Console.WriteLine(x);\n}",
+    "public async Task<string> GetDataAsync(string url)\n{\n    using (HttpClient client = new HttpClient())\n    {\n        HttpResponseMessage response = await client.GetAsync(url);\n        response.EnsureSuccessStatusCode();\n        return await response.Content.ReadAsStringAsync();\n    }\n}",
+    "// Simple C# class\npublic class Customer\n{\n    public int Id { get; set; }\n    public string Name { get; set; }\n    public void PrintCustomerInfo()\n    {\n        Console.WriteLine($\"Customer ID: {Id}, Name: {Name}\");\n    }\n}"
   ],
   // Go code examples
   go: [
@@ -62,7 +102,10 @@ const textCollections = {
     "package main\n\ntype TypingTest struct {\n\tMode      string\n\tDuration  int\n\tStarted   bool\n\tCompleted bool\n\tStartTime int64\n\tErrors    int\n\tAccuracy  float64\n}\n\nfunc NewTypingTest(mode string, duration int) *TypingTest {\n\treturn &TypingTest{\n\t\tMode:      mode,\n\t\tDuration:  duration,\n\t\tStarted:   false,\n\t\tCompleted: false,\n\t\tStartTime: 0,\n\t\tErrors:    0,\n\t\tAccuracy:  100.0,\n\t}\n}",
     "package main\n\nimport (\n\t\"math/rand\"\n\t\"time\"\n)\n\ntype TextGenerator struct {\n\tcollection []string\n}\n\nfunc NewTextGenerator(collection []string) *TextGenerator {\n\treturn &TextGenerator{collection: collection}\n}\n\nfunc (g *TextGenerator) GetRandomText() string {\n\trand.Seed(time.Now().UnixNano())\n\tindex := rand.Intn(len(g.collection))\n\treturn g.collection[index]\n}",
     "package main\n\nimport \"fmt\"\n\ntype TypingResult interface {\n\tGetWPM() int\n\tGetAccuracy() float64\n\tGetDuration() int\n\tGetCharacters() int\n\tGetErrors() int\n\tGetMode() string\n}",
-    "package main\n\nfunc handleKeyPress(event KeyEvent) {\n\tif !isTypingActive {\n\t\tstartTest()\n\t\treturn\n\t}\n\t\n\texpectedChar := currentText[currentPosition]\n\ttypedChar := event.Key\n\t\n\tif typedChar == expectedChar {\n\t\tcorrectChars++\n\t} else {\n\t\terrorChars++\n\t}\n\t\n\tcurrentPosition++\n\tupdateDisplay()\n}"
+	}\n\t\n\texpectedChar := currentText[currentPosition]\n\ttypedChar := event.Key\n\t\n\tif typedChar == expectedChar {\n\t\tcorrectChars++\n\t} else {\n\t\terrorChars++\n\t}\n\t\n\tcurrentPosition++\n\tupdateDisplay()\n}",
+    "// Simple Go function with a loop\nfunc printNumbers(n int) {\n    for i := 0; i < n; i++ {\n        fmt.Println(i)\n    }\n}",
+    "// Go channel example\nfunc worker(id int, jobs <-chan int, results chan<- int) {\n    for j := range jobs {\n        fmt.Println(\"worker\", id, \"started job\", j)\n        time.Sleep(time.Second)\n        fmt.Println(\"worker\", id, \"finished job\", j)\n        results <- j * 2\n    }\n}",
+    "type Server struct {\n    Host string\n    Port int\n}\n\nfunc (s *Server) Start() error {\n    address := fmt.Sprintf(\"%s:%d\", s.Host, s.Port)\n    fmt.Println(\"Starting server on\", address)\n    // Actual server start logic here\n    return nil\n}"
   ]
 };
 
diff --git a/client/src/lib/hooks/useTypingTest.ts b/client/src/lib/hooks/useTypingTest.ts
index 34a8e4a..9f8ffae 100644
--- a/client/src/lib/hooks/useTypingTest.ts
+++ b/client/src/lib/hooks/useTypingTest.ts
@@ -81,7 +81,7 @@ const textCache: TextCache = {};
 const fetchLock = { isLocked: false };
 
 // List of all available modes for preloading
-const ALL_MODES = ["normal", "flirty", "developer", "python", "java", "csharp", "go"];
+const ALL_MODES = ["normal", "flirty", "developer", "typescript", "python", "java", "csharp", "go"];
 const ALL_DURATIONS = [15, 30, 60, 120];
 
 export function useTypingTest({ duration, onComplete }: UseTypingTestProps) {
@@ -289,169 +289,149 @@ export function useTypingTest({ duration, onComplete }: UseTypingTestProps) {
   
   // Define endTest first, before other useEffects that might call it
   const endTest = useCallback(() => {
-    // Clear timer interval if exists
     if (intervalRef.current) {
       clearInterval(intervalRef.current);
       intervalRef.current = null;
     }
-    
-    // Calculate final stats
+
     const correctCount = typingState.correctChars.length;
     const totalTyped = correctCount + typingState.incorrectChars.length;
-    
-    // Show results even if the user hasn't typed anything when time runs out
-    // (which would mean they get a 0 WPM result)
-    const timeExpired = typingState.timeRemaining <= 0;
-    const completedEarly = typingState.currentPosition >= typingState.text.length;
-    
-    // Always show results at least for time expiration, otherwise require typed characters
-    if (timeExpired || (totalTyped > 0 && completedEarly)) {
-      let finalWpm = typingStats.wpm;
-      let finalAccuracy = typingStats.accuracy;
-      
-      // If no typing occurred, set to zeros
-      if (totalTyped === 0) {
-        finalWpm = 0;
-        finalAccuracy = 0;
-      } else {
-        // Recalculate final stats to ensure accuracy
+
+    if (totalTyped > 0) {
+        let finalWpm = typingStats.wpm;
+        let finalAccuracy = typingStats.accuracy;
+
         if (typingState.startTime !== null) {
-          const elapsedMinutes = (Date.now() - typingState.startTime) / 60000;
-          if (elapsedMinutes > 0) {
-            const words = correctCount / 5;
-            finalWpm = Math.round(words / elapsedMinutes) || 0;
-            finalAccuracy = Math.round((correctCount / totalTyped) * 100) || 100;
-          }
+            const elapsedSeconds = (Date.now() - typingState.startTime) / 1000;
+            const elapsedMinutes = elapsedSeconds / 60;
+            if (elapsedMinutes > 0) {
+                const words = correctCount / 5;
+                finalWpm = Math.round(words / elapsedMinutes) || 0;
+                finalAccuracy = Math.round((correctCount / totalTyped) * 100) || 0;
+            }
         }
-      }
-      
-      // Create result object
-      const result: TypingTestResult = {
-        wpm: finalWpm,
-        accuracy: finalAccuracy > 0 ? finalAccuracy : 0,
-        duration: completedEarly ? duration - typingState.timeRemaining : duration, // Actual time used
-        mode: typingState.mode,
-        characters: totalTyped,
-        errors: typingState.incorrectChars.length,
-      };
-      
-      // Save the result to API
-      mutate(result);
-      
-      // Notify parent component to show results
-      onComplete(result);
+        finalAccuracy = finalAccuracy > 0 ? finalAccuracy : 0;
+        finalAccuracy = totalTyped === 0 ? 0 : Math.round((correctCount / totalTyped) * 100);
+        finalAccuracy = Math.max(0, finalAccuracy);
+
+
+        const result: TypingTestResult = {
+            wpm: finalWpm,
+            accuracy: finalAccuracy,
+            duration: Math.max(1, Math.round((Date.now() - (typingState.startTime || Date.now())) / 1000)),
+            mode: typingState.mode,
+            characters: totalTyped,
+            errors: typingState.incorrectChars.length,
+        };
+
+        mutate(result);
+        onComplete(result);
+    } else if (typingState.timeRemaining <=0 && totalTyped === 0) {
+        const result: TypingTestResult = {
+            wpm: 0,
+            accuracy: 0,
+            duration: duration,
+            mode: typingState.mode,
+            characters: 0,
+            errors: 0,
+        };
+        mutate(result);
+        onComplete(result);
     }
-    
-    // Reset test state but keep the mode
+
     setTypingState(prev => ({
       ...prev,
       isActive: false,
-      currentPosition: 0,
-      correctChars: [],
-      incorrectChars: [],
       startTime: null,
       timeRemaining: duration,
     }));
     
-    // We'll wait to load a new text until the user closes the results modal
-    // This prevents a new text from loading immediately after the test completes
   }, [typingStats, typingState, duration, onComplete, mutate]);
   
-  // Timer effect - going back to a simpler implementation
+  // Timer effect - consolidated logic
   useEffect(() => {
-    // Only run timer when test is active with a valid start time
-    if (typingState.isActive && typingState.startTime) {
-      // Clear any existing timer first to avoid duplicates
+    if (typingState.isActive && typingState.startTime && typingState.timeRemaining > 0) {
       if (intervalRef.current) {
-        clearInterval(intervalRef.current);
-        intervalRef.current = null;
+        clearInterval(intervalRef.current); // Clear previous interval if any
       }
-      
-      // Set up a new timer interval
       intervalRef.current = window.setInterval(() => {
         setTypingState(prev => {
-          if (prev.timeRemaining <= 0) {
-            // Already at zero, don't keep decrementing
-            return prev;
+          // Ensure we are still active and have time remaining
+          if (!prev.isActive || prev.timeRemaining <= 1) { // Check for <= 1 because we're about to decrement
+            if (intervalRef.current) {
+              clearInterval(intervalRef.current);
+              intervalRef.current = null;
+            }
+
+            // Time has expired or test became inactive
+            const correctCount = prev.correctChars.length;
+            const totalTyped = correctCount + prev.incorrectChars.length;
+            let finalWpm = 0;
+            let finalAccuracy = 0;
+
+            if (totalTyped === 0) {
+              finalWpm = 0;
+              finalAccuracy = 0;
+            } else if (prev.startTime !== null) {
+              // Calculate elapsed time based on when the test actually started
+              const actualElapsedSeconds = (Date.now() - prev.startTime) / 1000;
+              // Duration for WPM should be the configured duration, or actual elapsed if shorter (e.g. early completion)
+              // For time expiry, it's the full duration.
+              const WPMCalculationDurationSeconds = duration;
+              const elapsedMinutes = WPMCalculationDurationSeconds / 60;
+
+              if (elapsedMinutes > 0) {
+                const words = correctCount / 5;
+                finalWpm = Math.round(words / elapsedMinutes) || 0;
+                finalAccuracy = Math.round((correctCount / totalTyped) * 100);
+              }
+            }
+
+            finalAccuracy = totalTyped === 0 ? 0 : Math.round((correctCount / totalTyped) * 100);
+            finalAccuracy = Math.max(0, finalAccuracy);
+
+
+            const result: TypingTestResult = {
+              wpm: finalWpm,
+              accuracy: finalAccuracy,
+              duration: duration,
+              mode: prev.mode,
+              characters: totalTyped,
+              errors: prev.incorrectChars.length,
+            };
+
+            mutate(result);
+            onComplete(result);
+
+            return {
+              ...prev,
+              isActive: false,
+              currentPosition: prev.currentPosition, // Keep position for results display
+              // correctChars: [], // Keep for results
+              // incorrectChars: [], // Keep for results
+              startTime: null,
+              timeRemaining: 0, // Explicitly set to 0
+            };
           }
-          
-          const newTimeRemaining = prev.timeRemaining - 1;
-          return { ...prev, timeRemaining: Math.max(0, newTimeRemaining) };
+          // Normal decrement
+          return { ...prev, timeRemaining: prev.timeRemaining - 1 };
         });
       }, 1000);
+    } else if (!typingState.isActive || typingState.timeRemaining <= 0) {
+      // Clear interval if test becomes inactive or time is already up
+      if (intervalRef.current) {
+        clearInterval(intervalRef.current);
+        intervalRef.current = null;
+      }
     }
-    
-    // Cleanup function
+
     return () => {
       if (intervalRef.current) {
         clearInterval(intervalRef.current);
         intervalRef.current = null;
       }
     };
-  }, [typingState.isActive, typingState.startTime]);
-  
-  // Handle time expiration check without using endTest in a separate effect
-  useEffect(() => {
-    // We only care about the transition from 1 to 0 seconds while the test is active
-    if (typingState.isActive && typingState.timeRemaining === 0) {
-      // Use a local variable to prevent closure issues
-      const isActive = typingState.isActive;
-      const correctChars = [...typingState.correctChars];
-      const incorrectChars = [...typingState.incorrectChars];
-      const totalTyped = correctChars.length + incorrectChars.length;
-      const mode = typingState.mode;
-      
-      // Calculate stats for the result
-      let finalWpm = typingStats.wpm;
-      let finalAccuracy = typingStats.accuracy;
-      
-      // Handle edge case of no typing
-      if (totalTyped === 0) {
-        finalWpm = 0;
-        finalAccuracy = 0;
-      } else if (typingState.startTime !== null) {
-        // Double-check calculations
-        const elapsedMinutes = (Date.now() - typingState.startTime) / 60000;
-        if (elapsedMinutes > 0) {
-          const words = correctChars.length / 5;
-          finalWpm = Math.round(words / elapsedMinutes) || 0;
-          finalAccuracy = Math.round((correctChars.length / totalTyped) * 100) || 100;
-        }
-      }
-      
-      // Create result object
-      const result: TypingTestResult = {
-        wpm: finalWpm,
-        accuracy: finalAccuracy > 0 ? finalAccuracy : 0,
-        duration: duration, // Test completed due to time expiry
-        mode: mode,
-        characters: totalTyped,
-        errors: incorrectChars.length,
-      };
-      
-      // Save the result
-      mutate(result);
-      
-      // Send to parent
-      onComplete(result);
-      
-      // Reset test state
-      setTypingState(prev => ({
-        ...prev,
-        isActive: false,
-        currentPosition: 0,
-        correctChars: [],
-        incorrectChars: [],
-        startTime: null,
-        timeRemaining: duration,
-      }));
-      
-      // We'll wait to load a new text until the user closes the results modal
-      // This prevents a new text from loading immediately after the test completes
-    }
-  }, [typingState.timeRemaining, typingState.isActive, typingStats, typingState, duration, onComplete, mutate]);
-  
-
+  }, [typingState.isActive, typingState.startTime, duration, onComplete, mutate]); // Removed typingState.timeRemaining from deps to avoid re-triggering interval setup on each tick
   
   // Live stats calculation (optimized to update every 100ms instead of on every keystroke)
   useEffect(() => {