Merge branch 'main' of github.com:battlecode/battlecode22 into main

Author: gaurav-arya

client/visualizer/src/sidebar/matchrunner.ts

@@ -38,6 +38,7 @@ export default class MatchRunner {
   // Match information
   private teamA: HTMLSelectElement;
   private teamB: HTMLSelectElement;
+  private swapTeamsButton: HTMLButtonElement;
   private profilerEnabled: HTMLInputElement;
   private selectAllMaps: HTMLButtonElement;
   private deselectAllMaps: HTMLButtonElement;
@@ -119,6 +120,8 @@ export default class MatchRunner {
     this.runMatchWithoutViewing = document.createElement("button");
     this.killProcs = document.createElement("button");
 
+    this.swapTeamsButton = document.createElement("button");
+
     this.profilerEnabled = document.createElement("input");
     this.profilerEnabled.type = 'checkbox';
     this.profilerEnabled.id = 'profiler-enabled';
@@ -142,6 +145,14 @@ export default class MatchRunner {
     divB.appendChild(document.createElement("br"));
     div.appendChild(divB);
 
+    // Swap teams button
+    this.swapTeamsButton.type = "button";
+    this.swapTeamsButton.appendChild(document.createTextNode("Swap Teams"));
+    this.swapTeamsButton.className = "custom-button";
+    this.swapTeamsButton.onclick = this.swapTeams;
+    div.appendChild(this.swapTeamsButton);
+    div.appendChild(document.createElement("br"));
+
     // Profiler enabled checkbox
     const divProfiler = document.createElement("p");
     divProfiler.appendChild(this.profilerEnabled);
@@ -270,7 +281,7 @@ export default class MatchRunner {
     }
     // Found the packages, make the team selectors
     if (packages) {
-      for (let player of packages) {
+      for (let player of packages.sort((a, b) => a.localeCompare(b))) {
         // Add the player to team A
         const optionA = document.createElement("option");
         optionA.value = player;
@@ -286,6 +297,16 @@ export default class MatchRunner {
     }
   }
 
+  private swapTeams = () => {
+    if (this.teamA.options.length === 0 || this.teamB.options.length === 0) {
+      return;
+    }
+
+    const teamAIndex = this.teamA.selectedIndex;
+    this.teamA.selectedIndex = this.teamB.selectedIndex;
+    this.teamB.selectedIndex = teamAIndex;
+  }
+
   /**
    * If the scaffold can run a match, add the functionality to the run button
    */