fix: add options on website

AquaNet/src/components/settings/ChuniMatchingSettings.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
-  import { fade } from "svelte/transition";
+  import { fade, slide } from "svelte/transition";
   import { CHU3_MATCHINGS } from "../../libs/config.js";
   import type { ChusanMatchingOption, GameOption } from "../../libs/generalTypes.js";
-import { t } from "../../libs/i18n.js";
-  import { SETTING } from "../../libs/sdk.js";
+  import { t, ts } from "../../libs/i18n.js";
+  import { DATA, SETTING } from "../../libs/sdk.js";
   import StatusOverlays from "../StatusOverlays.svelte";
   import GameSettingFields from "./GameSettingFields.svelte";
 
@@ -12,14 +12,42 @@ import { t } from "../../libs/i18n.js";
   let loading = false
   let error = ""
 
-  let existingUrl = ""
+  let changed: string[] = [];
+  let symbols: Record<number, number> = {};
+  let allItems: Record<string, Record<string, { name: string }>> = {}
+  let submitting: string | undefined | null;  
+
+  let existingUrl = "";
   SETTING.get().then(s => {
     existingUrl = s.filter(it => it.key === 'chusanMatchingServer')[0]?.value
 
     if (existingUrl && !CHU3_MATCHINGS.some(it => it.matching === existingUrl)) {
       custom = true
     }
+
+    const symbolKey = "chusanSymbolChat"
+    s.forEach(opt => {
+      if (opt.key.substring(0, symbolKey.length) == symbolKey && opt.value)
+        symbols[parseInt(opt.key.substring(symbolKey.length))] = opt.value;
     })
+  })
+
+  async function fetchSymbolData() {
+    allItems = await DATA.allItems('chu3').catch(_ => {
+      loading = false
+      error = t("userbox.error.nodata")
+    }) as typeof allItems
+  }
+
+  async function submitSymbol(id: number) {
+    if (submitting) return false
+    const field = `chusanSymbolChat${id + 1}`;
+    submitting = field
+
+    await SETTING.set(field, symbols[id + 1]).catch(e => error = e.message).finally(() => submitting = null);
+    changed = changed.filter(v => v != `symbolChat${id}`)
+    return true
+  }
 
   // Click on "Custom" option"
   function clickCustom() {
@@ -53,6 +81,28 @@ import { t } from "../../libs/i18n.js";
   {#if custom}
     <GameSettingFields game="chu3-matching"/>
   {/if}
+
+  <h2>{t("userbox.header.matching.symbolChat")}</h2>
+  {#await fetchSymbolData() then}
+    {#each {length: 4}, i}
+      <div class="field">
+        <label for={`symbolChat${i}`}>{ts(`userbox.matching.symbolChat`) + ` #${i + 1}`}</label>
+        <div>
+          <select bind:value={symbols[i + 1]} id={`symbolChat${i}`} on:change={() => {changed = [...changed, `symbolChat${i}`];}}>
+            <option value={null}>{ts(`userbox.matching.symbolChat.default`)}</option>
+            {#each Object.entries(allItems.symbolChat).filter((f) => parseInt(f[0]) !== 0) as [id, option]}
+              <option value={parseInt(id)}>{option?.name || `(unknown ${id})`}</option>
+            {/each}
+          </select>
+          {#if changed.includes(`symbolChat${i}`)}
+            <button transition:slide={{axis: "x"}} disabled={!!submitting} on:click={() => submitSymbol(i)}>
+              {t("settings.profile.save")}
+            </button>
+          {/if}
+        </div>
+      </div>
+    {/each}
+  {/await}
 </div>
 
 {#if overlay}

AquaNet/src/libs/i18n/en_ref.ts

@@ -190,6 +190,7 @@ export const EN_REF_SETTINGS = {
 export const EN_REF_USERBOX = {
   'userbox.header.general': 'General Settings',
   'userbox.header.matching': 'National Matching',
+  'userbox.header.matching.symbolChat': 'Chat Symbols (Matching)',
   'userbox.header.userbox': 'UserBox Settings',
   'userbox.header.preview': 'UserBox Preview',
   'userbox.nameplateId': 'Nameplate',
@@ -216,6 +217,8 @@ export const EN_REF_USERBOX = {
   'userbox.matching.option.collab': 'Collaborators',
   'userbox.matching.custom.name': 'Custom',
   'userbox.matching.custom.sub': 'Enter your own URL',
+  'userbox.matching.symbolChat': 'Message Choice',
+  'userbox.matching.symbolChat.default': 'Default',
 
   'userbox.new.name': 'AquaBox',
   'userbox.new.setup': 'Drag and drop your Chuni game folder (Lumi or newer) into the box below to display UserBoxes with their nameplate & avatar. All files are handled in-browser.',