[+] Submit matching settings

AquaNet/src/components/settings/ChuniMatchingSettings.svelte

@@ -1,56 +1,53 @@
 <script lang="ts">
+  import { fade } 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 StatusOverlays from "../StatusOverlays.svelte";
   import GameSettingFields from "./GameSettingFields.svelte";
 
-  let custom = false;
+  let custom = false
+  let overlay = false
+  let loading = false
+  let error = ""
 
+  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
+    }
+  })
+
+  // Click on "Custom" option"
+  function clickCustom() {
+    custom = true
+    overlay = false
+  }
+
+  // Click on a matching option, set the reflector and matching server
+  function clickOption(opt: ChusanMatchingOption) {
+    Promise.all([
+      SETTING.set('chusanMatchingReflector', opt.reflector),
+      SETTING.set('chusanMatchingServer', opt.matching),
+    ]).then(() => {
+      overlay = false
+      custom = false
+      existingUrl = opt.matching
+    }).catch(e => error = e.message)
+  }
 </script>
 
+<StatusOverlays {error} {loading}/>
+
 <div class="matching">
   <h2>{t("userbox.header.matching")}</h2>
   <p class="notice">{t("settings.cabNotice")}</p>
 
   <div class="matching-selector">
-    <button>{t('userbox.matching.select')}</button>
+    <button on:click={_ => overlay = true}>{t('userbox.matching.select')}</button>
-  </div>
-
-  <div class="overlay">
-    <div>
-      <div>
-        <h2>{t('userbox.header.matching')}</h2>
-        <p>Choose the matching server you want to use.</p>
-      </div>
-      <div class="options">
-        <!-- Selectable options -->
-        {#each CHU3_MATCHINGS as option}
-        <div class="option">
-          <span class="name">{option.name}</span>
-          <div class="links">
-            <a href={option.ui} target="_blank" rel="noopener">{t('userbox.matching.option.ui')}</a> /
-            <a href={option.guide} target="_blank" rel="noopener">{t('userbox.matching.option.guide')}</a>
-          </div>
-
-          <div class="divider"></div>
-
-          <div class="coop">
-            <span>Collaborators</span>
-            <div>
-              {#each option.coop as coop}
-                <span>{coop}</span>
-              {/each}
-            </div>
-          </div>
-        </div>
-        {/each}
-
-        <!-- Placeholder option for "Custom" -->
-        <div class="option">
-          <span class="name">Custom</span>
-          <p class="notice">Enter your own URL</p>
-        </div>
-      </div>
-    </div>
   </div>
 
   {#if custom}
@@ -58,6 +55,52 @@ import { t } from "../../libs/i18n.js";
   {/if}
 </div>
 
+{#if overlay}
+<div class="overlay" transition:fade>
+  <div>
+    <div>
+      <h2>{t('userbox.header.matching')}</h2>
+      <p>Choose the matching server you want to use.</p>
+    </div>
+    <div class="options">
+      <!-- Selectable options -->
+      {#each CHU3_MATCHINGS as option}
+      <div class="clickable option" on:click={() => clickOption(option)}
+        role="button" tabindex="0" on:keypress={e => e.key === 'Enter' && clickOption(option)}
+        class:selected={!custom && existingUrl === option.matching}>
+
+        <span class="name">{option.name}</span>
+        <div class="links">
+          <a href={option.ui} target="_blank" rel="noopener">{t('userbox.matching.option.ui')}</a> /
+          <a href={option.guide} target="_blank" rel="noopener">{t('userbox.matching.option.guide')}</a>
+        </div>
+
+        <div class="divider"></div>
+
+        <div class="coop">
+          <span>Collaborators</span>
+          <div>
+            {#each option.coop as coop}
+              <span>{coop}</span>
+            {/each}
+          </div>
+        </div>
+      </div>
+      {/each}
+
+      <!-- Placeholder option for "Custom" -->
+      <div class="clickable option" on:click={clickCustom}
+        role="button" tabindex="0" on:keypress={e => e.key === 'Enter' && clickCustom()}
+        class:selected={custom}>
+
+        <span class="name">Custom</span>
+        <p class="notice custom">Enter your own URL</p>
+      </div>
+    </div>
+  </div>
+</div>
+{/if}
+
 <style lang="sass">
 @use "../../vars"
 
@@ -69,9 +112,12 @@ import { t } from "../../libs/i18n.js";
   h2
     margin-bottom: 0
 
-  p.notice
+p.notice
-    opacity: 0.6
+  opacity: 0.6
-    margin: 0
+  margin: 0
+
+  &.custom
+    font-size: 0.9rem
 
 .options
   display: flex
@@ -89,6 +135,9 @@ import { t } from "../../libs/i18n.js";
   padding: 1rem
   min-width: 150px
 
+  &.selected
+    border: 1px solid vars.$c-good
+
   .divider
     width: 100%
     height: 0.5px

AquaNet/src/libs/config.ts

@@ -1,3 +1,4 @@
+import type { ChusanMatchingOption } from "./generalTypes"
 
 export const AQUA_HOST = 'https://aquadx.net/aqua'
 export const DATA_HOST = 'https://aquadx.net'
@@ -21,7 +22,7 @@ export const HAS_USERBOX_ASSETS = true
 // Meow meow meow
 
 // Matching servers
-export const CHU3_MATCHINGS = [
+export const CHU3_MATCHINGS: ChusanMatchingOption[] = [
   {
     name: "林国对战",
     ui: "https://chu3-match.sega.ink/rooms",

AquaNet/src/libs/generalTypes.ts

@@ -153,3 +153,12 @@ export interface UserBox {
   level: number
   playerRating: number
 }
+
+export interface ChusanMatchingOption {
+  name: string
+  ui: string
+  guide: string
+  matching: string
+  reflector: string
+  coop: string[]
+}