Add participant creation functionality to event API, including backend service and database integration. Update frontend to support participant registration and enhance UI for displaying registered players.

frontend/src/App.tsx

@@ -11,7 +11,7 @@ import {
 } from '@tanstack/react-router'
 import {
   api, subscribeToEvents, type EventInput, type MapOutcome, type MixEvent,
-  type PlayerRole, type RsvpStatus, type Series, type Session, type Team,
+  type PlayerRole, type Registration, type RsvpStatus, type Series, type Session, type Team,
 } from './api/client'
 import {
   demoBalanceCandidates, demoBracket, demoEvents, demoProfile,
@@ -144,10 +144,12 @@ function EventPage() {
   const event = eventQuery.data
   const rsvp = registrations.data?.find((registration) => registration.player.id === session.data.player.id)?.status ?? event.myRsvp
   const counts = registrations.data?.reduce((total, registration) => ({ ...total, [registration.status]: total[registration.status] + 1 }), { going: 0, maybe: 0, not_going: 0 }) ?? event.counts
+  const statusOrder: Record<RsvpStatus, number> = { going: 0, maybe: 1, not_going: 2 }
+  const attendees = [...(registrations.data ?? [])].sort((a, b) => statusOrder[a.status] - statusOrder[b.status] || a.player.displayName.localeCompare(b.player.displayName))
   return <div className="page"><PageHeader eyebrow="Event details" title={event.title} description={event.description} actions={<Badge tone="success">Registration open</Badge>} /><div className="detail-layout">
     <section className="card event-hero"><div className="event-time"><CalendarDays /><div><span>Starts</span><strong>{new Date(event.startsAt).toLocaleString(undefined, { weekday: 'long', month: 'long', day: 'numeric', hour: '2-digit', minute: '2-digit' })}</strong></div></div><div className="event-time"><Clock3 /><div><span>Registration closes</span><strong>{new Date(event.registrationDeadline).toLocaleString(undefined, { weekday: 'short', hour: '2-digit', minute: '2-digit' })}</strong></div></div><div className="divider" /><h2>Are you playing?</h2><p>Your latest response is sent to the organizer.</p><div className="rsvp-control" role="group" aria-label="RSVP status">{(Object.keys(labels) as RsvpStatus[]).map((status) => <button key={status} disabled={rsvpMutation.isPending} className={rsvp === status ? `active ${status}` : ''} aria-pressed={rsvp === status} onClick={() => rsvpMutation.mutate(status)}>{status === 'going' ? <Check /> : status === 'maybe' ? <CircleHelp /> : <X />}{labels[status]}</button>)}</div>{rsvpMutation.isSuccess && <div className="save-note"><Check />Response saved · Server confirmed just now</div>}{rsvpMutation.isError && <p className="error-note">{rsvpMutation.error.message}</p>}</section>
     <aside className="card roster-preview"><div className="section-title"><div><h2>Attendance</h2><p>{Object.values(counts).reduce((a, b) => a + b, 0)} responses</p></div><UsersRound /></div><div className="attendance-bar"><span /><span /><span /></div><div className="attendance-stats"><span><i className="green" />Going <strong>{counts.going}</strong></span><span><i className="yellow" />Maybe <strong>{counts.maybe}</strong></span><span><i />No <strong>{counts.not_going}</strong></span></div>{session.data.account.role === 'admin' && <Link className="button secondary full" to="/admin">Manage participants <ChevronRight /></Link>}</aside>
-  </div></div>
+  </div><section className="card public-roster"><div className="section-title"><div><h2>Registered players</h2><p>Everyone can see who responded and their current status.</p></div><UsersRound /></div>{attendees.length === 0 ? <p className="empty-note">No responses yet.</p> : <div className="public-roster-grid">{attendees.map((registration) => <div className="public-roster-player" key={registration.id}><span className="mini-avatar">{registration.player.displayName.slice(0, 2).toUpperCase()}</span><strong>{registration.player.displayName}</strong><Badge tone={registration.status === 'going' ? 'success' : registration.status === 'maybe' ? 'warning' : 'neutral'}>{labels[registration.status]}</Badge></div>)}</div>}</section></div>
 }
 
 function ProfilePage() {
@@ -234,7 +236,38 @@ function EventSetup({ event, onCreated }: { event?: MixEvent; onCreated: (event:
 function Participants({ eventId }: { eventId: string }) {
   const client = useQueryClient()
   const language = useLanguage()
+  const options = useMemo(() => rankOptions(language), [language])
+  const [displayName, setDisplayName] = useState('')
+  const [status, setStatus] = useState<RsvpStatus>('going')
+  const [ratings, setRatings] = useState<Record<PlayerRole, RankOrdinal>>({ tank: 13, damage: 13, support: 13 })
   const rows = useQuery({ queryKey: ['registrations', eventId], queryFn: () => api.registrations(eventId), initialData: demoMode ? demoRegistrations : undefined })
+  const create = useMutation({
+    mutationFn: () => {
+      if (!demoMode) return api.createParticipant(eventId, displayName.trim(), ratings, status)
+      const now = new Date().toISOString()
+      const id = `guest-${Date.now()}`
+      return Promise.resolve<Registration>({
+        id: `${eventId}:${id}`,
+        player: {
+          id,
+          displayName: displayName.trim(),
+          ratings: { ...ratings, updatedAt: now },
+          preferredRoles: [],
+          preferredPlayerIds: [],
+        },
+        status,
+        updatedAt: now,
+        changedBy: { id: demoSession.account.id, displayName: demoSession.account.displayName, source: 'admin' },
+      })
+    },
+    onSuccess: (registration) => {
+      client.setQueryData<Registration[]>(['registrations', eventId], (current) => [...(current ?? []), registration])
+      setDisplayName('')
+      setRatings({ tank: 13, damage: 13, support: 13 })
+      setStatus('going')
+      if (!demoMode) void client.invalidateQueries({ queryKey: ['events'] })
+    },
+  })
   const override = useMutation({
     mutationFn: ({ playerId, status }: { playerId: string; status: RsvpStatus }) => api.setRsvp(eventId, playerId, status),
     onSuccess: () => {
@@ -245,7 +278,7 @@ function Participants({ eventId }: { eventId: string }) {
   if (rows.isLoading) return <LoadingState label="Loading participants…" />
   if (rows.isError || !rows.data) return <ErrorState retry={() => void rows.refetch()} />
   const names = new Map(rows.data.map((registration) => [registration.player.id, registration.player.displayName]))
-  return <section className="card table-card"><div className="section-title"><div><h2>Participant responses</h2><p>Admin overrides are attributed and audited.</p></div><div className="count-pills"><Badge tone="success">{rows.data.filter((r) => r.status === 'going').length} going</Badge><Badge tone="warning">{rows.data.filter((r) => r.status === 'maybe').length} maybe</Badge></div></div><div className="participant-list">{rows.data.map((r) => <div className="participant-row" key={r.id}><div className="mini-avatar">{r.player.displayName.slice(0, 2).toUpperCase()}</div><div className="participant-name"><strong>{r.player.displayName}</strong><span>{r.player.preferredRoles.map((role) => role[0].toUpperCase() + role.slice(1)).join(' · ') || 'No preferred roles'}{r.player.preferredPlayerIds.length > 0 && <> · Preferred with {r.player.preferredPlayerIds.map((id) => names.get(id) ?? id.slice(0, 6)).join(', ')}</>}{r.changedBy?.source === 'admin' && <> · <em>set by {r.changedBy.displayName}</em></>}</span></div><div className="mini-ratings"><span>T · {rankLabel(r.player.ratings.tank, language)}</span><span>D · {rankLabel(r.player.ratings.damage, language)}</span><span>S · {rankLabel(r.player.ratings.support, language)}</span></div><select disabled={override.isPending} aria-label={`RSVP for ${r.player.displayName}`} value={r.status} onChange={(e) => override.mutate({ playerId: r.player.id, status: e.target.value as RsvpStatus })}><option value="going">Going</option><option value="maybe">Maybe</option><option value="not_going">Not going</option></select></div>)}</div>{override.isError && <p className="error-note">{override.error.message}</p>}</section>
+  return <section className="card table-card"><form className="guest-participant-form" onSubmit={(event) => { event.preventDefault(); create.mutate() }}><div><h2>Add participant</h2><p>Create a guest player when they cannot sign in with Discord.</p></div><div className="guest-participant-fields"><label>Nickname<input required maxLength={80} value={displayName} onChange={(event) => setDisplayName(event.target.value)} /></label>{(['tank', 'damage', 'support'] as PlayerRole[]).map((role) => <label key={role}>{role === 'tank' ? 'Tank rank' : role === 'damage' ? 'Damage rank' : 'Support rank'}<select value={ratings[role]} onChange={(event) => setRatings((current) => ({ ...current, [role]: toRankOrdinal(Number(event.target.value)) }))}>{options.map((option) => <option key={option.value} value={option.value}>{option.label}</option>)}</select></label>)}<label>Status<select value={status} onChange={(event) => setStatus(event.target.value as RsvpStatus)}><option value="going">Going</option><option value="maybe">Maybe</option><option value="not_going">Not going</option></select></label><button className="button primary" disabled={create.isPending || !displayName.trim()}>{create.isPending ? 'Adding…' : 'Add participant'}</button></div>{create.isError && <p className="error-note">{create.error.message}</p>}</form><div className="section-title"><div><h2>Participant responses</h2><p>Admin overrides are attributed and audited.</p></div><div className="count-pills"><Badge tone="success">{rows.data.filter((r) => r.status === 'going').length} going</Badge><Badge tone="warning">{rows.data.filter((r) => r.status === 'maybe').length} maybe</Badge></div></div><div className="participant-list">{rows.data.map((r) => <div className="participant-row" key={r.id}><div className="mini-avatar">{r.player.displayName.slice(0, 2).toUpperCase()}</div><div className="participant-name"><strong>{r.player.displayName}</strong><span>{r.player.preferredRoles.map((role) => role[0].toUpperCase() + role.slice(1)).join(' · ') || 'No preferred roles'}{r.player.preferredPlayerIds.length > 0 && <> · Preferred with {r.player.preferredPlayerIds.map((id) => names.get(id) ?? id.slice(0, 6)).join(', ')}</>}{r.changedBy?.source === 'admin' && <> · <em>set by {r.changedBy.displayName}</em></>}</span></div><div className="mini-ratings"><span>T · {rankLabel(r.player.ratings.tank, language)}</span><span>D · {rankLabel(r.player.ratings.damage, language)}</span><span>S · {rankLabel(r.player.ratings.support, language)}</span></div><select disabled={override.isPending} aria-label={`RSVP for ${r.player.displayName}`} value={r.status} onChange={(e) => override.mutate({ playerId: r.player.id, status: e.target.value as RsvpStatus })}><option value="going">Going</option><option value="maybe">Maybe</option><option value="not_going">Not going</option></select></div>)}</div>{override.isError && <p className="error-note">{override.error.message}</p>}</section>
 }
 
 function BalanceView({ eventId }: { eventId: string }) {

frontend/src/api/client.ts

@@ -442,6 +442,23 @@ export const api = {
     const byId = new Map(players.map(adaptPlayer).map((player) => [player.id, player]))
     return rsvps.map((rsvp) => adaptRegistration(rsvp, byId, adaptSession(session)))
   },
+  createParticipant: async (
+    eventId: string,
+    displayName: string,
+    ratings: Pick<Ratings, PlayerRole>,
+    status: RsvpStatus,
+  ) => {
+    const result = await request<{ player: RawPlayer; rsvp: RawRSVP }>(`/events/${eventId}/participants`, {
+      method: 'POST',
+      body: JSON.stringify({
+        displayName,
+        ratings: { tank: ratings.tank, damage: ratings.damage, support: ratings.support },
+        status: statusToRaw(status),
+      }),
+    })
+    const player = adaptPlayer(result.player)
+    return adaptRegistration(result.rsvp, new Map([[player.id, player]]))
+  },
   setRsvp: async (eventId: string, playerId: string, status: RsvpStatus) => {
     const [result, players, session] = await Promise.all([
       request<RawRSVP>(`/events/${eventId}/rsvps/${playerId}`, { method: 'PUT', body: JSON.stringify({ status: statusToRaw(status) }) }),

frontend/src/i18n.tsx

@@ -57,6 +57,9 @@ const translations: Record<string, string> = {
   'RSVP for': 'Статус участия для',
   'Response saved · Server confirmed just now': 'Ответ сохранён · Сервер подтвердил только что',
   'Attendance': 'Участие',
+  'Registered players': 'Зарегистрированные игроки',
+  'Everyone can see who responded and their current status.': 'Все могут видеть, кто ответил и какой статус выбрал.',
+  'No responses yet.': 'Ответов пока нет.',
   'No': 'Нет',
   'Manage participants': 'Управлять участниками',
   'Loading profile…': 'Загрузка профиля…',
@@ -113,6 +116,14 @@ const translations: Record<string, string> = {
   'Loading participants…': 'Загрузка участников…',
   'Participant responses': 'Ответы участников',
   'Admin overrides are attributed and audited.': 'Изменения администратора подписываются и аудируются.',
+  'Add participant': 'Добавить участника',
+  'Create a guest player when they cannot sign in with Discord.': 'Создайте гостевого игрока, если он не может войти через Discord.',
+  'Nickname': 'Ник',
+  'Tank rank': 'Ранг танка',
+  'Damage rank': 'Ранг урона',
+  'Support rank': 'Ранг поддержки',
+  'Status': 'Статус',
+  'Adding…': 'Добавление…',
   'Not going': 'Не идёт',
   'Preferred with': 'Предпочитает играть с',
   'No preferred roles': 'Нет предпочитаемых ролей',

frontend/src/index.css

@@ -124,6 +124,11 @@ main { min-height: calc(100vh - 72px); }
 .attendance-stats strong { margin-left: auto; color: #fff; }
 .attendance-stats i { width: 6px; height: 6px; border-radius: 50%; background: #59616b; }
 .attendance-stats i.green { background: var(--green); }.attendance-stats i.yellow { background: var(--yellow); }
+.public-roster { margin-top: 18px; padding: 24px 28px; }
+.public-roster .section-title { margin-top: 0; }
+.public-roster-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
+.public-roster-player { min-height: 52px; display: grid; grid-template-columns: 32px minmax(0,1fr) auto; align-items: center; gap: 10px; padding: 9px 11px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface-2); }
+.public-roster-player strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
 
 .profile-banner { padding: 24px; display: flex; align-items: center; gap: 18px; margin-bottom: 16px; }
 .large-avatar { width: 70px; height: 70px; font-size: 21px; }
@@ -158,6 +163,14 @@ main { min-height: calc(100vh - 72px); }
 .settings-card, .admin-summary, .table-card { padding: 24px; }
 .settings-card .section-title, .table-card .section-title { margin-top: 0; }
 .field-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 16px; }
+.guest-participant-form { margin-bottom: 24px; padding: 18px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2); }
+.guest-participant-form > div:first-child { margin-bottom: 14px; }
+.guest-participant-form h2 { font-size: 16px; }
+.guest-participant-form p { margin-top: 4px; color: var(--muted); font-size: 10px; }
+.guest-participant-fields { display: grid; grid-template-columns: minmax(150px,1.4fr) repeat(4,minmax(120px,1fr)) auto; align-items: end; gap: 10px; }
+.guest-participant-fields label { display: flex; flex-direction: column; gap: 6px; color: #b6bcc4; font-size: 10px; font-weight: 700; }
+.guest-participant-fields input, .guest-participant-fields select { width: 100%; min-height: 40px; }
+.guest-participant-fields .button { min-height: 40px; white-space: nowrap; }
 .settings-card label { display: flex; flex-direction: column; gap: 8px; color: #b6bcc4; font-size: 11px; font-weight: 700; margin-bottom: 16px; }
 input, select, textarea { color: #e9ebed; background: #0e1115; border: 1px solid #303640; border-radius: 6px; padding: 11px 12px; }
 textarea { min-height: 85px; resize: vertical; }
@@ -247,10 +260,10 @@ textarea { min-height: 85px; resize: vertical; }
   .bottom-nav a { min-height: 52px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: #747c87; font-size: 9px; font-weight: 700; }.bottom-nav a svg { font-size: 18px; }.bottom-nav a.active { color: var(--orange); }
   .featured-event { padding: 23px; grid-template-columns: 1fr; }.featured-event > * { grid-column: 1; }.featured-score { margin: 10px 0; }.featured-event .button { width: 100%; }.featured-event h2 { font-size: 22px; }
   .event-card { grid-template-columns: 70px 1fr; }.date-block strong { font-size: 28px; }.event-card-body { padding: 17px; }
-  .detail-layout { gap: 10px; }.event-hero,.roster-preview { padding: 20px; }.rsvp-control { grid-template-columns: 1fr; }.rsvp-control button { justify-content: flex-start; padding-left: 18px; }
+  .detail-layout { gap: 10px; }.event-hero,.roster-preview,.public-roster { padding: 20px; }.rsvp-control { grid-template-columns: 1fr; }.rsvp-control button { justify-content: flex-start; padding-left: 18px; }.public-roster-grid { grid-template-columns: 1fr; }
   .profile-banner { padding: 18px; }.ratings-form { padding: 18px; }.rating-row { grid-template-columns: 1fr; }.rank-select { min-height: 46px; }.form-footer { align-items: stretch; flex-direction: column; }.form-footer .button { width: 100%; }
   .teammate-grid { grid-template-columns: repeat(2,1fr); }
-  .settings-card,.admin-summary,.table-card { padding: 16px; }.field-grid { grid-template-columns: 1fr; }.participant-row { grid-template-columns: 34px 1fr 105px; padding: 9px 0; }.mini-ratings { display: none; }
+  .settings-card,.admin-summary,.table-card { padding: 16px; }.field-grid,.guest-participant-fields { grid-template-columns: 1fr; }.participant-row { grid-template-columns: 34px 1fr 105px; padding: 9px 0; }.mini-ratings { display: none; }
   .candidate-list { grid-template-columns: 1fr; }.teams-grid { grid-template-columns: 1fr; }.balance-score { grid-template-columns: 1.4fr 1fr 1fr; padding: 15px; gap: 10px; }.reserve-bar,.sticky-action { align-items: stretch; flex-direction: column; }.sticky-action .button { width: 100%; }
   .scoreboard { min-height: 120px; grid-template-columns: 1fr 90px 1fr; }.score-team { padding: 15px 10px; }.score-team h2 { font-size: 13px; }.score-team small { display: none; }.series-score strong { font-size: 30px; }.series-score .badge { display: none; }
   .turn-header { padding: 20px; }.turn-header h2 { font-size: 23px; }.draft-options { grid-template-columns: repeat(2,1fr); padding: 14px; }.turn-footer { align-items: stretch; flex-direction: column; }.turn-footer .button { width: 100%; }