Loadout editor (#25)

* Add loadout editor (#24)

* nicer loadout-editor flexing

* add fix for nvidia cards on linux

* remove comment

---------

Co-authored-by: Eric Veilleux <virx@virxcase.dev>

Author: swz-git

frontend/rsbuild.config.ts

@@ -13,4 +13,14 @@ export default defineConfig({
       js: "inline-source-map",
     },
   },
+  tools: {
+    rspack(config, { addRules }) {
+      addRules([
+        {
+          test: /\.csv$/,
+          type: "asset/resource",
+        },
+      ]);
+    },
+  },
 });

frontend/src/assets/arrows.svg

@@ -13,7 +13,10 @@ import defaultIcon from "../assets/rlbot_mono.png";
 import starIcon from "../assets/star.svg";
 import filledStarIcon from "../assets/starFilled.svg";
 import { BASE_PLAYERS } from "../base-players";
-import { uuidv4, type DraggablePlayer, type ToggleableScript } from "../index";
+import { type DraggablePlayer, type ToggleableScript, uuidv4 } from "../index";
+//@ts-ignore
+import LoadoutEditor from "./LoadoutEditor/Main.svelte";
+import { getAndParseItems } from "./LoadoutEditor/items";
 import Modal from "./Modal.svelte";
 import Switch from "./Switch.svelte";
 
@@ -26,6 +29,7 @@ let {
   enabledScripts = $bindable({}),
   bluePlayers = $bindable(),
   orangePlayers = $bindable(),
+  map,
 }: {
   bots: DraggablePlayer[];
   scripts: ToggleableScript[];
@@ -35,6 +39,7 @@ let {
   enabledScripts: { [key: string]: boolean };
   bluePlayers: DraggablePlayer[];
   orangePlayers: DraggablePlayer[];
+  map: string;
 } = $props();
 const flipDurationMs = 100;
 
@@ -87,9 +92,25 @@ const subCategoryTags: { [x: string]: string[] } = {
 };
 
 let showInfoModal = $state(false);
+let infoModalWasOpen = false;
+let showLoadoutEditor = $state(false);
+$effect(() => {
+  if (!showLoadoutEditor && infoModalWasOpen) {
+    showInfoModal = true;
+    infoModalWasOpen = false;
+  }
+});
+
+let everSelectedAgent = $state(false);
+$effect(() => {
+  if (selectedAgent) {
+    everSelectedAgent = true;
+  }
+});
+
 let selectedAgent: [BotInfo, string, string] | null = $state(null);
 $effect(() => {
-  if (!showInfoModal) {
+  if (!showInfoModal && !showLoadoutEditor) {
     selectedAgent = null;
   }
 });
@@ -247,7 +268,9 @@ function OpenSelectedBotSource() {
 
 function EditSelectedBotLoadout() {
   if (selectedAgent) {
-    alert.bind(null, "Not implemented yet")();
+    infoModalWasOpen = showInfoModal;
+    showInfoModal = false;
+    showLoadoutEditor = true;
   }
 }
 
@@ -430,6 +453,25 @@ function SelectedToggleFavorite() {
 {/if}
 </Modal>
 
+<!-- prevent loading the items if unneeded,
+ but also prevent loading the items more than once -->
+{#if everSelectedAgent}
+  <!-- svelte-ignore block_empty -->
+  {#await getAndParseItems() then items}
+    {#if selectedAgent && selectedAgent[0].loadout}
+      <LoadoutEditor
+        bind:visible={showLoadoutEditor}
+        basePath={selectedAgent[0].tomlPath}
+        loadoutFile={selectedAgent[0].config.settings.loadoutFile}
+        loadout={selectedAgent[0].loadout}
+        {items}
+        name={selectedAgent[1]}
+        {map}
+      />
+    {/if}
+  {/await}
+{/if}
+
 <style>
   .bots span {
     color: gray;

frontend/src/assets/eye.svg

@@ -0,0 +1,115 @@
+<script lang="ts">
+import { COLORS } from "./colors";
+
+let {
+  value = $bindable(),
+  team,
+  text,
+  onchange,
+}: {
+  value: number;
+  team: string | null;
+  text: string;
+  onchange: () => void;
+} = $props();
+
+let pickedColor = $derived(getColorStyle(value));
+
+const ROWS = 7;
+const COLUMNS = team ? 10 : 15;
+
+function getColorStyle(colorID: number) {
+  const colors = team ? COLORS[team] : COLORS.secondary;
+  const rgb = colors[colorID];
+  return rgb ? rgb.toString() : "";
+}
+
+function pickedItemClass(colorID: number) {
+  return value === colorID ? "selected-color" : "";
+}
+
+const COLOR_IDS: number[][] = [];
+for (let i = 0; i < ROWS; i++) {
+  COLOR_IDS.push([]);
+  for (let j = 0; j < COLUMNS; j++) {
+    COLOR_IDS[i].push(i * COLUMNS + j);
+  }
+}
+
+function handleClick(id: number) {
+  value = id;
+  onchange();
+}
+</script>
+
+<div class="dropdown">
+  <button>
+    <span class="color-indicator" style="background-color: rgb({pickedColor})"
+    ></span>
+    {text}
+  </button>
+  <div class="dropmenu {team ? 'left' : 'center'}">
+    <table>
+      <tbody>
+        {#each COLOR_IDS as idsRow}
+          <tr>
+            {#each idsRow as id}
+              <td>
+                <!-- svelte-ignore a11y_consider_explicit_label -->
+                <button
+                  style="background-color: rgb({getColorStyle(id)})"
+                  onclick={() => handleClick(id)}
+                >
+                  <div class="colorpicker-color {pickedItemClass(id)}"></div>
+                </button>
+              </td>
+            {/each}
+          </tr>
+        {/each}
+      </tbody>
+    </table>
+  </div>
+</div>
+
+<style>
+  button {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+  table {
+    border-spacing: 0;
+  }
+  .dropmenu {
+    padding: 0px;
+    margin-left: 10px;
+    margin-right: 10px;
+    margin-bottom: -5px;
+    border: 8px solid var(--background-but);
+    border-radius: 5px;
+  }
+  .dropmenu td,
+  .dropmenu button {
+    border: 0;
+    border-radius: 0;
+    padding: 0;
+  }
+  .colorpicker-color {
+    width: 25px;
+    height: 25px;
+    cursor: pointer;
+  }
+  .colorpicker-color:hover {
+    border: 2px solid rgba(0, 0, 0, 0.74);
+  }
+  .selected-color {
+    border: 2px dashed rgba(0, 0, 0, 0.897);
+  }
+  .color-indicator {
+    border-radius: 12px;
+    width: 24px;
+    height: 24px;
+    display: inline-block;
+    vertical-align: middle;
+  }
+</style>