feat: multi-profile progress

This commit is contained in:
2025-03-06 21:40:14 +00:00
parent cda8230d7d
commit cb813a7050
6 changed files with 86 additions and 55 deletions

View File

@ -6,58 +6,82 @@ const prf = usePrfStore();
</script>
<template>
<div class="mt-4 flex flex-wrap align-middle gap-4">
<div class="mt-4 flex flex-row flex-wrap align-middle gap-4">
<Button
:disabled="prf.list.length > 0"
label="O.N.G.E.K.I. profile"
icon="pi pi-plus"
class="ongeki-button"
class="ongeki-button profile-button"
@click="() => prf.create('ongeki')"
/>
<Button
:disabled="prf.list.length > 0"
label="CHUNITHM profile"
icon="pi pi-plus"
class="chunithm-button"
class="chunithm-button profile-button"
@click="() => prf.create('chunithm')"
/>
</div>
<div class="mt-12 flex flex-col flex-wrap align-middle gap-4">
<div v-for="p in prf.list">
<Button
:disabled="
prf.current?.game === p.game && prf.current?.name === p.name
"
:label="p.name"
:class="
(p.game === 'chunithm'
? 'chunithm-button'
: 'ongeki-button') +
' ' +
'self-center grow'
"
@click="prf.switchTo(p.game, p.name)"
/>
<div class="flex flex-row flex-wrap align-middle gap-2">
<Button
:disabled="
prf.current?.game === p.game &&
prf.current?.name === p.name
"
:label="p.name"
:class="
(p.game === 'chunithm'
? 'chunithm-button'
: 'ongeki-button') +
' ' +
'self-center profile-button'
"
@click="prf.switchTo(p.game, p.name)"
/>
<Button
rounded
icon="pi pi-trash"
severity="danger"
aria-label="remove"
size="small"
class="self-center ml-2"
style="width: 2rem; height: 2rem"
:disabled="true"
/>
<Button
rounded
icon="pi pi-clone"
severity="warn"
aria-label="duplicate"
size="small"
class="self-center"
style="width: 2rem; height: 2rem"
:disabled="true"
/>
<Button
rounded
icon="pi pi-pencil"
severity="help"
aria-label="duplicate"
size="small"
class="self-center"
style="width: 2rem; height: 2rem"
:disabled="true"
/>
</div>
</div>
</div>
</template>
<style scoped>
.create-button {
background-color: var(--p-green-400);
border-color: var(--p-green-400);
width: 10em;
}
.create-button:hover,
.create-button:active {
background-color: var(--p-green-300) !important;
border-color: var(--p-green-300) !important;
.profile-button {
width: 14em;
white-space: nowrap;
}
.ongeki-button {
background-color: var(--p-pink-400);
border-color: var(--p-pink-400);
width: 14em;
}
.ongeki-button:hover,
@ -69,7 +93,6 @@ const prf = usePrfStore();
.chunithm-button {
background-color: var(--p-yellow-400);
border-color: var(--p-yellow-400);
width: 14em;
}
.chunithm-button:hover,
.chunithm-button:active {