diff --git a/client/visualizer/src/sidebar/matchrunner.ts b/client/visualizer/src/sidebar/matchrunner.ts index 62101fd4..fe3c8e78 100644 --- a/client/visualizer/src/sidebar/matchrunner.ts +++ b/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 */