Port state setting sandbox

app.go

@@ -9,6 +9,7 @@ import (
 	"runtime"
 	"slices"
 	"strings"
+	"sync"
 	"time"
 
 	rlbot "github.com/RLBot/go-interface"
@@ -27,6 +28,8 @@ type App struct {
 	app               *application.App
 	latestReleaseJson []RawReleaseInfo
 	rlbotAddress      string
+	sandbox           *SandboxState
+	sandboxMu         sync.Mutex
 }
 
 func (a *App) IgnoreMe(
@@ -113,9 +116,9 @@ func NewApp() *App {
 
 	var latest_release_json []RawReleaseInfo
 	return &App{
-		nil,
-		latest_release_json,
-		rlbot_address,
+		app:               nil,
+		latestReleaseJson: latest_release_json,
+		rlbotAddress:      rlbot_address,
 	}
 }
 

frontend/src/App.svelte

@@ -7,6 +7,7 @@ import Events from "./components/Events.svelte";
 import GuiSettings from "./components/GuiSettings.svelte";
 import Home from "./pages/Home.svelte";
 import RocketHost from "./pages/RocketHost.svelte";
+import StateSettingSandbox from "./pages/StateSettingSandbox.svelte";
 import StoryMode from "./pages/StoryMode.svelte";
 import Welcome from "./pages/Welcome.svelte";
 import { parseJSON } from "./index";
@@ -75,6 +76,9 @@ let paths: {
       {#if activePage == "rhost"}
         <h3>&nbsp; / Rocket Host</h3>
       {/if}
+      {#if activePage == "statesettingsandbox"}
+        <h3>&nbsp; / State Setting Sandbox</h3>
+      {/if}
       {#if activePage == "storymode"}
         <h3>&nbsp; / Story Mode</h3>
       {/if}
@@ -110,7 +114,9 @@ let paths: {
         <button>Menu</button>
         <div class="dropmenu right">
           <button
-            onclick={alert.bind(null, "TODO: not implemented yet")}
+            onclick={() => {
+              activePage = "statesettingsandbox"
+            }}
             >State Setting Sandbox</button
           >
           <button
@@ -141,6 +147,12 @@ let paths: {
     <RocketHost />
   </div>
 
+  <div
+    class={"pageContainer" + (activePage == "statesettingsandbox" ? "" : " hidden")}
+  >
+    <StateSettingSandbox visible={activePage === "statesettingsandbox"} />
+  </div>
+
   <div
     class={"pageContainer" + (activePage == "storymode" ? "" : " hidden")}
   >

frontend/src/components/NiceSelect.svelte

@@ -1,5 +1,10 @@
 <script lang="ts">
-let { value = $bindable(), options = {}, placeholder = "" } = $props();
+let {
+  value = $bindable(),
+  options = {},
+  placeholder = "",
+  on_change = () => {},
+} = $props();
 
 const options_entries = $derived(Object.entries(options));
 $effect(() => {
@@ -14,7 +19,7 @@ $effect(() => {
 </script>
 
 <label class="select" for="slct">
-  <select id="slct" bind:value required>
+  <select id="slct" bind:value onchange={on_change} required>
     <option value="" disabled selected>{placeholder}</option>
     {#each options_entries as option}
       <option value={option[1]}>{option[0]}</option>