Update typing_speed_test.py

[adithyen]

📌 Description

Brief description of what this PR does.
Adds a live, continuously updating WPM counter displayed alongside the
countdown timer during an active typing test. The WPM refreshes every 1 second
via a scheduled self.after(1000, self.update_live_wpm) loop, providing
real-time feedback similar to Monkeytype and 10fastfingers.---

🔗 Related Issue

Closes: #65

---

Changes Made

New UI Elements

Element	Widget	Location
self.stats_frame	ctk.CTkFrame (transparent)	Replaces standalone timer; holds timer + live WPM side by side
self.live_wpm_label	ctk.CTkLabel	Right side of stats_frame, shows ⌨ Live WPM: XX.XX

New Methods

Method	Purpose
calculate_current_wpm()	Centralized WPM calculation using correct characters and elapsed wall-clock time. Returns float. Used by both the live loop and final result.
update_live_wpm()	Scheduled loop (self.after(1000, ...)) that calls calculate_current_wpm(), updates live_wpm_label text and color. Runs only while timer_running is True and paused is False.

New Instance Variable

Variable	Type	Purpose
self.live_wpm_after_id	str | None	Stores the after() ID for the live WPM loop so it can be cancelled on pause/completion

Color-Coded Live WPM Feedback

WPM Range	Color	Meaning
≥ 60	🟢 #00AA00	Fast
30 – 59	🟠 #CC8800	Moderate
< 30	🔴 #CC0000	Slow
Final (test ended)	🔵 #0055CC	Completed
Idle (before test)	⚫ #555555	Inactive

Modified Methods

Method	What Changed
begin_test()	Now calls self.update_live_wpm() to start the live loop alongside the timer
toggle_pause()	Cancels live_wpm_after_id on pause; restarts update_live_wpm() on resume
check_result()	Cancels live_wpm_after_id; uses calculate_current_wpm() for final WPM; updates live label to show "Final WPM" in blue
start_test()	Resets live WPM label text and color to idle state
on_duration_change()	Timer label updated with ⏱ emoji prefix (cosmetic consistency)

Layout Changes

Before	After
self.timer_label packed standalone	self.stats_frame (transparent frame) holds timer_label (col 0) and live_wpm_label (col 1) in a grid
Window: 750×680	Window: 750×720 (extra height for stats row)

No Changes To

• TEXT_POOLS, DURATION_OPTIONS, TEXT_LENGTH_OPTIONS — unchanged
• show_countdown() — unchanged
• handle_typing() — unchanged (live WPM is interval-based, not keystroke-based)
• update_sentence_display() — unchanged
• update_streaks() — unchanged
• load_data() / save_data() — unchanged
• streak_data.json schema — unchanged
• Cross-platform beep() wrapper — unchanged

Why Interval-Based (Not Keystroke-Based)

Approach	Pros	Cons
Every keystroke (<KeyRelease>)	Instant updates	UI flicker on fast typists; redundant recalculations; couples WPM display to input handler
Every 1 second (self.after(1000, ...))	Smooth updates; decoupled from input handler; negligible CPU overhead	1s max latency (acceptable)

Chosen: Interval-based (1 second) — consistent with how Monkeytype and
10fastfingers render live WPM.

📷 Screenshots (if applicable)

---

✅ Checklist

• I have tested my changes
• My code follows project guidelines
• I have linked the related issue