Better launch options menu

app.go

@@ -194,7 +194,7 @@ func (a *App) StartMatch(options StartMatchOptions) Result {
 		launcher = flat.LauncherEpic
 	case "custom":
 		launcher = flat.LauncherCustom
-	case "noLaunch":
+	case "nolaunch":
 		launcher = flat.LauncherNoLaunch
 	default:
 		println("No launcher chosen, defaulting to NoLaunch")

frontend/src/components/BotList.svelte

@@ -4,11 +4,9 @@ import toast from "svelte-5-french-toast";
 import {
   SHADOW_ITEM_MARKER_PROPERTY_NAME,
   TRIGGERS,
-  alertToScreenReader,
   dndzone,
 } from "svelte-dnd-action";
 import { flip } from "svelte/animate";
-import { stopPropagation } from "svelte/legacy";
 import { App, BotInfo } from "../../bindings/gui";
 import infoIcon from "../assets/info_icon.svg";
 import defaultIcon from "../assets/rlbot_mono.png";

frontend/src/components/LauncherSelector.svelte

@@ -1,47 +1,49 @@
 <script lang="ts">
 import Modal from "./Modal.svelte";
+import NiceSelect from "./NiceSelect.svelte";
+
+let { visible = $bindable() } = $props();
 
-let visible = $state(false);
 let localLauncher = $state(localStorage.getItem("MS_LAUNCHER") || "");
 let localLauncherArg = $state(localStorage.getItem("MS_LAUNCHER_ARG") || "");
 
-function uid() {
-  return Date.now().toString(36) + Math.random().toString(36).substring(2);
-}
-let uids = [uid(), uid(), uid(), uid(), uid()];
+const launcherOptions = {
+  Steam: "steam",
+  Epic: "epic",
+  Custom: "custom",
+  Legendary: "legendary",
+  "Don't launch": "nolaunch",
+};
+
+let launcher = $state(
+  localStorage.getItem("MS_LAUNCHER") === "custom" &&
+    localStorage.getItem("MS_LAUNCHER_ARG") === "legendary"
+    ? "legendary"
+    : localStorage.getItem("MS_LAUNCHER") || "",
+);
 
 $effect(() => {
-  if (localLauncher === "legendary") {
-    localStorage.setItem("MS_LAUNCHER", "custom");
-    localStorage.setItem("MS_LAUNCHER_ARG", "legendary");
+  if (launcher === "legendary") {
+    localLauncher = "custom";
+    localLauncherArg = "legendary";
   } else {
-    localStorage.setItem("MS_LAUNCHER", localLauncher);
-    localStorage.setItem("MS_LAUNCHER_ARG", localLauncherArg);
+    localLauncher = launcher;
+    if (localLauncherArg === "legendary") {
+      localLauncherArg = "";
+    }
   }
+
+  localStorage.setItem("MS_LAUNCHER", localLauncher);
+  localStorage.setItem("MS_LAUNCHER_ARG", localLauncherArg);
 });
 </script>
 
 <button onclick={() => { visible = true }}>Launcher Options</button>
 
-<Modal title="Select a launcher" bind:visible={visible}>
+<Modal title="Select a launcher" bind:visible>
     <div class="container">
-        <div class="launcherSelect">
-            <input name="launcher" type="radio" id={`launcher-steam-${uids[0]}`} bind:group={localLauncher} value="steam">
-            <label for={`launcher-steam-${uids[0]}`}>Steam</label><br>
-
-            <input name="launcher" type="radio" id={`launcher-epic-${uids[1]}`} bind:group={localLauncher} value="epic">
-            <label for={`launcher-epic-${uids[1]}`}>Epic</label><br>
-
-            <input name="launcher" type="radio" id={`launcher-custom-${uids[2]}`} bind:group={localLauncher} value="custom">
-            <label for={`launcher-custom-${uids[2]}`}>Custom</label><br>
-
-            <input name="launcher" type="radio" id={`launcher-legendary-${uids[3]}`} bind:group={localLauncher} value="legendary">
-            <label for={`launcher-legendary-${uids[3]}`}>Legendary</label><br>
-
-            <input name="launcher" type="radio" id={`launcher-nolaunch-${uids[4]}`} bind:group={localLauncher} value="nolaunch">
-            <label for={`launcher-nolaunch-${uids[4]}`}>Don't launch</label>
-        </div>
-        {#if localLauncher !== "legendary" && localLauncher !== "nolaunch"}
+        <NiceSelect bind:value={launcher} options={launcherOptions} placeholder="Select a launcher" />
+        {#if launcher === "custom"}
         <div class="launcherArg">
             <label for="launcherArg">Additional argument:</label>
             <input type="text" id="launcherArg" bind:value={localLauncherArg} placeholder="(Leave blank for default)">
@@ -56,13 +58,6 @@ $effect(() => {
     flex-direction: column;
     gap: 1rem;
 }
-.launcherSelect {
-    font-size: 1.1rem;
-}
-input[type='radio'] {
-    transform: scale(1.4);
-    user-select: none;
-}
 .launcherArg {
     display: flex;
     flex-direction: column;

frontend/src/components/MatchSettings/Main.svelte

@@ -12,6 +12,7 @@ let {
   mode = $bindable(),
   extraOptions = $bindable(),
   mutators = $bindable(),
+  launcherOptionsVisible = $bindable(),
   onStart = (randomizeMap: boolean) => {},
   onStop = () => {},
 } = $props();
@@ -29,12 +30,12 @@ const existingMatchBehaviors: { [n: string]: number } = {
 };
 
 function cleanCase(toClean: string) {
-  let halfClean = toClean.replaceAll("_", " ").replace(" option", "");
+  const halfClean = toClean.replaceAll("_", " ").replace(" option", "");
   return halfClean.charAt(0).toUpperCase() + halfClean.slice(1);
 }
 
 function resetMutators() {
-  for (let key of Object.keys(mutators)) {
+  for (const key of Object.keys(mutators)) {
     mutators[key] = 0;
   }
   selectedPreset = "";
@@ -60,7 +61,7 @@ function setPreset(presetData: Gamemode) {
     randomizeMap = true;
   }
 
-  for (let key of filteredMutatorOptions) {
+  for (const key of filteredMutatorOptions) {
     if (presetData.mutators[key] !== undefined) {
       mutators[key] = mutatorOptions[key].indexOf(presetData.mutators[key]);
     } else {
@@ -92,7 +93,7 @@ const filteredMutatorOptions = Object.keys(mutatorOptions).filter(
                 />
             </div>
             <div class="right-controls">
-                <LauncherSelector />
+                <LauncherSelector bind:visible={launcherOptionsVisible} />
             </div>
         </div>
         <div class="controls">

frontend/src/components/Modal.svelte

@@ -10,7 +10,7 @@ function handleOuter(e: MouseEvent) {
   if (e.target === wrap && mouseDownWasOutside) visible = false;
 }
 function handleMouseDown(e: MouseEvent) {
-  let res = e.target === wrap;
+  const res = e.target === wrap;
   mouseDownWasOutside = res;
   return res;
 }

frontend/src/pages/Home.svelte

@@ -31,6 +31,7 @@ let paths: {
   JSON.parse(window.localStorage.getItem("BOT_SEARCH_PATHS") || "[]"),
 );
 
+let launcherOptionsVisible = $state(false);
 let players: DraggablePlayer[] = $state([...BASE_PLAYERS]);
 let selectedTeam = $state(null);
 
@@ -84,7 +85,7 @@ $effect(() => {
 let extraOptions = $state(
   JSON.parse(
     localStorage.getItem("MS_EXTRAOPTIONS") ||
-      '{"enableStateSetting": true, "existingMatchBehavior": 1}',
+      '{"enableStateSetting": true, "existingMatchBehavior": 0}',
   ),
 );
 $effect(() => {
@@ -98,12 +99,14 @@ $effect(() => {
 });
 
 async function onMatchStart(randomizeMap: boolean) {
-  let launcher = localStorage.getItem("MS_LAUNCHER");
+  const launcher = localStorage.getItem("MS_LAUNCHER");
   if (!launcher) {
     toast.error("Please select a launcher first", {
       position: "bottom-right",
       duration: 5000,
     });
+
+    launcherOptionsVisible = true;
     return;
   }
 
@@ -114,7 +117,7 @@ async function onMatchStart(randomizeMap: boolean) {
       ];
   }
 
-  let options: StartMatchOptions = {
+  const options: StartMatchOptions = {
     map: $mapStore,
     gameMode: mode,
     bluePlayers: bluePlayers.map((x: DraggablePlayer) => {
@@ -135,7 +138,7 @@ async function onMatchStart(randomizeMap: boolean) {
     position: "bottom-right",
   });
 
-  let response = await App.StartMatch(options);
+  const response = await App.StartMatch(options);
 
   if (response.success) {
     toast.success("Sent start match command", {
@@ -154,7 +157,7 @@ async function onMatchStop() {
   toast("Stopping match...", {
     position: "bottom-right",
   });
-  let response = await App.StopMatch(false);
+  const response = await App.StopMatch(false);
 
   if (response.success) {
     toast.success("Sent stop match command", {
@@ -213,6 +216,7 @@ function handleSearch(event: Event) {
             bind:mode
             bind:mutators={mutatorSettings}
             bind:extraOptions
+            bind:launcherOptionsVisible
         />
     </div>
 </div>

frontend/src/pages/RocketHost.svelte

@@ -14,8 +14,8 @@ let botFamilies = $derived.by(() => {
   let families: {
     [name: string]: string[];
   } = {};
-  for (let bot of bots) {
-    let fam = bot.family !== "" ? bot.family : bot.name;
+  for (const bot of bots) {
+    const fam = bot.family !== "" ? bot.family : bot.name;
     if (!Object.hasOwn(families, fam)) {
       families[fam] = [];
     }
@@ -69,6 +69,7 @@ refreshRHostServers();
 
 let blueBots: string[] = $state([]);
 let orangeBots: string[] = $state([]);
+let launcherOptionsVisible = $state(false);
 </script>
 
 <div class="page">
@@ -182,7 +183,7 @@ let orangeBots: string[] = $state([]);
             </div>
             <div>
                 <label for="mapselect">Launcher</label>
-                <LauncherSelector />
+                <LauncherSelector bind:visible={launcherOptionsVisible} />
             </div>
         </div>
 
@@ -194,6 +195,8 @@ let orangeBots: string[] = $state([]);
                         position: "bottom-right",
                         duration: 5000,
                     });
+
+                    launcherOptionsVisible = true;
                     return;
                 }
 

rockethost.go

@@ -153,7 +153,7 @@ func (a *App) StartRHostMatch(settings RHostMatchSettings) (string, error) {
 		launcher = flat.LauncherEpic
 	case "custom":
 		launcher = flat.LauncherCustom
-	case "noLaunch":
+	case "nolaunch":
 		launcher = flat.LauncherNoLaunch
 	default:
 		println("No launcher chosen, defaulting to NoLaunch")