src/routes/+page.svelte

@@ -15,12 +15,6 @@ let display_class_topic;
 /** @type {string} */
 let display_name_topic;
 
-/** @type {string} */
-let alliance_selecting = "";
-/** @type {string} */
-let alliance_selected = "";
-let selection_state = "";
-
 /** @type {string} */
 let display_sponsor_topic;
 
@@ -53,9 +47,9 @@ let animation_timer_interval = setInterval(animation_timer, 10);
 
 let event_name = "Mecha Mayhem 2024";
 let match_name = "No Match";
+let match_name_show = "No Match";
 let round = "";
 let number = "";
-let instance = "";
 let score_red = 0;
 let score_red_str = "";
 let score_blue = 0;
@@ -85,31 +79,6 @@ const client = mqtt.connect("ws://10.42.0.36:8883");
 
 client.on("connect", () => {
   console.log("connected to mqtt");
-
-  client.subscribe("alliance/selecting", (err) => {
-    if (err) {
-      console.log(err);
-    } else {
-      console.log(`subscribed to alliance/selecting`);
-    }
-  });
-
-  client.subscribe("alliance/selected", (err) => {
-    if (err) {
-      console.log(err);
-    } else {
-      console.log(`subscribed to alliance/selected`);
-    }
-  });
-
-  client.subscribe("alliance/status", (err) => {
-    if (err) {
-      console.log(err);
-    } else {
-      console.log(`subscribed to alliance/status`);
-    }
-  });
-
   client.subscribe("time", (err) => {
     if (err) {
       console.log(err);
@@ -209,32 +178,12 @@ client.on("message", (topic, message) => {
   let message_str = message.toString();
 
   switch(topic_str){
-  case "alliance/selecting":
-    alliance_selecting = message_str;
-  break;
-  case "alliance/selected":
-    alliance_selected = message_str;
-  break;
-  case "alliance/status":
-    selection_state = message_str;
-    if(selection_state == "accepted") {
-      display_state = "accepted";
-      setTimeout(() => {
-        display_state = "alliance-selection";
-      }, 4000);
-    } else if(selection_state == "declined") {
-      display_state = "denied";
-      setTimeout(() => {
-        display_state = "alliance-selection";
-      }, 4000);
-    }
-  break;
   case "time":
     let local = Date.now();
     let server = JSON.parse(message_str) * 1000;
     offset = server - local;
 
-    if (timer != "Scoring" && timer != "Scored") {
+    if (timer != "Scoring" && timer != "Scored" && match_name_show != "Next Match") {
       stop_timer();
       tick_timer();
       timer_next_tick = setInterval(tick_timer, 50);
@@ -250,13 +199,8 @@ client.on("message", (topic, message) => {
     round = field_obj.tuple.round;
     if (round == "Qualification") {
       round = "Qual";
-    } else if (round == "QuarterFinals") {
-      round = "QF"
-    } else if (round == "SemiFinals") {
-      round = "SF"
     }
-    instance = `${field_obj.tuple.instance}`;
+    match_name = `${round} ${num}`;
-    match_name = `${round} ${instance}-${num}`;
     number = `${num}`;
     break;
   case field_state_topic:
@@ -271,15 +215,18 @@ client.on("message", (topic, message) => {
       score_blue_str = "";
       score_blue = 0;
       score_red = 0;
+      match_name_show = "Next Match";
       display_state = "pre-game";
       break;
     case "Timeout":
       timer = "Timeout";
+      match_name_show = match_name;
       break;
     case "Driver":
       timer_end = start_ms + 105;
       tick_timer();
       timer_next_tick = setInterval(tick_timer, 50);
+      match_name_show = match_name;
       break;
     case "DriverDone":
       timer = "Scoring";
@@ -302,23 +249,28 @@ client.on("message", (topic, message) => {
       timer_end = start_ms + 15;
       tick_timer();
       timer_next_tick = setInterval(tick_timer, 50);
+      match_name_show = match_name;
       break;
     case "AutonomousDone":
+      match_name_show = match_name;
       timer = "Scoring";
       score_red_str = "";
       score_blue_str = "";
       break;
     case "Abandoned":
       timer = "Abandoned";
+      match_name_show = match_name;
       break;
     case "Stopped":
       timer = "Stopped";
+      match_name_show = match_name;
       break;
     case "Scored":
       timer = "Scored";
       score_red_str = `${score_red}`;
       score_blue_str = `${score_blue}`;
       display_state = "timer";
+      match_name_show = match_name;
       break;
     }
     break;
@@ -385,7 +337,7 @@ onMount(() => {
       <p id="red-name">{event_name}</p>
       <p id="blue-name">{display_name}</p>
       <p id="timer">{timer}</p>
-      <p id="match">{match_name}</p>
+      <p id="match">{match_name_show}</p>
 
       <p id="score-red">{score_red_str}</p>
       <p id="score-blue">{score_blue_str}</p>
@@ -419,30 +371,30 @@ onMount(() => {
       <div class="pre-bot" id="pre-r1">
         <p>{teams_red[0]}</p>
 	<object type="image/png" data="/robots/{teams_red[0]}.gif">
-          <img class="rotating" src="/robots/fallback.jpg">
+          <img src="/robots/fallback.jpg">
 	</object>
       </div>
       <div class="pre-bot" id="pre-r2">
         <p>{teams_red[1]}</p>
 	<object type="image/png" data="/robots/{teams_red[1]}.gif">
-          <img class="rotating" src="/robots/fallback.jpg">
+          <img src="/robots/fallback.jpg">
 	</object>
       </div>
       <div id="pre-mid">
         <p id="pre-mid-top">{round}</p>
         <div id="pre-mid-vs"><p>VS</p></div>
-        <p id="pre-mid-bot">{instance}-{number}</p>
+        <p id="pre-mid-bot">{number}</p>
       </div>
       <div class="pre-bot" id="pre-b1">
         <p>{teams_blue[0]}</p>
 	<object type="image/png" data="/robots/{teams_blue[0]}.gif">
-          <img class="rotating" src="/robots/fallback.jpg">
+          <img src="/robots/fallback.jpg">
 	</object>
       </div>
       <div class="pre-bot" id="pre-b2">
         <p>{teams_blue[1]}</p>
         <object type="image/png" data="/robots/{teams_blue[1]}.gif">
-          <img class="rotating" src="/robots/fallback.jpg">
+          <img src="/robots/fallback.jgp">
 	</object>
       </div>
     </div>
@@ -450,38 +402,12 @@ onMount(() => {
     <img class="gif-background" alt="wavy" src="/gifs/wavy_background.gif">
     <img class="gif-foreground" alt="Mecha Mayhem 2024" src="/gifs/mm2024.gif">
   {:else if (display_state == "alliance-selection")}
-    <img class="gif-background" alt="wavy" src="/gifs/wavy_background.gif">
+    <div class="banner"><p>210Y Selecting</p></div>
-    <div id="alliance-selection">
-      <div class="select-top" id="t1"><p>Captain</p></div>
-      <div class="select-top" id="t2"><p>Selected</p></div>
-      <div id="alliance-selecting">
-        {#if (alliance_selecting != "")}
-	<object type="image/png" data="/robots/{alliance_selecting}.gif">
-          <img class="rotating" src="/robots/fallback.jpg">
-	</object>
-        {/if}
-        <p>{alliance_selecting}</p>
-      </div>
-      <div id="alliance-selected">
-        {#if (alliance_selected != "")}
-	<object type="image/png" data="/robots/{alliance_selected}.gif">
-          <img class="rotating" src="/robots/fallback.jpg">
-	</object>
-        {/if}
-        <p>{alliance_selected}</p>
-      </div>
-    </div>
   {:else if (display_state == "break")}
     <div class="banner"><p>Practice @ 12:45</p></div>
   {:else if (display_state == "red-wins")}
     <img class="gif-background" alt="wavy" src="/gifs/wavy_background.gif">
     <img class="gif-foreground" alt="red-wins" src="/gifs/red_win.gif">
-  {:else if (display_state == "accepted")}
-    <img class="gif-background" alt="wavy" src="/gifs/wavy_background.gif">
-    <img class="gif-foreground" alt="accepted" src="/gifs/accepted.gif">
-  {:else if (display_state == "denied")}
-    <img class="gif-background" alt="wavy" src="/gifs/wavy_background.gif">
-    <img class="gif-foreground" alt="denied" src="/gifs/declined.gif">
   {:else if (display_state == "blue-wins")}
     <img class="gif-background" alt="wavy" src="/gifs/wavy_background.gif">
     <img class="gif-foreground" alt="blue-wins" src="/gifs/blue_win.gif">
@@ -533,52 +459,6 @@ p {
   color: white;
 }
 
-#alliance-selection {
-  position: absolute;
-  top: 0;
-  z-index: 1;
-
-  width: 100%;
-  height: 100%;
-
-  display: grid;
-
-  grid-template-columns: 50% 50%;
-  grid-template-rows: 10% 90%;
-  grid-template-areas: "t1 t2"
-                       "s1 s2";
-}
-
-#alliance-selecting {
-  grid-area: s1;
-  height: 100%;
-  width: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-direction: row-reverse;
-  flex-grow: 0;
-}
-
-#alliance-selecting p {
-  font-size: 3cqw;
-}
-
-#alliance-selected p {
-  font-size: 3cqw;
-}
-
-#alliance-selected {
-  grid-area: s2;
-  height: 100%;
-  width: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-direction: row;
-  flex-grow: 0;
-}
-
 #score-midground {
   z-index: 1;
   position: relative;
@@ -658,24 +538,6 @@ p {
   width: 100%;
 }
 
-.select-top p {
-  font-size: 1cqw;
-}
-
-.select-top {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-#t1 {
-  grid-area: t1;
-}
-
-#t2 {
-  grid-area: t2;
-}
-
 #pre-b1 {
   font-size: 2cqw;
   grid-area: b1;
@@ -748,19 +610,6 @@ p {
   background-color: #ee0000;
 }
 
-#alliance-selection div object img {
-  height: 40cqh;
-  width: 40cqh;
-}
-
-#alliance-selection div object {
-  height: 180cqh;
-  width: 180cqh;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
 .banner-gif {
   z-index: 0;
   position: absolute;
@@ -881,17 +730,4 @@ div.score-grid {
   width: 1176px;
   height: 168px;
 }
-
-@-webkit-keyframes rotating {
-    from{
-        -webkit-transform: rotate(0deg);
-    }
-    to{
-        -webkit-transform: rotate(360deg);
-    }
-}
-
-.rotating {
-    -webkit-animation: rotating 2s linear infinite;
-}
 </style>