Snippets for randomize config implemented.

src/web/components/config-editor/components/sections/randomize-config-section.vue

@@ -8,6 +8,7 @@ import ConfigBounds from "@/web/components/config-editor/components/inputs/confi
 import InitialConfigSection from "@/web/components/config-editor/components/sections/initial-config-section.vue";
 import Flag from "@/web/components/config-editor/components/inputs/flag.vue";
 import InputHeader from "@/web/components/config-editor/components/base/input-header.vue";
+import RandomizeConfigSnippets from "@/web/components/config-editor/components/widgets/randomize-config-snippets.vue";
 
 const configStore = useConfigStore();
 const { randomTypesConfig, typesConfig } = configStore;
@@ -234,6 +235,11 @@ const randomizeTypesConfig = () => {
       <button class="btn btn-outline-primary" @click="randomizeTypesConfig" style="width: 100%;">
         {{ needRefill ? 'Randomize and Refill' : 'Randomize' }}
       </button>
+      <br />
+      <br />
+      <br />
+      <h4>Snippets</h4>
+      <randomize-config-snippets />
     </template>
   </config-section>
 </template>

src/web/components/config-editor/components/widgets/randomize-config-snippets.vue

@@ -0,0 +1,52 @@
+<script setup lang="ts">
+
+import { ref } from "vue";
+import { useSnippetsStore } from "@/web/store/snippets";
+import { useConfigStore } from "@/web/store/config";
+import type { RandomTypesConfig } from "@/lib/types/config";
+
+const snippetsStore = useSnippetsStore();
+const configStore = useConfigStore();
+
+const newSnippetName = ref('');
+const saveSnippet = () => {
+  snippetsStore.addRandomTypesConfig(configStore.randomTypesConfig, newSnippetName.value);
+  newSnippetName.value = '';
+}
+const removeSnippet = (index: number) => {
+  if (!confirm('Are you sure?')) {
+    return;
+  }
+
+  snippetsStore.removeRandomTypesConfig(index);
+}
+const applySnippet = (config: RandomTypesConfig) => {
+  console.log('APPLY', config);
+  configStore.setRandomTypesConfig(config);
+}
+
+</script>
+
+<template>
+  <div class="input-group mb-3">
+    <input type="text" class="form-control" placeholder="Input snippet name" v-model="newSnippetName" />
+    <div class="input-group-append">
+      <button class="btn btn-outline-secondary" @click="saveSnippet" :disabled="!newSnippetName">Save</button>
+    </div>
+  </div>
+  <div class="list-group">
+    <div class="list-group-item d-flex justify-content-between align-items-center" v-for="(snippet, index) in snippetsStore.randomTypesConfigList" :key="index">
+      <div class="list-item__name">
+        {{ snippet.name }}
+      </div>
+      <div class="btn-group">
+        <button class="btn btn-outline-secondary" @click="applySnippet(snippet.value)">Apply</button>
+        <button class="btn btn-outline-secondary" @click="removeSnippet(index)">Remove</button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+
+</style>

src/web/store/config.ts

@@ -90,6 +90,13 @@ export const useConfigStore = defineStore("config", () => {
     setWorldConfigRaw(newConfig);
   }
 
+  const setRandomTypesConfig = (newConfig: RandomTypesConfig) => {
+    const buf = fullCopyObject(newConfig);
+    for (const i in newConfig) {
+      (randomTypesConfig.value[i as keyof RandomTypesConfig] as number) = buf[i as keyof RandomTypesConfig] as number;
+    }
+  }
+
   const exportConfig = () => {
     return {
       worldConfig: worldConfigRaw,
@@ -262,6 +269,7 @@ export const useConfigStore = defineStore("config", () => {
     setWorldConfig,
     randomizeTypesConfig,
     setDefaultTypesConfig,
+    setRandomTypesConfig,
     appendType,
     addTypesFromConfig,
     removeTypeFromConfig,

src/web/store/local.ts

@@ -0,0 +1,42 @@
+import { defineStore } from "pinia";
+
+type StoredData = Record<string, unknown> | unknown[];
+
+export const useLocalStore = defineStore("local", () => {
+  const get = (alias: string) => {
+    return JSON.parse(localStorage.getItem(alias) as string);
+  }
+
+  const set = (alias: string, value: StoredData) => {
+    localStorage.setItem(alias, JSON.stringify(value));
+  }
+
+  const remove = (alias: string) => {
+    localStorage.removeItem(alias);
+  }
+
+  const addToArray = (alias: string, value: StoredData): number => {
+    const old = (get(alias) ?? []) as unknown[];
+    set(alias, [...old, value]);
+    return old.length;
+  }
+
+  const getFromArray = (alias: string, index: number): StoredData => {
+    const old = get(alias);
+    return old[index];
+  }
+
+  const removeFromArray = (alias: string, index: number) => {
+    const old = get(alias);
+    set(alias, [...old.slice(0, index), ...old.slice(index + 1)]);
+  }
+
+  return {
+    set,
+    get,
+    remove,
+    addToArray,
+    getFromArray,
+    removeFromArray,
+  }
+});

src/web/store/snippets.ts

@@ -0,0 +1,39 @@
+import type { RandomTypesConfig } from "@/lib/types/config";
+import { defineStore } from "pinia";
+import { useLocalStore } from "./local";
+import { ref } from "vue";
+
+type StoredRandomTypesConfig = {
+  name: string;
+  value: RandomTypesConfig;
+};
+
+export const useSnippetsStore = defineStore("snippets", () => {
+  const localStore = useLocalStore();
+  const randomTypesConfigList = ref<StoredRandomTypesConfig[]>(localStore.get('randomTypesConfig') ?? []);
+
+  const updateRandomTypesConfigList = () => {
+    randomTypesConfigList.value = localStore.get('randomTypesConfig') ?? [];
+  }
+
+  const getRandomTypesConfigItem = (index: number): StoredRandomTypesConfig => {
+    return localStore.getFromArray('randomTypesConfig', index) as StoredRandomTypesConfig;
+  }
+
+  const addRandomTypesConfig = (config: RandomTypesConfig, name: string) => {
+    localStore.addToArray('randomTypesConfig', { name, value: config});
+    updateRandomTypesConfigList();
+  }
+
+  const removeRandomTypesConfig = (index: number) => {
+    localStore.removeFromArray('randomTypesConfig', index);
+    updateRandomTypesConfigList();
+  }
+
+  return {
+    randomTypesConfigList,
+    getRandomTypesConfigItem,
+    addRandomTypesConfig,
+    removeRandomTypesConfig,
+  }
+});