feat: InventoryPreset for InventoryManager

src-theme/src/integration/types.ts

@@ -15,6 +15,7 @@ export interface GroupedModules {
 
 export type ModuleSetting =
     BlocksSetting
+    | InventoryPresetValue
     | BooleanSetting
     | FloatSetting
     | FloatRangeSetting
@@ -34,6 +35,47 @@ export type ModuleSetting =
     | VectorSetting
     | KeySetting;
 
+export interface SingleItemPreference {
+    type: "SINGLE";
+    item: string;
+}
+export interface GroupItemPreference {
+    type: "GROUP";
+    group: "ARROWS" | "SWORD" | "WEAPON" | "AXE" | "HOE" | "SHOVEL" | "PICKAXE" | "FOOD" | "POTION" | "BLOCK" | "THROWABLE";
+}
+
+export interface IgnoreItemPreference {
+    type: "IGNORE";
+}
+
+export interface AnyPresetItem {
+    type: "ANY";
+}
+
+export type PresetItem =
+    SingleItemPreference
+    | GroupItemPreference
+    | IgnoreItemPreference
+    | AnyPresetItem;
+
+export interface MaxStacksGroup {
+    itemCount: number;
+    items: PresetItem[];
+}
+
+export type PresetItemGroup = PresetItem[];
+
+export interface InventoryPreset {
+    items: PresetItemGroup[];
+    maxStacks: MaxStacksGroup[];
+}
+
+export interface InventoryPresetValue {
+    name: string;
+    valueType: string;
+    value: InventoryPreset;
+}
+
 export interface BlocksSetting {
     valueType: string;
     name: string;

src-theme/src/routes/clickgui/setting/common/GenericSetting.svelte

@@ -19,6 +19,7 @@
     import MutableListSetting from "../list/MutableListSetting.svelte";
     import ItemListSetting from "../list/ItemListSetting.svelte";
     import RegistryListSetting from "../list/RegistryListSetting.svelte";
+    import InventoryPresetValue from "../inventoryPreset/InventoryPresetValue.svelte";
 
     export let setting: ModuleSetting;
     export let path: string;
@@ -28,6 +29,8 @@
 <div in:slide|global={{duration: 200, axis: "y"}} out:slide|global={{duration: 200, axis: "y"}}>
     {#if setting.valueType === "BOOLEAN"}
         <BooleanSetting bind:setting={setting} on:change/>
+    {:else if setting.valueType === "INVENTORY_PRESET"}
+        <InventoryPresetValue bind:setting={setting} on:change/>
     {:else if setting.valueType === "CHOICE"}
         <ChoiceSetting {path} bind:setting={setting} on:change/>
     {:else if setting.valueType === "CHOOSE"}

src-theme/src/routes/clickgui/setting/common/ValueInput.svelte

@@ -53,4 +53,4 @@
     min-width: 5px;
     display: inline-block;
   }
-</style>
+</style>

src-theme/src/routes/clickgui/setting/inventoryPreset/InventoryPresetValue.svelte

@@ -0,0 +1,79 @@
+<script lang="ts">
+    import type {InventoryPresetValue, ModuleSetting} from "../../../../integration/types";
+    import {spaceSeperatedNames} from "../../../../theme/theme_config";
+    import {createEventDispatcher} from "svelte";
+    import ItemPreview from "./ItemPreview.svelte";
+    import PresetModal from "./config/PresetModal.svelte";
+
+    export let setting: ModuleSetting;
+
+    let configuring = false
+
+    const cSetting = setting as InventoryPresetValue;
+
+    $: preset = cSetting.value
+
+    const dispatch = createEventDispatcher();
+
+    function handleChange() {
+        setting = {...cSetting};
+        dispatch("change");
+    }
+</script>
+
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<div class="setting">
+    <div class="head">
+        <span class="title">{$spaceSeperatedNames ? "Inventory Preset" : "InventoryPreset"}</span>
+    </div>
+
+    <div class="presets">
+        <div class="preset" on:click={() => configuring = true}>
+            {#each preset.items as group, idx (idx)}
+                <ItemPreview bind:group />
+            {/each}
+        </div>
+    </div>
+</div>
+
+{#if configuring}
+    <PresetModal
+            bind:preset
+            on:close={() => configuring = false}
+            on:change={handleChange}
+    />
+{/if}
+
+<style lang="scss">
+  @use "../../../../colors.scss" as *;
+
+  .preset {
+    display: flex;
+    justify-content: space-between;
+    cursor: pointer;
+  }
+
+  .setting {
+    padding: 7px 0;
+    color: $clickgui-text-color;
+  }
+
+  .head {
+    margin-bottom: 10px;
+  }
+
+  .presets {
+    margin-bottom: 5px;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: 5px;
+  }
+
+  .title {
+    color: $clickgui-text-color;
+    font-size: 12px;
+    font-weight: 600;
+  }
+</style>

src-theme/src/routes/clickgui/setting/inventoryPreset/ItemImage.svelte

@@ -0,0 +1,57 @@
+<script lang="ts">
+    import type {GroupItemPreference, PresetItem} from "../../../../integration/types";
+    import {REST_BASE} from "../../../../integration/host";
+
+    function getIconNameFor(item: GroupItemPreference): string {
+        switch (item.group) {
+            case "ARROWS":
+                return "arrow.png";
+            case "SWORD":
+            case "WEAPON":
+                return "sword.png";
+            case "AXE":
+                return "axe.png";
+            case "HOE":
+                return "hoe.png";
+            case "SHOVEL":
+                return "shovel.png";
+            case "PICKAXE":
+                return "pickaxe.png";
+            case "FOOD":
+                return "food.png";
+            case "POTION":
+                return "potion.png";
+            case "BLOCK":
+                return "blocks.png";
+            case "THROWABLE":
+                return "egg.png";
+            default:
+                throw new Error("Illegal value.");
+        }
+    }
+
+    export let item: PresetItem;
+</script>
+
+{#if item.type === "SINGLE"}
+    <img src="{REST_BASE}/api/v1/client/resource/itemTexture?id={item.item}" alt={item.item}/>
+{:else if item.type === "GROUP"}
+    <img src="img/clickgui/icon-{getIconNameFor(item)}" alt="{item.group}"/>
+{:else if item.type === "IGNORE"}
+    <img src="img/clickgui/icon-ignore.svg" alt="Tools"/>
+{:else if item.type === "ANY"}
+    <img src="img/clickgui/icon-any.svg" alt="Any"/>
+{:else}
+    <img class="muted" src="img/clickgui/icon-value-none.svg" alt="Any"/>
+{/if}
+
+<style lang="scss">
+  .muted {
+    fill: red !important;
+  }
+
+  img {
+    width: 100%;
+    height: 100%;
+  }
+</style>

src-theme/src/routes/clickgui/setting/inventoryPreset/ItemPreview.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">
+    import type {PresetItemGroup} from "../../../../integration/types";
+    import ItemImage from "./ItemImage.svelte";
+
+    export let group: PresetItemGroup
+    let currentIndex = 1
+
+    $: rendered = group.filter(item => item.type != "ANY")
+
+    setInterval(() => {
+        currentIndex++
+    }, 1000)
+</script>
+
+<div class="preset-item">
+    {#if rendered.length > 0}
+        <div class="img-wrapper">
+            <ItemImage bind:item={rendered[currentIndex % rendered.length]}/>
+        </div>
+    {/if}
+</div>
+
+<style lang="scss">
+  @use "sass:color";
+  @use "../../../../colors.scss" as *;
+
+  .preset-item {
+    width: 20px;
+    height: 20px;
+    outline: 1px solid color.adjust($clickgui-text-color, $lightness: -90%);
+    border-radius: 3px;
+    display: flex;
+    justify-content: center;
+    align-content: center;
+    align-items: center;
+  }
+
+  .img-wrapper {
+    width: 16px;
+    height: 16px;
+  }
+</style>