Add on deck element as an overlay on the head to head brackets

This refactors the CSS out of hte JSP file and adds a space to list the teams that are on deck. Issue #1169
jpschewe · Mar 9, 2024 · 2469dc1 · 2469dc1
1 parent 248e7bf
commit 2469dc1
Show file tree

Hide file tree

Showing 3 changed files with 82 additions and 52 deletions.
diff --git a/src/main/java/fll/web/playoff/RemoteControlBrackets.java b/src/main/java/fll/web/playoff/RemoteControlBrackets.java
@@ -41,7 +41,7 @@ public final class RemoteControlBrackets {
   /**
    * Number of rounds to display on the remote control brackets page.
    */
-  public static final int NUM_ROUNDS_TO_DISPLAY = 2;
+  public static final int NUM_ROUNDS_TO_DISPLAY = 3;
 
   private RemoteControlBrackets() {
   }

diff --git a/src/main/web/playoff/remoteControlBrackets.css b/src/main/web/playoff/remoteControlBrackets.css
@@ -0,0 +1,54 @@
+TD.Leaf {
+    color: #ffffff;
+    background-color: #000000
+}
+
+TD.Bridge {
+    background-color: #808080
+}
+
+SPAN.TeamNumber {
+    color: #ff8080;
+    padding-right: 5px;
+}
+
+SPAN.TeamName {
+    color: #ffffff;
+}
+
+SPAN.TeamScore {
+    color: #ffffff;
+    font-weight: bold;
+}
+
+SPAN.TIE {
+    color: #ff0000;
+}
+
+.TABLE_ASSIGNMENT {
+    font-family: monospace;
+    font-size: small;
+    background-color: white;
+    padding-left: 5%;
+    padding-right: 5%;
+}
+
+#left {
+    position: absolute;
+    left: 0;
+    width: 80%;
+}
+
+#right {
+    position: fixed;
+    right: 0;
+    width: 20%;
+}
+
+#on-deck {
+    margin-left: 5px;
+    padding-left: 5px;
+    background: #FFFCFF;
+    border: 1px solid black;
+    background: #FFFCFF;
+}
diff --git a/src/main/web/playoff/remoteControlBrackets.jsp b/src/main/web/playoff/remoteControlBrackets.jsp
@@ -17,42 +17,7 @@ RemoteControlBrackets.populateContext(application, session, request, pageContext
 <link rel="stylesheet" type="text/css"
     href="<c:url value='/style/big_screen.css'/>" />
 
-<style type='text/css'>
-TD.Leaf {
-    color: #ffffff;
-    background-color: #000000
-}
-
-TD.Bridge {
-    background-color: #808080
-}
-
-SPAN.TeamNumber {
-    color: #ff8080;
-    padding-right: 5px;
-}
-
-SPAN.TeamName {
-    color: #ffffff;
-}
-
-SPAN.TeamScore {
-    color: #ffffff;
-    font-weight: bold;
-}
-
-SPAN.TIE {
-    color: #ff0000;
-}
-
-.TABLE_ASSIGNMENT {
-    font-family: monospace;
-    font-size: small;
-    background-color: white;
-    padding-left: 5%;
-    padding-right: 5%;
-}
-</style>
+<link rel="stylesheet" type="text/css" href="remoteControlBrackets.css" />
 
 <script type="text/javascript"
     src="<c:url value='/js/fll-functions.js'/>"></script>
@@ -102,26 +67,37 @@ SPAN.TIE {
 </script>
 </head>
 <body>
-    <span id="top">&nbsp;</span>
+    <div id='left'>
 
-    <br />
-    <c:forEach items="${allBracketData}" var="bracketData">
+        <span id="top">&nbsp;</span>
 
-        <div class='center'>Head to Head Round
-            ${bracketData.firstRound}, Head to Head Bracket
-            ${bracketData.bracketName}</div>
         <br />
+        <c:forEach items="${allBracketData}" var="bracketData">
+
+            <div class='center'>Head to Head Round
+                ${bracketData.firstRound}, Head to Head Bracket
+                ${bracketData.bracketName}</div>
+            <br />
 
    ${bracketData.bracketOutput}
      <c:if test="${allBracketData.size() > 1}">
-            <br />
-            <br />
-            <hr />
-            <br />
-            <br />
-        </c:if>
-    </c:forEach>
-    <span id="bottom">&nbsp;</span>
-
+                <br />
+                <br />
+                <hr />
+                <br />
+                <br />
+            </c:if>
+        </c:forEach>
+        <span id="bottom">&nbsp;</span>
+    </div>
+
+    <div id='right'>
+        <div id="on-deck">
+            <h1>On deck teams</h1>
+            <table id='on-deck-table'>
+
+            </table>
+        </div>
+    </div>
 </body>
 </html>