Create tournament mutation elements

scenes/tournament/components/ActionSection.tsx

@@ -6,34 +6,42 @@ import s from "../styles/ActionSection.module.css";
 export function ActionSection() {
   const [expanded, setExpanded] = createSignal(true);
 
-  const open = () => setExpanded(true);
-  const close = () => setExpanded(false);
-  const handleSpaceBarClick = (e: KeyboardEvent) => {
-    if (e.key === " ") {
-      e.preventDefault();
-      e.stopPropagation();
-      open();
-    }
-  };
-
   return (
     <div
       class={s.container}
       classList={{ [s.active]: expanded() }}
-      onClick={open}
-      onKeyDown={handleSpaceBarClick}
-      tabindex={expanded() ? undefined : "0"}
+      onClick={() => setExpanded(true)}
+      tabindex={!expanded() ? "0" : undefined}
+      role={!expanded() ? "button" : undefined}
+      onKeyDown={(e: KeyboardEvent) => {
+        if (e.key === " " || e.key === "Enter") {
+          e.preventDefault();
+          setExpanded(true);
+        }
+      }}
     >
       <div class={s.header}>Register now</div>
       {expanded() && (
-        <div class={s.content}>
-          <Input id="team-name" labelText="Team name" />
-          <div class={s.buttonsContainer}>
-            <Button type="submit">Submit</Button>
-            <Button variant="outlined" type="button" onClick={close}>
-              Cancel
-            </Button>
-          </div>
+        <div class={s.content} onKeyDown={(e) => e.stopPropagation()}>
+          <form>
+            <Input
+              id="team-name"
+              labelText="Team name"
+              required
+              minLength={2}
+              maxLength={40}
+            />
+            <div class={s.buttonsContainer}>
+              <Button type="submit">Submit</Button>
+              <Button
+                variant="outlined"
+                type="button"
+                onClick={() => setExpanded(false)}
+              >
+                Cancel
+              </Button>
+            </div>
+          </form>
         </div>
       )}
     </div>

scenes/tournament/router.ts

@@ -1,15 +1,29 @@
 import { z } from "zod";
 import { createRouter } from "../../utils/trpc-server";
-import { findTournamentByNameForUrl } from "./service";
+import { createTournamentTeam, findTournamentByNameForUrl } from "./service";
 
-export const tournament = createRouter().query("get", {
-  input: z.object({
-    organization: z.string(),
-    tournament: z.string(),
-  }),
-  resolve: ({ input }) =>
-    findTournamentByNameForUrl({
-      organizationNameForUrl: input.organization,
-      tournamentNameForUrl: input.tournament,
+export const tournament = createRouter()
+  .query("get", {
+    input: z.object({
+      organization: z.string(),
+      tournament: z.string(),
     }),
-});
+    resolve: ({ input }) =>
+      findTournamentByNameForUrl({
+        organizationNameForUrl: input.organization,
+        tournamentNameForUrl: input.tournament,
+      }),
+  })
+  .mutation("createTournamentTeam", {
+    input: z.object({
+      // TODO: validator
+      name: z.string(),
+      tournamentId: z.number(),
+    }),
+    resolve: ({ input, ctx }) =>
+      createTournamentTeam({
+        userId: ctx.user!.id,
+        name: input.name,
+        tournamentId: input.tournamentId,
+      }),
+  });

scenes/tournament/service.ts

@@ -79,3 +79,27 @@ function twitterToUrl(twitter: string | null) {
 function discordInviteToUrl(discordInvite: string) {
   return `https://discord.com/invite/${discordInvite}`;
 }
+
+export function createTournamentTeam({
+  userId,
+  name,
+  tournamentId,
+}: {
+  userId: number;
+  name: string;
+  tournamentId: number;
+}) {
+  return prisma.tournamentTeam.create({
+    data: {
+      name: name.trim(),
+      tournamentId,
+      members: {
+        create: {
+          memberId: userId,
+          tournamentId,
+          captain: true,
+        },
+      },
+    },
+  });
+}

scenes/tournament/styles/ActionSection.module.css

@@ -9,15 +9,17 @@
   display: flex;
   flex-direction: column;
   align-items: center;
+  cursor: pointer;
 }
 
-.container:hover {
+.container:hover,
+.container:focus {
   background-color: var(--bg-lighter);
-  cursor: pointer;
 }
 
 .active {
   background-color: var(--bg-lighter);
+  cursor: auto;
 }
 
 .header {