Show checked in team count + improved start UI Closes #1678

app/features/tournament-bracket/components/BracketMapListDialog.tsx

@@ -34,7 +34,6 @@ export function BracketMapListDialog({
   bracket: Bracket;
   bracketIdx: number;
 }) {
-  const { t } = useTranslation(["tournament"]);
   const toSetMapPool = useTournamentToSetMapPool();
   const fetcher = useFetcher();
   const tournament = useTournament();
@@ -234,7 +233,7 @@ export function BracketMapListDialog({
                 _action="START_BRACKET"
                 className="mx-auto"
               >
-                {t("tournament:bracket.finalize.action")}
+                Start the bracket
               </SubmitButton>
             ) : (
               <div className="text-warning text-center">

app/features/tournament-bracket/routes/to.$id.brackets.tsx

@@ -284,6 +284,12 @@ export default function TournamentBracketsPage() {
     return null;
   };
 
+  const totalTeamsAvailableForTheBracket = () =>
+    bracketIdx === 0
+      ? tournament.ctx.teams.length
+      : (bracket.teamsPendingCheckIn ?? []).length +
+        bracket.data.participant.length;
+
   return (
     <div>
       {visibility !== "hidden" && !tournament.everyBracketOver ? (
@@ -314,27 +320,30 @@ export default function TournamentBracketsPage() {
               {t("tournament:bracket.wip")}
             </Alert>
           ) : (
-            <Alert
-              variation="INFO"
-              alertClassName="tournament-bracket__start-bracket-alert"
-              textClassName="stack horizontal md items-center"
-            >
-              {t("tournament:bracket.finalize.text")}{" "}
-              {bracket.canBeStarted ? (
-                <BracketStarter bracket={bracket} bracketIdx={bracketIdx} />
-              ) : (
-                <Popover
-                  buttonChildren={
-                    <>{t("tournament:bracket.finalize.action")}</>
-                  }
-                  triggerClassName="tiny outlined"
-                >
-                  {bracketIdx === 0
-                    ? t("tournament:bracket.beforeStart")
-                    : t("tournament:bracket.waitingForResults")}
-                </Popover>
-              )}
-            </Alert>
+            <div className="stack sm items-center">
+              <Alert
+                variation="INFO"
+                alertClassName="tournament-bracket__start-bracket-alert"
+                textClassName="stack horizontal md items-center"
+              >
+                {bracket.data.participant.length}/
+                {totalTeamsAvailableForTheBracket()} teams checked in
+                {bracket.canBeStarted ? (
+                  <BracketStarter bracket={bracket} bracketIdx={bracketIdx} />
+                ) : null}
+              </Alert>
+              {!bracket.canBeStarted ? (
+                <div className="tournament-bracket__mini-alert">
+                  ⚠️{" "}
+                  {bracketIdx === 0 ? (
+                    <>Tournament start time is in the future</>
+                  ) : (
+                    <>Teams pending from the previous bracket</>
+                  )}{" "}
+                  (blocks starting)
+                </div>
+              ) : null}
+            </div>
           )}
         </div>
       ) : null}
@@ -413,7 +422,6 @@ function BracketStarter({
   bracket: BracketType;
   bracketIdx: number;
 }) {
-  const { t } = useTranslation(["tournament"]);
   const [dialogOpen, setDialogOpen] = React.useState(false);
   const isMounted = useIsMounted();
 
@@ -433,7 +441,7 @@ function BracketStarter({
         testId="finalize-bracket-button"
         onClick={() => setDialogOpen(true)}
       >
-        {t("tournament:bracket.finalize.action")}
+        Start the bracket
       </Button>
     </>
   );

app/features/tournament-bracket/tournament-bracket.css

@@ -11,6 +11,13 @@
   line-height: 1.4;
 }
 
+.tournament-bracket__mini-alert {
+  background-color: var(--theme-info-transparent);
+  font-size: var(--fonts-xxs);
+  border-radius: var(--rounded);
+  padding: var(--s-1) var(--s-2);
+}
+
 .tournament-bracket__infos {
   display: flex;
   flex-direction: column;

locales/en/tournament.json

@@ -109,10 +109,6 @@
   "bracket.waiting": "Bracket will be shown here when at least {{count}} teams have registered",
   "bracket.waiting.checkin": "Bracket will be shown here when at least {{count}} teams have checked in",
   "bracket.wip": "This bracket is a preview and subject to change",
-  "bracket.finalize.text": "When everything looks good, finalize the bracket to allow matches to be played",
-  "bracket.finalize.action": "Finalize",
-  "bracket.beforeStart": "Bracket can't be started yet as it is before the start time",
-  "bracket.waitingForResults": "Bracket can't be started yet as it is waiting for results of the previous bracket",
 
   "bracket.progress.thanksForPlaying": "Thanks for playing in {{eventName}}!",
   "bracket.progress.match": "Current opponent: {{opponent}}",

locales/fr/tournament.json

@@ -98,8 +98,6 @@
 
   "bracket.waiting": "Le bracket sera affiché ici quand au moins {{count}} équipes seront inscrites",
   "bracket.wip": "Ce bracket est un aperçu et sujet à changement",
-  "bracket.finalize.action": "Finaliser",
-  "bracket.beforeStart": "Le bracket ne peut pas encore démarrer car il est avant l'heure du début.",
 
   "bracket.progress.thanksForPlaying": "Merci d'avoir participé à {{eventName}} !",
   "bracket.progress.match": "Adversaire actuel: {{opponent}}",

locales/he/tournament.json

@@ -98,8 +98,6 @@
 
   "bracket.waiting": "מערכים יופיעו כאן כאשר לפחות {{count}} צוותים נרשמו",
   "bracket.wip": "מערך זה הוא תצוגה מקדימה ונתון לשינויים",
-  "bracket.finalize.action": "סיימו",
-  "bracket.beforeStart": "מערך עדיין לא ניתן להפעלה כפי שהוא לפני שעת ההתחלה",
 
   "bracket.progress.thanksForPlaying": "תודה ששיחקתם ב-{{eventName}}!",
   "bracket.progress.match": "יריב נוכחי: {{opponent}}",

locales/ja/tournament.json

@@ -98,8 +98,6 @@
 
   "bracket.waiting": "ブラケットは、少なくとも {{count}} チームが登録した時点で表示されます",
   "bracket.wip": "このブラケットはまだプレビューで、変更される可能性があります",
-  "bracket.finalize.action": "確定",
-  "bracket.beforeStart": "開始時間前なのでブラケットを開始することができません",
 
   "bracket.progress.thanksForPlaying": "{{eventName}} への参加ありがとうございます!",
   "bracket.progress.match": "現在の対戦者: {{opponent}}",

locales/pt-BR/tournament.json

@@ -98,8 +98,6 @@
 
   "bracket.waiting": "O bracket será mostrado aqui quando ao menos {{count}} times estiverem registrados",
   "bracket.wip": "Esse bracket é uma prévia e poderá mudar",
-  "bracket.finalize.action": "Finalizar Bracket",
-  "bracket.beforeStart": "O bracket não pode ser iniciado pois ainda é antes da hora de início do torneio",
 
   "bracket.progress.thanksForPlaying": "Obrigado por participar do(a) {{eventName}}!",
   "bracket.progress.match": "Oponente atual: {{opponent}}",

locales/zh/tournament.json

@@ -98,8 +98,6 @@
 
   "bracket.waiting": "至少 {{count}} 支队伍报名后，对战表将显示在这里",
   "bracket.wip": "此对战表为可调整的预览",
-  "bracket.finalize.action": "生成",
-  "bracket.beforeStart": "还未到比赛开始时间，对战表目前无法开始",
 
   "bracket.progress.thanksForPlaying": "感谢您参与 {{eventName}}！",
   "bracket.progress.match": "当前对手: {{opponent}}",