{master} fix colors in large team battles

ui/tournament/css/_team-battle.scss

@@ -1,15 +1,16 @@
 $team-colors: (0: hsl(274, 100%, 59%), 1: hsl(240, 100%, 67%), 2: #008000, 3: #b22222, 4: hsl(16, 80%, 62%), 5: #9acd32, 6: #ff4500, 7: #2e8b57, 8: #daa520, 9: hsl(32, 75%, 47%));
 
-@each $index, $color in $team-colors {
-  team.ttc-#{$index} {
-    color: #{$color};
-  }
-}
-
 team {
   padding: 1px 5px;
   font-size: .8em;
   font-weight: bold;
+  color: $c-brag;
+}
+
+@each $index, $color in $team-colors {
+  team.ttc-#{$index} {
+    color: #{$color};
+  }
 }
 
 .tour__player-info team {
@@ -105,6 +106,11 @@ team {
   &--full {
     td {
       padding: 2rem 1rem;
+
+      &.team {
+        color: $c-brag;
+        font-weight: bold;
+      }
     }
   }
 }

ui/tournament/src/ctrl.ts

@@ -44,6 +44,7 @@ export default class TournamentController {
     this.scrollToMe();
     sound.end(this.data);
     sound.countDown(this.data);
+    this.recountTeams();
     this.redirectToMyGame();
   }
 
@@ -64,11 +65,18 @@ export default class TournamentController {
     sound.end(data);
     sound.countDown(data);
     this.joinSpinner = false;
+    this.recountTeams();
     this.redirectToMyGame();
   };
+  
 
   myGameId = () => this.data.me?.gameId;
 
+  private recountTeams() {
+    if (this.data.teamBattle) 
+      this.data.teamBattle.hasMoreThanTenTeams = Object.keys(this.data.teamBattle.teams).length > 10;
+  }
+
   private redirectToMyGame() {
     const gameId = this.myGameId();
     if (gameId) this.redirectFirst(gameId);

ui/tournament/src/interfaces.ts

@@ -59,6 +59,7 @@ export interface TeamBattle {
     [id: string]: string
   };
   joinWith: string[];
+  hasMoreThanTenTeams?: boolean;
 }
 
 export interface RankedTeam {

ui/tournament/src/view/battle.ts

@@ -4,7 +4,6 @@ import { h } from 'snabbdom'
 import { TeamBattle, RankedTeam, TournamentData, MaybeVNode } from '../interfaces';
 import { VNode } from 'snabbdom/vnode';
 
-
 export function joinWithTeamSelector(ctrl: TournamentController) {
   const onClose = () => {
     ctrl.joinWithTeamSelector = false;
@@ -78,7 +77,10 @@ function myTeam(ctrl: TournamentController, battle: TeamBattle): MaybeVNode {
 }
 
 export function teamName(battle: TeamBattle, teamId: string): VNode {
-  return h('team.ttc-' + Object.keys(battle.teams).indexOf(teamId), battle.teams[teamId]);
+  return h(
+    battle.hasMoreThanTenTeams ? 'team' : 'team.ttc-' + Object.keys(battle.teams).indexOf(teamId),
+    battle.teams[teamId]
+  );
 }
 
 function teamTr(ctrl: TournamentController, battle: TeamBattle, team: RankedTeam) {