Rearrange match play buttons to create a default happy-path flow (fixes

#178).
Team254 · May 20, 2024 · 3f18fdc · 3f18fdc
1 parent f6f360a
commit 3f18fdc
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 18 deletions.
diff --git a/static/css/cheesy-arena.css b/static/css/cheesy-arena.css
@@ -83,7 +83,7 @@
   background-color: #960;
 }
 .btn-match-play {
-  width: 180px;
+  width: 170px;
   height: 50px;
   line-height: 36px;
   font-size: 16px;

diff --git a/static/js/match_play.js b/static/js/match_play.js
@@ -63,6 +63,20 @@ const discardResults = function() {
   websocket.send("discardResults");
 };
 
+// Switches the audience display to the match intro screen.
+const showOverlay = function() {
+  $("input[name=audienceDisplay][value=intro]").prop("checked", true);
+  setAudienceDisplay();
+  $("#showOverlay").prop("disabled", true);
+}
+
+// Switches the audience display to the final score screen.
+const showFinalScore = function() {
+  $("input[name=audienceDisplay][value=score]").prop("checked", true);
+  setAudienceDisplay();
+  $("#showFinalScore").prop("disabled", true);
+}
+
 // Sends a websocket message to change what the audience display is showing.
 const setAudienceDisplay = function() {
   websocket.send("setAudienceDisplay", $("input[name=audienceDisplay]:checked").val());
@@ -181,6 +195,8 @@ const handleArenaStatus = function(data) {
     case "AUTO_PERIOD":
     case "PAUSE_PERIOD":
     case "TELEOP_PERIOD":
+      $("#showOverlay").prop("disabled", true);
+      $("#showFinalScore").prop("disabled", true);
       $("#startMatch").prop("disabled", true);
       $("#abortMatch").prop("disabled", false);
       $("#signalReset").prop("disabled", true);
@@ -191,6 +207,8 @@ const handleArenaStatus = function(data) {
       $("#startTimeout").prop("disabled", true);
       break;
     case "POST_MATCH":
+      $("#showOverlay").prop("disabled", true);
+      $("#showFinalScore").prop("disabled", true);
       $("#startMatch").prop("disabled", true);
       $("#abortMatch").prop("disabled", true);
       $("#signalReset").prop("disabled", false);
@@ -201,6 +219,8 @@ const handleArenaStatus = function(data) {
       $("#startTimeout").prop("disabled", true);
       break;
     case "TIMEOUT_ACTIVE":
+      $("#showOverlay").prop("disabled", true);
+      $("#showFinalScore").prop("disabled", true);
       $("#startMatch").prop("disabled", true);
       $("#abortMatch").prop("disabled", false);
       $("#signalReset").prop("disabled", true);
@@ -211,6 +231,8 @@ const handleArenaStatus = function(data) {
       $("#startTimeout").prop("disabled", true);
       break;
     case "POST_TIMEOUT":
+      $("#showOverlay").prop("disabled", true);
+      $("#showFinalScore").prop("disabled", true);
       $("#startMatch").prop("disabled", true);
       $("#abortMatch").prop("disabled", true);
       $("#signalReset").prop("disabled", true);
@@ -255,6 +277,7 @@ const handleMatchLoad = function(data) {
   $("#playoffBlueAllianceInfo").html(formatPlayoffAllianceInfo(data.Match.PlayoffBlueAlliance, data.BlueOffFieldTeams));
 
   $("#substituteTeams").prop("disabled", true);
+  $("#showOverlay").prop("disabled", false);
 }
 
 // Handles a websocket message to update the match time countdown.
@@ -274,7 +297,9 @@ const handleRealtimeScore = function(data) {
 // Handles a websocket message to populate the final score data.
 const handleScorePosted = function(data) {
   let matchName = data.Match.LongName;
-  if (!matchName) {
+  if (matchName) {
+    $("#showFinalScore").prop("disabled", false);
+  } else {
     matchName = "None"
   }
   $("#savedMatchName").html(matchName);

diff --git a/templates/match_play.html b/templates/match_play.html
@@ -46,36 +46,44 @@
       </div>
     </div>
     <div class="row justify-content-center mt-1">
+      <button type="button" id="showOverlay" class="btn btn-info btn-match-play ms-1"
+        onclick="showOverlay();" disabled>
+        Show Overlay
+      </button>
       <button type="button" id="startMatch" class="btn btn-success btn-match-play ms-1"
-          onclick="startMatch();" disabled>
+        onclick="startMatch();" disabled>
         Start Match
       </button>
-      <button type="button" id="abortMatch" class="btn btn-danger btn-match-play ms-1"
-          onclick="abortMatch();" disabled>
-        Abort Match
-      </button>
-      <button type="button" id="substituteTeams" class="btn btn-info btn-match-play ms-1"
-        onclick="substituteTeams();" disabled>
-        Substitute Teams
+      <button type="button" id="commitResults" class="btn btn-primary btn-match-play ms-1"
+        onclick="confirmCommit();" disabled>
+        Commit Results
       </button>
-      <button type="button" id="signalReset" class="btn btn-success btn-match-play ms-1"
-          onclick="signalReset();" disabled>
-        Signal Reset
+      <button type="button" id="showFinalScore" class="btn btn-info btn-match-play ms-1"
+        onclick="showFinalScore();" disabled>
+        Show Final Score
       </button>
     </div>
     <div class="row justify-content-center mt-1">
-      <button type="button" id="commitResults" class="btn btn-primary btn-match-play ms-1"
-          onclick="confirmCommit();" disabled>
-        Commit Results
+      <button type="button" id="substituteTeams" class="btn btn-primary btn-match-play ms-1"
+        onclick="substituteTeams();" disabled>
+        Substitute Teams
+      </button>
+      <button type="button" id="abortMatch" class="btn btn-danger btn-match-play ms-1"
+        onclick="abortMatch();" disabled>
+        Abort Match
       </button>
       <button type="button" id="discardResults" class="btn btn-warning btn-match-play ms-1"
-          onclick="$('#confirmDiscardResults').modal('show');" disabled>
+        onclick="$('#confirmDiscardResults').modal('show');" disabled>
         Discard Results
       </button>
       <button type="button" id="editResults" class="btn btn-secondary btn-match-play ms-1"
-          onclick="window.location = '/match_review/current/edit';" disabled>
+        onclick="window.location = '/match_review/current/edit';" disabled>
         Edit Results
       </button>
+      <button type="button" id="signalReset" class="btn btn-success btn-match-play ms-1"
+        onclick="signalReset();" disabled>
+        Signal Reset
+      </button>
     </div>
     <div class="card card-body bg-body-tertiary mt-3">
       <div class="row">