MatchData on Station Field Monitor

Author: cpapplefamily

static/css/field_monitor_display.css

@@ -27,6 +27,25 @@ body {
 .position-row[data-ds="true"][data-preMatch="false"] {
   display: none;
 }
+#matchData[data-ds="true"][data-preMatch="true"]{
+  display: none;
+}
+#matchData{
+  position: absolute;
+  top: 2%;
+  width: 100%;
+  height: 170px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  font-size: 4vw;
+}
+#matchStatusRow{
+  display: flex;
+}
+#matchStatusRow[data-ds="true"][data-preMatch="false"]  {
+  display: none;
+}
 #matchStatusRow {
   height: 6%;
   display: flex;
@@ -36,9 +55,6 @@ body {
   font-size: 1.5vw;
   text-transform: uppercase;
 }
-#matchStatusRow[data-ds="true"][data-preMatch="false"]  {
-  display: none;
-}
 #eventStatusRow {
   height: 7%;
   display: flex;

static/js/field_monitor_display.js

@@ -148,6 +148,7 @@ var handleMatchTime = function(data) {
   translateMatchTime(data, function(matchState, matchStateText, countdownSec) {
     $("#matchState").text(matchStateText);
     $("#matchTime").text(countdownSec);
+    $("#matchTimeAllianceStation").text(countdownSec);
     if (matchStateText === "PRE-MATCH" | matchStateText === "POST-MATCH") {
       $(".ds-dependent").attr("data-preMatch", "true");
     } else {
@@ -162,10 +163,22 @@ var handleRealtimeScore = function(data,reversed) {
     if (reversed === "true") {
       $("#rightScore").text(data.Red.ScoreSummary.Score);
       $("#leftScore").text(data.Blue.ScoreSummary.Score);
+
+      $("#rightScoreAllianceDisplay").text(data.Blue.ScoreSummary.Score);
+      $("#leftScoreAllianceDisplay").text(data.Red.ScoreSummary.Score);
+      $(`#noteNumerator`).text(data.Blue.ScoreSummary.NumNotes);
+      $(`#noteDenominator`).text(data.Blue.ScoreSummary.NumNotesGoal);
+      $(`#amplifiedTimeRemaining`).text(data.Blue.AmplifiedTimeRemainingSec);
+      
     } else {
       $("#rightScore").text(data.Blue.ScoreSummary.Score);
       $("#leftScore").text(data.Red.ScoreSummary.Score);
 
+      $("#rightScoreAllianceDisplay").text(data.Red.ScoreSummary.Score);
+      $("#leftScoreAllianceDisplay").text(data.Blue.ScoreSummary.Score);
+      $(`#noteNumerator`).text(data.Red.ScoreSummary.NumNotes);
+      $(`#noteDenominator`).text(data.Red.ScoreSummary.NumNotesGoal);
+      $(`#amplifiedTimeRemaining`).text(data.Red.AmplifiedTimeRemainingSec);
     }
 };
 

templates/field_monitor_display.html

@@ -32,6 +32,24 @@
       <div id="earlyLateMessage" class="text-center ds-dependent" style="width: 38%;"></div>
       <div id="rightScore" class="right-score ds-dependent text-center fta-dependent reversible-right " style="width: 8%;"></div>
   </div>
+  <div id="matchData" class="ds-dependent">
+    <div>Match Time</div>
+    <div id="matchTimeAllianceStation"></div>
+    Melody
+    <div id="melody">
+      <span id="noteNumerator"></span>
+      <span class="note-splitter">/</span>
+      <span id="noteDenominator"></span>
+    </div>
+    <div>Amplified Time</div>
+    <div id="amplifiedTimeRemaining"></div>
+    Score
+    <div id="Score">
+      <span id="rightScoreAllianceDisplay" class="left-score ds-dependent text-center reversible-right"></span>
+      <span class="note-splitter">/</span>
+      <span id="leftScoreAllianceDisplay" class="right-score ds-dependent text-center reversible-right"></span>
+    </div>
+  </div>
   </body>
   <script src="/static/js/lib/jquery.min.js"></script>
   <script src="/static/js/lib/jquery.json-2.4.min.js"></script>