From 52fdf958f74c8d95d012e55676f8f5d4a3488953 Mon Sep 17 00:00:00 2001
From: "Kalle (Sendou)" <38327916+Sendouc@users.noreply.github.com>
Date: Fri, 17 Dec 2021 23:12:08 +0200
Subject: [PATCH] Number map list rounds

---
 app/routes/to/$organization.$tournament/start.tsx |  2 --
 app/styles/global.css                             |  2 +-
 app/styles/tournament-start.css                   | 12 +++++++++++-
 3 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/app/routes/to/$organization.$tournament/start.tsx b/app/routes/to/$organization.$tournament/start.tsx
index a7d052560..b9285adab 100644
--- a/app/routes/to/$organization.$tournament/start.tsx
+++ b/app/routes/to/$organization.$tournament/start.tsx
@@ -20,8 +20,6 @@ import { findTournamentByNameForUrl } from "~/services/tournament";
 import startBracketTabStylesUrl from "~/styles/tournament-start.css";
 
 // TODO: some warning if trying to continue and some round card is editing
-// TODO: add round numbers
-// 4) can change any invidual map via dropdown (no regen)
 
 export const links: LinksFunction = () => {
   return [{ rel: "stylesheet", href: startBracketTabStylesUrl }];
diff --git a/app/styles/global.css b/app/styles/global.css
index 7c47e3782..e8e4e0a9f 100644
--- a/app/styles/global.css
+++ b/app/styles/global.css
@@ -205,8 +205,8 @@ select {
   all: unset;
   width: 90%;
   border: 1px solid var(--border);
-
   background: var(--select-background, var(--bg-lighter));
+
   /* TODO: Get color from CSS var */
   background-image: url('data:image/svg+xml;utf8,<svg width="1rem" color="rgb(255 255 255 / 55%)" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" /></svg>');
   background-position-x: 95%;
diff --git a/app/styles/tournament-start.css b/app/styles/tournament-start.css
index abfea7d61..a111ff03c 100644
--- a/app/styles/tournament-start.css
+++ b/app/styles/tournament-start.css
@@ -57,16 +57,26 @@
 .tournament__start__rounds-list {
   padding-top: var(--s-2);
   padding-left: 0;
+  counter-reset: section;
   font-size: var(--fonts-sm);
 }
 
 .tournament__start__map-row {
   display: flex;
   align-items: center;
-  padding-bottom: var(--s-1);
+  padding-bottom: var(--s-1-5);
   gap: var(--s-2);
 }
 
+.tournament__start__map-row::before {
+  color: var(--text-lighter);
+  content: counter(section) ".";
+  counter-increment: section;
+  font-size: var(--fonts-xxs);
+  font-weight: var(--bold);
+  padding-inline: var(--s-1);
+}
+
 .tournament__start__round-card-buttons-container {
   display: flex;
   justify-content: center;