mirror of https://github.com/hykilpikonna/AquaDX
[+] Submit matching settings
parent
9489151bc1
commit
0bda8406c3
|
@ -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
|
||||
|
|
|
@ -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",
|
||||
|
|
|
@ -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[]
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue