Make teamsTab mobile friendly

components/AvatarWithName.tsx

@@ -8,12 +8,14 @@ export function AvatarWithName(p: {
   return (
     <div class={s.container}>
       <div class={s.placeholder}>
-        <img
-          alt=""
-          class={s.avatar}
-          loading="lazy"
-          src={`https://cdn.discordapp.com/avatars/${p.discordId}/${p.discordAvatar}.png?size=80`}
-        />
+        {p.discordAvatar && (
+          <img
+            alt=""
+            class={s.avatar}
+            loading="lazy"
+            src={`https://cdn.discordapp.com/avatars/${p.discordId}/${p.discordAvatar}.png?size=80`}
+          />
+        )}
       </div>
       <div>{p.discordName}</div>
     </div>

scenes/layout/components/Layout.tsx

@@ -26,8 +26,8 @@ export function Layout(p: { children: JSXElement }) {
           <SearchInput />
         </div>
         <div class={s.rightContainer}>
-          <HamburgerButton isExpanded={menuExpanded()} onClick={toggleMenu} />
           <UserItem />
+          <HamburgerButton isExpanded={menuExpanded()} onClick={toggleMenu} />
         </div>
       </header>
       <MobileNav isExpanded={menuExpanded()} />

scenes/tournament/TournamentPage.data.ts

@@ -20,5 +20,6 @@ export default function TournamentData({
   return user;
 }
 
-export const useTournamentData = (delta?: number) =>
-  useData<UseDataResult<InferQueryOutput<"tournament.get">>>(delta);
+export function useTournamentData(delta?: number) {
+  return useData<UseDataResult<InferQueryOutput<"tournament.get">>>(delta);
+}

scenes/tournament/components/TeamsTab.tsx

@@ -4,30 +4,23 @@ import s from "../styles/TeamsTab.module.css";
 import { AvatarWithName } from "../../../components/AvatarWithName";
 import type { InferQueryOutput } from "../../../utils/trpc-client";
 
+const sortCaptainFirst = (a: { captain: boolean }, b: { captain: boolean }) => {
+  return Number(b.captain) - Number(a.captain);
+};
+
+const sortTeamsFullFirst = (a: { members: any[] }, b: { members: any[] }) => {
+  const aSortValue = a.members.length >= 4 ? 1 : 0;
+  const bSortValue = b.members.length >= 4 ? 1 : 0;
+
+  return bSortValue - aSortValue;
+};
+
 export function TeamsTab() {
   const tournament = useTournamentData(1);
 
-  const sortCaptainFirst = (
-    a: { captain: boolean },
-    b: { captain: boolean }
-  ) => {
-    return Number(b.captain) - Number(a.captain);
-  };
-
-  const completeTeams = createMemo(() =>
+  const sortedTeams = createMemo(() =>
     tournament()
-      ?.teams.filter((team) => team.members.length >= 4)
-      .map((team) => {
-        return {
-          ...team,
-          members: team.members.sort(sortCaptainFirst),
-        };
-      })
-  );
-
-  const inCompleteTeams = createMemo(() =>
-    tournament()
-      ?.teams.filter((team) => team.members.length < 4)
+      ?.teams.sort(sortTeamsFullFirst)
       .map((team) => {
         return {
           ...team,
@@ -38,27 +31,18 @@ export function TeamsTab() {
 
   return (
     <div class={s.container}>
-      <Show when={completeTeams()}>
-        {(teams) => <TeamsList teams={teams} title="Full teams" />}
-      </Show>
-      <Show when={inCompleteTeams()}>
-        {(teams) => <TeamsList teams={teams} title="Incomplete teams" />}
-      </Show>
+      <Show when={sortedTeams()}>{(teams) => <TeamsList teams={teams} />}</Show>
     </div>
   );
 }
 
 function TeamsList(p: {
   teams: NonNullable<InferQueryOutput<"tournament.get">>["teams"];
-  title: string;
 }) {
   if (!p.teams.length) return null;
 
   return (
     <div>
-      <h2 class={s.teamListTitle}>
-        {p.title} ({p.teams.length})
-      </h2>
       <div class={s.teamsContainer}>
         <For each={p.teams}>
           {(team) => (
@@ -69,7 +53,7 @@ function TeamsList(p: {
                   {(data, i) => (
                     <div class={s.member}>
                       <div class={s.orderNumber}>
-                        {data.captain ? "C" : i()}
+                        {data.captain ? "C" : i() + 1}
                       </div>
                       <AvatarWithName {...data.member} />
                     </div>

scenes/tournament/styles/TeamsTab.module.css

@@ -6,23 +6,24 @@
 
 .teamsContainer {
   display: grid;
-  grid-template-columns: 1fr 1fr;
+  grid-template-columns: 1fr;
   row-gap: var(--s-10);
+  column-gap: var(--s-6);
 }
 
 .teamName {
   display: flex;
-  align-items: center;
+  justify-self: center;
+  align-self: center;
   font-weight: var(--extra-bold);
   font-size: var(--fonts-lg);
+  border-block-end: 2px solid var(--theme);
 }
 
 .membersContainer {
   display: flex;
   flex-direction: column;
   gap: var(--s-4);
-  border-inline-start: 2px solid var(--theme);
-  padding-inline-start: var(--s-3);
 }
 
 .member {
@@ -42,3 +43,19 @@
   text-align: center;
   margin-block-start: 0;
 }
+
+@media screen and (min-width: 640px) {
+  .teamsContainer {
+    grid-template-columns: 1fr 1fr;
+  }
+
+  .teamName {
+    justify-self: flex-end;
+    border-bottom: none;
+  }
+
+  .membersContainer {
+    border-inline-start: 2px solid var(--theme);
+    padding-inline-start: var(--s-6);
+  }
+}