From 9489151bc1bc7e96456d86206cd6f667a8cbb704 Mon Sep 17 00:00:00 2001
From: Azalea <22280294+hykilpikonna@users.noreply.github.com>
Date: Fri, 3 Jan 2025 16:33:38 -0500
Subject: [PATCH] [+] UI Matching settings

---
 .../settings/ChuniMatchingSettings.svelte     | 112 ++++++++++++++++++
 .../components/settings/ChuniSettings.svelte  |  21 ++--
 2 files changed, 124 insertions(+), 9 deletions(-)
 create mode 100644 AquaNet/src/components/settings/ChuniMatchingSettings.svelte

diff --git a/AquaNet/src/components/settings/ChuniMatchingSettings.svelte b/AquaNet/src/components/settings/ChuniMatchingSettings.svelte
new file mode 100644
index 00000000..343ae76f
--- /dev/null
+++ b/AquaNet/src/components/settings/ChuniMatchingSettings.svelte
@@ -0,0 +1,112 @@
+<script lang="ts">
+  import { CHU3_MATCHINGS } from "../../libs/config.js";
+import { t } from "../../libs/i18n.js";
+  import GameSettingFields from "./GameSettingFields.svelte";
+
+  let custom = false;
+
+</script>
+
+<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>
+  </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}
+    <GameSettingFields game="chu3-matching"/>
+  {/if}
+</div>
+
+<style lang="sass">
+@use "../../vars"
+
+.matching
+  display: flex
+  flex-direction: column
+  gap: 12px
+
+  h2
+    margin-bottom: 0
+
+  p.notice
+    opacity: 0.6
+    margin: 0
+
+.options
+  display: flex
+  flex-wrap: wrap
+  gap: 1rem
+
+.option
+  flex: 1
+  display: flex
+  flex-direction: column
+  align-items: center
+
+  border-radius: vars.$border-radius
+  background: vars.$ov-light
+  padding: 1rem
+  min-width: 150px
+
+  .divider
+    width: 100%
+    height: 0.5px
+    background: white
+    opacity: 0.2
+    margin: 0.8rem 0
+
+  .name
+    font-size: 1.1rem
+    font-weight: bold
+
+  .coop
+    text-align: center
+
+    div
+      display: flex
+      flex-direction: column
+      font-size: 0.9rem
+      opacity: 0.6
+
+</style>
diff --git a/AquaNet/src/components/settings/ChuniSettings.svelte b/AquaNet/src/components/settings/ChuniSettings.svelte
index 2a5f2c33..b57a0c8b 100644
--- a/AquaNet/src/components/settings/ChuniSettings.svelte
+++ b/AquaNet/src/components/settings/ChuniSettings.svelte
@@ -23,6 +23,7 @@
 
   import useLocalStorage from "../../libs/hooks/useLocalStorage.svelte";
   import { DDS } from "../../libs/userbox/dds";
+  import ChuniMatchingSettings from "./ChuniMatchingSettings.svelte";
 
   let user: AquaNetUser
   let [loading, error, submitting, preview] = [true, "", "", ""]
@@ -91,7 +92,7 @@
     user = u
     return fetchData()
   }).catch((e) => { loading = false; error = e.message });
-  
+
   let DDSreader: DDS | undefined;
 
   let USERBOX_PROGRESS = 0;
@@ -155,10 +156,10 @@
     </div>
   {:else}
     <div class="chuni-userbox-container">
-      <ChuniUserplateComponent on:click={() => userboxSelected = "nameplateId"} chuniCharacter={userbox.characterId} chuniLevel={userbox.level} chuniRating={userbox.playerRating / 100} 
+      <ChuniUserplateComponent on:click={() => userboxSelected = "nameplateId"} chuniCharacter={userbox.characterId} chuniLevel={userbox.level} chuniRating={userbox.playerRating / 100}
         chuniNameplate={userbox.nameplateId} chuniName={userbox.userName} chuniTrophyName={allItems.trophy[userbox.trophyId].name}></ChuniUserplateComponent>
-      <ChuniPenguinComponent classPassthrough="chuni-penguin-float" chuniWear={userbox.avatarWear} chuniHead={userbox.avatarHead} chuniBack={userbox.avatarBack} 
-        chuniFront={userbox.avatarFront} chuniFace={userbox.avatarFace} chuniItem={userbox.avatarItem} 
+      <ChuniPenguinComponent classPassthrough="chuni-penguin-float" chuniWear={userbox.avatarWear} chuniHead={userbox.avatarHead} chuniBack={userbox.avatarBack}
+        chuniFront={userbox.avatarFront} chuniFace={userbox.avatarFace} chuniItem={userbox.avatarItem}
         chuniSkin={userbox.avatarSkin}></ChuniPenguinComponent>
     </div>
     <div class="chuni-userbox-row">
@@ -224,7 +225,7 @@
       <p>
         <button on:click={() => USERBOX_SETUP_RUN = !USERBOX_SETUP_RUN}>{t(!USERBOX_INSTALLED ? `userbox.new.activate_first` : `userbox.new.activate_update`)}</button>
       </p>
-    {/if} 
+    {/if}
     {#if !USERBOX_SUPPORT || !USERBOX_INSTALLED || !USERBOX_ENABLED.value}
       <h2>{t("userbox.header.preview")}</h2>
       <p class="notice">{t("userbox.preview.notice")}</p>
@@ -241,9 +242,11 @@
       {/if}
     {/if}
   {/if}
+
+  <ChuniMatchingSettings/>
 </div>
 {/if}
- 
+
 {#if USERBOX_SETUP_RUN && !error}
   <div class="overlay" transition:fade>
     <div>
@@ -282,7 +285,7 @@ p.notice
   opacity: 0.6
   margin-top: 0
 
-.progress 
+.progress
   width: 100%
   height: 10px
   box-shadow: 0 0 1px 1px vars.$ov-lighter
@@ -415,10 +418,10 @@ p.notice
       &.focused
         filter: brightness(75%)
 
-.chuni-userbox 
+.chuni-userbox
   width: calc(100% - 20px)
   height: 350px
-  
+
   display: flex
   flex-direction: row
   flex-wrap: wrap