unlimited team battle POC

app/views/tournament/teamBattle.scala

@@ -62,9 +62,9 @@ object teamBattle {
       title = tour.name(),
       moreCss = cssTag("tournament.show.team-battle")
     )(
-      main(cls := "tour__battle-standing box")(
+      main(cls := "box")(
         h1(a(href := routes.Tournament.show(tour.id))(tour.name())),
-        table(cls := "slist slist-pad tour__team-standing")(
+        table(cls := "slist slist-pad tour__team-standing tour__team-standing--full")(
           tbody(
             standing.map { t =>
               tr(

ui/tournament/css/_team-battle.scss

@@ -91,11 +91,21 @@ team {
   td {
     padding: 1rem 0.5rem;
   }
-}
 
-.tour__battle-standing {
-  td {
-    padding: 2rem 1rem;
+  .more-teams {
+    padding: 0 !important;
+
+    a {
+      padding: 1rem 0;
+      display: block;
+      text-align: center;
+    }
+  }
+
+  &--full {
+    td {
+      padding: 2rem 1rem;
+    }
   }
 }
 

ui/tournament/src/interfaces.ts

@@ -24,6 +24,7 @@ export interface TournamentOpts extends Untyped {
 export interface TournamentData extends Untyped {
   teamBattle?: TeamBattle;
   teamStanding?: RankedTeam[];
+  myTeam?: RankedTeam;
   featured?: FeaturedGame;
 }
 

ui/tournament/src/view/battle.ts

@@ -1,9 +1,9 @@
+import TournamentController from '../ctrl';
+import { bind, onInsert, playerName } from './util';
 import { h } from 'snabbdom'
+import { TeamBattle, RankedTeam, TournamentData, MaybeVNode } from '../interfaces';
 import { VNode } from 'snabbdom/vnode';
 
-import { bind, onInsert, playerName } from './util';
-import { TeamBattle, RankedTeam } from '../interfaces';
-import TournamentController from '../ctrl';
 
 export function joinWithTeamSelector(ctrl: TournamentController) {
   const onClose = () => {
@@ -46,12 +46,37 @@ export function joinWithTeamSelector(ctrl: TournamentController) {
 
 export function teamStanding(ctrl: TournamentController, klass?: string): VNode | null {
   const battle = ctrl.data.teamBattle,
-    standing = ctrl.data.teamStanding;
+    standing = ctrl.data.teamStanding,
+    bigBattle = battle && Object.keys(battle.teams).length > 10;
   return battle && standing ? h('table.slist.tour__team-standing' + (klass ? '.' + klass : ''), [
-    h('tbody', standing.map(rt => teamTr(ctrl, battle, rt)))
+    h('tbody', [
+      ...standing.map(rt => teamTr(ctrl, battle, rt)),
+      ...(bigBattle ? [
+        extraTeams(ctrl.data),
+        myTeam(ctrl, battle)
+      ] : [])
+    ])
   ]) : null;
 }
 
+function extraTeams(tour: TournamentData): VNode {
+  return h('tr',
+    h('td.more-teams', {
+      attrs: { colspan: 4 }
+    }, h('a', {
+      attrs: {
+        href: `/tournament/${tour.id}/teams`
+      },
+    }, 'View all teams')
+    )
+  );
+}
+
+function myTeam(ctrl: TournamentController, battle: TeamBattle): MaybeVNode {
+  const team = ctrl.data.myTeam;
+  return team && team.rank > 10 ? teamTr(ctrl, battle, team) : undefined;
+}
+
 export function teamName(battle: TeamBattle, teamId: string): VNode {
   return h('team.ttc-' + Object.keys(battle.teams).indexOf(teamId), battle.teams[teamId]);
 }