mirror of https://github.com/hykilpikonna/AquaDX
88 lines
2.3 KiB
Svelte
88 lines
2.3 KiB
Svelte
<script lang="ts">
|
|
import { slide, fade } from "svelte/transition";
|
|
import { FADE_IN, FADE_OUT } from "../libs/config";
|
|
import GameSettingFields from "./GameSettingFields.svelte";
|
|
import { t } from "../libs/i18n.js";
|
|
import Icon from "@iconify/svelte";
|
|
import StatusOverlays from "./StatusOverlays.svelte";
|
|
import { GAME } from "../libs/sdk";
|
|
|
|
const profileFields = [
|
|
['name', t('settings.mai2.name')],
|
|
]
|
|
|
|
export let username: string;
|
|
let error: string
|
|
let submitting = ""
|
|
let values = Array(profileFields.length).fill('')
|
|
let changed: string[] = []
|
|
|
|
GAME.userSummary(username, 'mai2').then(({name}) => {
|
|
values = [name]
|
|
}).catch(e => error = e.message)
|
|
|
|
function submit(field: string, value: string) {
|
|
if (submitting) return
|
|
submitting = field
|
|
|
|
switch (field) {
|
|
case 'name':
|
|
GAME.changeName('mai2', value).then(({newName}) => {
|
|
changed = changed.filter(c => c !== field)
|
|
values = [newName]
|
|
}).catch(e => error = e.message).finally(() => submitting = "")
|
|
break
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<main>
|
|
<div class="fields" out:fade={FADE_OUT} in:fade={FADE_IN}>
|
|
{#each profileFields as [field, name], i (field)}
|
|
<div class="field">
|
|
<label for={field}>{name}</label>
|
|
<div>
|
|
<input id={field} type="text"
|
|
bind:value={values[i]} on:input={() => changed = [...changed, field]}
|
|
placeholder={field === 'password' ? t('settings.profile.unchanged') : t('settings.profile.unset')}/>
|
|
{#if changed.includes(field) && values[i]}
|
|
<button transition:slide={{axis: 'x'}} on:click={() => submit(field, values[i])}>
|
|
{#if submitting === field}
|
|
<Icon icon="line-md:loading-twotone-loop"/>
|
|
{:else}
|
|
{t('settings.profile.save')}
|
|
{/if}
|
|
</button>
|
|
{/if}
|
|
</div>
|
|
</div>
|
|
{/each}
|
|
<GameSettingFields game="mai2"/>
|
|
</div>
|
|
|
|
<StatusOverlays {error} loading={!values[0] || !!submitting}/>
|
|
</main>
|
|
|
|
<style lang="sass">
|
|
.fields
|
|
display: flex
|
|
flex-direction: column
|
|
gap: 12px
|
|
|
|
.field
|
|
display: flex
|
|
flex-direction: column
|
|
|
|
label
|
|
max-width: max-content
|
|
|
|
> div:not(.bool)
|
|
display: flex
|
|
align-items: center
|
|
gap: 1rem
|
|
margin-top: 0.5rem
|
|
|
|
> input
|
|
flex: 1
|
|
</style>
|