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.

frontend/src/apps/draft/common/utils.js

@@ -1,69 +1,78 @@
-import { DraftMessage } from "../constants"
+import { DraftMessage } from "../constants";
 
 export async function fetchDraftDetails(draftSessionId) {
-      return fetch(`/api/draft/${draftSessionId}/`)
-        .then((response) => {
-          if (response.ok) {
-            return response.json()
-          }
-          else {
-            throw new Error()
-          }
-        })
-        .catch((err) => {
-          console.error("Error fetching draft details", err)
-        })
-    }
+  return fetch(`/api/draft/${draftSessionId}/`)
+    .then((response) => {
+      if (response.ok) {
+        return response.json();
+      } else {
+        throw new Error();
+      }
+    })
+    .catch((err) => {
+      console.error("Error fetching draft details", err);
+    });
+}
 
 export async function fetchMovieDetails(draftSessionId) {
-      return fetch(`/api/draft/${draftSessionId}/movie/`)
-        .then((response) => {
-          if (response.ok) {
-            return response.json()
-          }
-          else {
-            throw new Error()
-          }
-        })
-        .catch((err) => {
-          console.error("Error fetching draft details", err)
-        })
-    }
+  return fetch(`/api/draft/${draftSessionId}/movie/`)
+    .then((response) => {
+      if (response.ok) {
+        return response.json();
+      } else {
+        throw new Error();
+      }
+    })
+    .catch((err) => {
+      console.error("Error fetching draft details", err);
+    });
+}
 
 export function isEmptyObject(obj) {
-  return obj == null || (Object.keys(obj).length === 0 && obj.constructor === Object);
+  return (
+    obj == null || (Object.keys(obj).length === 0 && obj.constructor === Object)
+  );
 }
 
 export const handleDraftStatusMessages = (event, setDraftState) => {
-      const message = JSON.parse(event.data)
-      const { type, payload } = message;
-      console.log("Message: ", type, event?.data)
+  const message = JSON.parse(event.data);
+  const { type, payload } = message;
+  console.log("Message: ", type, event?.data);
 
-      if (!payload) return
-      const {connected_participants, phase, draft_order, draft_index, current_movie} = payload
+  if (!payload) return;
+  const {
+    connected_participants,
+    phase,
+    draft_order,
+    draft_index,
+    current_movie,
+    bidding_timer_end,
+    bidding_timer_start
+  } = payload;
 
-      if (type == DraftMessage.STATUS_SYNC_INFORM) {
-        setDraftState(payload)
-      }
+  if (type == DraftMessage.STATUS_SYNC_INFORM) {
+    setDraftState(payload);
+  }
 
-      setDraftState(prev=>({
-        ...prev,
-        ...(connected_participants ? { connected_participants } : {}),
-        ...(draft_order ? { draft_order } : {}),
-        ...(draft_index ? { draft_index } : {}),
-        ...(phase ? { phase: Number(phase) } : {}),
-        ...(current_movie ? {current_movie} : {}),
-      }))
-
-    }
+  setDraftState((prev) => ({
+    ...prev,
+    ...(connected_participants ? { connected_participants } : {}),
+    ...(draft_order ? { draft_order } : {}),
+    ...(draft_index ? { draft_index } : {}),
+    ...(phase ? { phase: Number(phase) } : {}),
+    ...(current_movie ? { current_movie } : {}),
+    ...(bidding_timer_end ? { bidding_timer_end: Number(bidding_timer_end) } : {}),
+    ...(bidding_timer_start ? { bidding_timer_start: Number(bidding_timer_start) } : {}),
+  }));
+};
 
 export const handleUserIdentifyMessages = (event, setUser) => {
-  const message = JSON.parse(event.data)
-      const { type, payload } = message;
-      
-      if (type==DraftMessage.USER_IDENTIFICATION_INFORM){
-        console.log("Message: ", type, event.data)
-        const {user} = payload
-        setUser(user)
-      }
-}
+  const message = JSON.parse(event.data);
+  const { type, payload } = message;
+
+  if (type == DraftMessage.USER_IDENTIFICATION_INFORM) {
+    console.log("Message: ", type, event.data);
+    const { user } = payload;
+    setUser(user);
+  }
+};