Add DRF API app and real-time draft management UI

- Created new `api` Django app with serializers, viewsets, and routers
  to expose draft sessions, participants, and movie data.
- Registered `api` app in settings and updated root URL configuration.
- Extended WebSocket consumers with `inform.draft_status` /
  `request.draft_status` to allow fetching current draft state.
- Updated `DraftSession` and related models to support reverse lookups
  for draft picks.
- Enhanced draft state manager to include `draft_order` in summaries.
- Added React WebSocket context provider, connection status component,
  and new admin/participant panels with phase and participant tracking.
- Updated SCSS for participant lists, phase indicators, and status badges.
- Modified Django templates to mount new React roots for admin and
  participant views.
- Updated Webpack dev server config to proxy WebSocket connections.
This commit is contained in:
2025-08-08 12:50:33 -05:00
parent c9ce7a36d0
commit 9b6b3391e6
28 changed files with 804 additions and 171 deletions

View File

@@ -5,10 +5,11 @@ class DraftMessage:
INFORM_PHASE_CHANGE = "inform.phase.change"
CONFIRM_PHASE_CHANGE = "confirm.phase.change"
INFORM_PHASE = "inform.phase"
INFORM_DRAFT_STATUS = "inform.draft_status"
# Client
REQUEST_PHASE_CHANGE = "request.phase.change"
REQUEST_INFORM_STATUS = "request.inform.status"
REQUEST_DRAFT_STATUS = "request.draft_status"
# Waiting Phase
## Server

View File

@@ -13,6 +13,7 @@ from draft.constants import (
DraftGroupChannelNames,
)
from draft.state import DraftCacheKeys, DraftStateManager
from typing import Any
import random
@@ -39,16 +40,18 @@ class DraftConsumerBase(AsyncJsonWebsocketConsumer):
self.user = self.scope["user"]
if not self.should_accept_user():
await self.send_json({
"type": DraftMessage.REJECT_JOIN_PARTICIPANT,
"user": self.user.username
})
await self.send_json(
{
"type": DraftMessage.REJECT_JOIN_PARTICIPANT,
"user": self.user.username,
}
)
await self.close()
await self.channel_layer.group_send(
self.group_names.session,
{
"type": DraftMessage.REJECT_JOIN_PARTICIPANT,
"user": self.user.username
"user": self.user.username,
},
)
return
@@ -59,32 +62,38 @@ class DraftConsumerBase(AsyncJsonWebsocketConsumer):
)
await self.channel_layer.group_send(
self.group_names.session,
{"type": DraftMessage.INFORM_JOIN_USER, "user": self.user.username},
)
await self.send_json(
{
"type": DraftMessage.INFORM_JOIN_USER,
"user": self.user.username
"type": DraftMessage.INFORM_DRAFT_STATUS,
"payload": self.get_draft_status(),
},
)
await self.channel_layer.group_send(
self.group_names.session,
{
"type": DraftMessage.INFORM_PHASE,
"phase": str(self.draft_state.phase)
}
)
async def should_accept_user(self)->bool:
async def should_accept_user(self) -> bool:
return self.user.is_authenticated
async def receive_json(self, content):
event_type = content.get("type")
if event_type == DraftMessage.REQUEST_DRAFT_STATUS:
await self.send_json(
{
"type": DraftMessage.INFORM_DRAFT_STATUS,
"payload": self.get_draft_status(),
}
)
async def inform_leave_participant(self,event):
async def inform_leave_participant(self, event):
await self.send_json(
{
"type": event["type"],
"user": event["user"],
"participants": [user.username for user in self.draft_participants],
"connected_participants": self.draft_state.connected_users
"payload": {
"participants": [user.username for user in self.draft_participants],
"connected_participants": self.draft_state.connected_users,
},
}
)
@@ -92,44 +101,51 @@ class DraftConsumerBase(AsyncJsonWebsocketConsumer):
await self.send_json(
{
"type": event["type"],
"user": event["user"],
"participants": [user.username for user in self.draft_participants],
"connected_participants": self.draft_state.connected_users
"payload": {
"user": event["user"],
"participants": [user.username for user in self.draft_participants],
"connected_participants": self.draft_state.connected_users,
},
}
)
async def reject_join_participant(self,event):
async def inform_draft_status(self, event):
await self.send_json(
{"type": event["type"], "payload": self.get_draft_status()}
)
async def reject_join_participant(self, event):
await self.send_json(
{
"type": event["type"],
"user": event["user"],
"participants": [user.username for user in self.draft_participants],
"connected_participants": self.draft_state.connected_users
}
)
async def inform_phase(self, event):
await self.send_json(
{
"type": event['type'],
"phase": event['phase']
}
)
await self.send_json({"type": event["type"], "phase": event["phase"]})
async def confirm_determine_draft_order(self, event):
await self.send_json(
{"type": DraftMessage.CONFIRM_DETERMINE_DRAFT_ORDER, "payload": event["payload"]}
{
"type": DraftMessage.CONFIRM_DETERMINE_DRAFT_ORDER,
"payload": event["payload"],
}
)
async def confirm_phase_change(self, event):
await self.send_json({"type": event["type"], "payload": event["payload"]})
async def send_draft_summary(self): ...
def get_draft_status(self) -> dict[str, Any]:
return {
**self.draft_state.get_summary(),
"user": self.user.username,
"participants": [user.username for user in self.draft_participants],
}
# === Broadcast handlers ===
async def draft_status(self, event):
await self.send_json(
{
"type": "draft.status",
"status": event["status"],
}
)
# === DB Access ===
@database_sync_to_async
@@ -162,20 +178,36 @@ class DraftAdminConsumer(DraftConsumerBase):
async def receive_json(self, content):
await super().receive_json(content)
event_type = content.get("type")
user = self.scope["user"]
destination = DraftPhase(content.get("destination"))
if (
event_type == DraftMessage.REQUEST_PHASE_CHANGE
and destination == DraftPhase.DETERMINE_ORDER
and content.get("destination") == DraftPhase.DETERMINE_ORDER
):
await self.determine_draft_order()
if (
event_type == DraftMessage.REQUEST_PHASE_CHANGE
and content.get("destination") == DraftPhase.NOMINATION
):
await self.start_nominate();
def should_accept_user(self):
return super().should_accept_user() and self.user.is_staff
# === Draft logic ===
async def start_nominate(self):
await self.set_draft_phase(DraftPhase.NOMINATION)
await self.channel_layer.group_send(
self.group_names.session,
{
"type": DraftMessage.CONFIRM_PHASE_CHANGE,
"payload": {"phase": self.draft_state.phase},
},
)
async def determine_draft_order(self):
draft_order = random.sample(self.draft_participants, len(self.draft_participants))
draft_order = random.sample(
self.draft_participants, len(self.draft_participants)
)
self.draft_state.draft_order = [p.username for p in draft_order]
await self.set_draft_phase(DraftPhase.DETERMINE_ORDER)
@@ -183,32 +215,22 @@ class DraftAdminConsumer(DraftConsumerBase):
self.group_names.session,
{
"type": DraftMessage.CONFIRM_DETERMINE_DRAFT_ORDER,
"payload": {
"draft_order": self.draft_state.draft_order
},
"payload": {"draft_order": self.draft_state.draft_order},
},
)
async def set_draft_phase(self, destination: DraftPhase):
self.draft_state.phase = destination
await self.channel_layer.group_send(
self.group_names.session,
{
"type": DraftMessage.CONFIRM_PHASE_CHANGE,
"payload": {
"phase": self.draft_state.phase
},
"payload": {"phase": self.draft_state.phase},
},
)
# === Broadcast Handlers ===
async def confirm_phase_change(self, event):
await self.send_json({
"type": event["type"],
"payload": event["payload"]
})
class DraftParticipantConsumer(DraftConsumerBase):
async def connect(self):
@@ -222,12 +244,9 @@ class DraftParticipantConsumer(DraftConsumerBase):
async def disconnect(self, close_code):
await self.channel_layer.group_send(
self.group_names.session,
{
"type": DraftMessage.INFORM_LEAVE_PARTICIPANT,
"user": self.user.username
},
)
self.group_names.session,
{"type": DraftMessage.INFORM_LEAVE_PARTICIPANT, "user": self.user.username},
)
await super().disconnect(close_code)
self.draft_state.disconnect_user(self.user.username)
await self.channel_layer.group_discard(

View File

@@ -50,7 +50,7 @@ class DraftSessionParticipant(Model):
class DraftPick(Model):
draft = ForeignKey(DraftSession, on_delete=CASCADE)
draft = ForeignKey(DraftSession, on_delete=CASCADE, related_name="draft_picks")
movie = ForeignKey(Movie, on_delete=CASCADE)
winner = ForeignKey(User, on_delete=CASCADE)
bid_amount = IntegerField()

View File

@@ -65,7 +65,6 @@ class DraftStateManager:
self.cache = cache
self.keys = DraftCacheKeys(session_id)
self._phase = self.cache.get(self.keys.phase, DraftPhase.WAITING)
self.draft_order = self.cache.get(self.keys.draft_order)
# === Phase Management ===
@@ -98,7 +97,9 @@ class DraftStateManager:
return json.loads(self.cache.get(self.keys.draft_order,"[]"))
@draft_order.setter
def draft_order(self, draft_order: list[User]):
def draft_order(self, draft_order: list[str]):
if not isinstance(draft_order, list):
return
self.cache.set(self.keys.draft_order,json.dumps(draft_order))
# === Current Nomination / Bid ===
@@ -130,8 +131,9 @@ class DraftStateManager:
def get_summary(self) -> dict:
return {
"phase": self.phase,
"draft_order": self.draft_order,
"connected_users": self.connected_users,
"current_movie": self.cache.get(self.keys.current_movie),
"bids": self.get_bids(),
"timer_end": self.get_timer_end(),
# "current_movie": self.cache.get(self.keys.current_movie),
# "bids": self.get_bids(),
# "timer_end": self.get_timer_end(),
}

View File

@@ -2,10 +2,13 @@
{% block content %}
<h1>Draft Room: {{ league.name }} {{ season.label }} {{ season.year }}</h1>
{% load static %}
<div id="draft-app" data-draft-id="{{draft_id_hashed}}"></div>
<script>
window.draftSessionId = "{{ draft_id_hashed }}"
</script>
<div id="draft-participant-root" data-draft-id="{{ draft_id_hashed }}"></div>
{% if DEBUG %}
<script src="http://localhost:3000/dist/bundle.js"></script>
{% else %}
<script src="{% static 'bundle.js' %}"></script>
{% endif %}
{% endblock %}
{% endblock content %}

View File

@@ -2,7 +2,10 @@
{% block content %}
<h1>Draft Room: {{ league.name }} {{ season.label }} {{ season.year }}</h1>
{% load static %}
<div id="draft-admin-app" data-draft-id="{{ draft_id_hashed }}"></div>
<script>
window.draftSessionId = "{{ draft_id_hashed }}"
</script>
<div id="draft-admin-root" data-draft-hid="{{ draft_id_hashed }}"></div>
{% if DEBUG %}
<script src="http://localhost:3000/dist/bundle.js"></script>
{% else %}