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/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) }) }),