From c9bb77d453ab8fee01c0dcf2a01b84aa508931de Mon Sep 17 00:00:00 2001
From: "Kalle (Sendou)" <38327916+Sendouc@users.noreply.github.com>
Date: Wed, 17 Nov 2021 14:03:51 +0200
Subject: [PATCH] Make teamsTab mobile friendly

---
 components/AvatarWithName.tsx                | 14 +++---
 scenes/layout/components/Layout.tsx          |  2 +-
 scenes/tournament/TournamentPage.data.ts     |  5 ++-
 scenes/tournament/components/TeamsTab.tsx    | 46 +++++++-------------
 scenes/tournament/styles/TeamsTab.module.css | 25 +++++++++--
 5 files changed, 48 insertions(+), 44 deletions(-)

diff --git a/components/AvatarWithName.tsx b/components/AvatarWithName.tsx
index 36ce8c137..a7da8569f 100644
--- a/components/AvatarWithName.tsx
+++ b/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>
diff --git a/scenes/layout/components/Layout.tsx b/scenes/layout/components/Layout.tsx
index d4c3b1d18..77d4d36f3 100644
--- a/scenes/layout/components/Layout.tsx
+++ b/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()} />
diff --git a/scenes/tournament/TournamentPage.data.ts b/scenes/tournament/TournamentPage.data.ts
index 81bb4f5bd..98d17db7f 100644
--- a/scenes/tournament/TournamentPage.data.ts
+++ b/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);
+}
diff --git a/scenes/tournament/components/TeamsTab.tsx b/scenes/tournament/components/TeamsTab.tsx
index 35eafe4c1..b07a2e581 100644
--- a/scenes/tournament/components/TeamsTab.tsx
+++ b/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>
diff --git a/scenes/tournament/styles/TeamsTab.module.css b/scenes/tournament/styles/TeamsTab.module.css
index 025ca94c9..9b14f045c 100644
--- a/scenes/tournament/styles/TeamsTab.module.css
+++ b/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);
+  }
+}