Add timed bidding support with countdown displays and debug view

- Added `bidding_duration` field to `DraftSessionSettings` model and migration.
- Updated `DraftStateManager` to manage bidding start/end times using session settings.
- Extended WebSocket payloads to include bidding timer data.
- Added `DraftCountdownClock` React component and integrated into admin and participant UIs.
- Created new `DraftDebug` view, template, and front-end component for real-time state debugging.
- Updated utility functions to handle new timer fields in draft state.
- Changed script tags in templates to load with `defer` for non-blocking execution.

draft/state.py

@@ -4,6 +4,8 @@ from datetime import datetime, timedelta
 from boxofficefantasy.models import Movie
 from django.contrib.auth.models import User
 from draft.constants import DraftPhase
+from draft.models import DraftSessionSettings
+import time
 
 class DraftCacheKeys:
     def __init__(self, id):
@@ -57,9 +59,12 @@ class DraftCacheKeys:
     # def participants(self):
     #     return f"{self.prefix}:participants"
 
-    # @property
-    # def bid_timer_end(self):
-    #     return f"{self.prefix}:bid_timer_end"
+    @property
+    def bid_timer_end(self):
+        return f"{self.prefix}:bid_timer_end"
+    @property
+    def bid_timer_start(self):
+        return f"{self.prefix}:bid_timer_start"
 
     # def user_status(self, user_id):
     #     return f"{self.prefix}:user:{user_id}:status"
@@ -68,12 +73,12 @@ class DraftCacheKeys:
     #     return f"{self.prefix}:user:{user_id}:channel"
 
 class DraftStateManager:
-    def __init__(self, session_id: int):
+    def __init__(self, session_id: int, settings: DraftSessionSettings):
         self.session_id = session_id
         self.cache = cache
         self.keys = DraftCacheKeys(session_id)
         self._initial_phase = self.cache.get(self.keys.phase, DraftPhase.WAITING.value)
-
+        self.settings = settings
 
     # === Phase Management ===
     @property
@@ -135,13 +140,18 @@ class DraftStateManager:
         movie_id = self.cache.get(self.keys.current_movie)
         return Movie.objects.filter(pk=movie_id).first() if movie_id else None
 
-    def start_timer(self, seconds: int):
-        end_time = (datetime.now() + timedelta(seconds=seconds)).isoformat()
-        self.cache.set(self.keys.timer_end, end_time)
-        self.cache.set(self.keys.timer_end, end_time)
+    def start_timer(self):
+        seconds = self.settings.bidding_duration
+        start_time = time.time()
+        end_time = start_time + seconds
+        self.cache.set(self.keys.bid_timer_end, end_time)
+        self.cache.set(self.keys.bid_timer_start, start_time)
 
     def get_timer_end(self) -> str | None:
-        return self.cache.get(self.keys.timer_end).decode("utf-8") if self.cache.get(self.keys.timer_end) else None
+        return self.cache.get(self.keys.bid_timer_end)
+    
+    def get_timer_start(self) -> str | None:
+        return self.cache.get(self.keys.bid_timer_start)
 
     # === Sync Snapshot ===
     def get_summary(self) -> dict:
@@ -152,5 +162,6 @@ class DraftStateManager:
             "connected_participants": self.connected_participants,
             "current_movie": self.cache.get(self.keys.current_movie),
             # "bids": self.get_bids(),
-            # "timer_end": self.get_timer_end(),
+            "bidding_timer_end": self.get_timer_end(),
+            "bidding_timer_start": self.get_timer_start(),
         }