[+] Submit matching settings

pull/100/head
Azalea 2025-01-03 16:51:03 -05:00
parent 9489151bc1
commit 0bda8406c3
3 changed files with 103 additions and 44 deletions

View File

@ -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>
</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>
<button on:click={_ => overlay = true}>{t('userbox.matching.select')}</button>
</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
opacity: 0.6
margin: 0
p.notice
opacity: 0.6
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

View File

@ -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",

View File

@ -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[]
}