asc/boxofficefantasy
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add timed bidding support with countdown displays and debug view

Browse Source 
- 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.
This commit is contained in:
Anthony Correa
2025-08-10 18:19:54 -05:00
parent b08a345563
commit cd4d974fce
16 changed files with 245 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
frontend/src/apps/draft/DraftDebug.jsx Normal file
View File

@@ -0,0 +1,45 @@
import React, { useEffect, useState } from "react";;
import { useWebSocket } from "./WebSocketContext.jsx";
import { DraftMessage, DraftPhase, DraftPhaseLabel, DraftPhasesOrdered } from './constants.js';
import { fetchDraftDetails, isEmptyObject, handleDraftStatusMessages, handleUserIdentifyMessages } from "./common/utils.js"
export const DraftDebug = ({ draftSessionId }) => {
const [draftState, setDraftState] = useState({})
const socket = useWebSocket();
if (!socket) return;
useEffect(() => {
if (!socket) return;
const openHandler = (event) => {
console.log('Websocket Opened')
}
const closeHandler = (event) => {
console.log('Websocket Closed')
}
socket.addEventListener('open', openHandler);
socket.addEventListener('close', closeHandler);
return () => {
socket.removeEventListener('open', openHandler);
socket.removeEventListener('close', closeHandler);
}
}, [socket])
useEffect(() => {
if (!socket) return;
const draftStatusMessageHandler = (event) => handleDraftStatusMessages(event, setDraftState)
socket.addEventListener('message', draftStatusMessageHandler);
return () => {
socket.removeEventListener('message', draftStatusMessageHandler)
};
}, [socket]);
const data = { 'message': 'test' }
return (<pre style={{margin: "1em"}}>
{JSON.stringify(draftState, null, 2)}
</pre>
)
}

6
frontend/src/apps/draft/admin/DraftAdmin.jsx
View File

@@ -6,6 +6,7 @@ import { ParticipantList } from "../common/ParticipantList.jsx";
import { DraftMessage, DraftPhase, DraftPhaseLabel, DraftPhasesOrdered } from '../constants.js';
import { fetchDraftDetails, isEmptyObject, handleDraftStatusMessages, handleUserIdentifyMessages } from "../common/utils.js"
import { DraftMoviePool } from "../common/DraftMoviePool.jsx"
import { DraftCountdownClock } from "../common/DraftCountdownClock.jsx"
import { jsxs } from "react/jsx-runtime";
@@ -69,7 +70,6 @@ export const DraftAdmin = ({ draftSessionId }) => {
const handleNominationRequest = (event)=> {
const message = JSON.parse(event.data)
const { type, payload } = message;
console.log('passing through nomination request', message)
if (type == DraftMessage.NOMINATION_SUBMIT_REQUEST) {
socket.send(JSON.stringify(
{
@@ -87,7 +87,7 @@ export const DraftAdmin = ({ draftSessionId }) => {
return () => {
socket.removeEventListener('message', draftStatusMessageHandler)
socket.removeEventListener('message', userIdentifyMessageHandler );
socket.remove('message', handleNominationRequest );
socket.removeEventListener('message', handleNominationRequest );
};
}, [socket]);
@@ -162,8 +162,8 @@ export const DraftAdmin = ({ draftSessionId }) => {
<button onClick={handleStartBidding} className="btn btn-primary">Start Bidding</button>
</div>
<DraftMoviePool draftDetails={draftDetails} draftState={draftState}></DraftMoviePool>
<DraftPhaseDisplay draftPhase={draftState.phase} nextPhaseHandler={() => { handlePhaseChange('next') }} prevPhaseHandler={() => { handlePhaseChange('previous') }}></DraftPhaseDisplay>
<DraftCountdownClock endTime={draftState.bidding_timer_end}></DraftCountdownClock>
</div>
);
};

32
frontend/src/apps/draft/common/DraftCountdownClock.jsx Normal file
View File

@@ -0,0 +1,32 @@
import React, { useEffect, useState } from "react";
export function DraftCountdownClock({ endTime, onFinish }) {
// endTime is in seconds (Unix time)
const getTimeLeft = (et) => Math.max(0, Math.floor(et - Date.now() / 1000));
const [timeLeft, setTimeLeft] = useState(getTimeLeft(endTime));
useEffect(() => {
if (timeLeft <= 0) {
if (onFinish) onFinish();
return;
}
const timer = setInterval(() => {
const t = getTimeLeft(endTime);
setTimeLeft(t);
if (t <= 0 && onFinish) onFinish();
}, 100);
return () => clearInterval(timer);
// eslint-disable-next-line
}, [endTime, onFinish, timeLeft]);
const minutes = Math.floor(timeLeft / 60);
const secs = timeLeft % 60;
const pad = n => String(n).padStart(2, "0");
return (
<span>
{minutes}:{pad(secs)}
</span>
);
}

1
frontend/src/apps/draft/common/DraftMoviePool.jsx
View File

@@ -8,6 +8,7 @@ export const DraftMoviePool = ({ isParticipant, draftDetails, draftState }) => {
return (
<div className="movie-pool-container">
<label>Movies</label>
<ul>
{movies.map(m => (
<li key={m.id} className={`${current_movie == m.id ? "current-movie fw-bold" : null }`}>

119
frontend/src/apps/draft/common/utils.js
View File

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

3
frontend/src/apps/draft/participant/DraftParticipant.jsx
View File

@@ -7,6 +7,7 @@ import { DraftMessage, DraftPhases } from '../constants.js';
import { fetchDraftDetails, handleUserIdentifyMessages, isEmptyObject } from "../common/utils.js";
import { DraftMoviePool } from "../common/DraftMoviePool.jsx";
import { ParticipantList } from "../common/ParticipantList.jsx";
import { DraftCountdownClock } from "../common/DraftCountdownClock.jsx"
import { handleDraftStatusMessages } from '../common/utils.js'
const NominateMenu = ({socket, draftState, draftDetails, currentUser}) => {
@@ -30,7 +31,6 @@ const NominateMenu = ({socket, draftState, draftDetails, currentUser}) => {
return (
<div>
<label>Nominate</label>
{draftState.draft_order[draftState.draft_index]}
<div className="d-flex">
<form onSubmit={requestNomination}>
<select className="form-control" name="movie">
@@ -98,6 +98,7 @@ export const DraftParticipant = ({ draftSessionId }) => {
<DraftMoviePool isParticipant={true} draftDetails={draftDetails} draftState={draftState}></DraftMoviePool>
<NominateMenu socket={socket} currentUser={currentUser} draftState={draftState} draftDetails={draftDetails}></NominateMenu>
<DraftCountdownClock endTime={draftState.bidding_timer_end}></DraftCountdownClock>
</div>
);
};

11
frontend/src/index.js
View File

@@ -5,10 +5,12 @@ import { createRoot } from "react-dom/client";
import { WebSocketProvider } from "./apps/draft/WebSocketContext.jsx";
import { DraftAdmin } from "./apps/draft/admin/DraftAdmin.jsx";
import { DraftParticipant} from './apps/draft/participant/DraftParticipant.jsx'
import { DraftDebug} from './apps/draft/DraftDebug.jsx'
const draftAdminRoot = document.getElementById("draft-admin-root");
const draftPartipantRoot = document.getElementById("draft-participant-root")
const draftDebugRoot = document.getElementById("draft-debug-root")
const {draftSessionId} = window; // from backend template
if (draftPartipantRoot) {
@@ -27,3 +29,12 @@ if (draftAdminRoot) {
</WebSocketProvider>
);
}
if (draftDebugRoot) {
console.log('draft-debug')
const wsUrl = `ws://${window.location.host}/ws/draft/session/${draftSessionId}/admin`;
createRoot(draftDebugRoot).render(
<WebSocketProvider url={wsUrl}>
<DraftDebug draftSessionId={draftSessionId}/>
</WebSocketProvider>
)
}