Show playoff alliance numbers and 4th teams on queueing display.

static/css/queueing_display.css

@@ -42,8 +42,8 @@ h1 {
 }
 .red-teams, .blue-teams {
   font-family: FuturaLTBold;
-  line-height: 51px;
-  font-size: 45px;
+  line-height: 48px;
+  font-size: 42px;
 }
 .red-teams {
   color: #ff4444;
@@ -52,7 +52,7 @@ h1 {
   color: #2080ff;
 }
 .avatars {
-  line-height: 51px;
+  line-height: 48px;
 }
 #earlyLateMessage {
   font-size: 25px;
@@ -61,3 +61,22 @@ h1 {
   text-align: center;
   text-transform: uppercase;
 }
+.alliance-container {
+  display: flex;
+  height: 192px;
+  justify-content: space-between;
+  align-items: center;
+}
+.alliance-number {
+  width: 40px;
+  height: 40px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: #fc0;
+  color: #333;
+  border-radius: 50%;
+  border: 1px solid #333;
+  font-size: 25px;
+  font-weight: bold;
+}

templates/queueing_display.html

@@ -22,23 +22,23 @@
       <div class="col-lg-10 col-lg-offset-1 well">
         <div class="col-lg-6">
           <div class="row">
-            <div class="col-lg-5">
+            <div class="col-lg-4">
               <h1>
                 {{if eq $i 0}}
                   On Field
                 {{else if eq $i 1}}
                   On Deck
                 {{else if eq $i 2}}
-                  Last Call
+                  Up In 2
                 {{else if eq $i 3}}
-                  Second Call
+                  Up In 3
                 {{else if eq $i 4}}
-                  First Call
+                  Up In 4
                 {{end}}
               </h1>
               <br />
             </div>
-            <div class="col-lg-2">
+            <div class="col-lg-3">
               <h1>{{$.MatchTypePrefix}}{{$match.DisplayName}}</h1>
             </div>
             <div class="col-lg-5">
@@ -47,7 +47,7 @@
           </div>
           {{if eq $i 0}}
             <div class="row">
-              <div id="matchState" class="col-lg-5"></div>
+              <div id="matchState" class="col-lg-4"></div>
               <div id="matchTime" class="col-lg-3"></div>
             </div>
           {{end}}
@@ -58,10 +58,43 @@
           <img class="avatar" src="/api/teams/{{$match.Red3}}/avatar" />
         </div>
         <div class="col-lg-2 red-teams">
-          {{$match.Red1}}<br />{{$match.Red2}}<br />{{$match.Red3}}
+          {{if $match.Red1}}
+            <div class="row">
+              <div class="col-lg-7">
+                {{$match.Red1}}<br />{{$match.Red2}}<br />{{$match.Red3}}
+                {{range $team := (index $.RedOffFieldTeams $i) }}
+                  <br />{{$team}}
+                {{end}}
+              </div>
+              <div class="col-lg-5">
+                {{if $match.ElimRedAlliance}}
+                  <div class="alliance-container">
+                    <div class="alliance-number">{{$match.ElimRedAlliance}}</div>
+                  </div>
+                {{end}}
+              </div>
+            </div>
+          {{end}}
         </div>
         <div class="col-lg-2 blue-teams text-right">
-          {{$match.Blue1}}<br />{{$match.Blue2}}<br />{{$match.Blue3}}
+          {{if $match.Blue1}}
+            <div class="row">
+              <div class="col-lg-5">
+                {{if $match.ElimBlueAlliance}}
+                  <div class="alliance-container">
+                    <div></div>
+                    <div class="alliance-number">{{$match.ElimBlueAlliance}}</div>
+                  </div>
+                {{end}}
+              </div>
+              <div class="col-lg-7">
+                {{$match.Blue1}}<br />{{$match.Blue2}}<br />{{$match.Blue3}}
+                {{range $team := (index $.BlueOffFieldTeams $i) }}
+                <br />{{$team}}
+                {{end}}
+              </div>
+            </div>
+          {{end}}
         </div>
         <div class="col-lg-1 avatars">
           <img class="avatar" src="/api/teams/{{$match.Blue1}}/avatar" /><br />

web/queueing_display.go

@@ -14,7 +14,8 @@ import (
 )
 
 const (
-	numMatchesToShow = 5
+	numNonElimMatchesToShow = 5
+	numElimMatchesToShow    = 4
 )
 
 // Renders the queueing display that shows upcoming matches and timing information.
@@ -28,12 +29,31 @@ func (web *Web) queueingDisplayHandler(w http.ResponseWriter, r *http.Request) {
 		handleWebErr(w, err)
 		return
 	}
+
+	numMatchesToShow := numNonElimMatchesToShow
+	if web.arena.CurrentMatch.Type == "elimination" {
+		numMatchesToShow = numElimMatchesToShow
+	}
+
 	var upcomingMatches []model.Match
+	var redOffFieldTeamsByMatch, blueOffFieldTeamsByMatch [][]int
+	if err != nil {
+		handleWebErr(w, err)
+		return
+	}
 	for i, match := range matches {
 		if match.IsComplete() {
 			continue
 		}
 		upcomingMatches = append(upcomingMatches, match)
+		redOffFieldTeams, blueOffFieldTeams, err := web.arena.Database.GetOffFieldTeamIds(&match)
+		if err != nil {
+			handleWebErr(w, err)
+			return
+		}
+		redOffFieldTeamsByMatch = append(redOffFieldTeamsByMatch, redOffFieldTeams)
+		blueOffFieldTeamsByMatch = append(blueOffFieldTeamsByMatch, blueOffFieldTeams)
+
 		if len(upcomingMatches) == numMatchesToShow {
 			break
 		}
@@ -52,9 +72,17 @@ func (web *Web) queueingDisplayHandler(w http.ResponseWriter, r *http.Request) {
 
 	data := struct {
 		*model.EventSettings
-		MatchTypePrefix string
-		Matches         []model.Match
-	}{web.arena.EventSettings, web.arena.CurrentMatch.TypePrefix(), upcomingMatches}
+		MatchTypePrefix   string
+		Matches           []model.Match
+		RedOffFieldTeams  [][]int
+		BlueOffFieldTeams [][]int
+	}{
+		web.arena.EventSettings,
+		web.arena.CurrentMatch.TypePrefix(),
+		upcomingMatches,
+		redOffFieldTeamsByMatch,
+		blueOffFieldTeamsByMatch,
+	}
 	err = template.ExecuteTemplate(w, "queueing_display.html", data)
 	if err != nil {
 		handleWebErr(w, err)